onchain-lexical-instance 0.0.13 → 0.0.15

package/dist/OnchainLexicalInstance.js

@@ -21,6 +21,7 @@ var onchainLexicalMarkdown = require('onchain-lexical-markdown');
 var traversal = require('onchain-utility/traversal');
 var selection = require('@lexical/selection');
 var useLexicalNodeSelection = require('@lexical/react/useLexicalNodeSelection');
+var base64 = require('onchain-utility/base64');
 var hooks = require('onchain-utility/hooks');
 var richText = require('@lexical/rich-text');
 var useLexicalEditable = require('@lexical/react/useLexicalEditable');
@@ -1143,6 +1144,26 @@ function $addInstancesNode({
     }
   }
 }
+function $selectDecoratorNode(node) {
+  if (node) {
+    const [previous, next] = [node.getPreviousSibling(), node.getNextSibling()];
+    const rangeSelection = lexical.$createRangeSelection();
+    if (previous) {
+      const isText = lexical.$isTextNode(previous);
+      rangeSelection.anchor.set(isText ? previous.getKey() : node.getParent().getKey(), isText ? previous.getTextContentSize() : node.getPreviousSiblings().length, isText ? 'text' : 'element');
+    } else {
+      const parent = node.getParent();
+      rangeSelection.anchor.set(parent.getKey(), 0, 'element');
+    }
+    if (next) {
+      rangeSelection.focus.set(next.getKey(), 0, lexical.$isTextNode(next) ? 'text' : 'element');
+    } else {
+      const parent = node.getParent();
+      rangeSelection.focus.set(parent.getKey(), node.getPreviousSiblings().length + 1, 'element');
+    }
+    lexical.$setSelection(rangeSelection);
+  }
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -2671,7 +2692,7 @@ function $textNodeTransform(node, editor, tokenizer) {
   // if node's parent is a code node and run highlighting if so
   const parentNode = node.getParent();
   if ($isInstanceCodeNode(parentNode)) {
-    codeNodeTransform(parentNode, editor, tokenizer);
+    codeNodeTransform(parentNode, null, tokenizer);
   } else if ($isInstanceCodeHighlightNode(node)) {
     // When code block converted into paragraph or other element
     // code highlight nodes converted back to normal text
@@ -2711,9 +2732,9 @@ function updateCodeGutter(node, editor) {
 // Especially when pasting code into CodeBlock.
 
 const nodesCurrentlyHighlighting = new Set();
-function codeNodeTransform(node, editor, tokenizer) {
+function codeNodeTransform(node, editor, tokenizer, isEnforcement) {
   const nodeKey = node.getKey();
-  if (nodesCurrentlyHighlighting.has(nodeKey)) {
+  if (nodesCurrentlyHighlighting.has(nodeKey) && !isEnforcement) {
     return;
   }
   nodesCurrentlyHighlighting.add(nodeKey);
@@ -2726,7 +2747,8 @@ function codeNodeTransform(node, editor, tokenizer) {
   // Using nested update call to pass `skipTransforms` since we don't want
   // each individual InstanceCodeHighlightNode to be transformed again as it's already
   // in its final state
-  editor.update(() => {
+  // eslint-disable-next-line @lexical/rules-of-lexical
+  const transform = () => {
     $updateAndRetainSelection(nodeKey, () => {
       const currentNode = lexical.$getNodeByKey(nodeKey);
       if (!$isInstanceCodeNode(currentNode) || !currentNode.isAttached()) {
@@ -2747,12 +2769,17 @@ function codeNodeTransform(node, editor, tokenizer) {
       }
       return false;
     });
-  }, {
-    onUpdate: () => {
-      nodesCurrentlyHighlighting.delete(nodeKey);
-    },
-    skipTransforms: true
-  });
+  };
+  if (editor) {
+    editor.update(transform, {
+      onUpdate: () => {
+        nodesCurrentlyHighlighting.delete(nodeKey);
+      },
+      skipTransforms: true
+    });
+  } else {
+    transform();
+  }
 }
 function $getHighlightNodes(tokens, type) {
   const nodes = [];
@@ -3159,7 +3186,7 @@ function registerCodeHighlighting(editor, tokenizer) {
     });
   }, {
     skipInitialization: false
-  }), editor.registerNodeTransform(InstanceCodeNode, node => codeNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(lexical.TextNode, node => $textNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(InstanceCodeHighlightNode, node => $textNodeTransform(node, editor, tokenizer)), editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
+  }), editor.registerNodeTransform(InstanceCodeNode, node => codeNodeTransform(node, null, tokenizer)), editor.registerNodeTransform(lexical.TextNode, node => $textNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(InstanceCodeHighlightNode, node => $textNodeTransform(node, editor, tokenizer)), editor.registerCommand(lexical.KEY_TAB_COMMAND, event => {
     const command = $handleTab(event.shiftKey);
     if (command === null) {
       return false;
@@ -22154,9 +22181,9 @@ class InstanceEquationNode extends lexical.DecoratorNode {
     return element;
   }
   exportDOM() {
-    const element = document.createElement('span');
+    const element = document.createElement('equation');
     // Encode the equation as base64 to avoid issues with special characters
-    const equation = btoa(this.__equation);
+    const equation = base64.toBase64UTF8(this.__equation);
     element.setAttribute('data-lexical-equation', equation);
     element.setAttribute('data-lexical-inline', `${this.__inline}`);
     katex.render(this.__equation, element, {
@@ -23550,6 +23577,7 @@ class InstanceListNode extends list.ListNode {
   createDOM(config) {
     const element = super.createDOM(config);
     setDisable(this, element);
+    element.setAttribute('list-type', this.getListType());
     return element;
   }
   updateFromJSON(serializedNode) {
@@ -23810,7 +23838,28 @@ const InstancePlugin = props => {
       placeholder
     }), $registerInstanceHeadingNodeTransform(editor), $registerInstanceListItemInsertParagraph(editor), $registerNumberDecoratorNodeUpdate(editor), $registerNumberDecoratorDomUpdate(editor), $registerTableCommand(editor),
     // $selectionChange(editor, setSelectedInstance),
-    editor.registerCommand(lexical.DELETE_CHARACTER_COMMAND, event => {
+    editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, () => {
+      const selection = lexical.$getSelection();
+      if (lexical.$isNodeSelection(selection)) {
+        const [node] = selection.getNodes();
+        if (lexical.$isDecoratorNode(node)) {
+          $selectDecoratorNode(node);
+        }
+      }
+      return false;
+    }, lexical.COMMAND_PRIORITY_CRITICAL), editor.registerCommand(lexical.CLICK_COMMAND, event => {
+      if (event.target instanceof HTMLElement) {
+        const decoratorRootEle = event.target.closest('[data-lexical-decorator="true"]');
+        if (decoratorRootEle) {
+          const key = decoratorRootEle.getAttribute('key');
+          if (key) {
+            const node = lexical.$getNodeByKey(key);
+            $selectDecoratorNode(node);
+          }
+        }
+      }
+      return false;
+    }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.DELETE_CHARACTER_COMMAND, event => {
       const selection = lexical.$getSelection();
       if (selection) {
         return selection.getNodes().some(node => {
@@ -24173,15 +24222,30 @@ class InternalLinkNode extends lexical.TextDecoratorNode {
     super(key);
     this.__number = number;
   }
+
+  // get contentEditable() {
+  //   return 'true'
+  // }
+
   exportJSON() {
     return {
       ...super.exportJSON(),
       number: this.__number
     };
   }
+  exportDOM(editor) {
+    const element = document.createElement('section');
+    element.setAttribute('internal-link', '');
+    element.setAttribute('data-internal-link-number', this.__number);
+    element.textContent = this.getTextContent();
+    return {
+      element
+    };
+  }
   createDOM(config, editor) {
     const span = super.createDOM(config, editor);
     span.setAttribute('ignoreusable', '');
+    span.setAttribute('decorator', 'text');
     return span;
   }
   updateDOM(prevNode, dom, config) {
@@ -24193,6 +24257,16 @@ class InternalLinkNode extends lexical.TextDecoratorNode {
   isInline() {
     return true;
   }
+  isSelected(selection) {
+    return true;
+  }
+  getTextContent() {
+    const insNode = $getInstanceNodeByNumber(this.__number);
+    if (insNode) {
+      return getLatestValue(insNode.__instance.value, 'insDesc') || '';
+    }
+    return '';
+  }
   decorate(editor, config) {
     return /*#__PURE__*/jsxRuntime.jsx(InternalLinkComponent, {
       editor: editor,
@@ -24318,10 +24392,11 @@ function $isPageBreakNode(node) {
  *
  */
 
-const ParametersComponent = ({
+const ParametersComponent = /*#__PURE__*/React.forwardRef(({
   nodeKey
-}) => {
+}, ref) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const spanRef = React.useRef(null);
   const [parameters, setParameters,, latestParameters] = hooks.useStore({
     number: '',
     value: ''
@@ -24353,10 +24428,20 @@ const ParametersComponent = ({
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR));
   }, []);
+  React.useImperativeHandle(ref, () => {
+    return {
+      getValue() {
+        return latestParameters.current.value;
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: spanRef,
+    role: "button",
+    tabIndex: 0,
     children: parameters.value
   });
-};
+});
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -24371,6 +24456,8 @@ class ParametersNode extends lexical.TextDecoratorNode {
   static collection = new Map();
   /** 初始化值 */
 
+  __ref = /*#__PURE__*/React.createRef();
+
   /** 最新的值 */
   get parameters() {
     return ParametersNode.collection.get(this.__parameters.number) || this.__parameters;
@@ -24394,9 +24481,19 @@ class ParametersNode extends lexical.TextDecoratorNode {
       parameters: this.parameters
     };
   }
+  exportDOM(editor) {
+    const element = document.createElement('section');
+    element.setAttribute('parameter', '');
+    element.setAttribute('data-parameter', base64.toBase64UTF8(JSON.stringify(this.parameters)));
+    element.textContent = this.parameters.value;
+    return {
+      element
+    };
+  }
   createDOM(config, editor) {
     const span = super.createDOM(config, editor);
     span.setAttribute('ignoreusable', '');
+    span.setAttribute('key', this.getKey());
     return span;
   }
   updateDOM(prevNode, dom, config) {
@@ -24408,8 +24505,12 @@ class ParametersNode extends lexical.TextDecoratorNode {
   isInline() {
     return true;
   }
+  getTextContent() {
+    return this.__ref.current?.getValue() || '';
+  }
   decorate(editor, config) {
     return /*#__PURE__*/jsxRuntime.jsx(ParametersComponent, {
+      ref: this.__ref,
       nodeKey: this.getKey()
     });
   }
@@ -24421,10 +24522,6 @@ function $isParametersNode(node) {
   return node instanceof ParametersNode;
 }
 
-// export function updateParameters(parameters: Parameters) {
-//   return ParametersNode.collection.set(parameters.number, parameters);
-// }
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -25525,6 +25622,7 @@ exports.$nodeUpgrade = $nodeUpgrade;
 exports.$removeHighestEmptyListParent = $removeHighestEmptyListParent;
 exports.$removeList = $removeList;
 exports.$scrollTo = $scrollTo;
+exports.$selectDecoratorNode = $selectDecoratorNode;
 exports.$updateRichHistoryStateMap = $updateRichHistoryStateMap;
 exports.$updateRichInstanceContent = $updateRichInstanceContent;
 exports.$updateRichInstanceTitle = $updateRichInstanceTitle;
@@ -25567,8 +25665,10 @@ exports.PARAMETERS_UPDATE = PARAMETERS_UPDATE;
 exports.PageBreakNode = PageBreakNode;
 exports.ParametersNode = ParametersNode;
 exports.PlaceholderDecoratorNode = PlaceholderDecoratorNode;
+exports.PrismTokenizer = PrismTokenizer;
 exports.SPLIT_INSTANCE_NODE = SPLIT_INSTANCE_NODE;
 exports.clearCache = clearCache;
+exports.codeNodeTransform = codeNodeTransform;
 exports.correctedInstanceParagraph = correctedInstanceParagraph;
 exports.fixedAddress = fixedAddress;
 exports.getCachedClassNameArray = getCachedClassNameArray;

package/dist/OnchainLexicalInstance.mjs

@@ -8,11 +8,11 @@
 
 import { $isCodeNode, CodeNode } from '@lexical/code';
 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, $setSelection, $createRangeSelection, exportNodeToJSON, TextDecoratorNode, COMMAND_PRIORITY_HIGH, CLICK_COMMAND, KEY_ESCAPE_COMMAND, $isNodeSelection, $createNodeSelection, DRAGSTART_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
+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, $createRangeSelection, $setSelection, 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, $isNodeSelection, $isDecoratorNode, CLICK_COMMAND, DELETE_CHARACTER_COMMAND, exportNodeToJSON, TextDecoratorNode, COMMAND_PRIORITY_HIGH, KEY_ESCAPE_COMMAND, $createNodeSelection, DRAGSTART_COMMAND, KEY_ENTER_COMMAND } from 'lexical';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import * as React from 'react';
-import React__default, { useState, useCallback, useEffect, useMemo, useRef, Suspense } from 'react';
+import React__default, { useState, useCallback, useEffect, useMemo, useRef, useImperativeHandle, Suspense } from 'react';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { $isListNode, $isListItemNode, $createListItemNode, ListItemNode, ListNode } from '@lexical/list';
 import { TableNode, INSERT_TABLE_COMMAND, $findTableNode, PIXEL_VALUE_REG_EXP, $isTableRowNode, $createTableRowNode, $createTableCellNode, TableCellHeaderStates, $isTableSelection, $isTableCellNode } from '@lexical/table';
@@ -20,6 +20,7 @@ import { $textToRichNodes, getStorageSerializedString } from 'onchain-lexical-ma
 import { dfs as dfs$1 } from 'onchain-utility/traversal';
 import { $setBlocksType } from '@lexical/selection';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { toBase64UTF8 } from 'onchain-utility/base64';
 import { useStore } from 'onchain-utility/hooks';
 import { HeadingNode, $isHeadingNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
@@ -1129,6 +1130,26 @@ function $addInstancesNode({
     }
   }
 }
+function $selectDecoratorNode(node) {
+  if (node) {
+    const [previous, next] = [node.getPreviousSibling(), node.getNextSibling()];
+    const rangeSelection = $createRangeSelection();
+    if (previous) {
+      const isText = $isTextNode(previous);
+      rangeSelection.anchor.set(isText ? previous.getKey() : node.getParent().getKey(), isText ? previous.getTextContentSize() : node.getPreviousSiblings().length, isText ? 'text' : 'element');
+    } else {
+      const parent = node.getParent();
+      rangeSelection.anchor.set(parent.getKey(), 0, 'element');
+    }
+    if (next) {
+      rangeSelection.focus.set(next.getKey(), 0, $isTextNode(next) ? 'text' : 'element');
+    } else {
+      const parent = node.getParent();
+      rangeSelection.focus.set(parent.getKey(), node.getPreviousSiblings().length + 1, 'element');
+    }
+    $setSelection(rangeSelection);
+  }
+}
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -2657,7 +2678,7 @@ function $textNodeTransform(node, editor, tokenizer) {
   // if node's parent is a code node and run highlighting if so
   const parentNode = node.getParent();
   if ($isInstanceCodeNode(parentNode)) {
-    codeNodeTransform(parentNode, editor, tokenizer);
+    codeNodeTransform(parentNode, null, tokenizer);
   } else if ($isInstanceCodeHighlightNode(node)) {
     // When code block converted into paragraph or other element
     // code highlight nodes converted back to normal text
@@ -2697,9 +2718,9 @@ function updateCodeGutter(node, editor) {
 // Especially when pasting code into CodeBlock.
 
 const nodesCurrentlyHighlighting = new Set();
-function codeNodeTransform(node, editor, tokenizer) {
+function codeNodeTransform(node, editor, tokenizer, isEnforcement) {
   const nodeKey = node.getKey();
-  if (nodesCurrentlyHighlighting.has(nodeKey)) {
+  if (nodesCurrentlyHighlighting.has(nodeKey) && !isEnforcement) {
     return;
   }
   nodesCurrentlyHighlighting.add(nodeKey);
@@ -2712,7 +2733,8 @@ function codeNodeTransform(node, editor, tokenizer) {
   // Using nested update call to pass `skipTransforms` since we don't want
   // each individual InstanceCodeHighlightNode to be transformed again as it's already
   // in its final state
-  editor.update(() => {
+  // eslint-disable-next-line @lexical/rules-of-lexical
+  const transform = () => {
     $updateAndRetainSelection(nodeKey, () => {
       const currentNode = $getNodeByKey(nodeKey);
       if (!$isInstanceCodeNode(currentNode) || !currentNode.isAttached()) {
@@ -2733,12 +2755,17 @@ function codeNodeTransform(node, editor, tokenizer) {
       }
       return false;
     });
-  }, {
-    onUpdate: () => {
-      nodesCurrentlyHighlighting.delete(nodeKey);
-    },
-    skipTransforms: true
-  });
+  };
+  if (editor) {
+    editor.update(transform, {
+      onUpdate: () => {
+        nodesCurrentlyHighlighting.delete(nodeKey);
+      },
+      skipTransforms: true
+    });
+  } else {
+    transform();
+  }
 }
 function $getHighlightNodes(tokens, type) {
   const nodes = [];
@@ -3145,7 +3172,7 @@ function registerCodeHighlighting(editor, tokenizer) {
     });
   }, {
     skipInitialization: false
-  }), editor.registerNodeTransform(InstanceCodeNode, node => codeNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(TextNode$1, node => $textNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(InstanceCodeHighlightNode, node => $textNodeTransform(node, editor, tokenizer)), editor.registerCommand(KEY_TAB_COMMAND, event => {
+  }), editor.registerNodeTransform(InstanceCodeNode, node => codeNodeTransform(node, null, tokenizer)), editor.registerNodeTransform(TextNode$1, node => $textNodeTransform(node, editor, tokenizer)), editor.registerNodeTransform(InstanceCodeHighlightNode, node => $textNodeTransform(node, editor, tokenizer)), editor.registerCommand(KEY_TAB_COMMAND, event => {
     const command = $handleTab(event.shiftKey);
     if (command === null) {
       return false;
@@ -22140,9 +22167,9 @@ class InstanceEquationNode extends DecoratorNode {
     return element;
   }
   exportDOM() {
-    const element = document.createElement('span');
+    const element = document.createElement('equation');
     // Encode the equation as base64 to avoid issues with special characters
-    const equation = btoa(this.__equation);
+    const equation = toBase64UTF8(this.__equation);
     element.setAttribute('data-lexical-equation', equation);
     element.setAttribute('data-lexical-inline', `${this.__inline}`);
     katex.render(this.__equation, element, {
@@ -23536,6 +23563,7 @@ class InstanceListNode extends ListNode {
   createDOM(config) {
     const element = super.createDOM(config);
     setDisable(this, element);
+    element.setAttribute('list-type', this.getListType());
     return element;
   }
   updateFromJSON(serializedNode) {
@@ -23796,7 +23824,28 @@ const InstancePlugin = props => {
       placeholder
     }), $registerInstanceHeadingNodeTransform(editor), $registerInstanceListItemInsertParagraph(editor), $registerNumberDecoratorNodeUpdate(editor), $registerNumberDecoratorDomUpdate(editor), $registerTableCommand(editor),
     // $selectionChange(editor, setSelectedInstance),
-    editor.registerCommand(DELETE_CHARACTER_COMMAND, event => {
+    editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+      const selection = $getSelection();
+      if ($isNodeSelection(selection)) {
+        const [node] = selection.getNodes();
+        if ($isDecoratorNode(node)) {
+          $selectDecoratorNode(node);
+        }
+      }
+      return false;
+    }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CLICK_COMMAND, event => {
+      if (event.target instanceof HTMLElement) {
+        const decoratorRootEle = event.target.closest('[data-lexical-decorator="true"]');
+        if (decoratorRootEle) {
+          const key = decoratorRootEle.getAttribute('key');
+          if (key) {
+            const node = $getNodeByKey(key);
+            $selectDecoratorNode(node);
+          }
+        }
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(DELETE_CHARACTER_COMMAND, event => {
       const selection = $getSelection();
       if (selection) {
         return selection.getNodes().some(node => {
@@ -24159,15 +24208,30 @@ class InternalLinkNode extends TextDecoratorNode {
     super(key);
     this.__number = number;
   }
+
+  // get contentEditable() {
+  //   return 'true'
+  // }
+
   exportJSON() {
     return {
       ...super.exportJSON(),
       number: this.__number
     };
   }
+  exportDOM(editor) {
+    const element = document.createElement('section');
+    element.setAttribute('internal-link', '');
+    element.setAttribute('data-internal-link-number', this.__number);
+    element.textContent = this.getTextContent();
+    return {
+      element
+    };
+  }
   createDOM(config, editor) {
     const span = super.createDOM(config, editor);
     span.setAttribute('ignoreusable', '');
+    span.setAttribute('decorator', 'text');
     return span;
   }
   updateDOM(prevNode, dom, config) {
@@ -24179,6 +24243,16 @@ class InternalLinkNode extends TextDecoratorNode {
   isInline() {
     return true;
   }
+  isSelected(selection) {
+    return true;
+  }
+  getTextContent() {
+    const insNode = $getInstanceNodeByNumber(this.__number);
+    if (insNode) {
+      return getLatestValue(insNode.__instance.value, 'insDesc') || '';
+    }
+    return '';
+  }
   decorate(editor, config) {
     return /*#__PURE__*/jsx(InternalLinkComponent, {
       editor: editor,
@@ -24304,10 +24378,11 @@ function $isPageBreakNode(node) {
  *
  */
 
-const ParametersComponent = ({
+const ParametersComponent = /*#__PURE__*/React__default.forwardRef(({
   nodeKey
-}) => {
+}, ref) => {
   const [editor] = useLexicalComposerContext();
+  const spanRef = useRef(null);
   const [parameters, setParameters,, latestParameters] = useStore({
     number: '',
     value: ''
@@ -24339,10 +24414,20 @@ const ParametersComponent = ({
       return true;
     }, COMMAND_PRIORITY_EDITOR));
   }, []);
+  useImperativeHandle(ref, () => {
+    return {
+      getValue() {
+        return latestParameters.current.value;
+      }
+    };
+  }, []);
   return /*#__PURE__*/jsx("span", {
+    ref: spanRef,
+    role: "button",
+    tabIndex: 0,
     children: parameters.value
   });
-};
+});
 
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -24357,6 +24442,8 @@ class ParametersNode extends TextDecoratorNode {
   static collection = new Map();
   /** 初始化值 */
 
+  __ref = /*#__PURE__*/React__default.createRef();
+
   /** 最新的值 */
   get parameters() {
     return ParametersNode.collection.get(this.__parameters.number) || this.__parameters;
@@ -24380,9 +24467,19 @@ class ParametersNode extends TextDecoratorNode {
       parameters: this.parameters
     };
   }
+  exportDOM(editor) {
+    const element = document.createElement('section');
+    element.setAttribute('parameter', '');
+    element.setAttribute('data-parameter', toBase64UTF8(JSON.stringify(this.parameters)));
+    element.textContent = this.parameters.value;
+    return {
+      element
+    };
+  }
   createDOM(config, editor) {
     const span = super.createDOM(config, editor);
     span.setAttribute('ignoreusable', '');
+    span.setAttribute('key', this.getKey());
     return span;
   }
   updateDOM(prevNode, dom, config) {
@@ -24394,8 +24491,12 @@ class ParametersNode extends TextDecoratorNode {
   isInline() {
     return true;
   }
+  getTextContent() {
+    return this.__ref.current?.getValue() || '';
+  }
   decorate(editor, config) {
     return /*#__PURE__*/jsx(ParametersComponent, {
+      ref: this.__ref,
       nodeKey: this.getKey()
     });
   }
@@ -24407,10 +24508,6 @@ function $isParametersNode(node) {
   return node instanceof ParametersNode;
 }
 
-// export function updateParameters(parameters: Parameters) {
-//   return ParametersNode.collection.set(parameters.number, parameters);
-// }
-
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -25434,4 +25531,4 @@ var InlineImageComponent$1 = {
   default: InlineImageComponent
 };
 
-export { $addInstancesNode, $createBarDecoratorNode, $createCollapsibleContainerNode, $createCollapsibleContentNode, $createCollapsibleTitleNode, $createFragmentNode, $createImageNode, $createInlineImageNode, $createInstanceCodeHighlightNode, $createInstanceCodeNode, $createInstanceEquationNode, $createInstanceHeadingNode, $createInstanceHorizontalRuleNode, $createInstanceListItemNode, $createInstanceListNode, $createInstanceNode, $createInstanceParagraphNode, $createInstanceQuoteNode, $createInstanceTableNode, $createInstanceTitleNode, $createInternalLinkNode, $createKeywordNode, $createNumberDecoratorNode, $createPageBreakNode, $createParametersNode, $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, $isParametersNode, $isPlaceholderDecoratorNode, $isRemoved, $isSelectedTitleNode, $isTextTypeNode, $nodeDowngrade, $nodeUpgrade, $removeHighestEmptyListParent, $removeList, $scrollTo, $updateRichHistoryStateMap, $updateRichInstanceContent, $updateRichInstanceTitle, $wrapInListItem, ADD_COMMENT, 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, PARAMETERS_UPDATE, PageBreakNode, ParametersNode, PlaceholderDecoratorNode, SPLIT_INSTANCE_NODE, clearCache, correctedInstanceParagraph, fixedAddress, getCachedClassNameArray, getCodeLanguages, getDefaultCodeLanguage, getInstanceAttrValue, getInstanceBaseInfo, getLanguageFriendlyName, getLatestValue, getTemporaryContentText, instanceNodeMap, internalLinkNameUpdateMap, isCompleteInstance, isNestedListNode, mergeLists, mergeNextSiblingListIfSameType, nodeMoveDown, nodeMoveUp, normalizeCodeLang, numberNodeKey, paragraphSymbol, registerCodeHighlighting, setDisable, setInstanceAttrValue, setTemporaryContentText, updateChildrenListItemValue, updateRelatedInternalLink, useContentEditable };
+export { $addInstancesNode, $createBarDecoratorNode, $createCollapsibleContainerNode, $createCollapsibleContentNode, $createCollapsibleTitleNode, $createFragmentNode, $createImageNode, $createInlineImageNode, $createInstanceCodeHighlightNode, $createInstanceCodeNode, $createInstanceEquationNode, $createInstanceHeadingNode, $createInstanceHorizontalRuleNode, $createInstanceListItemNode, $createInstanceListNode, $createInstanceNode, $createInstanceParagraphNode, $createInstanceQuoteNode, $createInstanceTableNode, $createInstanceTitleNode, $createInternalLinkNode, $createKeywordNode, $createNumberDecoratorNode, $createPageBreakNode, $createParametersNode, $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, $isParametersNode, $isPlaceholderDecoratorNode, $isRemoved, $isSelectedTitleNode, $isTextTypeNode, $nodeDowngrade, $nodeUpgrade, $removeHighestEmptyListParent, $removeList, $scrollTo, $selectDecoratorNode, $updateRichHistoryStateMap, $updateRichInstanceContent, $updateRichInstanceTitle, $wrapInListItem, ADD_COMMENT, 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, PARAMETERS_UPDATE, PageBreakNode, ParametersNode, PlaceholderDecoratorNode, PrismTokenizer, SPLIT_INSTANCE_NODE, clearCache, codeNodeTransform, correctedInstanceParagraph, fixedAddress, getCachedClassNameArray, getCodeLanguages, getDefaultCodeLanguage, getInstanceAttrValue, getInstanceBaseInfo, getLanguageFriendlyName, getLatestValue, getTemporaryContentText, 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.13",
+  "version": "0.0.15",
   "types": "index.d.ts",
   "files": [
     "dist",
@@ -23,10 +23,10 @@
     "@lexical/table": "^0.30.0",
     "@lexical/utils": "^0.30.0",
     "lexical": "0.30.0",
-    "onchain-lexical-context": "^0.0.12",
-    "onchain-lexical-markdown": "^0.0.12",
-    "onchain-lexical-ui": "^0.0.12",
-    "onchain-utility": "^0.0.10"
+    "onchain-lexical-context": "^0.0.13",
+    "onchain-lexical-markdown": "^0.0.14",
+    "onchain-lexical-ui": "^0.0.13",
+    "onchain-utility": "^0.0.11"
   },
   "sideEffects": false,
   "exports": {

package/src/code/codeHighlighter.ts

@@ -212,7 +212,7 @@ function $textNodeTransform(
   // if node's parent is a code node and run highlighting if so
   const parentNode = node.getParent();
   if ($isInstanceCodeNode(parentNode)) {
-    codeNodeTransform(parentNode, editor, tokenizer);
+    codeNodeTransform(parentNode, null, tokenizer);
   } else if ($isInstanceCodeHighlightNode(node)) {
     // When code block converted into paragraph or other element
     // code highlight nodes converted back to normal text
@@ -254,14 +254,14 @@ function updateCodeGutter(node: InstanceCodeNode, editor: LexicalEditor): void {
 
 const nodesCurrentlyHighlighting = new Set();
 
-function codeNodeTransform(
+export function codeNodeTransform(
   node: InstanceCodeNode,
-  editor: LexicalEditor,
+  editor: LexicalEditor | null,
   tokenizer: Tokenizer,
+  isEnforcement?: boolean
 ) {
   const nodeKey = node.getKey();
-
-  if (nodesCurrentlyHighlighting.has(nodeKey)) {
+  if (nodesCurrentlyHighlighting.has(nodeKey) && !isEnforcement) {
     return;
   }
 
@@ -275,42 +275,48 @@ function codeNodeTransform(
   // Using nested update call to pass `skipTransforms` since we don't want
   // each individual InstanceCodeHighlightNode to be transformed again as it's already
   // in its final state
-  editor.update(
-    () => {
-      $updateAndRetainSelection(nodeKey, () => {
-        const currentNode = $getNodeByKey(nodeKey);
+  // eslint-disable-next-line @lexical/rules-of-lexical
+  const transform = () => {
+    $updateAndRetainSelection(nodeKey, () => {
+      const currentNode = $getNodeByKey(nodeKey);
 
-        if (!$isInstanceCodeNode(currentNode) || !currentNode.isAttached()) {
-          return false;
-        }
+      if (!$isInstanceCodeNode(currentNode) || !currentNode.isAttached()) {
+        return false;
+      }
 
-        const code = currentNode.getTextContent();
-        const tokens = tokenizer.tokenize(
-          code,
-          currentNode.getLanguage() || tokenizer.defaultLanguage,
-        );
-        const highlightNodes = $getHighlightNodes(tokens);
-        const diffRange = getDiffRange(
-          currentNode.getChildren(),
-          highlightNodes,
-        );
-        const {from, to, nodesForReplacement} = diffRange;
-
-        if (from !== to || nodesForReplacement.length) {
-          node.splice(from, to - from, nodesForReplacement);
-          return true;
-        }
+      const code = currentNode.getTextContent();
+      const tokens = tokenizer.tokenize(
+        code,
+        currentNode.getLanguage() || tokenizer.defaultLanguage,
+      );
+      const highlightNodes = $getHighlightNodes(tokens);
+      const diffRange = getDiffRange(
+        currentNode.getChildren(),
+        highlightNodes,
+      );
+      const {from, to, nodesForReplacement} = diffRange;
 
-        return false;
-      });
-    },
-    {
-      onUpdate: () => {
-        nodesCurrentlyHighlighting.delete(nodeKey);
+      if (from !== to || nodesForReplacement.length) {
+        node.splice(from, to - from, nodesForReplacement);
+        return true;
+      }
+
+      return false;
+    });
+  };
+  if (editor) {
+    editor.update(transform,
+      {
+        onUpdate: () => {
+          nodesCurrentlyHighlighting.delete(nodeKey);
+        },
+        skipTransforms: true,
       },
-      skipTransforms: true,
-    },
-  );
+    );
+  } else {
+    transform();
+  }
+
 }
 
 function $getHighlightNodes(
@@ -842,7 +848,7 @@ export function registerCodeHighlighting(
       {skipInitialization: false},
     ),
     editor.registerNodeTransform(InstanceCodeNode, (node) =>
-      codeNodeTransform(node, editor, tokenizer as Tokenizer),
+      codeNodeTransform(node, null, tokenizer as Tokenizer),
     ),
     editor.registerNodeTransform(TextNode, (node) =>
       $textNodeTransform(node, editor, tokenizer as Tokenizer),

package/src/collapsible/index.ts

@@ -22,7 +22,7 @@ import {
   $createCollapsibleTitleNode,
   $isCollapsibleTitleNode,
   CollapsibleTitleNode,
-} from './titleNode';
+} from './title';
 
 const INSERT_COLLAPSIBLE_COMMAND = createCommand<void>(
   'INSERT_COLLAPSIBLE_COMMAND',

package/src/equation/index.tsx

@@ -19,6 +19,7 @@ import type {JSX} from 'react';
 
 import katex from 'katex';
 import {$applyNodeReplacement, DecoratorNode, DOMExportOutput} from 'lexical';
+import { toBase64UTF8 } from 'onchain-utility/base64';
 import * as React from 'react';
 
 const EquationComponent = React.lazy(() => import('./EquationComponent'));
@@ -89,9 +90,9 @@ export class InstanceEquationNode extends DecoratorNode<JSX.Element> {
   }
 
   exportDOM(): DOMExportOutput {
-    const element = document.createElement('span');
+    const element = document.createElement('equation');
     // Encode the equation as base64 to avoid issues with special characters
-    const equation = btoa(this.__equation);
+    const equation = toBase64UTF8(this.__equation);
     element.setAttribute('data-lexical-equation', equation);
     element.setAttribute('data-lexical-inline', `${this.__inline}`);
     katex.render(this.__equation, element, {

package/src/index.ts

@@ -21,7 +21,7 @@ export {
   $isInstanceCodeNode,
   InstanceCodeNode,
 } from './code';
-export {registerCodeHighlighting} from './code/codeHighlighter';
+export {codeNodeTransform, PrismTokenizer,registerCodeHighlighting} from './code/codeHighlighter';
 export {
   $createInstanceCodeHighlightNode,
   $isInstanceCodeHighlightNode,

package/src/instancePlugin.ts

@@ -21,9 +21,12 @@ import {
   $createTextNode,
   $getNodeByKey,
   $getSelection,
+  $isDecoratorNode,
   $isElementNode,
+  $isNodeSelection,
   $isRangeSelection,
   $setSelection,
+  CLICK_COMMAND,
   COMMAND_PRIORITY_CRITICAL,
   COMMAND_PRIORITY_LOW,
   DELETE_CHARACTER_COMMAND,
@@ -31,6 +34,7 @@ import {
   exportNodeToJSON,
   INSERT_PARAGRAPH_COMMAND,
   LexicalNode,
+  SELECTION_CHANGE_COMMAND,
   SerializedLexicalNode,
 } from 'lexical';
 import {getStorageSerializedString} from 'onchain-lexical-markdown';
@@ -59,12 +63,18 @@ import {
   $registerInstanceParagraphNodeTransform,
 } from './paragraph';
 import {$registerInstanceHeadingNodeTransform} from './paragraph/title';
+import {ParametersNode} from './parameters';
 import {
   $createInstanceTableNode,
   $isInstanceTableNode,
   $registerTableCommand,
 } from './table';
-import {$addInstancesNode, clearCache, setTemporaryContentText} from './utils';
+import {
+  $addInstancesNode,
+  $selectDecoratorNode,
+  clearCache,
+  setTemporaryContentText,
+} from './utils';
 
 export const InstancePlugin: React.FC<PluginProps> = (props) => {
   const {placeholder} = props;
@@ -79,6 +89,39 @@ export const InstancePlugin: React.FC<PluginProps> = (props) => {
       $registerNumberDecoratorDomUpdate(editor),
       $registerTableCommand(editor),
       // $selectionChange(editor, setSelectedInstance),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          const selection = $getSelection();
+          if ($isNodeSelection(selection)) {
+            const [node] = selection.getNodes();
+            if ($isDecoratorNode(node)) {
+              $selectDecoratorNode(node);
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (event: MouseEvent) => {
+          if (event.target instanceof HTMLElement) {
+            const decoratorRootEle = event.target.closest(
+              '[data-lexical-decorator="true"]',
+            );
+            if (decoratorRootEle) {
+              const key = decoratorRootEle.getAttribute('key');
+              if (key) {
+                const node = $getNodeByKey<ParametersNode>(key);
+                $selectDecoratorNode(node);
+              }
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
       editor.registerCommand(
         DELETE_CHARACTER_COMMAND,
         (event) => {

package/src/internalLink/index.tsx

@@ -8,14 +8,18 @@
 
 import {
   $applyNodeReplacement,
+  BaseSelection,
+  DOMExportOutput,
   EditorConfig,
   LexicalEditor,
+  LexicalNode,
   SerializedTextDecoratorNode,
   Spread,
   TextDecoratorNode,
 } from 'lexical';
 import React from 'react';
 
+import {$getInstanceNodeByNumber, getLatestValue} from '../utils';
 import InternalLinkComponent from './internalLinkComponent';
 
 export type SerializedInternalNode = Spread<
@@ -45,6 +49,10 @@ export class InternalLinkNode extends TextDecoratorNode<React.ReactNode> {
     this.__number = number;
   }
 
+  // get contentEditable() {
+  //   return 'true'
+  // }
+
   exportJSON(): SerializedInternalNode {
     return {
       ...super.exportJSON(),
@@ -52,9 +60,18 @@ export class InternalLinkNode extends TextDecoratorNode<React.ReactNode> {
     };
   }
 
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const element = document.createElement('section');
+    element.setAttribute('internal-link', '');
+    element.setAttribute('data-internal-link-number', this.__number);
+    element.textContent = this.getTextContent();
+    return {element};
+  }
+
   createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
     const span = super.createDOM(config, editor);
     span.setAttribute('ignoreusable', '');
+    span.setAttribute('decorator', 'text');
     return span;
   }
 
@@ -70,6 +87,18 @@ export class InternalLinkNode extends TextDecoratorNode<React.ReactNode> {
     return true;
   }
 
+  isSelected(selection?: null | BaseSelection): boolean {
+    return true;
+  }
+
+  getTextContent(): string {
+    const insNode = $getInstanceNodeByNumber(this.__number);
+    if (insNode) {
+      return getLatestValue(insNode.__instance.value, 'insDesc') || '';
+    }
+    return '';
+  }
+
   decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {
     return (
       <InternalLinkComponent
@@ -88,7 +117,7 @@ export function $createInternalLinkNode(number: string): InternalLinkNode {
 }
 
 export function $isInternalLinkNode(
-  node: InternalLinkNode | null | undefined,
+  node: LexicalNode | null | undefined,
 ): node is InternalLinkNode {
   return node instanceof InternalLinkNode;
 }

package/src/list/index.ts

@@ -82,6 +82,7 @@ export class InstanceListNode extends ListNode {
   createDOM(config: EditorConfig): HTMLElement {
     const element = super.createDOM(config);
     setDisable(this, element);
+    element.setAttribute('list-type', this.getListType());
     return element;
   }
 

package/src/parameters/index.tsx

@@ -8,16 +8,22 @@
 
 import {
   $applyNodeReplacement,
+  DOMConversionMap,
+  DOMExportOutput,
   EditorConfig,
   LexicalEditor,
   LexicalNode,
   SerializedTextDecoratorNode,
+  SerializedTextNode,
   Spread,
   TextDecoratorNode,
+  TextNode,
 } from 'lexical';
+import {toBase64UTF8} from 'onchain-utility/base64';
 import React from 'react';
 
 import ParametersComponent from './parametersComponent';
+import {ParametersRef} from './types';
 
 export interface Parameters {
   value: string;
@@ -38,6 +44,8 @@ export class ParametersNode extends TextDecoratorNode<React.ReactNode> {
   /** 初始化值 */
   __parameters: Parameters;
 
+  __ref = React.createRef<ParametersRef>();
+
   /** 最新的值 */
   get parameters() {
     return (
@@ -71,10 +79,18 @@ export class ParametersNode extends TextDecoratorNode<React.ReactNode> {
       parameters: this.parameters,
     };
   }
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const element = document.createElement('section');
+    element.setAttribute('parameter', '');
+    element.setAttribute('data-parameter', toBase64UTF8(JSON.stringify(this.parameters)));
+    element.textContent = this.parameters.value;
+    return {element};
+  }
 
   createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
     const span = super.createDOM(config, editor);
     span.setAttribute('ignoreusable', '');
+    span.setAttribute('key', this.getKey());
     return span;
   }
 
@@ -90,8 +106,12 @@ export class ParametersNode extends TextDecoratorNode<React.ReactNode> {
     return true;
   }
 
+  getTextContent(): string {
+    return this.__ref.current?.getValue() || '';
+  }
+
   decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {
-    return <ParametersComponent nodeKey={this.getKey()} />;
+    return <ParametersComponent ref={this.__ref} nodeKey={this.getKey()} />;
   }
 }
 
@@ -108,3 +128,30 @@ export function $isParametersNode(
 // export function updateParameters(parameters: Parameters) {
 //   return ParametersNode.collection.set(parameters.number, parameters);
 // }
+
+class TestNode extends TextNode {
+  static getType(): string {
+    return 'Parameters';
+  }
+  static clone(node: TestNode): TestNode {
+    return new TestNode(node.__text, node.__key);
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return TextNode.importDOM();
+  }
+
+  static importJSON(serializedNode: SerializedTextNode): TextNode {
+    return $createTestNode().updateFromJSON(serializedNode);
+  }
+}
+
+export function $createTestNode(text = ''): TestNode {
+  return $applyNodeReplacement(new TestNode(text));
+}
+
+export function $isTestNode(
+  node: LexicalNode | null | undefined,
+): node is TestNode {
+  return node instanceof TestNode;
+}

package/src/parameters/parametersComponent.tsx

@@ -10,46 +10,66 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {mergeRegister} from '@lexical/utils';
 import {$getNodeByKey, COMMAND_PRIORITY_EDITOR} from 'lexical';
 import {useStore} from 'onchain-utility/hooks';
-import {useEffect} from 'react';
+import React, {useEffect, useImperativeHandle, useRef} from 'react';
 
 import {PARAMETERS_UPDATE} from '../const';
 import {$isParametersNode} from '.';
+import {ParametersRef} from './types';
 
-const ParametersComponent = ({nodeKey}: {nodeKey: string}) => {
-  const [editor] = useLexicalComposerContext();
-  const [parameters, setParameters, , latestParameters] = useStore({
-    number: '',
-    value: '',
-  });
-
-  useEffect(() => {
-    editor.read(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isParametersNode(node)) {
-        setParameters(node.parameters);
-      }
+const ParametersComponent = React.forwardRef<ParametersRef, {nodeKey: string}>(
+  ({nodeKey}, ref) => {
+    const [editor] = useLexicalComposerContext();
+    const spanRef = useRef<HTMLSpanElement>(null);
+    const [parameters, setParameters, , latestParameters] = useStore({
+      number: '',
+      value: '',
     });
-    return mergeRegister(
-      editor.registerCommand(
-        PARAMETERS_UPDATE,
-        ({number, value}) => {
-          const latest = latestParameters.current;
-          if (number !== latest.number) {
-            return false;
-          }
-          const node = $getNodeByKey(nodeKey);
-          if ($isParametersNode(node)) {
-            setParameters({value});
-            Object.assign(node.parameters, {value});
-          }
-          return true;
-        },
-        COMMAND_PRIORITY_EDITOR,
-      ),
+
+    useEffect(() => {
+      editor.read(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isParametersNode(node)) {
+          setParameters(node.parameters);
+        }
+      });
+      return mergeRegister(
+        editor.registerCommand(
+          PARAMETERS_UPDATE,
+          ({number, value}) => {
+            const latest = latestParameters.current;
+            if (number !== latest.number) {
+              return false;
+            }
+            const node = $getNodeByKey(nodeKey);
+            if ($isParametersNode(node)) {
+              setParameters({value});
+              Object.assign(node.parameters, {value});
+            }
+            return true;
+          },
+          COMMAND_PRIORITY_EDITOR,
+        ),
+      );
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => {
+        return {
+          getValue() {
+            return latestParameters.current.value;
+          },
+        };
+      },
+      [],
     );
-  }, []);
 
-  return <span>{parameters.value}</span>;
-};
+    return (
+      <span ref={spanRef} role="button" tabIndex={0}>
+        {parameters.value}
+      </span>
+    );
+  },
+);
 
 export default ParametersComponent;

package/src/parameters/types.d.ts

@@ -0,0 +1,3 @@
+export interface ParametersRef {
+  getValue(): string;
+}

package/src/utils.ts

@@ -15,12 +15,16 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$isQuoteNode} from '@lexical/rich-text';
 import {$findMatchingParent} from '@lexical/utils';
 import {
+  $createRangeSelection,
   $getEditor,
   $getNodeByKey,
   $getSelection,
   $isElementNode,
   $isRootNode,
+  $isTextNode,
+  $setSelection,
   COMMAND_PRIORITY_CRITICAL,
+  DecoratorNode,
   type EditorThemeClasses,
   ElementNode,
   LexicalEditor,
@@ -566,3 +570,38 @@ export function $addInstancesNode({
     }
   }
 }
+
+export function $selectDecoratorNode<T>(node?: DecoratorNode<T> | null) {
+  if (node) {
+    const [previous, next] = [node.getPreviousSibling(), node.getNextSibling()];
+    const rangeSelection = $createRangeSelection();
+    if (previous) {
+      const isText = $isTextNode(previous);
+      rangeSelection.anchor.set(
+        isText ? previous.getKey() : node.getParent()!.getKey(),
+        isText
+          ? previous.getTextContentSize()
+          : node.getPreviousSiblings().length,
+        isText ? 'text' : 'element',
+      );
+    } else {
+      const parent = node.getParent()!;
+      rangeSelection.anchor.set(parent.getKey(), 0, 'element');
+    }
+    if (next) {
+      rangeSelection.focus.set(
+        next.getKey(),
+        0,
+        $isTextNode(next) ? 'text' : 'element',
+      );
+    } else {
+      const parent = node.getParent()!;
+      rangeSelection.focus.set(
+        parent.getKey(),
+        node.getPreviousSiblings().length + 1,
+        'element',
+      );
+    }
+    $setSelection(rangeSelection);
+  }
+}