fix: #668 #662 closed 修复表格所见即所得编辑定位的问题，解决方案：先屏蔽拖拽行列的功能

Tencent · Dec 15, 2023 · ad8e9e4 · ad8e9e4
1 parent 308b15b
commit ad8e9e4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/src/toolbars/PreviewerBubble.js b/src/toolbars/PreviewerBubble.js
@@ -128,7 +128,7 @@ export default class PreviewerBubble {
     if (/simple-table/.test(container.className) || !/cherry-table-container/.test(container.className)) {
       return false;
     }
-    return true;
+    return container;
   }
 
   /**
@@ -159,12 +159,15 @@ export default class PreviewerBubble {
         if (!this.$isEnableBubbleAndEditorShow()) {
           return;
         }
-        if (!this.isCherryTable(e.target)) {
+        // eslint-disable-next-line no-case-declarations
+        const table = this.isCherryTable(e.target);
+        if (false === table) {
           return;
         }
         this.removeHoverBubble.cancel();
         this.$removeAllPreviewerBubbles('hover');
-        this.$showTablePreviewerBubbles('hover', e.target);
+        // @ts-ignore
+        this.$showTablePreviewerBubbles('hover', e.target, table);
         return;
       case 'PRE':
       case 'CODE':
@@ -279,10 +282,12 @@ export default class PreviewerBubble {
       case 'TD':
       case 'TH':
         if (target instanceof HTMLElement) {
-          if (!this.isCherryTable(target)) {
+          const table = this.isCherryTable(target);
+          if (false === table) {
             return;
           }
-          this.$showTablePreviewerBubbles('click', target);
+          // @ts-ignore
+          this.$showTablePreviewerBubbles('click', target, table);
         }
         break;
       case 'svg':
@@ -350,9 +355,23 @@ export default class PreviewerBubble {
    * @param {string} trigger 触发方式
    * @param {HTMLElement} htmlElement 用户触发的table dom
    */
-  $showTablePreviewerBubbles(trigger, htmlElement) {
+  $showTablePreviewerBubbles(trigger, htmlElement, tableElement) {
+    if (this.bubbleHandler[trigger]) {
+      if (this.bubbleHandler[trigger].tableElement === tableElement) {
+        // 已经存在相同的target，直接返回
+        this.bubbleHandler[trigger].showBubble();
+        return;
+      }
+    }
     this.$createPreviewerBubbles(trigger, trigger === 'click' ? 'table-content-handler' : 'table-hover-handler');
-    const handler = new TableHandler(trigger, htmlElement, this.bubble[trigger], this.previewerDom, this.editor.editor);
+    const handler = new TableHandler(
+      trigger,
+      htmlElement,
+      this.bubble[trigger],
+      this.previewerDom,
+      this.editor.editor,
+      tableElement,
+    );
     handler.showBubble();
     this.bubbleHandler[trigger] = handler;
   }

diff --git a/src/utils/tableContentHandler.js b/src/utils/tableContentHandler.js
@@ -27,7 +27,7 @@ export default class TableHandler {
     editorDom: {}, // 编辑器容器
   };
 
-  constructor(trigger, target, container, previewerDom, codeMirror) {
+  constructor(trigger, target, container, previewerDom, codeMirror, tableElement) {
     // 触发方式 click / hover
     this.trigger = trigger;
     this.target = target;
@@ -36,6 +36,7 @@ export default class TableHandler {
     this.codeMirror = codeMirror;
     this.$initReg();
     this.$findTableInEditor();
+    this.tableElement = tableElement;
   }
 
   emit(type, event = {}, callback = () => {}) {
@@ -49,7 +50,8 @@ export default class TableHandler {
       case 'previewUpdate':
         return this.$refreshPosition();
       case 'mousedown':
-        return this.trigger !== 'click' && this.$drawDrag();
+        // return this.trigger !== 'click' && this.$drawDrag();
+        return;
       case 'mouseup':
         return this.trigger === 'click' && this.$tryRemoveMe(event, callback);
     }