@lobehub/editor 1.16.3 → 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/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);
@@ -165,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));
     }
 
     /**
@@ -260,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.3",
+  "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",