chore: add underline decoration type demo

index.html

@@ -88,6 +88,26 @@
         </div>
         <div class="menu-item__underline">
           <i></i>
+          <span class="select"></span>
+          <div class="options">
+            <ul>
+              <li data-decoration-style='solid'>
+                <i></i>
+              </li>
+              <li data-decoration-style='double'>
+                <i></i>
+              </li>
+              <li data-decoration-style='dashed'>
+                <i></i>
+              </li>
+              <li data-decoration-style='dotted'>
+                <i></i>
+              </li>
+              <li data-decoration-style='wavy'>
+                <i></i>
+              </li>
+            </ul>
+          </div>
         </div>
         <div class="menu-item__strikeout" title="删除线(Ctrl+Shift+X)">
           <i></i>

src/assets/images/line-double.svg

@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4 10h118v1H4zm0 3h118v1H4z"/></svg>

src/assets/images/line-wavy.svg

@@ -0,0 +1 @@
+<svg width="126" height="20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#000000" d="M4 10 Q6 8,8 10 T12 10 T16 10 T20 10 T24 10 T28 10 T32 10 T36 10 T40 10 T44 10 T48 10 T52 10 T56 10 T60 10 T64 10 T68 10 T72 10 T76 10 T80 10 T84 10 T88 10 T92 10 T96 10 T100 10 T104 10 T108 10 T112 10 T116 10 T120 10 T124 10"/></svg>

src/main.ts

@@ -17,6 +17,7 @@ import Editor, {
   PageMode,
   PaperDirection,
   RowFlex,
+  TextDecorationStyle,
   TitleLevel,
   splitText
 } from './editor'
@@ -177,9 +178,26 @@ window.onload = function () {
     '.menu-item__underline'
   )!
   underlineDom.title = `下划线(${isApple ? '⌘' : 'Ctrl'}+U)`
-  underlineDom.onclick = function () {
+  const underlineOptionDom =
+    underlineDom.querySelector<HTMLDivElement>('.options')!
+  underlineDom.querySelector<HTMLSpanElement>('.select')!.onclick =
+    function () {
+      underlineOptionDom.classList.toggle('visible')
+    }
+  underlineDom.querySelector<HTMLElement>('i')!.onclick = function () {
     console.log('underline')
     instance.command.executeUnderline()
+    underlineOptionDom.classList.remove('visible')
+  }
+  underlineDom.querySelector<HTMLUListElement>('ul')!.onmousedown = function (
+    evt
+  ) {
+    const li = evt.target as HTMLLIElement
+    const decorationStyle = <TextDecorationStyle>li.dataset.decorationStyle
+    instance.command.executeUnderline({
+      style: decorationStyle
+    })
+    underlineOptionDom.classList.remove('visible')
   }
 
   const strikeoutDom = document.querySelector<HTMLDivElement>(

src/style.css

@@ -214,10 +214,53 @@ ul {
   background-image: url('./assets/images/italic.svg');
 }
 
-.menu-item__underline i {
+.menu-item .menu-item__underline {
+  width: 30px;
+  position: relative;
+}
+
+.menu-item__underline>i {
+  flex-shrink: 0;
   background-image: url('./assets/images/underline.svg');
 }
 
+.menu-item__underline .select {
+  width: 100%;
+  height: 100%;
+}
+
+.menu-item .menu-item__underline .options {
+  width: 128px;
+}
+
+.menu-item .menu-item__underline li {
+  padding: 1px 5px;
+}
+
+.menu-item__underline li i {
+  pointer-events: none;
+}
+
+.menu-item__underline li[data-decoration-style="solid"] {
+  background-image: url('./assets/images/line-single.svg');
+}
+
+.menu-item__underline li[data-decoration-style="double"] {
+  background-image: url('./assets/images/line-double.svg')
+}
+
+.menu-item__underline li[data-decoration-style="dashed"] {
+  background-image: url('./assets/images/line-dash-small-gap.svg');
+}
+
+.menu-item__underline li[data-decoration-style="dotted"] {
+  background-image: url('./assets/images/line-dot.svg');
+}
+
+.menu-item__underline li[data-decoration-style="wavy"] {
+  background-image: url('./assets/images/line-wavy.svg');
+}
+
 .menu-item__strikeout i {
   background-image: url('./assets/images/strikeout.svg');
 }