fixed editor bug

src/components/designer/components/searchbar.tsx

@@ -0,0 +1,57 @@
+import { Script } from '@/types/script';
+import { useNode } from '@craftjs/core'
+
+type SearchbarProps = {
+  placeholder: string;
+  script?: Script;
+}
+
+function Searchbar({}: SearchbarProps) {
+  const { connectors: { connect, drag } } = useNode()
+
+  return (
+    // @ts-ignore
+    <div ref={ref => connect(drag(ref!))}>
+      {/* <CompSearchbar filters={[]} placeholder={placeholder} onSearch={() => {}} /> */}
+    </div>
+  )
+}
+
+export function SearchbarPreview() {
+  return (
+    <></>
+    // <CompSearchbar filters={[]} placeholder='testing' onSearch={() => {}} />
+  )
+}
+
+function SearchbarSettings() {
+  // const { id, actions: { setProp }, placeholder, script } = useNode(node => ({
+  //   placeholder: node.data.props.placeholder,
+  //   script: node.data.props.script
+  // }))
+
+  // const localParams = useLocalState(id)
+
+  // const editor = editorState.useValue()
+  // const versionEdits = useVersionEdits<SystemData>(editor.versionId)
+
+  // const types: SystemType[] = useMemo(() => [
+  //   versionEdits?.data.defaultCharacterData._type,
+  //   ...(versionEdits?.data.types ?? [])
+  // ], [versionEdits])
+
+  return (
+    <>
+
+    </>
+  )
+} 
+
+Searchbar.craft = {
+  rules: {},
+  related: {
+    settings: SearchbarSettings
+  }
+}
+
+export default Searchbar

src/components/providers/editor-provider.tsx

@@ -1,5 +1,5 @@
-import { Editor as EditorContext, SerializedNodes } from '@craftjs/core'
-import { createContext, useContext, useState, useCallback, ReactNode } from 'react'
+import { Editor as EditorContext } from '@craftjs/core'
+import { createContext, useContext, useCallback, ReactNode, useRef } from 'react'
 
 import Container from '@/components/designer/components/Container/Editor'
 import EditorSelect from '@/components/designer/components/Select/Editor'
@@ -8,7 +8,7 @@ import Text from '@/components/designer/components/Text/Editor'
 import Input from '@/components/designer/components/Input/Editor'
 import Separator from '@/components/designer/components/Divider'
 
-type NodeChangeHandler = (query: { serialize: () => SerializedNodes }) => void
+type NodeChangeHandler = (lexical: string) => void
 
 interface EditorProviderContextType {
   setOnNodeChange: (handler: NodeChangeHandler | null) => void
@@ -60,16 +60,16 @@ interface EditorProviderProps {
 }
 
 export function EditorProvider({ children }: EditorProviderProps) {
-  const [onNodeChangeHandler, setOnNodeChangeHandler] = useState<NodeChangeHandler | null>(null)
+  const onNodeChangeHandlerRef = useRef<NodeChangeHandler | null>(null)
 
   const handleNodeChange = useCallback((query: any) => {
-    if (onNodeChangeHandler) {
-      onNodeChangeHandler(query)
+    if (onNodeChangeHandlerRef.current) {
+      onNodeChangeHandlerRef.current(query.serialize())
     }
-  }, [onNodeChangeHandler])
+  }, [])
 
   const setOnNodeChange = useCallback((handler: NodeChangeHandler | null) => {
-    setOnNodeChangeHandler(() => handler)
+    onNodeChangeHandlerRef.current = handler
   }, [])
 
   return (

src/modals/editors/edit-number/index.tsx

@@ -0,0 +1,48 @@
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { closeModal } from "@/state/modals";
+import { useCallback, useState } from "react";
+
+interface Props {
+  id: number;
+  data: number;
+  title?: string;
+
+  onSave(newData: number): void;
+  onDelete?(): void;
+}
+
+export default function EditNumber({ id, data, title = 'Edit number', onSave, onDelete }: Props) {
+  const [number, setNumber] = useState(data)
+
+  const requestClose = useCallback(() => closeModal(id), [id])
+
+  return (
+    <Dialog open onOpenChange={requestClose}>
+      <DialogContent className="sm:max-w-[425px] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <Input type='number' placeholder='baba yaga' value={number} onChange={v => setNumber(v.currentTarget.valueAsNumber)} />
+        </DialogBody>
+        <DialogFooter>
+          <Button variant={onDelete ? 'destructive' : 'outline'}
+            onClick={() => {
+              if (onDelete) onDelete()
+              requestClose()
+            }}
+          >
+            {(onDelete) ? 'Delete' : 'Close'}
+          </Button>
+
+          <Button color='primary' onClick={() => {         
+            onSave(number)
+            requestClose()
+          }}>Update</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/routes/editors/system/editor/index.tsx

@@ -26,9 +26,8 @@ const EditorTab: React.FC<EditorTabProps> = ({ versionedResource }) => {
 
   useEffect(() => {
     // Set the node change handler with access to versionedResource
-    setOnNodeChange((query) => {
-      const serialized = JSON.stringify(query.serialize())
-      storeMutation(versionedResource.local_id, updateLexical(versionedResource.local_id, serialized))
+    setOnNodeChange((lexical: string) => {
+      storeMutation(versionedResource.local_id, updateLexical(versionedResource.local_id, lexical))
     })
 
     // Clean up when component unmounts
@@ -40,15 +39,16 @@ const EditorTab: React.FC<EditorTabProps> = ({ versionedResource }) => {
   useEffect(() => {
     let lexical = (versionedResource.data as any).pages.find((p: PageData) => p.name === editor.characterPage)?.lexical
 
-    // @ts-ignore
-    console.log(versionedResource.data.pages.map(p => p.name))
-    console.log(editor.characterPage)
-    console.log(lexical)
-
     if (!lexical) lexical = defaultLexical
 
-    actions.deserialize(lz.decompress(lz.decodeBase64(lexical)))
-  }, [versionedResource.data.pages, editor.characterPage])
+    try {
+      actions.deserialize(lz.decompress(lz.decodeBase64(lexical)))
+    } catch (error) {
+      console.error('Error deserializing lexical:', error)
+      // Fallback to default if there's an error
+      actions.deserialize(lz.decompress(lz.decodeBase64(defaultLexical)))
+    }
+  }, [editor.characterPage])
 
   return (
     <div className='mt-3 border-2 border-primary border-dashed rounded-lg dark:border-muted'>

src/utils/verse/showModal.tsx

@@ -1,5 +1,7 @@
 import { useScriptTypes } from '@/components/providers/script-types';
+import EditNumber from '@/modals/editors/edit-number';
 import EditObject from '@/modals/editors/edit-object';
+import EditString from '@/modals/editors/edit-string';
 import { handleCallback, openModal, registerCallback } from '@/state/modals';
 import { ReactNode } from 'react'
 
@@ -25,17 +27,17 @@ export default (type: string, title: string, value: any): Promise<ModalResponse>
         )
       };
       break;
-    // case 'edit_number':
-    //   Comp = ({ id }) => <EditNumberModal id={id} title={title} data={value}
-    //     onSave={(newNumber) => handleCallback(id, 'save', +newNumber)}
-    //   />
-    //   break;
-    // case 'edit_string':
-    //   Comp = ({ id }) => <EditStringModal id={id} title={title} data={value}
-    //     onDelete={() => handleCallback(id, 'delete', null)}
-    //     onSave={(newString) => handleCallback(id, 'save', newString)}
-    //   />
-    //   break;
+    case 'edit_number':
+      Comp = ({ id }) => <EditNumber id={id} title={title} data={value}
+        onSave={(newNumber) => handleCallback(id, 'save', newNumber)}
+      />
+      break;
+    case 'edit_string':
+      Comp = ({ id }) => <EditString id={id} title={title} data={value}
+        onDelete={() => handleCallback(id, 'delete', null)}
+        onSave={(newString) => handleCallback(id, 'save', newString)}
+      />
+      break;
   }
 
   return new Promise((resolve) => {