temp

src/pages/editor/NodeTextEditor.tsx

@@ -0,0 +1,87 @@
+import { TextEditor } from '@/modules/tiptap/editor';
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { Save } from 'lucide-react';
+import { useWallStore } from '../wall/store/wall';
+import { useShallow } from 'zustand/react/shallow';
+import { app } from '../editor/app';
+
+/**
+ * 监听ctrl+s保存内容
+ * esc退出编辑
+ * @param saveContent 保存内容
+ * @param exitEdit 退出编辑
+ */
+export const useListenCtrlS = (saveContent: () => void, exitEdit: () => void) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+        saveContent();
+      } else if (event.key === 'Escape') {
+        exitEdit();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [saveContent]);
+};
+type EditorProps = {
+  id?: string;
+};
+export const NodeTextEditor = ({ id }: EditorProps) => {
+  const textEditorRef = useRef<TextEditor | null>(null);
+  const editorRef = useRef<HTMLDivElement>(null);
+  const { getNodeById, saveNodeById } = useWallStore(useShallow((state) => ({ getNodeById: state.getNodeById, saveNodeById: state.saveNodeById })));
+  useEffect(() => {
+    const editor = new TextEditor();
+    textEditorRef.current = editor;
+    editor.createEditor(editorRef.current!, { html: '' });
+    getIdContent();
+    return () => {
+      editor.destroy();
+    };
+  }, []);
+  const getIdContent = async () => {
+    if (!id) return;
+    const node = await getNodeById(id);
+    if (node) {
+      textEditorRef.current?.setContent(node.data.html);
+    }
+  };
+  const saveContent = async () => {
+    if (!id) return;
+    const html = await textEditorRef.current?.getHtml();
+    if (html) {
+      saveNodeById(id, {
+        html: html,
+      });
+    }
+  };
+  const exitEdit = () => {
+    // 退出编辑
+    saveContent()
+    setTimeout(() => {
+      app.call({
+        path: 'panels',
+        key: 'close-editor-window',
+        payload: {
+          data: {
+            id,
+          },
+        },
+      });
+    }, 100);
+  };
+  useListenCtrlS(saveContent, exitEdit);
+
+  return (
+    <div className={clsx('w-full h-full relative')}>
+      <div ref={editorRef} className={clsx('w-full h-full node-editor')}></div>
+      <div className='absolute top-2 right-2 cursor-pointer' onClick={() => saveContent()}>
+        <Save />
+      </div>
+    </div>
+  );
+};

src/pages/editor/app.ts

@@ -0,0 +1,5 @@
+import { useContextKey } from '@kevisual/system-lib/dist/web-config';
+import { QueryRouterServer } from '@kevisual/system-lib/dist/router-browser';
+
+export const app = useContextKey<QueryRouterServer>('app');
+

src/pages/editor/index.tsx

@@ -1,32 +1,2 @@
-import { TextEditor } from '@/modules/tiptap/editor';
-import { useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-type EditorProps = {
-  className?: string;
-  value?: string;
-  id?: string;
-  onChange?: (value: string) => void;
-};
-export const Editor = ({ className, value, onChange, id }: EditorProps) => {
-  const textEditorRef = useRef<TextEditor | null>(null);
-  const editorRef = useRef<HTMLDivElement>(null);
-  const [mount, setMount] = useState(false);
-  useEffect(() => {
-    const editor = new TextEditor();
-    textEditorRef.current = editor;
-    editor.createEditor(editorRef.current!, { html: value });
-    editor.onContentChange((content) => {
-      onChange?.(content);
-    });
-    setMount(true);
-    return () => {
-      editor.destroy();
-    };
-  }, []);
-  useEffect(() => {
-    if (textEditorRef.current && id && mount) {
-      textEditorRef.current.setContent(value || '');
-    }
-  }, [id, mount]);
-  return <div ref={editorRef} className={clsx('w-full h-full node-editor', className)}></div>;
-};
+import { Editor } from '@/modules/editor';
+export { Editor };

src/pages/wall/app.ts

@@ -0,0 +1,6 @@
+import { useContextKey } from '@kevisual/system-lib/dist/web-config';
+import { QueryRouterServer } from '@kevisual/system-lib/dist/router-browser';
+
+export const app = useContextKey<QueryRouterServer>('app');
+
+

src/pages/wall/modules/CustomNode.css

@@ -40,7 +40,8 @@
   }
 }
 .tiptap {
-  margin: 0.5rem 1rem;
+  /* margin: 0.5rem 1rem; */
+  margin: 0;
   padding: 0.5rem;
   border-radius: 5px;
   border: 1px solid #ccc;

src/pages/wall/modules/CustomNode.tsx

@@ -5,6 +5,7 @@ import { useWallStore } from '../store/wall';
 import { useShallow } from 'zustand/react/shallow';
 import { toast } from 'react-toastify';
 import { message } from '@/modules/message';
+import { app } from '../app';
 import hljs from 'highlight.js';
 import { Edit } from 'lucide-react';
 export type WallData<T = Record<string, any>> = {
@@ -50,6 +51,7 @@ export const CustomNode = (props: { id: string; data: WallData; selected: boolea
   const wallStore = useWallStore(
     useShallow((state) => {
       return {
+        id: state.id,
         setSelectedNode: state.setSelectedNode,
         saveNodes: state.saveNodes,
         checkAndOpen: state.checkAndOpen,
@@ -83,17 +85,6 @@ export const CustomNode = (props: { id: string; data: WallData; selected: boolea
       },
     };
   });
-  // useEffect(() => {
-  //   if (selected) {
-  //     const handleDelete = (e: KeyboardEvent) => {
-  //       if (e.key === 'Delete') {
-  //         store.deleteNode(props.id);
-  //       }
-  //     };
-  //     window.addEventListener('keydown', handleDelete);
-  //     return () => window.removeEventListener('keydown', handleDelete);
-  //   }
-  // }, [selected]);
   const width = data.width || 100;
   const height = data.height || 100;
   const style: React.CSSProperties = {};
@@ -102,19 +93,30 @@ export const CustomNode = (props: { id: string; data: WallData; selected: boolea
   const showOpen = () => {
     const node = store.getNode(props.id);
     console.log('node eidt', node);
-    if (node) {
-      const dataType: string = (node?.data?.dataType as string) || '';
-      if (dataType && dataType?.startsWith('image')) {
-        message.error('不支持编辑图片');
-        return;
-      } else if (dataType) {
-        message.error('不支持编辑');
-        return;
-      }
-      wallStore.checkAndOpen(true, node);
-    } else {
-      message.error('节点不存在');
-    }
+    app.call({
+      path: 'panels',
+      key: 'add-editor-window',
+      payload: {
+        data: {
+          pageId: wallStore.id || 'local-browser',
+          type: 'wallnote',
+          nodeData: node,
+        },
+      },
+    });
+    // if (node) {
+    //   const dataType: string = (node?.data?.dataType as string) || '';
+    //   if (dataType && dataType?.startsWith('image')) {
+    //     message.error('不支持编辑图片');
+    //     return;
+    //   } else if (dataType) {
+    //     message.error('不支持编辑');
+    //     return;
+    //   }
+    //   wallStore.checkAndOpen(true, node);
+    // } else {
+    //   message.error('节点不存在');
+    // }
   };
   const handleSize = Math.max(10, 10 / zoom);
   return (

src/pages/wall/store/wall.ts

@@ -57,6 +57,8 @@ interface WallState {
   clearId: () => Promise<void>;
   mouseSelect: boolean;
   setMouseSelect: (mouseSelect: boolean) => void;
+  getNodeById: (id: string) => Promise<NodeData | null>;
+  saveNodeById: (id: string, data: any) => Promise<void>;
 }
 
 export const useWallStore = create<WallState>((set, get) => ({
@@ -72,7 +74,6 @@ export const useWallStore = create<WallState>((set, get) => ({
     if (!get().id) {
       const covertData = getNodeData(nodes);
       setWallData({ nodes: covertData });
-      showMessage && message.success('保存到本地');
     } else {
       const { id } = get();
       const userWallStore = useUserWallStore.getState();
@@ -201,4 +202,28 @@ export const useWallStore = create<WallState>((set, get) => ({
   },
   mouseSelect: true,
   setMouseSelect: (mouseSelect) => set({ mouseSelect }),
+  getNodeById: async (id: string) => {
+    const data = await getWallData();
+    const nodes = data?.nodes || [];
+    return nodes.find((node) => node.id === id);
+  },
+  saveNodeById: async (id: string, data: any) => {
+    let node = await get().getNodeById(id);
+    if (node) {
+      node.data = {
+        ...node.data,
+        ...data,
+      };
+      const newNodes = get().nodes.map((item) => {
+        if (item.id === id) {
+          return node;
+        }
+        return item;
+      });
+      set({
+        nodes: newNodes,
+      });
+      get().saveNodes(newNodes, { showMessage: false });
+    }
+  },
 }));