@haklex/rich-editor 0.0.37 → 0.0.39

package/README.md

@@ -6,7 +6,7 @@
 ## 包定位
 
 - `@haklex/rich-editor`：编辑器核心（`RichEditor`）
-- `@haklex/rich-renderer`：只读渲染引擎（`RichRenderer`）
+- `@haklex/rich-static-renderer`：只读渲染引擎（`RichRenderer`）
 - `@haklex/rich-renderers`：静态增强渲染器聚合（codeblock、image、video、mermaid...）
 - `@haklex/rich-renderers-edit`：编辑增强渲染器与扩展插件聚合
 - `@haklex/rich-kit-shiro`：一站式生产组合（编辑 + 渲染 + 常用扩展）
@@ -51,7 +51,7 @@ export function DemoEditor() {
 如果要渲染只读内容：
 
 ```tsx
-import { RichRenderer } from '@haklex/rich-renderer'
+import { RichRenderer } from '@haklex/rich-static-renderer'
 
 <RichRenderer value={value} />
 ```
@@ -67,7 +67,7 @@ import { RichRenderer } from '@haklex/rich-renderer'
 | --- | --- |
 | `@haklex/rich-editor` | 完整导出（组件、节点、插件命令、上下文、类型） |
 | `@haklex/rich-editor/editor` | 轻入口：`RichEditor` + 节点配置 |
-| `@haklex/rich-editor/static` | 渲染/SSR 相关静态工具（供 `@haklex/rich-renderer` 与扩展包使用） |
+| `@haklex/rich-editor/static` | 渲染/SSR 相关静态工具（供 `@haklex/rich-static-renderer` 与扩展包使用） |
 | `@haklex/rich-editor/styles` | 仅样式变量/variant class 导出（不含 Lexical theme 对象） |
 | `@haklex/rich-editor/style.css` | 打包后的编辑器样式 |
 
@@ -307,7 +307,7 @@ static slashMenuItems = [
 
 ```tsx
 import { RichEditor } from '@haklex/rich-editor'
-import { RichRenderer } from '@haklex/rich-renderer'
+import { RichRenderer } from '@haklex/rich-static-renderer'
 
 <RichEditor extraNodes={[PollEditNode]}>{/* <PollPlugin /> */}</RichEditor>
 

package/dist/{RichEditor-B9KIgSwn.js → RichEditor-BcbNmzGB.js}

@@ -12,10 +12,10 @@ import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
-import { V as $isAlertQuoteNode, d as RendererWrapper, W as AlertRenderer, X as SpoilerNode, Y as MentionNode, Z as FootnoteNode, L as KaTeXInlineNode, _ as AlertQuoteNode, f as editorTheme, a0 as $isBannerNode, a1 as BannerRenderer, a2 as BannerNode, a3 as normalizeBannerType, a4 as $isCodeBlockNode, a5 as CodeBlockRenderer, a6 as CodeBlockNode, i as useFootnoteDefinitions, G as FootnoteSectionNode, t as $isGridContainerNode, I as GridContainerNode, b as builtinNodes, K as KaTeXBlockNode, J as ImageNode, a7 as VideoNode, O as LinkCardNode, a8 as DetailsNode, Q as MermaidNode, F as FootnoteDefinitionsProvider, p as $createImageNode, T as computeImageMeta, S as OPEN_IMAGE_UPLOAD_DIALOG_COMMAND, a9 as $createKaTeXInlineNode, aa as $createKaTeXBlockNode, ab as $createDetailsNode, ac as $createFootnoteNode, s as $isFootnoteSectionNode, $ as $createFootnoteSectionNode, ad as $createMentionNode, g as extractTextContent, ae as $createSpoilerNode, r as $createMermaidNode, C as ColorSchemeProvider, R as RendererConfigProvider } from "./theme-D1COY7pa.js";
-import { $getNodeByKey, $insertNodes, createEditor, $nodesOfType, $getRoot, createCommand, COMMAND_PRIORITY_EDITOR, $parseSerializedNode, $getSelection, $isRangeSelection, $createParagraphNode, COMMAND_PRIORITY_HIGH, PASTE_COMMAND, $createTextNode, KEY_ENTER_COMMAND } from "lexical";
+import { Y as $isAlertQuoteNode, d as RendererWrapper, Z as AlertRenderer, _ as SpoilerNode, T as MentionNode, a0 as FootnoteNode, O as KaTeXInlineNode, a1 as AlertQuoteNode, f as editorTheme, a2 as $isBannerNode, a3 as BannerRenderer, a4 as BannerNode, a5 as normalizeBannerType, a6 as $isCodeBlockNode, a7 as CodeBlockRenderer, a8 as CodeBlockNode, i as useFootnoteDefinitions, I as FootnoteSectionNode, v as $isGridContainerNode, K as GridContainerNode, b as builtinNodes, M as KaTeXBlockNode, L as ImageNode, a9 as VideoNode, Q as LinkCardNode, aa as DetailsNode, U as MermaidNode, F as FootnoteDefinitionsProvider, p as $createImageNode, W as computeImageMeta, V as OPEN_IMAGE_UPLOAD_DIALOG_COMMAND, ab as $createKaTeXInlineNode, ac as $createKaTeXBlockNode, ad as $createDetailsNode, ae as $createFootnoteNode, t as $isFootnoteSectionNode, $ as $createFootnoteSectionNode, r as $createMentionNode, g as extractTextContent, af as $createSpoilerNode, s as $createMermaidNode, C as ColorSchemeProvider, R as RendererConfigProvider } from "./theme-gVNBI_ET.js";
+import { $getNodeByKey, KEY_ENTER_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, COMMAND_PRIORITY_HIGH, $getRoot, $createParagraphNode, $isParagraphNode, $getSelection, $isRangeSelection, $insertNodes, createEditor, $isElementNode, $isDecoratorNode, $createNodeSelection, $setSelection, $nodesOfType, createCommand, COMMAND_PRIORITY_EDITOR, $isRootNode, $isNodeSelection, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ARROW_UP_COMMAND, $isTextNode, $parseSerializedNode, PASTE_COMMAND, $createTextNode, $createLineBreakNode } from "lexical";
 import { Info, Lightbulb, TriangleAlert, Flag, LayoutGrid, Plus, Minus, Check, Upload, Link2 } from "lucide-react";
-import { useCallback, createElement, useState, useEffect, createContext, use, useRef, useMemo } from "react";
+import { useCallback, useEffect, createElement, useState, createContext, use, useRef, useMemo } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { ContentEditable as ContentEditable$1 } from "@lexical/react/LexicalContentEditable";
 import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
@@ -23,13 +23,110 @@ import { CodeNode } from "@lexical/code";
 import { HorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND, $createHorizontalRuleNode } from "@lexical/extension";
 import { LinkNode, AutoLinkNode, createLinkMatcherWithRegExp, registerAutoLink } from "@lexical/link";
 import { ListNode, ListItemNode } from "@lexical/list";
-import { HeadingNode, QuoteNode, DRAG_DROP_PASTE } from "@lexical/rich-text";
+import { HeadingNode, QuoteNode, $isQuoteNode, DRAG_DROP_PASTE, $createQuoteNode } from "@lexical/rich-text";
 import { TableNode, TableCellNode, TableRowNode } from "@lexical/table";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { Dialog, DialogPopup, DialogTitle, SegmentedControl } from "@haklex/rich-editor-ui";
 import { b as clsx, g as getVariantClass } from "./utils-fpeaZV1R.js";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import { CHECK_LIST, TRANSFORMERS } from "@lexical/markdown";
+import { CHECK_LIST, TRANSFORMERS, QUOTE, CODE } from "@lexical/markdown";
 import { GIT_ALERT_TRANSFORMER as GIT_ALERT_TRANSFORMER$1, CONTAINER_TRANSFORMER as CONTAINER_TRANSFORMER$1, FOOTNOTE_TRANSFORMER as FOOTNOTE_TRANSFORMER$1, FOOTNOTE_SECTION_TRANSFORMER as FOOTNOTE_SECTION_TRANSFORMER$1, KATEX_INLINE_TRANSFORMER as KATEX_INLINE_TRANSFORMER$1, KATEX_BLOCK_TRANSFORMER as KATEX_BLOCK_TRANSFORMER$1, MENTION_TRANSFORMER as MENTION_TRANSFORMER$1, SPOILER_TRANSFORMER as SPOILER_TRANSFORMER$1, INSERT_TRANSFORMER, SUPERSCRIPT_TRANSFORMER, SUBSCRIPT_TRANSFORMER, IMAGE_BLOCK_TRANSFORMER, VIDEO_BLOCK_TRANSFORMER, CODE_BLOCK_NODE_TRANSFORMER, LINK_CARD_BLOCK_TRANSFORMER, MERMAID_BLOCK_TRANSFORMER, HORIZONTAL_RULE_BLOCK_TRANSFORMER, TABLE_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
+function ExitBlockPlugin({
+  parentEditor,
+  nodeKey
+}) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const focusParent = () => {
+      parentEditor.focus(() => {
+        parentEditor.update(() => {
+          const alertNode = $getNodeByKey(nodeKey);
+          if (alertNode) {
+            const next = alertNode.getNextSibling();
+            if (next) {
+              next.selectStart();
+            }
+          }
+        });
+      });
+    };
+    const exitAlert = (removeEmpty) => {
+      const root = $getRoot();
+      const lastChild = root.getLastChild();
+      const shouldRemoveAlert = removeEmpty && root.getChildrenSize() <= 1;
+      if (removeEmpty && lastChild) {
+        lastChild.remove();
+      }
+      if (shouldRemoveAlert) {
+        parentEditor.update(
+          () => {
+            const alertNode = $getNodeByKey(nodeKey);
+            if (alertNode) {
+              const paragraph = $createParagraphNode();
+              alertNode.insertAfter(paragraph);
+              alertNode.remove();
+              paragraph.selectStart();
+            }
+          },
+          { onUpdate: focusParent }
+        );
+      } else {
+        parentEditor.update(
+          () => {
+            const alertNode = $getNodeByKey(nodeKey);
+            if (alertNode) {
+              let next = alertNode.getNextSibling();
+              if (!next || !$isParagraphNode(next)) {
+                next = $createParagraphNode();
+                alertNode.insertAfter(next);
+              }
+              next.selectStart();
+            }
+          },
+          { onUpdate: focusParent }
+        );
+      }
+    };
+    const isAtLastEmptyParagraph = () => {
+      const selection = $getSelection();
+      if (!$isRangeSelection(selection) || !selection.isCollapsed())
+        return false;
+      const anchorNode = selection.anchor.getNode();
+      const topLevelElement = anchorNode.getTopLevelElement();
+      return topLevelElement && $isParagraphNode(topLevelElement) && topLevelElement.getTextContent() === "" && topLevelElement.getNextSibling() === null;
+    };
+    const unregisterEnter = editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (event?.metaKey || event?.ctrlKey) {
+          event.preventDefault();
+          exitAlert(false);
+          return true;
+        }
+        if (!isAtLastEmptyParagraph()) return false;
+        event?.preventDefault();
+        exitAlert(true);
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    const unregisterArrowDown = editor.registerCommand(
+      KEY_ARROW_DOWN_COMMAND,
+      (event) => {
+        if (!isAtLastEmptyParagraph()) return false;
+        event?.preventDefault();
+        exitAlert(false);
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+    return () => {
+      unregisterEnter();
+      unregisterArrowDown();
+    };
+  }, [editor, parentEditor, nodeKey]);
+  return null;
+}
 function AlertEditDecorator({
   nodeKey,
   alertType,
@@ -78,7 +175,8 @@ function AlertEditDecorator({
         }
       ),
       /* @__PURE__ */ jsx(ListPlugin, {}),
-      /* @__PURE__ */ jsx(LinkPlugin, {})
+      /* @__PURE__ */ jsx(LinkPlugin, {}),
+      /* @__PURE__ */ jsx(ExitBlockPlugin, { parentEditor: editor, nodeKey })
     ] }) })
   ] });
 }
@@ -337,13 +435,31 @@ let BannerEditNode = _BannerEditNode;
 function $createBannerEditNode(bannerType, contentState) {
   return new BannerEditNode(bannerType, contentState);
 }
+const codeBlockCursorIntentMap = /* @__PURE__ */ new Map();
+function setCodeBlockCursorIntent(nodeKey, placement) {
+  codeBlockCursorIntentMap.set(nodeKey, placement);
+}
+function consumeCodeBlockCursorIntent(nodeKey) {
+  const placement = codeBlockCursorIntentMap.get(nodeKey);
+  if (!placement) return null;
+  codeBlockCursorIntentMap.delete(nodeKey);
+  return placement;
+}
 function CodeBlockEditDecorator({
   nodeKey,
   code,
   language
 }) {
   const [editor] = useLexicalComposerContext();
+  const [isSelected] = useLexicalNodeSelection(nodeKey);
+  const [cursorPlacement, setCursorPlacement] = useState(
+    "start"
+  );
   const editable = editor.isEditable();
+  useEffect(() => {
+    if (!editable || !isSelected) return;
+    setCursorPlacement(consumeCodeBlockCursorIntent(nodeKey) ?? "start");
+  }, [editable, isSelected, nodeKey]);
   const handleCodeChange = useCallback(
     (newCode) => {
       editor.update(() => {
@@ -355,6 +471,100 @@ function CodeBlockEditDecorator({
     },
     [editor, nodeKey]
   );
+  const handleLanguageChange = useCallback(
+    (newLanguage) => {
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isCodeBlockNode(node)) {
+          node.setLanguage(newLanguage);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+  const handleDelete = useCallback(() => {
+    editor.getRootElement()?.focus({ preventScroll: true });
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if (!node) return;
+      const prev = node.getPreviousSibling();
+      const next = node.getNextSibling();
+      const parent = node.getParent();
+      node.remove();
+      if (prev) {
+        if ($isElementNode(prev)) {
+          prev.selectEnd();
+        } else {
+          if ($isDecoratorNode(prev) && prev.getType() === "code-block") {
+            setCodeBlockCursorIntent(prev.getKey(), "end");
+          }
+          const selection = $createNodeSelection();
+          selection.add(prev.getKey());
+          $setSelection(selection);
+        }
+        return;
+      }
+      if (next) {
+        if ($isElementNode(next)) {
+          next.selectStart();
+        } else {
+          if ($isDecoratorNode(next) && next.getType() === "code-block") {
+            setCodeBlockCursorIntent(next.getKey(), "start");
+          }
+          const selection = $createNodeSelection();
+          selection.add(next.getKey());
+          $setSelection(selection);
+        }
+        return;
+      }
+      if (parent) {
+        const p = $createParagraphNode();
+        parent.append(p);
+        p.selectStart();
+      }
+    });
+  }, [editor, nodeKey]);
+  const handleExitBlock = useCallback(
+    (direction) => {
+      editor.getRootElement()?.focus({ preventScroll: true });
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (!node) return;
+        if (direction === "before") {
+          const prev = node.getPreviousSibling();
+          if (!prev) return;
+          if ($isElementNode(prev)) {
+            prev.selectEnd();
+          } else {
+            if ($isDecoratorNode(prev) && prev.getType() === "code-block") {
+              setCodeBlockCursorIntent(prev.getKey(), "end");
+            }
+            const selection = $createNodeSelection();
+            selection.add(prev.getKey());
+            $setSelection(selection);
+          }
+          return;
+        }
+        let next = node.getNextSibling();
+        if (!next) {
+          const p = $createParagraphNode();
+          node.insertAfter(p);
+          next = p;
+        }
+        if ($isElementNode(next)) {
+          next.selectStart();
+        } else {
+          if ($isDecoratorNode(next) && next.getType() === "code-block") {
+            setCodeBlockCursorIntent(next.getKey(), "start");
+          }
+          const selection = $createNodeSelection();
+          selection.add(next.getKey());
+          $setSelection(selection);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
   return /* @__PURE__ */ jsx(
     RendererWrapper,
     {
@@ -364,17 +574,22 @@ function CodeBlockEditDecorator({
         code,
         language,
         editable,
-        onCodeChange: editable ? handleCodeChange : void 0
+        onCodeChange: editable ? handleCodeChange : void 0,
+        onLanguageChange: editable ? handleLanguageChange : void 0,
+        onDelete: editable ? handleDelete : void 0,
+        onExitBlock: editable ? handleExitBlock : void 0,
+        selected: editable ? isSelected : false,
+        cursorPlacement: editable ? cursorPlacement : "start"
       }
     }
   );
 }
-class CodeBlockEditNode extends CodeBlockNode {
+const _CodeBlockEditNode = class _CodeBlockEditNode extends CodeBlockNode {
   static clone(node) {
-    return new CodeBlockEditNode(node.__code, node.__language, node.__key);
+    return new _CodeBlockEditNode(node.__code, node.__language, node.__key);
   }
   static importJSON(serializedNode) {
-    return new CodeBlockEditNode(serializedNode.code, serializedNode.language);
+    return new _CodeBlockEditNode(serializedNode.code, serializedNode.language);
   }
   decorate(_editor, _config) {
     return createElement(CodeBlockEditDecorator, {
@@ -383,7 +598,16 @@ class CodeBlockEditNode extends CodeBlockNode {
       language: this.__language
     });
   }
-}
+};
+__publicField(_CodeBlockEditNode, "slashMenuItems", CodeBlockNode.slashMenuItems.map((item) => ({
+  ...item,
+  onSelect: (editor) => {
+    editor.update(() => {
+      $insertNodes([new _CodeBlockEditNode("", "text")]);
+    });
+  }
+})));
+let CodeBlockEditNode = _CodeBlockEditNode;
 function FootnoteSectionEditRenderer({
   definitions
 }) {
@@ -871,6 +1095,237 @@ function AutoLinkPlugin({ matchers }) {
   }, [editor, matchers]);
   return null;
 }
+function selectDecoratorNode(node, cursorPlacement = "start") {
+  if (node.getType() === "code-block") {
+    setCodeBlockCursorIntent(node.getKey(), cursorPlacement);
+  }
+  const selection = $createNodeSelection();
+  selection.add(node.getKey());
+  $setSelection(selection);
+}
+function isAtTopLevelBoundary(selection, direction) {
+  const point = selection.anchor;
+  const topLevel = point.getNode().getTopLevelElementOrThrow();
+  const pointNode = point.getNode();
+  if (point.type === "text") {
+    if (!$isTextNode(pointNode)) return false;
+    const expectedOffset = direction === "start" ? 0 : pointNode.getTextContentSize();
+    if (point.offset !== expectedOffset) return false;
+  } else {
+    if (!$isElementNode(pointNode)) return false;
+    const expectedOffset = direction === "start" ? 0 : pointNode.getChildrenSize();
+    if (point.offset !== expectedOffset) return false;
+  }
+  let current = pointNode;
+  while (current && current !== topLevel) {
+    const sibling = direction === "start" ? current.getPreviousSibling() : current.getNextSibling();
+    if (sibling !== null) return false;
+    current = current.getParent();
+  }
+  return current === topLevel;
+}
+function isSingleLineParagraph(node) {
+  return $isParagraphNode(node) && !node.getTextContent().includes("\n");
+}
+function BlockExitPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const unregisterArrowDown = editor.registerCommand(
+      KEY_ARROW_DOWN_COMMAND,
+      (event) => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          return false;
+        }
+        const anchorNode = selection.anchor.getNode();
+        const topLevelElement = anchorNode.getTopLevelElementOrThrow();
+        const shouldSelectNextDecorator = isAtTopLevelBoundary(selection, "end") || isSingleLineParagraph(topLevelElement);
+        if (!$isQuoteNode(topLevelElement) && shouldSelectNextDecorator) {
+          const next2 = topLevelElement.getNextSibling();
+          if (next2 && $isDecoratorNode(next2) && next2.isKeyboardSelectable()) {
+            event?.preventDefault();
+            selectDecoratorNode(next2, "start");
+            return true;
+          }
+        }
+        const element = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow();
+        let quoteChild = element;
+        let quoteNode = null;
+        let current = element;
+        while (current) {
+          const parent = current.getParent();
+          if (!parent || $isRootNode(parent)) break;
+          if ($isQuoteNode(parent)) {
+            quoteNode = parent;
+            quoteChild = current;
+            break;
+          }
+          current = parent;
+        }
+        if (!quoteNode) return false;
+        if (quoteChild.getNextSibling() !== null) return false;
+        if (!$isParagraphNode(quoteChild) || quoteChild.getTextContent() !== "")
+          return false;
+        event?.preventDefault();
+        let next = quoteNode.getNextSibling();
+        if (!next) {
+          next = $createParagraphNode();
+          quoteNode.insertAfter(next);
+        }
+        next.selectStart();
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    const unregisterCmdEnter = editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (event) => {
+        if (!event?.metaKey && !event?.ctrlKey) return false;
+        const selection = $getSelection();
+        if ($isNodeSelection(selection)) {
+          const nodes = selection.getNodes();
+          if (nodes.length !== 1) return false;
+          const node = nodes[0];
+          if (!$isDecoratorNode(node)) return false;
+          event.preventDefault();
+          let next2 = node.getNextSibling();
+          if (!next2) {
+            next2 = $createParagraphNode();
+            node.insertAfter(next2);
+          }
+          if ($isElementNode(next2)) {
+            next2.selectStart();
+          } else if ($isDecoratorNode(next2)) {
+            selectDecoratorNode(next2, "start");
+          }
+          return true;
+        }
+        if (!$isRangeSelection(selection)) return false;
+        const anchorNode = selection.anchor.getNode();
+        const topLevelElement = anchorNode.getTopLevelElementOrThrow();
+        if ($isParagraphNode(topLevelElement)) return false;
+        event.preventDefault();
+        let next = topLevelElement.getNextSibling();
+        if (!next || !$isParagraphNode(next)) {
+          next = $createParagraphNode();
+          topLevelElement.insertAfter(next);
+        }
+        next.selectStart();
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    function handleDeleteDecorator(event) {
+      const selection = $getSelection();
+      if (!$isNodeSelection(selection)) return false;
+      const nodes = selection.getNodes();
+      if (nodes.length !== 1) return false;
+      const node = nodes[0];
+      if (!$isDecoratorNode(node)) return false;
+      event?.preventDefault();
+      const prev = node.getPreviousSibling();
+      const next = node.getNextSibling();
+      node.remove();
+      if (prev && $isElementNode(prev)) {
+        prev.selectEnd();
+      } else if (prev && $isDecoratorNode(prev)) {
+        selectDecoratorNode(prev, "end");
+      } else if (next && $isElementNode(next)) {
+        next.selectStart();
+      } else if (next && $isDecoratorNode(next)) {
+        selectDecoratorNode(next, "start");
+      } else {
+        const root = $getRoot();
+        if (root && $isElementNode(root)) {
+          const p = $createParagraphNode();
+          root.append(p);
+          p.selectStart();
+        }
+      }
+      return true;
+    }
+    const unregisterBackspace = editor.registerCommand(
+      KEY_BACKSPACE_COMMAND,
+      handleDeleteDecorator,
+      COMMAND_PRIORITY_HIGH
+    );
+    const unregisterDelete = editor.registerCommand(
+      KEY_DELETE_COMMAND,
+      handleDeleteDecorator,
+      COMMAND_PRIORITY_HIGH
+    );
+    const unregisterArrowUpDecorator = editor.registerCommand(
+      KEY_ARROW_UP_COMMAND,
+      (event) => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection) && selection.isCollapsed()) {
+          const anchorNode = selection.anchor.getNode();
+          const topLevelElement = anchorNode.getTopLevelElementOrThrow();
+          const shouldSelectPreviousDecorator = isAtTopLevelBoundary(selection, "start") || isSingleLineParagraph(topLevelElement);
+          if (!$isQuoteNode(topLevelElement) && shouldSelectPreviousDecorator) {
+            const prev2 = topLevelElement.getPreviousSibling();
+            if (prev2 && $isDecoratorNode(prev2) && prev2.isKeyboardSelectable()) {
+              event?.preventDefault();
+              selectDecoratorNode(prev2, "end");
+              return true;
+            }
+          }
+        }
+        if (!$isNodeSelection(selection)) return false;
+        const nodes = selection.getNodes();
+        if (nodes.length !== 1) return false;
+        const node = nodes[0];
+        if (!$isDecoratorNode(node)) return false;
+        const prev = node.getPreviousSibling();
+        if (prev && $isElementNode(prev)) {
+          event?.preventDefault();
+          prev.selectEnd();
+          return true;
+        }
+        if (prev && $isDecoratorNode(prev)) {
+          event?.preventDefault();
+          selectDecoratorNode(prev, "end");
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    const unregisterArrowDownDecorator = editor.registerCommand(
+      KEY_ARROW_DOWN_COMMAND,
+      (event) => {
+        const selection = $getSelection();
+        if (!$isNodeSelection(selection)) return false;
+        const nodes = selection.getNodes();
+        if (nodes.length !== 1) return false;
+        const node = nodes[0];
+        if (!$isDecoratorNode(node)) return false;
+        const next = node.getNextSibling();
+        if (next && $isElementNode(next)) {
+          event?.preventDefault();
+          next.selectStart();
+          return true;
+        }
+        if (next && $isDecoratorNode(next)) {
+          event?.preventDefault();
+          selectDecoratorNode(next, "start");
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    return () => {
+      unregisterArrowDown();
+      unregisterCmdEnter();
+      unregisterBackspace();
+      unregisterDelete();
+      unregisterArrowUpDecorator();
+      unregisterArrowDownDecorator();
+    };
+  }, [editor]);
+  return null;
+}
 function EditorRefPlugin({ onEditorReady }) {
   const [editor] = useLexicalComposerContext();
   const callbackRef = useRef(onEditorReady);
@@ -1561,6 +2016,34 @@ const GIT_ALERT_TRANSFORMER = {
     parentNode.replace(alertNode);
   }
 };
+function findCodeBlockKlass(nodes) {
+  return nodes.find((n) => n.getType?.() === "code-block") || CodeBlockNode;
+}
+const CODE_BLOCK_MULTILINE_TRANSFORMER = {
+  dependencies: [],
+  regExpEnd: {
+    optional: true,
+    regExp: /[ \t]*```$/
+  },
+  regExpStart: /^[ \t]*```([\w-]+)?/,
+  replace: (rootNode, _children, startMatch, _endMatch, linesInBetween) => {
+    const lang = startMatch[1] || "";
+    let code = "";
+    if (linesInBetween) {
+      const lines = [...linesInBetween];
+      while (lines.length > 0 && !lines[0].length) lines.shift();
+      while (lines.length > 0 && !lines.at(-1).length) lines.pop();
+      code = lines.join("\n");
+    }
+    const Klass = findCodeBlockKlass(getResolvedEditNodes());
+    const node = new Klass(code, lang);
+    rootNode.replace(node);
+    const selection = $createNodeSelection();
+    selection.add(node.getKey());
+    $setSelection(selection);
+  },
+  type: "multiline-element"
+};
 const BANNER_TYPE_MAP = {
   note: "note",
   info: "note",
@@ -1683,6 +2166,39 @@ const MENTION_TRANSFORMER = {
     textNode.replace(mentionNode);
   }
 };
+const QUOTE_TRANSFORMER = {
+  dependencies: [QuoteNode],
+  export: (node, exportChildren) => {
+    if (!$isQuoteNode(node)) {
+      return null;
+    }
+    const lines = exportChildren(node).split("\n");
+    return lines.map((line) => `> ${line}`).join("\n");
+  },
+  regExp: /^>\s/,
+  replace: (parentNode, children, _match, isImport) => {
+    if (isImport) {
+      const previousNode = parentNode.getPreviousSibling();
+      if ($isQuoteNode(previousNode)) {
+        previousNode.splice(previousNode.getChildrenSize(), 0, [
+          $createLineBreakNode(),
+          ...children
+        ]);
+        parentNode.remove();
+        return;
+      }
+    }
+    const node = $createQuoteNode();
+    const paragraph = $createParagraphNode();
+    paragraph.append(...children);
+    node.append(paragraph);
+    parentNode.replace(node);
+    if (!isImport) {
+      paragraph.select(0, 0);
+    }
+  },
+  type: "element"
+};
 function quoteAttr(value) {
   return value.replaceAll('"', '\\"');
 }
@@ -1730,12 +2246,14 @@ const ALL_TRANSFORMERS = [
   IMAGE_BLOCK_TRANSFORMER,
   VIDEO_BLOCK_TRANSFORMER,
   CODE_BLOCK_NODE_TRANSFORMER,
+  CODE_BLOCK_MULTILINE_TRANSFORMER,
   LINK_CARD_BLOCK_TRANSFORMER,
   MERMAID_BLOCK_TRANSFORMER,
   GRID_CONTAINER_BLOCK_TRANSFORMER,
   HORIZONTAL_RULE_BLOCK_TRANSFORMER,
   TABLE_BLOCK_TRANSFORMER,
-  ...TRANSFORMERS
+  QUOTE_TRANSFORMER,
+  ...TRANSFORMERS.filter((t) => t !== QUOTE && t !== CODE)
 ];
 function MarkdownShortcutsPlugin() {
   return /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: ALL_TRANSFORMERS });
@@ -1914,6 +2432,7 @@ function RichEditor({
             /* @__PURE__ */ jsx(MermaidPlugin, {}),
             /* @__PURE__ */ jsx(HorizontalRulePlugin, {}),
             /* @__PURE__ */ jsx(CheckListPlugin, {}),
+            /* @__PURE__ */ jsx(BlockExitPlugin, {}),
             /* @__PURE__ */ jsx(AutoLinkPlugin, {}),
             /* @__PURE__ */ jsx(EditorRefPlugin, { onEditorReady }),
             autoFocus && /* @__PURE__ */ jsx(AutoFocusPlugin, {}),

package/dist/components/RichEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichEditor.d.ts","sourceRoot":"","sources":["../../src/components/RichEditor.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI/C,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,QAAQ,EACR,OAAmB,EACnB,KAAe,EACf,WAAkC,EAClC,QAAQ,EACR,SAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,aAAa,EACb,UAAU,EACV,cAAc,EACd,WAAW,EACX,UAAU,EACV,QAAQ,GACT,EAAE,eAAe,+BAwEjB"}
+{"version":3,"file":"RichEditor.d.ts","sourceRoot":"","sources":["../../src/components/RichEditor.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI/C,wBAAgB,UAAU,CAAC,EACzB,YAAY,EACZ,QAAQ,EACR,OAAmB,EACnB,KAAe,EACf,WAAkC,EAClC,QAAQ,EACR,SAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,aAAa,EACb,UAAU,EACV,cAAc,EACd,WAAW,EACX,UAAU,EACV,QAAQ,GACT,EAAE,eAAe,+BAyEjB"}