@hufe921/canvas-editor 0.9.29 → 0.9.31

package/dist/canvas-editor.es.js

@@ -23,13 +23,18 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.29";
+const version = "0.9.31";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
   MaxHeightRatio2["ONE_THIRD"] = "one-third";
   MaxHeightRatio2["QUARTER"] = "quarter";
 })(MaxHeightRatio || (MaxHeightRatio = {}));
+var NumberType;
+(function(NumberType2) {
+  NumberType2["ARABIC"] = "arabic";
+  NumberType2["CHINESE"] = "chinese";
+})(NumberType || (NumberType = {}));
 const ZERO = "\u200B";
 const WRAP = "\n";
 const PUNCTUATION_LIST = ["\xB7", "\u3001", ":", "\uFF1A", ",", "\uFF0C", ".", "\u3002", ";", "\uFF1B", "?", "\uFF1F", "!", "\uFF01"];
@@ -147,6 +152,26 @@ function nextTick(fn) {
     fn();
   }, 0);
 }
+function convertNumberToChinese(num) {
+  const chineseNum = ["\u96F6", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u4E03", "\u516B", "\u4E5D"];
+  const chineseUnit = ["", "\u5341", "\u767E", "\u5343", "\u4E07", "\u5341", "\u767E", "\u5343", "\u4EBF", "\u5341", "\u767E", "\u5343", "\u4E07", "\u5341", "\u767E", "\u5343", "\u4EBF"];
+  if (!num || isNaN(num))
+    return "\u96F6";
+  const numStr = num.toString().split("");
+  let result = "";
+  for (let i = 0; i < numStr.length; i++) {
+    const desIndex = numStr.length - 1 - i;
+    result = `${chineseUnit[i]}${result}`;
+    result = `${chineseNum[Number(numStr[desIndex])]}${result}`;
+  }
+  result = result.replace(/零(千|百|十)/g, "\u96F6").replace(/十零/g, "\u5341");
+  result = result.replace(/零+/g, "\u96F6");
+  result = result.replace(/零亿/g, "\u4EBF").replace(/零万/g, "\u4E07");
+  result = result.replace(/亿万/g, "\u4EBF");
+  result = result.replace(/零+$/, "");
+  result = result.replace(/^一十/g, "\u5341");
+  return result;
+}
 const CURSOR_AGENT_HEIGHT = 12;
 const defaultCursorOption = {
   width: 1,
@@ -172,6 +197,7 @@ var ElementType;
   ElementType2["TAB"] = "tab";
   ElementType2["DATE"] = "date";
   ElementType2["BLOCK"] = "block";
+  ElementType2["TITLE"] = "title";
 })(ElementType || (ElementType = {}));
 const EDITOR_ELEMENT_STYLE_ATTR = [
   "bold",
@@ -197,7 +223,9 @@ const EDITOR_ELEMENT_COPY_ATTR = [
   "url",
   "hyperlinkId",
   "dateId",
-  "dateFormat"
+  "dateFormat",
+  "level",
+  "titleId"
 ];
 const EDITOR_ELEMENT_ZIP_ATTR = [
   "type",
@@ -222,7 +250,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "control",
   "checkbox",
   "dateFormat",
-  "block"
+  "block",
+  "level"
 ];
 const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.TEXT,
@@ -238,6 +267,51 @@ const INLINE_ELEMENT_TYPE = [
   ElementType.SEPARATOR,
   ElementType.TABLE
 ];
+const INLINE_NODE_NAME = [
+  "HR",
+  "TABLE"
+];
+var TitleLevel;
+(function(TitleLevel2) {
+  TitleLevel2["FIRST"] = "first";
+  TitleLevel2["SECOND"] = "second";
+  TitleLevel2["THIRD"] = "third";
+  TitleLevel2["FOURTH"] = "fourth";
+  TitleLevel2["FIFTH"] = "fifth";
+  TitleLevel2["SIXTH"] = "sixth";
+})(TitleLevel || (TitleLevel = {}));
+const defaultTitleOption = {
+  defaultFirstSize: 26,
+  defaultSecondSize: 24,
+  defaultThirdSize: 22,
+  defaultFourthSize: 20,
+  defaultFifthSize: 18,
+  defaultSixthSize: 16
+};
+const titleSizeMapping = {
+  [TitleLevel.FIRST]: "defaultFirstSize",
+  [TitleLevel.SECOND]: "defaultSecondSize",
+  [TitleLevel.THIRD]: "defaultThirdSize",
+  [TitleLevel.FOURTH]: "defaultFourthSize",
+  [TitleLevel.FIFTH]: "defaultFifthSize",
+  [TitleLevel.SIXTH]: "defaultSixthSize"
+};
+const titleOrderNumberMapping = {
+  [TitleLevel.FIRST]: 1,
+  [TitleLevel.SECOND]: 2,
+  [TitleLevel.THIRD]: 3,
+  [TitleLevel.FOURTH]: 4,
+  [TitleLevel.FIFTH]: 5,
+  [TitleLevel.SIXTH]: 6
+};
+const titleNodeNameMapping = {
+  "H1": TitleLevel.FIRST,
+  "H2": TitleLevel.SECOND,
+  "H3": TitleLevel.THIRD,
+  "H4": TitleLevel.FOURTH,
+  "H5": TitleLevel.FIFTH,
+  "H6": TitleLevel.SIXTH
+};
 var ControlType;
 (function(ControlType2) {
   ControlType2["TEXT"] = "text";
@@ -3268,6 +3342,17 @@ const defaultControlOption = {
   prefix: "{",
   postfix: "}"
 };
+function unzipElementList(elementList) {
+  const result = [];
+  for (let v = 0; v < elementList.length; v++) {
+    const valueItem = elementList[v];
+    const textList = splitText(valueItem.value);
+    for (let d = 0; d < textList.length; d++) {
+      result.push(__spreadProps(__spreadValues({}, valueItem), { value: textList[d] }));
+    }
+  }
+  return result;
+}
 function formatElementList(elementList, options) {
   var _a;
   const { isHandleFirstElement, editorOptions } = __spreadValues({
@@ -3292,6 +3377,9 @@ function formatElementList(elementList, options) {
           if (!tr.minHeight || tr.minHeight < editorOptions.defaultTrMinHeight) {
             tr.minHeight = editorOptions.defaultTrMinHeight;
           }
+          if (tr.height < tr.minHeight) {
+            tr.height = tr.minHeight;
+          }
           for (let d = 0; d < tr.tdList.length; d++) {
             const td = tr.tdList[d];
             const tdId = getUUID();
@@ -3309,16 +3397,9 @@ function formatElementList(elementList, options) {
         }
       }
     } else if (el.type === ElementType.HYPERLINK) {
-      const valueList = el.valueList || [];
       elementList.splice(i, 1);
+      const valueList = unzipElementList(el.valueList || []);
       if (valueList.length) {
-        if (valueList[0].value.length > 1) {
-          const deleteValue = valueList.splice(0, 1)[0];
-          const deleteTextList = splitText(deleteValue.value);
-          for (let d = 0; d < deleteTextList.length; d++) {
-            valueList.splice(d, 0, __spreadProps(__spreadValues({}, deleteValue), { value: deleteTextList[d] }));
-          }
-        }
         const hyperlinkId = getUUID();
         for (let v = 0; v < valueList.length; v++) {
           const value = valueList[v];
@@ -3331,16 +3412,9 @@ function formatElementList(elementList, options) {
       }
       i--;
     } else if (el.type === ElementType.DATE) {
-      const valueList = el.valueList || [];
       elementList.splice(i, 1);
+      const valueList = unzipElementList(el.valueList || []);
       if (valueList.length) {
-        if (valueList[0].value.length > 1) {
-          const deleteValue = valueList.splice(0, 1)[0];
-          const deleteTextList = splitText(deleteValue.value);
-          for (let d = 0; d < deleteTextList.length; d++) {
-            valueList.splice(d, 0, __spreadProps(__spreadValues({}, deleteValue), { value: deleteTextList[d] }));
-          }
-        }
         const dateId = getUUID();
         for (let v = 0; v < valueList.length; v++) {
           const value = valueList[v];
@@ -3352,6 +3426,32 @@ function formatElementList(elementList, options) {
         }
       }
       i--;
+    } else if (el.type === ElementType.TITLE) {
+      elementList.splice(i, 1);
+      const valueList = el.valueList || [];
+      formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
+        isHandleFirstElement: false
+      }));
+      if (valueList.length) {
+        const titleId = getUUID();
+        const titleOptions = editorOptions.title;
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v];
+          value.titleId = titleId;
+          value.level = el.level;
+          if (isTextLikeElement(value)) {
+            if (!value.size) {
+              value.size = titleOptions[titleSizeMapping[value.level]];
+            }
+            if (value.bold === void 0) {
+              value.bold = true;
+            }
+          }
+          elementList.splice(i, 0, value);
+          i++;
+        }
+      }
+      i--;
     } else if (el.type === ElementType.CONTROL) {
       const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control;
       const controlId = getUUID();
@@ -3591,6 +3691,27 @@ function zipElementList(payload) {
       }
       dateElement.valueList = zipElementList(valueList);
       element = dateElement;
+    } else if (element.titleId && element.level) {
+      const titleId = element.titleId;
+      const level = element.level;
+      const titleElement = {
+        type: ElementType.TITLE,
+        value: "",
+        level
+      };
+      const valueList = [];
+      while (e < elementList.length) {
+        const titleE = elementList[e];
+        if (titleId !== titleE.titleId) {
+          e--;
+          break;
+        }
+        delete titleE.level;
+        valueList.push(titleE);
+        e++;
+      }
+      titleElement.valueList = zipElementList(valueList);
+      element = titleElement;
     } else if (element.type === ElementType.CONTROL) {
       const controlId = element.controlId;
       const control = element.control;
@@ -3652,6 +3773,9 @@ function getElementRowFlex(node) {
       return RowFlex.LEFT;
   }
 }
+function isTextLikeElement(element) {
+  return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type);
+}
 function writeClipboardItem(text, html) {
   if (!text || !html)
     return;
@@ -3677,10 +3801,36 @@ function writeClipboardItem(text, html) {
     fakeElement.remove();
   }
 }
+function convertElementToDom(element, options) {
+  const isBlock = element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT;
+  const dom = document.createElement(isBlock ? "p" : "span");
+  dom.style.fontFamily = element.font || options.defaultFont;
+  if (element.rowFlex) {
+    const isAlignment = element.rowFlex === RowFlex.ALIGNMENT;
+    dom.style.textAlign = isAlignment ? "justify" : element.rowFlex;
+  }
+  if (element.color) {
+    dom.style.color = element.color;
+  }
+  if (element.bold) {
+    dom.style.fontWeight = "600";
+  }
+  if (element.italic) {
+    dom.style.fontStyle = "italic";
+  }
+  if (element.size) {
+    dom.style.fontSize = `${element.size}px`;
+  }
+  if (element.highlight) {
+    dom.style.backgroundColor = element.highlight;
+  }
+  dom.innerText = element.value.replace(new RegExp(`${ZERO}`, "g"), "\n");
+  return dom;
+}
 function writeElementList(elementList, options) {
-  const clipboardDom = document.createElement("div");
   function buildDomFromElementList(payload) {
     var _a, _b, _c, _d, _e;
+    const clipboardDom2 = document.createElement("div");
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e];
       if (element.type === ElementType.TABLE) {
@@ -3695,19 +3845,25 @@ function writeElementList(elementList, options) {
             const td = tr.tdList[d];
             tdDom.colSpan = td.colspan;
             tdDom.rowSpan = td.rowspan;
-            tdDom.innerText = ((_a = td.value[0]) == null ? void 0 : _a.value) || "";
+            const childDom = buildDomFromElementList(zipElementList(td.value));
+            tdDom.innerHTML = childDom.innerHTML;
             trDom.append(tdDom);
           }
           tableDom.append(trDom);
         }
-        clipboardDom.append(tableDom);
+        clipboardDom2.append(tableDom);
       } else if (element.type === ElementType.HYPERLINK) {
         const a = document.createElement("a");
-        a.innerText = element.valueList[0].value;
+        a.innerText = element.valueList.map((v) => v.value).join("");
         if (element.url) {
           a.href = element.url;
         }
-        clipboardDom.append(a);
+        clipboardDom2.append(a);
+      } else if (element.type === ElementType.TITLE) {
+        const h = document.createElement(`h${titleOrderNumberMapping[element.level]}`);
+        const childDom = buildDomFromElementList(zipElementList(element.valueList));
+        h.innerHTML = childDom.innerHTML;
+        clipboardDom2.append(h);
       } else if (element.type === ElementType.IMAGE) {
         const img = document.createElement("img");
         if (element.value) {
@@ -3715,56 +3871,39 @@ function writeElementList(elementList, options) {
           img.width = element.width;
           img.height = element.height;
         }
-        clipboardDom.append(img);
+        clipboardDom2.append(img);
       } else if (element.type === ElementType.SEPARATOR) {
         const hr = document.createElement("hr");
-        clipboardDom.append(hr);
+        clipboardDom2.append(hr);
       } else if (element.type === ElementType.CHECKBOX) {
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
-        if ((_b = element.checkbox) == null ? void 0 : _b.value) {
+        if ((_a = element.checkbox) == null ? void 0 : _a.value) {
           checkbox.setAttribute("checked", "true");
         }
-        clipboardDom.append(checkbox);
+        clipboardDom2.append(checkbox);
       } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
         let text2 = "";
         if (element.type === ElementType.CONTROL) {
-          text2 = ((_d = (_c = element.control.value) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "";
+          text2 = ((_c = (_b = element.control.value) == null ? void 0 : _b[0]) == null ? void 0 : _c.value) || "";
         } else if (element.type === ElementType.DATE) {
-          text2 = ((_e = element.valueList) == null ? void 0 : _e.map((v) => v.value).join("")) || "";
+          text2 = ((_d = element.valueList) == null ? void 0 : _d.map((v) => v.value).join("")) || "";
         } else {
           text2 = element.value;
         }
         if (!text2)
           continue;
-        const isBlock = element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT;
-        const dom = document.createElement(isBlock ? "p" : "span");
-        dom.innerText = text2.replace(new RegExp(`${ZERO}`, "g"), "\n");
-        dom.style.fontFamily = element.font || options.defaultFont;
-        if (element.rowFlex) {
-          const isAlignment = element.rowFlex === RowFlex.ALIGNMENT;
-          dom.style.textAlign = isAlignment ? "justify" : element.rowFlex;
-        }
-        if (element.color) {
-          dom.style.color = element.color;
-        }
-        if (element.bold) {
-          dom.style.fontWeight = "600";
-        }
-        if (element.italic) {
-          dom.style.fontStyle = "italic";
-        }
-        if (element.size) {
-          dom.style.fontSize = `${element.size}px`;
-        }
-        if (element.highlight) {
-          dom.style.backgroundColor = element.highlight;
+        if (((_e = payload[e - 1]) == null ? void 0 : _e.type) === ElementType.TITLE) {
+          text2 = text2.replace(/^\n/, "");
         }
-        clipboardDom.append(dom);
+        const dom = convertElementToDom(element, options);
+        dom.innerText = text2.replace(new RegExp(`${ZERO}`, "g"), "\n");
+        clipboardDom2.append(dom);
       }
     }
+    return clipboardDom2;
   }
-  buildDomFromElementList(zipElementList(elementList));
+  const clipboardDom = buildDomFromElementList(zipElementList(elementList));
   document.body.append(clipboardDom);
   const text = clipboardDom.innerText;
   clipboardDom.remove();
@@ -3818,6 +3957,20 @@ function getElementListByHTML(htmlText, options) {
               url: aElement.href
             });
           }
+        } else if (/H[1-6]/.test(node.nodeName)) {
+          const hElement = node;
+          const valueList = getElementListByHTML(hElement.innerHTML, options);
+          elementList.push({
+            value: "",
+            type: ElementType.TITLE,
+            level: titleNodeNameMapping[node.nodeName],
+            valueList
+          });
+          if (node.nextSibling && !INLINE_NODE_NAME.includes(node.nextSibling.nodeName)) {
+            elementList.push({
+              value: "\n"
+            });
+          }
         } else if (node.nodeName === "HR") {
           elementList.push({
             value: "\n",
@@ -3849,12 +4002,11 @@ function getElementListByHTML(htmlText, options) {
             };
             trElement.querySelectorAll("th,td").forEach((tdElement) => {
               const tableCell = tdElement;
+              const valueList = getElementListByHTML(tableCell.innerHTML, options);
               const td = {
                 colspan: tableCell.colSpan,
                 rowspan: tableCell.rowSpan,
-                value: [{
-                  value: tableCell.innerText
-                }]
+                value: valueList
               };
               tr.tdList.push(td);
             });
@@ -5897,16 +6049,15 @@ class RangeManager {
   setRangeStyle() {
     if (!this.listener.rangeStyleChange)
       return;
-    let curElementList = this.getSelection();
-    if (!curElementList) {
-      const elementList = this.draw.getElementList();
-      const { endIndex } = this.range;
-      const index2 = ~endIndex ? endIndex : 0;
-      curElementList = [elementList[index2]];
-    }
-    const curElement = curElementList[curElementList.length - 1];
+    const { endIndex } = this.range;
+    const index2 = ~endIndex ? endIndex : 0;
+    const elementList = this.draw.getElementList();
+    const endElement = elementList[index2];
+    const endNextElement = elementList[index2 + 1];
+    const curElement = endElement.value === ZERO && endNextElement ? endNextElement : endElement;
     if (!curElement)
       return;
+    const curElementList = this.getSelection() || [curElement];
     const type = curElement.type || ElementType.TEXT;
     const font = curElement.font || this.options.defaultFont;
     const size = curElement.size || this.options.defaultSize;
@@ -5919,6 +6070,7 @@ class RangeManager {
     const rowFlex = curElement.rowFlex || null;
     const rowMargin = curElement.rowMargin || this.options.defaultRowMargin;
     const dashArray = curElement.dashArray || [];
+    const level = curElement.level || null;
     const painter = !!this.draw.getPainterStyle();
     const undo = this.historyManager.isCanUndo();
     const redo = this.historyManager.isCanRedo();
@@ -5937,7 +6089,8 @@ class RangeManager {
       highlight,
       rowFlex,
       rowMargin,
-      dashArray
+      dashArray,
+      level
     });
   }
   recoveryRangeStyle() {
@@ -5964,7 +6117,8 @@ class RangeManager {
       highlight: null,
       rowFlex: null,
       rowMargin,
-      dashArray: []
+      dashArray: [],
+      level: null
     });
   }
   shrinkBoundary() {
@@ -6500,6 +6654,19 @@ class TextParticle {
     this.ctx.restore();
   }
 }
+const FORMAT_PLACEHOLDER = {
+  PAGE_NO: "{pageNo}",
+  PAGE_COUNT: "{pageCount}"
+};
+const defaultPageNumberOption = {
+  bottom: 60,
+  size: 12,
+  font: "Yahei",
+  color: "#000000",
+  rowFlex: RowFlex.CENTER,
+  format: FORMAT_PLACEHOLDER.PAGE_NO,
+  numberType: NumberType.ARABIC
+};
 class PageNumber {
   constructor(draw) {
     __publicField(this, "draw");
@@ -6508,8 +6675,20 @@ class PageNumber {
     this.options = draw.getOptions();
   }
   render(ctx, pageNo) {
-    const { pageNumber: { size, font, color, rowFlex }, scale, pageMode } = this.options;
-    const text = `${pageNo + 1}`;
+    const { pageNumber: { size, font, color, rowFlex, numberType, format }, scale, pageMode } = this.options;
+    let text = format;
+    const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO);
+    if (pageNoReg.test(text)) {
+      const realPageNo = pageNo + 1;
+      const pageNoText = numberType === NumberType.CHINESE ? convertNumberToChinese(realPageNo) : `${realPageNo}`;
+      text = text.replace(pageNoReg, pageNoText);
+    }
+    const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT);
+    if (pageCountReg.test(text)) {
+      const pageCount = this.draw.getPageCount();
+      const pageCountText = numberType === NumberType.CHINESE ? convertNumberToChinese(pageCount) : `${pageCount}`;
+      text = text.replace(pageCountReg, pageCountText);
+    }
     const width = this.draw.getWidth();
     const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight(pageNo) : this.draw.getHeight();
     const pageNumberBottom = this.draw.getPageNumberBottom();
@@ -9297,6 +9476,12 @@ class Zone {
       isCompute: false
     });
     this.drawZoneIndicator();
+    nextTick(() => {
+      const listener = this.draw.getListener();
+      if (listener.zoneChange) {
+        listener.zoneChange(payload);
+      }
+    });
   }
   drawZoneIndicator() {
     this._clearZoneIndicator();
@@ -9694,6 +9879,9 @@ class Draw {
   getPageList() {
     return this.pageList;
   }
+  getPageCount() {
+    return this.pageList.length;
+  }
   getTableRowList(sourceElementList) {
     const positionContext = this.position.getPositionContext();
     const { index: index2, trIndex, tdIndex } = positionContext;
@@ -10688,6 +10876,7 @@ const _Command = class {
     _Command.subscript = adapt.subscript.bind(adapt);
     _Command.color = adapt.color.bind(adapt);
     _Command.highlight = adapt.highlight.bind(adapt);
+    _Command.title = adapt.title.bind(adapt);
     _Command.left = adapt.rowFlex.bind(adapt);
     _Command.center = adapt.rowFlex.bind(adapt);
     _Command.right = adapt.rowFlex.bind(adapt);
@@ -10811,6 +11000,9 @@ const _Command = class {
   executeHighlight(payload) {
     return _Command.highlight(payload);
   }
+  executeTitle(payload) {
+    return _Command.title(payload);
+  }
   executeLeft() {
     return _Command.left(RowFlex.LEFT);
   }
@@ -10987,6 +11179,7 @@ __publicField(Command, "superscript");
 __publicField(Command, "subscript");
 __publicField(Command, "color");
 __publicField(Command, "highlight");
+__publicField(Command, "title");
 __publicField(Command, "left");
 __publicField(Command, "center");
 __publicField(Command, "right");
@@ -11447,6 +11640,57 @@ class CommandAdapt {
       isCompute: false
     });
   }
+  title(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    let changeElementList = [];
+    const elementList = this.draw.getElementList();
+    if (startIndex === endIndex) {
+      const rangeRow = this.range.getRangeRow();
+      if (!rangeRow)
+        return;
+      const positionList = this.position.getPositionList();
+      for (let p = 0; p < positionList.length; p++) {
+        const position = positionList[p];
+        const rowSet = rangeRow.get(position.pageNo);
+        if (!rowSet)
+          continue;
+        if (rowSet.has(position.rowNo)) {
+          changeElementList.push(elementList[p]);
+        }
+      }
+    } else {
+      changeElementList = elementList.slice(startIndex + 1, endIndex + 1);
+    }
+    const titleId = getUUID();
+    const titleOptions = this.draw.getOptions().title;
+    changeElementList.forEach((el) => {
+      if (!el.type && el.value === ZERO)
+        return;
+      if (payload) {
+        el.level = payload;
+        el.titleId = titleId;
+        if (isTextLikeElement(el)) {
+          el.size = titleOptions[titleSizeMapping[payload]];
+          el.bold = true;
+        }
+      } else {
+        if (el.titleId) {
+          delete el.titleId;
+          delete el.level;
+          delete el.size;
+          delete el.bold;
+        }
+      }
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
   rowFlex(payload) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
@@ -12577,6 +12821,7 @@ class Listener {
     __publicField(this, "contentChange");
     __publicField(this, "controlChange");
     __publicField(this, "pageModeChange");
+    __publicField(this, "zoneChange");
     this.rangeStyleChange = null;
     this.visiblePageNoListChange = null;
     this.intersectionPageNoChange = null;
@@ -12586,6 +12831,7 @@ class Listener {
     this.contentChange = null;
     this.controlChange = null;
     this.pageModeChange = null;
+    this.zoneChange = null;
   }
 }
 class Register {
@@ -13298,13 +13544,6 @@ class Shortcut {
     }
   }
 }
-const defaultPageNumberOption = {
-  bottom: 60,
-  size: 12,
-  font: "Yahei",
-  color: "#000000",
-  rowFlex: RowFlex.CENTER
-};
 const defaultFooterOption = {
   bottom: 30,
   maxHeightRadio: MaxHeightRatio.HALF
@@ -13322,6 +13561,7 @@ class Editor {
     const controlOptions = __spreadValues(__spreadValues({}, defaultControlOption), options.control);
     const checkboxOptions = __spreadValues(__spreadValues({}, defaultCheckboxOption), options.checkbox);
     const cursorOptions = __spreadValues(__spreadValues({}, defaultCursorOption), options.cursor);
+    const titleOptions = __spreadValues(__spreadValues({}, defaultTitleOption), options.title);
     const editorOptions = __spreadProps(__spreadValues({
       mode: EditorMode.EDIT,
       defaultType: "TEXT",
@@ -13363,7 +13603,8 @@ class Editor {
       watermark: waterMarkOptions,
       control: controlOptions,
       checkbox: checkboxOptions,
-      cursor: cursorOptions
+      cursor: cursorOptions,
+      title: titleOptions
     });
     let headerElementList = [];
     let mainElementList = [];
@@ -13401,5 +13642,5 @@ class Editor {
     };
   }
 }
-export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, MaxHeightRatio, PageMode, PaperDirection, RowFlex, TableBorder, VerticalAlign, Editor as default };
+export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TitleLevel, VerticalAlign, Editor as default };
 //# sourceMappingURL=canvas-editor.es.js.map