@lobehub/editor 3.2.2 → 3.3.0

package/es/plugins/codemirror-block/react/components/Toolbar.js

@@ -0,0 +1,56 @@
+'use client';
+
+import { ActionIcon, Flexbox } from '@lobehub/ui';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import CopyButton from "./CopyButton";
+import { LanguageSelect } from "./LanguageSelect";
+import { MoreOptions } from "./MoreOptions";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Toolbar = function Toolbar(_ref) {
+  var selectedLang = _ref.selectedLang,
+    onLanguageChange = _ref.onLanguageChange,
+    onCopy = _ref.onCopy,
+    tabSize = _ref.tabSize,
+    onTabSizeChange = _ref.onTabSizeChange,
+    useTabs = _ref.useTabs,
+    onUseTabsChange = _ref.onUseTabsChange,
+    showLineNumbers = _ref.showLineNumbers,
+    onShowLineNumbersChange = _ref.onShowLineNumbersChange,
+    onClick = _ref.onClick,
+    expand = _ref.expand,
+    toggleExpand = _ref.toggleExpand;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: 'cm-header-toolbar',
+    horizontal: true,
+    justify: 'space-between',
+    onClick: onClick,
+    padding: 4,
+    children: [/*#__PURE__*/_jsx(LanguageSelect, {
+      onLanguageChange: onLanguageChange,
+      selectedLang: selectedLang
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      gap: 4,
+      horizontal: true,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [/*#__PURE__*/_jsx(MoreOptions, {
+        onShowLineNumbersChange: onShowLineNumbersChange,
+        onTabSizeChange: onTabSizeChange,
+        onUseTabsChange: onUseTabsChange,
+        showLineNumbers: showLineNumbers,
+        tabSize: tabSize,
+        useTabs: useTabs
+      }), /*#__PURE__*/_jsx(CopyButton, {
+        onCopy: onCopy
+      }), /*#__PURE__*/_jsx(ActionIcon, {
+        icon: expand ? ChevronDown : ChevronRight,
+        onClick: toggleExpand,
+        size: "small"
+      })]
+    })]
+  });
+};
+Toolbar.displayName = 'Toolbar';

package/es/plugins/codemirror-block/react/components/style.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: {
+    container: string;
+};

package/es/plugins/codemirror-block/react/components/style.js

@@ -0,0 +1,9 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    min-width: 160px;\n  "])))
+  };
+});

package/es/plugins/codemirror-block/react/index.d.ts

@@ -0,0 +1 @@
+export { default as ReactCodemirrorPlugin } from './ReactCodemirrorNode';

package/es/plugins/codemirror-block/react/index.js

@@ -0,0 +1 @@
+export { default as ReactCodemirrorPlugin } from "./ReactCodemirrorNode";

package/es/plugins/codemirror-block/react/style.d.ts

@@ -0,0 +1 @@
+export declare const styles: string;

package/es/plugins/codemirror-block/react/style.js

@@ -0,0 +1,8 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
+  var css = _ref.css,
+    cssVar = _ref.cssVar;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    width: 100%;\n\n    background: ", ";\n\n    .cm-hidden-actions {\n      opacity: 0;\n      transition: opacity 0.2s ease-in-out;\n    }\n\n    .cm-language-select {\n      opacity: 0.5;\n      filter: grayscale(100%);\n      transition:\n        opacity,\n        grayscale 0.2s ease-in-out;\n    }\n\n    &.selected {\n      user-select: none;\n    }\n\n    &.selected::after {\n      pointer-events: none;\n      content: '';\n\n      position: absolute;\n      z-index: 10;\n      inset: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0.2;\n      background: ", ";\n\n      transition: all 0.3s;\n    }\n\n    .cm-container {\n      position: relative;\n      width: 100%;\n      border-block-start: 1px solid ", ";\n    }\n\n    .cm-container-collapsed {\n      overflow: hidden;\n      height: 0;\n      border-block-start: none;\n    }\n\n    .cm-textarea {\n      height: 44px;\n      opacity: 0;\n    }\n\n    &:hover {\n      .cm-hidden-actions {\n        opacity: 1;\n      }\n\n      .cm-language-select {\n        opacity: 1;\n        filter: grayscale(0);\n      }\n    }\n  "])), cssVar.colorFillQuaternary, cssVar.yellow, cssVar.colorFillQuaternary);
+});

package/es/plugins/codemirror-block/react/theme.d.ts

@@ -0,0 +1,133 @@
+/**
+ * Lobe 主题配置
+ * 基于 shiki 主题配置，使用 antd-style 的 cssVar 进行颜色映射
+ */
+export declare const lobeTheme: {
+    '&': {
+        '& .cm-cursor': {
+            'border-left-color': string;
+        };
+        '& .cm-cursor.cm-cursor-primary': {
+            'border-inline-start': string;
+        };
+        '& .cm-gutters': {
+            'background-color': string;
+            border: string;
+            color: string;
+            cursor: string;
+        };
+        '& .cm-line': {
+            '& .cm-atom': {
+                color: string;
+            };
+            '& .cm-attribute': {
+                color: string;
+            };
+            '& .cm-builtin': {
+                color: string;
+                fontStyle: string;
+            };
+            '& .cm-comment': {
+                color: string;
+                fontStyle: string;
+            };
+            '& .cm-foldPlaceholder': {
+                background: string;
+                border: string;
+                color: string;
+                display: string;
+                height: string;
+                padding: number;
+                'vertical-align': string;
+                width: string;
+            };
+            '& .cm-function': {
+                color: string;
+            };
+            '& .cm-header': {
+                color: string;
+            };
+            '& .cm-keyword': {
+                color: string;
+            };
+            '& .cm-meta': {
+                color: string;
+            };
+            '& .cm-modifier': {
+                color: string;
+            };
+            '& .cm-number': {
+                color: string;
+            };
+            '& .cm-operator': {
+                color: string;
+            };
+            '& .cm-property': {
+                color: string;
+            };
+            '& .cm-punctuation': {
+                color: string;
+            };
+            '& .cm-qualifier': {
+                color: string;
+            };
+            '& .cm-string': {
+                color: string;
+            };
+            '& .cm-string-2': {
+                color: string;
+            };
+            '& .cm-tag': {
+                color: string;
+            };
+            '& .cm-tag.cm-bracket': {
+                color: string;
+            };
+            '& .cm-type': {
+                color: string;
+            };
+            '& .cm-variable': {
+                color: string;
+            };
+            '& .cm-variable-2': {
+                color: string;
+            };
+            '& .cm-variable-3': {
+                color: string;
+            };
+            '& .cm-variable.cm-callee': {
+                color: string;
+            };
+            '& .cm-variable.cm-def': {
+                color: string;
+            };
+            color: string;
+            'padding-inline': string;
+        };
+    };
+    '& .cm-selectionBackground': {
+        background: string;
+    };
+    '& .cm-selectionMatch': {
+        background: string;
+    };
+    '&.cm-editor': {
+        background: string;
+        cursor: string;
+        'padding-block': string;
+        width: string;
+    };
+    '&.cm-editor span': {
+        'font-family': string;
+        'font-size': string;
+    };
+    '&.cm-editor.cm-focused .cm-selectionBackground': {
+        background: string;
+    };
+    '&.cm-editor.cm-focused .cm-selectionLineGutter': {
+        color: string;
+    };
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+        background: string;
+    };
+};

package/es/plugins/codemirror-block/react/theme.js

@@ -0,0 +1,158 @@
+import { cssVar } from 'antd-style';
+
+/**
+ * Lobe 主题配置
+ * 基于 shiki 主题配置，使用 antd-style 的 cssVar 进行颜色映射
+ */
+export var lobeTheme = {
+  '&': {
+    '& .cm-cursor': {
+      'border-left-color': cssVar.colorPrimary
+    },
+    '& .cm-cursor.cm-cursor-primary': {
+      'border-inline-start': "2px solid ".concat(cssVar.colorPrimary, " !important")
+    },
+    '& .cm-gutters': {
+      'background-color': cssVar.colorBgContainer,
+      'border': 'none',
+      'color': cssVar.colorTextQuaternary,
+      'cursor': 'default'
+    },
+    '& .cm-line': {
+      // 布尔值 - constant.language.boolean
+      '& .cm-atom': {
+        color: cssVar.purple10
+      },
+      // 属性名 - entity.other.attribute-name
+      '& .cm-attribute': {
+        color: cssVar.purple10
+      },
+      // 内置 - support.module, support.node
+      '& .cm-builtin': {
+        color: cssVar.volcano10,
+        fontStyle: 'italic'
+      },
+      // 注释 - comment
+      '& .cm-comment': {
+        color: cssVar.colorTextQuaternary,
+        fontStyle: 'italic'
+      },
+      // 折叠占位符
+      '& .cm-foldPlaceholder': {
+        'background': "url(\"data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='%23E8E8E8' width='16' height='16' rx='2'/%3E%3Cpath d='M2.75 7.984a.875.875 0 1 0 1.75 0 .875.875 0 0 0-1.75 0Zm4.375 0a.875.875 0 1 0 1.75 0 .875.875 0 0 0-1.75 0Zm4.375 0a.875.875 0 1 0 1.75 0 .875.875 0 0 0-1.75 0Z' fill='%232A3238'/%3E%3C/g%3E%3C/svg%3E\") no-repeat",
+        'border': 'none',
+        'color': 'transparent',
+        'display': 'inline-block',
+        'height': '16px',
+        'padding': 0,
+        'vertical-align': 'middle',
+        'width': '16px'
+      },
+      // 函数名 - entity.name.function, support.function
+      '& .cm-function': {
+        color: cssVar.geekblue10
+      },
+      // 标题 - markup.heading
+      '& .cm-header': {
+        color: cssVar.colorInfo
+      },
+      // 关键字 - keyword, modifier, storage.type, storage.modifier, storage.control
+      '& .cm-keyword': {
+        color: cssVar.colorInfo
+      },
+      // 元数据 - meta
+      '& .cm-meta': {
+        color: cssVar.colorText
+      },
+      '& .cm-modifier': {
+        color: cssVar.colorInfo
+      },
+      // 数字 - constant.numeric
+      '& .cm-number': {
+        color: cssVar.volcano10
+      },
+      // 操作符 - punctuation, operator
+      '& .cm-operator': {
+        color: cssVar.colorInfo
+      },
+      // 属性 - variable.object.property
+      '& .cm-property': {
+        color: cssVar.volcano10
+      },
+      '& .cm-punctuation': {
+        color: cssVar.colorInfo
+      },
+      // 限定符 - support.type.property-name
+      '& .cm-qualifier': {
+        color: cssVar.colorWarning
+      },
+      // 字符串 - string
+      '& .cm-string': {
+        color: cssVar.colorSuccess
+      },
+      '& .cm-string-2': {
+        color: cssVar.colorSuccess
+      },
+      // 标签 - entity.name.tag, meta.tag
+      '& .cm-tag': {
+        color: cssVar.volcano10
+      },
+      '& .cm-tag.cm-bracket': {
+        color: cssVar.colorInfo
+      },
+      // 类型 - entity.name.type, support.type, storage.type
+      '& .cm-type': {
+        color: cssVar.colorWarning
+      },
+      // 变量 - variable, variable.parameter
+      '& .cm-variable': {
+        color: cssVar.colorText
+      },
+      '& .cm-variable-2': {
+        color: cssVar.geekblue10
+      },
+      '& .cm-variable-3': {
+        color: cssVar.colorWarning
+      },
+      '& .cm-variable.cm-callee': {
+        color: cssVar.geekblue10
+      },
+      '& .cm-variable.cm-def': {
+        color: cssVar.colorText
+      },
+      // 默认文本颜色
+      'color': cssVar.colorText,
+      'padding-inline': '12px'
+    }
+  },
+  // 选中背景
+  '& .cm-selectionBackground': {
+    background: 'transparent'
+  },
+  // 选中匹配
+  '& .cm-selectionMatch': {
+    background: "".concat(cssVar.colorFillSecondary, " !important")
+  },
+  // 编辑器背景
+  '&.cm-editor': {
+    'background': 'transparent',
+    'cursor': 'text',
+    'padding-block': '12px',
+    'width': '100%'
+  },
+  '&.cm-editor span': {
+    'font-family': cssVar.fontFamilyCode,
+    'font-size': 'calc(var(--lobe-markdown-font-size) * 0.8)'
+  },
+  // 聚焦时的选中背景
+  '&.cm-editor.cm-focused .cm-selectionBackground': {
+    background: cssVar.colorPrimaryBg
+  },
+  // 聚焦时的行号颜色
+  '&.cm-editor.cm-focused .cm-selectionLineGutter': {
+    color: cssVar.colorText
+  },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
+    background: cssVar.yellow
+  }
+};

package/es/plugins/codemirror-block/react/type.d.ts

@@ -0,0 +1,3 @@
+export interface ReactCodemirrorPluginProps {
+    className?: string;
+}

package/es/plugins/codemirror-block/react/type.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "3.2.2",
+  "version": "3.3.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",
@@ -41,6 +41,7 @@
     "@lexical/selection": "^0.39.0",
     "@lexical/table": "^0.39.0",
     "@lexical/utils": "^0.39.0",
+    "@lobehub/codemirror": "^1.0.0",
     "@shikijs/core": "^3.20.0",
     "@shikijs/engine-javascript": "^3.20.0",
     "@xmldom/xmldom": "^0.8.11",
@@ -69,5 +70,6 @@
     "motion": "^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
-  }
+  },
+  "packageManager": "pnpm@10.20.0"
 }