@lobehub/editor 1.16.2 → 1.17.0

package/es/index.d.ts

@@ -8,6 +8,7 @@ export * from './plugins/hr';
 export * from './plugins/image';
 export * from './plugins/link';
 export * from './plugins/list';
+export * from './plugins/markdown';
 export * from './plugins/math';
 export * from './plugins/mention';
 export * from './plugins/slash';

package/es/index.js

@@ -8,6 +8,7 @@ export * from "./plugins/hr";
 export * from "./plugins/image";
 export * from "./plugins/link";
 export * from "./plugins/list";
+export * from "./plugins/markdown";
 export * from "./plugins/math";
 export * from "./plugins/mention";
 export * from "./plugins/slash";

package/es/locale/index.d.ts

@@ -16,6 +16,12 @@ declare const _default: {
         placeholder: string;
         unlink: string;
     };
+    markdown: {
+        cancel: string;
+        confirm: string;
+        parseMessage: string;
+        parseTitle: string;
+    };
     math: {
         placeholder: string;
     };

package/es/locale/index.js

@@ -16,6 +16,12 @@ export default {
     placeholder: 'Enter link URL',
     unlink: 'Unlink Link'
   },
+  markdown: {
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    parseMessage: 'Convert to markdown format, existing content will be overwritten, confirm? (Auto close in 5 seconds)',
+    parseTitle: 'Parse Markdown'
+  },
   math: {
     placeholder: 'Enter TeX formula'
   },

package/es/plugins/common/react/style.js

@@ -30,15 +30,15 @@ export var useStyles = createStyles(function (_ref2, _ref3) {
     lineHeight = _ref3$lineHeight === void 0 ? 1.8 : _ref3$lineHeight;
   var __root = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      --lobe-markdown-font-size: ", "px;\n      --lobe-markdown-header-multiple: ", ";\n      --lobe-markdown-margin-multiple: ", ";\n      --lobe-markdown-line-height: ", ";\n      --lobe-markdown-border-radius: ", ";\n      --lobe-markdown-border-color: ", ";\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n      max-width: 100%;\n      height: 100%;\n\n      font-size: var(--lobe-markdown-font-size);\n      line-height: var(--lobe-markdown-line-height);\n      word-break: break-word;\n\n      @keyframes cursor-blink {\n        to {\n          visibility: hidden;\n        }\n      }\n\n      [data-lexical-cursor='true'] {\n        pointer-events: none;\n        position: absolute;\n        display: block;\n\n        &::after {\n          content: '';\n\n          position: absolute;\n          inset-block-start: -2px;\n\n          display: block;\n\n          width: 20px;\n          border-block-start: 1px solid ", ";\n\n          animation: cursor-blink 1.1s steps(2, start) infinite;\n        }\n      }\n    "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, token.colorFillQuaternary, token.colorText);
   var header = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-block: max(\n          calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),\n          var(--lobe-markdown-font-size)\n        );\n        font-weight: bold;\n        line-height: 1.25;\n      }\n\n      h1 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h2 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h3 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h4 {\n        font-size: calc(\n          var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n        );\n      }\n\n      h5,\n      h6 {\n        font-size: calc(var(--lobe-markdown-font-size) * 1);\n      }\n    "])));
-  var p = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      p {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        line-height: var(--lobe-markdown-line-height);\n        letter-spacing: 0.02em;\n\n        &:not(:first-child) {\n          margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n\n        &:not(:last-child) {\n          margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n      }\n    "])));
+  var p = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      p {\n        margin-block: 4px;\n        line-height: var(--lobe-markdown-line-height);\n        letter-spacing: 0.02em;\n\n        &:not(:first-child) {\n          margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n\n        &:not(:last-child) {\n          margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        }\n      }\n    "])));
   var blockquote = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      .editor_quote {\n        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n        margin-inline: 0;\n        padding-block: 0;\n        padding-inline: 1em;\n        border-inline-start: solid 4px ", ";\n\n        color: ", ";\n      }\n    "])), token.colorBorder, token.colorTextSecondary);
   var code = css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      .editor_code {\n        display: inline;\n\n        margin-inline: 0.25em;\n        padding-block: 0.2em;\n        padding-inline: 0.4em;\n        border: 1px solid var(--lobe-markdown-border-color);\n        border-radius: 0.25em;\n\n        font-family: ", ";\n        font-size: 0.875em;\n        line-height: 1;\n        word-break: break-word;\n        white-space: break-spaces;\n\n        background: ", ";\n      }\n    "])), token.fontFamilyCode, token.colorFillSecondary);
   return {
     blockquote: blockquote,
     code: code,
     header: header,
-    noHeader: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-block: 4px;\n          font-size: var(--lobe-markdown-font-size);\n          line-height: var(--lobe-markdown-line-height);\n          letter-spacing: 0.02em;\n\n          &:not(:first-child) {\n            margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n          }\n\n          &:not(:last-child) {\n            margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);\n          }\n        }\n      "]))),
-    noStyle: css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        --lobe-markdown-header-multiple: 0;\n        --lobe-markdown-margin-multiple: 0;\n        --lobe-markdown-line-height: 1.5;\n\n        p {\n          margin-block: 0;\n        }\n      "]))),
+    noHeader: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n          margin-block: 0;\n          font-size: var(--lobe-markdown-font-size);\n          font-weight: normal;\n          line-height: var(--lobe-markdown-line-height);\n        }\n      "]))),
+    noStyle: css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        --lobe-markdown-header-multiple: 0;\n        --lobe-markdown-margin-multiple: 0;\n        --lobe-markdown-line-height: 1.5;\n\n        p {\n          margin-block: 4px;\n        }\n      "]))),
     p: p,
     root: __root,
     variant: cx(header, p, blockquote, code)

package/es/plugins/markdown/command/index.d.ts

@@ -0,0 +1,6 @@
+import { LexicalEditor } from 'lexical';
+import { MarkdownShortCutService } from '../service/shortcut';
+export declare const INSERT_MARKDOWN_COMMAND: import("lexical").LexicalCommand<{
+    markdown: string;
+}>;
+export declare function registerMarkdownCommand(editor: LexicalEditor, service: MarkdownShortCutService): () => void;

package/es/plugins/markdown/command/index.js

@@ -0,0 +1,27 @@
+import { $getSelection, COMMAND_PRIORITY_HIGH, createCommand } from 'lexical';
+import { createDebugLogger } from "../../../utils/debug";
+import { parseMarkdownToLexical } from "../data-source/markdown/parse";
+import { $generateNodesFromSerializedNodes, $insertGeneratedNodes } from "../utils";
+var logger = createDebugLogger('plugin', 'markdown');
+export var INSERT_MARKDOWN_COMMAND = createCommand('INSERT_MARKDOWN_COMMAND');
+export function registerMarkdownCommand(editor, service) {
+  return editor.registerCommand(INSERT_MARKDOWN_COMMAND, function (payload) {
+    var markdown = payload.markdown;
+    logger.debug('INSERT_MARKDOWN_COMMAND payload:', payload);
+    editor.update(function () {
+      try {
+        // Use the markdown data source to parse the content
+        var root = parseMarkdownToLexical(markdown, service.markdownReaders);
+        var selection = $getSelection();
+        var nodes = $generateNodesFromSerializedNodes(root.children);
+        logger.debug('INSERT_MARKDOWN_COMMAND nodes:', nodes);
+        $insertGeneratedNodes(editor, nodes, selection);
+        return true;
+      } catch (error) {
+        logger.error('Failed to handle markdown paste:', error);
+      }
+    });
+    return false;
+  }, COMMAND_PRIORITY_HIGH // Priority
+  );
+}

package/es/plugins/markdown/data-source/markdown/parse.js

@@ -68,6 +68,10 @@ function convertMdastToLexical(node, index, ctx) {
           var htmlStack = []; // 当前循环是否包含 HTML 标签
           _children = node.children.reduce(function (ret, child, index) {
             if (child.type === 'html') {
+              var isComment = child.value.startsWith('<!--') && child.value.endsWith('-->');
+              if (isComment) {
+                return ret;
+              }
               var tag = child.value.replaceAll(/^<\/?|>$/g, '');
               var isEndTag = child.value.startsWith('</');
               if (selfClosingHtmlTags.has(tag)) {

package/es/plugins/markdown/index.d.ts

@@ -1,4 +1,6 @@
+export { INSERT_MARKDOWN_COMMAND } from './command';
 export { MarkdownPlugin } from './plugin';
+export { default as ReactMarkdownPlugin } from './react';
 export type { MARKDOWN_READER_LEVEL } from './service/shortcut';
 export { IMarkdownShortCutService, MARKDOWN_READER_LEVEL_HIGH, MARKDOWN_READER_LEVEL_NORMAL, MARKDOWN_WRITER_LEVEL_MAX, } from './service/shortcut';
 export { isPunctuationChar } from './utils';

package/es/plugins/markdown/index.js

@@ -1,3 +1,5 @@
+export { INSERT_MARKDOWN_COMMAND } from "./command";
 export { MarkdownPlugin } from "./plugin";
+export { default as ReactMarkdownPlugin } from "./react";
 export { IMarkdownShortCutService, MARKDOWN_READER_LEVEL_HIGH, MARKDOWN_READER_LEVEL_NORMAL, MARKDOWN_WRITER_LEVEL_MAX } from "./service/shortcut";
 export { isPunctuationChar } from "./utils";

package/es/plugins/markdown/plugin/index.js

@@ -17,10 +17,10 @@ import { $isCodeNode } from '@lexical/code';
 import { $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, COLLABORATION_TAG, COMMAND_PRIORITY_CRITICAL, HISTORIC_TAG, KEY_ENTER_COMMAND, PASTE_COMMAND } from 'lexical';
 import { KernelPlugin } from "../../../editor-kernel/plugin";
 import { createDebugLogger } from "../../../utils/debug";
+import { registerMarkdownCommand } from "../command";
 import MarkdownDataSource from "../data-source/markdown-data-source";
-import { parseMarkdownToLexical } from "../data-source/markdown/parse";
 import { IMarkdownShortCutService, MarkdownShortCutService } from "../service/shortcut";
-import { $generateNodesFromSerializedNodes, $insertGeneratedNodes, canContainTransformableMarkdown } from "../utils";
+import { canContainTransformableMarkdown } from "../utils";
 export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
   _inherits(MarkdownPlugin, _KernelPlugin);
   var _super = _createSuper(MarkdownPlugin);
@@ -120,12 +120,6 @@ export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       }, COMMAND_PRIORITY_CRITICAL));
       this.register(editor.registerCommand(PASTE_COMMAND, function (event) {
         var _this2$config$enableP, _this2$config;
-        // Check if markdown paste formatting is enabled (default: true)
-        var enablePasteMarkdown = (_this2$config$enableP = (_this2$config = _this2.config) === null || _this2$config === void 0 ? void 0 : _this2$config.enablePasteMarkdown) !== null && _this2$config$enableP !== void 0 ? _this2$config$enableP : true;
-        if (!enablePasteMarkdown) {
-          _this2.logger.debug('paste markdown formatting is disabled');
-          return false;
-        }
         if (!(event instanceof ClipboardEvent)) return false;
         var clipboardData = event.clipboardData;
         if (!clipboardData) return false;
@@ -137,6 +131,23 @@ export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         // If there's no text content, let Lexical handle it
         if (!text) return false;
 
+        // Check if markdown paste formatting is enabled (default: true)
+        var enablePasteMarkdown = (_this2$config$enableP = (_this2$config = _this2.config) === null || _this2$config === void 0 ? void 0 : _this2$config.enablePasteMarkdown) !== null && _this2$config$enableP !== void 0 ? _this2$config$enableP : true;
+        if (!enablePasteMarkdown) {
+          // Force plain text paste - ignore all formatting (like Cmd+Shift+V)
+          _this2.logger.debug('paste markdown formatting is disabled, inserting as plain text');
+          event.preventDefault();
+          event.stopPropagation();
+          editor.update(function () {
+            var selection = $getSelection();
+            if (!$isRangeSelection(selection)) return;
+
+            // Simply insert the plain text
+            selection.insertText(text);
+          });
+          return true;
+        }
+
         // If there's HTML content, it's a rich text paste
         // Let Lexical's rich text handler process it
         if (html && html.trim()) {
@@ -154,10 +165,23 @@ export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         });
         if (hasMarkdownContent) {
           // Handle markdown paste
-          return _this2.handleMarkdownPaste(editor, text);
+          // return this.handleMarkdownPaste(editor, text);
+          var cacheState = editor.getEditorState();
+          _this2.kernel.emit('markdownParse', {
+            cacheState: cacheState,
+            markdown: text
+          });
+          // setTimeout(() => {
+          //   editor.setEditorState(cacheState);
+          //   editor.update(() => {
+          //     this.handleMarkdownPaste(editor, text);
+          //   });
+          // }, 5000);
+          return false;
         }
         return false;
       }, COMMAND_PRIORITY_CRITICAL));
+      this.register(registerMarkdownCommand(editor, this.service));
     }
 
     /**
@@ -249,24 +273,23 @@ export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       });
     }
 
-    /**
-     * Handle markdown paste by parsing and inserting as structured content
-     */
-  }, {
-    key: "handleMarkdownPaste",
-    value: function handleMarkdownPaste(editor, text) {
-      try {
-        // Use the markdown data source to parse the content
-        var root = parseMarkdownToLexical(text, this.service.markdownReaders);
-        var selection = $getSelection();
-        var nodes = $generateNodesFromSerializedNodes(root.children);
-        $insertGeneratedNodes(editor, nodes, selection);
-        return true;
-      } catch (error) {
-        this.logger.error('Failed to handle markdown paste:', error);
-      }
-      return false;
-    }
+    // /**
+    //  * Handle markdown paste by parsing and inserting as structured content
+    //  */
+    // private handleMarkdownPaste(editor: LexicalEditor, text: string): boolean {
+    //   try {
+    //     // Use the markdown data source to parse the content
+    //     const root = parseMarkdownToLexical(text, this.service.markdownReaders);
+    //     const selection = $getSelection();
+    //     const nodes = $generateNodesFromSerializedNodes(root.children);
+    //     $insertGeneratedNodes(editor, nodes, selection!);
+    //     return true;
+    //   } catch (error) {
+    //     this.logger.error('Failed to handle markdown paste:', error);
+    //   }
+
+    //   return false;
+    // }
   }]);
   return MarkdownPlugin;
 }(KernelPlugin), _defineProperty(_class, "pluginName", 'MarkdownPlugin'), _class);

package/es/plugins/markdown/react/index.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const ReactMarkdownPlugin: FC<void>;
+export default ReactMarkdownPlugin;

package/es/plugins/markdown/react/index.js

@@ -0,0 +1,70 @@
+'use client';
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Space, notification } from 'antd';
+import { UNDO_COMMAND } from 'lexical';
+import { useLayoutEffect } from 'react';
+import { useLexicalComposerContext } from "../../../editor-kernel/react";
+import { useTranslation } from "../../../editor-kernel/react/useTranslation";
+import { INSERT_MARKDOWN_COMMAND } from "../command";
+import { MarkdownPlugin } from "../plugin";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ReactMarkdownPlugin = function ReactMarkdownPlugin() {
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _notification$useNoti = notification.useNotification(),
+    _notification$useNoti2 = _slicedToArray(_notification$useNoti, 2),
+    api = _notification$useNoti2[0],
+    contextHolder = _notification$useNoti2[1];
+  var t = useTranslation();
+  useLayoutEffect(function () {
+    editor.registerPlugin(MarkdownPlugin);
+    var handleEvent = function handleEvent(_ref) {
+      var markdown = _ref.markdown;
+      var key = "open".concat(Date.now());
+      var actions = /*#__PURE__*/_jsxs(Space, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: function onClick() {
+            return api.destroy();
+          },
+          size: "small",
+          type: "link",
+          children: t('markdown.cancel')
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: function onClick() {
+            editor.dispatchCommand(UNDO_COMMAND, undefined);
+            editor.dispatchCommand(INSERT_MARKDOWN_COMMAND, {
+              markdown: markdown
+            });
+            api.destroy();
+          },
+          size: "small",
+          type: "primary",
+          children: t('markdown.confirm')
+        })]
+      });
+      api.open({
+        actions: actions,
+        description: t('markdown.parseMessage'),
+        duration: 5,
+        key: key,
+        message: t('markdown.parseTitle'),
+        onClose: close
+      });
+    };
+    editor.on('markdownParse', handleEvent);
+    return function () {
+      editor.off('markdownParse', handleEvent);
+    };
+  }, [editor]);
+  return contextHolder;
+};
+ReactMarkdownPlugin.displayName = 'ReactMarkdownPlugin';
+export default ReactMarkdownPlugin;

package/es/types/kernel.d.ts

@@ -1,4 +1,4 @@
-import type { CommandListener, CommandListenerPriority, CommandPayloadType, DecoratorNode, LexicalCommand, LexicalEditor, LexicalNodeConfig } from 'lexical';
+import type { CommandListener, CommandListenerPriority, CommandPayloadType, DecoratorNode, EditorState, LexicalCommand, LexicalEditor, LexicalNodeConfig } from 'lexical';
 import type DataSource from "../editor-kernel/data-source";
 import { HotkeyId } from "./hotkey";
 import { HotkeyOptions, HotkeysEvent } from "../utils/hotkey/registerHotkey";
@@ -23,6 +23,13 @@ export interface IKernelEventMap {
      * @returns
      */
     initialized: (editor: LexicalEditor) => void;
+    /**
+     * handle markdown parse event
+     */
+    markdownParse: (params: {
+        cacheState: EditorState;
+        markdown: string;
+    }) => void;
 }
 /**
  * External API
@@ -175,6 +182,7 @@ export interface IEditor {
  * API provided to plugins
  */
 export interface IEditorKernel extends IEditor {
+    emit<T extends keyof IKernelEventMap>(event: T, params: Parameters<IKernelEventMap[T]>[0]): void;
     /**
      * Get editor Node decorator for specific Node rendering
      * @param name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.16.2",
+  "version": "1.17.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",