feat: 在Markdown编辑器中为表格单元格添加编辑状态边框，禁用拖拽功能以提升用户体验

ant-design · Feb 18, 2025 · 0e618c7 · 0e618c7 · vercel · Feb 18, 2025
1 parent c5960e2
commit 0e618c7
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 20 deletions.
diff --git a/src/MarkdownEditor/editor/elements/Table/TableCell.tsx b/src/MarkdownEditor/editor/elements/Table/TableCell.tsx
@@ -139,6 +139,7 @@ export const TableTdCell = (
         backgroundColor: editing ? 'transparent' : undefined,
         textAlign: justifyContent as 'left',
         minWidth: minWidth,
+        border: editing ? '2px solid #42a642' : undefined,
         maxWidth: '200px',
         width: props.width,
       }}

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/bug.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/bug.snap
@@ -201437,11 +201437,12 @@
               class="ant-md-editor-content-table-container"
               data-be="table"
               data-slate-node="element"
+              draggable="false"
               style="overflow: hidden;"
               tabindex="0"
             >
               <div
-                style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
               />
               <div
                 class="ant-md-editor-drag-el"
@@ -201546,6 +201547,7 @@
                 </div>
                 <table
                   class="ant-md-editor-content-table-editor-table"
+                  draggable="false"
                 >
                   <tbody
                     data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/min-render.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/min-render.snap
@@ -215,11 +215,12 @@
                   class="ant-md-editor-content-table-container"
                   data-be="table"
                   data-slate-node="element"
+                  draggable="false"
                   style="overflow: hidden;"
                   tabindex="0"
                 >
                   <div
-                    style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                    style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                   />
                   <div
                     class="ant-md-editor-drag-el"
@@ -516,6 +517,7 @@
                     </div>
                     <table
                       class="ant-md-editor-content-table-editor-table"
+                      draggable="false"
                     >
                       <tbody
                         data-slate-node="element"
@@ -9009,11 +9011,12 @@
                   class="ant-md-editor-content-table-container"
                   data-be="table"
                   data-slate-node="element"
+                  draggable="false"
                   style="overflow: hidden;"
                   tabindex="0"
                 >
                   <div
-                    style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                    style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                   />
                   <div
                     class="ant-md-editor-drag-el"
@@ -9214,6 +9217,7 @@
                     </div>
                     <table
                       class="ant-md-editor-content-table-editor-table"
+                      draggable="false"
                     >
                       <tbody
                         data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/min.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/min.snap
@@ -247,11 +247,12 @@
                 class="ant-md-editor-content-table-container"
                 data-be="table"
                 data-slate-node="element"
+                draggable="false"
                 style="overflow: hidden;"
                 tabindex="0"
               >
                 <div
-                  style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                  style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                 />
                 <div
                   class="ant-md-editor-drag-el"
@@ -548,6 +549,7 @@
                   </div>
                   <table
                     class="ant-md-editor-content-table-editor-table"
+                    draggable="false"
                   >
                     <tbody
                       data-slate-node="element"
@@ -5977,11 +5979,12 @@
                 class="ant-md-editor-content-table-container"
                 data-be="table"
                 data-slate-node="element"
+                draggable="false"
                 style="overflow: hidden;"
                 tabindex="0"
               >
                 <div
-                  style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                  style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                 />
                 <div
                   class="ant-md-editor-drag-el"
@@ -6194,6 +6197,7 @@
                   </div>
                   <table
                     class="ant-md-editor-content-table-editor-table"
+                    draggable="false"
                   >
                     <tbody
                       data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/minPreview.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/minPreview.snap
@@ -283,11 +283,12 @@
                 class="ant-md-editor-content-table-container"
                 data-be="table"
                 data-slate-node="element"
+                draggable="false"
                 style="overflow: hidden;"
                 tabindex="0"
               >
                 <div
-                  style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                  style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                 />
                 <div
                   class="ant-md-editor-drag-el"
@@ -584,6 +585,7 @@
                   </div>
                   <table
                     class="ant-md-editor-content-table-editor-table"
+                    draggable="false"
                   >
                     <tbody
                       data-slate-node="element"
@@ -3995,10 +3997,11 @@
                 class="ant-md-editor-content-table-container"
                 data-be="table"
                 data-slate-node="element"
+                draggable="false"
                 tabindex="0"
               >
                 <div
-                  style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                  style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                 />
                 <div
                   class="ant-md-editor-drag-el"
@@ -4295,6 +4298,7 @@
                   </div>
                   <table
                     class="ant-md-editor-content-table-editor-table"
+                    draggable="false"
                   >
                     <tbody
                       data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/ppt.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/ppt.snap
@@ -947,11 +947,12 @@
                     class="ant-md-editor-content-table-container"
                     data-be="table"
                     data-slate-node="element"
+                    draggable="false"
                     style="overflow: hidden;"
                     tabindex="0"
                   >
                     <div
-                      style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                      style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                     />
                     <div
                       class="ant-md-editor-drag-el"
@@ -1248,6 +1249,7 @@
                       </div>
                       <table
                         class="ant-md-editor-content-table-editor-table"
+                        draggable="false"
                       >
                         <tbody
                           data-slate-node="element"
@@ -11553,11 +11555,12 @@
                     class="ant-md-editor-content-table-container"
                     data-be="table"
                     data-slate-node="element"
+                    draggable="false"
                     style="overflow: hidden;"
                     tabindex="0"
                   >
                     <div
-                      style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                      style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                     />
                     <div
                       class="ant-md-editor-drag-el"
@@ -11770,6 +11773,7 @@
                       </div>
                       <table
                         class="ant-md-editor-content-table-editor-table"
+                        draggable="false"
                       >
                         <tbody
                           data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/preview.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/preview.snap
@@ -828,10 +828,11 @@
               class="ant-md-editor-content-table-container"
               data-be="table"
               data-slate-node="element"
+              draggable="false"
               tabindex="0"
             >
               <div
-                style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
               />
               <div
                 class="ant-md-editor-drag-el"
@@ -1128,6 +1129,7 @@
                 </div>
                 <table
                   class="ant-md-editor-content-table-editor-table"
+                  draggable="false"
                 >
                   <tbody
                     data-slate-node="element"
@@ -6382,10 +6384,11 @@
               class="ant-md-editor-content-table-container"
               data-be="table"
               data-slate-node="element"
+              draggable="false"
               tabindex="0"
             >
               <div
-                style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
               />
               <div
                 class="ant-md-editor-drag-el"
@@ -6598,6 +6601,7 @@
                 </div>
                 <table
                   class="ant-md-editor-content-table-editor-table"
+                  draggable="false"
                 >
                   <tbody
                     data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/pure.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/pure.snap
@@ -728,11 +728,12 @@
           class="ant-md-editor-content-table-container"
           data-be="table"
           data-slate-node="element"
+          draggable="false"
           style="overflow: hidden;"
           tabindex="0"
         >
           <div
-            style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+            style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
           />
           <div
             class="ant-md-editor-drag-el"
@@ -1029,6 +1030,7 @@
             </div>
             <table
               class="ant-md-editor-content-table-editor-table"
+              draggable="false"
             >
               <tbody
                 data-slate-node="element"
@@ -6266,11 +6268,12 @@
           class="ant-md-editor-content-table-container"
           data-be="table"
           data-slate-node="element"
+          draggable="false"
           style="overflow: hidden;"
           tabindex="0"
         >
           <div
-            style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+            style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
           />
           <div
             class="ant-md-editor-drag-el"
@@ -6483,6 +6486,7 @@
             </div>
             <table
               class="ant-md-editor-content-table-editor-table"
+              draggable="false"
             >
               <tbody
                 data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/readonly.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/readonly.snap
@@ -5669,11 +5669,12 @@
                 class="ant-md-editor-content-table-container"
                 data-be="table"
                 data-slate-node="element"
+                draggable="false"
                 style="overflow: hidden;"
                 tabindex="0"
               >
                 <div
-                  style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                  style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                 />
                 <div
                   class="ant-md-editor-drag-el"
@@ -5946,6 +5947,7 @@
                   </div>
                   <table
                     class="ant-md-editor-content-table-editor-table"
+                    draggable="false"
                   >
                     <tbody
                       data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/render.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/render.snap
@@ -244,10 +244,11 @@
                       class="ant-md-editor-content-table-container"
                       data-be="table"
                       data-slate-node="element"
+                      draggable="false"
                       tabindex="0"
                     >
                       <div
-                        style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                        style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                       />
                       <div
                         class="ant-md-editor-drag-el"
@@ -544,6 +545,7 @@
                         </div>
                         <table
                           class="ant-md-editor-content-table-editor-table"
+                          draggable="false"
                         >
                           <tbody
                             data-slate-node="element"
@@ -4433,10 +4435,11 @@
                       class="ant-md-editor-content-table-container"
                       data-be="table"
                       data-slate-node="element"
+                      draggable="false"
                       tabindex="0"
                     >
                       <div
-                        style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                        style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                       />
                       <div
                         class="ant-md-editor-drag-el"
@@ -4517,6 +4520,7 @@
                         </div>
                         <table
                           class="ant-md-editor-content-table-editor-table"
+                          draggable="false"
                         >
                           <tbody
                             data-slate-node="element"

diff --git a/tests/demo/__snapshots__/src/MarkdownEditor/demos/rerender.snap b/tests/demo/__snapshots__/src/MarkdownEditor/demos/rerender.snap
@@ -132,11 +132,12 @@
                 class="ant-md-editor-content-table-container"
                 data-be="table"
                 data-slate-node="element"
+                draggable="false"
                 style="overflow: hidden;"
                 tabindex="0"
               >
                 <div
-                  style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                  style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                 />
                 <div
                   class="ant-md-editor-drag-el"
@@ -433,6 +434,7 @@
                   </div>
                   <table
                     class="ant-md-editor-content-table-editor-table"
+                    draggable="false"
                   >
                     <tbody
                       data-slate-node="element"
@@ -8416,11 +8418,12 @@
                 class="ant-md-editor-content-table-container"
                 data-be="table"
                 data-slate-node="element"
+                draggable="false"
                 style="overflow: hidden;"
                 tabindex="0"
               >
                 <div
-                  style="position: absolute; z-index: 999; outline: 3px solid #42a642; pointer-events: none; display: none; left: 0px; top: 0px;"
+                  style="position: absolute; z-index: 999; outline: 3px solid transparent; pointer-events: none; display: none; left: 0px; top: 0px;"
                 />
                 <div
                   class="ant-md-editor-drag-el"
@@ -8621,6 +8624,7 @@
                   </div>
                   <table
                     class="ant-md-editor-content-table-editor-table"
+                    draggable="false"
                   >
                     <tbody
                       data-slate-node="element"