@lobehub/editor 1.11.0 → 1.12.0

package/es/editor-kernel/inode/helper.d.ts

@@ -1,14 +1,17 @@
-import { IElementNode } from './i-element-node';
-import { INode } from './i-node';
-import { IParagraphNode } from './paragraph-node';
-import { IRootNode } from './root-node';
-import { ITextNode } from './text-node';
+import type { IElementNode } from './i-element-node';
+import type { INode } from './i-node';
+import type { IParagraphNode } from './paragraph-node';
+import type { IRootNode } from './root-node';
+import type { ITextNode } from './text-node';
 export declare const INodeHelper: {
     appendChild(parent: IElementNode, ...child: INode[]): void;
+    createElementNode(type: string, attrs?: Record<string, unknown>): IElementNode;
+    createLikeTextNode(type: string, text: string, attrs?: Record<string, unknown>): ITextNode;
     createParagraph(attrs?: Record<string, unknown>): IParagraphNode;
     createRootNode(attrs?: Record<string, unknown>): IRootNode;
     createTextNode(text: string, attrs?: Record<string, unknown>): ITextNode;
+    createTypeNode(type: string, attrs?: Record<string, unknown>): INode;
     isParagraphNode(node: INode): node is IParagraphNode;
     isRootNode(node: INode): node is IRootNode;
-    isTextNode(node: INode): node is ITextNode;
+    isTextNode(node: INode): node is import("lexical").SerializedTextNode;
 };

package/es/editor-kernel/inode/helper.js

@@ -22,6 +22,26 @@ export var INodeHelper = {
     }
     (_parent$children = parent.children).push.apply(_parent$children, child);
   },
+  createElementNode: function createElementNode(type) {
+    var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return _objectSpread(_objectSpread(_objectSpread({}, BaseContent), {}, {
+      children: []
+    }, attrs), {}, {
+      type: type
+    });
+  },
+  createLikeTextNode: function createLikeTextNode(type, text) {
+    var attrs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    return _objectSpread(_objectSpread(_objectSpread({}, BaseContent), {}, {
+      detail: 0,
+      format: 0,
+      mode: 'normal',
+      style: ''
+    }, attrs), {}, {
+      text: text,
+      type: type
+    });
+  },
   createParagraph: function createParagraph() {
     var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     return _objectSpread(_objectSpread(_objectSpread({}, BaseContent), {}, {
@@ -43,6 +63,7 @@ export var INodeHelper = {
     var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     return _objectSpread(_objectSpread(_objectSpread({}, BaseContent), {}, {
       detail: 0,
+      format: 0,
       mode: 'normal',
       style: ''
     }, attrs), {}, {
@@ -50,6 +71,12 @@ export var INodeHelper = {
       type: 'text'
     });
   },
+  createTypeNode: function createTypeNode(type) {
+    var attrs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return _objectSpread(_objectSpread(_objectSpread({}, BaseContent), attrs), {}, {
+      type: type
+    });
+  },
   isParagraphNode: function isParagraphNode(node) {
     return node.type === 'paragraph';
   },

package/es/editor-kernel/inode/text-node.d.ts

@@ -1,12 +1,5 @@
-import { TextModeType } from 'lexical';
-import { INode } from './i-node';
+import type { SerializedTextNode } from 'lexical';
 /**
  * Text node
  */
-export interface ITextNode extends INode {
-    detail: number;
-    mode: TextModeType;
-    style: string;
-    text: string;
-    type: 'text';
-}
+export type ITextNode = SerializedTextNode;

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

@@ -1,4 +1,4 @@
-import { IEditorPluginConstructor } from "../../../types";
+import type { IEditorPluginConstructor } from "../../../types";
 export interface CodePluginOptions {
     enableHotkey?: boolean;
     theme?: string;

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

@@ -14,8 +14,9 @@ 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 { $setSelection } from 'lexical';
+import { INodeHelper } from "../../../editor-kernel/inode/helper";
 import { KernelPlugin } from "../../../editor-kernel/plugin";
-import { $createCursorNode } from "../../common";
+import { $createCursorNode, cursorNodeSerialized } from "../../common";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut";
 import { registerCodeInlineCommand } from "../command";
 import { $createCodeNode, CodeNode } from "../node/code";
@@ -61,6 +62,16 @@ export var CodePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         tag: '`',
         type: 'text-format'
       }]);
+      markdownService.registerMarkdownReader('inlineCode', function (node) {
+        return [INodeHelper.createElementNode('codeInline', {
+          children: [cursorNodeSerialized, INodeHelper.createTextNode(node.value || '', {})],
+          direction: 'ltr',
+          format: '',
+          indent: 0,
+          type: 'codeInline',
+          version: 1
+        }), cursorNodeSerialized];
+      });
     }
   }]);
   return CodePlugin;

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

@@ -2,6 +2,12 @@ import { CodeNode } from '@lexical/code';
 import { LexicalEditor, LexicalNode } from 'lexical';
 export declare const CustomShikiTokenizer: {
     $tokenize: (codeNode: CodeNode, language?: string | undefined) => LexicalNode[];
+    $tokenizeSerialized: (code: string, language?: string | undefined, theme?: string | {
+        dark: string;
+        light: string;
+    } | undefined, defaultColorReplacements?: {
+        current?: import("../plugin/FacadeShiki").AllColorReplacements | undefined;
+    } | undefined) => import("lexical").SerializedLexicalNode[];
     defaultColorReplacements: {
         current?: import("../plugin/FacadeShiki").AllColorReplacements | undefined;
     } | undefined;

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

@@ -10,6 +10,7 @@ import { $getRoot, $getSelection, $isElementNode, $isRangeSelection, COMMAND_PRI
 import { ShikiTokenizer } from "../plugin/CodeHighlighterShiki";
 export var CustomShikiTokenizer = {
   $tokenize: ShikiTokenizer.$tokenize,
+  $tokenizeSerialized: ShikiTokenizer.$tokenizeSerialized,
   defaultColorReplacements: ShikiTokenizer.defaultColorReplacements,
   defaultLanguage: ShikiTokenizer.defaultLanguage,
   defaultTheme: ShikiTokenizer.defaultTheme

package/es/plugins/codeblock/plugin/CodeHighlighterShiki.d.ts

@@ -7,9 +7,16 @@
  */
 import { CodeNode } from '@lexical/code';
 import type { LexicalEditor, LexicalNode } from 'lexical';
+import { INode } from "../../../editor-kernel/inode";
 import { AllColorReplacements } from './FacadeShiki';
 export interface Tokenizer {
     $tokenize(codeNode: CodeNode, language?: string): LexicalNode[];
+    $tokenizeSerialized(code: string, language?: string, theme?: string | {
+        dark: string;
+        light: string;
+    }, defaultColorReplacements?: {
+        current?: AllColorReplacements;
+    }): INode[];
     defaultColorReplacements?: {
         current?: AllColorReplacements;
     };

package/es/plugins/codeblock/plugin/CodeHighlighterShiki.js

@@ -15,13 +15,20 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import { $getEndOfCodeInLine, $getFirstCodeNodeOfLine, $getLastCodeNodeOfLine, $getStartOfCodeInLine, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode, DEFAULT_CODE_LANGUAGE } from '@lexical/code';
 import { mergeRegister } from '@lexical/utils';
 import { $createLineBreakNode, $createPoint, $createTabNode, $createTextNode, $getCaretRange, $getCaretRangeInDirection, $getNodeByKey, $getSelection, $getSiblingCaret, $getTextPointCaret, $insertNodes, $isLineBreakNode, $isRangeSelection, $isTabNode, $isTextNode, $normalizeCaret, $setSelectionFromCaretRange, COMMAND_PRIORITY_LOW, INDENT_CONTENT_COMMAND, INSERT_TAB_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_TAB_COMMAND, MOVE_TO_END, MOVE_TO_START, OUTDENT_CONTENT_COMMAND, TextNode } from 'lexical';
-import { $getHighlightNodes, isCodeLanguageLoaded, isCodeThemeLoaded, loadCodeLanguage, loadCodeTheme } from "./FacadeShiki";
+import { $getHighlightNodes, getHighlightSerializeNode, isCodeLanguageLoaded, isCodeThemeLoaded, loadCodeLanguage, loadCodeTheme } from "./FacadeShiki";
 import invariant from "./invariant";
 var DEFAULT_CODE_THEME = 'slack-ochin';
 export var ShikiTokenizer = {
   $tokenize: function $tokenize(codeNode, language) {
     return $getHighlightNodes(codeNode, language || this.defaultLanguage, this.defaultColorReplacements);
   },
+  $tokenizeSerialized: function $tokenizeSerialized(code, language, theme, defaultColorReplacements) {
+    return getHighlightSerializeNode(code, language || this.defaultLanguage,
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    toCodeTheme({
+      defaultTheme: theme || this.defaultTheme
+    }), defaultColorReplacements || ShikiTokenizer.defaultColorReplacements);
+  },
   defaultColorReplacements: undefined,
   defaultLanguage: DEFAULT_CODE_LANGUAGE,
   defaultTheme: DEFAULT_CODE_THEME
@@ -630,7 +637,41 @@ export function registerCodeHighlighting(editor, tokenizer) {
   }
 
   // Add the rest of the registrations
-  registrations.push(editor.registerNodeTransform(CodeNode, function (node) {
+  registrations.push(editor.registerMutationListener(CodeNode, function (mutations) {
+    editor.update(function () {
+      var _iterator4 = _createForOfIteratorHelper(mutations),
+        _step4;
+      try {
+        var _loop = function _loop() {
+          var _step4$value = _slicedToArray(_step4.value, 2),
+            key = _step4$value[0],
+            type = _step4$value[1];
+          if (type !== 'destroyed') {
+            var node = $getNodeByKey(key);
+            if (node !== null) {
+              var _codeNode2$getTheme;
+              var _codeNode2 = node;
+              if ((_codeNode2$getTheme = _codeNode2.getTheme()) !== null && _codeNode2$getTheme !== void 0 && _codeNode2$getTheme.endsWith(' needUpdate')) {
+                editor.update(function () {
+                  var _codeNode2$getTheme2;
+                  _codeNode2.setTheme(((_codeNode2$getTheme2 = _codeNode2.getTheme()) === null || _codeNode2$getTheme2 === void 0 ? void 0 : _codeNode2$getTheme2.replace(' needUpdate', '')) || '');
+                });
+              }
+            }
+          }
+        };
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+    });
+  }, {
+    skipInitialization: false
+  }), editor.registerNodeTransform(CodeNode, function (node) {
     return codeNodeTransform(node, editor, tokenizer);
   }), editor.registerNodeTransform(TextNode, function (node) {
     return $textNodeTransform(node, editor, tokenizer);

package/es/plugins/codeblock/plugin/FacadeShiki.d.ts

@@ -6,10 +6,14 @@
  *
  */
 import type { CodeNode } from '@lexical/code';
-import type { LexicalEditor, LexicalNode, NodeKey } from 'lexical';
+import type { LexicalEditor, LexicalNode, NodeKey, SerializedTextNode, Spread } from 'lexical';
+import { INode } from "../../../editor-kernel/inode";
 export type ColorReplacements = Record<string, string>;
 export type ScopedColorReplacements = Record<string, ColorReplacements>;
 export type AllColorReplacements = ColorReplacements | ScopedColorReplacements;
+export type SerializedCodeHighlightNode = Spread<{
+    highlightType: string | null | undefined;
+}, SerializedTextNode>;
 /**
  * Creates a simple color replacement map
  * @param replacements - Object mapping from old color to new color
@@ -35,6 +39,9 @@ export declare function loadCodeTheme(theme: string, editor?: LexicalEditor, cod
 export declare function getCodeLanguageOptions(): [string, string][];
 export declare function getCodeThemeOptions(): [string, string][];
 export declare function normalizeCodeLanguage(language: string): string;
+export declare function getHighlightSerializeNode(code: string, language: string, theme?: string, colorReplacements?: {
+    current?: AllColorReplacements;
+}): INode[];
 export declare function $getHighlightNodes(codeNode: CodeNode, language: string, colorReplacements?: {
     current?: AllColorReplacements;
 }): LexicalNode[];

package/es/plugins/codeblock/plugin/FacadeShiki.js

@@ -15,6 +15,7 @@ import { createHighlighterCoreSync, isSpecialLang, isSpecialTheme, stringifyToke
 import { createJavaScriptRegexEngine } from '@shikijs/engine-javascript';
 import { $createLineBreakNode, $createTabNode, $getNodeByKey } from 'lexical';
 import { bundledLanguagesInfo, bundledThemesInfo } from 'shiki';
+import { INodeHelper } from "../../../editor-kernel/inode/helper";
 
 // Color replacements types for Shiki
 
@@ -227,11 +228,14 @@ function getTokenStyleObject(token) {
   }
   return style;
 }
-function mapTokensToLexicalStructure(tokens, diff, colorReplacements) {
+function mapTokensToLexicalSerialized(tokens, diff, colorReplacements) {
   var nodes = [];
   tokens.forEach(function (line, idx) {
     if (idx) {
-      nodes.push($createLineBreakNode());
+      nodes.push({
+        type: 'linebreak',
+        version: 1
+      });
     }
     line.forEach(function (token, tidx) {
       var text = token.content;
@@ -242,18 +246,20 @@ function mapTokensToLexicalStructure(tokens, diff, colorReplacements) {
         var prefixTypes = ['inserted', 'deleted', 'inserted', 'deleted', 'unchanged'];
         var prefixIndex = prefixes.indexOf(text[0]);
         if (prefixIndex !== -1) {
-          nodes.push($createCodeHighlightNode(prefixes[prefixIndex], prefixTypes[prefixIndex]));
+          nodes.push(INodeHelper.createLikeTextNode('code-highlight', prefixes[prefixIndex], {
+            highlightType: prefixTypes[prefixIndex]
+          }));
           text = text.slice(1);
         }
       }
       var parts = text.split('\t');
       parts.forEach(function (part, pidx) {
         if (pidx) {
-          nodes.push($createTabNode());
+          nodes.push(INodeHelper.createLikeTextNode('tab', '\t'));
         }
         if (part !== '') {
           var _token$htmlStyle, _token$htmlStyle2;
-          var node = $createCodeHighlightNode(part);
+          var node = INodeHelper.createLikeTextNode('code-highlight', part);
           if ((_token$htmlStyle = token.htmlStyle) !== null && _token$htmlStyle !== void 0 && _token$htmlStyle['--shiki-light'] && colorReplacements !== null && colorReplacements !== void 0 && colorReplacements['light']) {
             var newColor = colorReplacements['light'][token.htmlStyle['--shiki-light'].toLowerCase()];
             if (newColor) {
@@ -267,6 +273,54 @@ function mapTokensToLexicalStructure(tokens, diff, colorReplacements) {
             }
           }
           var style = stringifyTokenStyle(token.htmlStyle || getTokenStyleObject(token));
+          node.style = style;
+          nodes.push(node);
+        }
+      });
+    });
+  });
+  return nodes;
+}
+function mapTokensToLexicalStructure(tokens, diff, colorReplacements) {
+  var nodes = [];
+  tokens.forEach(function (line, idx) {
+    if (idx) {
+      nodes.push($createLineBreakNode());
+    }
+    line.forEach(function (token, tidx) {
+      var text = token.content;
+
+      // implement diff-xxxx languages
+      if (diff && tidx === 0 && text.length > 0) {
+        var prefixes = ['+', '-', '>', '<', ' '];
+        var prefixTypes = ['inserted', 'deleted', 'inserted', 'deleted', 'unchanged'];
+        var prefixIndex = prefixes.indexOf(text[0]);
+        if (prefixIndex !== -1) {
+          nodes.push($createCodeHighlightNode(prefixes[prefixIndex], prefixTypes[prefixIndex]));
+          text = text.slice(1);
+        }
+      }
+      var parts = text.split('\t');
+      parts.forEach(function (part, pidx) {
+        if (pidx) {
+          nodes.push($createTabNode());
+        }
+        if (part !== '') {
+          var _token$htmlStyle3, _token$htmlStyle4;
+          var node = $createCodeHighlightNode(part);
+          if ((_token$htmlStyle3 = token.htmlStyle) !== null && _token$htmlStyle3 !== void 0 && _token$htmlStyle3['--shiki-light'] && colorReplacements !== null && colorReplacements !== void 0 && colorReplacements['light']) {
+            var newColor = colorReplacements['light'][token.htmlStyle['--shiki-light'].toLowerCase()];
+            if (newColor) {
+              token.htmlStyle['--shiki-light'] = newColor;
+            }
+          }
+          if ((_token$htmlStyle4 = token.htmlStyle) !== null && _token$htmlStyle4 !== void 0 && _token$htmlStyle4['--shiki-dark'] && colorReplacements !== null && colorReplacements !== void 0 && colorReplacements['dark']) {
+            var _newColor2 = colorReplacements['dark'][token.htmlStyle['--shiki-dark'].toLowerCase()];
+            if (_newColor2) {
+              token.htmlStyle['--shiki-dark'] = _newColor2;
+            }
+          }
+          var style = stringifyTokenStyle(token.htmlStyle || getTokenStyleObject(token));
           node.setStyle(style);
           nodes.push(node);
         }
@@ -275,8 +329,43 @@ function mapTokensToLexicalStructure(tokens, diff, colorReplacements) {
   });
   return nodes;
 }
+var DIFF_LANGUAGE_REGEX = /^diff-([\w-]+)/i;
+export function getHighlightSerializeNode(code, language) {
+  var theme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'poimandres';
+  var colorReplacements = arguments.length > 3 ? arguments[3] : undefined;
+  // Implementation goes here
+
+  var diffLanguageMatch = DIFF_LANGUAGE_REGEX.exec(language);
+  var themes = theme.split(' ');
+
+  // Build the options for codeToTokens
+  var options = themes.length > 1 ? {
+    defaultColor: false,
+    lang: diffLanguageMatch ? diffLanguageMatch[1] : language,
+    themes: {
+      dark: themes[1],
+      light: themes[0]
+    }
+  } : {
+    lang: language,
+    theme: themes[0]
+  };
+  var newColorReplacements = {};
+  if (colorReplacements !== null && colorReplacements !== void 0 && colorReplacements.current && themes.length > 1) {
+    if (colorReplacements.current[themes[0]]) {
+      newColorReplacements['light'] = colorReplacements.current[themes[0]];
+    }
+    if (colorReplacements.current[themes[1]]) {
+      newColorReplacements['dark'] = colorReplacements.current[themes[1]];
+    }
+  } else if (colorReplacements !== null && colorReplacements !== void 0 && colorReplacements.current) {
+    options.colorReplacements = resolveColorReplacements(colorReplacements.current, themes[0]);
+  }
+  var tokensResult = shiki.codeToTokens(code, options);
+  var tokens = tokensResult.tokens;
+  return mapTokensToLexicalSerialized(tokens, !!diffLanguageMatch, newColorReplacements);
+}
 export function $getHighlightNodes(codeNode, language, colorReplacements) {
-  var DIFF_LANGUAGE_REGEX = /^diff-([\w-]+)/i;
   var diffLanguageMatch = DIFF_LANGUAGE_REGEX.exec(language);
   var code = codeNode.getTextContent();
   var theme = codeNode.getTheme() || 'poimandres';

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

@@ -15,6 +15,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { $createCodeNode, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode } from '@lexical/code';
 import { TabNode } from 'lexical';
+import { INodeHelper } from "../../../editor-kernel/inode/helper";
 import { KernelPlugin } from "../../../editor-kernel/plugin";
 import { IMarkdownShortCutService } from "../../markdown";
 import { CustomShikiTokenizer, registerCodeCommand } from "../command";
@@ -47,11 +48,20 @@ CodeNode.importDOM = function () {
   // Custom logic for handling imported DOM
   return node;
 };
+function toMarkdownTheme(theme) {
+  if (!theme) {
+    return '';
+  }
+  if (typeof theme === 'string') {
+    return theme;
+  }
+  return "".concat(theme.light, " ").concat(theme.dark);
+}
 export var CodeblockPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
   _inherits(CodeblockPlugin, _KernelPlugin);
   var _super = _createSuper(CodeblockPlugin);
   function CodeblockPlugin(kernel) {
-    var _config$theme, _this$config, _this$config3, _kernel$requireServic, _kernel$requireServic2, _kernel$requireServic3, _kernel$requireServic4, _kernel$requireServic5;
+    var _config$theme, _this$config, _this$config3;
     var _this;
     var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     _classCallCheck(this, CodeblockPlugin);
@@ -71,34 +81,6 @@ export var CodeblockPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       var _this$config4;
       CustomShikiTokenizer.defaultColorReplacements = (_this$config4 = _this.config) === null || _this$config4 === void 0 ? void 0 : _this$config4.colorReplacements;
     }
-    (_kernel$requireServic = kernel.requireService(IMarkdownShortCutService)) === null || _kernel$requireServic === void 0 || _kernel$requireServic.registerMarkdownShortCut({
-      regExp: /^(```|···)(.+)?$/,
-      replace: function replace(parentNode, _, match) {
-        var code = $createCodeNode(getCodeLanguageByInput(match[2]), toCodeTheme(CustomShikiTokenizer));
-        parentNode.replace(code);
-        code.selectStart();
-      },
-      trigger: 'enter',
-      type: 'element'
-    });
-    (_kernel$requireServic2 = kernel.requireService(IMarkdownShortCutService)) === null || _kernel$requireServic2 === void 0 || _kernel$requireServic2.registerMarkdownWriter(CodeNode.getType(), function (ctx, node) {
-      if ($isCodeNode(node)) {
-        ctx.wrap('```' + (node.getLanguage() || '') + '\n', '\n```\n');
-      }
-    });
-    (_kernel$requireServic3 = kernel.requireService(IMarkdownShortCutService)) === null || _kernel$requireServic3 === void 0 || _kernel$requireServic3.registerMarkdownWriter(TabNode.getType(), function (ctx) {
-      ctx.appendLine('  ');
-    });
-    (_kernel$requireServic4 = kernel.requireService(IMarkdownShortCutService)) === null || _kernel$requireServic4 === void 0 || _kernel$requireServic4.registerMarkdownWriter(CodeHighlightNode.getType(), function (ctx, node) {
-      if ($isCodeHighlightNode(node)) {
-        ctx.appendLine(node.getTextContent());
-      }
-    });
-    (_kernel$requireServic5 = kernel.requireService(IMarkdownShortCutService)) === null || _kernel$requireServic5 === void 0 || _kernel$requireServic5.registerMarkdownWriter('linebreak', function (ctx, node) {
-      if ($isCodeNode(node.getParent())) {
-        ctx.appendLine('\n');
-      }
-    });
     return _this;
   }
   _createClass(CodeblockPlugin, [{
@@ -111,6 +93,69 @@ export var CodeblockPlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
         this.register(registerCodeHighlighting(editor));
       }
       this.register(registerCodeCommand(editor));
+      this.registerMarkdown();
+    }
+  }, {
+    key: "registerMarkdown",
+    value: function registerMarkdown() {
+      var _this2 = this;
+      var kernel = this.kernel;
+      var markdownService = kernel.requireService(IMarkdownShortCutService);
+      if (!markdownService) {
+        return;
+      }
+      markdownService.registerMarkdownShortCut({
+        regExp: /^(```|···)(.+)?$/,
+        replace: function replace(parentNode, _, match) {
+          var code = $createCodeNode(getCodeLanguageByInput(match[2]), toCodeTheme(CustomShikiTokenizer));
+          parentNode.replace(code);
+          code.selectStart();
+        },
+        trigger: 'enter',
+        type: 'element'
+      });
+      markdownService.registerMarkdownWriter(CodeNode.getType(), function (ctx, node) {
+        if ($isCodeNode(node)) {
+          ctx.wrap('```' + (node.getLanguage() || '') + '\n', '\n```\n');
+        }
+      });
+      markdownService.registerMarkdownWriter(TabNode.getType(), function (ctx) {
+        ctx.appendLine('  ');
+      });
+      markdownService.registerMarkdownWriter(CodeHighlightNode.getType(), function (ctx, node) {
+        if ($isCodeHighlightNode(node)) {
+          ctx.appendLine(node.getTextContent());
+        }
+      });
+      markdownService.registerMarkdownWriter('linebreak', function (ctx, node) {
+        if ($isCodeNode(node.getParent())) {
+          ctx.appendLine('\n');
+        }
+      });
+      markdownService.registerMarkdownReader('code', function (node) {
+        var _this2$config;
+        var language = node.lang ? getCodeLanguageByInput(node.lang) : 'plaintext';
+        return INodeHelper.createElementNode('code', {
+          children: node.value.split('\n').flatMap(function (text, index, arr) {
+            var textNode = INodeHelper.createTextNode(text);
+            textNode.type = 'code-highlight';
+            if (index === arr.length - 1) {
+              return textNode;
+            }
+            return [textNode, {
+              type: 'linebreak',
+              version: 1
+            }];
+          }).flat(),
+          direction: 'ltr',
+          format: '',
+          indent: 0,
+          language: language,
+          textStyle: '--shiki-dark:var(--color-info);--shiki-light:var(--color-info)',
+          theme: "".concat(toMarkdownTheme((_this2$config = _this2.config) === null || _this2$config === void 0 ? void 0 : _this2$config.shikiTheme), " needUpdate"),
+          version: 1
+        });
+      });
     }
   }]);
   return CodeblockPlugin;

package/es/plugins/common/data-source/json-data-source.d.ts

@@ -1,6 +1,6 @@
-import { LexicalEditor } from 'lexical';
+import type { LexicalEditor } from 'lexical';
 import { DataSource } from "../../../editor-kernel";
-import { IWriteOptions } from "../../../editor-kernel/data-source";
+import type { IWriteOptions } from "../../../editor-kernel/data-source";
 export default class JSONDataSource extends DataSource {
     read(editor: LexicalEditor, data: any): void;
     write(editor: LexicalEditor, options?: IWriteOptions): any;

package/es/plugins/common/data-source/json-data-source.js

@@ -24,15 +24,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 import { $isTableSelection } from '@lexical/table';
 import { $getCharacterOffsets, $getNodeByKey, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, IS_CODE } from 'lexical';
 import { DataSource } from "../../../editor-kernel";
-var cursorNode = {
-  detail: 0,
-  format: 0,
-  mode: 'normal',
-  style: '',
-  text: "\uFEFF",
-  type: 'cursor',
-  version: 1
-};
+import { cursorNodeSerialized } from "../node/cursor";
 var JSONDataSource = /*#__PURE__*/function (_DataSource) {
   _inherits(JSONDataSource, _DataSource);
   var _super = _createSuper(JSONDataSource);
@@ -66,7 +58,7 @@ var JSONDataSource = /*#__PURE__*/function (_DataSource) {
               type: 'codeInline',
               version: 1
             };
-            node.children.splice(i + 1, 0, cursorNode);
+            node.children.splice(i + 1, 0, cursorNodeSerialized);
           }
         }
       };

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

@@ -1,4 +1,4 @@
 export { INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND } from './command';
-export { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, } from './node/cursor';
+export { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, cursorNodeSerialized, } from './node/cursor';
 export * from './plugin';
 export * from './react';

package/es/plugins/common/index.js

@@ -1,4 +1,4 @@
 export { INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND } from "./command";
-export { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode } from "./node/cursor";
+export { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, cursorNodeSerialized } from "./node/cursor";
 export * from "./plugin";
 export * from "./react";

package/es/plugins/common/node/cursor.d.ts

@@ -1,7 +1,9 @@
-import { ElementNode, LexicalEditor, LexicalNode, TextNode } from 'lexical';
+import type { LexicalEditor, LexicalNode, SerializedLexicalNode } from 'lexical';
+import { ElementNode, TextNode } from 'lexical';
 export declare class CardLikeElementNode extends ElementNode {
     isCardLike(): boolean;
 }
+export declare const cursorNodeSerialized: SerializedLexicalNode;
 export declare class CursorNode extends TextNode {
     static getType(): string;
     isUnmergeable(): boolean;

package/es/plugins/common/node/cursor.js

@@ -37,6 +37,15 @@ export var CardLikeElementNode = /*#__PURE__*/function (_ElementNode) {
   }]);
   return CardLikeElementNode;
 }(ElementNode);
+export var cursorNodeSerialized = {
+  detail: 0,
+  format: 0,
+  mode: 'normal',
+  style: '',
+  text: "\uFEFF",
+  type: 'cursor',
+  version: 1
+};
 export var CursorNode = /*#__PURE__*/function (_TextNode) {
   _inherits(CursorNode, _TextNode);
   var _super2 = _createSuper(CursorNode);

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

@@ -1,4 +1,4 @@
-import { IEditorPluginConstructor } from "../../../types";
+import type { IEditorPluginConstructor } from "../../../types";
 export interface CommonPluginOptions {
     enableHotkey?: boolean;
     theme?: {