@hufe921/canvas-editor 0.9.31 → 0.9.32

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.31";
+const version = "0.9.32";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -198,6 +198,7 @@ var ElementType;
   ElementType2["DATE"] = "date";
   ElementType2["BLOCK"] = "block";
   ElementType2["TITLE"] = "title";
+  ElementType2["LIST"] = "list";
 })(ElementType || (ElementType = {}));
 const EDITOR_ELEMENT_STYLE_ATTR = [
   "bold",
@@ -223,9 +224,7 @@ const EDITOR_ELEMENT_COPY_ATTR = [
   "url",
   "hyperlinkId",
   "dateId",
-  "dateFormat",
-  "level",
-  "titleId"
+  "dateFormat"
 ];
 const EDITOR_ELEMENT_ZIP_ATTR = [
   "type",
@@ -251,7 +250,19 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "checkbox",
   "dateFormat",
   "block",
-  "level"
+  "level",
+  "listType",
+  "listStyle"
+];
+const EDITOR_ELEMENT_CONTEXT_ATTR = [
+  "tdId",
+  "trId",
+  "tableId",
+  "level",
+  "titleId",
+  "listId",
+  "listType",
+  "listStyle"
 ];
 const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.TEXT,
@@ -269,8 +280,51 @@ const INLINE_ELEMENT_TYPE = [
 ];
 const INLINE_NODE_NAME = [
   "HR",
-  "TABLE"
+  "TABLE",
+  "UL",
+  "OL"
+];
+const VIRTUAL_ELEMENT_TYPE = [
+  ElementType.TITLE,
+  ElementType.LIST
 ];
+var ListType;
+(function(ListType2) {
+  ListType2["UL"] = "ul";
+  ListType2["OL"] = "ol";
+})(ListType || (ListType = {}));
+var UlStyle;
+(function(UlStyle2) {
+  UlStyle2["DISC"] = "disc";
+  UlStyle2["CIRCLE"] = "circle";
+  UlStyle2["SQUARE"] = "square";
+})(UlStyle || (UlStyle = {}));
+var OlStyle;
+(function(OlStyle2) {
+  OlStyle2["DECIMAL"] = "decimal";
+})(OlStyle || (OlStyle = {}));
+var ListStyle;
+(function(ListStyle2) {
+  ListStyle2["DISC"] = "disc";
+  ListStyle2["CIRCLE"] = "circle";
+  ListStyle2["SQUARE"] = "square";
+  ListStyle2["DECIMAL"] = "decimal";
+})(ListStyle || (ListStyle = {}));
+const ulStyleMapping = {
+  [UlStyle.DISC]: "\u2022",
+  [UlStyle.CIRCLE]: "\u25E6",
+  [UlStyle.SQUARE]: "\u25AB\uFE0E"
+};
+const listTypeElementMapping = {
+  [ListType.OL]: "ol",
+  [ListType.UL]: "ul"
+};
+const listStyleCSSMapping = {
+  [ListStyle.DISC]: "disc",
+  [ListStyle.CIRCLE]: "circle",
+  [ListStyle.SQUARE]: "square",
+  [ListStyle.DECIMAL]: "decimal"
+};
 var TitleLevel;
 (function(TitleLevel2) {
   TitleLevel2["FIRST"] = "first";
@@ -3354,11 +3408,11 @@ function unzipElementList(elementList) {
   return result;
 }
 function formatElementList(elementList, options) {
-  var _a;
   const { isHandleFirstElement, editorOptions } = __spreadValues({
     isHandleFirstElement: true
   }, options);
-  if (isHandleFirstElement && ((_a = elementList[0]) == null ? void 0 : _a.value) !== ZERO) {
+  const startElement = elementList[0];
+  if (isHandleFirstElement && (startElement == null ? void 0 : startElement.value) !== ZERO && (startElement == null ? void 0 : startElement.value) !== "\n") {
     elementList.unshift({
       value: ZERO
     });
@@ -3366,7 +3420,49 @@ function formatElementList(elementList, options) {
   let i = 0;
   while (i < elementList.length) {
     let el = elementList[i];
-    if (el.type === ElementType.TABLE) {
+    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.LIST) {
+      elementList.splice(i, 1);
+      const valueList = el.valueList || [];
+      formatElementList(valueList, __spreadValues({}, options));
+      if (valueList.length) {
+        const listId = getUUID();
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v];
+          value.listId = listId;
+          value.listType = el.listType;
+          value.listStyle = el.listStyle;
+          elementList.splice(i, 0, value);
+          i++;
+        }
+      }
+      i--;
+    } else if (el.type === ElementType.TABLE) {
       const tableId = getUUID();
       el.id = tableId;
       if (el.trList) {
@@ -3426,32 +3522,6 @@ 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();
@@ -3630,7 +3700,53 @@ function zipElementList(payload) {
       e++;
       continue;
     }
-    if (element.type === ElementType.TABLE) {
+    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.listId && element.listType) {
+      const listId = element.listId;
+      const listType = element.listType;
+      const listStyle = element.listStyle;
+      const listElement = {
+        type: ElementType.LIST,
+        value: "",
+        listId,
+        listType,
+        listStyle
+      };
+      const valueList = [];
+      while (e < elementList.length) {
+        const listE = elementList[e];
+        if (listId !== listE.listId) {
+          e--;
+          break;
+        }
+        delete listE.listType;
+        delete listE.listStyle;
+        valueList.push(listE);
+        e++;
+      }
+      listElement.valueList = zipElementList(valueList);
+      element = listElement;
+    } else if (element.type === ElementType.TABLE) {
       if (element.trList) {
         for (let t = 0; t < element.trList.length; t++) {
           const tr = element.trList[t];
@@ -3691,27 +3807,6 @@ 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;
@@ -3776,6 +3871,35 @@ function getElementRowFlex(node) {
 function isTextLikeElement(element) {
   return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type);
 }
+function getAnchorElement(elementList, anchorIndex) {
+  const anchorElement = elementList[anchorIndex];
+  if (!anchorElement)
+    return null;
+  const anchorNextElement = elementList[anchorIndex + 1];
+  return !anchorElement.listId && anchorElement.value === ZERO && anchorNextElement && anchorNextElement.value !== ZERO ? anchorNextElement : anchorElement;
+}
+function formatElementContext(sourceElementList, formatElementList2, anchorIndex) {
+  const copyElement = getAnchorElement(sourceElementList, anchorIndex);
+  if (!copyElement)
+    return;
+  for (let e = 0; e < formatElementList2.length; e++) {
+    const targetElement = formatElementList2[e];
+    if (!copyElement.listId && targetElement.type === ElementType.LIST)
+      continue;
+    if (targetElement.valueList && targetElement.valueList.length) {
+      formatElementContext(sourceElementList, targetElement.valueList, anchorIndex);
+    }
+    for (let i = 0; i < EDITOR_ELEMENT_CONTEXT_ATTR.length; i++) {
+      const attr = EDITOR_ELEMENT_CONTEXT_ATTR[i];
+      const value = copyElement[attr];
+      if (value !== void 0) {
+        targetElement[attr] = value;
+      } else {
+        delete targetElement[attr];
+      }
+    }
+  }
+}
 function writeClipboardItem(text, html) {
   if (!text || !html)
     return;
@@ -3818,9 +3942,7 @@ function convertElementToDom(element, options) {
   if (element.italic) {
     dom.style.fontStyle = "italic";
   }
-  if (element.size) {
-    dom.style.fontSize = `${element.size}px`;
-  }
+  dom.style.fontSize = `${element.size || options.defaultSize}px`;
   if (element.highlight) {
     dom.style.backgroundColor = element.highlight;
   }
@@ -3864,6 +3986,36 @@ function writeElementList(elementList, options) {
         const childDom = buildDomFromElementList(zipElementList(element.valueList));
         h.innerHTML = childDom.innerHTML;
         clipboardDom2.append(h);
+      } else if (element.type === ElementType.LIST) {
+        const list = document.createElement(listTypeElementMapping[element.listType]);
+        if (element.listStyle) {
+          list.style.listStyleType = listStyleCSSMapping[element.listStyle];
+        }
+        let curListIndex = 0;
+        const listElementListMap = new Map();
+        const zipList = zipElementList(element.valueList);
+        for (let z = 0; z < zipList.length; z++) {
+          const zipElement = zipList[z];
+          const zipValueList = zipElement.value.split("\n");
+          for (let c = 0; c < zipValueList.length; c++) {
+            if (c > 0) {
+              curListIndex += 1;
+            }
+            const value = zipValueList[c];
+            const listElementList = listElementListMap.get(curListIndex) || [];
+            listElementList.push(__spreadProps(__spreadValues({}, zipElement), {
+              value
+            }));
+            listElementListMap.set(curListIndex, listElementList);
+          }
+        }
+        listElementListMap.forEach((listElementList) => {
+          const li = document.createElement("li");
+          const childDom = buildDomFromElementList(listElementList);
+          li.innerHTML = childDom.innerHTML;
+          list.append(li);
+        });
+        clipboardDom2.append(list);
       } else if (element.type === ElementType.IMAGE) {
         const img = document.createElement("img");
         if (element.value) {
@@ -3971,6 +4123,27 @@ function getElementListByHTML(htmlText, options) {
               value: "\n"
             });
           }
+        } else if (node.nodeName === "UL" || node.nodeName === "OL") {
+          const listNode = node;
+          const listElement = {
+            value: "",
+            type: ElementType.LIST,
+            valueList: []
+          };
+          if (node.nodeName === "OL") {
+            listElement.listType = ListType.OL;
+          } else {
+            listElement.listType = ListType.UL;
+            listElement.listStyle = listNode.style.listStyleType;
+          }
+          listNode.querySelectorAll("li").forEach((li) => {
+            const liValueList = getElementListByHTML(li.innerHTML, options);
+            liValueList.unshift({
+              value: "\n"
+            });
+            listElement.valueList.push(...liValueList);
+          });
+          elementList.push(listElement);
         } else if (node.nodeName === "HR") {
           elementList.push({
             value: "\n",
@@ -4051,7 +4224,8 @@ function getElementListByHTML(htmlText, options) {
   document.body.appendChild(clipboardDom);
   const deleteNodes = [];
   clipboardDom.childNodes.forEach((child) => {
-    if (child.nodeType !== 1) {
+    var _a;
+    if (child.nodeType !== 1 && !((_a = child.textContent) == null ? void 0 : _a.trim())) {
       deleteNodes.push(child);
     }
   });
@@ -4096,6 +4270,9 @@ class CursorAgent {
     const clipboardData = evt.clipboardData;
     if (!clipboardData)
       return;
+    const rangeManager = this.draw.getRange();
+    const { startIndex } = rangeManager.getRange();
+    const elementList = this.draw.getElementList();
     let isHTML = false;
     for (let i = 0; i < clipboardData.items.length; i++) {
       const item = clipboardData.items[i];
@@ -4114,10 +4291,34 @@ class CursorAgent {
         }
         if (item.type === "text/html" && isHTML) {
           item.getAsString((htmlText) => {
-            const elementList = getElementListByHTML(htmlText, {
+            const pasteElementList = getElementListByHTML(htmlText, {
               innerWidth: this.draw.getOriginalInnerWidth()
             });
-            this.draw.insertElementList(elementList);
+            if (~startIndex && !rangeManager.getIsSelectAll()) {
+              const anchorElement = elementList[startIndex];
+              if ((anchorElement == null ? void 0 : anchorElement.titleId) || (anchorElement == null ? void 0 : anchorElement.listId)) {
+                let start = 0;
+                while (start < pasteElementList.length) {
+                  const pasteElement = pasteElementList[start];
+                  if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement.type)) {
+                    pasteElementList.splice(start, 1);
+                    if (pasteElement.valueList) {
+                      for (let v = 0; v < pasteElement.valueList.length; v++) {
+                        const element = pasteElement.valueList[v];
+                        if (element.value === ZERO || element.value === "\n")
+                          continue;
+                        pasteElementList.splice(start, 0, element);
+                        start++;
+                      }
+                    }
+                    start--;
+                  }
+                  start++;
+                }
+              }
+              formatElementContext(elementList, pasteElementList, startIndex);
+            }
+            this.draw.insertElementList(pasteElementList);
           });
         }
       } else if (item.kind === "file") {
@@ -4131,12 +4332,16 @@ class CursorAgent {
               const value = fileReader.result;
               image.src = value;
               image.onload = () => {
-                this.draw.insertElementList([{
+                const imageElement = {
                   value,
                   type: ElementType.IMAGE,
                   width: image.width,
                   height: image.height
-                }]);
+                };
+                if (~startIndex) {
+                  formatElementContext(elementList, [imageElement], startIndex);
+                }
+                this.draw.insertElementList([imageElement]);
               };
             };
           }
@@ -4186,7 +4391,7 @@ class Cursor {
     if (!cursorPosition)
       return;
     const { scale, cursor } = this.options;
-    const { color, width, isBlink = true } = __spreadValues(__spreadValues({}, cursor), payload);
+    const { color, width, isShow = true, isBlink = true } = __spreadValues(__spreadValues({}, cursor), payload);
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
     const { metrics, coordinate: { leftTop, rightTop }, ascent, pageNo } = cursorPosition;
@@ -4205,6 +4410,8 @@ class Cursor {
     const cursorLeft = rightTop[0];
     agentCursorDom.style.left = `${cursorLeft}px`;
     agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT * scale}px`;
+    if (!isShow)
+      return;
     const isReadonly = this.draw.isReadonly();
     this.cursorDom.style.width = `${width}px`;
     this.cursorDom.style.backgroundColor = color;
@@ -4490,6 +4697,9 @@ function mousedown(evt, host) {
       mime: "svg",
       srcKey: "laTexSVG"
     } : {});
+    draw.getCursor().drawCursor({
+      isShow: false
+    });
   }
   const tableTool = draw.getTableTool();
   tableTool.dispose();
@@ -4530,6 +4740,15 @@ function mouseup(evt, host) {
     const cacheElementList = host.cacheElementList;
     const cachePositionList = host.cachePositionList;
     const range = rangeManager.getRange();
+    if (range.startIndex >= cacheRange.startIndex && range.endIndex <= cacheRange.endIndex) {
+      rangeManager.replaceRange(__spreadValues({}, cacheRange));
+      draw.render({
+        isSetCursor: false,
+        isCompute: false,
+        isSubmitHistory: false
+      });
+      return;
+    }
     const dragElementList = cacheElementList.slice(cacheRange.startIndex + 1, cacheRange.endIndex + 1);
     const isContainControl = dragElementList.find((element) => element.type === ElementType.CONTROL);
     if (isContainControl) {
@@ -4547,18 +4766,12 @@ function mouseup(evt, host) {
     }
     const editorOptions = draw.getOptions();
     const elementList = draw.getElementList();
-    const anchorElement = elementList[range.startIndex];
-    let restArg = {};
-    if (anchorElement.tableId) {
-      const { tdId, trId, tableId } = anchorElement;
-      restArg = { tdId, trId, tableId };
-    }
     const replaceElementList = dragElementList.map((el) => {
       var _a2;
       if (!el.type || el.type === ElementType.TEXT || ((_a2 = el.control) == null ? void 0 : _a2.type) === ControlType.TEXT) {
-        const newElement = __spreadValues({
+        const newElement = {
           value: el.value
-        }, restArg);
+        };
         EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
           const value = el[attr];
           if (value !== void 0) {
@@ -4575,6 +4788,7 @@ function mouseup(evt, host) {
         return newElement;
       }
     });
+    formatElementContext(elementList, replaceElementList, range.startIndex);
     const cacheRangeStartId = createDragId(cacheElementList[cacheRange.startIndex]);
     const cacheRangeEndId = createDragId(cacheElementList[cacheRange.endIndex]);
     const replaceLength = replaceElementList.length;
@@ -4586,7 +4800,7 @@ function mouseup(evt, host) {
       rangeEnd = activeControl.setValue(replaceElementList);
       rangeStart = rangeEnd - replaceLength;
     } else {
-      elementList.splice(rangeStart + 1, 0, ...replaceElementList);
+      draw.spliceElementList(elementList, rangeStart + 1, 0, ...replaceElementList);
     }
     if (!~rangeEnd) {
       draw.render({
@@ -4606,7 +4820,7 @@ function mouseup(evt, host) {
       }));
       (_c = control.getActiveControl()) == null ? void 0 : _c.cut();
     } else {
-      cacheElementList.splice(cacheRangeStartIndex + 1, cacheRangeEndIndex - cacheRangeStartIndex);
+      draw.spliceElementList(cacheElementList, cacheRangeStartIndex + 1, cacheRangeEndIndex - cacheRangeStartIndex);
     }
     const startElement = elementList[range.startIndex];
     const cacheStartElement = cacheElementList[cacheRange.startIndex];
@@ -4700,7 +4914,7 @@ function mousemove(evt, host) {
   });
 }
 function keydown(evt, host) {
-  var _a;
+  var _a, _b;
   if (host.isComposing)
     return;
   const draw = host.getDraw();
@@ -4740,9 +4954,9 @@ function keydown(evt, host) {
         });
       }
       if (!isCollapsed) {
-        elementList.splice(startIndex + 1, endIndex - startIndex);
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
       } else {
-        elementList.splice(index2, 1);
+        draw.spliceElementList(elementList, index2, 1);
       }
       curIndex = isCollapsed ? index2 - 1 : startIndex;
     }
@@ -4758,9 +4972,9 @@ function keydown(evt, host) {
       curIndex = control.removeControl(endIndex + 1);
     } else {
       if (!isCollapsed) {
-        elementList.splice(startIndex + 1, endIndex - startIndex);
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
       } else {
-        elementList.splice(index2 + 1, 1);
+        draw.spliceElementList(elementList, index2 + 1, 1);
       }
       curIndex = isCollapsed ? index2 : startIndex;
     }
@@ -4769,23 +4983,21 @@ function keydown(evt, host) {
   } else if (evt.key === KeyMap.Enter) {
     if (isReadonly || isPartRangeInControlOutside)
       return;
-    const positionContext = position.getPositionContext();
-    let restArg = {};
-    if (positionContext.isTable) {
-      const { tdId, trId, tableId } = positionContext;
-      restArg = { tdId, trId, tableId };
-    }
-    const enterText = __spreadValues({
+    const enterText = {
       value: ZERO
-    }, restArg);
+    };
+    const endElement = elementList[endIndex];
+    if (!(endElement.titleId && endElement.titleId !== ((_b = elementList[endIndex + 1]) == null ? void 0 : _b.titleId))) {
+      formatElementContext(elementList, [enterText], startIndex);
+    }
     let curIndex;
     if (activeControl && !control.isRangInPostfix()) {
       curIndex = control.setValue([enterText]);
     } else {
       if (isCollapsed) {
-        elementList.splice(index2 + 1, 0, enterText);
+        draw.spliceElementList(elementList, index2 + 1, 0, enterText);
       } else {
-        elementList.splice(startIndex + 1, endIndex - startIndex, enterText);
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex, enterText);
       }
       curIndex = index2 + 1;
     }
@@ -4999,20 +5211,14 @@ function input(data2, host) {
 `, ZERO);
   const rangeManager = draw.getRange();
   const { startIndex, endIndex } = rangeManager.getRange();
-  const positionContext = position.getPositionContext();
-  let restArg = {};
-  if (positionContext.isTable) {
-    const { tdId, trId, tableId } = positionContext;
-    restArg = { tdId, trId, tableId };
-  }
   const elementList = draw.getElementList();
-  const endElement = elementList[endIndex];
-  const endNextElement = elementList[endIndex + 1];
-  const copyElement = endElement.value === ZERO && endNextElement ? endNextElement : endElement;
+  const copyElement = getAnchorElement(elementList, endIndex);
+  if (!copyElement)
+    return;
   const inputData = splitText(text).map((value) => {
-    const newElement = __spreadValues({
+    const newElement = {
       value
-    }, restArg);
+    };
     const nextElement = elementList[endIndex + 1];
     if (copyElement.type === TEXT || !copyElement.type && copyElement.value !== ZERO || 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) => {
@@ -5033,11 +5239,10 @@ function input(data2, host) {
   } else {
     const start = startIndex + 1;
     if (startIndex !== endIndex) {
-      elementList.splice(start, endIndex - startIndex);
-    }
-    for (let i = 0; i < inputData.length; i++) {
-      elementList.splice(start + i, 0, inputData[i]);
+      draw.spliceElementList(elementList, start, endIndex - startIndex);
     }
+    formatElementContext(elementList, inputData, startIndex);
+    draw.spliceElementList(elementList, start, 0, ...inputData);
     curIndex = startIndex + inputData.length;
   }
   if (~curIndex) {
@@ -5107,7 +5312,7 @@ function cut(host) {
   if (activeControl) {
     curIndex = control.cut();
   } else {
-    elementList.splice(start + 1, end - start);
+    draw.spliceElementList(elementList, start + 1, end - start);
     curIndex = start;
   }
   rangeManager.setRange(curIndex, curIndex);
@@ -5650,7 +5855,7 @@ class Position {
     this.positionList = payload;
   }
   computePageRowPosition(payload) {
-    const { positionList, rowList, pageNo, startX, startY, startIndex, innerWidth } = payload;
+    const { positionList, rowList, pageNo, startX, startY, startRowIndex, startIndex, innerWidth } = payload;
     const { scale, tdPadding } = this.options;
     let x = startX;
     let y = startY;
@@ -5662,6 +5867,9 @@ class Position {
       } else if (curRow.rowFlex === RowFlex.RIGHT) {
         x += innerWidth - curRow.width;
       }
+      if (curRow.isList) {
+        x += curRow.offsetX || 0;
+      }
       const tablePreX = x;
       const tablePreY = y;
       for (let j = 0; j < curRow.elementList.length; j++) {
@@ -5672,6 +5880,7 @@ class Position {
           pageNo,
           index: index2,
           value: element.value,
+          rowIndex: startRowIndex + i,
           rowNo: i,
           metrics,
           ascent: offsetY,
@@ -5699,12 +5908,13 @@ class Position {
                 positionList: td.positionList,
                 rowList: rowList2,
                 pageNo,
+                startRowIndex: 0,
                 startIndex: 0,
                 startX: (td.x + tdPadding) * scale + tablePreX,
                 startY: td.y * scale + tablePreY,
                 innerWidth: (td.width - tdGap) * scale
               });
-              if (td.verticalAlign === VerticalAlign.MIDDLE || td.verticalAlign == VerticalAlign.BOTTOM) {
+              if (td.verticalAlign === VerticalAlign.MIDDLE || td.verticalAlign === VerticalAlign.BOTTOM) {
                 const rowsHeight = rowList2.reduce((pre, cur) => pre + cur.height, 0);
                 const blankHeight = (td.height - tdGap) * scale - rowsHeight;
                 const offsetHeight = td.verticalAlign === VerticalAlign.MIDDLE ? blankHeight / 2 : blankHeight;
@@ -5740,6 +5950,7 @@ class Position {
     const header = this.draw.getHeader();
     const extraHeight = header.getExtraHeight();
     const startY = margins[0] + extraHeight;
+    let startRowIndex = 0;
     for (let i = 0; i < pageRowList.length; i++) {
       const rowList = pageRowList[i];
       const startIndex = rowList[0].startIndex;
@@ -5747,11 +5958,13 @@ class Position {
         positionList: this.positionList,
         rowList,
         pageNo: i,
+        startRowIndex,
         startIndex,
         startX,
         startY,
         innerWidth
       });
+      startRowIndex += rowList.length;
     }
   }
   setCursorPosition(position) {
@@ -6011,6 +6224,89 @@ class RangeManager {
     }
     return rangeRow;
   }
+  getRangeParagraph() {
+    var _a, _b, _c;
+    const { startIndex, endIndex } = this.range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    const positionList = this.position.getPositionList();
+    const elementList = this.draw.getElementList();
+    const rangeRow = new Map();
+    let start = startIndex;
+    while (start > 0) {
+      if (elementList[start].titleId !== ((_a = elementList[start - 1]) == null ? void 0 : _a.titleId))
+        break;
+      const { pageNo, rowNo } = positionList[start];
+      let rowArray = rangeRow.get(pageNo);
+      if (!rowArray) {
+        rowArray = [];
+        rangeRow.set(pageNo, rowArray);
+      }
+      if (!rowArray.includes(rowNo)) {
+        rowArray.unshift(rowNo);
+      }
+      if (((_b = positionList[start]) == null ? void 0 : _b.value) === ZERO)
+        break;
+      start--;
+    }
+    if (startIndex !== endIndex) {
+      let middle = startIndex + 1;
+      while (middle < endIndex) {
+        const { pageNo, rowNo } = positionList[middle];
+        let rowArray = rangeRow.get(pageNo);
+        if (!rowArray) {
+          rowArray = [];
+          rangeRow.set(pageNo, rowArray);
+        }
+        if (!rowArray.includes(rowNo)) {
+          rowArray.push(rowNo);
+        }
+        middle++;
+      }
+    }
+    let end = endIndex;
+    while (end < positionList.length) {
+      if (positionList[end].value === ZERO || elementList[end].titleId !== ((_c = elementList[end + 1]) == null ? void 0 : _c.titleId))
+        break;
+      const { pageNo, rowNo } = positionList[end];
+      let rowArray = rangeRow.get(pageNo);
+      if (!rowArray) {
+        rowArray = [];
+        rangeRow.set(pageNo, rowArray);
+      }
+      if (!rowArray.includes(rowNo)) {
+        rowArray.push(rowNo);
+      }
+      end++;
+    }
+    return rangeRow;
+  }
+  getRangeElementList() {
+    const { startIndex, endIndex } = this.range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    const rangeElementList = [];
+    const rangeRow = this.getRangeParagraph();
+    if (!rangeRow)
+      return null;
+    const elementList = this.draw.getElementList();
+    const positionList = this.position.getPositionList();
+    for (let p = 0; p < positionList.length; p++) {
+      const position = positionList[p];
+      const rowArray = rangeRow.get(position.pageNo);
+      if (!rowArray)
+        continue;
+      if (rowArray.includes(position.rowNo)) {
+        rangeElementList.push(elementList[p]);
+      }
+    }
+    return rangeElementList;
+  }
+  getIsSelectAll() {
+    const elementList = this.draw.getElementList();
+    const { startIndex, endIndex } = this.range;
+    return startIndex === 0 && elementList.length - 1 === endIndex;
+  }
   getIsPointInRange(x, y) {
     const { startIndex, endIndex } = this.range;
     const positionList = this.position.getPositionList();
@@ -6049,12 +6345,17 @@ class RangeManager {
   setRangeStyle() {
     if (!this.listener.rangeStyleChange)
       return;
-    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;
+    const { endIndex, isCrossRowCol } = this.range;
+    let curElement;
+    if (isCrossRowCol) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const positionContext = this.position.getPositionContext();
+      curElement = originalElementList[positionContext.index];
+    } else {
+      const index2 = ~endIndex ? endIndex : 0;
+      const elementList = this.draw.getElementList();
+      curElement = getAnchorElement(elementList, index2);
+    }
     if (!curElement)
       return;
     const curElementList = this.getSelection() || [curElement];
@@ -6071,6 +6372,8 @@ class RangeManager {
     const rowMargin = curElement.rowMargin || this.options.defaultRowMargin;
     const dashArray = curElement.dashArray || [];
     const level = curElement.level || null;
+    const listType = curElement.listType || null;
+    const listStyle = curElement.listStyle || null;
     const painter = !!this.draw.getPainterStyle();
     const undo = this.historyManager.isCanUndo();
     const redo = this.historyManager.isCanRedo();
@@ -6090,7 +6393,9 @@ class RangeManager {
       rowFlex,
       rowMargin,
       dashArray,
-      level
+      level,
+      listType,
+      listStyle
     });
   }
   recoveryRangeStyle() {
@@ -6118,7 +6423,9 @@ class RangeManager {
       rowFlex: null,
       rowMargin,
       dashArray: [],
-      level: null
+      level: null,
+      listType: null,
+      listStyle: null
     });
   }
   shrinkBoundary() {
@@ -6665,7 +6972,8 @@ const defaultPageNumberOption = {
   color: "#000000",
   rowFlex: RowFlex.CENTER,
   format: FORMAT_PLACEHOLDER.PAGE_NO,
-  numberType: NumberType.ARABIC
+  numberType: NumberType.ARABIC,
+  disabled: false
 };
 class PageNumber {
   constructor(draw) {
@@ -7441,6 +7749,7 @@ class Header {
       positionList: this.positionList,
       rowList: this.rowList,
       pageNo: 0,
+      startRowIndex: 0,
       startIndex: 0,
       startX,
       startY,
@@ -7448,7 +7757,9 @@ class Header {
     });
   }
   getHeaderTop() {
-    const { header: { top }, scale } = this.options;
+    const { header: { top, disabled }, scale } = this.options;
+    if (disabled)
+      return 0;
     return Math.floor(top * scale);
   }
   getMaxHeight() {
@@ -7708,7 +8019,8 @@ class SelectControl {
     }
     if (!~leftIndex || !~rightIndex)
       return -1;
-    elementList.splice(leftIndex + 1, rightIndex - leftIndex);
+    const draw = this.control.getDraw();
+    draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
     this.control.addPlaceholder(preIndex);
     this.element.control.code = null;
     return preIndex;
@@ -7727,11 +8039,14 @@ class SelectControl {
     const startElement = elementList[startIndex];
     const start = startIndex + 1;
     const data2 = splitText(valueSet.value);
+    const draw = this.control.getDraw();
     for (let i = 0; i < data2.length; i++) {
-      elementList.splice(start + i, 0, __spreadProps(__spreadValues({}, startElement), {
+      const newElement = __spreadProps(__spreadValues({}, startElement), {
         value: data2[i],
         controlComponent: ControlComponent.VALUE
-      }));
+      });
+      formatElementContext(elementList, [newElement], startIndex);
+      draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     const newIndex = start + data2.length - 1;
     this.control.repaintControl(newIndex);
@@ -7835,17 +8150,20 @@ class TextControl {
     const range = this.control.getRange();
     this.control.shrinkBoundary();
     const { startIndex, endIndex } = range;
+    const draw = this.control.getDraw();
     if (startIndex !== endIndex) {
-      elementList.splice(startIndex + 1, endIndex - startIndex);
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
     } else {
       this.control.removePlaceholder(startIndex);
     }
     const startElement = elementList[startIndex];
     const start = range.startIndex + 1;
     for (let i = 0; i < data2.length; i++) {
-      elementList.splice(start + i, 0, __spreadProps(__spreadValues(__spreadValues({}, startElement), data2[i]), {
+      const newElement = __spreadProps(__spreadValues(__spreadValues({}, startElement), data2[i]), {
         controlComponent: ControlComponent.VALUE
-      }));
+      });
+      formatElementContext(elementList, [newElement], startIndex);
+      draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     return start + data2.length - 1;
   }
@@ -7856,9 +8174,10 @@ class TextControl {
     const { startIndex, endIndex } = range;
     const startElement = elementList[startIndex];
     const endElement = elementList[endIndex];
+    const draw = this.control.getDraw();
     if (evt.key === KeyMap.Backspace) {
       if (startIndex !== endIndex) {
-        elementList.splice(startIndex + 1, endIndex - startIndex);
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
         const value = this.getValue();
         if (!value.length) {
           this.control.addPlaceholder(startIndex);
@@ -7868,7 +8187,7 @@ class TextControl {
         if (startElement.controlComponent === ControlComponent.PREFIX || endElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
           return this.control.removeControl(startIndex);
         } else {
-          elementList.splice(startIndex, 1);
+          draw.spliceElementList(elementList, startIndex, 1);
           const value = this.getValue();
           if (!value.length) {
             this.control.addPlaceholder(startIndex - 1);
@@ -7878,7 +8197,7 @@ class TextControl {
       }
     } else if (evt.key === KeyMap.Delete) {
       if (startIndex !== endIndex) {
-        elementList.splice(startIndex + 1, endIndex - startIndex);
+        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
         const value = this.getValue();
         if (!value.length) {
           this.control.addPlaceholder(startIndex);
@@ -7889,7 +8208,7 @@ class TextControl {
         if (startElement.controlComponent === ControlComponent.PREFIX && endNextElement.controlComponent === ControlComponent.PLACEHOLDER || endNextElement.controlComponent === ControlComponent.POSTFIX || startElement.controlComponent === ControlComponent.PLACEHOLDER) {
           return this.control.removeControl(startIndex);
         } else {
-          elementList.splice(startIndex + 1, 1);
+          draw.spliceElementList(elementList, startIndex + 1, 1);
           const value = this.getValue();
           if (!value.length) {
             this.control.addPlaceholder(startIndex);
@@ -7906,8 +8225,9 @@ class TextControl {
     if (startIndex === endIndex) {
       return startIndex;
     }
+    const draw = this.control.getDraw();
     const elementList = this.control.getElementList();
-    elementList.splice(startIndex + 1, endIndex - startIndex);
+    draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
     const value = this.getValue();
     if (!value.length) {
       this.control.addPlaceholder(startIndex);
@@ -7928,6 +8248,9 @@ class Control {
     this.options = draw.getOptions().control;
     this.activeControl = null;
   }
+  getDraw() {
+    return this.draw;
+  }
   isPartRangeInControlOutside() {
     const { startIndex, endIndex } = this.getRange();
     if (!~startIndex && !~endIndex)
@@ -8121,7 +8444,7 @@ class Control {
     if (!~leftIndex && !~rightIndex)
       return startIndex;
     leftIndex = ~leftIndex ? leftIndex : 0;
-    elementList.splice(leftIndex + 1, rightIndex - leftIndex);
+    this.draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
     return leftIndex;
   }
   removePlaceholder(startIndex) {
@@ -8135,7 +8458,7 @@ class Control {
         if (curElement.controlId !== startElement.controlId)
           break;
         if (curElement.controlComponent === ControlComponent.PLACEHOLDER) {
-          elementList.splice(index2, 1);
+          this.draw.spliceElementList(elementList, index2, 1);
         } else {
           index2++;
         }
@@ -8151,14 +8474,16 @@ class Control {
     const placeholderStrList = splitText(control.placeholder);
     for (let p = 0; p < placeholderStrList.length; p++) {
       const value = placeholderStrList[p];
-      elementList.splice(startIndex + p + 1, 0, {
+      const newElement = {
         value,
         controlId: startElement.controlId,
         type: ElementType.CONTROL,
         control: startElement.control,
         controlComponent: ControlComponent.PLACEHOLDER,
         color: this.options.placeholderColor
-      });
+      };
+      formatElementContext(elementList, [newElement], startIndex);
+      this.draw.spliceElementList(elementList, startIndex + p + 1, 0, newElement);
     }
   }
   setValue(data2) {
@@ -8271,6 +8596,12 @@ class Previewer {
     __publicField(this, "curHandleIndex");
     __publicField(this, "previewerContainer");
     __publicField(this, "previewerImage");
+    __publicField(this, "_keydown", () => {
+      if (this.resizerSelection.style.display === "block") {
+        this.clearResizer();
+        document.removeEventListener("keydown", this._keydown);
+      }
+    });
     this.container = draw.getContainer();
     this.canvas = draw.getPage();
     this.draw = draw;
@@ -8543,9 +8874,11 @@ class Previewer {
     this.curPosition = position;
     this.width = this.curElement.width * scale;
     this.height = this.curElement.height * scale;
+    document.addEventListener("keydown", this._keydown);
   }
   clearResizer() {
     this.resizerSelection.style.display = "none";
+    document.removeEventListener("keydown", this._keydown);
   }
 }
 const contextmenu$1 = {
@@ -9090,16 +9423,18 @@ class DateParticle {
     const [leftIndex, rightIndex] = range;
     const elementList = this.draw.getElementList();
     const startElement = elementList[leftIndex + 1];
-    elementList.splice(leftIndex + 1, rightIndex - leftIndex);
+    this.draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
     this.range.setRange(leftIndex, leftIndex);
-    this.draw.insertElementList([{
+    const dateElement = {
       type: ElementType.DATE,
       value: "",
       dateFormat: startElement.dateFormat,
       valueList: [{
         value: date
       }]
-    }]);
+    };
+    formatElementContext(elementList, [dateElement], leftIndex);
+    this.draw.insertElementList([dateElement]);
   }
   getDateElementRange() {
     let leftIndex = -1;
@@ -9596,6 +9931,7 @@ class Footer {
       positionList: this.positionList,
       rowList: this.rowList,
       pageNo: 0,
+      startRowIndex: 0,
       startIndex: 0,
       startX,
       startY,
@@ -9603,7 +9939,9 @@ class Footer {
     });
   }
   getFooterBottom() {
-    const { footer: { bottom }, scale } = this.options;
+    const { footer: { bottom, disabled }, scale } = this.options;
+    if (disabled)
+      return 0;
     return Math.floor(bottom * scale);
   }
   getMaxHeight() {
@@ -9651,6 +9989,85 @@ class Footer {
     });
   }
 }
+class ListParticle {
+  constructor(draw) {
+    __publicField(this, "options");
+    __publicField(this, "UN_COUNT_STYLE_WIDTH", 20);
+    __publicField(this, "MEASURE_BASE_TEXT", "0");
+    __publicField(this, "LIST_GAP", 10);
+    this.options = draw.getOptions();
+  }
+  computeListStyle(ctx, elementList) {
+    const listStyleMap = new Map();
+    let start = 0;
+    let curListId = elementList[start].listId;
+    let curElementList = [];
+    const elementLength = elementList.length;
+    while (start < elementLength) {
+      const curElement = elementList[start];
+      if (curListId && curListId === curElement.listId) {
+        curElementList.push(curElement);
+      } else {
+        if (curElement.listId && curElement.listId !== curListId) {
+          if (curElementList.length) {
+            const width = this.getListStyleWidth(ctx, curElementList);
+            listStyleMap.set(curListId, width);
+          }
+          curListId = curElement.listId;
+          curElementList = curListId ? [curElement] : [];
+        }
+      }
+      start++;
+    }
+    if (curElementList.length) {
+      const width = this.getListStyleWidth(ctx, curElementList);
+      listStyleMap.set(curListId, width);
+    }
+    return listStyleMap;
+  }
+  getListStyleWidth(ctx, listElementList) {
+    const { scale } = this.options;
+    const startElement = listElementList[0];
+    if (startElement.listStyle && startElement.listStyle !== ListStyle.DECIMAL) {
+      return this.UN_COUNT_STYLE_WIDTH * scale;
+    }
+    const count = listElementList.reduce((pre, cur) => {
+      if (cur.value === ZERO) {
+        pre += 1;
+      }
+      return pre;
+    }, 0);
+    if (!count)
+      return 0;
+    const text = `${this.MEASURE_BASE_TEXT.repeat(String(count).length)}${KeyMap.PERIOD}`;
+    const textMetrics = ctx.measureText(text);
+    return Math.ceil((textMetrics.width + this.LIST_GAP) * scale);
+  }
+  drawListStyle(ctx, row, position) {
+    const { elementList, offsetX, listIndex, ascent } = row;
+    const startElement = elementList[0];
+    if (startElement.value !== ZERO)
+      return;
+    let text = "";
+    if (startElement.listType === ListType.UL) {
+      if (startElement.listStyle) {
+        text = ulStyleMapping[startElement.listStyle] || ulStyleMapping[UlStyle.DISC];
+      }
+    } else {
+      text = `${listIndex + 1}${KeyMap.PERIOD}`;
+    }
+    if (!text)
+      return;
+    const { coordinate: { leftTop: [startX, startY] } } = position;
+    const x = startX - offsetX;
+    const y = startY + ascent;
+    const { defaultFont, defaultSize, scale } = this.options;
+    ctx.save();
+    ctx.font = `${defaultSize * scale}px ${defaultFont}`;
+    ctx.fillText(text, x, y);
+    ctx.restore();
+  }
+}
 class Draw {
   constructor(rootContainer, options, data2, listener) {
     __publicField(this, "container");
@@ -9696,6 +10113,7 @@ class Draw {
     __publicField(this, "subscriptParticle");
     __publicField(this, "checkboxParticle");
     __publicField(this, "blockParticle");
+    __publicField(this, "listParticle");
     __publicField(this, "control");
     __publicField(this, "workerManager");
     __publicField(this, "scrollObserver");
@@ -9750,6 +10168,7 @@ class Draw {
     this.subscriptParticle = new SubscriptParticle();
     this.checkboxParticle = new CheckboxParticle(this);
     this.blockParticle = new BlockParticle(this);
+    this.listParticle = new ListParticle(this);
     this.control = new Control(this);
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver();
@@ -9980,18 +10399,9 @@ class Draw {
       const isCollapsed = startIndex === endIndex;
       const start = startIndex + 1;
       if (!isCollapsed) {
-        elementList.splice(start, endIndex - startIndex);
-      }
-      const positionContext = this.position.getPositionContext();
-      for (let i = 0; i < payload.length; i++) {
-        const element = payload[i];
-        if (positionContext.isTable) {
-          element.tdId = positionContext.tdId;
-          element.trId = positionContext.trId;
-          element.tableId = positionContext.tableId;
-        }
-        elementList.splice(start + i, 0, element);
+        this.spliceElementList(elementList, start, endIndex - startIndex);
       }
+      this.spliceElementList(elementList, start, 0, ...payload);
       curIndex = startIndex + payload.length;
     }
     if (~curIndex) {
@@ -10001,6 +10411,27 @@ class Draw {
       });
     }
   }
+  spliceElementList(elementList, start, deleteCount, ...items) {
+    var _a;
+    if (deleteCount > 0) {
+      const endIndex = start + deleteCount;
+      const endElement = elementList[endIndex];
+      const endElementListId = endElement == null ? void 0 : endElement.listId;
+      if (endElementListId && ((_a = elementList[start - 1]) == null ? void 0 : _a.listId) !== endElementListId) {
+        let startIndex = endIndex;
+        while (startIndex < elementList.length) {
+          const curElement = elementList[startIndex];
+          if (curElement.listId !== endElementListId || curElement.value === ZERO)
+            break;
+          delete curElement.listId;
+          delete curElement.listType;
+          delete curElement.listStyle;
+          startIndex++;
+        }
+      }
+    }
+    elementList.splice(start, deleteCount, ...items);
+  }
   getCanvasEvent() {
     return this.canvasEvent;
   }
@@ -10031,6 +10462,9 @@ class Draw {
   getDateParticle() {
     return this.dateParticle;
   }
+  getListParticle() {
+    return this.listParticle;
+  }
   getControl() {
     return this.control;
   }
@@ -10137,15 +10571,17 @@ class Draw {
     });
   }
   setPaperSize(width, height) {
-    const dpr = window.devicePixelRatio;
     this.options.width = width;
     this.options.height = height;
-    this.container.style.width = `${width}px`;
+    const dpr = window.devicePixelRatio;
+    const realWidth = this.getWidth();
+    const realHeight = this.getHeight();
+    this.container.style.width = `${realWidth}px`;
     this.pageList.forEach((p, i) => {
-      p.width = width * dpr;
-      p.height = height * dpr;
-      p.style.width = `${width}px`;
-      p.style.height = `${height}px`;
+      p.width = realWidth * dpr;
+      p.height = realHeight * dpr;
+      p.style.width = `${realWidth}px`;
+      p.style.height = `${realHeight}px`;
       this._initPageContext(this.ctxList[i]);
     });
     this.render({
@@ -10249,6 +10685,7 @@ class Draw {
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
+    const listStyleMap = this.listParticle.computeListStyle(ctx, elementList);
     const rowList = [];
     if (elementList.length) {
       rowList.push({
@@ -10260,6 +10697,8 @@ class Draw {
         rowFlex: (_a = elementList == null ? void 0 : elementList[1]) == null ? void 0 : _a.rowFlex
       });
     }
+    let listId;
+    let listIndex = 0;
     for (let i = 0; i < elementList.length; i++) {
       const curRow = rowList[rowList.length - 1];
       const element = elementList[i];
@@ -10270,14 +10709,17 @@ class Draw {
         boundingBoxAscent: 0,
         boundingBoxDescent: 0
       };
+      const offsetX = element.listId ? listStyleMap.get(element.listId) || 0 : 0;
+      const availableWidth = innerWidth - offsetX;
       if (element.type === ElementType.IMAGE || element.type === ElementType.LATEX) {
         const elementWidth = element.width * scale;
         const elementHeight = element.height * scale;
         const curRowWidth2 = element.imgDisplay === ImageDisplay.INLINE ? 0 : curRow.width;
-        if (curRowWidth2 + elementWidth > innerWidth) {
-          const surplusWidth = innerWidth - curRowWidth2;
-          element.width = surplusWidth;
-          element.height = elementHeight * surplusWidth / elementWidth;
+        if (curRowWidth2 + elementWidth > availableWidth) {
+          const surplusWidth = availableWidth - curRowWidth2;
+          const adaptiveWidth = surplusWidth > 0 ? surplusWidth : Math.min(elementWidth, availableWidth);
+          element.width = adaptiveWidth;
+          element.height = elementHeight * adaptiveWidth / elementWidth;
           metrics.width = element.width;
           metrics.height = element.height;
           metrics.boundingBoxDescent = element.height;
@@ -10396,7 +10838,7 @@ class Draw {
             const cloneElement = deepClone(element);
             cloneElement.trList = cloneTrList;
             cloneElement.id = getUUID();
-            elementList.splice(i + 1, 0, cloneElement);
+            this.spliceElementList(elementList, i + 1, 0, cloneElement);
             const positionContext = this.position.getPositionContext();
             if (positionContext.isTable && positionContext.trIndex === deleteStart) {
               positionContext.index += 1;
@@ -10406,14 +10848,14 @@ class Draw {
           }
         }
       } else if (element.type === ElementType.SEPARATOR) {
-        element.width = innerWidth;
-        metrics.width = innerWidth;
+        element.width = availableWidth;
+        metrics.width = availableWidth;
         metrics.height = defaultSize;
         metrics.boundingBoxAscent = -rowMargin;
         metrics.boundingBoxDescent = -rowMargin;
       } else if (element.type === ElementType.PAGE_BREAK) {
-        element.width = innerWidth;
-        metrics.width = innerWidth;
+        element.width = availableWidth;
+        metrics.width = availableWidth;
         metrics.height = defaultSize;
       } else if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
         const { width, height: height2, gap } = this.options.checkbox;
@@ -10427,12 +10869,11 @@ class Draw {
         metrics.boundingBoxDescent = 0;
         metrics.boundingBoxAscent = metrics.height;
       } else if (element.type === ElementType.BLOCK) {
-        const innerWidth2 = this.getInnerWidth();
         if (!element.width) {
-          metrics.width = innerWidth2;
+          metrics.width = availableWidth;
         } else {
           const elementWidth = element.width * scale;
-          metrics.width = elementWidth > innerWidth2 ? innerWidth2 : elementWidth;
+          metrics.width = Math.min(elementWidth, availableWidth);
         }
         metrics.height = element.height * scale;
         metrics.boundingBoxDescent = metrics.height;
@@ -10457,9 +10898,8 @@ class Draw {
           metrics.boundingBoxDescent += metrics.height / 2;
         }
       }
-      const ascent = metrics.boundingBoxAscent + rowMargin;
-      const descent = metrics.boundingBoxDescent + rowMargin;
-      const height = ascent + descent;
+      const ascent = element.imgDisplay !== ImageDisplay.INLINE && element.type === ElementType.IMAGE || element.type === ElementType.LATEX ? metrics.height + rowMargin : metrics.boundingBoxAscent + rowMargin;
+      const height = rowMargin + metrics.boundingBoxAscent + metrics.boundingBoxDescent + rowMargin;
       const rowElement = Object.assign(element, {
         metrics,
         style: this._getFont(element, scale)
@@ -10467,19 +10907,27 @@ class Draw {
       const preElement = elementList[i - 1];
       const nextElement = elementList[i + 1];
       const curRowWidth = curRow.width + metrics.width + this.textParticle.measurePunctuationWidth(ctx, nextElement);
-      if (element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || curRowWidth > innerWidth || i !== 0 && element.value === ZERO) {
-        if (curRow.startIndex === 0 && curRow.elementList.length === 1 && INLINE_ELEMENT_TYPE.includes(element.type)) {
+      if (element.listId) {
+        if (element.listId !== listId) {
+          listIndex = 0;
+        } else if (element.value === ZERO) {
+          listIndex++;
+        }
+      }
+      listId = element.listId;
+      if (element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || curRowWidth > availableWidth || i !== 0 && element.value === ZERO || (preElement == null ? void 0 : preElement.listId) !== element.listId) {
+        if (curRow.startIndex === 0 && curRow.elementList.length === 1 && (INLINE_ELEMENT_TYPE.includes(element.type) || element.listId)) {
           curRow.height = defaultBasicRowMarginHeight;
         }
-        if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && curRowWidth > innerWidth) {
-          const gap = (innerWidth - curRow.width) / curRow.elementList.length;
+        if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && curRowWidth > availableWidth) {
+          const gap = (availableWidth - curRow.width) / curRow.elementList.length;
           for (let e = 0; e < curRow.elementList.length; e++) {
             const el = curRow.elementList[e];
             el.metrics.width += gap;
           }
-          curRow.width = innerWidth;
+          curRow.width = availableWidth;
         }
-        rowList.push({
+        const row = {
           width: metrics.width,
           height,
           startIndex: i,
@@ -10487,16 +10935,18 @@ class Draw {
           ascent,
           rowFlex: (_d = elementList[i + 1]) == null ? void 0 : _d.rowFlex,
           isPageBreak: element.type === ElementType.PAGE_BREAK
-        });
+        };
+        if (element.listId) {
+          row.isList = true;
+          row.offsetX = listStyleMap.get(element.listId);
+          row.listIndex = listIndex;
+        }
+        rowList.push(row);
       } else {
         curRow.width += metrics.width;
         if (curRow.height < height) {
           curRow.height = height;
-          if (element.type === ElementType.IMAGE || element.type === ElementType.LATEX) {
-            curRow.ascent = metrics.height;
-          } else {
-            curRow.ascent = ascent;
-          }
+          curRow.ascent = ascent;
         }
         curRow.elementList.push(rowElement);
       }
@@ -10675,6 +11125,9 @@ class Draw {
           }
         }
       }
+      if (curRow.isList) {
+        this.listParticle.drawListStyle(ctx, curRow, positionList[curRow.startIndex]);
+      }
       this._drawRichText(ctx);
       if (rangeRecord.width && rangeRecord.height) {
         const { x, y, width, height } = rangeRecord;
@@ -10694,7 +11147,7 @@ class Draw {
   }
   _drawPage(payload) {
     const { elementList, positionList, rowList, pageNo } = payload;
-    const { inactiveAlpha, pageMode } = this.options;
+    const { inactiveAlpha, pageMode, header, footer, pageNumber } = this.options;
     const innerWidth = this.getInnerWidth();
     const ctx = this.ctxList[pageNo];
     ctx.globalAlpha = !this.zone.isMainActive() ? inactiveAlpha : 1;
@@ -10711,9 +11164,15 @@ class Draw {
       innerWidth,
       zone: EditorZone.MAIN
     });
-    this.header.render(ctx, pageNo);
-    this.pageNumber.render(ctx, pageNo);
-    this.footer.render(ctx, pageNo);
+    if (!header.disabled) {
+      this.header.render(ctx, pageNo);
+    }
+    if (!pageNumber.disabled) {
+      this.pageNumber.render(ctx, pageNo);
+    }
+    if (!footer.disabled) {
+      this.footer.render(ctx, pageNo);
+    }
     if (this.search.getSearchKeyword()) {
       this.search.render(ctx, pageNo);
     }
@@ -10757,13 +11216,17 @@ class Draw {
   }
   render(payload) {
     var _a;
-    const { pageMode } = this.options;
+    const { pageMode, header, footer } = this.options;
     const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true } = payload || {};
     let { curIndex } = payload || {};
     const innerWidth = this.getInnerWidth();
     if (isCompute) {
-      this.header.compute();
-      this.footer.compute();
+      if (!header.disabled) {
+        this.header.compute();
+      }
+      if (!footer.disabled) {
+        this.footer.compute();
+      }
       this.rowList = this.computeRowList(innerWidth, this.elementList);
       this.pageRowList = this._computePageList();
       this.position.computePositionList();
@@ -10877,6 +11340,7 @@ const _Command = class {
     _Command.color = adapt.color.bind(adapt);
     _Command.highlight = adapt.highlight.bind(adapt);
     _Command.title = adapt.title.bind(adapt);
+    _Command.list = adapt.list.bind(adapt);
     _Command.left = adapt.rowFlex.bind(adapt);
     _Command.center = adapt.rowFlex.bind(adapt);
     _Command.right = adapt.rowFlex.bind(adapt);
@@ -11018,6 +11482,9 @@ const _Command = class {
   executeRowMargin(payload) {
     return _Command.rowMargin(payload);
   }
+  executeList(listType, listStyle) {
+    return _Command.list(listType, listStyle);
+  }
   executeInsertTable(row, col) {
     return _Command.insertTable(row, col);
   }
@@ -11180,6 +11647,7 @@ __publicField(Command, "subscript");
 __publicField(Command, "color");
 __publicField(Command, "highlight");
 __publicField(Command, "title");
+__publicField(Command, "list");
 __publicField(Command, "left");
 __publicField(Command, "center");
 __publicField(Command, "right");
@@ -11352,9 +11820,9 @@ class CommandAdapt {
       return;
     }
     if (!isCollapsed) {
-      elementList.splice(startIndex + 1, endIndex - startIndex);
+      this.draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
     } else {
-      elementList.splice(startIndex, 1);
+      this.draw.spliceElementList(elementList, startIndex, 1);
     }
     const curIndex = isCollapsed ? startIndex - 1 : startIndex;
     this.range.setRange(curIndex, curIndex);
@@ -11647,25 +12115,10 @@ class CommandAdapt {
     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 changeElementList = startIndex === endIndex ? this.range.getRangeElementList() : elementList.slice(startIndex + 1, endIndex + 1);
+    if (!changeElementList || !changeElementList.length)
+      return;
     const titleId = getUUID();
     const titleOptions = this.draw.getOptions().title;
     changeElementList.forEach((el) => {
@@ -11691,6 +12144,35 @@ class CommandAdapt {
     const curIndex = isSetCursor ? endIndex : startIndex;
     this.draw.render({ curIndex, isSetCursor });
   }
+  list(listType, listStyle) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!~startIndex && !~endIndex)
+      return;
+    const changeElementList = this.range.getRangeElementList();
+    if (!changeElementList || !changeElementList.length)
+      return;
+    const isUnsetList = changeElementList.find((el) => el.listType === listType && el.listStyle === listStyle);
+    const listId = getUUID();
+    changeElementList.forEach((el) => {
+      if (!isUnsetList && listType) {
+        el.listId = listId;
+        el.listType = listType;
+        el.listStyle = listStyle;
+      } else {
+        if (el.listId) {
+          delete el.listId;
+          delete el.listType;
+          delete el.listStyle;
+        }
+      }
+    });
+    const isSetCursor = startIndex === endIndex;
+    const curIndex = isSetCursor ? endIndex : startIndex;
+    this.draw.render({ curIndex, isSetCursor });
+  }
   rowFlex(payload) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
@@ -11742,6 +12224,7 @@ class CommandAdapt {
     this.draw.render({ curIndex, isSetCursor });
   }
   insertTable(row, col) {
+    var _a;
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
@@ -11752,7 +12235,15 @@ class CommandAdapt {
     if (!~startIndex && !~endIndex)
       return;
     const elementList = this.draw.getElementList();
-    const innerWidth = this.draw.getOriginalInnerWidth();
+    let offsetX = 0;
+    if ((_a = elementList[startIndex]) == null ? void 0 : _a.listId) {
+      const positionList = this.position.getPositionList();
+      const { rowIndex } = positionList[startIndex];
+      const rowList = this.draw.getRowList();
+      const row2 = rowList[rowIndex];
+      offsetX = (row2 == null ? void 0 : row2.offsetX) || 0;
+    }
+    const innerWidth = this.draw.getOriginalInnerWidth() - offsetX;
     const colgroup = [];
     const colWidth = innerWidth / col;
     for (let c = 0; c < col; c++) {
@@ -11785,12 +12276,9 @@ class CommandAdapt {
     formatElementList([element], {
       editorOptions: this.options
     });
+    formatElementContext(elementList, [element], startIndex);
     const curIndex = startIndex + 1;
-    if (startIndex === endIndex) {
-      elementList.splice(curIndex, 0, element);
-    } else {
-      elementList.splice(curIndex, endIndex - startIndex, element);
-    }
+    this.draw.spliceElementList(elementList, curIndex, startIndex === endIndex ? 0 : endIndex - startIndex, element);
     this.range.setRange(curIndex, curIndex);
     this.draw.render({ curIndex, isSetCursor: false });
   }
@@ -12364,11 +12852,8 @@ class CommandAdapt {
     if (!newElementList)
       return;
     const start = startIndex + 1;
-    if (startIndex === endIndex) {
-      elementList.splice(start, 0, ...newElementList);
-    } else {
-      elementList.splice(start, endIndex - startIndex, ...newElementList);
-    }
+    formatElementContext(elementList, newElementList, startIndex);
+    this.draw.spliceElementList(elementList, start, startIndex === endIndex ? 0 : endIndex - startIndex, ...newElementList);
     const curIndex = start + newElementList.length - 1;
     this.range.setRange(curIndex, curIndex);
     this.draw.render({ curIndex });
@@ -12414,7 +12899,7 @@ class CommandAdapt {
       return;
     const elementList = this.draw.getElementList();
     const [leftIndex, rightIndex] = hyperRange;
-    elementList.splice(leftIndex, rightIndex - leftIndex + 1);
+    this.draw.spliceElementList(elementList, leftIndex, rightIndex - leftIndex + 1);
     this.draw.getHyperlinkParticle().clearHyperlinkPopup();
     const newIndex = leftIndex - 1;
     this.range.setRange(newIndex, newIndex);
@@ -12483,11 +12968,12 @@ class CommandAdapt {
         type: ElementType.SEPARATOR,
         dashArray: payload
       };
+      formatElementContext(elementList, [newElement], startIndex);
       if (startIndex !== 0 && elementList[startIndex].value === ZERO) {
-        elementList.splice(startIndex, 1, newElement);
+        this.draw.spliceElementList(elementList, startIndex, 1, newElement);
         curIndex = startIndex - 1;
       } else {
-        elementList.splice(startIndex + 1, 0, newElement);
+        this.draw.spliceElementList(elementList, startIndex + 1, 0, newElement);
         curIndex = startIndex;
       }
     }
@@ -12557,11 +13043,8 @@ class CommandAdapt {
       type: ElementType.IMAGE
     };
     const curIndex = startIndex + 1;
-    if (startIndex === endIndex) {
-      elementList.splice(curIndex, 0, element);
-    } else {
-      elementList.splice(curIndex, endIndex - startIndex, element);
-    }
+    formatElementContext(elementList, [element], startIndex);
+    this.draw.spliceElementList(elementList, curIndex, startIndex === endIndex ? 0 : endIndex - startIndex, element);
     this.range.setRange(curIndex, curIndex);
     this.draw.render({ curIndex });
   }
@@ -12625,7 +13108,7 @@ class CommandAdapt {
         const curIndex = index2 + tableDiffCount;
         const tableElement = tableElementList[curIndex];
         if (curGroupId === match.groupId) {
-          tableElementList.splice(curIndex, 1);
+          this.draw.spliceElementList(tableElementList, curIndex, 1);
           tableDiffCount--;
           continue;
         }
@@ -12634,7 +13117,7 @@ class CommandAdapt {
           if (p === 0) {
             tableElement.value = value;
           } else {
-            tableElementList.splice(curIndex + p, 0, __spreadProps(__spreadValues({}, tableElement), {
+            this.draw.spliceElementList(tableElementList, curIndex + p, 0, __spreadProps(__spreadValues({}, tableElement), {
               value
             }));
             tableDiffCount++;
@@ -12650,7 +13133,7 @@ class CommandAdapt {
           firstMatchIndex = m;
         }
         if (curGroupId === match.groupId) {
-          elementList.splice(curIndex, 1);
+          this.draw.spliceElementList(elementList, curIndex, 1);
           pageDiffCount--;
           continue;
         }
@@ -12659,7 +13142,7 @@ class CommandAdapt {
           if (p === 0) {
             element.value = value;
           } else {
-            elementList.splice(curIndex + p, 0, __spreadProps(__spreadValues({}, element), {
+            this.draw.spliceElementList(elementList, curIndex + p, 0, __spreadProps(__spreadValues({}, element), {
               value
             }));
             pageDiffCount++;
@@ -12789,6 +13272,9 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    formatElementContext(elementList, payload, startIndex);
     this.draw.insertElementList(payload);
   }
   removeControl() {
@@ -13398,7 +13884,8 @@ class ContextMenu {
 }
 const defaultHeaderOption = {
   top: 30,
-  maxHeightRadio: MaxHeightRatio.HALF
+  maxHeightRadio: MaxHeightRatio.HALF,
+  disabled: false
 };
 const richtextKeys = [
   {
@@ -13489,6 +13976,82 @@ const richtextKeys = [
     }
   }
 ];
+const titleKeys = [
+  {
+    key: KeyMap.ZERO,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(null);
+    }
+  },
+  {
+    key: KeyMap.ONE,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.FIRST);
+    }
+  },
+  {
+    key: KeyMap.TWO,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.SECOND);
+    }
+  },
+  {
+    key: KeyMap.THREE,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.THIRD);
+    }
+  },
+  {
+    key: KeyMap.FOUR,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.FOURTH);
+    }
+  },
+  {
+    key: KeyMap.FIVE,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.FIFTH);
+    }
+  },
+  {
+    key: KeyMap.SIX,
+    alt: true,
+    ctrl: true,
+    callback: (command) => {
+      command.executeTitle(TitleLevel.SIXTH);
+    }
+  }
+];
+const listKeys = [
+  {
+    key: KeyMap.I,
+    shift: true,
+    mod: true,
+    callback: (command) => {
+      command.executeList(ListType.UL, ListStyle.DISC);
+    }
+  },
+  {
+    key: KeyMap.U,
+    shift: true,
+    mod: true,
+    callback: (command) => {
+      command.executeList(ListType.OL);
+    }
+  }
+];
 class Shortcut {
   constructor(draw, command) {
     __publicField(this, "command");
@@ -13503,7 +14066,9 @@ class Shortcut {
     this.globalShortcutList = [];
     this.agentShortcutList = [];
     this._addShortcutList([
-      ...richtextKeys
+      ...richtextKeys,
+      ...titleKeys,
+      ...listKeys
     ]);
     this._addEvent();
     const agentDom = draw.getCursor().getAgentDom();
@@ -13546,7 +14111,8 @@ class Shortcut {
 }
 const defaultFooterOption = {
   bottom: 30,
-  maxHeightRadio: MaxHeightRatio.HALF
+  maxHeightRadio: MaxHeightRatio.HALF,
+  disabled: false
 };
 class Editor {
   constructor(container, data2, options = {}) {
@@ -13642,5 +14208,5 @@ class Editor {
     };
   }
 }
-export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TitleLevel, VerticalAlign, Editor as default };
+export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, ImageDisplay, KeyMap, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TitleLevel, VerticalAlign, Editor as default };
 //# sourceMappingURL=canvas-editor.es.js.map