调整表格组件样式，修复单元格过渡效果及边距，优化表格边框样式

package.json

@@ -1,9 +1,10 @@
 {
   "name": "@ant-design/md-editor",
-  "version": "1.13.15",
+  "version": "1.14.5",
   "description": "类语雀的编辑器，支持 markdown 渲染和编辑",
   "repository": "[email protected]:ant-design/md-editor.git",
   "license": "MIT",
+  "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

src/MarkdownEditor/demos/preview.tsx

@@ -1,6 +1,6 @@
 import { MarkdownEditor } from '@ant-design/md-editor';
 import { Tooltip } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 const defaultValue = `<!-- {"MarkdownType": "report", "id": "8", "section_ids": " [15, 16, 17] "} -->
 
 # 腾讯研究报告
@@ -137,6 +137,7 @@ const defaultValue = `<!-- {"MarkdownType": "report", "id": "8", "section_ids":
 
 `;
 export default () => {
+  const editorRef = React.useRef<any>();
   const [list, setList] = useState([
     {
       selection: {
@@ -190,8 +191,13 @@ export default () => {
       commentType: 'comment',
     },
   ]);
+  useEffect(() => {
+    // @ts-ignore
+    window.editorRef = editorRef;
+  }, []);
   return (
     <MarkdownEditor
+      editorRef={editorRef}
       width={'100vw'}
       height={'100vh'}
       reportMode

src/MarkdownEditor/editor/Editor.tsx

@@ -63,6 +63,9 @@ export const MEditor = observer(
     const first = useRef(true);
     const highlight = useHighlight();
 
+    /**
+     * 初始化编辑器
+     */
     const initialNote = useCallback(async () => {
       if (instance) {
         nodeRef.current = instance;
@@ -631,6 +634,34 @@ export const MEditor = observer(
                   ...editorProps.style,
                 }
           }
+          onSelect={() => {
+            if (store.focus) {
+              store.editor.selection = getSelectionFromDomSelection(
+                store.editor,
+                window.getSelection()!,
+              );
+              store.setState((state) => {
+                state.preSelection = store.editor.selection;
+              });
+            }
+          }}
+          onCut={(event: React.ClipboardEvent<HTMLDivElement>) => {
+            if (isEventHandled(event)) {
+              return;
+            }
+            if (!hasEditableTarget(editor, event.target)) {
+              const domSelection = window.getSelection();
+              editor.selection = getSelectionFromDomSelection(
+                editor,
+                domSelection!,
+              );
+              if (editor.selection) {
+                Transforms.delete(editor, { at: editor.selection! });
+                return;
+              }
+            }
+            event.preventDefault();
+          }}
           onMouseDown={checkEnd}
           onFocus={onFocus}
           onBlur={onBlur}

src/MarkdownEditor/editor/elements/chart/ChartAttrToolBar/ChartAttrToolBarStyle.ts

@@ -20,7 +20,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
         alignItems: 'center',
         gap: '4px',
         padding: '4px',
-        borderRadius: '18px',
+        borderRadius: '12px',
         cursor: 'pointer',
         '&:hover': {
           backgroundColor: 'rgb(209 213 219 / 0.4)',

src/MarkdownEditor/editor/elements/chart/ChartRender.tsx

@@ -256,6 +256,8 @@ export const ChartRender: React.FC<{
   const chartDom = useMemo(() => {
     if (typeof window === 'undefined') return null;
     if (process.env.NODE_ENV === 'test') return null;
+    //@ts-ignore
+    if (window?.notRenderChart) return null;
     if (chartType === 'table') {
       return (
         <div

src/MarkdownEditor/editor/elements/list/style.ts

@@ -21,7 +21,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
       [`li:not(${token.componentCls}-task) > :first-child .ant-md-editor-drag-handle`]:
         {
           paddingLeft: '2px',
-          paddingRight: '18px',
+          paddingRight: '12px',
           left: '-44px !important',
         },
       [`li${token.componentCls}-task > :nth-child(2) .ant-md-editor-drag-handle`]:

src/MarkdownEditor/editor/elements/renderSideDiv.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   CSSProperties,
   SetStateAction,
   useEffect,
@@ -119,10 +119,9 @@ export function RowSideDiv(props: {
         style={{
           position: 'absolute',
           display: 'block',
-          borderBottom: '1px solid #DFDFDF',
           zIndex: 100,
-          width: '14px',
-          marginTop: '15.5px',
+          width: '0.9em',
+          marginTop: '16px',
           marginLeft: '-16px',
         }}
         contentEditable={false}
@@ -137,8 +136,14 @@ export function RowSideDiv(props: {
               position: 'relative',
               width: '14px',
               height:
-                tr?.getBoundingClientRect?.()?.height - 1 ||
-                tr?.clientHeight - 1,
+                index === 0
+                  ? tr?.getBoundingClientRect?.()?.height - 1.66 ||
+                    tr?.clientHeight - 2
+                  : tr?.getBoundingClientRect?.()?.height - 0.66 ||
+                    tr?.clientHeight - 1,
+              ...(index === rowDomArr.length - 1 && {
+                borderBottomLeftRadius: '0.5em',
+              }),
             }}
             getTableNode={getTableNode}
             activationArr={activationArr}
@@ -212,7 +217,7 @@ export function ColSideDiv(props: {
       style={{
         position: 'relative',
         display: 'flex',
-        height: '16px',
+        height: '1rem',
         zIndex: 100,
         transform: `translateX(${scrollOffset / 9999}px)`,
       }}
@@ -229,12 +234,12 @@ export function ColSideDiv(props: {
             divStyle={{
               position: 'absolute',
               top: 0,
-              left: leftPosition - 50.5,
+              left: leftPosition - 59,
               width: colRect?.width || td?.clientWidth,
-              height: '14.5px',
+              height: '0.9em',
               zIndex: 101,
               ...(index === colDomArr.length - 1 && {
-                borderTopRightRadius: '7.2px',
+                borderTopRightRadius: '0.5em',
               }),
             }}
             getTableNode={getTableNode}
@@ -292,4 +297,4 @@ export function IntersectionPointDiv(props: {
       }}
     ></div>
   );
-}
+}

src/MarkdownEditor/editor/elements/table.css

@@ -1,19 +1,19 @@
 .selected-cell-td {
   background-color: rgba(209, 236, 249) !important;
-  transition: all 0.3 cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
 }
 .intersection-point {
-  height: 14.4px;
-  width: 14.4px;
+  height: 0.9em;
+  width: 0.9em;
   border: 1px solid #dfdfdf;
   border-right: 0px;
   border-bottom: 0px;
   z-index: 20;
   position: absolute;
   margin-top: 0px;
   margin-left: -16px;
-  border-top-left-radius: 50%;
-  transition: all 0.3 cubic-bezier(0.23, 1, 0.32, 1);
+  border-top-left-radius: 0.5em;
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
   cursor: pointer;
   background-color: #e1f0ff;
   &.active {
@@ -34,7 +34,7 @@
   z-index: 20;
   cursor: pointer;
   background-color: #e1f0ff;
-  transition: all 0.3 cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
   &.full-active {
     background-color: #59a5f6;
   }
@@ -51,9 +51,45 @@
     background-color: #d8ecff;
   }
 }
-.ant-md-editor-content-table.show-bar th:first-child {
+.ant-md-editor-content-table .md-editor-table th {
+  border-top: 1px solid rgba(209, 213, 219, 0.8);
+}
+.ant-md-editor-content-table.show-bar .md-editor-table th:first-child {
   border-top-left-radius: 0;
 }
-.ant-md-editor-content-table.show-bar th:last-child {
+.ant-md-editor-content-table.show-bar .md-editor-table th:last-child {
   border-top-right-radius: 0;
-}
+}
+.ant-md-editor-content-table .md-editor-table th:first-child {
+  border-left: 1px solid rgba(209, 213, 219, 0.8);
+}
+.ant-md-editor-content-table .md-editor-table th:last-child {
+  border-right: 1px solid rgba(209, 213, 219, 0.8);
+}
+.ant-md-editor-content-table .md-editor-table td:first-child {
+  border-left: 1px solid rgba(209, 213, 219, 0.8);
+}
+.ant-md-editor-content-table .md-editor-table td:last-child {
+  border-right: 1px solid rgba(209, 213, 219, 0.8);
+}
+.ant-md-editor-content-table .md-editor-table tr:last-child td {
+  border-bottom: 1px solid rgba(209, 213, 219, 0.8);
+}
+.ant-md-editor-content-table .md-editor-table tr:last-child td:first-child {
+  border-bottom-left-radius: 0.5em;
+}
+.ant-md-editor-content-table.show-bar
+  .md-editor-table
+  tr:last-child
+  td:first-child {
+  border-bottom-left-radius: 0;
+}
+.ant-md-editor-content-table .md-editor-table tr:last-child td:last-child {
+  border-bottom-right-radius: 0.5em;
+}
+.ant-md-editor-content-table .md-editor-table th:first-child {
+  border-top-left-radius: 0.5em;
+}
+.ant-md-editor-content-table .md-editor-table th:last-child {
+  border-top-right-radius: 0.5em;
+}

src/MarkdownEditor/editor/elements/table.tsx

@@ -20,7 +20,6 @@ import { DragHandle } from '../tools/DragHandle';
 import { TableAttr } from '../tools/TableAttr';
 import { ColSideDiv, IntersectionPointDiv, RowSideDiv } from './renderSideDiv';
 import './table.css';
-
 const numberValidationRegex = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;
 
 /**
@@ -55,11 +54,7 @@ export function TableCell(props: RenderElementProps) {
     const minWidth = Math.min(domWidth, 200);
     const text = Node.string(props.element);
     return props.element.title ? (
-      <th
-        {...props.attributes}
-        style={{ textAlign: props.element.align }}
-        data-be={'th'}
-      >
+      <th {...props.attributes} data-be={'th'}>
         <div
           style={{
             minWidth: minWidth,
@@ -71,12 +66,7 @@ export function TableCell(props: RenderElementProps) {
         </div>
       </th>
     ) : (
-      <td
-        {...props.attributes}
-        style={{ textAlign: props.element.align }}
-        data-be={'td'}
-        className={classNames('group')}
-      >
+      <td {...props.attributes} data-be={'td'} className={classNames('group')}>
         {readonly && domWidth > 200 ? (
           <Popover
             title={
@@ -105,9 +95,6 @@ export function TableCell(props: RenderElementProps) {
                 WebkitBoxOrient: 'vertical',
                 WebkitLineClamp: 2,
                 maxHeight: 40,
-                textAlign: numberValidationRegex.test(text?.replaceAll(',', ''))
-                  ? 'right'
-                  : undefined,
               }}
             >
               {text}
@@ -434,8 +421,9 @@ export const Table = observer((props: RenderElementProps) => {
             />
           </div>
           <table
+            className="md-editor-table"
             style={{
-              borderCollapse: 'collapse',
+              borderCollapse: 'separate',
               borderSpacing: 0,
             }}
             ref={tableTargetRef}

src/MarkdownEditor/editor/store.ts

@@ -88,6 +88,7 @@ export class EditorStore {
   domRect: DOMRect | null = null;
   domRange: HTMLElement | null = null;
   container: null | HTMLDivElement = null;
+  preSelection: null | Selection = null;
   inputComposition = false;
   tableTask$ = new Subject<
     | 'insertRowBefore'

src/MarkdownEditor/editor/style.ts

@@ -49,7 +49,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
         marginBottom: '0.3em',
       },
       '.attach .file': {
-        borderRadius: '18px',
+        borderRadius: '12px',
         borderWidth: '1px',
         borderColor: 'rgb(229 231 235 / 1)',
         backgroundColor: 'rgb(249 250 251 / 1)',
@@ -206,7 +206,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
           width: '4px',
           position: 'absolute',
           display: 'block',
-          borderRadius: '18px',
+          borderRadius: '12px',
           backgroundColor: 'rgb(107 114 128 / 1)',
         },
       },
@@ -236,7 +236,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
         cursor: 'pointer',
       },
       '& &-high-text': {
-        borderRadius: '18px',
+        borderRadius: '12px',
       },
       '& &-m-html': {
         color: 'rgba(0,0,0,0.45)',

src/MarkdownEditor/editor/tools/ToolBar/FloatBar.tsx

@@ -75,6 +75,7 @@ export const FloatBar = observer((props: { readonly: boolean }) => {
         if (Editor.hasPath(store?.editor, end)) {
           Transforms.select(store?.editor, Editor.end(store?.editor, end));
         }
+        store.setFloatBarOpen(false);
       }
     };
     window.addEventListener('keydown', close);

src/MarkdownEditor/editor/tools/ToolBar/floatBarStyle.ts

@@ -13,7 +13,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
       border: '1px solid rgb(229 231 235 / 0.8)',
       overflow: 'hidden',
       height: '28px',
-      borderRadius: '18px',
+      borderRadius: '12px',
       backgroundColor: 'rgb(255 255 255)',
       fontSize: '1.05em',
       color: 'rgb(107 114 128 / 80%)',

src/MarkdownEditor/editor/tools/insertAutocompleteStyle.ts

@@ -18,7 +18,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
         lineHeight: '24px',
         gap: '4px',
         padding: '4px',
-        borderRadius: '18px',
+        borderRadius: '12px',
         cursor: 'pointer',
         '&:hover': {
           backgroundColor: 'rgb(209 213 219 / 0.4)',

src/MarkdownEditor/editor/tools/tableAttrStyle.ts

@@ -19,7 +19,7 @@ const genStyle: GenerateStyle<ChatTokenType> = (token) => {
       position: 'absolute',
       zIndex: 10,
       gap: '4px',
-      borderRadius: '18px',
+      borderRadius: '12px',
       '&-item': {
         display: 'flex',
         fontSize: '1.1em',