From aa12296ef67aa66e46d6615e91833199746c8bae Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Wed, 28 Feb 2024 20:53:25 +0800
Subject: [PATCH] chore: add underline decoration type demo

---
 index.html                        | 20 ++++++++++++++
 src/assets/images/line-double.svg |  1 +
 src/assets/images/line-wavy.svg   |  1 +
 src/main.ts                       | 20 +++++++++++++-
 src/style.css                     | 45 ++++++++++++++++++++++++++++++-
 5 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/line-double.svg
 create mode 100644 src/assets/images/line-wavy.svg

diff --git a/index.html b/index.html
index 7fd91a6bf..9fafc120d 100644
--- 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
new file mode 100644
index 000000000..2efe69f45
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/assets/images/line-wavy.svg b/src/assets/images/line-wavy.svg
new file mode 100644
index 000000000..bc0f47c85
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 060274776..5e91d996b 100644
--- 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
index 4259cc7b2..dc2c690ae 100644
--- 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');
 }