perf: 编辑器: 扩展HTML样式

src/components/LexicalEditor/Index.jsx

@@ -30,6 +30,7 @@ import TabFocusPlugin from './plugins/TabFocusPlugin';
 import EditorRefPlugin from './plugins/EditorRefPlugin'
 import ImagesPlugin from './plugins/ImagesPlugin';
 import InlineImagePlugin from './plugins/InlineImagePlugin';
+import DragDropPaste from './plugins/DragDropPastePlugin';
 import { ImageNode } from './nodes/ImageNode';
 import {InlineImageNode} from './nodes/InlineImageNode/InlineImageNode';
 import { ExtendedTextNode } from './nodes/ExtendedTextNode';
@@ -37,8 +38,11 @@ import { ExtendedTextNode } from './nodes/ExtendedTextNode';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 // import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 
-import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
-import TableCellResizer from './plugins/TableCellResizer';
+// import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
+// import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
+// import TableCellResizer from './plugins/TableCellResizer';
+// import TableHoverActionsPlugin from './plugins/TableHoverActionsPlugin';
+
 import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 
 
@@ -46,6 +50,7 @@ import { TextNode, $getRoot, $getSelection, $createParagraphNode } from 'lexical
 import { $generateHtmlFromNodes, $generateNodesFromDOM, } from '@lexical/html';
 // import {  } from '@lexical/clipboard';
 import { isEmpty } from '@/utils/commons';
+import {useSettings} from './context/SettingsContext';
 
 import './styles.css';
 
@@ -147,6 +152,22 @@ function MyOnChangePlugin({ ignoreHistoryMergeTagChange = true, ignoreSelectionC
   return null;
 }
 export default function Editor({ isRichText, isDebug, editorRef, onChange, defaultValue, stateJson, ...props }) {
+  const {
+    settings: {
+      isCollab,
+      isAutocomplete,
+      isMaxLength,
+      isCharLimit,
+      isCharLimitUtf8,
+      // isRichText,
+      showTreeView,
+      showTableOfContents,
+      shouldUseLexicalContextMenu,
+      shouldPreserveNewLinesInMarkdown,
+      tableCellMerge,
+      tableCellBackgroundColor,
+    },
+  } = useSettings();
   return (
     <LexicalComposer initialConfig={editorConfig}>
       <div className='editor-container'>
@@ -161,6 +182,7 @@ export default function Editor({ isRichText, isDebug, editorRef, onChange, defau
           <HistoryPlugin />
           {(import.meta.env.DEV && isDebug) && <TreeViewPlugin />}
           <LexicalDefaultValuePlugin value={defaultValue} />
+          <DragDropPaste />
           <AutoFocusPlugin />
           <CodeHighlightPlugin />
           <ListPlugin />
@@ -168,8 +190,13 @@ export default function Editor({ isRichText, isDebug, editorRef, onChange, defau
           <AutoLinkPlugin />
           <LinkPlugin />
           <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
-          <TablePlugin />
+          {/* <TablePlugin hasCellMerge={tableCellMerge} hasCellBackgroundColor={tableCellBackgroundColor} /> */}
           {/* <TableCellResizer /> */}
+          {/* <TableHoverActionsPlugin /> */}
+          {/* <TableCellActionMenuPlugin
+            // anchorElem={floatingAnchorElem}
+            cellMerge={true}
+          /> */}
           <TabFocusPlugin />
           <TabIndentationPlugin />
           <HorizontalRulePlugin />