feat:add checkbox menu

index.html

@@ -169,6 +169,9 @@
             </ul>
           </div>
         </div>
+        <div class="menu-item__checkbox">
+          <i></i>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">

src/assets/images/checkbox.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_1-文字_x2F_01开始_x2F_任务列表-16px"><path id="合并形状" class="st0" d="M10.1 2H2v11h11V8.7l1-1V13c0 .6-.4 1-1 1H2c-.6 0-1-.4-1-1V2c0-.6.4-1 1-1h9.1l-1 1z"/><path id="路径" class="st0" d="M7.7 8.5l5.7-5.8.9.8-6.1 5.9-.5.5-3.9-3.4.8-.7z"/></g></svg>

src/editor/core/event/CanvasEvent.ts

@@ -223,7 +223,7 @@ export class CanvasEvent {
     const isDirectHitImage = !!(isDirectHit && isImage)
     const isDirectHitCheckbox = !!(isDirectHit && isCheckbox)
     if (~index) {
-      this.range.setRange(index, index)
+      this.range.setRange(curIndex, curIndex)
       // 复选框
       const isSetCheckbox = isDirectHitCheckbox && !isReadonly
       if (isSetCheckbox) {

src/editor/core/position/Position.ts

@@ -94,9 +94,11 @@ export class Position {
               })
               if (~tablePosition.index) {
                 const { index: tdValueIndex } = tablePosition
+                const tdValueElement = td.value[tdValueIndex]
                 return {
                   index,
-                  isControl: td.value[tdValueIndex].type === ElementType.CONTROL,
+                  isCheckbox: tdValueElement.type === ElementType.CHECKBOX,
+                  isControl: tdValueElement.type === ElementType.CONTROL,
                   isImage: tablePosition.isImage,
                   isDirectHit: tablePosition.isDirectHit,
                   isTable: true,

src/editor/dataset/constant/Element.ts

@@ -46,7 +46,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
   'url',
   'colgroup',
   'valueList',
-  'control'
+  'control',
+  'checkbox'
 ]
 
 export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [

src/main.ts

@@ -492,6 +492,15 @@ window.onload = function () {
     }
   }
 
+  const checkboxDom = document.querySelector<HTMLDivElement>('.menu-item__checkbox')!
+  checkboxDom.onclick = function () {
+    console.log('checkbox')
+    instance.command.executeInsertElementList([{
+      type: ElementType.CHECKBOX,
+      value: ''
+    }])
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!
@@ -679,7 +688,8 @@ window.onload = function () {
       'separator',
       'codeblock',
       'page-break',
-      'control'
+      'control',
+      'checkbox'
     ]
     // 菜单操作权限
     disableMenusInControlContext.forEach(menu => {

src/style.css

@@ -439,6 +439,10 @@ ul {
   background-image: url('./assets/images/control.svg');
 }
 
+.menu-item__checkbox i {
+  background-image: url('./assets/images/checkbox.svg');
+}
+
 .menu-item .menu-item__control .options {
   width: 55px;
 }