fix: 全选删除表格内容,表格外的内容会进入表格

wangeditor-team · May 8, 2021 · 33aae89 · 33aae89
1 parent 9551d07
commit 33aae89
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/src/menus/table/bind-event/index.ts b/src/menus/table/bind-event/index.ts
@@ -5,7 +5,7 @@
 
 import Editor from '../../../editor/index'
 import bindTooltip from './tooltip-event'
-import bindEventKeyboardEvent from './keyboard'
+import { bindEventKeyboardEvent, bindClickEvent } from './table-event'
 
 /**
  * 绑定事件
@@ -16,6 +16,8 @@ function bindEvent(editor: Editor): void {
     bindTooltip(editor)
 
     bindEventKeyboardEvent(editor)
+
+    bindClickEvent(editor)
 }
 
 export default bindEvent
diff --git a/src/menus/table/bind-event/keyboard.ts → src/menus/table/bind-event/table-event.ts b/src/menus/table/bind-event/keyboard.ts → src/menus/table/bind-event/table-event.ts
@@ -3,7 +3,7 @@
  * @author yanbiao(86driver)
  */
 import Editor from '../../../editor/index'
-import { DomElement } from '../../../utils/dom-core'
+import $, { DomElement } from '../../../utils/dom-core'
 
 /**
  * @description 是否是空行
@@ -18,8 +18,34 @@ function isEmptyLine(topElem: DomElement): boolean {
 
     return dom.nodeName === 'P' && dom.innerHTML === '<br>'
 }
+export function bindClickEvent(editor: Editor) {
+    function handleTripleClick($dom: DomElement, e: MouseEvent) {
+        // 处理三击事件，此时选区可能离开table，修正回来
+        if (e.detail >= 3) {
+            const selection = window.getSelection()
+            if (selection) {
+                const { focusNode, anchorNode } = selection
+                const $anchorNode = $(anchorNode?.parentElement)
+                // 当focusNode离开了table
+                if (!$dom.isContain($(focusNode))) {
+                    const $td =
+                        $anchorNode.elems[0].tagName === 'TD'
+                            ? $anchorNode
+                            : $anchorNode.parentUntilEditor('td', editor)
+                    if ($td) {
+                        const range = editor.selection.getRange()
+                        range?.setEnd($td.elems[0], $td.elems[0].childNodes.length)
+                        editor.selection.restoreSelection()
+                    }
+                }
+            }
+        }
+    }
+
+    editor.txt.eventHooks.tableClickEvents.push(handleTripleClick)
+}
 
-export default function bindEventKeyboardEvent(editor: Editor) {
+export function bindEventKeyboardEvent(editor: Editor) {
     const { txt, selection } = editor
     const { keydownEvents } = txt.eventHooks
 

diff --git a/src/text/index.ts b/src/text/index.ts
@@ -50,7 +50,7 @@ type TextEventHooks = {
     /** 图片拖拽MouseDown */
     imgDragBarMouseDownEvents: (() => void)[]
     /** 表格点击 */
-    tableClickEvents: ((e: DomElement) => void)[]
+    tableClickEvents: (($dom: DomElement, e: MouseEvent) => void)[]
     /** 每个菜单被点击时，按理说这个不属于 txt 的，先暂时在这放着吧 */
     menuClickEvents: (() => void)[]
     /** droplist 菜单悬浮事件。暂时放这里 */
@@ -554,7 +554,7 @@ class Text {
         })
 
         //table click
-        $textElem.on('click', (e: Event) => {
+        $textElem.on('click', (e: MouseEvent) => {
             // 存储元素
             let $dom: DomElement | null = null
 
@@ -567,7 +567,7 @@ class Text {
             if (!$dom) return
 
             const tableClickEvents = eventHooks.tableClickEvents
-            tableClickEvents.forEach(fn => fn($dom as DomElement))
+            tableClickEvents.forEach(fn => fn($dom as DomElement, e))
         })
 
         // enter 键 down

diff --git a/test/unit/menus/table/tooltip-event.test.ts b/test/unit/menus/table/tooltip-event.test.ts
@@ -29,7 +29,8 @@ const showTooltip = (editorId: string) => {
     document.body.appendChild(fakeDom.elems[0])
 
     fns.forEach(fn => {
-        fn(fakeDom)
+        const e = new MouseEvent('click')
+        fn(fakeDom, e)
     })
 }
 const editor = createEditor(document, 'div1')
@@ -45,7 +46,8 @@ describe('Table Tooltip Event', () => {
         document.body.appendChild(fakeDom.elems[0])
 
         fns.forEach(fn => {
-            fn(fakeDom)
+            const e = new MouseEvent('click')
+            fn(fakeDom, e)
         })
 
         const tooltip = $('.w-e-tooltip')