🚧 WIP sdl editor experiment

graphql-editor · Sep 29, 2023 · 65c7c5c · 65c7c5c
1 parent a0c56f7
commit 65c7c5c
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
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.7",
+  "version": "6.9.8",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-editor",
-  "version": "6.9.7",
+  "version": "6.9.8",
   "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.7",
+    "graphql-editor-worker": "^6.9.8",
     "graphql-js-tree": "^1.0.5",
     "graphql-language-service": "3.1.4",
     "html-to-image": "^1.10.8",

diff --git a/packages/editor/src/editor/code/guild/editor/EnrichedLanguageService.ts b/packages/editor/src/editor/code/guild/editor/EnrichedLanguageService.ts
@@ -191,7 +191,6 @@ export class EnrichedLanguageService extends LanguageService {
     const markerData = ([] as monaco.editor.IMarkerData[]).concat(
       ...nestedArrays
     );
-
     monacoInstance.editor.setModelMarkers(model, "graphql", markerData);
   }
 

diff --git a/packages/editor/src/editor/index.tsx b/packages/editor/src/editor/index.tsx
@@ -6,6 +6,7 @@ import {
   ThemeProvider,
   RelationsProvider,
   RelationNodesProvider,
+  useErrorsState,
 } from "@/state/containers";
 import { ThemeProvider as ScThemeProvider } from "@emotion/react";
 import { LayoutStateProvider } from "@/state/containers/layout";
@@ -15,6 +16,8 @@ import { MainTheme } from "@/gshared/theme/MainTheme";
 import { RouterProvider, EditorRoutes } from "@/state/containers/router";
 import { EmbeddedEditor, EmbeddedEditorProps } from "@/editor/EmbeddedEditor";
 import { themeColors, ToastsProvider } from "@aexol-studio/styling-system";
+import { CodePane, CodePaneApi, CodePaneProps } from "@/editor/code";
+import { ErrorsList } from "@/shared/errors/ErrorsList";
 
 export { ExternalEditorAPI };
 
@@ -112,4 +115,48 @@ export const GraphQLGqlEditor = ({ ...props }: GqlEditorProps) => {
     </ThemeProvider>
   );
 };
+
+const SdlEditor = React.forwardRef<CodePaneApi, CodePaneProps>((props, ref) => {
+  const { errorsItems } = useErrorsState();
+  return (
+    <>
+      <CodePane {...props} ref={ref} />
+      {!!errorsItems?.length && <ErrorsList>{errorsItems}</ErrorsList>}
+    </>
+  );
+});
+
+export const GraphQLSdlCodeDisplay = React.forwardRef<
+  CodePaneApi,
+  Pick<EditorProps, "path" | "schema" | "theme">
+>(({ ...props }, ref) => {
+  const baseITheme = themeColors("graphqleditor", "dark");
+  const combinedTheme = {
+    ...MainTheme,
+    ...baseITheme,
+  };
+  const theme = props.theme || combinedTheme;
+  return (
+    <ThemeProvider initialState={theme}>
+      <ErrorsStateProvider>
+        <TreesStateProvider>
+          <ScThemeProvider theme={theme}>
+            <ToastsProvider>
+              <SdlEditor
+                schema={props.schema}
+                onChange={() => {
+                  //noop readonly
+                }}
+                size={500}
+                readonly
+                fullScreen
+                ref={ref}
+              />
+            </ToastsProvider>
+          </ScThemeProvider>
+        </TreesStateProvider>
+      </ErrorsStateProvider>
+    </ThemeProvider>
+  );
+});
 export { EditorRoutes };
diff --git a/packages/sandbox/apps/index.tsx b/packages/sandbox/apps/index.tsx
@@ -19,3 +19,4 @@ export * from "./mergedLibraries";
 export * from "./VeryLongSchema";
 export * from "./livesocket";
 export * from "./exoticDirectives";
+export * from "./justcode";
diff --git a/packages/sandbox/apps/justcode.tsx b/packages/sandbox/apps/justcode.tsx
@@ -0,0 +1,27 @@
+import React, { useRef } from "react";
+import * as schemas from "../schema";
+import { ExternalEditorAPI, GraphQLSdlCodeDisplay } from "graphql-editor";
+
+export const justcode = () => {
+  const ref = useRef<ExternalEditorAPI>(null);
+  return (
+    <div
+      style={{
+        flex: 1,
+        width: "100%",
+        height: "100%",
+        alignSelf: "stretch",
+        display: "flex",
+        position: "relative",
+      }}
+    >
+      <GraphQLSdlCodeDisplay
+        path="googlediff"
+        ref={ref}
+        schema={{ code: schemas.exoticDirectives, source: "outside" }}
+      />
+    </div>
+  );
+};
+
+justcode.description = "Google Directions GraphQL Schema, SDL Editor only";
diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sandbox",
-  "version": "6.9.7",
+  "version": "6.9.8",
   "private": false,
   "license": "MIT",
   "description": "Visual node editor for GraphQL",
@@ -48,7 +48,7 @@
     "@aexol-studio/styling-system": "^0.0.8",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "graphql-editor": "^6.9.7",
+    "graphql-editor": "^6.9.8",
     "graphql-js-tree": "^0.1.6",
     "socket.io-client": "^4.7.2"
   },

diff --git a/packages/socket-live-test/package.json b/packages/socket-live-test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "socket-live-test",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "testing editor live",
   "main": "index.js",
   "type": "module",

diff --git a/packages/svg-ts-sync/package.json b/packages/svg-ts-sync/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-ts-sync",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": false,
   "license": "MIT",
   "description": "Sync folders with svg's to react typescript components",