@hufe921/canvas-editor 0.9.33 → 0.9.35

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.33";
+const version = "0.9.35";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -3432,8 +3432,10 @@ function formatElementList(elementList, options) {
         const titleOptions = editorOptions.title;
         for (let v = 0; v < valueList.length; v++) {
           const value = valueList[v];
-          value.titleId = titleId;
-          value.level = el.level;
+          if (el.level) {
+            value.titleId = titleId;
+            value.level = el.level;
+          }
           if (isTextLikeElement(value)) {
             if (!value.size) {
               value.size = titleOptions[titleSizeMapping[value.level]];
@@ -3762,6 +3764,9 @@ function zipElementList(payload) {
             if (td.verticalAlign) {
               zipTd.verticalAlign = td.verticalAlign;
             }
+            if (td.backgroundColor) {
+              zipTd.backgroundColor = td.backgroundColor;
+            }
             tr.tdList[d] = zipTd;
           }
         }
@@ -3834,7 +3839,7 @@ function zipElementList(payload) {
       element = controlElement;
     }
     const pickElement = pickElementAttr(element);
-    if (!element.type || element.type === ElementType.TEXT) {
+    if (!element.type || element.type === ElementType.TEXT || element.type === ElementType.SUBSCRIPT || element.type === ElementType.SUPERSCRIPT) {
       while (e < elementList.length) {
         const nextElement = elementList[e + 1];
         e++;
@@ -3879,12 +3884,15 @@ function getAnchorElement(elementList, anchorIndex) {
   const anchorNextElement = elementList[anchorIndex + 1];
   return !anchorElement.listId && anchorElement.value === ZERO && anchorNextElement && anchorNextElement.value !== ZERO ? anchorNextElement : anchorElement;
 }
-function formatElementContext(sourceElementList, formatElementList2, anchorIndex) {
+function formatElementContext(sourceElementList, formatElementList2, anchorIndex, options) {
   const copyElement = getAnchorElement(sourceElementList, anchorIndex);
   if (!copyElement)
     return;
+  const { isBreakWhenWrap = false } = options || {};
   for (let e = 0; e < formatElementList2.length; e++) {
     const targetElement = formatElementList2[e];
+    if (isBreakWhenWrap && !copyElement.listId && /^\n/.test(targetElement.value))
+      break;
     if (!copyElement.listId && targetElement.type === ElementType.LIST)
       continue;
     if (targetElement.valueList && targetElement.valueList.length) {
@@ -3927,8 +3935,15 @@ function writeClipboardItem(text, html) {
   }
 }
 function convertElementToDom(element, options) {
-  const isBlock = element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT;
-  const dom = document.createElement(isBlock ? "p" : "span");
+  let tagName = "span";
+  if (element.type === ElementType.SUPERSCRIPT) {
+    tagName = "sup";
+  } else if (element.type === ElementType.SUBSCRIPT) {
+    tagName = "sub";
+  } else if (element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT) {
+    tagName = "p";
+  }
+  const dom = document.createElement(tagName);
   dom.style.fontFamily = element.font || options.defaultFont;
   if (element.rowFlex) {
     const isAlignment = element.rowFlex === RowFlex.ALIGNMENT;
@@ -3970,6 +3985,9 @@ function writeElementList(elementList, options) {
             tdDom.rowSpan = td.rowspan;
             const childDom = buildDomFromElementList(zipElementList(td.value));
             tdDom.innerHTML = childDom.innerHTML;
+            if (td.backgroundColor) {
+              tdDom.style.backgroundColor = td.backgroundColor;
+            }
             trDom.append(tdDom);
           }
           tableDom.append(trDom);
@@ -4071,28 +4089,41 @@ function writeElementList(elementList, options) {
     return;
   writeClipboardItem(text, html);
 }
+function convertTextNodeToElement(textNode) {
+  if (!textNode || textNode.nodeType !== 3)
+    return null;
+  const parentNode = textNode.parentNode;
+  const rowFlex = getElementRowFlex(parentNode);
+  const value = textNode.textContent;
+  const style = window.getComputedStyle(parentNode);
+  if (!value || parentNode.nodeName === "STYLE")
+    return null;
+  const element = {
+    value,
+    color: style.color,
+    bold: Number(style.fontWeight) > 500,
+    italic: style.fontStyle.includes("italic"),
+    size: Math.floor(parseFloat(style.fontSize))
+  };
+  if (parentNode.nodeName === "SUB") {
+    element.type = ElementType.SUBSCRIPT;
+  } else if (parentNode.nodeName === "SUP") {
+    element.type = ElementType.SUPERSCRIPT;
+  }
+  if (rowFlex !== RowFlex.LEFT) {
+    element.rowFlex = rowFlex;
+  }
+  if (style.backgroundColor !== "rgba(0, 0, 0, 0)") {
+    element.highlight = style.backgroundColor;
+  }
+  return element;
+}
 function getElementListByHTML(htmlText, options) {
   const elementList = [];
   function findTextNode(dom) {
     if (dom.nodeType === 3) {
-      const parentNode = dom.parentNode;
-      const rowFlex = getElementRowFlex(parentNode);
-      const value = dom.textContent;
-      const style = window.getComputedStyle(parentNode);
-      if (value && parentNode.nodeName !== "STYLE") {
-        const element = {
-          value,
-          color: style.color,
-          bold: Number(style.fontWeight) > 500,
-          italic: style.fontStyle.includes("italic"),
-          size: Math.floor(Number(style.fontSize.replace("px", "")))
-        };
-        if (rowFlex !== RowFlex.LEFT) {
-          element.rowFlex = rowFlex;
-        }
-        if (style.backgroundColor !== "rgba(0, 0, 0, 0)") {
-          element.highlight = style.backgroundColor;
-        }
+      const element = convertTextNodeToElement(dom);
+      if (element) {
         elementList.push(element);
       }
     } else if (dom.nodeType === 1) {
@@ -4193,6 +4224,9 @@ function getElementListByHTML(htmlText, options) {
                 rowspan: tableCell.rowSpan,
                 value: valueList
               };
+              if (tableCell.style.backgroundColor) {
+                td.backgroundColor = tableCell.style.backgroundColor;
+              }
               tr.tdList.push(td);
             });
             if (tr.tdList.length) {
@@ -4312,6 +4346,8 @@ class CursorAgent {
                 let start = 0;
                 while (start < pasteElementList.length) {
                   const pasteElement = pasteElementList[start];
+                  if (anchorElement.titleId && /^\n/.test(pasteElement.value))
+                    break;
                   if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement.type)) {
                     pasteElementList.splice(start, 1);
                     if (pasteElement.valueList) {
@@ -4328,7 +4364,9 @@ class CursorAgent {
                   start++;
                 }
               }
-              formatElementContext(elementList, pasteElementList, startIndex);
+              formatElementContext(elementList, pasteElementList, startIndex, {
+                isBreakWhenWrap: true
+              });
             }
             this.draw.insertElementList(pasteElementList);
           });
@@ -4371,12 +4409,14 @@ class CursorAgent {
 }
 class Cursor {
   constructor(draw, canvasEvent) {
+    __publicField(this, "ANIMATION_CLASS", `${EDITOR_PREFIX}-cursor--animation`);
     __publicField(this, "draw");
     __publicField(this, "container");
     __publicField(this, "options");
     __publicField(this, "position");
     __publicField(this, "cursorDom");
     __publicField(this, "cursorAgent");
+    __publicField(this, "blinkTimeout");
     this.draw = draw;
     this.container = draw.getContainer();
     this.position = draw.getPosition();
@@ -4385,6 +4425,7 @@ class Cursor {
     this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor`);
     this.container.append(this.cursorDom);
     this.cursorAgent = new CursorAgent(draw, canvasEvent);
+    this.blinkTimeout = null;
   }
   getCursorDom() {
     return this.cursorDom;
@@ -4398,6 +4439,25 @@ class Cursor {
   clearAgentDomValue() {
     return this.getAgentDom().value = "";
   }
+  _blinkStart() {
+    this.cursorDom.classList.add(this.ANIMATION_CLASS);
+  }
+  _blinkStop() {
+    this.cursorDom.classList.remove(this.ANIMATION_CLASS);
+  }
+  _setBlinkTimeout() {
+    this._clearBlinkTimeout();
+    this.blinkTimeout = window.setTimeout(() => {
+      this._blinkStart();
+    }, 500);
+  }
+  _clearBlinkTimeout() {
+    if (this.blinkTimeout) {
+      this._blinkStop();
+      window.clearTimeout(this.blinkTimeout);
+      this.blinkTimeout = null;
+    }
+  }
   drawCursor(payload) {
     const cursorPosition = this.position.getCursorPosition();
     if (!cursorPosition)
@@ -4431,18 +4491,15 @@ class Cursor {
     this.cursorDom.style.top = `${cursorTop}px`;
     this.cursorDom.style.display = isReadonly ? "none" : "block";
     this.cursorDom.style.height = `${cursorHeight}px`;
-    const animationClassName = `${EDITOR_PREFIX}-cursor--animation`;
     if (isBlink) {
-      setTimeout(() => {
-        this.cursorDom.classList.add(animationClassName);
-      }, 200);
+      this._setBlinkTimeout();
     } else {
-      this.cursorDom.classList.remove(animationClassName);
+      this._clearBlinkTimeout();
     }
   }
   recoveryCursor() {
     this.cursorDom.style.display = "none";
-    this.cursorDom.classList.remove(`${EDITOR_PREFIX}-cursor--animation`);
+    this._clearBlinkTimeout();
   }
 }
 var MouseEventButton;
@@ -5798,6 +5855,7 @@ var EditorComponent;
   EditorComponent2["FOOTER"] = "footer";
   EditorComponent2["CONTEXTMENU"] = "contextmenu";
   EditorComponent2["POPUP"] = "popup";
+  EditorComponent2["CATALOG"] = "catalog";
 })(EditorComponent || (EditorComponent = {}));
 var EditorContext;
 (function(EditorContext2) {
@@ -6987,7 +7045,9 @@ const defaultPageNumberOption = {
   rowFlex: RowFlex.CENTER,
   format: FORMAT_PLACEHOLDER.PAGE_NO,
   numberType: NumberType.ARABIC,
-  disabled: false
+  disabled: false,
+  startPageNo: 1,
+  fromPageNo: 0
 };
 class PageNumber {
   constructor(draw) {
@@ -6997,17 +7057,19 @@ class PageNumber {
     this.options = draw.getOptions();
   }
   render(ctx, pageNo) {
-    const { pageNumber: { size, font, color, rowFlex, numberType, format }, scale, pageMode } = this.options;
+    const { scale, pageMode, pageNumber: { size, font, color, rowFlex, numberType, format, startPageNo, fromPageNo } } = this.options;
+    if (pageNo < fromPageNo)
+      return;
     let text = format;
     const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO);
     if (pageNoReg.test(text)) {
-      const realPageNo = pageNo + 1;
+      const realPageNo = pageNo + startPageNo - fromPageNo;
       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 pageCount = this.draw.getPageCount() - fromPageNo;
       const pageCountText = numberType === NumberType.CHINESE ? convertNumberToChinese(pageCount) : `${pageCount}`;
       text = text.replace(pageCountReg, pageCountText);
     }
@@ -7170,8 +7232,10 @@ class SelectionObserver {
 }
 class TableParticle {
   constructor(draw) {
+    __publicField(this, "draw");
     __publicField(this, "range");
     __publicField(this, "options");
+    this.draw = draw;
     this.range = draw.getRange();
     this.options = draw.getOptions();
   }
@@ -7191,7 +7255,45 @@ class TableParticle {
     }
     return trList;
   }
-  _drawBorder(payload) {
+  getRangeRowCol() {
+    const { isTable, index: index2, trIndex, tdIndex } = this.draw.getPosition().getPositionContext();
+    if (!isTable)
+      return null;
+    const { isCrossRowCol, startTdIndex, endTdIndex, startTrIndex, endTrIndex } = this.range.getRange();
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    if (!isCrossRowCol) {
+      return [[curTrList[trIndex].tdList[tdIndex]]];
+    }
+    let startTd = curTrList[startTrIndex].tdList[startTdIndex];
+    let endTd = curTrList[endTrIndex].tdList[endTdIndex];
+    if (startTd.x > endTd.x || startTd.y > endTd.y) {
+      [startTd, endTd] = [endTd, startTd];
+    }
+    const startColIndex = startTd.colIndex;
+    const endColIndex = endTd.colIndex + (endTd.colspan - 1);
+    const startRowIndex = startTd.rowIndex;
+    const endRowIndex = endTd.rowIndex + (endTd.rowspan - 1);
+    const rowCol = [];
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      const tdList = [];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        const tdColIndex = td.colIndex;
+        const tdRowIndex = td.rowIndex;
+        if (tdColIndex >= startColIndex && tdColIndex <= endColIndex && tdRowIndex >= startRowIndex && tdRowIndex <= endRowIndex) {
+          tdList.push(td);
+        }
+      }
+      if (tdList.length) {
+        rowCol.push(tdList);
+      }
+    }
+    return rowCol.length ? rowCol : null;
+  }
+  _drawOuterBorder(payload) {
     const { ctx, startX, startY, width, height, isDrawFullBorder } = payload;
     ctx.beginPath();
     const x = Math.round(startX);
@@ -7207,6 +7309,66 @@ class TableParticle {
     ctx.stroke();
     ctx.translate(-0.5, -0.5);
   }
+  _drawBorder(ctx, element, startX, startY) {
+    const { colgroup, trList, borderType } = element;
+    if (!colgroup || !trList || borderType === TableBorder.EMPTY)
+      return;
+    const { scale } = this.options;
+    const tableWidth = element.width * scale;
+    const tableHeight = element.height * scale;
+    const isExternalBorderType = borderType === TableBorder.EXTERNAL;
+    ctx.save();
+    this._drawOuterBorder({
+      ctx,
+      startX,
+      startY,
+      width: tableWidth,
+      height: tableHeight,
+      isDrawFullBorder: isExternalBorderType
+    });
+    if (!isExternalBorderType) {
+      for (let t = 0; t < trList.length; t++) {
+        const tr = trList[t];
+        for (let d = 0; d < tr.tdList.length; d++) {
+          const td = tr.tdList[d];
+          const width = td.width * scale;
+          const height = td.height * scale;
+          const x = Math.round(td.x * scale + startX + width);
+          const y = Math.round(td.y * scale + startY);
+          ctx.translate(0.5, 0.5);
+          ctx.beginPath();
+          ctx.moveTo(x, y);
+          ctx.lineTo(x, y + height);
+          ctx.lineTo(x - width, y + height);
+          ctx.stroke();
+          ctx.translate(-0.5, -0.5);
+        }
+      }
+    }
+    ctx.restore();
+  }
+  _drawBackgroundColor(ctx, element, startX, startY) {
+    const { trList } = element;
+    if (!trList)
+      return;
+    const { scale } = this.options;
+    for (let t = 0; t < trList.length; t++) {
+      const tr = trList[t];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        if (!td.backgroundColor)
+          continue;
+        ctx.save();
+        const width = td.width * scale;
+        const height = td.height * scale;
+        const x = Math.round(td.x * scale + startX);
+        const y = Math.round(td.y * scale + startY);
+        ctx.fillStyle = td.backgroundColor;
+        ctx.fillRect(x, y, width, height);
+        ctx.restore();
+      }
+    }
+  }
   computeRowColInfo(element) {
     const { colgroup, trList } = element;
     if (!colgroup || !trList)
@@ -7325,42 +7487,8 @@ class TableParticle {
     ctx.restore();
   }
   render(ctx, element, startX, startY) {
-    const { colgroup, trList, borderType } = element;
-    if (!colgroup || !trList || borderType === TableBorder.EMPTY)
-      return;
-    const { scale } = this.options;
-    const tableWidth = element.width * scale;
-    const tableHeight = element.height * scale;
-    const isExternalBorderType = borderType === TableBorder.EXTERNAL;
-    ctx.save();
-    this._drawBorder({
-      ctx,
-      startX,
-      startY,
-      width: tableWidth,
-      height: tableHeight,
-      isDrawFullBorder: isExternalBorderType
-    });
-    if (!isExternalBorderType) {
-      for (let t = 0; t < trList.length; t++) {
-        const tr = trList[t];
-        for (let d = 0; d < tr.tdList.length; d++) {
-          const td = tr.tdList[d];
-          const width = td.width * scale;
-          const height = td.height * scale;
-          const x = Math.round(td.x * scale + startX + width);
-          const y = Math.round(td.y * scale + startY);
-          ctx.translate(0.5, 0.5);
-          ctx.beginPath();
-          ctx.moveTo(x, y);
-          ctx.lineTo(x, y + height);
-          ctx.lineTo(x - width, y + height);
-          ctx.stroke();
-          ctx.translate(-0.5, -0.5);
-        }
-      }
-    }
-    ctx.restore();
+    this._drawBackgroundColor(ctx, element, startX, startY);
+    this._drawBorder(ctx, element, startX, startY);
   }
 }
 var TableOrder;
@@ -8559,7 +8687,17 @@ class CheckboxParticle {
     ctx.restore();
   }
 }
-const encodedJs = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBjOyhmdW5jdGlvbih0KXt0LlRFWFQ9InRleHQiLHQuVEFCTEU9InRhYmxlIix0LkhZUEVSTElOSz0iaHlwZXJsaW5rIix0LkNPTlRST0w9ImNvbnRyb2wifSkoY3x8KGM9e30pKTt2YXIgdTsoZnVuY3Rpb24odCl7dC5WQUxVRT0idmFsdWUifSkodXx8KHU9e30pKTtjb25zdCBoPSJcdTIwMEIiLGc9YApgO2Z1bmN0aW9uIHAodCl7bGV0IGw9IiIsbz0wO2Zvcig7bzx0Lmxlbmd0aDspe2NvbnN0IG49dFtvXTtpZihuLnR5cGU9PT1jLlRBQkxFKXtpZihuLnRyTGlzdClmb3IobGV0IGk9MDtpPG4udHJMaXN0Lmxlbmd0aDtpKyspe2NvbnN0IHM9bi50ckxpc3RbaV07Zm9yKGxldCBlPTA7ZTxzLnRkTGlzdC5sZW5ndGg7ZSsrKXtjb25zdCByPXMudGRMaXN0W2VdO2wrPXAoci52YWx1ZSl9fX1lbHNlIGlmKG4udHlwZT09PWMuSFlQRVJMSU5LKXtjb25zdCBpPW4uaHlwZXJsaW5rSWQscz1bXTtmb3IoO288dC5sZW5ndGg7KXtjb25zdCBlPXRbb107aWYoaSE9PWUuaHlwZXJsaW5rSWQpe28tLTticmVha31kZWxldGUgZS50eXBlLHMucHVzaChlKSxvKyt9bCs9cChzKX1lbHNlIGlmKG4udHlwZT09PWMuQ09OVFJPTCl7Y29uc3QgaT1uLmNvbnRyb2xJZCxzPVtdO2Zvcig7bzx0Lmxlbmd0aDspe2NvbnN0IGU9dFtvXTtpZihpIT09ZS5jb250cm9sSWQpe28tLTticmVha31lLmNvbnRyb2xDb21wb25lbnQ9PT11LlZBTFVFJiYoZGVsZXRlIGUudHlwZSxzLnB1c2goZSkpLG8rK31sKz1wKHMpfSghbi50eXBlfHxuLnR5cGU9PT1jLlRFWFQpJiYobCs9bi52YWx1ZSksbysrfXJldHVybiBsfWZ1bmN0aW9uIGQodCl7Y29uc3QgbD1bXSxvPS9bMC05XS8sbj0vW0EtWmEtel0vLGk9L1xzLztsZXQgcz0hMSxlPSExLHI9IiI7ZnVuY3Rpb24gYSgpe3ImJihsLnB1c2gocikscj0iIil9Zm9yKGNvbnN0IGYgb2YgdCluLnRlc3QoZik/KHN8fGEoKSxyKz1mLHM9ITAsZT0hMSk6by50ZXN0KGYpPyhlfHxhKCkscis9ZixzPSExLGU9ITApOihhKCkscz0hMSxlPSExLGkudGVzdChmKXx8bC5wdXNoKGYpKTtyZXR1cm4gYSgpLGx9b25tZXNzYWdlPXQ9Pntjb25zdCBsPXQuZGF0YSxuPXAobCkucmVwbGFjZShuZXcgUmVnRXhwKGBeJHtofWApLCIiKS5yZXBsYWNlKG5ldyBSZWdFeHAoaCwiZyIpLGcpLGk9ZChuKTtwb3N0TWVzc2FnZShpLmxlbmd0aCl9fSkoKTt9KSgpOwo=";
+const encodedJs$1 = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBjOyhmdW5jdGlvbih0KXt0LlRFWFQ9InRleHQiLHQuVEFCTEU9InRhYmxlIix0LkhZUEVSTElOSz0iaHlwZXJsaW5rIix0LkNPTlRST0w9ImNvbnRyb2wifSkoY3x8KGM9e30pKTt2YXIgdTsoZnVuY3Rpb24odCl7dC5WQUxVRT0idmFsdWUifSkodXx8KHU9e30pKTtjb25zdCBoPSJcdTIwMEIiLGc9YApgO2Z1bmN0aW9uIHAodCl7bGV0IGw9IiIsbz0wO2Zvcig7bzx0Lmxlbmd0aDspe2NvbnN0IG49dFtvXTtpZihuLnR5cGU9PT1jLlRBQkxFKXtpZihuLnRyTGlzdClmb3IobGV0IGk9MDtpPG4udHJMaXN0Lmxlbmd0aDtpKyspe2NvbnN0IHM9bi50ckxpc3RbaV07Zm9yKGxldCBlPTA7ZTxzLnRkTGlzdC5sZW5ndGg7ZSsrKXtjb25zdCByPXMudGRMaXN0W2VdO2wrPXAoci52YWx1ZSl9fX1lbHNlIGlmKG4udHlwZT09PWMuSFlQRVJMSU5LKXtjb25zdCBpPW4uaHlwZXJsaW5rSWQscz1bXTtmb3IoO288dC5sZW5ndGg7KXtjb25zdCBlPXRbb107aWYoaSE9PWUuaHlwZXJsaW5rSWQpe28tLTticmVha31kZWxldGUgZS50eXBlLHMucHVzaChlKSxvKyt9bCs9cChzKX1lbHNlIGlmKG4udHlwZT09PWMuQ09OVFJPTCl7Y29uc3QgaT1uLmNvbnRyb2xJZCxzPVtdO2Zvcig7bzx0Lmxlbmd0aDspe2NvbnN0IGU9dFtvXTtpZihpIT09ZS5jb250cm9sSWQpe28tLTticmVha31lLmNvbnRyb2xDb21wb25lbnQ9PT11LlZBTFVFJiYoZGVsZXRlIGUudHlwZSxzLnB1c2goZSkpLG8rK31sKz1wKHMpfSghbi50eXBlfHxuLnR5cGU9PT1jLlRFWFQpJiYobCs9bi52YWx1ZSksbysrfXJldHVybiBsfWZ1bmN0aW9uIGQodCl7Y29uc3QgbD1bXSxvPS9bMC05XS8sbj0vW0EtWmEtel0vLGk9L1xzLztsZXQgcz0hMSxlPSExLHI9IiI7ZnVuY3Rpb24gYSgpe3ImJihsLnB1c2gocikscj0iIil9Zm9yKGNvbnN0IGYgb2YgdCluLnRlc3QoZik/KHN8fGEoKSxyKz1mLHM9ITAsZT0hMSk6by50ZXN0KGYpPyhlfHxhKCkscis9ZixzPSExLGU9ITApOihhKCkscz0hMSxlPSExLGkudGVzdChmKXx8bC5wdXNoKGYpKTtyZXR1cm4gYSgpLGx9b25tZXNzYWdlPXQ9Pntjb25zdCBsPXQuZGF0YSxuPXAobCkucmVwbGFjZShuZXcgUmVnRXhwKGBeJHtofWApLCIiKS5yZXBsYWNlKG5ldyBSZWdFeHAoaCwiZyIpLGcpLGk9ZChuKTtwb3N0TWVzc2FnZShpLmxlbmd0aCl9fSkoKTt9KSgpOwo=";
+const blob$1 = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs$1)], { type: "text/javascript;charset=utf-8" });
+function WorkerWrapper$1() {
+  const objURL = blob$1 && (window.URL || window.webkitURL).createObjectURL(blob$1);
+  try {
+    return objURL ? new Worker(objURL) : new Worker("data:application/javascript;base64," + encodedJs$1, { type: "module" });
+  } finally {
+    objURL && (window.URL || window.webkitURL).revokeObjectURL(objURL);
+  }
+}
+const encodedJs = "KCgpPT57KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO3ZhciBnOyhmdW5jdGlvbihlKXtlLlRJVExFPSJ0aXRsZSJ9KShnfHwoZz17fSkpO3ZhciBvOyhmdW5jdGlvbihlKXtlLkZJUlNUPSJmaXJzdCIsZS5TRUNPTkQ9InNlY29uZCIsZS5USElSRD0idGhpcmQiLGUuRk9VUlRIPSJmb3VydGgiLGUuRklGVEg9ImZpZnRoIixlLlNJWFRIPSJzaXh0aCJ9KShvfHwobz17fSkpO2NvbnN0IHU9e1tvLkZJUlNUXToxLFtvLlNFQ09ORF06Mixbby5USElSRF06Myxbby5GT1VSVEhdOjQsW28uRklGVEhdOjUsW28uU0lYVEhdOjZ9LEk9Ilx1MjAwQiI7ZnVuY3Rpb24gZihlKXtjb25zdCBhPVtdO2xldCBzPTA7Zm9yKDtzPGUubGVuZ3RoOyl7Y29uc3QgdD1lW3NdO2lmKHQudGl0bGVJZCl7Y29uc3Qgbj10LnRpdGxlSWQsbD10LmxldmVsLGM9e3R5cGU6Zy5USVRMRSx2YWx1ZToiIixsZXZlbDpsLHRpdGxlSWQ6bn0saT1bXTtmb3IoO3M8ZS5sZW5ndGg7KXtjb25zdCB2PWVbc107aWYobiE9PXYudGl0bGVJZCl7cy0tO2JyZWFrfWkucHVzaCh2KSxzKyt9Yy52YWx1ZT1pLm1hcCh2PT52LnZhbHVlKS5qb2luKCIiKS5yZXBsYWNlKG5ldyBSZWdFeHAoSSwiZyIpLCIiKSxhLnB1c2goYyl9cysrfWlmKCFhLmxlbmd0aClyZXR1cm4gbnVsbDtjb25zdCBoPSh0LG4pPT57Y29uc3QgbD1uLnN1YkNhdGFsb2dbbi5zdWJDYXRhbG9nLmxlbmd0aC0xXSxjPXVbbD09bnVsbD92b2lkIDA6bC5sZXZlbF0saT11W3QubGV2ZWxdO2wmJmk+Yz9oKHQsbCk6bi5zdWJDYXRhbG9nLnB1c2goe2lkOnQudGl0bGVJZCxuYW1lOnQudmFsdWUsbGV2ZWw6dC5sZXZlbCxzdWJDYXRhbG9nOltdfSl9LHI9W107Zm9yKGxldCB0PTA7dDxhLmxlbmd0aDt0Kyspe2NvbnN0IG49YVt0XSxsPXJbci5sZW5ndGgtMV0sYz11W2w9PW51bGw/dm9pZCAwOmwubGV2ZWxdLGk9dVtuLmxldmVsXTtsJiZpPmM/aChuLGwpOnIucHVzaCh7aWQ6bi50aXRsZUlkLG5hbWU6bi52YWx1ZSxsZXZlbDpuLmxldmVsLHN1YkNhdGFsb2c6W119KX1yZXR1cm4gcn1vbm1lc3NhZ2U9ZT0+e2NvbnN0IGE9ZS5kYXRhLHM9ZihhKTtwb3N0TWVzc2FnZShzKX19KSgpO30pKCk7Cg==";
 const blob = typeof window !== "undefined" && window.Blob && new Blob([atob(encodedJs)], { type: "text/javascript;charset=utf-8" });
 function WorkerWrapper() {
   const objURL = blob && (window.URL || window.webkitURL).createObjectURL(blob);
@@ -8573,8 +8711,10 @@ class WorkerManager {
   constructor(draw) {
     __publicField(this, "draw");
     __publicField(this, "wordCountWorker");
+    __publicField(this, "catalogWorker");
     this.draw = draw;
-    this.wordCountWorker = new WorkerWrapper();
+    this.wordCountWorker = new WorkerWrapper$1();
+    this.catalogWorker = new WorkerWrapper();
   }
   getWordCount() {
     return new Promise((resolve, reject) => {
@@ -8588,6 +8728,18 @@ class WorkerManager {
       this.wordCountWorker.postMessage(elementList);
     });
   }
+  getCatalog() {
+    return new Promise((resolve, reject) => {
+      this.catalogWorker.onmessage = (evt) => {
+        resolve(evt.data);
+      };
+      this.catalogWorker.onerror = (evt) => {
+        reject(evt);
+      };
+      const elementList = this.draw.getOriginalMainElementList();
+      this.catalogWorker.postMessage(elementList);
+    });
+  }
 }
 class Previewer {
   constructor(draw) {
@@ -10064,9 +10216,7 @@ class ListParticle {
       return;
     let text = "";
     if (startElement.listType === ListType.UL) {
-      if (startElement.listStyle) {
-        text = ulStyleMapping[startElement.listStyle] || ulStyleMapping[UlStyle.DISC];
-      }
+      text = ulStyleMapping[startElement.listStyle] || ulStyleMapping[UlStyle.DISC];
     } else {
       text = `${listIndex + 1}${KeyMap.PERIOD}`;
     }
@@ -10464,6 +10614,9 @@ class Draw {
   getTableTool() {
     return this.tableTool;
   }
+  getTableParticle() {
+    return this.tableParticle;
+  }
   getHeader() {
     return this.header;
   }
@@ -11372,6 +11525,7 @@ const _Command = class {
     _Command.cancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt);
     _Command.tableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt);
     _Command.tableBorderType = adapt.tableBorderType.bind(adapt);
+    _Command.tableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt);
     _Command.image = adapt.image.bind(adapt);
     _Command.hyperlink = adapt.hyperlink.bind(adapt);
     _Command.deleteHyperlink = adapt.deleteHyperlink.bind(adapt);
@@ -11405,6 +11559,8 @@ const _Command = class {
     _Command.insertElementList = adapt.insertElementList.bind(adapt);
     _Command.removeControl = adapt.removeControl.bind(adapt);
     _Command.setLocale = adapt.setLocale.bind(adapt);
+    _Command.getCatalog = adapt.getCatalog.bind(adapt);
+    _Command.locationCatalog = adapt.locationCatalog.bind(adapt);
   }
   executeMode(payload) {
     return _Command.mode(payload);
@@ -11535,6 +11691,9 @@ const _Command = class {
   executeTableBorderType(payload) {
     return _Command.tableBorderType(payload);
   }
+  executeTableTdBackgroundColor(payload) {
+    return _Command.tableTdBackgroundColor(payload);
+  }
   executeHyperlink(payload) {
     return _Command.hyperlink(payload);
   }
@@ -11634,6 +11793,12 @@ const _Command = class {
   executeSetLocale(payload) {
     return _Command.setLocale(payload);
   }
+  getCatalog() {
+    return _Command.getCatalog();
+  }
+  executeLocationCatalog(titleId) {
+    return _Command.locationCatalog(titleId);
+  }
 };
 let Command = _Command;
 __publicField(Command, "mode");
@@ -11679,6 +11844,7 @@ __publicField(Command, "mergeTableCell");
 __publicField(Command, "cancelMergeTableCell");
 __publicField(Command, "tableTdVerticalAlign");
 __publicField(Command, "tableBorderType");
+__publicField(Command, "tableTdBackgroundColor");
 __publicField(Command, "image");
 __publicField(Command, "hyperlink");
 __publicField(Command, "deleteHyperlink");
@@ -11712,6 +11878,8 @@ __publicField(Command, "setPaperMargin");
 __publicField(Command, "insertElementList");
 __publicField(Command, "removeControl");
 __publicField(Command, "setLocale");
+__publicField(Command, "getCatalog");
+__publicField(Command, "locationCatalog");
 const defaultWatermarkOption = {
   data: "",
   color: "#AEB5C0",
@@ -12844,6 +13012,26 @@ class CommandAdapt {
       curIndex: endIndex
     });
   }
+  tableTdBackgroundColor(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const rowCol = this.draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c];
+        col.backgroundColor = payload;
+      }
+    }
+    const { endIndex } = this.range.getRange();
+    this.range.setRange(endIndex, endIndex);
+    this.draw.render({
+      isCompute: false
+    });
+  }
   hyperlink(payload) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
@@ -13309,6 +13497,29 @@ class CommandAdapt {
   setLocale(payload) {
     this.i18n.setLocale(payload);
   }
+  getCatalog() {
+    return this.workerManager.getCatalog();
+  }
+  locationCatalog(titleId) {
+    var _a;
+    const elementList = this.draw.getMainElementList();
+    let newIndex = -1;
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e];
+      if (element.titleId === titleId && ((_a = elementList[e + 1]) == null ? void 0 : _a.titleId) !== titleId) {
+        newIndex = e;
+        break;
+      }
+    }
+    if (!~newIndex)
+      return;
+    this.range.setRange(newIndex, newIndex);
+    this.draw.render({
+      curIndex: newIndex,
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
 }
 class Listener {
   constructor() {