WIP: experiment with making our own markdown editor

package.json

@@ -30,6 +30,7 @@
     "@aws-sdk/client-s3": "^3.540.0",
     "@blocknote/core": "^0.12.1",
     "@blocknote/react": "^0.12.2",
+    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.5",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -61,6 +62,7 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@replit/codemirror-indentation-markers": "^6.5.3",
     "@silevis/reactgrid": "^4.1.3",
     "@t3-oss/env-nextjs": "^0.9.2",
     "@tiptap/core": "^2.3.0",

src/app/testing/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+import JsonEditor from "@/components/gui/json-editor";
+import ThemeProvider from "@/context/theme-provider";
+import { useState } from "react";
+
+export default function TestingPage() {
+  const [code, setCode] = useState(
+    JSON.stringify(
+      {
+        name: "Visal",
+        country: {
+          id: 1,
+          verified: true,
+          name: "Cambodia",
+        },
+      },
+      undefined,
+      2
+    )
+  );
+
+  return (
+    <ThemeProvider defaultTheme="dark">
+      <JsonEditor value={code} onChange={setCode} />
+    </ThemeProvider>
+  );
+}

src/components/gui/json-editor/index.tsx

@@ -0,0 +1,102 @@
+import CodeMirror, { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { json } from "@codemirror/lang-json";
+import { forwardRef, useMemo } from "react";
+import { tags as t } from "@lezer/highlight";
+import createTheme from "@uiw/codemirror-themes";
+import { useTheme } from "@/context/theme-provider";
+import { indentationMarkers } from "@replit/codemirror-indentation-markers";
+
+interface JsonEditorProps {
+  value: string;
+  readOnly?: boolean;
+  onChange?: (value: string) => void;
+}
+
+function useJsonTheme() {
+  const { theme } = useTheme();
+
+  return useMemo(() => {
+    if (theme === "light") {
+      return createTheme({
+        theme: "light",
+        settings: {
+          background: "#FFFFFF",
+          foreground: "#000000",
+          caret: "#FBAC52",
+          selection: "#FFD420",
+          selectionMatch: "#FFD420",
+          gutterBackground: "#fff",
+          gutterForeground: "#4D4D4C",
+          gutterBorder: "transparent",
+          lineHighlight: "#00000012",
+          fontFamily:
+            'Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+        },
+        styles: [
+          { tag: [t.propertyName], color: "#4078F2" },
+          { tag: [t.bool, t.null], color: "#696C77" },
+          { tag: [t.number], color: "#FF0080" },
+          { tag: [t.string], color: "#50A14F" },
+          { tag: [t.separator], color: "#383A42" },
+          { tag: [t.squareBracket], color: "#383A42" },
+          { tag: [t.brace], color: "#A626A4" },
+        ],
+      });
+    } else {
+      return createTheme({
+        theme: "dark",
+        settings: {
+          background: "var(--background)",
+          foreground: "#9cdcfe",
+          caret: "#c6c6c6",
+          selection: "#6199ff2f",
+          selectionMatch: "#72a1ff59",
+          lineHighlight: "#ffffff0f",
+          gutterBackground: "var(--background)",
+          gutterForeground: "#838383",
+          gutterActiveForeground: "#fff",
+          fontFamily:
+            'Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+        },
+        styles: [
+          { tag: [t.propertyName], color: "#4078F2" },
+          { tag: [t.bool, t.null], color: "#696C77" },
+          { tag: [t.number], color: "#f39c12" },
+          { tag: [t.string], color: "#50A14F" },
+          { tag: [t.separator], color: "#383A42" },
+          { tag: [t.squareBracket], color: "#383A42" },
+          { tag: [t.brace], color: "#A626A4" },
+        ],
+      });
+    }
+  }, [theme]);
+}
+
+const JsonEditor = forwardRef<ReactCodeMirrorRef, JsonEditorProps>(
+  function SqlEditor({ value, onChange, readOnly }: JsonEditorProps, ref) {
+    const theme = useJsonTheme();
+
+    return (
+      <CodeMirror
+        ref={ref}
+        autoFocus
+        readOnly={readOnly}
+        basicSetup={{
+          drawSelection: false,
+          lineNumbers: false,
+        }}
+        theme={theme}
+        value={value}
+        height="100%"
+        onChange={onChange}
+        style={{
+          fontSize: 20,
+          height: "100%",
+        }}
+        extensions={[json(), indentationMarkers()]}
+      />
+    );
+  }
+);
+
+export default JsonEditor;

src/components/gui/providers/full-editor-provider.tsx

@@ -0,0 +1,145 @@
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { noop } from "@/lib/utils";
+import {
+  createContext,
+  Fragment,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import JsonEditor from "../json-editor";
+
+interface FullEditorContextValue {
+  openEditor: (option: FullEditorOption) => void;
+  closeEditor: () => void;
+}
+
+interface FullEditorOption {
+  initialValue: string;
+  format: string;
+  readOnly?: boolean;
+  onSave: (value: string) => void;
+  onCancel: () => void;
+}
+
+const FullEditorContext = createContext<FullEditorContextValue>({
+  openEditor: noop,
+  closeEditor: noop,
+});
+
+function FullEditorSheet({ option }: { option: FullEditorOption }) {
+  const [value, setValue] = useState(() => {
+    if (option.format === "json") {
+      try {
+        return JSON.stringify(JSON.parse(option.initialValue), undefined, 2);
+      } catch {
+        return option.initialValue;
+      }
+    }
+
+    return option.initialValue;
+  });
+
+  return (
+    <Sheet open>
+      <SheetContent
+        hideCloseButton
+        className="border-none sm:max-w-[1000px] sm:w-[70vw] overflow-hidden flex p-0"
+      >
+        <div className="flex flex-col grow overflow-hidden">
+          <div className="p-4 flex gap-2">
+            <div className="grow" />
+            <Button onClick={option.onCancel} variant={"secondary"}>
+              Close
+            </Button>
+            <Button
+              onClick={() => {
+                if (option.format === "json") {
+                  try {
+                    option.onSave(JSON.stringify(JSON.parse(value)));
+                  } catch {
+                    option.onSave(value);
+                  }
+                } else {
+                  option.onSave(value);
+                }
+              }}
+            >
+              Save Change
+            </Button>
+          </div>
+          <Separator />
+
+          {option.format === "text" && (
+            <textarea
+              autoFocus
+              className="flex-grow p-4 w-full outline-none bg-inherit font-mono"
+              value={value}
+              onChange={(e) => setValue(e.currentTarget.value)}
+              readOnly={option.readOnly}
+            />
+          )}
+
+          {option.format === "json" && (
+            <div className="flex-grow overflow-hidden">
+              <JsonEditor
+                value={value}
+                onChange={setValue}
+                readOnly={option.readOnly}
+              />
+            </div>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export function useFullEditor() {
+  return useContext(FullEditorContext);
+}
+
+export function FullEditorProvider({ children }: PropsWithChildren) {
+  const [option, setOption] = useState<FullEditorOption | null>(null);
+
+  const props = useMemo(() => {
+    return {
+      openEditor: (opt: FullEditorOption) => {
+        console.log(opt);
+        setOption({
+          initialValue: opt.initialValue,
+          format: opt.format,
+          readOnly: opt.readOnly,
+          onCancel: () => {
+            if (opt.onCancel) opt.onCancel();
+            setOption(null);
+          },
+          onSave: (value: string) => {
+            if (opt.onSave) opt.onSave(value);
+            setOption(null);
+          },
+        });
+      },
+      closeEditor: () => {
+        setOption(null);
+      },
+    };
+  }, [setOption]);
+
+  return (
+    <FullEditorContext.Provider value={props}>
+      {option && <FullEditorSheet option={option} />}
+      <Fragment>{children}</Fragment>
+    </FullEditorContext.Provider>
+  );
+}