✨ Cursor fix; Finally full live collab!!!

graphql-editor · Sep 15, 2023 · eca5421 · eca5421
1 parent cc7be78
commit eca5421
Show file tree

Hide file tree

Showing 47 changed files with 2,428 additions and 16,109 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "run-all-debug": "npm run build --ws --if-present && concurrently \"npm run start -w graphql-editor-worker\" \"npm run start -w graphql-editor\" \"npm run start -w sandbox\" \"firefox -start-debugger-server\" ",
     "regenerate-icons": "npm run run -w svg-ts-sync -- ./svg ./packages/editor/src/icons",
     "update-deps": "npm i graphql-js-tree@latest -w graphql-editor && npm i graphql-js-tree@latest -w graphql-editor-worker",
-    "patchVersion": "npm version patch --ws --save"
+    "patchVersion": "npm version patch --ws --save",
+    "socket": "npm run start -w socket-live-test"
   },
   "resolutions": {
     "@types/react": "^16.9.11"
@@ -75,7 +76,8 @@
       "./packages/editor-worker",
       "./packages/editor",
       "./packages/svg-ts-sync",
-      "./packages/sandbox"
+      "./packages/sandbox",
+      "./packages/socket-live-test"
     ]
   }
-}
+}
diff --git a/packages/editor-worker/package.json b/packages/editor-worker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor-worker",
-  "version": "6.9.2",
+  "version": "6.9.3",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor-worker/src/worker/validation.worker.ts b/packages/editor-worker/src/worker/validation.worker.ts
@@ -121,7 +121,6 @@ ctx.addEventListener("message", (message) => {
       Parser.parse(args.schema),
       args.libraries ? Parser.parse(args.libraries) : { nodes: [] }
     );
-    console.log(mtress, args);
     if (mtress.nodes) {
       if (args.cutSchemaDefinition) {
         return {

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "6.9.2",
+  "version": "6.9.3",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -45,7 +45,7 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^10.12.16",
     "fuzzyjs": "^5.0.1",
-    "graphql-editor-worker": "^6.9.2",
+    "graphql-editor-worker": "^6.9.3",
     "graphql-js-tree": "^1.0.5",
     "graphql-language-service": "3.1.4",
     "html-to-image": "^1.10.8",

diff --git a/packages/editor/src/Models/Types.ts b/packages/editor/src/Models/Types.ts
@@ -1,6 +1,6 @@
 export interface PassedSchema {
   code: string;
   libraries?: string;
-  isTree?: boolean;
+  source: "tree" | "code" | "outside";
   passGraphValidation?: boolean;
 }
diff --git a/packages/editor/src/editor/Editor.tsx b/packages/editor/src/editor/Editor.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useImperativeHandle } from "react";
 import { Menu } from "./menu/Menu";
-import { CodePane, DiffSchema } from "./code";
+import { CodePane, CodePaneApi, CodePaneProps, DiffSchema } from "./code";
 import { PassedSchema } from "@/Models";
 import { DynamicResize } from "./code/Components";
 import { ParserTree } from "graphql-js-tree";
@@ -21,6 +21,7 @@ import styled from "@emotion/styled";
 import { useRouter, EditorRoutes } from "@/state/containers/router";
 import { ErrorsList } from "@/shared/errors/ErrorsList";
 import { NodeNavigation } from "@/shared/NodeNavigation";
+import type * as monaco from "monaco-editor";
 
 const Main = styled.div`
   display: flex;
@@ -68,7 +69,7 @@ const ErrorOuterContainer = styled.div<{ isOverflow?: boolean }>`
   overflow-x: hidden;
 `;
 
-export interface EditorProps {
+export interface EditorProps extends Pick<CodePaneProps, "onContentChange"> {
   // Code in editor is readonly
   readonly?: boolean;
   // Code and libraries
@@ -92,6 +93,8 @@ export interface EditorProps {
 export interface ExternalEditorAPI {
   selectNode: (selectedNodeId?: string) => void;
   route: (r: EditorRoutes) => void;
+  currentRoute: EditorRoutes;
+  receive: (change: monaco.editor.IModelContentChangedEvent) => void;
 }
 
 export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
@@ -100,6 +103,7 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
       schema = {
         code: "",
         libraries: "",
+        source: "outside",
       },
       setSchema,
       diffSchemas,
@@ -109,7 +113,8 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
       theme,
       onRouteChange,
       onNodeSelect,
-    }: EditorProps,
+      onContentChange,
+    },
     ref
   ) => {
     const { setTheme } = useTheme();
@@ -139,6 +144,8 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
     const { setSidebarSize, sidebarSize } = useLayoutState();
     const { routes, set } = useRouter();
 
+    const codePaneApi: React.ForwardedRef<CodePaneApi> = React.createRef();
+
     const reset = () => {
       setSnapshots([]);
       setUndos([]);
@@ -167,8 +174,12 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
             ...routes,
           });
         },
+        receive: (e) => {
+          codePaneApi.current?.receive(e);
+        },
+        currentRoute: routes,
       }),
-      [set, setSelectedNodeId, allNodes]
+      [set, setSelectedNodeId, allNodes, codePaneApi, routes]
     );
     useEffect(() => {
       if (
@@ -218,7 +229,7 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
         if (tree.initial) {
           return;
         }
-        setSchema({ ...schema, isTree: true, code: "" });
+        setSchema({ ...schema, source: "tree", code: "" });
         return;
       }
       try {
@@ -238,7 +249,7 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
                 }
                 setGrafErrors(undefined);
                 setGrafEditorErrors([]);
-                setSchema({ ...schema, code: graphql, isTree: true });
+                setSchema({ ...schema, code: graphql, source: "tree" });
               }
             );
           }
@@ -252,7 +263,7 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
     }, [tree]);
 
     useEffect(() => {
-      if (schema.isTree) {
+      if (schema.source === "tree") {
         return;
       }
       generateTreeFromSchema(schema);
@@ -297,31 +308,36 @@ export const Editor = React.forwardRef<ExternalEditorAPI, EditorProps>(
             set(newState, "internal");
           }}
         />
-        {routes.code === "on" && routes.pane !== "diff" && (
+        {routes.pane !== "diff" && (
           <DynamicResize
             enable={{ right: true }}
             disabledClass={!routes.pane ? "full-screen-container" : undefined}
             resizeCallback={(e, r, c) => {
               setSidebarSize(c.getBoundingClientRect().width);
             }}
-            width={!routes.pane ? "100%" : sidebarSize}
+            width={
+              !routes.pane ? "100%" : routes.code === "on" ? sidebarSize : 0
+            }
           >
             <Sidebar
               className={!routes.pane ? "full-screen-container" : undefined}
             >
               <CodePane
-                size={!routes.pane ? 100000 : sidebarSize}
+                size={
+                  !routes.pane ? 100000 : routes.code === "on" ? sidebarSize : 0
+                }
                 onChange={(v, passGraphValidation) => {
                   setSchema({
                     ...schema,
                     code: v,
-                    isTree: false,
+                    source: "code",
                     passGraphValidation,
                   });
                 }}
-                schema={schema.code}
+                ref={codePaneApi}
+                onContentChange={onContentChange}
+                schema={schema}
                 fullScreen={!routes.pane}
-                libraries={schema.libraries}
                 readonly={readonly}
               />
             </Sidebar>

diff --git a/packages/editor/src/editor/EmbeddedEditor.tsx b/packages/editor/src/editor/EmbeddedEditor.tsx
@@ -67,7 +67,7 @@ export const EmbeddedEditor = ({ schema, theme }: EmbeddedEditorProps) => {
   }, [theme]);
 
   useEffect(() => {
-    if (schema.isTree) {
+    if (schema.source === "tree") {
       return;
     }
     generateTreeFromSchema(schema);

diff --git a/packages/editor/src/editor/GqlEditor.tsx b/packages/editor/src/editor/GqlEditor.tsx
@@ -29,6 +29,7 @@ export const GqlEditor = ({
   schema = {
     code: "",
     libraries: "",
+    source: "outside",
   },
   gql,
   readonly: editorReadOnly,
@@ -61,10 +62,10 @@ export const GqlEditor = ({
       <GqlCodePane
         gql={gql}
         size={sidebarSize}
-        onChange={(v, isInvalid) => {
+        onChange={(v) => {
           setGql(v);
         }}
-        schema={[schema.libraries || "", schema.code].join("\n")}
+        schema={schema}
         placeholder={placeholder}
         readonly={readonly}
       />