@blocklet/editor 2.0.89 → 2.0.95

package/lib/ext/OnContentChangePlugin.d.ts

@@ -3,7 +3,9 @@ type OnChange = (editorState: EditorState, editor: LexicalEditor) => void;
 /**
  * 检听内容变化
  * - 忽略 selection 事件
- * - 默认忽略首次 onChange 事件 (editor 初始化时的 onChange)
+ * - 默认忽略首次 onChange 事件 (autofocus 开启时 editor 初始化后会自动触发 onChange)
+ *
+ * 注意: Editor#autofocus 与 OnChangePlugin 行为有关系: https://github.com/facebook/lexical/issues/4493
  */
 export declare function OnContentChangePlugin({ onChange, ignoreInitialChange, }: {
     onChange: OnChange;

package/lib/ext/OnContentChangePlugin.js

@@ -1,19 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import { useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 /**
  * 检听内容变化
  * - 忽略 selection 事件
- * - 默认忽略首次 onChange 事件 (editor 初始化时的 onChange)
+ * - 默认忽略首次 onChange 事件 (autofocus 开启时 editor 初始化后会自动触发 onChange)
+ *
+ * 注意: Editor#autofocus 与 OnChangePlugin 行为有关系: https://github.com/facebook/lexical/issues/4493
  */
 export function OnContentChangePlugin({ onChange, ignoreInitialChange = true, }) {
-    const initialChangeRef = useRef(false);
-    const handleOnChange = (editorState, editor) => {
-        if (ignoreInitialChange && !initialChangeRef.current) {
-            initialChangeRef.current = true;
-            return;
+    const [editor] = useLexicalComposerContext();
+    const initialContentRef = useRef();
+    const changedRef = useRef(false);
+    useLayoutEffect(() => {
+        if (initialContentRef.current === undefined) {
+            const editorState = editor.getEditorState();
+            initialContentRef.current = editorState ? JSON.stringify(editorState) : '';
+        }
+    }, [editor]);
+    const handleOnChange = (editorState, lexicalEditor) => {
+        if (changedRef.current) {
+            onChange(editorState, lexicalEditor);
+        }
+        else {
+            const content = editorState ? JSON.stringify(editorState) : '';
+            if (content !== initialContentRef.current || !ignoreInitialChange) {
+                onChange(editorState, lexicalEditor);
+                changedRef.current = true;
+            }
         }
-        onChange(editorState, editor);
     };
     return _jsx(OnChangePlugin, { onChange: handleOnChange, ignoreSelectionChange: true });
 }

package/lib/main/nodes/ExcalidrawNode/ExcalidrawModal.js

@@ -37,6 +37,12 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
     const [loading, setLoading] = useState(false);
     const [saveText, setSaveText] = useState('Save');
     const [fullScreen, setFullScreen] = useState(false);
+    const markBlockletDirtyState = () => {
+        window.dispatchEvent(new CustomEvent('blocklet:markDirty', { detail: { key: 'excalidraw' } }));
+    };
+    const resetBlockletDirtyState = () => {
+        window.dispatchEvent(new CustomEvent('blocklet:resetDirty', { detail: { key: 'excalidraw' } }));
+    };
     useEffect(() => {
         // @ts-ignore set window.name to add library target
         window.name = window.location.href;
@@ -127,12 +133,14 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
         finally {
             setLoading(false);
             setSaveText('Save');
+            resetBlockletDirtyState();
         }
     };
     const discard = () => {
         if (elements.filter((el) => !el.isDeleted).length === 0) {
             // delete node if the scene is clear
             onDelete();
+            resetBlockletDirtyState();
         }
         else {
             // Otherwise, show confirmation dialog before closing
@@ -144,6 +152,7 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
         return (_jsxs(Modal, { title: "Discard", onClose: () => {
                 setDiscardModalOpen(false);
             }, closeOnClickOutside: false, children: ["Are you sure you want to discard the changes?", _jsxs("div", { className: "ExcalidrawModal__discardModal", children: [_jsx(Button, { onClick: () => {
+                                resetBlockletDirtyState();
                                 setDiscardModalOpen(false);
                                 onClose();
                             }, children: "Discard" }), ' ', _jsx(Button, { onClick: () => {
@@ -154,6 +163,7 @@ export default function ExcalidrawModal({ closeOnClickOutside = false, onSave, i
         return null;
     }
     const onChange = (els, _, fls) => {
+        markBlockletDirtyState();
         setElements(els);
         setFiles(fls);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.0.89",
+  "version": "2.0.95",
   "main": "lib/index.js",
   "scripts": {
     "dev": "npm run storybook",
@@ -37,10 +37,10 @@
     ]
   },
   "dependencies": {
-    "@arcblock/ux": "^2.10.6",
+    "@arcblock/ux": "^2.10.12",
     "@blocklet/embed": "^0.1.11",
-    "@blocklet/pages-kit": "^0.2.377",
-    "@blocklet/pdf": "2.0.89",
+    "@blocklet/pages-kit": "^0.2.390",
+    "@blocklet/pdf": "2.0.95",
     "@excalidraw/excalidraw": "^0.14.2",
     "@iconify/iconify": "^3.0.1",
     "@iconify/icons-tabler": "^1.2.95",
@@ -113,5 +113,5 @@
     "react": "*",
     "react-dom": "*"
   },
-  "gitHead": "0536b69b1e6f53fd09fc2e93e3e9a3e56fdb07ca"
+  "gitHead": "1a046d557cce0678f2ac833bd314dcdd25872733"
 }