@hufe921/canvas-editor 0.9.91 → 0.9.92

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.91";
+const version = "0.9.92";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -477,6 +477,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
 ];
 const TABLE_TD_ZIP_ATTR = [
   "conceptId",
+  "extension",
+  "externalId",
   "verticalAlign",
   "backgroundColor",
   "borderTypes",
@@ -4356,10 +4358,11 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
   let copyElement = getAnchorElement(sourceElementList, anchorIndex);
   if (!copyElement)
     return;
-  if ((_a = copyElement.title) == null ? void 0 : _a.disabled) {
+  const { isBreakWhenWrap = false, editorOptions } = options || {};
+  const { mode } = editorOptions || {};
+  if (mode !== EditorMode.DESIGN && ((_a = copyElement.title) == null ? void 0 : _a.disabled)) {
     copyElement = omitObject(copyElement, TITLE_CONTEXT_ATTR);
   }
-  const { isBreakWhenWrap = false } = options || {};
   let isBreakWarped = false;
   for (let e = 0; e < formatElementList2.length; e++) {
     const targetElement = formatElementList2[e];
@@ -4375,7 +4378,7 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
       continue;
     }
     if ((_c = targetElement.valueList) == null ? void 0 : _c.length) {
-      formatElementContext(sourceElementList, targetElement.valueList, anchorIndex);
+      formatElementContext(sourceElementList, targetElement.valueList, anchorIndex, options);
     }
     const cloneAttr = [...EDITOR_ELEMENT_CONTEXT_ATTR];
     if (!getIsBlockElement(targetElement)) {
@@ -5028,7 +5031,8 @@ function pasteElement(host, elementList) {
       }
     }
     formatElementContext(originalElementList, elementList, startIndex, {
-      isBreakWhenWrap: true
+      isBreakWhenWrap: true,
+      editorOptions: draw.getOptions()
     });
   }
   draw.insertElementList(elementList);
@@ -5063,7 +5067,9 @@ function pasteImage(host, file) {
         height: image.height
       };
       if (~startIndex) {
-        formatElementContext(elementList, [imageElement], startIndex);
+        formatElementContext(elementList, [imageElement], startIndex, {
+          editorOptions: draw.getOptions()
+        });
       }
       draw.insertElementList([imageElement]);
     };
@@ -5391,6 +5397,7 @@ var EditorMode;
   EditorMode2["READONLY"] = "readonly";
   EditorMode2["FORM"] = "form";
   EditorMode2["PRINT"] = "print";
+  EditorMode2["DESIGN"] = "design";
 })(EditorMode || (EditorMode = {}));
 var EditorZone;
 (function(EditorZone2) {
@@ -5595,7 +5602,10 @@ class CheckboxControl {
       nextIndex++;
     }
     control.code = codes.join(",");
-    this.control.repaintControl();
+    this.control.repaintControl({
+      curIndex: startIndex,
+      isSetCursor: false
+    });
   }
   keydown(evt) {
     if (this.control.getIsDisabledControl()) {
@@ -5647,7 +5657,10 @@ class RadioControl extends CheckboxControl {
       nextIndex++;
     }
     control.code = codes.join(",");
-    this.control.repaintControl();
+    this.control.repaintControl({
+      curIndex: startIndex,
+      isSetCursor: false
+    });
   }
 }
 function setRangeCache(host) {
@@ -5935,7 +5948,9 @@ function mouseup(evt, host) {
         return newElement;
       }
     });
-    formatElementContext(elementList, replaceElementList, range.startIndex);
+    formatElementContext(elementList, replaceElementList, range.startIndex, {
+      editorOptions: draw.getOptions()
+    });
     const cacheStartElement = cacheElementList[cacheStartIndex];
     const cacheStartPosition = cachePositionList[cacheStartIndex];
     const cacheRangeStartId = createDragId(cacheElementList[cacheStartIndex]);
@@ -6264,7 +6279,8 @@ function enter(evt, host) {
     enterText.listWrap = true;
   }
   formatElementContext(elementList, [enterText], startIndex, {
-    isBreakWhenWrap: true
+    isBreakWhenWrap: true,
+    editorOptions: draw.getOptions()
   });
   if (!(endElement.titleId && endElement.titleId !== ((_b = elementList[endIndex + 1]) == null ? void 0 : _b.titleId))) {
     const copyElement = getAnchorElement(elementList, endIndex);
@@ -6604,7 +6620,9 @@ function tab(evt, host) {
     const rangeManager = draw.getRange();
     const { startIndex } = rangeManager.getRange();
     const elementList = draw.getElementList();
-    formatElementContext(elementList, [tabElement], startIndex);
+    formatElementContext(elementList, [tabElement], startIndex, {
+      editorOptions: draw.getOptions()
+    });
     draw.insertElementList([tabElement]);
   }
 }
@@ -6980,12 +6998,13 @@ function input(data2, host) {
   const copyElement = getAnchorElement(elementList, endIndex);
   if (!copyElement)
     return;
+  const isDesignMode = draw.isDesignMode();
   const inputData = splitText(text).map((value) => {
     var _a2, _b;
     const newElement = {
       value
     };
-    if (!((_a2 = copyElement.title) == null ? void 0 : _a2.disabled) && !((_b = copyElement.control) == null ? void 0 : _b.disabled)) {
+    if (isDesignMode || !((_a2 = copyElement.title) == null ? void 0 : _a2.disabled) && !((_b = copyElement.control) == null ? void 0 : _b.disabled)) {
       const nextElement = elementList[endIndex + 1];
       if (!copyElement.type || copyElement.type === TEXT || copyElement.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || copyElement.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || copyElement.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || copyElement.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
         EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
@@ -7012,7 +7031,9 @@ function input(data2, host) {
     if (startIndex !== endIndex) {
       draw.spliceElementList(elementList, start, endIndex - startIndex);
     }
-    formatElementContext(elementList, inputData, startIndex);
+    formatElementContext(elementList, inputData, startIndex, {
+      editorOptions: draw.getOptions()
+    });
     draw.spliceElementList(elementList, start, 0, ...inputData);
     curIndex = startIndex + inputData.length;
   }
@@ -7715,6 +7736,7 @@ class Position {
     __publicField(this, "positionList");
     __publicField(this, "floatPositionList");
     __publicField(this, "draw");
+    __publicField(this, "eventBus");
     __publicField(this, "options");
     this.positionList = [];
     this.floatPositionList = [];
@@ -7724,6 +7746,7 @@ class Position {
       isControl: false
     };
     this.draw = draw;
+    this.eventBus = draw.getEventBus();
     this.options = draw.getOptions();
   }
   getFloatPositionList() {
@@ -7940,6 +7963,10 @@ class Position {
     return this.positionContext;
   }
   setPositionContext(payload) {
+    this.eventBus.emit("positionContextChange", {
+      value: payload,
+      oldValue: this.positionContext
+    });
     this.positionContext = payload;
   }
   getPositionByXY(payload) {
@@ -10701,6 +10728,8 @@ class SelectControl {
     __publicField(this, "control");
     __publicField(this, "isPopup");
     __publicField(this, "selectDom");
+    __publicField(this, "options");
+    this.options = control.getDraw().getOptions();
     this.element = element;
     this.control = control;
     this.isPopup = false;
@@ -10877,7 +10906,9 @@ class SelectControl {
         value: data2[i],
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], prefixIndex);
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     control.code = code;
@@ -10947,6 +10978,8 @@ class TextControl {
   constructor(element, control) {
     __publicField(this, "element");
     __publicField(this, "control");
+    __publicField(this, "options");
+    this.options = control.getDraw().getOptions();
     this.element = element;
     this.control = control;
   }
@@ -11010,7 +11043,9 @@ class TextControl {
       const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     return start + data2.length - 1;
@@ -11568,8 +11603,10 @@ class DateControl {
     __publicField(this, "control");
     __publicField(this, "isPopup");
     __publicField(this, "datePicker");
+    __publicField(this, "options");
     const draw = control.getDraw();
     this.draw = draw;
+    this.options = draw.getOptions();
     this.element = element;
     this.control = control;
     this.isPopup = false;
@@ -11648,7 +11685,9 @@ class DateControl {
       const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     return start + data2.length - 1;
@@ -11694,7 +11733,9 @@ class DateControl {
         value: date[i],
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], prefixIndex);
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     if (!context.range) {
@@ -11939,7 +11980,7 @@ class Control {
   }
   getIsDisabledControl(context = {}) {
     var _a, _b;
-    if (!this.activeControl)
+    if (this.draw.isDesignMode() || !this.activeControl)
       return false;
     const { startIndex, endIndex } = context.range || this.range.getRange();
     if (startIndex === endIndex && ~startIndex && ~endIndex) {
@@ -12056,7 +12097,7 @@ class Control {
     }
   }
   repaintControl(options = {}) {
-    const { curIndex, isCompute = true, isSubmitHistory = true } = options;
+    const { curIndex, isCompute = true, isSubmitHistory = true, isSetCursor = true } = options;
     if (curIndex === void 0) {
       this.range.clearRange();
       this.draw.render({
@@ -12069,6 +12110,7 @@ class Control {
       this.draw.render({
         curIndex,
         isCompute,
+        isSetCursor,
         isSubmitHistory
       });
     }
@@ -12146,9 +12188,11 @@ class Control {
   removeControl(startIndex, context = {}) {
     const elementList = context.elementList || this.getElementList();
     const startElement = elementList[startIndex];
-    const { deletable = true } = startElement.control;
-    if (!deletable)
-      return null;
+    if (!this.draw.isDesignMode()) {
+      const { deletable = true } = startElement.control;
+      if (!deletable)
+        return null;
+    }
     let leftIndex = -1;
     let rightIndex = -1;
     let preIndex = startIndex;
@@ -12220,7 +12264,9 @@ class Control {
         controlComponent: ControlComponent.PLACEHOLDER,
         color: this.controlOptions.placeholderColor
       });
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       this.draw.spliceElementList(elementList, startIndex + p + 1, 0, newElement);
     }
   }
@@ -13109,10 +13155,12 @@ class Previewer {
     return { x, y };
   }
   _createResizerDom() {
+    const { scale } = this.options;
     const resizerSelection = document.createElement("div");
     resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`);
     resizerSelection.style.display = "none";
     resizerSelection.style.borderColor = this.options.resizerColor;
+    resizerSelection.style.borderWidth = `${scale}px`;
     const resizerHandleList = [];
     for (let i = 0; i < 8; i++) {
       const handleDom = document.createElement("div");
@@ -13365,12 +13413,13 @@ class Previewer {
     document.body.style.overflow = "auto";
   }
   _updateResizerRect(width, height) {
-    const handleSize = this.options.resizerSize;
+    const { resizerSize: handleSize, scale } = this.options;
     this.resizerSelection.style.width = `${width}px`;
     this.resizerSelection.style.height = `${height}px`;
     for (let i = 0; i < 8; i++) {
       const left2 = i === 0 || i === 6 || i === 7 ? -handleSize : i === 1 || i === 5 ? width / 2 : width - handleSize;
       const top = i === 0 || i === 1 || i === 2 ? -handleSize : i === 3 || i === 7 ? height / 2 - handleSize : height - handleSize;
+      this.resizerHandleList[i].style.transform = `scale(${scale})`;
       this.resizerHandleList[i].style.left = `${left2}px`;
       this.resizerHandleList[i].style.top = `${top}px`;
     }
@@ -13396,6 +13445,7 @@ class Previewer {
     const { x: resizerLeft, y: resizerTop } = this._getElementPosition(element, position);
     this.resizerSelection.style.left = `${resizerLeft}px`;
     this.resizerSelection.style.top = `${resizerTop}px`;
+    this.resizerSelection.style.borderWidth = `${scale}px`;
     this._updateResizerRect(elementWidth, elementHeight);
     this.resizerSelection.style.display = "block";
     this.curElement = element;
@@ -13413,7 +13463,9 @@ class DateParticle {
     __publicField(this, "draw");
     __publicField(this, "range");
     __publicField(this, "datePicker");
+    __publicField(this, "options");
     this.draw = draw;
+    this.options = draw.getOptions();
     this.range = draw.getRange();
     this.datePicker = new DatePicker(draw, {
       onSubmit: this._setValue.bind(this)
@@ -13440,7 +13492,9 @@ class DateParticle {
         }
       ]
     };
-    formatElementContext(elementList, [dateElement], leftIndex);
+    formatElementContext(elementList, [dateElement], leftIndex, {
+      editorOptions: this.options
+    });
     this.draw.insertElementList([dateElement]);
   }
   getDateElementRange() {
@@ -14764,6 +14818,26 @@ class PageBorder {
     ctx.restore();
   }
 }
+function positionContextChange(draw, payload) {
+  const { value, oldValue } = payload;
+  if (oldValue.isTable && !value.isTable) {
+    draw.getTableTool().dispose();
+  }
+}
+class Actuator {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "eventBus");
+    this.draw = draw;
+    this.eventBus = draw.getEventBus();
+    this.execute();
+  }
+  execute() {
+    this.eventBus.on("positionContextChange", (payload) => {
+      positionContextChange(this.draw, payload);
+    });
+  }
+}
 class Draw {
   constructor(rootContainer, options, data2, listener, eventBus, override) {
     __publicField(this, "container");
@@ -14893,6 +14967,7 @@ class Draw {
     this.globalEvent = new GlobalEvent(this, this.canvasEvent);
     this.globalEvent.register();
     this.workerManager = new WorkerManager(this);
+    new Actuator(this);
     const { letterClass } = options;
     this.LETTER_REG = new RegExp(`[${letterClass.join("")}]`);
     this.WORD_LIKE_REG = new RegExp(`${letterClass.map((letter) => `[^${letter}][${letter}]`).join("|")}`);
@@ -14947,6 +15022,8 @@ class Draw {
   }
   isReadonly() {
     switch (this.mode) {
+      case EditorMode.DESIGN:
+        return false;
       case EditorMode.READONLY:
       case EditorMode.PRINT:
         return true;
@@ -14957,13 +15034,17 @@ class Draw {
     }
   }
   isDisabled() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
+    if (this.mode === EditorMode.DESIGN)
+      return false;
     const { startIndex, endIndex } = this.range.getRange();
     const elementList = this.getElementList();
+    if ((_a = this.getTd()) == null ? void 0 : _a.disabled)
+      return true;
     if (startIndex === endIndex) {
       const startElement = elementList[startIndex];
       const nextElement = elementList[startIndex + 1];
-      return !!(((_a = startElement == null ? void 0 : startElement.title) == null ? void 0 : _a.disabled) && ((_b = nextElement == null ? void 0 : nextElement.title) == null ? void 0 : _b.disabled) || ((_c = startElement == null ? void 0 : startElement.control) == null ? void 0 : _c.disabled) && ((_d = nextElement == null ? void 0 : nextElement.control) == null ? void 0 : _d.disabled));
+      return !!(((_b = startElement == null ? void 0 : startElement.title) == null ? void 0 : _b.disabled) && ((_c = nextElement == null ? void 0 : nextElement.title) == null ? void 0 : _c.disabled) || ((_d = startElement == null ? void 0 : startElement.control) == null ? void 0 : _d.disabled) && ((_e = nextElement == null ? void 0 : nextElement.control) == null ? void 0 : _e.disabled));
     }
     const selectionElementList = elementList.slice(startIndex + 1, endIndex + 1);
     return selectionElementList.some((element) => {
@@ -14971,6 +15052,9 @@ class Draw {
       return ((_a2 = element.title) == null ? void 0 : _a2.disabled) || ((_b2 = element.control) == null ? void 0 : _b2.disabled);
     });
   }
+  isDesignMode() {
+    return this.mode === EditorMode.DESIGN;
+  }
   getOriginalWidth() {
     const { paperDirection, width, height } = this.options;
     return paperDirection === PaperDirection.VERTICAL ? width : height;
@@ -15182,6 +15266,15 @@ class Draw {
   getFooterElementList() {
     return this.footer.getElementList();
   }
+  getTd() {
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, trIndex, tdIndex, isTable } = positionContext;
+    if (isTable) {
+      const elementList = this.getOriginalElementList();
+      return elementList[index2].trList[trIndex].tdList[tdIndex];
+    }
+    return null;
+  }
   insertElementList(payload) {
     if (!payload.length || !this.range.getIsCanInput())
       return;
@@ -15246,7 +15339,8 @@ class Draw {
     });
   }
   spliceElementList(elementList, start, deleteCount, ...items) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
+    const isDesignMode = this.isDesignMode();
     if (deleteCount > 0) {
       const endIndex = start + deleteCount;
       const endElement = elementList[endIndex];
@@ -15265,10 +15359,11 @@ class Draw {
         }
       }
       if (!this.control.getActiveControl()) {
+        const tdDeletable = (_b = this.getTd()) == null ? void 0 : _b.deletable;
         let deleteIndex = endIndex - 1;
         while (deleteIndex >= start) {
           const deleteElement = elementList[deleteIndex];
-          if (((_b = deleteElement == null ? void 0 : deleteElement.control) == null ? void 0 : _b.deletable) !== false && ((_c = deleteElement == null ? void 0 : deleteElement.title) == null ? void 0 : _c.deletable) !== false) {
+          if (isDesignMode || tdDeletable !== false && ((_c = deleteElement == null ? void 0 : deleteElement.control) == null ? void 0 : _c.deletable) !== false && ((_d = deleteElement == null ? void 0 : deleteElement.title) == null ? void 0 : _d.deletable) !== false) {
             elementList.splice(deleteIndex, 1);
           }
           deleteIndex--;
@@ -16096,18 +16191,22 @@ class Draw {
     return pageRowList;
   }
   _drawHighlight(ctx, payload) {
+    var _a;
+    const { control: { activeBackgroundColor } } = this.options;
     const { rowList, positionList } = payload;
+    const activeControlElement = (_a = this.control.getActiveControl()) == null ? void 0 : _a.getElement();
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i];
       for (let j = 0; j < curRow.elementList.length; j++) {
         const element = curRow.elementList[j];
         const preElement = curRow.elementList[j - 1];
-        if (element.highlight) {
+        if (element.highlight || activeBackgroundColor && activeControlElement && element.controlId === activeControlElement.controlId && !this.control.getIsRangeInPostfix()) {
           if (preElement && preElement.highlight && preElement.highlight !== element.highlight) {
             this.highlight.render(ctx);
           }
           const { coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex + j];
-          this.highlight.recordFillInfo(ctx, x, y, element.metrics.width, curRow.height, element.highlight);
+          const offsetX = element.left || 0;
+          this.highlight.recordFillInfo(ctx, x - offsetX, y, element.metrics.width + offsetX, curRow.height, element.highlight || activeBackgroundColor);
         } else if (preElement == null ? void 0 : preElement.highlight) {
           this.highlight.render(ctx);
         }
@@ -16683,6 +16782,7 @@ class Command {
     __publicField(this, "executeInsertControl");
     __publicField(this, "executeUpdateOptions");
     __publicField(this, "executeInsertTitle");
+    __publicField(this, "executeFocus");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getOptions");
@@ -16792,6 +16892,7 @@ class Command {
     this.executeSetZone = adapt.setZone.bind(adapt);
     this.executeUpdateOptions = adapt.updateOptions.bind(adapt);
     this.executeInsertTitle = adapt.insertTitle.bind(adapt);
+    this.executeFocus = adapt.focus.bind(adapt);
     this.getImage = adapt.getImage.bind(adapt);
     this.getOptions = adapt.getOptions.bind(adapt);
     this.getValue = adapt.getValue.bind(adapt);
@@ -16851,7 +16952,8 @@ const defaultControlOption = {
   prefix: "{",
   postfix: "}",
   borderWidth: 1,
-  borderColor: "#000000"
+  borderColor: "#000000",
+  activeBackgroundColor: ""
 };
 const defaultFooterOption = {
   bottom: 30,
@@ -17109,8 +17211,8 @@ class CommandAdapt {
     this.draw.setMode(payload);
   }
   cut() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     this.canvasEvent.cut();
   }
@@ -17118,8 +17220,8 @@ class CommandAdapt {
     this.canvasEvent.copy();
   }
   paste(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     pasteByApi(this.canvasEvent, payload);
   }
@@ -17127,8 +17229,8 @@ class CommandAdapt {
     this.canvasEvent.selectAll();
   }
   backspace() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const elementList = this.draw.getElementList();
     const { startIndex, endIndex } = this.range.getRange();
@@ -17601,8 +17703,8 @@ class CommandAdapt {
     }
   }
   title(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
@@ -17679,8 +17781,8 @@ class CommandAdapt {
   }
   insertTable(row, col) {
     var _a;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -17731,7 +17833,9 @@ class CommandAdapt {
     formatElementList([element], {
       editorOptions: this.options
     });
-    formatElementContext(elementList, [element], startIndex);
+    formatElementContext(elementList, [element], startIndex, {
+      editorOptions: this.options
+    });
     const curIndex = startIndex + 1;
     this.draw.spliceElementList(elementList, curIndex, startIndex === endIndex ? 0 : endIndex - startIndex, element);
     this.range.setRange(curIndex, curIndex);
@@ -18414,8 +18518,8 @@ class CommandAdapt {
     });
   }
   hyperlink(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -18435,7 +18539,9 @@ class CommandAdapt {
     if (!newElementList)
       return;
     const start = startIndex + 1;
-    formatElementContext(elementList, newElementList, startIndex);
+    formatElementContext(elementList, newElementList, startIndex, {
+      editorOptions: this.options
+    });
     this.draw.spliceElementList(elementList, start, startIndex === endIndex ? 0 : endIndex - startIndex, ...newElementList);
     const curIndex = start + newElementList.length - 1;
     this.range.setRange(curIndex, curIndex);
@@ -18477,8 +18583,8 @@ class CommandAdapt {
     return [leftIndex, rightIndex];
   }
   deleteHyperlink() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const hyperRange = this.getHyperlinkRange();
     if (!hyperRange)
@@ -18494,8 +18600,8 @@ class CommandAdapt {
     });
   }
   cancelHyperlink() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const hyperRange = this.getHyperlinkRange();
     if (!hyperRange)
@@ -18517,8 +18623,8 @@ class CommandAdapt {
     });
   }
   editHyperlink(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const hyperRange = this.getHyperlinkRange();
     if (!hyperRange)
@@ -18537,8 +18643,8 @@ class CommandAdapt {
     });
   }
   separator(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -18561,7 +18667,9 @@ class CommandAdapt {
         type: ElementType.SEPARATOR,
         dashArray: payload
       };
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       if (startIndex !== 0 && elementList[startIndex].value === ZERO) {
         this.draw.spliceElementList(elementList, startIndex, 1, newElement);
         curIndex = startIndex - 1;
@@ -18574,8 +18682,8 @@ class CommandAdapt {
     this.draw.render({ curIndex });
   }
   pageBreak() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -18997,14 +19105,15 @@ class CommandAdapt {
   insertElementList(payload) {
     if (!payload.length)
       return;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const cloneElementList = deepClone(payload);
     const { startIndex } = this.range.getRange();
     const elementList = this.draw.getElementList();
     formatElementContext(elementList, cloneElementList, startIndex, {
-      isBreakWhenWrap: true
+      isBreakWhenWrap: true,
+      editorOptions: this.options
     });
     this.draw.insertElementList(cloneElementList);
   }
@@ -19284,8 +19393,8 @@ class CommandAdapt {
     }
   }
   insertControl(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const cloneElement = deepClone(payload);
     const { startIndex } = this.range.getRange();
@@ -19410,8 +19519,8 @@ class CommandAdapt {
   }
   insertTitle(payload) {
     var _a;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const cloneElement = deepClone(payload);
     const { startIndex } = this.range.getRange();
@@ -19429,6 +19538,21 @@ class CommandAdapt {
     });
     this.draw.insertElementList([cloneElement]);
   }
+  focus(payload) {
+    const { position = LocationPosition.AFTER } = payload || {};
+    const curIndex = position === LocationPosition.BEFORE ? 0 : this.draw.getOriginalMainElementList().length - 1;
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({
+      curIndex,
+      isCompute: false,
+      isSubmitHistory: false
+    });
+    const positionList = this.draw.getPosition().getPositionList();
+    this.draw.getCursor().moveCursorToVisible({
+      cursorPosition: positionList[curIndex],
+      direction: MoveDirection.DOWN
+    });
+  }
 }
 class Listener {
   constructor() {