add store for the editor element

json-schema-org · Jul 30, 2024 · db6451b · db6451b
1 parent 6d23862
commit db6451b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/app/components/CodeEditor/CodeEditor.tsx b/app/components/CodeEditor/CodeEditor.tsx
@@ -12,6 +12,7 @@ import { OutputReducerAction } from "@/lib/reducers";
 import { validateCode } from "@/lib/client-functions";
 import FiChevronRight from "@/app/styles/icons/HiChevronRightGreen";
 import { useRouter } from "next/navigation";
+import { useEditorStore } from "@/lib/stores";
 
 export default function CodeEditor({
   codeString,
@@ -33,6 +34,7 @@ export default function CodeEditor({
   const { colorMode } = useColorMode();
   const [monaco, setMonaco] = useState<any>(null);
   const router = useRouter();
+  const editorStore = useEditorStore();
 
   useEffect(() => {
     if (monaco) {
@@ -81,7 +83,8 @@ export default function CodeEditor({
           options={{ minimap: { enabled: false }, fontSize: 14 }}
           onMount={(editor, monaco) => {
             setMonaco(monaco);
-            // editor.focus();
+            editorStore.setEditor(editor);
+            editorStore.setMonaco(monaco);
           }}
         />
       </div>

diff --git a/lib/stores.ts b/lib/stores.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+type Store = {
+  editor: any;
+  monaco: any;
+  setEditor: (editor: any) => void;
+  setMonaco: (monaco: any) => void;
+};
+
+export const useEditorStore = create<Store>()((set) => ({
+  editor: null,
+  monaco: null,
+  setEditor: (editor) => set({ editor }),
+  setMonaco: (monaco) => set({ monaco }),
+}));
diff --git a/package.json b/package.json
@@ -45,7 +45,8 @@
     "remark-frontmatter": "^5.0.0",
     "remark-mdx-frontmatter": "^4.0.0",
     "sharp": "^0.33.4",
-    "tsx": "^4.10.1"
+    "tsx": "^4.10.1",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@testing-library/react": "^15.0.7",

diff --git a/yarn.lock b/yarn.lock
@@ -7223,6 +7223,11 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+[email protected]:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 uuid@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
@@ -7532,6 +7537,13 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.1.1.tgz#fef65ce3ac9f8a32ceac5a634f74e17e5b232110"
   integrity sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==
 
+zustand@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.4.tgz#63abdd81edfb190bc61e0bbae045cc4d52158a05"
+  integrity sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==
+  dependencies:
+    use-sync-external-store "1.2.0"
+
 zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"