Base64Png VS Code Extension

envelope-index.ts

import * as EditorEnvelope from "@kogito-tooling/editor/dist/envelope";
import { Base64PngEditorFactory } from "base64png-editor";
import { ChannelType, getOperatingSystem } from "@kogito-tooling/channel-common-api";

declare global {
  export const acquireVsCodeApi: any;
}

EditorEnvelope.init({
  container: document.getElementById("envelope-app")!,
  bus: acquireVsCodeApi(),
  editorFactory: new Base64PngEditorFactory(),
  editorContext: { channel: ChannelType.VSCODE, operatingSystem: getOperatingSystem() },
});

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "preLaunchTask": "npm: build"
    }
  ]
}

package-activation.json

"activationEvents": [
  "onCustomEditor:kieKogitoWebviewBase64PNGEditor",
  "onCommand:extension.kogito.createBase64Png"
]

package-commands.json

"contributes": {
"customEditors": [
    {
      "viewType": "kieKogitoWebviewBase64PNGEditor",
      "displayName": "Kogito Base64Png React Editor",
      "selector": [
        {
          "filenamePattern": "*.base64png"
        }
      ]
    }
  ],
  "commands": [
    {
      "command": "extension.kogito.createBase64Png",
      "title": "Create Base64 PNG",
      "icon": {
        "light": "./static/kogito-logo-128x128.png",
        "dark": "./static/kogito-logo-128x128.png"
      }
    },
    {
      "command": "extension.kogito.getPreviewSvg",
      "title": "Save Preview SVG",
      "icon": {
        "light": "./static/svg-icon-light.png",
        "dark": "./static/svg-icon-dark.png"
      }
    }
  ]
}

package-engine.json

"engines": {
  "vscode": "^1.46.0"
},

package-language.json

"contributes": {

  "languages": [
    {
      "id": "base64png",
      "extensions": [
        ".base64png"
      ],
      "aliases": [
        "base64png",
        "Base64 PNG"
      ]
    },
    {
      "id": "png",
      "extensions": [
        ".png"
      ],
      "aliases": [
        "png",
        "Png"
      ]
    }
  ]
}

package-main.json

"main": "./dist/extension.js",

package-menus.json

"contributes": {

  "menus": {
    "commandPalette": [
      {
        "when": "resourceLangId == png",
        "command": "extension.kogito.createBase64Png"
      },
      {
        "when": "resourceLangId == base64png",
        "command": "extension.kogito.getPreviewSvg"
      }
    ],
    "editor/title": [
      {
        "when": "resourceLangId == png",
        "command": "extension.kogito.createBase64Png",
        "group": "navigation"
      },
      {
        "when": "resourceLangId == base64png",
        "command": "extension.kogito.getPreviewSvg",
        "group": "navigation"
      }
    ]
  }
}

package-name.json

"publisher": "kogito-tooling-examples",
"name": "base64png-editor-vscode-extension"

package.json

"contributes": {
  "customEditors": [
    {
      "viewType": "kieKogitoWebviewBase64PNGEditor",
      "displayName": "Kogito Base64Png React Editor",
      "selector": [
        {
          "filenamePattern": "*.base64png"
        }
      ]
    }
  ],
  "commands": [
    {
      "command": "extension.kogito.createBase64Png",
      "title": "Create Base64 PNG",
      "icon": {
        "light": "./static/kogito-logo-128x128.png",
        "dark": "./static/kogito-logo-128x128.png"
      }
    },
    {
      "command": "extension.kogito.getPreviewSvg",
      "title": "Save Preview SVG",
      "icon": {
        "light": "./static/svg-icon-light.png",
        "dark": "./static/svg-icon-dark.png"
      }
    }
  ],
  "menus": {
    "commandPalette": [
      {
        "when": "resourceLangId == png",
        "command": "extension.kogito.createBase64Png"
      },
      {
        "when": "resourceLangId == base64png",
        "command": "extension.kogito.getPreviewSvg"
      }
    ],
    "editor/title": [
      {
        "when": "resourceLangId == png",
        "command": "extension.kogito.createBase64Png",
        "group": "navigation"
      },
      {
        "when": "resourceLangId == base64png",
        "command": "extension.kogito.getPreviewSvg",
        "group": "navigation"
      }
    ]
  },
  "languages": [
    {
      "id": "base64png",
      "extensions": [
        ".base64png"
      ],
      "aliases": [
        "base64png",
        "Base64 PNG"
      ]
    },
    {
      "id": "png",
      "extensions": [
        ".png"
      ],
      "aliases": [
        "png",
        "Png"
      ]
    }
  ]
},
"activationEvents": [
  "onCustomEditor:kieKogitoWebviewBase64PNGEditor",
  "onCommand:extension.kogito.createBase64Png"
]

task.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "build",
      "problemMatcher": "$tsc-watch",
      "isBackground": true,
      "presentation": {
        "reveal": "never"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

vscode-activate-command.ts

import * as vscode from "vscode";
import * as path from "path";
import * as fs from "fs";

context.subscriptions.push(
  vscode.commands.registerCommand("extension.kogito.createBase64Png", (file: { fsPath: string }) => {
    const buffer = fs.readFileSync(file.fsPath);
    const parsedPath = path.parse(file.fsPath);
    const base64FileName = `${parsedPath.name}${parsedPath.ext}.base64png`;
    const base64AbsoluteFilePath = path.join(parsedPath.dir, base64FileName);
    fs.writeFileSync(base64AbsoluteFilePath, buffer.toString("base64"));

    vscode.window.showInformationMessage("Generated the Base64 file with success!", "Open").then((selected) => {
      if (!selected) {
        return;
      }

      vscode.commands.executeCommand("vscode.open", vscode.Uri.parse(base64AbsoluteFilePath));
    });
  })
);

vscode-activate-deactivate.ts

import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
  console.info("Extension is alive.");
}

export function deactivate() {
  console.info("Extension is deactivating");
}

vscode-activate-kogito-editor.ts

import * as vscode from "vscode";
import * as KogitoVsCode from "@kogito-tooling/vscode-extension";

KogitoVsCode.startExtension({
  extensionName: "kogito-tooling-examples.base64png-editor-vscode-extension",
  context: context,
  viewType: "kieKogitoWebviewBase64PNGEditor",
  getPreviewCommandId: "extension.kogito.getPreviewSvg",
  editorEnvelopeLocator: {
    targetOrigin: "vscode",
    mapping: new Map([
      [
        "base64png",
        {
          resourcesPathPrefix: `dist/`,
          envelopePath: `dist/envelope/index.js`,
        },
      ],
    ]),
  },
});