@blocklet/editor 2.3.48 → 2.3.49

package/lib/main/editor.js

@@ -23,7 +23,6 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
 import { useEffect, useState } from 'react';
-import { Box, styled, alpha } from '@mui/material';
 import { useSettings } from './context/SettingsContext';
 import { useSharedHistoryContext } from './context/SharedHistoryContext';
 import useHasNodes from './hooks/useHasNodes';
@@ -80,6 +79,7 @@ import { useResponsiveTable } from './hooks/useResponsiveTable';
 import { useTranslationListener } from './hooks/useTranslationListener';
 import { PagesKitComponentPlugin } from '../ext/PagesKitComponent/PagesKitComponentPlugin';
 import { EditorHolderPlugin } from '../ext/EditorHolderPlugin';
+import { StyledEditorContent } from './styled-editor-content';
 export default function Editor({ children, prepend, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
@@ -109,52 +109,7 @@ export default function Editor({ children, prepend, placeholder, onChange, autoF
         }
     }, [hasNodes('image'), hasUploader]);
     if (minimalMode) {
-        return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
+        return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), _jsx(PasteSlackImagePlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(AiImagePlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
+    return (_jsxs(_Fragment, { children: [prepend, isRichText && editable && showToolbar && _jsx(ToolbarPlugin, {}), isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), !!editable && _jsx(ComponentPickerPlugin, {}), !!editable && _jsx(EmojiPickerPlugin, {}), hasNodes('link') && _jsx(AutoEmbedPlugin, {}), !!editable && _jsx(MentionsPlugin, {}), hasNodes('emoji') && _jsx(EmojisPlugin, {}), hasNodes('hashtag') && _jsx(HashtagPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), isRichText ? (_jsxs(_Fragment, { children: [_jsx(PasteSlackImagePlugin, {}), _jsx(HistoryPlugin, { externalHistoryState: historyState }), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('table', 'tablerow', 'tablecell') && editable && (_jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true, hasHorizontalScroll: true })), hasNodes('table', 'tablerow', 'tablecell') && _jsx(TableCellResizer, {}), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('video') && _jsx(VideoPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), hasNodes('tweet') && _jsx(TwitterPlugin, {}), hasNodes('youtube') && _jsx(YouTubePlugin, {}), hasNodes('figma') && _jsx(FigmaPlugin, {}), _jsx(BilibiliPlugin, {}), _jsx(BlockletEmbedPlugin, {}), _jsx(PostLinkEmbedPlugin, {}), _jsx(BookmarkPlugin, {}), _jsx(AidePlugin, {}), editable && _jsx(CustomOnChangePlugin, { placeholder: placeholder }), editable && _jsx(TemplatePlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('pdf') && _jsx(PdfPlugin, {}), hasNodes('file') && _jsx(FilePlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), hasNodes('excalidraw') && _jsx(ExcalidrawPlugin, {}), hasNodes('alert') && _jsx(AlertPlugin, {}), hasNodes('pages-kit-component') && _jsx(PagesKitComponentPlugin, {}), _jsx(TabFocusPlugin, {}), hasNodes('collapsible-container', 'collapsible-content', 'collapsible-title') && _jsx(CollapsiblePlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: onChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), hasNodes('table') && _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {})] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, {}), placeholder: _jsx(Placeholder, { children: "placeholder" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), _jsx(MarkdownHeadTextPlugin, {}), _jsx(AiImagePlugin, {}), _jsx(EditorHolderPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), children] }));
 }
-const EditorContent = styled(Box) `
-  position: relative;
-  color: ${({ theme }) => alpha(theme.palette.text.primary, 0.8)};
-  .be-editable {
-    transition: padding-bottom 0.2s;
-    code {
-      white-space: pre-wrap;
-    }
-  }
-
-  &.editable {
-    > .be-editable {
-      padding: 8px 24px;
-    }
-  }
-
-  > .be-editable {
-    hr {
-      height: 0;
-      border: none;
-      border-top: 1px solid ${({ theme }) => theme.palette.divider};
-      margin: 1em 0;
-      cursor: pointer;
-    }
-
-    hr:after {
-      content: '';
-      display: block;
-      height: 2px;
-      background-color: #ccc;
-      line-height: 2px;
-    }
-
-    hr.selected {
-      outline: 2px solid rgb(60, 132, 244);
-      user-select: none;
-    }
-
-    // 增大最外层 list item 的 marginLeft, https://github.com/blocklet/discuss-kit/issues/2123
-    > ol > li,
-    > ul > li {
-      margin-left: 32px;
-    }
-  }
-`;

package/lib/main/index.css

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 .editor-dev-button {
   position: relative;
   display: block;

package/lib/main/markdown-editor/editor.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '@emotion/css';
-import styled from '@emotion/styled';
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
@@ -41,6 +40,7 @@ import { BlurTextPlugin } from '../../ext/BlurTextPlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 import { TRANSFORMERS, IMAGE } from './transformers';
 import { MediaUrlFixerPlugin } from './plugins/MediaUrlFixerPlugin';
+import { StyledEditorContent } from '../styled-editor-content';
 export default function Editor({ children, placeholder, onChange, autoFocus = true, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, mediaUrlPrefix, }) {
     const [editor] = useLexicalComposerContext();
     const [editable, setEditable] = useState(false);
@@ -73,47 +73,5 @@ export default function Editor({ children, placeholder, onChange, autoFocus = tr
             });
         }
     };
-    return (_jsxs(_Fragment, { children: [editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), _jsx(EditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: handleOnChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {}), mediaUrlPrefix && _jsx(MediaUrlFixerPlugin, { mediaUrlPrefix: mediaUrlPrefix, transformers: [IMAGE] }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), hasNodes('table', 'tablerow', 'tablecell') && editable && _jsx(TablePlugin, {}), children] }));
+    return (_jsxs(_Fragment, { children: [editable && showToolbar && _jsx(ToolbarPlugin, {}), hasNodes('image') && hasUploader && _jsx(DragDropPaste, {}), autoFocus && _jsx(AutoFocusPlugin, { defaultSelection: "rootEnd" }), _jsx(ClearEditorPlugin, {}), hasNodes('autolink') && _jsx(AutoLinkPlugin, {}), _jsx(StyledEditorContent, { ref: onRef, className: cx('be-content', editable && 'editable'), children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cx('be-editable', 'notranslate') }), placeholder: _jsx(Placeholder, { className: "be-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), _jsx(MarkdownShortcutPlugin, {}), _jsx(TabIndentationPlugin, {}), hasNodes('code', 'code-highlight') && _jsx(CodeHighlightPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListPlugin, {}), hasNodes('list', 'listitem') && _jsx(CheckListPlugin, {}), hasNodes('list', 'listitem') && _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), hasNodes('image') && hasUploader && _jsx(ImagesPlugin, {}), hasNodes('link') && _jsx(LinkPlugin, {}), !editable && _jsx(BlurTextPlugin, {}), hasNodes('link') && _jsx(ClickableLinkPlugin, {}), hasNodes('horizontalrule') && _jsx(HorizontalRulePlugin, {}), _jsx(TabFocusPlugin, {}), onChange && _jsx(OnChangePlugin, { onChange: handleOnChange }), floatingAnchorElem && editable && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), hasNodes('code') && _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), hasNodes('link') && _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })] })), enableHeadingsIdPlugin && _jsx(HeadingsIdPlugin, {}), mediaUrlPrefix && _jsx(MediaUrlFixerPlugin, { mediaUrlPrefix: mediaUrlPrefix, transformers: [IMAGE] }), _jsx(SelectBlockPlugin, {}), _jsx(RemoveListPlugin, {}), _jsx(MarkdownHeadTextPlugin, {}), editorRef && _jsx(EditorRefPlugin, { editorRef: editorRef }), onReady && _jsx(EditorReadyPlugin, { onReady: onReady }), hasNodes('table', 'tablerow', 'tablecell') && editable && _jsx(TablePlugin, {}), children] }));
 }
-const EditorContent = styled.div `
-  position: relative;
-  .be-editable {
-    code {
-      white-space: pre-wrap;
-    }
-  }
-
-  &.editable {
-    > .be-editable {
-      padding: 8px 24px;
-    }
-  }
-
-  > .be-editable {
-    hr {
-      padding: 2px 2px;
-      border: none;
-      margin: 1em 0;
-      cursor: pointer;
-    }
-
-    hr:after {
-      content: '';
-      display: block;
-      height: 2px;
-      background-color: #ccc;
-      line-height: 2px;
-    }
-
-    hr.selected {
-      outline: 2px solid rgb(60, 132, 244);
-      user-select: none;
-    }
-
-    // 增大最外层 list item 的 marginLeft, https://github.com/blocklet/discuss-kit/issues/2123
-    > ol > li,
-    > ul > li {
-      margin-left: 32px;
-    }
-  }
-`;

package/lib/main/plugins/TableActionMenuPlugin/index.js

@@ -8,8 +8,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Box } from '@mui/material';
 import useModal from '../../hooks/useModal';
-import ColorPicker from '../../ui/ColorPicker';
-import DropDown, { DropDownItem } from '../../ui/DropDown';
 function computeSelectionCount(selection) {
     const selectionShape = selection.getShape();
     return {
@@ -331,13 +329,7 @@ function TableActionMenu({ onClose, tableCellNode: _tableCellNode, setIsMenuOpen
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _jsxs("div", { className: "dropdown", ref: dropDownRef, onClick: (e) => {
             e.stopPropagation();
-        }, children: [mergeCellButton, _jsx("button", { type: "button", className: "item", onClick: () => showColorPickerModal('Cell background color', () => (_jsx(ColorPicker, { color: backgroundColor, onChange: handleCellBackgroundColor, buttonClassName: "" }))), "data-test-id": "table-background-color", children: _jsx("span", { className: "text", children: "Background color" }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleRowStriping(), "data-test-id": "table-row-striping", children: _jsx("span", { className: "text", children: "Toggle Row Striping" }) }), _jsxs(DropDown, { buttonLabel: "Vertical Align", buttonClassName: "item", buttonAriaLabel: "Formatting options for vertical alignment", children: [_jsx(DropDownItem, { onClick: () => {
-                            formatVerticalAlign('top');
-                        }, className: "item wide", children: _jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon vertical-top" }), _jsx("span", { className: "text", children: "Top Align" })] }) }), _jsx(DropDownItem, { onClick: () => {
-                            formatVerticalAlign('middle');
-                        }, className: "item wide", children: _jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon vertical-middle" }), _jsx("span", { className: "text", children: "Middle Align" })] }) }), _jsx(DropDownItem, { onClick: () => {
-                            formatVerticalAlign('bottom');
-                        }, className: "item wide", children: _jsxs("div", { className: "icon-text-container", children: [_jsx("i", { className: "icon vertical-bottom" }), _jsx("span", { className: "text", children: "Bottom Align" })] }) })] }), _jsx("button", { type: "button", className: "item", onClick: () => toggleFirstRowFreeze(), "data-test-id": "table-freeze-first-row", children: _jsx("span", { className: "text", children: "Toggle First Row Freeze" }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleFirstColumnFreeze(), "data-test-id": "table-freeze-first-column", children: _jsx("span", { className: "text", children: "Toggle First Column Freeze" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(false), "data-test-id": "table-insert-row-above", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " above"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(true), "data-test-id": "table-insert-row-below", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " below"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(false), "data-test-id": "table-insert-column-before", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " left"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(true), "data-test-id": "table-insert-column-after", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " right"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableColumnAtSelection(), "data-test-id": "table-delete-columns", children: _jsx("span", { className: "text", children: "Delete column" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableRowAtSelection(), "data-test-id": "table-delete-rows", children: _jsx("span", { className: "text", children: "Delete row" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableAtSelection(), "data-test-id": "table-delete", children: _jsx("span", { className: "text", children: "Delete table" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableRowIsHeader(), "data-test-id": "table-row-header", children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add', ' ', "row header"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableColumnIsHeader(), "data-test-id": "table-column-header", children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
+        }, children: [mergeCellButton, _jsx("button", { type: "button", className: "item", onClick: () => toggleRowStriping(), "data-test-id": "table-row-striping", children: _jsx("span", { className: "text", children: "Toggle Row Striping" }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleFirstRowFreeze(), "data-test-id": "table-freeze-first-row", children: _jsx("span", { className: "text", children: "Toggle First Row Freeze" }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleFirstColumnFreeze(), "data-test-id": "table-freeze-first-column", children: _jsx("span", { className: "text", children: "Toggle First Column Freeze" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(false), "data-test-id": "table-insert-row-above", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " above"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableRowAtSelection(true), "data-test-id": "table-insert-row-below", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.rows === 1 ? 'row' : `${selectionCounts.rows} rows`, " below"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(false), "data-test-id": "table-insert-column-before", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " left"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => insertTableColumnAtSelection(true), "data-test-id": "table-insert-column-after", children: _jsxs("span", { className: "text", children: ["Insert ", selectionCounts.columns === 1 ? 'column' : `${selectionCounts.columns} columns`, " right"] }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableColumnAtSelection(), "data-test-id": "table-delete-columns", children: _jsx("span", { className: "text", children: "Delete column" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableRowAtSelection(), "data-test-id": "table-delete-rows", children: _jsx("span", { className: "text", children: "Delete row" }) }), _jsx("button", { type: "button", className: "item", onClick: () => deleteTableAtSelection(), "data-test-id": "table-delete", children: _jsx("span", { className: "text", children: "Delete table" }) }), _jsx("hr", {}), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableRowIsHeader(), "data-test-id": "table-row-header", children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? 'Remove' : 'Add', ' ', "row header"] }) }), _jsx("button", { type: "button", className: "item", onClick: () => toggleTableColumnIsHeader(), "data-test-id": "table-column-header", children: _jsxs("span", { className: "text", children: [(tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN
                             ? 'Remove'
                             : 'Add', ' ', "column header"] }) })] }), document.body);
 }

package/lib/main/styled-editor-content.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+export declare const StyledEditorContent: import("react").ForwardRefExoticComponent<Omit<BoxProps<"div", {}>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/main/styled-editor-content.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, alpha, styled, GlobalStyles, useTheme } from '@mui/material';
+import { forwardRef } from 'react';
+const StyledEditorWrapper = styled(Box) `
+  position: relative;
+  color: ${({ theme }) => alpha(theme.palette.text.primary, 0.8)};
+  .be-editable {
+    transition: padding-bottom 0.2s;
+    code {
+      white-space: pre-wrap;
+    }
+  }
+
+  &.editable {
+    > .be-editable {
+      padding: 8px 24px;
+    }
+  }
+
+  > .be-editable {
+    hr {
+      height: 0;
+      border: none;
+      border-top: 1px solid ${({ theme }) => theme.palette.divider};
+      margin: 1em 0;
+      cursor: pointer;
+    }
+
+    hr:after {
+      content: '';
+      display: block;
+      height: 2px;
+      background-color: #ccc;
+      line-height: 2px;
+    }
+
+    hr.selected {
+      outline: 2px solid rgb(60, 132, 244);
+      user-select: none;
+    }
+
+    // 增大最外层 list item 的 marginLeft, https://github.com/blocklet/discuss-kit/issues/2123
+    > ol > li,
+    > ul > li {
+      margin-left: 32px;
+    }
+  }
+
+  /* fix: 自定义样式引起的 cell 高度偏大的问题 */
+  .PlaygroundEditorTheme__tableCell p {
+    margin: 0;
+  }
+  table th,
+  .PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
+    background-color: ${({ theme }) => theme.palette.grey[100]} !important;
+  }
+`;
+export const StyledEditorContent = forwardRef(({ children, ...rest }, ref) => {
+    return (_jsxs(StyledEditorWrapper, { ref: ref, ...rest, children: [_jsx(EditorGlobalStyle, {}), children] }));
+});
+function EditorGlobalStyle() {
+    const theme = useTheme();
+    return (_jsx(GlobalStyles, { styles: {
+            '.dropdown': {
+                border: `1px solid ${theme.palette.divider}`,
+                backgroundColor: theme.palette.background.default,
+                '.item': {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    /* fix: safari dropdown menu item 右侧溢出问题 */
+                    width: '-webkit-fill-available',
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.default,
+                    '.iconify': {
+                        flexShrink: 0,
+                        fontSize: '1.4em',
+                    },
+                    '&:hover': {
+                        backgroundColor: theme.palette.action.hover,
+                    },
+                },
+                hr: {
+                    height: 0,
+                    border: 'none',
+                    borderTop: `1px solid ${theme.palette.divider}`,
+                },
+            },
+        } }));
+}

package/lib/main/themes/customTheme.js

@@ -12,7 +12,7 @@ const createCustomTheme = (theme) => {
     const paragraph = css(
     // use default theme's paragraph style
     defaultTheme.paragraph, 
-    // p wrapper table style
+    // 兼容旧 table 水平滚动条问题 (与 useResponsiveTable 配合使用)
     `
       &:has(table) {
         overflow-x: auto;
@@ -289,11 +289,6 @@ const createCustomTheme = (theme) => {
         },
         image: `${defaultTheme.image} ${image}`,
         code,
-        ...(palette.mode === 'dark' && {
-            tableCellHeader: css(defaultTheme.tableCellHeader, `
-          background-color: ${palette.grey[100]};
-        `),
-        }),
     };
     return customTheme;
 };

package/lib/main/themes/defaultTheme.js

@@ -6,6 +6,7 @@
  *
  */
 import { css } from '@emotion/css';
+import { tableClasses } from './table';
 const ltr = css `
   text-align: left;
 `;
@@ -139,174 +140,6 @@ const code = css `
     min-width: 25px;
   }
 `;
-const table = css `
-  border-collapse: collapse;
-  border-spacing: 0;
-  table-layout: fixed;
-  width: fit-content;
-
-  p {
-    margin: 0;
-  }
-`;
-const tableSelection = css `
-  *::selection {
-    background-color: transparent;
-  }
-`;
-const tableSelected = css `
-  outline: 2px solid rgb(60, 132, 244);
-`;
-const tableScrollableWrapper = css ``;
-const tableCell = css `
-  border: 1px solid #bbb;
-  min-width: 75px;
-  vertical-align: top;
-  text-align: start;
-  padding: 6px 8px;
-  position: relative;
-  outline: none;
-`;
-const tableCellSortedIndicator = css `
-  display: block;
-  opacity: 0.5;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background-color: #999;
-`;
-const tableCellResizer = css `
-  position: absolute;
-  right: -4px;
-  height: 100%;
-  width: 8px;
-  cursor: ew-resize;
-  z-index: 10;
-  top: 0;
-`;
-const tableCellHeader = css `
-  background-color: #f2f3f5;
-  text-align: start;
-`;
-const tableCellSelected = css `
-  background-color: #c9dbf0;
-`;
-const tableCellPrimarySelected = css `
-  border: 2px solid rgb(60, 132, 244);
-  display: block;
-  height: calc(100% - 2px);
-  position: absolute;
-  width: calc(100% - 2px);
-  left: -1px;
-  top: -1px;
-  z-index: 2;
-`;
-const tableCellEditing = css `
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-  border-radius: 3px;
-`;
-const tableAddColumns = css `
-  position: absolute;
-  top: 0;
-  width: 20px;
-  background-color: #eee;
-  height: 100%;
-  right: -25px;
-  animation: table-controls 0.2s ease;
-  border: 0;
-  cursor: pointer;
-
-  @keyframes table-controls {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  &:after {
-    background-image: url(../images/icons/plus.svg);
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    display: block;
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.4;
-  }
-
-  &:hover {
-    background-color: #c9dbf0;
-  }
-`;
-const tableAddRows = css `
-  position: absolute;
-  bottom: -25px;
-  width: calc(100% - 25px);
-  background-color: #eee;
-  height: 20px;
-  left: 0;
-  animation: table-controls 0.2s ease;
-  border: 0;
-  cursor: pointer;
-
-  &:after {
-    background-image: url(../images/icons/plus.svg);
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    display: block;
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.4;
-  }
-
-  :hover {
-    background-color: #c9dbf0;
-  }
-`;
-const tableResizeRuler = css `
-  display: block;
-  position: absolute;
-  width: 1px;
-  background-color: rgb(60, 132, 244);
-  height: 100%;
-  top: 0;
-`;
-const tableCellActionButtonContainer = css `
-  display: block;
-  right: 5px;
-  top: 6px;
-  position: absolute;
-  z-index: 4;
-  width: 20px;
-  height: 20px;
-`;
-const tableCellActionButton = css `
-  background-color: #eee;
-  display: block;
-  border: 0;
-  border-radius: 20px;
-  width: 20px;
-  height: 20px;
-  color: #222;
-  cursor: pointer;
-
-  :hover {
-    background-color: #ddd;
-  }
-`;
 const characterLimit = css `
   display: inline;
   background-color: #ffbbbb !important;
@@ -662,22 +495,7 @@ const defaultTheme = {
     hashtag,
     link,
     code,
-    table,
-    tableSelection,
-    tableAddColumns,
-    tableAddRows,
-    tableCell,
-    tableCellActionButton,
-    tableCellActionButtonContainer,
-    tableCellEditing,
-    tableCellHeader,
-    tableCellPrimarySelected,
-    tableCellResizer,
-    tableCellSelected,
-    tableCellSortedIndicator,
-    tableResizeRuler,
-    tableSelected,
-    tableScrollableWrapper,
+    ...tableClasses,
     characterLimit,
     list: {
         listitem: listItem,

package/lib/main/themes/table/index.d.ts

@@ -0,0 +1,3 @@
+import { EditorThemeClasses } from 'lexical';
+import './table.css';
+export declare const tableClasses: EditorThemeClasses;

package/lib/main/themes/table/index.js

@@ -0,0 +1,20 @@
+import './table.css';
+export const tableClasses = {
+    table: 'PlaygroundEditorTheme__table',
+    tableAddColumns: 'PlaygroundEditorTheme__tableAddColumns',
+    tableAddRows: 'PlaygroundEditorTheme__tableAddRows',
+    center: 'PlaygroundEditorTheme__tableAlignmentCenter',
+    right: 'PlaygroundEditorTheme__tableAlignmentRight',
+    tableCell: 'PlaygroundEditorTheme__tableCell',
+    tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',
+    tableCellActionButtonContainer: 'PlaygroundEditorTheme__tableCellActionButtonContainer',
+    tableCellHeader: 'PlaygroundEditorTheme__tableCellHeader',
+    tableCellResizer: 'PlaygroundEditorTheme__tableCellResizer',
+    tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
+    tableFrozenColumn: 'PlaygroundEditorTheme__tableFrozenColumn',
+    tableFrozenRow: 'PlaygroundEditorTheme__tableFrozenRow',
+    tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
+    tableScrollableWrapper: 'PlaygroundEditorTheme__tableScrollableWrapper',
+    tableSelected: 'PlaygroundEditorTheme__tableSelected',
+    tableSelection: 'PlaygroundEditorTheme__tableSelection',
+};

package/lib/main/themes/table/table.css

@@ -0,0 +1,214 @@
+.PlaygroundEditorTheme__tableScrollableWrapper {
+  overflow-x: auto;
+  margin: 0px 25px 30px 0px;
+}
+.PlaygroundEditorTheme__tableScrollableWrapper > .PlaygroundEditorTheme__table {
+  /* Remove the table's vertical margin and put it on the wrapper */
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.PlaygroundEditorTheme__tableAlignmentCenter {
+  margin-left: auto;
+  margin-right: auto;
+}
+.PlaygroundEditorTheme__tableAlignmentRight {
+  margin-left: auto;
+}
+.PlaygroundEditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: fit-content;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+.PlaygroundEditorTheme__tableScrollableWrapper.PlaygroundEditorTheme__tableFrozenRow {
+  /* position:sticky needs overflow:clip or visible
+     https://github.com/w3c/csswg-drafts/issues/865#issuecomment-350585274 */
+  overflow-x: clip;
+}
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td {
+  overflow: clip;
+  background-color: #ffffff;
+  position: sticky;
+  z-index: 2;
+  top: 44px;
+}
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th {
+  overflow: clip;
+  background-color: #f2f3f5;
+  position: sticky;
+  z-index: 2;
+  top: 44px;
+}
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th:after,
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-bottom: 1px solid #bbb;
+}
+.PlaygroundEditorTheme__tableFrozenColumn tr > td:first-child {
+  background-color: #ffffff;
+  position: sticky;
+  z-index: 2;
+  left: 0;
+}
+.PlaygroundEditorTheme__tableFrozenColumn tr > th:first-child {
+  background-color: #f2f3f5;
+  position: sticky;
+  z-index: 2;
+  left: 0;
+}
+.PlaygroundEditorTheme__tableFrozenColumn tr > :first-child::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  border-right: 1px solid #bbb;
+}
+.PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
+  background-color: #f2f5fb;
+}
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
+.PlaygroundEditorTheme__tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__tableCell {
+  border: 1px solid #bbb;
+  width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+  overflow: auto;
+}
+/*
+  A firefox workaround to allow scrolling of overflowing table cell
+  ref: https://bugzilla.mozilla.org/show_bug.cgi?id=1904159
+*/
+.PlaygroundEditorTheme__tableCell > * {
+  overflow: inherit;
+}
+.PlaygroundEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+.PlaygroundEditorTheme__tableCellSelected {
+  caret-color: transparent;
+}
+.PlaygroundEditorTheme__tableCellSelected::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: highlight;
+  mix-blend-mode: multiply;
+  content: '';
+  pointer-events: none;
+}
+.PlaygroundEditorTheme__tableAddColumns {
+  position: absolute;
+  background-color: #eee;
+  height: 100%;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddColumns:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddColumns:hover,
+.PlaygroundEditorTheme__tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableAddRows {
+  position: absolute;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddRows:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PlaygroundEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.PlaygroundEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}

package/lib/main/ui/DropDown.js

@@ -69,27 +69,7 @@ function DropDownItems({ children, dropDownRef, onClose, }) {
             highlightedItem.current.focus();
         }
     }, [items, highlightedItem]);
-    return (_jsx(DropDownContext.Provider, { value: contextValue, children: _jsx(Box, { className: "dropdown", ref: dropDownRef, onKeyDown: handleKeyDown, sx: {
-                border: 1,
-                borderColor: 'divider',
-                bgcolor: 'background.default',
-                '.item': {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    /* fix: safari dropdown menu item 右侧溢出问题 */
-                    width: '-webkit-fill-available',
-                    color: 'text.primary',
-                    bgcolor: 'background.default',
-                    '.iconify': {
-                        flexShrink: 0,
-                        fontSize: '1.4em',
-                    },
-                    '&:hover': {
-                        bgcolor: 'action.hover',
-                    },
-                },
-            }, children: children }) }));
+    return (_jsx(DropDownContext.Provider, { value: contextValue, children: _jsx(Box, { className: "dropdown", ref: dropDownRef, onKeyDown: handleKeyDown, children: children }) }));
 }
 export default function DropDown({ disabled = false, buttonLabel, buttonAriaLabel, buttonClassName, buttonIconClassName, buttonIconData, children, stopCloseOnClickSelf, }) {
     const dropDownRef = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.3.48",
+  "version": "2.3.49",
   "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
@@ -68,7 +68,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "^2.3.48"
+    "@blocklet/pdf": "^2.3.49"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",