@lobehub/editor 1.11.0 → 1.12.0

package/es/plugins/markdown/data-source/markdown-data-source.d.ts

@@ -1,11 +1,11 @@
-import { LexicalEditor } from 'lexical';
+import type { LexicalEditor } from 'lexical';
 import { DataSource } from "../../../editor-kernel";
-import { IWriteOptions } from "../../../editor-kernel/data-source";
-import { MarkdownShortCutService } from '../service/shortcut';
+import type { IWriteOptions } from "../../../editor-kernel/data-source";
+import type { MarkdownShortCutService } from '../service/shortcut';
 export default class MarkdownDataSource extends DataSource {
     protected dataType: string;
     protected markdownService: MarkdownShortCutService;
     constructor(dataType: string, markdownService: MarkdownShortCutService);
-    read(): void;
+    read(editor: LexicalEditor, data: string): void;
     write(editor: LexicalEditor, options?: IWriteOptions): any;
 }

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

@@ -29,7 +29,9 @@ import { $isTableSelection } from '@lexical/table';
 import { $getCharacterOffsets, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode } from 'lexical';
 import { DataSource } from "../../../editor-kernel";
 import { INodeHelper } from "../../../editor-kernel/inode/helper";
+import { logger } from "../utils/logger";
 import { MarkdownWriterContext } from "./markdown-writer-context";
+import { parseMarkdownToLexical } from "./markdown/parse";
 var MarkdownDataSource = /*#__PURE__*/function (_DataSource) {
   _inherits(MarkdownDataSource, _DataSource);
   var _super = _createSuper(MarkdownDataSource);
@@ -43,8 +45,12 @@ var MarkdownDataSource = /*#__PURE__*/function (_DataSource) {
   }
   _createClass(MarkdownDataSource, [{
     key: "read",
-    value: function read() {
-      throw new Error('MarkdownDataSource not implemented yet!');
+    value: function read(editor, data) {
+      var inode = {
+        root: parseMarkdownToLexical(data, this.markdownService.markdownReaders)
+      };
+      logger.debug('Parsed Lexical State:', inode);
+      editor.setEditorState(editor.parseEditorState(inode));
     }
   }, {
     key: "write",

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

@@ -14,11 +14,12 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { $isCodeNode } from '@lexical/code';
-import { $getNodeByKey, $getSelection, $isRangeSelection, $isTextNode, COLLABORATION_TAG, COMMAND_PRIORITY_CRITICAL, HISTORIC_TAG, KEY_ENTER_COMMAND } from 'lexical';
+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 MarkdownDataSource from "../data-source/markdown-data-source";
+import { parseMarkdownToLexical } from "../data-source/markdown/parse";
 import { IMarkdownShortCutService, MarkdownShortCutService } from "../service/shortcut";
-import { canContainTransformableMarkdown } from "../utils";
+import { $generateNodesFromSerializedNodes, $insertGeneratedNodes, canContainTransformableMarkdown } from "../utils";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -117,6 +118,138 @@ export var MarkdownPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         }
         return false;
       }, COMMAND_PRIORITY_CRITICAL));
+      this.register(editor.registerCommand(PASTE_COMMAND, function (event) {
+        if (!(event instanceof ClipboardEvent)) return false;
+        var clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+
+        // Get plain text content
+        var text = clipboardData.getData('text/plain');
+        var html = clipboardData.getData('text/html');
+        if (!text) return false;
+
+        // Check if content contains markdown patterns
+        var hasMarkdownContent = _this2.detectMarkdownContent(text);
+        console.log('paste content analysis:', {
+          hasHTML: !!html,
+          hasMarkdown: hasMarkdownContent,
+          markdownPatterns: _this2.getMarkdownPatterns(text),
+          text: text.slice(0, 100) + (text.length > 100 ? '...' : '')
+        });
+        if (hasMarkdownContent) {
+          // Handle markdown paste
+          return _this2.handleMarkdownPaste(editor, text);
+        }
+        return false;
+      }, COMMAND_PRIORITY_CRITICAL));
+    }
+
+    /**
+     * Detect if text contains markdown patterns
+     */
+  }, {
+    key: "detectMarkdownContent",
+    value: function detectMarkdownContent(text) {
+      var markdownPatterns = [
+      // Headers
+      /^#{1,6}\s+/m,
+      // Bold/italic
+      /\*{1,2}[^*]+\*{1,2}/, /__?[^_]+__?/,
+      // Code blocks
+      /```[\S\s]*```/,
+      // Inline code
+      /`[^`]+`/,
+      // Links
+      /\[[^\]]*]\([^)]+\)/,
+      // Images
+      /!\[[^\]]*]\([^)]+\)/,
+      // Lists
+      /^[*+-]\s+/m, /^\d+\.\s+/m,
+      // Blockquotes
+      /^>\s+/m,
+      // Tables
+      /\|.*\|.*\|/,
+      // Horizontal rules
+      /^---+$/m, /^\*\*\*+$/m,
+      // Strikethrough
+      /~~[^~]+~~/];
+      return markdownPatterns.some(function (pattern) {
+        return pattern.test(text);
+      });
+    }
+
+    /**
+     * Get specific markdown patterns found in text
+     */
+  }, {
+    key: "getMarkdownPatterns",
+    value: function getMarkdownPatterns(text) {
+      var patterns = [{
+        name: 'headers',
+        regex: /^#{1,6}\s+/m
+      }, {
+        name: 'bold',
+        regex: /\*{2}[^*]+\*{2}/
+      }, {
+        name: 'italic',
+        regex: /\*[^*]+\*/
+      }, {
+        name: 'code-blocks',
+        regex: /```[\S\s]*```/
+      }, {
+        name: 'inline-code',
+        regex: /`[^`]+`/
+      }, {
+        name: 'links',
+        regex: /\[[^\]]*]\([^)]+\)/
+      }, {
+        name: 'images',
+        regex: /!\[[^\]]*]\([^)]+\)/
+      }, {
+        name: 'lists',
+        regex: /^[*+-]\s+/m
+      }, {
+        name: 'ordered-lists',
+        regex: /^\d+\.\s+/m
+      }, {
+        name: 'blockquotes',
+        regex: /^>\s+/m
+      }, {
+        name: 'tables',
+        regex: /\|.*\|.*\|/
+      }, {
+        name: 'horizontal-rules',
+        regex: /^---+$/m
+      }, {
+        name: 'strikethrough',
+        regex: /~~[^~]+~~/
+      }];
+      return patterns.filter(function (_ref2) {
+        var regex = _ref2.regex;
+        return regex.test(text);
+      }).map(function (_ref3) {
+        var name = _ref3.name;
+        return name;
+      });
+    }
+
+    /**
+     * 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) {
+        console.error('Failed to handle markdown paste:', error);
+      }
+      return false;
     }
   }]);
   return MarkdownPlugin;

package/es/plugins/markdown/service/shortcut.d.ts

@@ -1,60 +1,7 @@
-import { ElementNode, LexicalNode, RangeSelection, TextFormatType, TextNode } from 'lexical';
-import { IServiceID } from "../../../types/kernel";
-export type TextFormatTransformer = Readonly<{
-    format?: ReadonlyArray<TextFormatType>;
-    intraword?: boolean;
-    process?: (selection: RangeSelection) => void;
-    tag: string;
-    type: 'text-format';
-}>;
-export type TextMatchTransformer = Readonly<{
-    /**
-     * For import operations, this function can be used to determine the end index of the match, after `importRegExp` has matched.
-     * Without this function, the end index will be determined by the length of the match from `importRegExp`. Manually determining the end index can be useful if
-     * the match from `importRegExp` is not the entire text content of the node. That way, `importRegExp` can be used to match only the start of the node, and `getEndIndex`
-     * can be used to match the end of the node.
-     *
-     * @returns The end index of the match, or false if the match was unsuccessful and a different transformer should be tried.
-     */
-    getEndIndex?: (node: TextNode, match: RegExpMatchArray) => number | false;
-    /**
-     * This regex determines what text is matched during markdown imports
-     */
-    importRegExp?: RegExp;
-    /**
-     * This regex determines what text is matched for markdown shortcuts while typing in the editor
-     */
-    regExp: RegExp;
-    /**
-     * Determines how the matched markdown text should be transformed into a node during the markdown import process
-     *
-     * @returns nothing, or a TextNode that may be a child of the new node that is created.
-     * If a TextNode is returned, text format matching will be applied to it (e.g. bold, italic, etc.)
-     */
-    replace?: (node: TextNode, match: RegExpMatchArray) => void | TextNode;
-    /**
-     * Single character that allows the transformer to trigger when typed in the editor. This does not affect markdown imports outside of the markdown shortcut plugin.
-     * If the trigger is matched, the `regExp` will be used to match the text in the second step.
-     */
-    trigger?: string;
-    type: 'text-match';
-}>;
-export type ElementTransformer = {
-    regExp: RegExp;
-    /**
-     * `replace` is called when markdown is imported or typed in the editor
-     *
-     * @return return false to cancel the transform, even though the regex matched. Lexical will then search for the next transformer.
-     */
-    replace: (parentNode: ElementNode, children: Array<LexicalNode>, match: Array<string>, 
-    /**
-     * Whether the match is from an import operation (e.g. through `$convertFromMarkdownString`) or not (e.g. through typing in the editor).
-     */
-    isImport: boolean) => boolean | void;
-    trigger?: 'enter';
-    type: 'element';
-};
-export type Transformer = ElementTransformer | TextFormatTransformer | TextMatchTransformer;
+import { ElementNode, LexicalNode, TextNode } from 'lexical';
+import type { IEditorKernel, IServiceID } from "../../../types/kernel";
+import type { TransformerRecord } from '../data-source/markdown/parse';
+import type { Transformer } from './transformers';
 export interface IMarkdownWriterContext {
     /**
      * Add processor
@@ -76,6 +23,10 @@ export interface IMarkdownWriterContext {
     wrap: (before: string, after: string) => void;
 }
 export interface IMarkdownShortCutService {
+    /**
+     * Register Markdown reader
+     */
+    registerMarkdownReader<K extends keyof TransformerRecord>(type: K, reader: TransformerRecord[K]): void;
     registerMarkdownShortCut(transformer: Transformer): void;
     registerMarkdownShortCuts(transformers: Transformer[]): void;
     /**
@@ -93,46 +44,24 @@ export declare class MarkdownShortCutService implements IMarkdownShortCutService
     private textMatchTransformers;
     private logger;
     private _markdownWriters;
-    constructor(kernel?: import("../../../types/kernel").IEditorKernel | undefined);
-    get markdownWriters(): Record<string, (ctx: IMarkdownWriterContext, node: LexicalNode) => boolean | void>;
+    private _markdownReaders;
+    constructor(kernel?: IEditorKernel | undefined);
+    get markdownWriters(): Record<string, (_ctx: IMarkdownWriterContext, _node: LexicalNode) => boolean | void>;
+    get markdownReaders(): TransformerRecord;
     private _textFormatTransformersByTrigger;
     private _textMatchTransformersByTrigger;
     get textMatchTransformersByTrigger(): Readonly<Record<string, Readonly<{
-        /**
-         * For import operations, this function can be used to determine the end index of the match, after `importRegExp` has matched.
-         * Without this function, the end index will be determined by the length of the match from `importRegExp`. Manually determining the end index can be useful if
-         * the match from `importRegExp` is not the entire text content of the node. That way, `importRegExp` can be used to match only the start of the node, and `getEndIndex`
-         * can be used to match the end of the node.
-         *
-         * @returns The end index of the match, or false if the match was unsuccessful and a different transformer should be tried.
-         */
         getEndIndex?: ((node: TextNode, match: RegExpMatchArray) => number | false) | undefined;
-        /**
-         * This regex determines what text is matched during markdown imports
-         */
         importRegExp?: RegExp | undefined;
-        /**
-         * This regex determines what text is matched for markdown shortcuts while typing in the editor
-         */
         regExp: RegExp;
-        /**
-         * Determines how the matched markdown text should be transformed into a node during the markdown import process
-         *
-         * @returns nothing, or a TextNode that may be a child of the new node that is created.
-         * If a TextNode is returned, text format matching will be applied to it (e.g. bold, italic, etc.)
-         */
         replace?: ((node: TextNode, match: RegExpMatchArray) => void | TextNode) | undefined;
-        /**
-         * Single character that allows the transformer to trigger when typed in the editor. This does not affect markdown imports outside of the markdown shortcut plugin.
-         * If the trigger is matched, the `regExp` will be used to match the text in the second step.
-         */
         trigger?: string | undefined;
         type: "text-match";
     }>[]>>;
     get textFormatTransformersByTrigger(): Readonly<Record<string, readonly Readonly<{
-        format?: readonly TextFormatType[] | undefined;
+        format?: readonly import("lexical").TextFormatType[] | undefined;
         intraword?: boolean | undefined;
-        process?: ((selection: RangeSelection) => void) | undefined;
+        process?: ((selection: import("lexical").RangeSelection) => void) | undefined;
         tag: string;
         type: "text-format";
     }>[]>>;
@@ -141,4 +70,5 @@ export declare class MarkdownShortCutService implements IMarkdownShortCutService
     testTransformers(parentNode: ElementNode, anchorNode: TextNode, anchorOffset: number, trigger?: 'enter'): boolean;
     runTransformers(parentNode: ElementNode, anchorNode: TextNode, anchorOffset: number, trigger?: 'enter'): boolean;
     registerMarkdownWriter(type: string, writer: (ctx: IMarkdownWriterContext, node: LexicalNode) => boolean | void): void;
+    registerMarkdownReader<K extends keyof TransformerRecord>(type: K, reader: TransformerRecord[K]): void;
 }