onchain-lexical-instance 0.0.8 → 0.0.9

package/dist/OnchainLexicalInstance.js

@@ -8,26 +8,19 @@
 
 'use strict';
 
-var lexical = require('lexical');
-var utils$1 = require('@lexical/utils');
-var traversal = require('onchain-utility/traversal');
 var code = require('@lexical/code');
-var list = require('@lexical/list');
-var richText = require('@lexical/rich-text');
-var onchainLexicalMarkdown = require('onchain-lexical-markdown');
-var onchainUtility = require('onchain-utility');
+var utils$1 = require('@lexical/utils');
+var lexical = require('lexical');
+var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
-var instanceConfig = require('onchain-lexical-context/instanceConfig');
-var Skeleton = require('onchain-lexical-ui/Skeleton');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var settings = require('onchain-lexical-context/settings');
-var DropDown = require('onchain-lexical-ui/DropDown');
-var Icon = require('onchain-lexical-ui/Icon');
-var LexicalHorizontalRuleNode = require('@lexical/react/LexicalHorizontalRuleNode');
+var onchainLexicalMarkdown = require('onchain-lexical-markdown');
+var list = require('@lexical/list');
 var selection = require('@lexical/selection');
 var table = require('@lexical/table');
 var useLexicalNodeSelection = require('@lexical/react/useLexicalNodeSelection');
+var richText = require('@lexical/rich-text');
 var useLexicalEditable = require('@lexical/react/useLexicalEditable');
 var EquationEditor = require('onchain-lexical-ui/EquationEditor');
 var KatexRenderer = require('onchain-lexical-ui/KatexRenderer');
@@ -41,9 +34,16 @@ var LexicalNestedComposer = require('@lexical/react/LexicalNestedComposer');
 var LexicalRichTextPlugin = require('@lexical/react/LexicalRichTextPlugin');
 var onchainLexicalContext = require('onchain-lexical-context');
 var collaboration = require('onchain-lexical-context/collaboration');
+var instanceConfig = require('onchain-lexical-context/instanceConfig');
 var sharedHistory = require('onchain-lexical-context/sharedHistory');
 var ContentEditable = require('onchain-lexical-ui/ContentEditable');
 var ImageResizer = require('onchain-lexical-ui/ImageResizer');
+var onchainUtility = require('onchain-utility');
+var traversal = require('onchain-utility/traversal');
+var Skeleton = require('onchain-lexical-ui/Skeleton');
+var settings = require('onchain-lexical-context/settings');
+var DropDown = require('onchain-lexical-ui/DropDown');
+var Icon = require('onchain-lexical-ui/Icon');
 var hashtag = require('@lexical/hashtag');
 var Button = require('onchain-lexical-ui/Button');
 var Dialog = require('onchain-lexical-ui/Dialog');
@@ -142,12 +142,28 @@ const fixedAddress = new Map();
 
 /** 用来存储内联链接，更新文本函数，用来实现链接目标标题变化时，引用处可以实时更新 */
 const internalLinkNameUpdateMap = new Map();
+
+/** 打开创建实例节点 */
 const OPEN_CREATE_WINDOW = lexical.createCommand('OPEN_CREATE_WINDOW');
+
+/** 添加新的实例节点 */
 const ADD_NEW_INSTANCE_NODE = lexical.createCommand('ADD_NEW_INSTANCE_NODE');
+
+/** 删除实例节点 */
 const DELETE_INSTANCE_NODE = 'DELETE_INSTANCE_NODE';
+
+/** 插入参数 */
 const INSERT_PARAMETERS = lexical.createCommand('INSERT_PARAMETERS');
+
+/** 富文本 DecoratorNode 节点组件更新事件*/
 const COMPONENT_UPDATE = lexical.createCommand('COMPONENT_UPDATE');
 
+/** 标题更新事件 */
+const INSTANCE_TITLE_UPDATE = lexical.createCommand('INSTANCE_TITLE_UPDATE');
+
+/** 获取禁止编辑dom节点选择器 */
+const DisableSelector = `[contenteditable='false']:not([ignorecontenteditable])`;
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -417,6 +433,7 @@ class PlaceholderDecoratorNode extends lexical.DecoratorNode {
       pointer-events: none;
       user-select: none;
     `;
+    span.setAttribute('ignorecontenteditable', '');
     return span;
   }
   updateDOM() {
@@ -565,7 +582,16 @@ class InstanceTitleNode extends InstanceHeadingNode {
     if (instanceNode && instanceNode.__instance.value) {
       const text = this.getTextContent().trim();
       setInstanceAttrValue(instanceNode.__instance.value, 'insDesc', text);
-      internalLinkNameUpdateMap.get(instanceNode.__instance.value.number)?.values().forEach(update => update());
+      const editor = lexical.$getEditor();
+      Promise.resolve().then(() => {
+        editor.read(() => {
+          editor.dispatchCommand(INSTANCE_TITLE_UPDATE, {
+            isInput: true,
+            number: instanceNode.__instance.value.number,
+            title: text
+          });
+        });
+      });
     }
     return super.updateDOM(prevNode, dom, config);
   }
@@ -837,7 +863,14 @@ function updateRelatedInternalLink(nodes) {
   const insNodes = nodes.filter(node => $isInstanceNode(node));
   if (insNodes.length) {
     insNodes.forEach(node => {
-      internalLinkNameUpdateMap.get(node.__instance.value.number)?.values().forEach(update => update());
+      const editor = lexical.$getEditor();
+      Promise.resolve().then(() => {
+        editor.read(() => {
+          editor.dispatchCommand(INSTANCE_TITLE_UPDATE, {
+            number: node.__instance.value.number
+          });
+        });
+      });
     });
   }
 }
@@ -853,7 +886,7 @@ function nodeMoveUp(nodes) {
         previous?.insertBefore(current);
       }
     }
-    updateRelatedInternalLink(nodes);
+    updateRelatedInternalLink($isInstanceNode(previous) ? [...nodes, previous] : nodes);
   }
 }
 function nodeMoveDown(nodes) {
@@ -868,7 +901,7 @@ function nodeMoveDown(nodes) {
         next?.insertAfter(current);
       }
     }
-    updateRelatedInternalLink(nodes);
+    updateRelatedInternalLink($isInstanceNode(next) ? [...nodes, next] : nodes);
   }
 }
 async function $nodeUpgrade(nodes) {
@@ -1011,6 +1044,27 @@ function setHSEntryMap(hs, instanceNode) {
     return state;
   });
 }
+function useContentEditable() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [contentEditable, setContentEditable] = React.useState(true);
+  const $updateContentEditable = React.useCallback(() => {
+    const selection = lexical.$getSelection();
+    if (selection) {
+      setContentEditable(!selection.getNodes().some(node => {
+        return editor.getElementByKey(node.getKey())?.closest(DisableSelector);
+      }));
+    }
+  }, [editor]);
+  React.useEffect(() => {
+    return editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, _payload => {
+      $updateContentEditable();
+      return false;
+    }, lexical.COMMAND_PRIORITY_CRITICAL);
+  }, [editor, $updateContentEditable]);
+  return {
+    contentEditable
+  };
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -22342,6 +22396,7 @@ class ImageNode extends lexical.DecoratorNode {
     if (className !== undefined) {
       span.className = className;
     }
+    span.setAttribute('ignorecontenteditable', '');
     return span;
   }
   updateDOM() {
@@ -23674,7 +23729,7 @@ const InstancePlugin = props => {
       const selection = lexical.$getSelection();
       if (selection) {
         return selection.getNodes().some(node => {
-          return editor.getElementByKey(node.getKey())?.closest(`[contenteditable='false']`);
+          return editor.getElementByKey(node.getKey())?.closest(DisableSelector);
         });
       }
       return false;
@@ -23765,43 +23820,38 @@ styleInject(css_248z$3);
 /* eslint-disable @lexical/rules-of-lexical */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-function InternalLinkComponent({
-  self,
-  editor,
-  config,
-  number,
-  nodeKey
-}) {
+function InternalLinkComponent(props) {
+  const {
+    editor,
+    number
+  } = props;
   const [name, setName] = React.useState();
   const [serial, setSerial] = React.useState();
-  const update = React.useCallback(function () {
-    editor.read(() => {
-      const node = $getInstanceNodeByNumber(number);
-      setName(getLatestValue(node.__instance.value, 'insDesc'));
-      setSerial(node.getSerialNumber());
-    });
-  }, []);
   React.useEffect(() => {
-    update();
+    Promise.resolve().then(() => {
+      // 需要等待节点载入富文本后才能获取到实例节点
+      editor.read(() => {
+        const node = $getInstanceNodeByNumber(number);
+        if (node) {
+          setName(getLatestValue(node.__instance.value, 'insDesc'));
+          setSerial(node.getSerialNumber());
+        }
+      });
+    });
   }, []);
   React.useEffect(() => {
-    let timeout = 0;
-    let map;
-    const debounceUpdate = () => {
-      clearTimeout(timeout);
-      timeout = window.setTimeout(() => {
-        update();
-      }, 100);
-    };
-    if (internalLinkNameUpdateMap.has(number)) {
-      map = internalLinkNameUpdateMap.get(number).set(nodeKey, debounceUpdate);
-    } else {
-      map = new Map([[nodeKey, debounceUpdate]]);
-      internalLinkNameUpdateMap.set(number, map);
-    }
-    return () => {
-      map.delete(number);
-    };
+    return utils$1.mergeRegister(editor.registerCommand(INSTANCE_TITLE_UPDATE, priority => {
+      if (priority.number === number) {
+        editor.read(() => {
+          const node = $getInstanceNodeByNumber(priority.number);
+          if (priority.title !== undefined && priority.title !== null) {
+            setName(priority.title);
+          }
+          setSerial(node.getSerialNumber());
+        });
+      }
+      return false;
+    }, lexical.COMMAND_PRIORITY_EDITOR));
   }, []);
   if (name) {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
@@ -23836,12 +23886,23 @@ class InternalLinkNode extends lexical.TextDecoratorNode {
     return new InternalLinkNode(node.__number, node.__key);
   }
   static importJSON(serializedNode) {
-    return $createInternalLinkNode(serializedNode.__number).updateFromJSON(serializedNode);
+    return $createInternalLinkNode(serializedNode.number).updateFromJSON(serializedNode);
   }
   constructor(number, key) {
     super(key);
     this.__number = number;
   }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      number: this.__number
+    };
+  }
+  createDOM(config, editor) {
+    const span = super.createDOM(config, editor);
+    span.setAttribute('ignorecontenteditable', '');
+    return span;
+  }
   updateDOM(prevNode, dom, config) {
     return super.updateDOM(prevNode, dom, config);
   }
@@ -24620,6 +24681,9 @@ function ImageComponent({
   const onResizeStart = () => {
     setIsResizing(true);
   };
+  const {
+    contentEditable
+  } = useContentEditable();
   const {
     historyState
   } = sharedHistory.useSharedHistoryContext();
@@ -24660,7 +24724,7 @@ function ImageComponent({
             ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
           })]
         })
-      }), resizable && lexical.$isNodeSelection(selection) && isFocused && /*#__PURE__*/jsxRuntime.jsx(ImageResizer, {
+      }), resizable && lexical.$isNodeSelection(selection) && isFocused && contentEditable && /*#__PURE__*/jsxRuntime.jsx(ImageResizer, {
         showCaption: showCaption,
         setShowCaption: setShowCaption,
         editor: editor,
@@ -25073,10 +25137,12 @@ exports.CollapsibleContainerNode = CollapsibleContainerNode;
 exports.CollapsibleContentNode = CollapsibleContentNode;
 exports.CollapsibleTitleNode = CollapsibleTitleNode;
 exports.DELETE_INSTANCE_NODE = DELETE_INSTANCE_NODE;
+exports.DisableSelector = DisableSelector;
 exports.Fragment = Fragment;
 exports.INSERT_COLLAPSIBLE_COMMAND = INSERT_COLLAPSIBLE_COMMAND;
 exports.INSERT_INS_HORIZONTAL_RULE_COMMAND = INSERT_INS_HORIZONTAL_RULE_COMMAND;
 exports.INSERT_PARAMETERS = INSERT_PARAMETERS;
+exports.INSTANCE_TITLE_UPDATE = INSTANCE_TITLE_UPDATE;
 exports.ImageNode = ImageNode;
 exports.InlineImageNode = InlineImageNode;
 exports.InstanceCodeHighlightNode = InstanceCodeHighlightNode;
@@ -25127,3 +25193,4 @@ exports.setInstanceAttrValue = setInstanceAttrValue;
 exports.setTemporaryContentText = setTemporaryContentText;
 exports.updateChildrenListItemValue = updateChildrenListItemValue;
 exports.updateRelatedInternalLink = updateRelatedInternalLink;
+exports.useContentEditable = useContentEditable;

package/dist/OnchainLexicalInstance.mjs

@@ -6,27 +6,20 @@
  *
  */
 
-import { createCommand, ElementNode, $applyNodeReplacement, isHTMLElement, setNodeIndentFromDOM, DecoratorNode, $isTextNode, $createTextNode, TextNode as TextNode$1, $getSelection, $isRootOrShadowRoot, $isRootNode, $getEditor, $getNodeByKey, scrollIntoViewIfNeeded, $isElementNode, ParagraphNode, COMMAND_PRIORITY_EDITOR, $getSiblingCaret, $isTabNode, $createTabNode, $createLineBreakNode, KEY_TAB_COMMAND, COMMAND_PRIORITY_LOW, INSERT_TAB_COMMAND, $insertNodes, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, KEY_ARROW_UP_COMMAND, $isRangeSelection, KEY_ARROW_DOWN_COMMAND, MOVE_TO_START, MOVE_TO_END, $isLineBreakNode, $rewindSiblingCaret, $createParagraphNode, createEditor, RootNode, LineBreakNode, $isLeafNode, $setPointFromCaret, $normalizeCaret, $getChildCaret, INSERT_PARAGRAPH_COMMAND, COMMAND_PRIORITY_NORMAL, $getPreviousSelection, DELETE_CHARACTER_COMMAND, COMMAND_PRIORITY_CRITICAL, TextDecoratorNode, COMMAND_PRIORITY_HIGH, CLICK_COMMAND, SELECTION_CHANGE_COMMAND, KEY_ESCAPE_COMMAND, $isNodeSelection, $createNodeSelection, $setSelection, DRAGSTART_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
-import { $findMatchingParent, addClassNamesToElement, mergeRegister, removeClassNamesFromElement, $getAdjacentCaret, isHTMLElement as isHTMLElement$1, IS_CHROME, $insertNodeToNearestRoot, $getNearestNodeOfType, $descendantsMatching } from '@lexical/utils';
-import { dfs as dfs$1 } from 'onchain-utility/traversal';
 import { $isCodeNode, CodeNode } from '@lexical/code';
-import { $isListNode, $isListItemNode, $createListItemNode, ListItemNode, ListNode } from '@lexical/list';
-import { HeadingNode, $isHeadingNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text';
-import { $textToRichNodes } from 'onchain-lexical-markdown';
-import { hasOwnProperty, dfs, translateI18n } from 'onchain-utility';
+import { $findMatchingParent, addClassNamesToElement, mergeRegister, removeClassNamesFromElement, $getAdjacentCaret, isHTMLElement as isHTMLElement$1, IS_CHROME, $insertNodeToNearestRoot, $getNearestNodeOfType, $descendantsMatching } from '@lexical/utils';
+import { createCommand, ElementNode, $applyNodeReplacement, isHTMLElement, setNodeIndentFromDOM, DecoratorNode, $getEditor, $isTextNode, $createTextNode, TextNode as TextNode$1, $getSelection, $isRootOrShadowRoot, $isRootNode, $getNodeByKey, scrollIntoViewIfNeeded, $isElementNode, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, ParagraphNode, COMMAND_PRIORITY_EDITOR, $getSiblingCaret, $isTabNode, $createTabNode, $createLineBreakNode, KEY_TAB_COMMAND, COMMAND_PRIORITY_LOW, INSERT_TAB_COMMAND, $insertNodes, INDENT_CONTENT_COMMAND, OUTDENT_CONTENT_COMMAND, KEY_ARROW_UP_COMMAND, $isRangeSelection, KEY_ARROW_DOWN_COMMAND, MOVE_TO_START, MOVE_TO_END, $isLineBreakNode, $rewindSiblingCaret, $createParagraphNode, createEditor, RootNode, LineBreakNode, $isLeafNode, $setPointFromCaret, $normalizeCaret, $getChildCaret, INSERT_PARAGRAPH_COMMAND, COMMAND_PRIORITY_NORMAL, $getPreviousSelection, DELETE_CHARACTER_COMMAND, TextDecoratorNode, COMMAND_PRIORITY_HIGH, CLICK_COMMAND, KEY_ESCAPE_COMMAND, $isNodeSelection, $createNodeSelection, $setSelection, DRAGSTART_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useInstanceConfig } from 'onchain-lexical-context/instanceConfig';
-import Skeleton from 'onchain-lexical-ui/Skeleton';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useCallback, useRef, Suspense } from 'react';
+import React__default, { useState, useCallback, useEffect, useMemo, useRef, Suspense } from 'react';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useSettings } from 'onchain-lexical-context/settings';
-import DropDown, { DropDownItem } from 'onchain-lexical-ui/DropDown';
-import { Icon, StaticIcon } from 'onchain-lexical-ui/Icon';
-import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
+import { $textToRichNodes } from 'onchain-lexical-markdown';
+import { $isListNode, $isListItemNode, $createListItemNode, ListItemNode, ListNode } from '@lexical/list';
 import { $setBlocksType } from '@lexical/selection';
 import { TableNode, INSERT_TABLE_COMMAND, $findTableNode, PIXEL_VALUE_REG_EXP, $isTableRowNode, $createTableRowNode, $createTableCellNode, TableCellHeaderStates } from '@lexical/table';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { HeadingNode, $isHeadingNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import EquationEditor from 'onchain-lexical-ui/EquationEditor';
 import KatexRenderer from 'onchain-lexical-ui/KatexRenderer';
@@ -40,9 +33,16 @@ import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { upload, deleteUpload } from 'onchain-lexical-context';
 import { createWebsocketProvider } from 'onchain-lexical-context/collaboration';
+import { useInstanceConfig } from 'onchain-lexical-context/instanceConfig';
 import { useSharedHistoryContext } from 'onchain-lexical-context/sharedHistory';
 import ContentEditable from 'onchain-lexical-ui/ContentEditable';
 import ImageResizer from 'onchain-lexical-ui/ImageResizer';
+import { hasOwnProperty, dfs, translateI18n } from 'onchain-utility';
+import { dfs as dfs$1 } from 'onchain-utility/traversal';
+import Skeleton from 'onchain-lexical-ui/Skeleton';
+import { useSettings } from 'onchain-lexical-context/settings';
+import DropDown, { DropDownItem } from 'onchain-lexical-ui/DropDown';
+import { Icon, StaticIcon } from 'onchain-lexical-ui/Icon';
 import { HashtagNode } from '@lexical/hashtag';
 import Button from 'onchain-lexical-ui/Button';
 import { DialogActions } from 'onchain-lexical-ui/Dialog';
@@ -128,12 +128,28 @@ const fixedAddress = new Map();
 
 /** 用来存储内联链接，更新文本函数，用来实现链接目标标题变化时，引用处可以实时更新 */
 const internalLinkNameUpdateMap = new Map();
+
+/** 打开创建实例节点 */
 const OPEN_CREATE_WINDOW = createCommand('OPEN_CREATE_WINDOW');
+
+/** 添加新的实例节点 */
 const ADD_NEW_INSTANCE_NODE = createCommand('ADD_NEW_INSTANCE_NODE');
+
+/** 删除实例节点 */
 const DELETE_INSTANCE_NODE = 'DELETE_INSTANCE_NODE';
+
+/** 插入参数 */
 const INSERT_PARAMETERS = createCommand('INSERT_PARAMETERS');
+
+/** 富文本 DecoratorNode 节点组件更新事件*/
 const COMPONENT_UPDATE = createCommand('COMPONENT_UPDATE');
 
+/** 标题更新事件 */
+const INSTANCE_TITLE_UPDATE = createCommand('INSTANCE_TITLE_UPDATE');
+
+/** 获取禁止编辑dom节点选择器 */
+const DisableSelector = `[contenteditable='false']:not([ignorecontenteditable])`;
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -403,6 +419,7 @@ class PlaceholderDecoratorNode extends DecoratorNode {
       pointer-events: none;
       user-select: none;
     `;
+    span.setAttribute('ignorecontenteditable', '');
     return span;
   }
   updateDOM() {
@@ -551,7 +568,16 @@ class InstanceTitleNode extends InstanceHeadingNode {
     if (instanceNode && instanceNode.__instance.value) {
       const text = this.getTextContent().trim();
       setInstanceAttrValue(instanceNode.__instance.value, 'insDesc', text);
-      internalLinkNameUpdateMap.get(instanceNode.__instance.value.number)?.values().forEach(update => update());
+      const editor = $getEditor();
+      Promise.resolve().then(() => {
+        editor.read(() => {
+          editor.dispatchCommand(INSTANCE_TITLE_UPDATE, {
+            isInput: true,
+            number: instanceNode.__instance.value.number,
+            title: text
+          });
+        });
+      });
     }
     return super.updateDOM(prevNode, dom, config);
   }
@@ -823,7 +849,14 @@ function updateRelatedInternalLink(nodes) {
   const insNodes = nodes.filter(node => $isInstanceNode(node));
   if (insNodes.length) {
     insNodes.forEach(node => {
-      internalLinkNameUpdateMap.get(node.__instance.value.number)?.values().forEach(update => update());
+      const editor = $getEditor();
+      Promise.resolve().then(() => {
+        editor.read(() => {
+          editor.dispatchCommand(INSTANCE_TITLE_UPDATE, {
+            number: node.__instance.value.number
+          });
+        });
+      });
     });
   }
 }
@@ -839,7 +872,7 @@ function nodeMoveUp(nodes) {
         previous?.insertBefore(current);
       }
     }
-    updateRelatedInternalLink(nodes);
+    updateRelatedInternalLink($isInstanceNode(previous) ? [...nodes, previous] : nodes);
   }
 }
 function nodeMoveDown(nodes) {
@@ -854,7 +887,7 @@ function nodeMoveDown(nodes) {
         next?.insertAfter(current);
       }
     }
-    updateRelatedInternalLink(nodes);
+    updateRelatedInternalLink($isInstanceNode(next) ? [...nodes, next] : nodes);
   }
 }
 async function $nodeUpgrade(nodes) {
@@ -997,6 +1030,27 @@ function setHSEntryMap(hs, instanceNode) {
     return state;
   });
 }
+function useContentEditable() {
+  const [editor] = useLexicalComposerContext();
+  const [contentEditable, setContentEditable] = useState(true);
+  const $updateContentEditable = useCallback(() => {
+    const selection = $getSelection();
+    if (selection) {
+      setContentEditable(!selection.getNodes().some(node => {
+        return editor.getElementByKey(node.getKey())?.closest(DisableSelector);
+      }));
+    }
+  }, [editor]);
+  useEffect(() => {
+    return editor.registerCommand(SELECTION_CHANGE_COMMAND, _payload => {
+      $updateContentEditable();
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL);
+  }, [editor, $updateContentEditable]);
+  return {
+    contentEditable
+  };
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -22328,6 +22382,7 @@ class ImageNode extends DecoratorNode {
     if (className !== undefined) {
       span.className = className;
     }
+    span.setAttribute('ignorecontenteditable', '');
     return span;
   }
   updateDOM() {
@@ -23660,7 +23715,7 @@ const InstancePlugin = props => {
       const selection = $getSelection();
       if (selection) {
         return selection.getNodes().some(node => {
-          return editor.getElementByKey(node.getKey())?.closest(`[contenteditable='false']`);
+          return editor.getElementByKey(node.getKey())?.closest(DisableSelector);
         });
       }
       return false;
@@ -23751,43 +23806,38 @@ styleInject(css_248z$3);
 /* eslint-disable @lexical/rules-of-lexical */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
-function InternalLinkComponent({
-  self,
-  editor,
-  config,
-  number,
-  nodeKey
-}) {
+function InternalLinkComponent(props) {
+  const {
+    editor,
+    number
+  } = props;
   const [name, setName] = useState();
   const [serial, setSerial] = useState();
-  const update = useCallback(function () {
-    editor.read(() => {
-      const node = $getInstanceNodeByNumber(number);
-      setName(getLatestValue(node.__instance.value, 'insDesc'));
-      setSerial(node.getSerialNumber());
-    });
-  }, []);
   useEffect(() => {
-    update();
+    Promise.resolve().then(() => {
+      // 需要等待节点载入富文本后才能获取到实例节点
+      editor.read(() => {
+        const node = $getInstanceNodeByNumber(number);
+        if (node) {
+          setName(getLatestValue(node.__instance.value, 'insDesc'));
+          setSerial(node.getSerialNumber());
+        }
+      });
+    });
   }, []);
   useEffect(() => {
-    let timeout = 0;
-    let map;
-    const debounceUpdate = () => {
-      clearTimeout(timeout);
-      timeout = window.setTimeout(() => {
-        update();
-      }, 100);
-    };
-    if (internalLinkNameUpdateMap.has(number)) {
-      map = internalLinkNameUpdateMap.get(number).set(nodeKey, debounceUpdate);
-    } else {
-      map = new Map([[nodeKey, debounceUpdate]]);
-      internalLinkNameUpdateMap.set(number, map);
-    }
-    return () => {
-      map.delete(number);
-    };
+    return mergeRegister(editor.registerCommand(INSTANCE_TITLE_UPDATE, priority => {
+      if (priority.number === number) {
+        editor.read(() => {
+          const node = $getInstanceNodeByNumber(priority.number);
+          if (priority.title !== undefined && priority.title !== null) {
+            setName(priority.title);
+          }
+          setSerial(node.getSerialNumber());
+        });
+      }
+      return false;
+    }, COMMAND_PRIORITY_EDITOR));
   }, []);
   if (name) {
     return /*#__PURE__*/jsxs("span", {
@@ -23822,12 +23872,23 @@ class InternalLinkNode extends TextDecoratorNode {
     return new InternalLinkNode(node.__number, node.__key);
   }
   static importJSON(serializedNode) {
-    return $createInternalLinkNode(serializedNode.__number).updateFromJSON(serializedNode);
+    return $createInternalLinkNode(serializedNode.number).updateFromJSON(serializedNode);
   }
   constructor(number, key) {
     super(key);
     this.__number = number;
   }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      number: this.__number
+    };
+  }
+  createDOM(config, editor) {
+    const span = super.createDOM(config, editor);
+    span.setAttribute('ignorecontenteditable', '');
+    return span;
+  }
   updateDOM(prevNode, dom, config) {
     return super.updateDOM(prevNode, dom, config);
   }
@@ -24606,6 +24667,9 @@ function ImageComponent({
   const onResizeStart = () => {
     setIsResizing(true);
   };
+  const {
+    contentEditable
+  } = useContentEditable();
   const {
     historyState
   } = useSharedHistoryContext();
@@ -24646,7 +24710,7 @@ function ImageComponent({
             ErrorBoundary: LexicalErrorBoundary
           })]
         })
-      }), resizable && $isNodeSelection(selection) && isFocused && /*#__PURE__*/jsx(ImageResizer, {
+      }), resizable && $isNodeSelection(selection) && isFocused && contentEditable && /*#__PURE__*/jsx(ImageResizer, {
         showCaption: showCaption,
         setShowCaption: setShowCaption,
         editor: editor,
@@ -24974,4 +25038,4 @@ var InlineImageComponent$1 = {
   default: InlineImageComponent
 };
 
-export { $createBarDecoratorNode, $createCollapsibleContainerNode, $createCollapsibleContentNode, $createCollapsibleTitleNode, $createFragmentNode, $createImageNode, $createInlineImageNode, $createInstanceCodeHighlightNode, $createInstanceCodeNode, $createInstanceEquationNode, $createInstanceHeadingNode, $createInstanceHorizontalRuleNode, $createInstanceListItemNode, $createInstanceListNode, $createInstanceNode, $createInstanceParagraphNode, $createInstanceQuoteNode, $createInstanceTableNode, $createInstanceTitleNode, $createInternalLinkNode, $createKeywordNode, $createNumberDecoratorNode, $createPageBreakNode, $createPlaceholderDecoratorNode, $createTitleOnlyInstanceNode, $findNearestListItemNode, $getAllListItems, $getAnchorRootNode, $getInstanceNodeByChild, $getInstanceNodeByNumber, $getInstanceNodeKeyByNumber, $getListDepth, $getTitleNodeByChild, $getTopListNode, $handleIndent, $handleListInsertParagraph, $handleOutdent, $insertInstanceList, $isBarDecoratorNode, $isCollapsibleContainerNode, $isCollapsibleContentNode, $isCollapsibleTitleNode, $isEmptyInstanceParagraphNode, $isEmptyParagraphNode, $isImageNode, $isInInstanceTitleNode, $isInlineImageNode, $isInstanceCodeHighlightNode, $isInstanceCodeNode, $isInstanceEquationNode, $isInstanceHeadingNode, $isInstanceHorizontalRuleNode, $isInstanceListItemNode, $isInstanceListNode, $isInstanceNode, $isInstanceParagraphFormalNode, $isInstanceParagraphNode, $isInstanceQuoteNode, $isInstanceTableNode, $isInstanceTitleNode, $isInternalLinkNode, $isKeywordNode, $isLastItemInList, $isNumberDecoratorNode, $isPageBreakNode, $isPlaceholderDecoratorNode, $isRemoved, $isSelectedTitleNode, $isTextTypeNode, $nodeDowngrade, $nodeUpgrade, $removeHighestEmptyListParent, $removeList, $scrollTo, $updateRichHistoryStateMap, $updateRichInstanceContent, $updateRichInstanceTitle, $wrapInListItem, ADD_NEW_INSTANCE_NODE, BarDecoratorNode, COMPONENT_UPDATE, CollapsibleContainerNode, CollapsibleContentNode, CollapsibleTitleNode, DELETE_INSTANCE_NODE, Fragment, INSERT_COLLAPSIBLE_COMMAND, INSERT_INS_HORIZONTAL_RULE_COMMAND, INSERT_PARAMETERS, ImageNode, InlineImageNode, InstanceCodeHighlightNode, InstanceCodeNode, InstanceEquationNode, InstanceHeadingNode, InstanceHorizontalRuleNode, InstanceListItemNode, InstanceListNode, InstanceNode, InstanceParagraphNode, InstanceParagraphType, InstancePlugin, InstanceQuoteNode, InstanceTableNode, InstanceTitleNode, InternalLinkNode, KeywordNode, NumberDecoratorNode, OPEN_CREATE_WINDOW, PageBreakNode, PlaceholderDecoratorNode, clearCache, fixedAddress, getCachedClassNameArray, getCodeLanguages, getDefaultCodeLanguage, getInstanceAttrValue, getInstanceBaseInfo, getLanguageFriendlyName, getLatestValue, getTemporaryContentText, ignoreHistory, instanceNodeMap, internalLinkNameUpdateMap, isCompleteInstance, isNestedListNode, mergeLists, mergeNextSiblingListIfSameType, nodeMoveDown, nodeMoveUp, normalizeCodeLang, numberNodeKey, paragraphSymbol, registerCodeHighlighting, setDisable, setInstanceAttrValue, setTemporaryContentText, updateChildrenListItemValue, updateRelatedInternalLink };
+export { $createBarDecoratorNode, $createCollapsibleContainerNode, $createCollapsibleContentNode, $createCollapsibleTitleNode, $createFragmentNode, $createImageNode, $createInlineImageNode, $createInstanceCodeHighlightNode, $createInstanceCodeNode, $createInstanceEquationNode, $createInstanceHeadingNode, $createInstanceHorizontalRuleNode, $createInstanceListItemNode, $createInstanceListNode, $createInstanceNode, $createInstanceParagraphNode, $createInstanceQuoteNode, $createInstanceTableNode, $createInstanceTitleNode, $createInternalLinkNode, $createKeywordNode, $createNumberDecoratorNode, $createPageBreakNode, $createPlaceholderDecoratorNode, $createTitleOnlyInstanceNode, $findNearestListItemNode, $getAllListItems, $getAnchorRootNode, $getInstanceNodeByChild, $getInstanceNodeByNumber, $getInstanceNodeKeyByNumber, $getListDepth, $getTitleNodeByChild, $getTopListNode, $handleIndent, $handleListInsertParagraph, $handleOutdent, $insertInstanceList, $isBarDecoratorNode, $isCollapsibleContainerNode, $isCollapsibleContentNode, $isCollapsibleTitleNode, $isEmptyInstanceParagraphNode, $isEmptyParagraphNode, $isImageNode, $isInInstanceTitleNode, $isInlineImageNode, $isInstanceCodeHighlightNode, $isInstanceCodeNode, $isInstanceEquationNode, $isInstanceHeadingNode, $isInstanceHorizontalRuleNode, $isInstanceListItemNode, $isInstanceListNode, $isInstanceNode, $isInstanceParagraphFormalNode, $isInstanceParagraphNode, $isInstanceQuoteNode, $isInstanceTableNode, $isInstanceTitleNode, $isInternalLinkNode, $isKeywordNode, $isLastItemInList, $isNumberDecoratorNode, $isPageBreakNode, $isPlaceholderDecoratorNode, $isRemoved, $isSelectedTitleNode, $isTextTypeNode, $nodeDowngrade, $nodeUpgrade, $removeHighestEmptyListParent, $removeList, $scrollTo, $updateRichHistoryStateMap, $updateRichInstanceContent, $updateRichInstanceTitle, $wrapInListItem, ADD_NEW_INSTANCE_NODE, BarDecoratorNode, COMPONENT_UPDATE, CollapsibleContainerNode, CollapsibleContentNode, CollapsibleTitleNode, DELETE_INSTANCE_NODE, DisableSelector, Fragment, INSERT_COLLAPSIBLE_COMMAND, INSERT_INS_HORIZONTAL_RULE_COMMAND, INSERT_PARAMETERS, INSTANCE_TITLE_UPDATE, ImageNode, InlineImageNode, InstanceCodeHighlightNode, InstanceCodeNode, InstanceEquationNode, InstanceHeadingNode, InstanceHorizontalRuleNode, InstanceListItemNode, InstanceListNode, InstanceNode, InstanceParagraphNode, InstanceParagraphType, InstancePlugin, InstanceQuoteNode, InstanceTableNode, InstanceTitleNode, InternalLinkNode, KeywordNode, NumberDecoratorNode, OPEN_CREATE_WINDOW, PageBreakNode, PlaceholderDecoratorNode, clearCache, fixedAddress, getCachedClassNameArray, getCodeLanguages, getDefaultCodeLanguage, getInstanceAttrValue, getInstanceBaseInfo, getLanguageFriendlyName, getLatestValue, getTemporaryContentText, ignoreHistory, instanceNodeMap, internalLinkNameUpdateMap, isCompleteInstance, isNestedListNode, mergeLists, mergeNextSiblingListIfSameType, nodeMoveDown, nodeMoveUp, normalizeCodeLang, numberNodeKey, paragraphSymbol, registerCodeHighlighting, setDisable, setInstanceAttrValue, setTemporaryContentText, updateChildrenListItemValue, updateRelatedInternalLink, useContentEditable };

package/package.json

@@ -7,7 +7,7 @@
     "instance"
   ],
   "license": "MIT",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "types": "index.d.ts",
   "files": [
     "dist",
@@ -23,9 +23,9 @@
     "@lexical/table": "^0.30.0",
     "@lexical/utils": "^0.30.0",
     "lexical": "0.30.0",
-    "onchain-lexical-context": "^0.0.7",
-    "onchain-lexical-markdown": "^0.0.7",
-    "onchain-lexical-ui": "^0.0.7",
+    "onchain-lexical-context": "^0.0.8",
+    "onchain-lexical-markdown": "^0.0.8",
+    "onchain-lexical-ui": "^0.0.8",
     "onchain-utility": "^0.0.8"
   },
   "sideEffects": false,

package/src/const.ts

@@ -70,24 +70,39 @@ export const internalLinkNameUpdateMap = new Map<
   Map<string, () => void>
 >();
 
+/** 打开创建实例节点 */
 export const OPEN_CREATE_WINDOW: LexicalCommand<{
   isAddChildLevel: boolean;
   number: string;
   insNodeKey?: string;
 }> = createCommand('OPEN_CREATE_WINDOW');
 
+/** 添加新的实例节点 */
 export const ADD_NEW_INSTANCE_NODE: LexicalCommand<{
   instances: Instance[];
   isAddChildLevel: boolean;
   insNodeKey?: string;
 }> = createCommand('ADD_NEW_INSTANCE_NODE');
 
+/** 删除实例节点 */
 export const DELETE_INSTANCE_NODE = 'DELETE_INSTANCE_NODE';
 
+/** 插入参数 */
 export const INSERT_PARAMETERS: LexicalCommand<undefined> =
   createCommand('INSERT_PARAMETERS');
 
+/** 富文本 DecoratorNode 节点组件更新事件*/
 export const COMPONENT_UPDATE: LexicalCommand<{
   insNodeKey?: string;
   name: 'bar';
 }> = createCommand('COMPONENT_UPDATE');
+
+/** 标题更新事件 */
+export const INSTANCE_TITLE_UPDATE: LexicalCommand<{
+  number: string;
+  isInput?: boolean;
+  title?: string;
+}> = createCommand('INSTANCE_TITLE_UPDATE');
+
+/** 获取禁止编辑dom节点选择器 */
+export const DisableSelector = `[contenteditable='false']:not([ignorecontenteditable])`;

package/src/image/ImageComponent.tsx

@@ -49,6 +49,7 @@ import ImageResizer from 'onchain-lexical-ui/ImageResizer';
 import * as React from 'react';
 import {Suspense, useCallback, useEffect, useRef, useState} from 'react';
 
+import {useContentEditable} from '../utils';
 import {$isImageNode} from '.';
 import Styles from './ImageNode.module.less';
 
@@ -461,7 +462,7 @@ export default function ImageComponent({
   const onResizeStart = () => {
     setIsResizing(true);
   };
-
+  const {contentEditable} = useContentEditable();
   const {historyState} = useSharedHistoryContext();
 
   const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
@@ -518,19 +519,22 @@ export default function ImageComponent({
             </LexicalNestedComposer>
           </div>
         )}
-        {resizable && $isNodeSelection(selection) && isFocused && (
-          <ImageResizer
-            showCaption={showCaption}
-            setShowCaption={setShowCaption}
-            editor={editor}
-            buttonRef={buttonRef}
-            imageRef={imageRef}
-            maxWidth={maxWidth}
-            onResizeStart={onResizeStart}
-            onResizeEnd={onResizeEnd}
-            captionsEnabled={!isLoadError && captionsEnabled}
-          />
-        )}
+        {resizable &&
+          $isNodeSelection(selection) &&
+          isFocused &&
+          contentEditable && (
+            <ImageResizer
+              showCaption={showCaption}
+              setShowCaption={setShowCaption}
+              editor={editor}
+              buttonRef={buttonRef}
+              imageRef={imageRef}
+              maxWidth={maxWidth}
+              onResizeStart={onResizeStart}
+              onResizeEnd={onResizeEnd}
+              captionsEnabled={!isLoadError && captionsEnabled}
+            />
+          )}
       </>
     </Suspense>
   );

package/src/image/index.tsx

@@ -222,6 +222,7 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
     if (className !== undefined) {
       span.className = className;
     }
+    span.setAttribute('ignorecontenteditable', '');
     return span;
   }
 

package/src/instancePlugin.ts

@@ -23,7 +23,7 @@ import {
   $createTitleOnlyInstanceNode,
   $isInstanceNode,
 } from './base';
-import {ADD_NEW_INSTANCE_NODE, PluginProps} from './const';
+import {ADD_NEW_INSTANCE_NODE, DisableSelector, PluginProps} from './const';
 import {$createFragmentNode} from './fragment';
 import {HorizontalRulePlugin} from './horizontal/horizontalPlugin';
 import {$registerInstanceListItemInsertParagraph} from './list/item';
@@ -57,7 +57,7 @@ export const InstancePlugin: React.FC<PluginProps> = (props) => {
             return selection.getNodes().some((node) => {
               return editor
                 .getElementByKey(node.getKey())
-                ?.closest(`[contenteditable='false']`);
+                ?.closest(DisableSelector);
             });
           }
           return false;

package/src/internalLink/index.tsx

@@ -20,7 +20,7 @@ import InternalLinkComponent from './internalLinkComponent';
 
 export type SerializedInternalNode = Spread<
   {
-    __number: string;
+    number: string;
   },
   SerializedTextDecoratorNode
 >;
@@ -35,7 +35,7 @@ export class InternalLinkNode extends TextDecoratorNode<React.ReactNode> {
   }
 
   static importJSON(serializedNode: SerializedInternalNode): InternalLinkNode {
-    return $createInternalLinkNode(serializedNode.__number).updateFromJSON(
+    return $createInternalLinkNode(serializedNode.number).updateFromJSON(
       serializedNode,
     );
   }
@@ -45,6 +45,19 @@ export class InternalLinkNode extends TextDecoratorNode<React.ReactNode> {
     this.__number = number;
   }
 
+  exportJSON(): SerializedInternalNode {
+    return {
+      ...super.exportJSON(),
+      number: this.__number,
+    };
+  }
+
+  createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
+    const span = super.createDOM(config, editor);
+    span.setAttribute('ignorecontenteditable', '');
+    return span;
+  }
+
   updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     return super.updateDOM(prevNode, dom, config);
   }

package/src/internalLink/internalLinkComponent.tsx

@@ -10,59 +10,59 @@
 
 import type {InternalLinkNode} from '.';
 
-import {EditorConfig, LexicalEditor} from 'lexical';
-import {useCallback, useEffect, useState} from 'react';
+import {mergeRegister} from '@lexical/utils';
+import {COMMAND_PRIORITY_EDITOR, EditorConfig, LexicalEditor} from 'lexical';
+import {useEffect, useState} from 'react';
 
-import {internalLinkNameUpdateMap} from '../const';
+import {INSTANCE_TITLE_UPDATE} from '../const';
 import {$getInstanceNodeByNumber, $scrollTo, getLatestValue} from '../utils';
 import Styles from './styles.module.less';
 
-export default function InternalLinkComponent({
-  self,
-  editor,
-  config,
-  number,
-  nodeKey,
-}: {
+export default function InternalLinkComponent(props: {
   self: InternalLinkNode;
+  /** 链接目标的编号 */
   number: string;
+  /** 引用链接组件所在文档内自身节点 */
   nodeKey: string;
   editor: LexicalEditor;
   config: EditorConfig;
 }) {
+  const {editor, number} = props;
   const [name, setName] = useState<string>();
   const [serial, setSerial] = useState<string>();
 
-  const update = useCallback(function () {
-    editor.read(() => {
-      const node = $getInstanceNodeByNumber(number)!;
-      setName(getLatestValue(node.__instance.value, 'insDesc'));
-      setSerial(node.getSerialNumber());
-    });
-  }, []);
-
   useEffect(() => {
-    update();
+    Promise.resolve().then(() => {
+      // 需要等待节点载入富文本后才能获取到实例节点
+      editor.read(() => {
+        const node = $getInstanceNodeByNumber(number)!;
+        if (node) {
+          setName(getLatestValue(node.__instance.value, 'insDesc'));
+          setSerial(node.getSerialNumber());
+        }
+      });
+    });
   }, []);
 
   useEffect(() => {
-    let timeout = 0;
-    let map: Map<string, () => void>;
-    const debounceUpdate = () => {
-      clearTimeout(timeout);
-      timeout = window.setTimeout(() => {
-        update();
-      }, 100);
-    };
-    if (internalLinkNameUpdateMap.has(number)) {
-      map = internalLinkNameUpdateMap.get(number)!.set(nodeKey, debounceUpdate);
-    } else {
-      map = new Map([[nodeKey, debounceUpdate]]);
-      internalLinkNameUpdateMap.set(number, map);
-    }
-    return () => {
-      map.delete(number);
-    };
+    return mergeRegister(
+      editor.registerCommand(
+        INSTANCE_TITLE_UPDATE,
+        (priority) => {
+          if (priority.number === number) {
+            editor.read(() => {
+              const node = $getInstanceNodeByNumber(priority.number)!;
+              if (priority.title !== undefined && priority.title !== null) {
+                setName(priority.title);
+              }
+              setSerial(node.getSerialNumber());
+            });
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+    );
   }, []);
 
   if (name) {

package/src/paragraph/title.ts

@@ -13,6 +13,7 @@ import {
 import {
   $applyNodeReplacement,
   $createTextNode,
+  $getEditor,
   $getSelection,
   $isTextNode,
   BaseSelection,
@@ -29,7 +30,7 @@ import {
 } from 'lexical';
 
 import {$isInstanceNode} from '../base';
-import {internalLinkNameUpdateMap, Placeholder} from '../const';
+import {INSTANCE_TITLE_UPDATE, Placeholder} from '../const';
 import {InstanceHeadingNode, isGoogleDocsTitle} from '../heading';
 import {
   $createPlaceholderDecoratorNode,
@@ -143,10 +144,16 @@ export class InstanceTitleNode extends InstanceHeadingNode {
     if (instanceNode && instanceNode.__instance.value) {
       const text = this.getTextContent().trim();
       setInstanceAttrValue(instanceNode.__instance.value, 'insDesc', text);
-      internalLinkNameUpdateMap
-        .get(instanceNode.__instance.value.number!)
-        ?.values()
-        .forEach((update) => update());
+      const editor = $getEditor();
+      Promise.resolve().then(() => {
+        editor.read(() => {
+          editor.dispatchCommand(INSTANCE_TITLE_UPDATE, {
+            isInput: true,
+            number: instanceNode.__instance.value.number!,
+            title: text,
+          });
+        });
+      });
     }
     return super.updateDOM(prevNode, dom, config);
   }

package/src/placeholder/index.ts

@@ -86,6 +86,7 @@ export class PlaceholderDecoratorNode extends DecoratorNode<string> {
       pointer-events: none;
       user-select: none;
     `;
+    span.setAttribute('ignorecontenteditable', '');
     return span;
   }
 

package/src/utils.ts

@@ -11,6 +11,7 @@ import type {HistoryState, HistoryStateEntry} from '@lexical/history';
 
 import {$isCodeNode} from '@lexical/code';
 import {$isListNode} from '@lexical/list';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$isQuoteNode} from '@lexical/rich-text';
 import {$findMatchingParent} from '@lexical/utils';
 import {
@@ -19,21 +20,26 @@ import {
   $getSelection,
   $isElementNode,
   $isRootNode,
+  COMMAND_PRIORITY_CRITICAL,
   type EditorThemeClasses,
   ElementNode,
   LexicalEditor,
   type LexicalNode,
   scrollIntoViewIfNeeded,
+  SELECTION_CHANGE_COMMAND,
   TextNode,
 } from 'lexical';
 import {$isRootOrShadowRoot} from 'lexical';
 import {$textToRichNodes} from 'onchain-lexical-markdown';
 import {dfs, hasOwnProperty} from 'onchain-utility';
+import {useCallback, useEffect, useState} from 'react';
 import normalizeClassNames from 'shared/normalizeClassNames';
 
 import {$createBarDecoratorNode, $isBarDecoratorNode} from './bar';
 import {$isInstanceNode, InstanceNode} from './base';
 import {
+  DisableSelector,
+  INSTANCE_TITLE_UPDATE,
   internalLinkNameUpdateMap,
   numberNodeKey,
   paragraphSymbol,
@@ -253,10 +259,14 @@ export function updateRelatedInternalLink<T extends ElementNode>(nodes: T[]) {
   const insNodes = nodes.filter((node) => $isInstanceNode(node));
   if (insNodes.length) {
     insNodes.forEach((node) => {
-      internalLinkNameUpdateMap
-        .get(node.__instance.value.number!)
-        ?.values()
-        .forEach((update) => update());
+      const editor = $getEditor();
+      Promise.resolve().then(() => {
+        editor.read(() => {
+          editor.dispatchCommand(INSTANCE_TITLE_UPDATE, {
+            number: node.__instance.value.number!,
+          });
+        });
+      });
     });
   }
 }
@@ -273,7 +283,9 @@ export function nodeMoveUp<T extends ElementNode>(nodes?: T[] | null) {
         previous?.insertBefore(current);
       }
     }
-    updateRelatedInternalLink(nodes);
+    updateRelatedInternalLink(
+      $isInstanceNode(previous) ? [...nodes, previous] : nodes,
+    );
   }
 }
 
@@ -289,7 +301,7 @@ export function nodeMoveDown<T extends ElementNode>(nodes?: T[] | null) {
         next?.insertAfter(current);
       }
     }
-    updateRelatedInternalLink(nodes);
+    updateRelatedInternalLink($isInstanceNode(next) ? [...nodes, next] : nodes);
   }
 }
 
@@ -463,3 +475,36 @@ function setHSEntryMap(hs: HistoryStateEntry[], instanceNode: InstanceNode) {
     return state;
   });
 }
+
+export function useContentEditable() {
+  const [editor] = useLexicalComposerContext();
+  const [contentEditable, setContentEditable] = useState(true);
+
+  const $updateContentEditable = useCallback(() => {
+    const selection = $getSelection();
+    if (selection) {
+      setContentEditable(
+        !selection.getNodes().some((node) => {
+          return editor
+            .getElementByKey(node.getKey())
+            ?.closest(DisableSelector);
+        }),
+      );
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_payload) => {
+        $updateContentEditable();
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor, $updateContentEditable]);
+
+  return {
+    contentEditable,
+  };
+}