@lobehub/editor 3.12.1 → 3.13.0

package/es/plugins/common/plugin/index.d.ts

@@ -1,5 +1,6 @@
 import type { IEditorPluginConstructor } from "../../../types";
-export interface CommonPluginOptions {
+import { type PasteHandlerConfig } from './paste-handler';
+export interface CommonPluginOptions extends PasteHandlerConfig {
     enableHotkey?: boolean;
     /**
      * Enable/disable markdown shortcuts

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

@@ -1,5 +1,4 @@
 var _class;
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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); }
@@ -26,7 +25,7 @@ import { registerDragonSupport } from '@lexical/dragon';
 import { registerHistory } from '@lexical/history';
 import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, HeadingNode, QuoteNode, registerRichText } from '@lexical/rich-text';
 import { CAN_USE_DOM } from '@lexical/utils';
-import { $createLineBreakNode, $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, CONTROLLED_TEXT_INSERTION_COMMAND, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, PASTE_COMMAND, ParagraphNode, TEXT_TYPE_TO_FORMAT, TextNode } from 'lexical';
+import { $createLineBreakNode, $createParagraphNode, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_HIGH, INSERT_LINE_BREAK_COMMAND, INSERT_PARAGRAPH_COMMAND, PASTE_COMMAND, ParagraphNode, TEXT_TYPE_TO_FORMAT, TextNode } from 'lexical';
 import { noop } from "../../../editor-kernel";
 import { INodeHelper } from "../../../editor-kernel/inode/helper";
 import { KernelPlugin } from "../../../editor-kernel/plugin";
@@ -40,6 +39,7 @@ import { patchBreakLine, registerBreakLineClick } from "../node/ElementDOMSlot";
 import { CursorNode, registerCursorNode } from "../node/cursor";
 import { $isCursorInQuote, $isCursorInTable, createBlockNode, sampleReader } from "../utils";
 import { registerMDReader } from "./mdReader";
+import { handleFilePaste, handlePlainTextPaste, handleVSCodePaste, runPasteHandlers } from "./paste-handler";
 import { registerHeaderBackspace, registerLastElement, registerRichKeydown } from "./register";
 patchBreakLine();
 export var CommonPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
@@ -350,39 +350,30 @@ export var CommonPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       var _this2 = this,
         _this$config2;
       this.register(this.kernel.registerHighCommand(PASTE_COMMAND, function (event) {
-        var _this2$config;
+        var _this2$config, _this2$config2;
         if (!(event instanceof ClipboardEvent)) return false;
         var clipboardData = event.clipboardData;
         if (!clipboardData) return false;
         _this2.kernel.emit('onPaste', event);
+        var ctx = {
+          clipboardData: clipboardData,
+          config: _this2.config,
+          editor: editor,
+          event: event
+        };
 
-        // If pasteAsPlainText is enabled, intercept and paste as plain text
-        if ((_this2$config = _this2.config) !== null && _this2$config !== void 0 && _this2$config.pasteAsPlainText) {
-          // Check if it's a file paste - don't interfere with file uploads
-          var items = clipboardData.items;
-          var _iterator = _createForOfIteratorHelper(items),
-            _step;
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var item = _step.value;
-              if (item.kind === 'file') {
-                return false; // Let file paste be handled normally
-              }
-            }
-
-            // Get plain text from clipboard
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
+        // VS Code paste handling is independent of pasteAsPlainText
+        // This ensures code blocks get proper language even in rich text mode
+        if ((_this2$config = _this2.config) !== null && _this2$config !== void 0 && _this2$config.pasteVSCodeAsCodeBlock) {
+          var result = handleVSCodePaste(ctx);
+          if (result === 'handled') {
+            return true;
           }
-          var text = clipboardData.getData('text/plain');
-          if (!text) return false;
+        }
 
-          // Prevent default paste behavior and insert plain text
-          event.preventDefault();
-          editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, text);
-          return true;
+        // If pasteAsPlainText is enabled, run the plain text handlers chain
+        if ((_this2$config2 = _this2.config) !== null && _this2$config2 !== void 0 && _this2$config2.pasteAsPlainText) {
+          return runPasteHandlers(ctx, [handleFilePaste, handlePlainTextPaste]);
         }
         return false;
       }, COMMAND_PRIORITY_CRITICAL));

package/es/plugins/common/plugin/paste-handler.d.ts

@@ -0,0 +1,37 @@
+import type { LexicalEditor } from 'lexical';
+/**
+ * Configuration options relevant to paste handling
+ */
+export interface PasteHandlerConfig {
+    pasteVSCodeAsCodeBlock?: boolean;
+}
+export interface PasteContext {
+    clipboardData: DataTransfer;
+    config: PasteHandlerConfig;
+    editor: LexicalEditor;
+    event: ClipboardEvent;
+}
+/**
+ * Paste handler function type.
+ * @returns 'handled' - stop the chain, event is handled
+ * @returns 'skip' - skip pasteAsPlainText logic, let default behavior handle
+ * @returns 'next' - continue to next handler
+ */
+export type PasteHandler = (ctx: PasteContext) => 'handled' | 'skip' | 'next';
+/**
+ * Check if it's a file paste - skip plain text handling to let file uploads work normally
+ */
+export declare const handleFilePaste: PasteHandler;
+/**
+ * Handle VS Code paste - create code block with language from vscode-editor-data
+ */
+export declare const handleVSCodePaste: PasteHandler;
+/**
+ * Handle plain text paste - fallback handler that pastes as plain text
+ */
+export declare const handlePlainTextPaste: PasteHandler;
+/**
+ * Run paste handlers in sequence (middleware chain pattern)
+ * @returns true if event was handled, false to let default behavior continue
+ */
+export declare function runPasteHandlers(ctx: PasteContext, handlers: PasteHandler[]): boolean;

package/es/plugins/common/plugin/paste-handler.js

@@ -0,0 +1,140 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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; }
+import { $createNodeSelection, $getSelection, $insertNodes, $isRangeSelection, $setSelection, CONTROLLED_TEXT_INSERTION_COMMAND } from 'lexical';
+import { $createCodeMirrorNode } from "../../codemirror-block/node/CodeMirrorNode";
+
+// ============================================================================
+// Paste Middleware Types
+// ============================================================================
+
+/**
+ * Configuration options relevant to paste handling
+ */
+
+/**
+ * Paste handler function type.
+ * @returns 'handled' - stop the chain, event is handled
+ * @returns 'skip' - skip pasteAsPlainText logic, let default behavior handle
+ * @returns 'next' - continue to next handler
+ */
+
+// ============================================================================
+// Paste Handlers
+// ============================================================================
+
+/**
+ * Check if it's a file paste - skip plain text handling to let file uploads work normally
+ */
+export var handleFilePaste = function handleFilePaste(_ref) {
+  var clipboardData = _ref.clipboardData;
+  var items = clipboardData.items;
+  var _iterator = _createForOfIteratorHelper(items),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var item = _step.value;
+      if (item.kind === 'file') {
+        return 'skip';
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return 'next';
+};
+
+/**
+ * Handle VS Code paste - create code block with language from vscode-editor-data
+ */
+export var handleVSCodePaste = function handleVSCodePaste(_ref2) {
+  var clipboardData = _ref2.clipboardData,
+    config = _ref2.config,
+    editor = _ref2.editor,
+    event = _ref2.event;
+  if (!config.pasteVSCodeAsCodeBlock) {
+    return 'next';
+  }
+  var vscodeDataStr = clipboardData.getData('vscode-editor-data');
+  if (!vscodeDataStr) {
+    return 'next';
+  }
+  try {
+    var vscodeData = JSON.parse(vscodeDataStr);
+    // VS Code uses 'mode' for language, fallback to 'language' or 'plaintext'
+    var language = vscodeData.mode || vscodeData.language || 'plaintext';
+    var text = clipboardData.getData('text/plain');
+    if (!text) {
+      return 'next';
+    }
+    event.preventDefault();
+    editor.update(function () {
+      var selection = $getSelection();
+      if (!$isRangeSelection(selection)) {
+        return;
+      }
+
+      // Create CodeMirror node with language and text content
+      var codeNode = $createCodeMirrorNode(language, text);
+      $insertNodes([codeNode]);
+
+      // Select the inserted CodeMirror node
+      var nodeSelection = $createNodeSelection();
+      nodeSelection.add(codeNode.getKey());
+      $setSelection(nodeSelection);
+    });
+    return 'handled';
+  } catch (_unused) {
+    // If parsing fails, continue to next handler
+    return 'next';
+  }
+};
+
+/**
+ * Handle plain text paste - fallback handler that pastes as plain text
+ */
+export var handlePlainTextPaste = function handlePlainTextPaste(_ref3) {
+  var clipboardData = _ref3.clipboardData,
+    editor = _ref3.editor,
+    event = _ref3.event;
+  var text = clipboardData.getData('text/plain');
+  if (!text) {
+    return 'skip';
+  }
+  event.preventDefault();
+  editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, text);
+  return 'handled';
+};
+
+// ============================================================================
+// Middleware Runner
+// ============================================================================
+
+/**
+ * Run paste handlers in sequence (middleware chain pattern)
+ * @returns true if event was handled, false to let default behavior continue
+ */
+export function runPasteHandlers(ctx, handlers) {
+  var _iterator2 = _createForOfIteratorHelper(handlers),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var handler = _step2.value;
+      var result = handler(ctx);
+      if (result === 'handled') {
+        return true;
+      }
+      if (result === 'skip') {
+        return false;
+      }
+      // 'next' continues to the next handler
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return false;
+}

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

@@ -46,6 +46,8 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
     markdownOption = _ref$markdownOption === void 0 ? true : _ref$markdownOption,
     _ref$pasteAsPlainText = _ref.pasteAsPlainText,
     pasteAsPlainText = _ref$pasteAsPlainText === void 0 ? false : _ref$pasteAsPlainText,
+    _ref$pasteVSCodeAsCod = _ref.pasteVSCodeAsCodeBlock,
+    pasteVSCodeAsCodeBlock = _ref$pasteVSCodeAsCod === void 0 ? true : _ref$pasteVSCodeAsCod,
     onKeyDown = _ref.onKeyDown,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
@@ -112,9 +114,10 @@ var ReactPlainText = /*#__PURE__*/memo(function (_ref) {
       enableHotkey: enableHotkey,
       markdownOption: markdownOption,
       pasteAsPlainText: pasteAsPlainText,
+      pasteVSCodeAsCodeBlock: pasteVSCodeAsCodeBlock,
       theme: restTheme ? _objectSpread(_objectSpread({}, computedThemeStyles), restTheme) : computedThemeStyles
     });
-  }, [editor, enableHotkey, enablePasteMarkdown, markdownOption, pasteAsPlainText, restTheme, computedThemeStyles]);
+  }, [editor, enableHotkey, enablePasteMarkdown, markdownOption, pasteAsPlainText, pasteVSCodeAsCodeBlock, restTheme, computedThemeStyles]);
   useEffect(function () {
     var _editor$getLexicalEdi;
     var container = editorContainerRef.current;

package/es/plugins/common/react/type.d.ts

@@ -62,6 +62,13 @@ export interface ReactPlainTextProps {
      * @default false
      */
     pasteAsPlainText?: boolean;
+    /**
+     * When pasting VS Code content (detected via vscode-editor-data clipboard type),
+     * create a code block with the language from VS Code instead of pasting as plain text.
+     * This option only takes effect when pasteAsPlainText is enabled.
+     * @default true
+     */
+    pasteVSCodeAsCodeBlock?: boolean;
     style?: CSSProperties;
     theme?: CommonPluginOptions['theme'] & {
         fontSize?: number;

package/es/react/Editor/Editor.js

@@ -59,6 +59,8 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
     markdownOption = _ref$markdownOption === void 0 ? true : _ref$markdownOption,
     _ref$pasteAsPlainText = _ref.pasteAsPlainText,
     pasteAsPlainText = _ref$pasteAsPlainText === void 0 ? false : _ref$pasteAsPlainText,
+    _ref$pasteVSCodeAsCod = _ref.pasteVSCodeAsCodeBlock,
+    pasteVSCodeAsCodeBlock = _ref$pasteVSCodeAsCod === void 0 ? true : _ref$pasteVSCodeAsCod,
     onCompositionStart = _ref.onCompositionStart,
     onCompositionEnd = _ref.onCompositionEnd,
     onContextMenu = _ref.onContextMenu,
@@ -127,6 +129,7 @@ var Editor = /*#__PURE__*/memo(function (_ref) {
       onPressEnter: onPressEnter,
       onTextChange: debouncedOnTextChange,
       pasteAsPlainText: pasteAsPlainText,
+      pasteVSCodeAsCodeBlock: pasteVSCodeAsCodeBlock,
       style: style,
       variant: variant,
       children: /*#__PURE__*/_jsx(ReactEditorContent, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "3.12.1",
+  "version": "3.13.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",