feat:增加下划线功能,注册下划线到编辑器菜单

src/config/menus.ts

@@ -4,7 +4,7 @@
  */
 
 export default {
-    menus: ['bold', 'head', 'link'],
+    menus: ['bold', 'head', 'link', 'underline'],
 
     fontNames: ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana'],
 

src/menus/menu-list.ts

@@ -6,9 +6,11 @@
 import Bold from './bold/index'
 import Head from './head/index'
 import Link from './link/index'
+import Underline from './underline/index'
 
 export default {
     bold: Bold,
     head: Head,
     link: Link,
+    underline: Underline,
 }

src/menus/underline/index.ts

@@ -1,5 +1,57 @@
 /**
- * 新建分支
+ * @description 下划线 underline
+ * @author dyl
+ *
  */
 
-export default null
+import BtnMenu from '../menu-constructors/BtnMenu'
+import $ from '../../utils/dom-core'
+import Editor from '../../editor/index'
+import { MenuActive } from '../menu-constructors/Menu'
+
+class Underline extends BtnMenu implements MenuActive {
+    constructor(editor: Editor) {
+        const $elem = $(
+            `<div class="w-e-menu">
+                <i class="w-e-icon-underline"></i>
+            </div>`
+        )
+        super($elem, editor)
+    }
+
+    /**
+     * 点击事件
+     */
+    public clickHandler(): void {
+        const editor = this.editor
+        const isSelectEmpty = editor.selection.isSelectionEmpty()
+
+        if (isSelectEmpty) {
+            // 选区范围是空的，插入并选中一个“空白”
+            editor.selection.createEmptyRange()
+        }
+
+        // 执行 Underline 命令
+        editor.cmd.do('underline')
+
+        if (isSelectEmpty) {
+            // 需要将选区范围折叠起来
+            editor.selection.collapseRange()
+            editor.selection.restoreSelection()
+        }
+    }
+
+    /**
+     * 尝试修改菜单激活状态
+     */
+    public tryChangeActive(): void {
+        const editor = this.editor
+        if (editor.cmd.queryCommandState('underline')) {
+            this.active()
+        } else {
+            this.unActive()
+        }
+    }
+}
+
+export default Underline

test/menus/underline.test.ts

@@ -0,0 +1,25 @@
+/**
+ * @description underline test
+ * @author dyl
+ */
+
+import createEditor from '../fns/create-editor'
+import Editor from '../../src/editor'
+import Underline from '../../src/menus/underline/index'
+import mockCmdFn from '../fns/command-mock'
+import { getMenuInstance } from '../fns/menus'
+
+let editor: Editor
+let underlineMenu: Underline
+
+test('加粗', () => {
+    editor = createEditor(document, 'div1') // 赋值给全局变量
+
+    // 找到 bold 菜单
+    underlineMenu = getMenuInstance(editor, Underline) as Underline
+
+    // 执行点击事件，模拟加粗
+    mockCmdFn(document)
+        ; (underlineMenu as Underline).clickHandler()
+    expect(document.execCommand).toBeCalledWith('underline', false, undefined) // mock fn 被调用
+})