feat: 优化Markdown编辑器的元素样式，增强复制功能的错误处理

ant-design · Feb 18, 2025 · e515a02 · e515a02 · vercel · Feb 18, 2025
1 parent 96848bc
commit e515a02
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/src/MarkdownEditor/editor/Editor.tsx b/src/MarkdownEditor/editor/Editor.tsx
@@ -9,6 +9,7 @@ import {
   Editor,
   Element,
   Node,
+  Path,
   Range,
   Transforms,
 } from 'slate';
@@ -315,6 +316,11 @@ export const MEditor = observer(
               }
               const selection =
                 markdownEditorRef.current?.selection?.focus?.path;
+              const node = Node.get(
+                markdownEditorRef.current,
+                Path.parent(selection!)!,
+              );
+
               const at = selection
                 ? EditorUtils.findNext(markdownEditorRef.current, selection)!
                 : undefined;
@@ -326,9 +332,12 @@ export const MEditor = observer(
                   EditorUtils.createMediaNode(u, 'image'),
                   {
                     at: [
-                      at
-                        ? at[0]
-                        : markdownEditorRef.current.children.length - 1,
+                      ...(node.type === 'table-cell' ||
+                      node.type === 'column-cell'
+                        ? selection!
+                        : at
+                          ? at
+                          : [markdownEditorRef.current.children.length - 1]),
                     ],
                   },
                 );

diff --git a/src/MarkdownEditor/editor/elements/card/index.tsx b/src/MarkdownEditor/editor/elements/card/index.tsx
@@ -10,7 +10,7 @@ export const WarpCard = observer((props: RenderElementProps) => {
         data-be={'card'}
         style={{
           display: 'flex',
-          gap: 1,
+          gap: 4,
           maxWidth: '100%',
         }}
       >

diff --git a/src/MarkdownEditor/editor/elements/index.tsx b/src/MarkdownEditor/editor/elements/index.tsx
@@ -109,8 +109,10 @@ export const MElement = (
           style={{
             minWidth: 4,
             height: '100%',
+            fontWeight: 800,
             position: 'relative',
             zIndex: 99,
+            fontSize: '2em',
             display: props.readonly ? 'none' : 'block',
           }}
           data-be={'card-before'}
@@ -128,6 +130,8 @@ export const MElement = (
             alignSelf: 'end',
             position: 'relative',
             zIndex: 99,
+
+            fontSize: '2em',
             display: props.readonly ? 'none' : 'block',
           }}
           data-be={'card-after'}

diff --git a/src/MarkdownEditor/editor/tools/ToolBar/ReadonlyBaseBar.tsx b/src/MarkdownEditor/editor/tools/ToolBar/ReadonlyBaseBar.tsx
@@ -166,8 +166,10 @@ export const ReadonlyBaseBar = observer(
             for (const str of texts) {
               title += str;
             }
-            navigator.clipboard.writeText(title);
-            message.success('Copy Success');
+            try {
+              navigator.clipboard.writeText(title);
+              message.success('Copy Success');
+            } catch (error) {}
           }}
         >
           <span>

diff --git a/src/MarkdownEditor/editor/utils/keyboard.ts b/src/MarkdownEditor/editor/utils/keyboard.ts
@@ -798,15 +798,20 @@ export const useSystemKeyboard = (
           const url = `media://file?url=${readlUrl}&height=${
             node[0].height || ''
           }`;
-          navigator.clipboard.writeText(url);
+          try {
+            navigator.clipboard.writeText(url);
+          } catch (error) {}
           if (isHotkey('mod+x', e)) {
             Transforms.delete(store?.editor, { at: node[1] });
             ReactEditor.focus(store?.editor);
           }
         }
         if (node[0].type === 'attach') {
           const url = `attach://file?size=${node[0].size}&name=${node[0].name}&url=${node[0]?.url}`;
-          navigator.clipboard.writeText(url);
+          try {
+            navigator.clipboard.writeText(url);
+          } catch (error) {}
+
           if (isHotkey('mod+x', e)) {
             Transforms.delete(store?.editor, { at: node[1] });
             ReactEditor.focus(store?.editor);