fix: 涉及到有插入按钮的菜单, 键盘输入enter键，也能触发事件

2021-06-22 09:39:49 +08:00 · 2021-06-22 09:39:49 +08:00 · 2fdef658ca
parent 371d7dd45c
commit 2fdef658ca
13 changed files with 93 additions and 12 deletions
--- a/cypress/integration/e2e/menus/insertImg.spec.ts
+++ b/cypress/integration/e2e/menus/insertImg.spec.ts
@ -57,4 +57,20 @@ describe('插入网络图片', () => {
                expect(img.dataset.href).to.eq(encodeURIComponent(clickUrl))
            })
    })
+
+    it('键入enter插入网络图片', () => {
+        cy.getByClass('toolbar').children().eq(pos).as('imgMenu').click()
+        cy.get('@imgMenu')
+            .find('.w-e-panel-container')
+            .find('input')
+            .as('allInput')
+            .eq(0)
+            .type(imgUrl)
+        cy.get('@allInput').eq(1).type(alt)
+        cy.get('@allInput')
+            .eq(2)
+            .type(clickUrl + '{enter}')
+
+        cy.get('@Editable').find('img').should('be.visible')
+    })
 })
--- a/cypress/integration/e2e/menus/insertVideo.spec.ts
+++ b/cypress/integration/e2e/menus/insertVideo.spec.ts
@ -46,4 +46,16 @@ describe('插入视频', () => {
                expect(video.src).to.eq(videoUrl)
            })
    })
+
+    it('enter键入插入网络视频', () => {
+        cy.getByClass('toolbar').children().eq(pos).as('imgMenu').click()
+        const videoEl = `<iframe src="${videoUrl}" controls></iframe>`
+        cy.get('@imgMenu')
+            .find('.w-e-panel-container')
+            .as('Panel')
+            .find('input')
+            .type(videoEl + '{enter}')
+
+        cy.get('.w-e-text-container iframe', { timeout: 10000 }).should('be.visible')
+    })
 })
--- a/cypress/integration/e2e/menus/link.spec.ts
+++ b/cypress/integration/e2e/menus/link.spec.ts
@ -36,6 +36,27 @@ describe('插入超链接', () => {
        cy.get('@Editable').find('a').should('have.attr', 'target', '_blank')
    })

+    it('可以使用enter键入插入超链接', () => {
+        cy.get('@Editable').type(text)
+
+        cy.get('@Editable').contains(text)
+        cy.getByClass('toolbar').children().eq(pos).click()
+
+        cy.getByClass('panel-container').as('Panel').should('be.visible')
+
+        cy.get('@Panel').find('.w-e-panel-tab-title').contains('链接')
+
+        cy.get('@Panel').find('.w-e-panel-tab-content input').should('have.length', 2)
+        cy.get('@Panel').find('.w-e-panel-tab-content input').eq(0).type(linkText)
+        cy.get('@Panel')
+            .find('.w-e-panel-tab-content input')
+            .eq(1)
+            .type(link + '{enter}')
+
+        cy.get('@Editable').find('a').should('have.text', linkText)
+        cy.get('@Editable').find('a').should('have.attr', 'href', link)
+        cy.get('@Editable').find('a').should('have.attr', 'target', '_blank')
+    })
    // 采用模拟的方式测试链接跳转，当然你也可以使用其他方式模拟，下面链接里有官方的一些推荐方式
    // reference https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/integration/tab_handling_anchor_links_spec.js
    it('插入的超链接可以进行链接跳转', () => {
--- a/cypress/integration/e2e/menus/table.spec.ts
+++ b/cypress/integration/e2e/menus/table.spec.ts
@ -57,4 +57,15 @@ describe('插入表格', () => {
        cy.get('@Editable').find('table tr').should('have.length', 6)
        cy.get('@Editable').find('table tr').eq(0).find('th').should('have.length', 8)
    })
+
+    it('enter键入可以插入表格', () => {
+        cy.get('@Editable').find('table').should('not.exist')
+
+        cy.getByClass('toolbar').children().eq(pos).as('tableMenu').click()
+
+        cy.get('@tableMenu').find('.w-e-panel-container').as('Panel').should('be.visible')
+
+        cy.get('@Panel').find('.w-e-panel-tab-content .w-e-table input').eq(0).type('{enter}')
+        cy.get('@Editable').find('table').should('have.length', 1)
+    })
 })
--- a/src/config/menus.ts
+++ b/src/config/menus.ts
@ -182,9 +182,10 @@ export default {
            // type -> 'emoji' / 'image'
            type: 'emoji',
            // content -> 数组
-            content: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😛 😝 😜 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😢 😭 😤 😠 😡 😳 😱 😨 🤗 🤔 😶 😑 😬 🙄 😯 😴 😷 🤑 😈 🤡 💩 👻 💀 👀 👣'.split(
-                /\s/
-            ),
+            content:
+                '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😛 😝 😜 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😢 😭 😤 😠 😡 😳 😱 😨 🤗 🤔 😶 😑 😬 🙄 😯 😴 😷 🤑 😈 🤡 💩 👻 💀 👀 👣'.split(
+                    /\s/
+                ),
        },
        {
            // tab 的标题
@ -192,9 +193,10 @@ export default {
            // type -> 'emoji' / 'image'
            type: 'emoji',
            // content -> 数组
-            content: '👐 🙌 👏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🙏'.split(
-                /\s/
-            ),
+            content:
+                '👐 🙌 👏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🙏'.split(
+                    /\s/
+                ),
        },
    ],

--- a/src/lib/simplehtmlparser.js
+++ b/src/lib/simplehtmlparser.js
@ -61,7 +61,8 @@ SimpleHtmlParser.prototype = {

    // regexps

-    startTagRe: /^<([^>\s\/]+)((\s+[^=>\s]+(\s*=\s*((\"[^"]*\")|(\'[^']*\')|[^>\s]+))?)*)\s*\/?\s*>/m,
+    startTagRe:
+        /^<([^>\s\/]+)((\s+[^=>\s]+(\s*=\s*((\"[^"]*\")|(\'[^']*\')|[^>\s]+))?)*)\s*\/?\s*>/m,
    endTagRe: /^<\/([^>\s]+)[^>]*>/m,
    attrRe: /([^=\s]+)(\s*=\s*((\"([^"]*)\")|(\'([^']*)\')|[^>\s]+))?/gm,

--- a/src/menus/img/create-panel-conf.ts
+++ b/src/menus/img/create-panel-conf.ts
@ -199,6 +199,7 @@ export default function (editor: Editor): ImgPanelConf {
                        // 返回 true 表示函数执行结束之后关闭 panel
                        return true
                    },
+                    bindEnter: true,
                },
            ],
        }, // second tab end
--- a/src/menus/lineHeight/index.ts
+++ b/src/menus/lineHeight/index.ts
@ -69,8 +69,8 @@ class LineHeight extends DropListMenu implements MenuActive {
            //获取range 开头结束的dom
            const StartElem: DomElement = $(editor.selection.getSelectionStartElem())
            const EndElem: DomElement = $(editor.selection.getSelectionEndElem())
-            const childList: NodeListOf<ChildNode> | undefined = editor.selection.getRange()
-                ?.commonAncestorContainer.childNodes
+            const childList: NodeListOf<ChildNode> | undefined =
+                editor.selection.getRange()?.commonAncestorContainer.childNodes
            arrayDom_a.push(this.getDom(StartElem.elems[0]))
            childList?.forEach((item, index) => {
                if (item === this.getDom(StartElem.elems[0])) {
--- a/src/menus/link/create-panel-conf.ts
+++ b/src/menus/link/create-panel-conf.ts
@ -166,6 +166,7 @@ export default function (editor: Editor, text: string, link: string): PanelConf
                            // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
                            return true
                        },
+                        bindEnter: true,
                    },
                    // 取消链接
                    {
--- a/src/menus/menu-constructors/Panel.ts
+++ b/src/menus/menu-constructors/Panel.ts
@ -12,6 +12,7 @@ export type TabEventConf = {
    selector: string
    type: string
    fn: Function
+    bindEnter?: Boolean
 }
 export type PanelTabConf = {
    title: string
@ -170,14 +171,26 @@ class Panel {
                const type = event.type
                const fn = event.fn || EMPTY_FN
                const $content = tabContentArr[index]
-                $content.find(selector).on(type, async (e: Event) => {
+                const bindEnter = event.bindEnter ?? false
+
+                const doneFn = async (e: Event) => {
                    e.stopPropagation()
                    const needToHide = await fn(e)
                    // 执行完事件之后，是否要关闭 panel
                    if (needToHide) {
                        this.remove()
                    }
-                })
+                }
+                // 给按钮绑定相应的事件
+                $content.find(selector).on(type, doneFn)
+                // 绑定enter键入事件
+                if (bindEnter && type === 'click') {
+                    $content.on('keyup', (e: KeyboardEvent) => {
+                        if (e.keyCode == 13) {
+                            doneFn(e)
+                        }
+                    })
+                }
            })
        })

--- a/src/menus/table/create-panel-conf.ts
+++ b/src/menus/table/create-panel-conf.ts
@ -69,6 +69,7 @@ export default function (editor: Editor): PanelConf {
                        }
                        // 返回 true 表示函数执行结束之后关闭 panel
                    },
+                    bindEnter: true,
                },
            ],
        },
--- a/src/menus/video/create-panel-conf.ts
+++ b/src/menus/video/create-panel-conf.ts
@ -140,6 +140,7 @@ export default function (editor: Editor, video: string): PanelConf {
                        // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
                        return true
                    },
+                    bindEnter: true,
                },
            ],
        }, // tab end
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@ -6,7 +6,8 @@
 export function EMPTY_FN() {}

 //用于校验是否为url格式字符串
-export const urlRegex = /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&amp;:/~+#]*[\w\-@?^=%&amp;/~+#])?/
+export const urlRegex =
+    /^(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&amp;:/~+#]*[\w\-@?^=%&amp;/~+#])?/

 // 编辑器为了方便继续输入/换行等原因 主动生成的空标签
 export const EMPTY_P = '<p data-we-empty-p=""><br></p>'