From 28d679608e3058159fb2226f7d38b8a2a2eddcdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= <huangyunfeihufe@hotmail.com>
Date: Fri, 1 Jul 2022 16:47:33 +0800
Subject: [PATCH] feat:add LaTeX menu

---
 index.html                  |  3 +++
 src/assets/images/latex.svg |  1 +
 src/main.ts                 | 24 +++++++++++++++++++++++-
 src/mock.ts                 |  2 +-
 src/style.css               |  4 ++++
 5 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/latex.svg

diff --git a/index.html b/index.html
index 38a7e7d..73751df 100644
--- a/index.html
+++ b/index.html
@@ -173,6 +173,9 @@
         <div class="menu-item__checkbox">
           <i></i>
         </div>
+        <div class="menu-item__latex">
+          <i></i>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
diff --git a/src/assets/images/latex.svg b/src/assets/images/latex.svg
new file mode 100644
index 0000000..ca5426b
--- /dev/null
+++ b/src/assets/images/latex.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M9 13.5H2.982a.5.5 0 01-.404-.794l3.208-4.412a.5.5 0 000-.588L2.578 3.294a.5.5 0 01.404-.794H9" stroke="#3D4757"/><path d="M14.447 7l.809.588-2.139 2.942 2.139 2.942-.81.588-1.946-2.68-1.947 2.68-.809-.588 2.138-2.942-2.138-2.942.81-.588L12.5 9.679 14.447 7z" fill="#3D4757"/></g></svg>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index cfe24f0..a80c0a6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -156,7 +156,7 @@ window.onload = function () {
     instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
   }
 
-  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 |
+  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX
   const tableDom = document.querySelector<HTMLDivElement>('.menu-item__table')!
   const tablePanelContainer = document.querySelector<HTMLDivElement>('.menu-item__table__collapse')!
   const tableClose = document.querySelector<HTMLDivElement>('.table-close')!
@@ -541,6 +541,28 @@ window.onload = function () {
     }])
   }
 
+  const latexDom = document.querySelector<HTMLDivElement>('.menu-item__latex')!
+  latexDom.onclick = function () {
+    console.log('LaTeX')
+    new Dialog({
+      title: 'LaTeX',
+      data: [{
+        type: 'textarea',
+        height: 100,
+        name: 'value',
+        placeholder: '请输入LaTeX文本'
+      }],
+      onConfirm: (payload) => {
+        const value = payload.find(p => p.name === 'value')?.value
+        if (!value) return
+        instance.command.executeInsertElementList([{
+          type: ElementType.LATEX,
+          value
+        }])
+      }
+    })
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!
diff --git a/src/mock.ts b/src/mock.ts
index 2a595c7..3823964 100644
--- a/src/mock.ts
+++ b/src/mock.ts
@@ -273,7 +273,7 @@ elementList.push(...<IElement[]>[{
   value: '医学公式：'
 },
 {
-  value: `f(x) = {{{a_0}} \over 2} + \sum\limits_{n = 1}^\infty {({a_n}\cos {nx} + {b_n}\sin {nx})}`,
+  value: `{E_k} = hv - {W_0}`,
   type: ElementType.LATEX
 }, {
   value: '\n'
diff --git a/src/style.css b/src/style.css
index 0f3f9ef..6a85fc9 100644
--- a/src/style.css
+++ b/src/style.css
@@ -443,6 +443,10 @@ ul {
   background-image: url('./assets/images/checkbox.svg');
 }
 
+.menu-item__latex i {
+  background-image: url('./assets/images/latex.svg');
+}
+
 .menu-item .menu-item__control .options {
   width: 55px;
 }