feat:add date menu

index.html

@@ -176,6 +176,15 @@
         <div class="menu-item__latex">
           <i></i>
         </div>
+        <div class="menu-item__date">
+          <i></i>
+          <div class="options">
+            <ul>
+              <li data-format="yyyy-MM-dd"></li>
+              <li data-format="yyyy-MM-dd hh:mm:ss"></li>
+            </ul>
+          </div>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">

src/assets/images/date.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M7.5 14.154a5.654 5.654 0 100-11.308 5.654 5.654 0 000 11.308zm0 .846a6.5 6.5 0 110-13 6.5 6.5 0 010 13z" fill-rule="nonzero"/><path d="M8 8h4v1H7V4h1v4z"/></g></svg>

src/editor/assets/css/date/datePicker.css

@@ -156,6 +156,7 @@
   height: calc(100% - 20px);
   overflow-y: auto;
   border: 1px solid #e2e2e2;
+  position: relative;
 }
 
 .time-wrap>li:first-child>ol {

src/main.ts

@@ -156,7 +156,7 @@ window.onload = function () {
     instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
   }
 
-  // 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX
+  // 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')!
@@ -563,6 +563,48 @@ window.onload = function () {
     })
   }
 
+  const dateDom = document.querySelector<HTMLDivElement>('.menu-item__date')!
+  const dateDomOptionDom = dateDom.querySelector<HTMLDivElement>('.options')!
+  dateDom.onclick = function () {
+    console.log('date')
+    dateDomOptionDom.classList.toggle('visible')
+    // 定位调整
+    const bodyRect = document.body.getBoundingClientRect()
+    const dateDomOptionRect = dateDomOptionDom.getBoundingClientRect()
+    if (dateDomOptionRect.left + dateDomOptionRect.width > bodyRect.width) {
+      dateDomOptionDom.style.right = '0px'
+      dateDomOptionDom.style.left = 'unset'
+    } else {
+      dateDomOptionDom.style.right = 'unset'
+      dateDomOptionDom.style.left = '0px'
+    }
+    // 当前日期
+    const date = new Date()
+    const year = date.getFullYear().toString()
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    const day = date.getDate().toString().padStart(2, '0')
+    const hour = date.getHours().toString().padStart(2, '0')
+    const minute = date.getMinutes().toString().padStart(2, '0')
+    const second = date.getSeconds().toString().padStart(2, '0')
+    const dateString = `${year}-${month}-${day}`
+    const dateTimeString = `${dateString} ${hour}:${minute}:${second}`
+    dateDomOptionDom.querySelector<HTMLLIElement>('li:first-child')!.innerText = dateString
+    dateDomOptionDom.querySelector<HTMLLIElement>('li:last-child')!.innerText = dateTimeString
+  }
+  dateDomOptionDom.onmousedown = function (evt) {
+    const li = evt.target as HTMLLIElement
+    const dateFormat = li.dataset.format!
+    dateDomOptionDom.classList.toggle('visible')
+    instance.command.executeInsertElementList([{
+      type: ElementType.DATE,
+      value: '',
+      dateFormat,
+      valueList: [{
+        value: li.innerText.trim(),
+      }]
+    }])
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!

src/style.css

@@ -59,7 +59,7 @@ ul {
 .menu-divider {
   width: 1px;
   height: 16px;
-  margin: 0 6px;
+  margin: 0 8px;
   display: inline-block;
   background-color: #cfd2d8;
 }
@@ -78,7 +78,7 @@ ul {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 0 5px;
+  margin: 0 4px;
 }
 
 .menu-item>div:hover {
@@ -447,6 +447,18 @@ ul {
   background-image: url('./assets/images/latex.svg');
 }
 
+.menu-item__date {
+  position: relative;
+}
+
+.menu-item__date i {
+  background-image: url('./assets/images/date.svg');
+}
+
+.menu-item__date .options {
+  width: 150px;
+}
+
 .menu-item .menu-item__control .options {
   width: 55px;
 }