feat:add LaTeX menu

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">

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>

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')!

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'

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;
 }