feat:菜单栏状态边界处理

src/editor/core/event/GlobalEvent.ts

@@ -27,28 +27,34 @@ export class GlobalEvent {
       this.setRangeStyle()
     })
     document.addEventListener('click', (evt) => {
-      this.recoverCursor(evt)
+      this.recoverEffect(evt)
-      this.setRangeStyle()
     })
     document.addEventListener('mouseup', () => {
       this.setDragState()
     })
   }
 
-  recoverCursor(evt: MouseEvent) {
+  recoverEffect(evt: MouseEvent) {
     if (!this.cursor) return
     const cursorDom = this.cursor.getCursorDom()
     const agentDom = this.cursor.getAgentDom()
     const innerDoms = [this.canvas, cursorDom, agentDom, document.body]
-    if (innerDoms.includes(evt.target as any)) return
+    if (innerDoms.includes(evt.target as any)) {
+      this.setRangeStyle()
+      return
+    }
     // 编辑器外部dom
     const outerEditorDom = findParent(
       evt.target as Element,
       (node: Node & Element) => !!node && node.nodeType === 1 && !!node.getAttribute(EDITOR_COMPONENT),
       true
     )
-    if (outerEditorDom) return
+    if (outerEditorDom) {
+      this.setRangeStyle()
+      return
+    }
     this.cursor.recoveryCursor()
+    this.range.recoveryRangeStyle()
   }
 
   setDragState() {

src/editor/core/range/RangeManager.ts

@@ -75,6 +75,24 @@ export class RangeManager {
     })
   }
 
+  public recoveryRangeStyle() {
+    if (!this.listener.rangeStyleChange) return
+    const painter = !!this.draw.getPainterStyle()
+    const undo = this.historyManager.isCanUndo()
+    const redo = this.historyManager.isCanRedo()
+    this.listener.rangeStyleChange({
+      undo,
+      redo,
+      painter,
+      bold: false,
+      italic: false,
+      underline: false,
+      strikeout: false,
+      color: null,
+      highlight: null
+    })
+  }
+
   public render(x: number, y: number, width: number, height: number) {
     this.ctx.save()
     this.ctx.globalAlpha = this.options.rangeAlpha

src/main.ts

@@ -18,6 +18,12 @@ window.onload = function () {
     const i = text.indexOf(b)
     return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
   }).flat()
+  // 模拟高亮字
+  const highlightText = ['血细胞比容']
+  const highlightIndex: number[] = highlightText.map(b => {
+    const i = text.indexOf(b)
+    return ~i ? Array(b.length).fill(i).map((_, j) => i + j) : []
+  }).flat()
   // 组合数据
   const data = text.split('').map((value, index) => {
     if (boldIndex.includes(index)) {
@@ -34,6 +40,12 @@ window.onload = function () {
         size: 16
       }
     }
+    if (highlightIndex.includes(index)) {
+      return {
+        value,
+        highlight: '#F2F27F'
+      }
+    }
     return {
       value,
       size: 16