fix: 修复行内code回车后导致样式及插入问题

wangeditor-team · Jun 16, 2021 · cebf20a · cebf20a
1 parent bb65032
commit cebf20a
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 20 deletions.
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/code/bind-event/jump-code-block-down.ts b/src/menus/code/bind-event/jump-code-block-down.ts
@@ -41,9 +41,10 @@ export default function bindEventJumpCodeBlock(editor: Editor) {
             if ($preElem.length && $preElem?.getNodeName() === 'PRE' && $nextElem.length === 0) {
                 // 光标处于选区开头
                 if (selection.getCursorPos() === 0) {
-                    // 按下delete键阻止默认行为
+                    // 按下delete键时末尾追加空行
                     if (e.keyCode === 8) {
-                        e.preventDefault()
+                        const $emptyP = $(EMPTY_P)
+                        $textElem.append($emptyP)
                     }
                 }
             }

diff --git a/src/menus/code/create-panel-conf.ts b/src/menus/code/create-panel-conf.ts
@@ -17,9 +17,8 @@ export default function (editor: Editor, text: string, languageType: string): Pa
     const btnOkId = getRandom('btn-ok')
 
     /**
-     * 插入链接
+     * 插入代码块
      * @param text 文字
-     * @param code 链接
      */
     function insertCode(text: string): void {
         // 选区处于链接中，则选中整个菜单，再执行 insertHTML
@@ -39,8 +38,10 @@ export default function (editor: Editor, text: string, languageType: string): Pa
         const $codeElem = $code?.getNodeTop(editor)
 
         // 通过dom操作添加换行标签
-        // @ts-ignore
-        $(EMPTY_P).insertAfter($codeElem)
+        if ($codeElem?.getNextSibling().elems.length === 0) {
+            // @ts-ignore
+            $(EMPTY_P).insertAfter($codeElem)
+        }
     }
 
     /**

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/text/event-hooks/enter-to-create-p.ts b/src/text/event-hooks/enter-to-create-p.ts
@@ -4,6 +4,7 @@
  */
 
 import Editor from '../../editor/index'
+import { EMPTY_P } from '../../utils/const'
 import $, { DomElement } from '../../utils/dom-core'
 
 /**
@@ -14,7 +15,7 @@ import $, { DomElement } from '../../utils/dom-core'
  */
 function enterToCreateP(editor: Editor, enterUpEvents: Function[], enterDownEvents: Function[]) {
     function insertEmptyP($selectionElem: DomElement) {
-        const $p = $('<p><br></p>')
+        const $p = $(EMPTY_P)
         $p.insertBefore($selectionElem)
         if ($selectionElem.html().indexOf('<img') >= 0) {
             // 有图片的回车键弹起时
@@ -36,7 +37,17 @@ function enterToCreateP(editor: Editor, enterUpEvents: Function[], enterDownEven
         if ($parentElem.html() === '<code><br></code>') {
             // 回车之前光标所在一个 <p><code>.....</code></p> ，忽然回车生成一个空的 <p><code><br></code></p>
             // 而且继续回车跳不出去，因此只能特殊处理
-            insertEmptyP($selectionElem)
+            insertEmptyP($parentElem)
+            return
+        }
+
+        if (
+            $selectionElem.getNodeName() === 'FONT' &&
+            $selectionElem.text() === '' &&
+            $selectionElem.attr('face') === 'monospace'
+        ) {
+            // 行内code回车时会产生一个<font face="monospace"><br></font>，导致样式问题
+            insertEmptyP($parentElem)
             return
         }
 

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

diff --git a/src/utils/dom-core.ts b/src/utils/dom-core.ts
@@ -748,7 +748,7 @@ export class DomElement<T extends DomElementSelector = DomElementSelector> {
         }
         return this.forEach(elem => {
             const parent = referenceNode.parentNode as Node
-            parent.insertBefore(elem, referenceNode)
+            parent?.insertBefore(elem, referenceNode)
         })
     }
 

diff --git a/test/unit/text/enter-to-create-p.test.ts b/test/unit/text/enter-to-create-p.test.ts
@@ -143,7 +143,7 @@ describe('editor.text event-hooks tab-to-space test', () => {
             fn()
         })
 
-        expect(editor.$textElem.elems[0].innerHTML.indexOf('<p><br></p>')).toBeGreaterThanOrEqual(0)
+        expect(editor.$textElem.elems[0].innerHTML.indexOf(EMPTY_P)).toBeGreaterThanOrEqual(0)
     })
 
     test('当编辑器选区内容 $textElm，执行enter down，插入 <p><br></p>', () => {