feat: add monaco-editor

packages/monaco-editor/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@quasi-dev/monaco-editor",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "description": "Monaco Editor for Quasi",
+  "repository": "https://github.com/Quasi-Studio/quasi",
+  "scripts": {
+    "check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@refina/tsconfig": "link:..\\..\\..\\refina\\packages\\tsconfig",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.8"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "monaco-editor": "^0.44.0",
+    "refina": "link:..\\..\\..\\refina\\packages\\core"
+  }
+}

packages/monaco-editor/src/component.r.ts

@@ -0,0 +1,68 @@
+import * as monaco from "monaco-editor";
+import { ComponentContext, D, HTMLElementComponent, TriggerComponent, getD, ref } from "refina";
+import Monaco from "./plugin";
+
+@Monaco.triggerComponent("monacoEditor")
+export class MonacoEditor extends TriggerComponent<string> {
+  containerRef = ref<HTMLElementComponent<"div">>();
+  // overflowRef = ref<HTMLElementComponent<"div">>();
+  editor: monaco.editor.IStandaloneCodeEditor | null = null;
+  main(
+    _: ComponentContext<this>,
+    initialValue: string,
+    language: string,
+    options: Omit<
+      monaco.editor.IStandaloneEditorConstructionOptions,
+      "value" | "language" | "overflowWidgetsDomNode"
+    > = {},
+  ): void {
+    _.$css`height:100%`;
+    _.$ref(this.containerRef) && _._div();
+
+    // _.portal(_ => {
+    //   _.$ref(this.overflowRef) && _._div();
+    // });
+
+    if (_.$updating) {
+      _.$app.pushHook("afterModifyDOM", () => {
+        setTimeout(() => {
+          if (!this.editor) {
+            const node = this.containerRef.current!.node;
+
+            this.editor = monaco.editor.create(node, {
+              ...options,
+              value: initialValue,
+              language,
+              // overflowWidgetsDomNode: this.overflowRef.current!.node,
+            });
+
+            this.editor.getModel()?.onDidChangeContent(ev => {
+              const newValue = this.editor!.getValue();
+              this.$fire(newValue);
+            });
+
+            const parent = node.parentElement!;
+
+            window.addEventListener("resize", () => {
+              // make editor as small as possible
+              this.editor!.layout({ width: 0, height: 0 });
+
+              // wait for next frame to ensure last layout finished
+              window.requestAnimationFrame(() => {
+                // get the parent dimensions and re-layout the editor
+                const rect = parent.getBoundingClientRect();
+                this.editor!.layout({ width: rect.width, height: rect.height });
+              });
+            });
+          }
+        });
+      });
+    }
+  }
+}
+
+declare module "refina" {
+  interface TriggerComponents {
+    monacoEditor: MonacoEditor;
+  }
+}

packages/monaco-editor/src/index.ts

@@ -0,0 +1,7 @@
+import * as monaco from "monaco-editor";
+export { monaco };
+
+import Monaco from "./plugin";
+export default Monaco;
+
+export * from "./component.r";

packages/monaco-editor/src/plugin.ts

@@ -0,0 +1,4 @@
+import { Plugin } from "refina";
+
+const Monaco = new Plugin("monaco-editor");
+export default Monaco;

packages/monaco-editor/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@refina/tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"]
+  }
+}

packages/northstar/package.json

@@ -19,13 +19,15 @@
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
     "vite": "^4.4.8",
+    "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-refina": "link:..\\..\\..\\refina\\packages\\vite-plugin",
     "vite-plugin-static-copy": "^0.17.0"
   },
   "dependencies": {
     "@quasi-dev/block-data": "workspace:^",
     "@quasi-dev/browser-tailwind": "workspace:^",
     "@quasi-dev/compiler": "workspace:^",
+    "@quasi-dev/monaco-editor": "workspace:^",
     "@quasi-dev/runtime": "workspace:^",
     "@quasi-dev/visual-flow": "workspace:^",
     "@refina/basic-components": "link:..\\..\\..\\refina\\packages\\basic-components",

packages/northstar/src/app.r.ts

@@ -1,18 +1,18 @@
+import Monaco from "@quasi-dev/monaco-editor";
 import Vf from "@quasi-dev/visual-flow";
 import Basics from "@refina/basic-components";
 import FluentUI from "@refina/fluentui";
 import { app } from "refina";
 import { currentGraph } from "./store";
+import { duplicateBlocks, hasBlocksToDuplicate, hasBlocksToRemove, removeBlocks } from "./utils";
 import blocksView from "./views/blocks.r";
+import previewView from "./views/preview.r";
 import propertiesView from "./views/properties.r";
 import toolbarView, { graphElRef, previewMode } from "./views/toolbar.r";
-import { isComponentBlock } from "./blocks/component/block";
-import { duplicateBlocks, hasBlocksToDuplicate, hasBlocksToRemove, removeBlocks } from "./utils";
-import previewView from "./views/preview.r";
 
 document.body.spellcheck = false;
 
-app.use(FluentUI).use(Vf).use(Basics)(_ => {
+app.use(FluentUI).use(Vf).use(Basics).use(Monaco)(_ => {
   _.$rootCls`fixed top-0 left-0 right-0 bottom-0`;
 
   _.documentTitle("Quasi Studio");

packages/northstar/vite.config.ts

@@ -7,6 +7,9 @@ import {
 } from "vite";
 import Refina from "vite-plugin-refina";
 import { viteStaticCopy } from "vite-plugin-static-copy";
+import MonacoEditorPluginObj from "vite-plugin-monaco-editor";
+const MonacoEditorPlugin = (MonacoEditorPluginObj as any)
+  .default as typeof MonacoEditorPluginObj;
 
 // Base on https://github.com/vitejs/vite/issues/6757#issuecomment-1584823965
 function TsBundleUrlPlugin(): PluginOption {
@@ -70,6 +73,7 @@ function TsBundleUrlPlugin(): PluginOption {
 export default defineConfig({
   plugins: [
     Refina(),
+    MonacoEditorPlugin({}),
     TsBundleUrlPlugin(),
     viteStaticCopy({
       targets: [