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

wangeditor-team · Jun 22, 2021 · 2fdef65 · 2fdef65
1 parent 371d7dd
commit 2fdef65
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 12 deletions.
diff --git 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')
+    })
 })
diff --git 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')
+    })
 })
diff --git 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('插入的超链接可以进行链接跳转', () => {

diff --git 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)
+    })
 })
diff --git a/src/config/menus.ts b/src/config/menus.ts
@@ -182,19 +182,21 @@ export default {
             // type -> 'emoji' / 'image'
             type: 'emoji',
             // content -> 数组
-            content: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😛 😝 😜 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😢 😭 😤 😠 😡 😳 😱 😨 🤗 🤔 😶 😑 😬 🙄 😯 😴 😷 🤑 😈 🤡 💩 👻 💀 👀 👣'.split(
-                /\s/
-            ),
+            content:
+                '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 😘 😗 😙 😚 😋 😛 😝 😜 🤓 😎 😏 😒 😞 😔 😟 😕 🙁 😣 😖 😫 😩 😢 😭 😤 😠 😡 😳 😱 😨 🤗 🤔 😶 😑 😬 🙄 😯 😴 😷 🤑 😈 🤡 💩 👻 💀 👀 👣'.split(
+                    /\s/
+                ),
         },
         {
             // tab 的标题
             title: '手势',
             // type -> 'emoji' / 'image'
             type: 'emoji',
             // content -> 数组
-            content: '👐 🙌 👏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🙏'.split(
-                /\s/
-            ),
+            content:
+                '👐 🙌 👏 🤝 👍 👎 👊 ✊ 🤛 🤜 🤞 ✌️ 🤘 👌 👈 👉 👆 👇 ☝️ ✋ 🤚 🖐 🖖 👋 🤙 💪 🖕 ✍️ 🙏'.split(
+                    /\s/
+                ),
         },
     ],
 

diff --git 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,
 

diff --git 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

diff --git 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])) {

diff --git 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,
                     },
                     // 取消链接
                     {

diff --git 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)
+                        }
+                    })
+                }
             })
         })
 

diff --git 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,
                 },
             ],
         },

diff --git 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

diff --git 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>'