Merge pull request #8 from bridgedxyz/ui/use-monaco-editor

UI/use monaco editor

Author: softmarshmallow

editor/components/code-editor/code-editor.tsx

@@ -0,0 +1,40 @@
+//// dynamic code editor. supports codemirror & monaco
+import React from "react";
+import CodeMirror from "./code-mirror";
+import { MonacoEditor } from "./monaco";
+
+interface DynamicEdotorProps {
+  host?: _Host;
+}
+
+type _Host = "codemirror" | "monaco" | "auto";
+// uses monaco by default. when set auto or host not provided.
+const fallbackAutoHost = "monaco";
+
+export function CodeEditor(props: DynamicEdotorProps) {
+  const _editorname = getTargetEditorName(props.host);
+
+  switch (_editorname) {
+    case "codemirror":
+      return <CodeMirror />;
+    case "monaco":
+      return <MonacoEditor />;
+  }
+}
+
+function getTargetEditorName(host?: _Host): "codemirror" | "monaco" {
+  if (!host) {
+    return fallbackAutoHost;
+  }
+
+  switch (host) {
+    case "auto":
+      return fallbackAutoHost;
+    case "codemirror":
+      return "codemirror";
+    case "monaco":
+      return "monaco";
+  }
+
+  throw `invalid host option provided - "${host}"`;
+}

editor/components/code-editor/index.ts

@@ -1 +1,3 @@
+export * from "./code-editor";
 export * from "./code-mirror";
+export * from "./monaco";

editor/components/code-editor/monaco.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import Editor, { useMonaco } from "@monaco-editor/react";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+interface EditorProps {
+  defaultValue?: string;
+  width?: number | string;
+  height?: number | string;
+  options?: monaco.editor.IStandaloneEditorConstructionOptions;
+}
+
+export function MonacoEditor(props: EditorProps) {
+  const monaco = useMonaco();
+  useEffect(() => {
+    // adding jsx support - https://github.com/microsoft/monaco-editor/issues/264
+    if (monaco) {
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        target: monaco.languages.typescript.ScriptTarget.Latest,
+        allowNonTsExtensions: true,
+        moduleResolution:
+          monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        module: monaco.languages.typescript.ModuleKind.CommonJS,
+        noEmit: true,
+        esModuleInterop: true,
+        jsx: monaco.languages.typescript.JsxEmit.React,
+        reactNamespace: "React",
+        allowJs: true,
+        typeRoots: ["node_modules/@types"],
+      });
+
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+      });
+
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
+        "https://cdn.jsdelivr.net/npm/@types/react@16.9.41/index.d.ts"
+      );
+
+      // monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      //   jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
+      // });
+
+      // monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      //   noSemanticValidation: false,
+      //   noSyntaxValidation: false,
+      // });
+    }
+  }, [monaco]);
+
+  return (
+    <Editor
+      width={props.width}
+      height={props.height}
+      defaultLanguage="typescript"
+      defaultValue={props.defaultValue ?? "// no content"}
+      theme="vs-dark"
+      options={props.options}
+    />
+  );
+}
+
+export { useMonaco } from "@monaco-editor/react";

editor/package.json

@@ -11,13 +11,13 @@
     "@babel/runtime": "^7.14.0",
     "@base-sdk/base": "^0.1.0-5",
     "@designto/code": "0.0.1",
-    "@reflect-ui/editor-ui": "0.0.1",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@monaco-editor/react": "^4.1.3",
+    "@reflect-ui/editor-ui": "0.0.1",
     "@visx/gradient": "^1.7.0",
     "@visx/group": "^1.7.0",
     "@visx/hierarchy": "^1.7.0",
@@ -27,6 +27,7 @@
     "cuid": "^2.1.8",
     "dart-style": "^1.3.2-dev",
     "idb": "^6.0.0",
+    "monaco-editor": "^0.24.0",
     "next": "10.0.3",
     "react": "17.0.1",
     "react-codemirror2": "^7.2.1",
@@ -47,4 +48,4 @@
     "next-transpile-modules": "^7.0.0",
     "typescript": "^4.2.3"
   }
-}
+}

editor/pages/figma/to-react.tsx

@@ -17,16 +17,21 @@ import {
 } from "../../layout/panel";
 import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
 import { JsonTree } from "../../components/visualization/json-visualization/json-tree";
+import { MonacoEditor, useMonaco } from "../../components/code-editor";
 
 // set image repo for figma platform
 MainImageRepository.instance = new ImageRepositories();
 
-const CodemirrorEditor = dynamic(
-  import("../../components/code-editor/code-mirror"),
-  {
-    ssr: false,
-  }
-);
+// const CodemirrorEditor = dynamic(
+//   import("../../components/code-editor/code-mirror"),
+//   {
+//     ssr: false,
+//   }
+// );
+
+// const MonacoEdotor = dynamic(import("@monaco-editor/react"), {
+//   ssr: false,
+// });
 
 export default function FigmaToReactDemoPage() {
   const [reflect, setReflect] = useState<ReflectSceneNode>();
@@ -41,6 +46,14 @@ export default function FigmaToReactDemoPage() {
     setTargetnodeConfig(target);
   };
 
+  const monaco = useMonaco();
+
+  useEffect(() => {
+    if (monaco) {
+      // do something with editor
+    }
+  }, [monaco]);
+
   let widgetCode: string;
   let widgetTree;
   if (reflect) {
@@ -77,17 +90,17 @@ export default function FigmaToReactDemoPage() {
           </WorkspaceContentPanel>
           <WorkspaceContentPanel>
             <InspectionPanelContentWrap>
-              <CodemirrorEditor
-                value={
+              <MonacoEditor
+                key={widgetCode}
+                height="100vh"
+                options={{
+                  automaticLayout: true,
+                }}
+                defaultValue={
                   widgetCode
                     ? widgetCode
                     : "// No input design provided to be converted.."
                 }
-                options={{
-                  mode: "javascript",
-                  theme: "monokai",
-                  lineNumbers: true,
-                }}
               />
             </InspectionPanelContentWrap>
           </WorkspaceContentPanel>

yarn.lock

@@ -9848,6 +9848,11 @@ moment@^2.18.1:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
+monaco-editor@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.24.0.tgz#990b55096bcc95d08d8d28e55264c6eb17707269"
+  integrity sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"