chore: add underline decoration type demo

Hufe921 · Feb 28, 2024 · aa12296 · aa12296
1 parent a7fa847
commit aa12296
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 2 deletions.
diff --git a/index.html b/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>

diff --git a/src/assets/images/line-double.svg b/src/assets/images/line-double.svg
diff --git a/src/assets/images/line-wavy.svg b/src/assets/images/line-wavy.svg
diff --git a/src/main.ts b/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>(

diff --git a/src/style.css b/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');
 }