@windoc/core 0.3.21 → 0.3.23

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var version = "0.3.21";
+var version = "0.3.23";
 
 // src/dataset/enum/Common.ts
 var MaxHeightRatio = /* @__PURE__ */ ((MaxHeightRatio2) => {
@@ -424,7 +424,7 @@ var ElementType = /* @__PURE__ */ ((ElementType2) => {
 // src/utils/ua.ts
 var isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
 var isIOS = typeof navigator !== "undefined" && /iPad|iPhone/.test(navigator.userAgent);
-var isMobile = /Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+var isMobile = typeof navigator !== "undefined" && /Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
   navigator.userAgent
 );
 var isFirefox = typeof navigator !== "undefined" && /Firefox/.test(navigator.userAgent);
@@ -519,6 +519,8 @@ var TABLE_TD_ZIP_ATTR = [
   "externalId",
   "verticalAlign",
   "backgroundColor",
+  "borderColor",
+  "padding",
   "borderTypes",
   "slashTypes",
   "disabled",
@@ -4420,6 +4422,7 @@ function mergeOption(options = {}) {
     wordBreak: "break-word" /* BREAK_WORD */,
     printPixelRatio: 3,
     maskMargin: [0, 0, 0, 0],
+    scrollPaddingLines: 3,
     letterClass: [LETTER_CLASS.ENGLISH],
     contextMenuDisableKeys: [],
     shortcutDisableKeys: [],
@@ -4937,6 +4940,37 @@ function pickElementAttr(payload, option = {}) {
   });
   return element;
 }
+function mergeSplitTableRowsForZip(trList) {
+  for (let t = trList.length - 1; t >= 0; t--) {
+    const splitTr = trList[t];
+    if (!splitTr.splitParentId) continue;
+    const parentTrIdx = trList.findIndex(
+      (tr) => tr.id === splitTr.splitParentId
+    );
+    if (!~parentTrIdx) continue;
+    const parentTr = trList[parentTrIdx];
+    parentTr.height += splitTr.height;
+    for (let d = 0; d < parentTr.tdList.length; d++) {
+      const parentTd = parentTr.tdList[d];
+      const splitTd = splitTr.tdList[d];
+      if (!parentTd || !splitTd) continue;
+      const hasSyntheticLeadingZero = !!splitTd.splitSyntheticLeadingZero && splitTd.value[0]?.value === ZERO;
+      parentTd.value.push(
+        ...hasSyntheticLeadingZero ? splitTd.value.slice(1) : splitTd.value
+      );
+    }
+    trList.splice(t, 1);
+  }
+  for (let t = 0; t < trList.length; t++) {
+    const tr = trList[t];
+    delete tr.id;
+    delete tr.splitParentId;
+    delete tr.splitRootId;
+    delete tr.splitLevel;
+    delete tr.splitBoundaryTop;
+    delete tr.splitBoundaryBottom;
+  }
+}
 function zipElementList(payload, options = {}) {
   const { extraPickAttrs, isClassifyArea = false, isClone = true } = options;
   const elementList = isClone ? deepClone(payload) : payload;
@@ -5036,8 +5070,11 @@ function zipElementList(payload, options = {}) {
         while (tableIndex < elementList.length) {
           const nextElement = elementList[tableIndex];
           if (nextElement.pagingId === element.pagingId) {
+            const nextTrList = nextElement.trList.filter(
+              (tr) => !tr.pagingRepeat
+            );
             element.height += nextElement.height;
-            element.trList.push(...nextElement.trList);
+            element.trList.push(...nextTrList);
             tableIndex++;
             combineCount++;
           } else {
@@ -5047,9 +5084,9 @@ function zipElementList(payload, options = {}) {
         e += combineCount;
       }
       if (element.trList) {
+        mergeSplitTableRowsForZip(element.trList);
         for (let t = 0; t < element.trList.length; t++) {
           const tr = element.trList[t];
-          delete tr.id;
           for (let d = 0; d < tr.tdList.length; d++) {
             const td = tr.tdList[d];
             const zipTd = {
@@ -6374,7 +6411,10 @@ var Cursor = class {
     const agentCursorDom = this.cursorAgent.getAgentCursorDom();
     if (document.activeElement !== agentCursorDom) {
       agentCursorDom.focus({ preventScroll: true });
+      const scrollContainer = findScrollContainer(this.container);
+      const { scrollLeft, scrollTop } = scrollContainer;
       agentCursorDom.setSelectionRange(0, 0);
+      scrollContainer.scroll(scrollLeft, scrollTop);
     }
   }
   drawCursor(payload) {
@@ -6444,7 +6484,6 @@ var Cursor = class {
       this.recoveryCursor();
       return;
     }
-    const oldTop = this.cursorDom.style.top;
     const isReadonly = this.draw.isReadonly();
     this.cursorDom.style.width = `${width * scale}px`;
     this.cursorDom.style.backgroundColor = color;
@@ -6458,10 +6497,7 @@ var Cursor = class {
       this._clearBlinkTimeout();
     }
     nextTick2(() => {
-      this.moveCursorToVisible({
-        cursorPosition,
-        direction: parseInt(oldTop) > cursorTop ? "top" /* UP */ : "down" /* DOWN */
-      });
+      this.moveCursorToVisible({ cursorPosition });
     });
   }
   recoveryCursor() {
@@ -6469,41 +6505,44 @@ var Cursor = class {
     this._clearBlinkTimeout();
   }
   moveCursorToVisible(payload) {
-    const { cursorPosition, direction } = payload;
-    if (!cursorPosition || !direction) return;
+    const { cursorPosition } = payload;
+    if (!cursorPosition) return;
     const {
       pageNo,
-      coordinate: { leftTop, leftBottom }
+      coordinate: { leftTop },
+      ascent,
+      metrics: { boundingBoxAscent, boundingBoxDescent }
     } = cursorPosition;
-    const prePageY = pageNo * (this.draw.getHeight() + this.draw.getPageGap()) + this.container.getBoundingClientRect().top;
-    const isUp = direction === "top" /* UP */;
-    const x = leftBottom[0];
-    const cursorTop = leftTop[1] + cursorPosition.ascent - cursorPosition.metrics.boundingBoxAscent;
-    const cursorBottom = cursorTop + cursorPosition.metrics.boundingBoxAscent + cursorPosition.metrics.boundingBoxDescent;
-    const y = isUp ? cursorTop + prePageY : cursorBottom + prePageY;
+    const containerRect = this.container.getBoundingClientRect();
+    const pageOffset = pageNo * (this.draw.getHeight() + this.draw.getPageGap());
+    const cursorTopViewport = containerRect.top + pageOffset + leftTop[1] + ascent - boundingBoxAscent;
+    const cursorBottomViewport = cursorTopViewport + boundingBoxAscent + boundingBoxDescent;
     const scrollContainer = findScrollContainer(this.container);
-    const rect = {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0
-    };
+    let visibleTop;
+    let visibleBottom;
     if (scrollContainer === document.documentElement) {
-      rect.right = window.innerWidth;
-      rect.bottom = window.innerHeight;
+      visibleTop = 0;
+      visibleBottom = window.innerHeight;
     } else {
-      const { left: left2, right: right2, top, bottom } = scrollContainer.getBoundingClientRect();
-      rect.left = left2;
-      rect.right = right2;
-      rect.top = top;
-      rect.bottom = bottom;
-    }
-    const { maskMargin } = this.options;
-    rect.top += maskMargin[0];
-    rect.bottom -= maskMargin[2];
-    if (!(x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom)) {
-      const { scrollLeft, scrollTop } = scrollContainer;
-      isUp ? scrollContainer.scroll(scrollLeft, scrollTop - (rect.top - y)) : scrollContainer.scroll(scrollLeft, scrollTop + y - rect.bottom);
+      const scrollRect = scrollContainer.getBoundingClientRect();
+      visibleTop = scrollRect.top;
+      visibleBottom = scrollRect.bottom;
+    }
+    if (cursorTopViewport >= visibleTop && cursorBottomViewport <= visibleBottom) {
+      return;
+    }
+    const scrollPadding = (boundingBoxAscent + boundingBoxDescent) * this.options.scrollPaddingLines;
+    const { scrollLeft, scrollTop } = scrollContainer;
+    if (cursorTopViewport < visibleTop) {
+      scrollContainer.scroll(
+        scrollLeft,
+        scrollTop - (visibleTop - cursorTopViewport) - scrollPadding
+      );
+    } else {
+      scrollContainer.scroll(
+        scrollLeft,
+        scrollTop + (cursorBottomViewport - visibleBottom) + scrollPadding
+      );
     }
   }
 };
@@ -6749,6 +6788,57 @@ var RadioControl = class extends CheckboxControl {
   }
 };
 
+// src/core/event/handlers/splitCell.ts
+function isSameSplitCellSelection(first, second) {
+  if (!first || !second) return false;
+  return first.pagingId === second.pagingId && first.rootTrId === second.rootTrId && first.colIndex === second.colIndex;
+}
+function getSplitCellPointer(draw, position) {
+  if (!position.isTable || position.index === void 0 || position.tdIndex === void 0 || position.tdValueIndex === void 0 || !position.trId) {
+    return null;
+  }
+  const originalElementList = draw.getOriginalElementList();
+  const tableElement = originalElementList[position.index];
+  if (tableElement?.type !== "table" /* TABLE */ || !tableElement.pagingId || !tableElement.trList?.length) {
+    return null;
+  }
+  const tr = tableElement.trList.find((row) => row.id === position.trId);
+  const td = tr?.tdList[position.tdIndex];
+  if (!tr || !td || td.colIndex === void 0 || !tr.id) {
+    return null;
+  }
+  const splitCellSelection = {
+    pagingId: tableElement.pagingId,
+    rootTrId: tr.splitRootId || tr.id,
+    colIndex: td.colIndex
+  };
+  const splitCellContext = draw.getSplitCellSelectionContext(
+    originalElementList,
+    splitCellSelection
+  );
+  if (!splitCellContext) {
+    return null;
+  }
+  let globalIndex = 0;
+  for (let c = 0; c < splitCellContext.cellContextList.length; c++) {
+    const cellContext = splitCellContext.cellContextList[c];
+    const currentTd = cellContext.td;
+    const skipLeadingZero = !!currentTd.splitSyntheticLeadingZero && currentTd.value[0]?.value === ZERO ? 1 : 0;
+    if (cellContext.tr.id === tr.id && currentTd.id === td.id) {
+      globalIndex += Math.max(position.tdValueIndex - skipLeadingZero, 0);
+      return {
+        splitCellSelection,
+        globalIndex
+      };
+    }
+    globalIndex += Math.max(currentTd.value.length - skipLeadingZero, 0);
+  }
+  return null;
+}
+function isSameSplitCellPointer(first, second) {
+  return isSameSplitCellSelection(first, second);
+}
+
 // src/core/event/handlers/mousedown.ts
 function setRangeCache(host) {
   const draw = host.getDraw();
@@ -6836,9 +6926,11 @@ function mousedown(evt, host) {
     tdValueIndex,
     hitLineStartIndex
   } = positionResult;
+  const splitCellPointer = getSplitCellPointer(draw, positionResult);
   host.mouseDownStartPosition = {
     ...positionResult,
-    index: isTable ? tdValueIndex : index,
+    index: splitCellPointer ? splitCellPointer.globalIndex : isTable ? tdValueIndex : index,
+    splitCellSelection: splitCellPointer?.splitCellSelection,
     x: evt.offsetX,
     y: evt.offsetY
   };
@@ -7278,10 +7370,33 @@ function mousemove(evt, host) {
     isTable: startIsTable,
     tdIndex: startTdIndex,
     trIndex: startTrIndex,
-    tableId: startTableId
+    tableId: startTableId,
+    splitCellSelection: startSplitCellSelection
   } = host.mouseDownStartPosition;
   const endIndex = isTable ? tdValueIndex : index;
   const rangeManager = draw.getRange();
+  if (startSplitCellSelection) {
+    const currentSplitCellPointer = getSplitCellPointer(draw, positionResult);
+    if (currentSplitCellPointer && isSameSplitCellPointer(
+      startSplitCellSelection,
+      currentSplitCellPointer.splitCellSelection
+    )) {
+      let start = startIndex;
+      let end = currentSplitCellPointer.globalIndex;
+      if (start > end) {
+        [start, end] = [end, start];
+      }
+      if (start === end) return;
+      rangeManager.setRange(start, end);
+      rangeManager.setSplitCellSelection(startSplitCellSelection);
+      draw.render({
+        isSubmitHistory: false,
+        isSetCursor: false,
+        isCompute: false
+      });
+      return;
+    }
+  }
   if (isTable && startIsTable && (tdIndex !== startTdIndex || trIndex !== startTrIndex)) {
     rangeManager.setRange(
       endIndex,
@@ -7448,7 +7563,9 @@ function backspace(evt, host) {
   const control = draw.getControl();
   const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange();
   let curIndex;
-  if (isCrossRowCol) {
+  if (rangeManager.getSplitCellSelection() && startIndex !== endIndex) {
+    curIndex = draw.replaceSplitCellSelection([]);
+  } else if (isCrossRowCol) {
     const rowCol = draw.getTableParticle().getRangeRowCol();
     if (!rowCol) return;
     let isDeleted = false;
@@ -7606,7 +7723,9 @@ function del(evt, host) {
     deleteHideElement(host);
   }
   let curIndex;
-  if (isCrossRowCol) {
+  if (rangeManager.getSplitCellSelection() && startIndex !== endIndex) {
+    curIndex = draw.replaceSplitCellSelection([]);
+  } else if (isCrossRowCol) {
     const rowCol = draw.getTableParticle().getRangeRowCol();
     if (!rowCol) return;
     let isDeleted = false;
@@ -8395,8 +8514,7 @@ function updown(evt, host) {
   });
   if (!isCollapsed) {
     draw.getCursor().moveCursorToVisible({
-      cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex],
-      direction: isUp ? "top" /* UP */ : "down" /* DOWN */
+      cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex]
     });
   }
 }
@@ -8518,6 +8636,8 @@ function input(data2, host) {
     if (!isComposing) {
       control.emitControlContentChange();
     }
+  } else if (rangeManager.getSplitCellSelection()) {
+    curIndex = draw.replaceSplitCellSelection(inputData);
   } else {
     const start = startIndex + 1;
     if (startIndex !== endIndex) {
@@ -9017,7 +9137,7 @@ var CanvasEvent = class {
   }
   selectAll() {
     if (this.position.getPositionContext().isTable) {
-      this.draw.getTableOperate().tableSelectAll();
+      this.draw.getTableOperate().tableTdSelectAll();
     } else {
       const positionList = this.position.getPositionList();
       this.range.setRange(0, positionList.length - 1);
@@ -9294,6 +9414,10 @@ var Position = class {
     return this.floatPositionList;
   }
   getTablePositionList(sourceElementList) {
+    const splitCellSelectionContext = this.draw.getSplitCellSelectionContext(sourceElementList);
+    if (splitCellSelectionContext) {
+      return splitCellSelectionContext.positionList;
+    }
     return this.draw.resolveTableCellContext(sourceElementList, this.positionContext)?.td.positionList || [];
   }
   getPositionList() {
@@ -10084,6 +10208,18 @@ var RangeManager = class {
   clearRange() {
     this.setRange(-1, -1);
   }
+  getSplitCellSelection() {
+    return this.range.splitCellSelection;
+  }
+  setSplitCellSelection(payload) {
+    this.range.splitCellSelection = payload || void 0;
+  }
+  getTableCellSelection() {
+    return this.range.tableCellSelection;
+  }
+  setTableCellSelection(payload) {
+    this.range.tableCellSelection = payload || void 0;
+  }
   setDefaultStyle(style) {
     if (!style) {
       this.defaultStyle = null;
@@ -10374,6 +10510,8 @@ var RangeManager = class {
       this.range.isCrossRowCol = !!(startTdIndex || endTdIndex || startTrIndex || endTrIndex);
       this.setDefaultStyle(null);
     }
+    this.range.splitCellSelection = void 0;
+    this.range.tableCellSelection = void 0;
     this.range.zone = this.draw.getZone().getZone();
     const control = this.draw.getControl();
     if (~startIndex && ~endIndex) {
@@ -12096,6 +12234,44 @@ var TableParticle = class {
     }
     ctx.restore();
   }
+  _isSelectedCell(element, tr, td, selection) {
+    if (selection.pagingId && selection.rootTrId && selection.colIndex !== void 0) {
+      return element.pagingId === selection.pagingId && (tr.id === selection.rootTrId || tr.splitRootId === selection.rootTrId) && td.colIndex === selection.colIndex;
+    }
+    if (selection.tableId && element.id !== selection.tableId) {
+      return false;
+    }
+    if (selection.trId && tr.id !== selection.trId) {
+      return false;
+    }
+    if (selection.tdId) {
+      return td.id === selection.tdId;
+    }
+    return false;
+  }
+  drawCellRange(ctx, element, startX, startY, selection) {
+    const { scale, rangeAlpha, rangeColor } = this.options;
+    const { type, trList } = element;
+    if (!trList || type !== "table" /* TABLE */) return;
+    ctx.save();
+    ctx.globalAlpha = rangeAlpha;
+    ctx.fillStyle = rangeColor;
+    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 (!this._isSelectedCell(element, tr, td, selection)) {
+          continue;
+        }
+        const x = td.x * scale;
+        const y = td.y * scale;
+        const width = td.width * scale;
+        const height = td.height * scale;
+        ctx.fillRect(x + startX, y + startY, width, height);
+      }
+    }
+    ctx.restore();
+  }
   render(ctx, element, startX, startY) {
     this._drawBackgroundColor(ctx, element, startX, startY);
     this._drawBorder(ctx, element, startX, startY);
@@ -16600,17 +16776,14 @@ function computeValue(data2, options) {
   const { extraPickAttrs = [] } = options || {};
   return {
     header: zipElementList(data2.header, {
-      extraPickAttrs,
-      isClone: false
+      extraPickAttrs
     }),
     main: zipElementList(data2.main, {
       extraPickAttrs,
-      isClassifyArea: true,
-      isClone: false
+      isClassifyArea: true
     }),
     footer: zipElementList(data2.footer, {
-      extraPickAttrs,
-      isClone: false
+      extraPickAttrs
     })
   };
 }
@@ -18649,6 +18822,38 @@ var ListParticle = class {
     const level = element.listLevel ?? 0;
     return level * INDENT_PER_LEVEL * scale;
   }
+  _getListMarkerStyleElement(elementList, startIndex = 0) {
+    const startElement = elementList[startIndex];
+    for (let i = startIndex + 1; i < elementList.length; i++) {
+      const element = elementList[i];
+      if (element.value === ZERO && !element.listWrap) {
+        break;
+      }
+      if (element.type === "tab" /* TAB */) {
+        continue;
+      }
+      if (element.value !== ZERO || element.type) {
+        return element;
+      }
+    }
+    return startElement;
+  }
+  _getListMarkerText(element, listIndex) {
+    if (element.listStyle === "checkbox" /* CHECKBOX */) {
+      return "";
+    }
+    if (element.listType === "ul" /* UL */) {
+      if (element.listPreset) {
+        return this._getUlBulletForLevel(element);
+      }
+      return ulStyleMapping[element.listStyle] || ulStyleMapping["disc" /* DISC */];
+    }
+    if (element.listPreset) {
+      const olStyle = this._getOlStyleForLevel(element);
+      return formatOlNumber(listIndex, olStyle);
+    }
+    return `${listIndex + 1}${"." /* PERIOD */}`;
+  }
   computeListStyle(ctx, elementList) {
     const listStyleMap = /* @__PURE__ */ new Map();
     let start = 0;
@@ -18679,23 +18884,40 @@ var ListParticle = class {
   }
   getListStyleWidth(ctx, listElementList) {
     const { scale, checkbox } = this.options;
-    const startElement = listElementList[0];
-    if (startElement.listStyle && startElement.listStyle !== "decimal" /* DECIMAL */) {
-      if (startElement.listStyle === "checkbox" /* CHECKBOX */) {
-        return (checkbox.width + this.LIST_GAP) * scale;
+    let maxWidth = 0;
+    let listIndex = 0;
+    for (let i = 0; i < listElementList.length; i++) {
+      const element = listElementList[i];
+      if (element.value !== ZERO || element.listWrap) continue;
+      if (element.listStyle === "checkbox" /* CHECKBOX */) {
+        maxWidth = Math.max(maxWidth, checkbox.width + this.LIST_GAP);
+        listIndex++;
+        continue;
       }
-      return this.UN_COUNT_STYLE_WIDTH * scale;
-    }
-    const count = listElementList.reduce((pre, cur) => {
-      if (cur.value === ZERO) {
-        pre += 1;
+      const markerStyleElement = this._getListMarkerStyleElement(
+        listElementList,
+        i
+      );
+      const text = this._getListMarkerText(element, listIndex);
+      if (!text) {
+        listIndex++;
+        continue;
       }
-      return pre;
-    }, 0);
-    if (!count) return 0;
-    const text = `${this.MEASURE_BASE_TEXT.repeat(String(count).length)}${"." /* PERIOD */}`;
-    const textMetrics = ctx.measureText(text);
-    return Math.ceil((textMetrics.width + this.LIST_GAP) * scale);
+      ctx.save();
+      ctx.font = this.draw.getElementFont(markerStyleElement);
+      const textMetrics = ctx.measureText(text);
+      ctx.restore();
+      maxWidth = Math.max(maxWidth, textMetrics.width + this.LIST_GAP);
+      listIndex++;
+    }
+    if (maxWidth > 0) {
+      return Math.ceil(maxWidth * scale);
+    }
+    const startElement = listElementList[0];
+    if (startElement?.listStyle === "checkbox" /* CHECKBOX */) {
+      return (checkbox.width + this.LIST_GAP) * scale;
+    }
+    return this.UN_COUNT_STYLE_WIDTH * scale;
   }
   _getOlStyleForLevel(element) {
     const preset = element.listPreset || "olDefault" /* DEFAULT */;
@@ -18716,7 +18938,7 @@ var ListParticle = class {
     const startElement = elementList[0];
     if (startElement.value !== ZERO || startElement.listWrap) return;
     let tabWidth = 0;
-    const { defaultTabWidth, scale, defaultFont, defaultSize } = this.options;
+    const { defaultTabWidth, scale } = this.options;
     for (let i = 1; i < elementList.length; i++) {
       const element = elementList[i];
       if (element?.type !== "tab" /* TAB */) break;
@@ -18754,24 +18976,11 @@ var ListParticle = class {
         }
       });
     } else {
-      let text = "";
-      if (startElement.listType === "ul" /* UL */) {
-        if (startElement.listPreset) {
-          text = this._getUlBulletForLevel(startElement);
-        } else {
-          text = ulStyleMapping[startElement.listStyle] || ulStyleMapping["disc" /* DISC */];
-        }
-      } else {
-        if (startElement.listPreset) {
-          const olStyle = this._getOlStyleForLevel(startElement);
-          text = formatOlNumber(listIndex, olStyle);
-        } else {
-          text = `${listIndex + 1}${"." /* PERIOD */}`;
-        }
-      }
+      const text = this._getListMarkerText(startElement, listIndex);
       if (!text) return;
+      const markerStyleElement = this._getListMarkerStyleElement(elementList);
       ctx.save();
-      ctx.font = `${defaultSize * (96 / 72) * scale}px ${defaultFont}`;
+      ctx.font = this.draw.getElementFont(markerStyleElement, scale);
       ctx.fillText(text, x, y);
       ctx.restore();
     }
@@ -19221,6 +19430,39 @@ var TableOperate = class {
     this.tableParticle = draw.getTableParticle();
     this.options = draw.getOptions();
   }
+  getActiveTableElements() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable) return [];
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[positionContext.index];
+    if (!element || element.type !== "table" /* TABLE */) return [];
+    if (!element.pagingId) return [element];
+    return originalElementList.filter(
+      (item) => item.type === "table" /* TABLE */ && item.pagingId === element.pagingId
+    );
+  }
+  getSplitCellStyleSelection() {
+    const tableCellSelection = this.range.getTableCellSelection();
+    if (tableCellSelection?.pagingId && tableCellSelection.rootTrId && tableCellSelection.colIndex !== void 0) {
+      return tableCellSelection;
+    }
+    return this.range.getSplitCellSelection();
+  }
+  getStyleTargetRowCol() {
+    const splitCellSelection = this.getSplitCellStyleSelection();
+    if (splitCellSelection) {
+      const splitCellContext = this.draw.getSplitCellSelectionContext(
+        this.draw.getOriginalElementList(),
+        splitCellSelection
+      );
+      if (splitCellContext) {
+        return splitCellContext.cellContextList.map((cellContext) => [
+          cellContext.td
+        ]);
+      }
+    }
+    return this.tableParticle.getRangeRowCol();
+  }
   insertTable(row, col) {
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex) return;
@@ -19901,7 +20143,7 @@ var TableOperate = class {
     this.tableTool.render();
   }
   tableTdVerticalAlign(payload) {
-    const rowCol = this.tableParticle.getRangeRowCol();
+    const rowCol = this.getStyleTargetRowCol();
     if (!rowCol) return;
     for (let r = 0; r < rowCol.length; r++) {
       const row = rowCol[r];
@@ -19921,13 +20163,17 @@ var TableOperate = class {
   tableBorderType(payload) {
     const positionContext = this.position.getPositionContext();
     if (!positionContext.isTable) return;
-    const { index } = positionContext;
-    const originalElementList = this.draw.getOriginalElementList();
-    const element = originalElementList[index];
-    if (!element.borderType && payload === "all" /* ALL */ || element.borderType === payload) {
+    const tableElements = this.getActiveTableElements();
+    if (!tableElements.length) return;
+    const isAllSame = tableElements.every(
+      (element) => !element.borderType && payload === "all" /* ALL */ || element.borderType === payload
+    );
+    if (isAllSame) {
       return;
     }
-    element.borderType = payload;
+    tableElements.forEach((element) => {
+      element.borderType = payload;
+    });
     const { endIndex } = this.range.getRange();
     this.draw.render({
       curIndex: endIndex
@@ -19936,13 +20182,17 @@ var TableOperate = class {
   tableBorderColor(payload) {
     const positionContext = this.position.getPositionContext();
     if (!positionContext.isTable) return;
-    const { index } = positionContext;
-    const originalElementList = this.draw.getOriginalElementList();
-    const element = originalElementList[index];
-    if (!element.borderColor && payload === this.options.table.defaultBorderColor || element.borderColor === payload) {
+    const tableElements = this.getActiveTableElements();
+    if (!tableElements.length) return;
+    const isAllSame = tableElements.every(
+      (element) => !element.borderColor && payload === this.options.table.defaultBorderColor || element.borderColor === payload
+    );
+    if (isAllSame) {
       return;
     }
-    element.borderColor = payload;
+    tableElements.forEach((element) => {
+      element.borderColor = payload;
+    });
     const { endIndex } = this.range.getRange();
     this.draw.render({
       curIndex: endIndex,
@@ -19950,7 +20200,7 @@ var TableOperate = class {
     });
   }
   tableTdBorderType(payload) {
-    const rowCol = this.tableParticle.getRangeRowCol();
+    const rowCol = this.getStyleTargetRowCol();
     if (!rowCol) return;
     const tdList = rowCol.flat();
     const isSetBorderType = tdList.some(
@@ -19982,7 +20232,7 @@ var TableOperate = class {
     });
   }
   tableTdSlashType(payload) {
-    const rowCol = this.tableParticle.getRangeRowCol();
+    const rowCol = this.getStyleTargetRowCol();
     if (!rowCol) return;
     const tdList = rowCol.flat();
     const isSetTdSlashType = tdList.some(
@@ -20012,7 +20262,7 @@ var TableOperate = class {
     });
   }
   tableTdBackgroundColor(payload) {
-    const rowCol = this.tableParticle.getRangeRowCol();
+    const rowCol = this.getStyleTargetRowCol();
     if (!rowCol) return;
     for (let r = 0; r < rowCol.length; r++) {
       const row = rowCol[r];
@@ -20033,14 +20283,14 @@ var TableOperate = class {
     const { index } = positionContext;
     const originalElementList = this.draw.getOriginalElementList();
     const element = originalElementList[index];
-    const rowCol = this.tableParticle.getRangeRowCol();
+    const rowCol = this.getStyleTargetRowCol();
     if (!rowCol) return;
     const tdList = rowCol.flat();
     const totalCells = element.trList.reduce(
       (sum, tr) => sum + tr.tdList.length,
       0
     );
-    const allSelected = tdList.length >= totalCells;
+    const allSelected = !element.pagingId && !this.getSplitCellStyleSelection() && tdList.length >= totalCells;
     if (allSelected) {
       element.borderColor = payload || void 0;
       element.trList.forEach(
@@ -20060,7 +20310,7 @@ var TableOperate = class {
     });
   }
   tableTdPadding(payload) {
-    const rowCol = this.tableParticle.getRangeRowCol();
+    const rowCol = this.getStyleTargetRowCol();
     if (!rowCol) return;
     const tdList = rowCol.flat();
     tdList.forEach((td) => {
@@ -20095,6 +20345,46 @@ var TableOperate = class {
       isSubmitHistory: false
     });
   }
+  tableTdSelectAll() {
+    const originalElementList = this.draw.getOriginalElementList();
+    const resolved = this.draw.resolveTableCellContext(originalElementList);
+    if (!resolved) return;
+    const currentTr = resolved.element.trList?.[resolved.trIndex];
+    if (!currentTr) return;
+    const currentTd = resolved.td;
+    const currentElement = resolved.element;
+    const splitCellSelection = currentElement.pagingId && currentTr.id && currentTd.colIndex !== void 0 ? {
+      pagingId: currentElement.pagingId,
+      rootTrId: currentTr.splitRootId || currentTr.id,
+      colIndex: currentTd.colIndex
+    } : void 0;
+    const splitCellSelectionContext = this.draw.getSplitCellSelectionContext(
+      originalElementList,
+      splitCellSelection
+    );
+    if (splitCellSelectionContext) {
+      const endIndex = Math.max(
+        splitCellSelectionContext.positionList.length - 1,
+        0
+      );
+      this.range.setRange(0, endIndex);
+      this.range.setSplitCellSelection(splitCellSelection);
+      this.range.setTableCellSelection(splitCellSelection);
+    } else {
+      const endIndex = Math.max(currentTd.value.length - 1, 0);
+      this.range.setRange(0, endIndex);
+      this.range.setTableCellSelection({
+        tableId: currentElement.id,
+        trId: currentTr.id,
+        tdId: currentTd.id
+      });
+    }
+    this.draw.render({
+      isSetCursor: false,
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
 };
 
 // src/dataset/enum/Area.ts
@@ -20952,8 +21242,156 @@ var Draw = class {
     return this.header.getElementList();
   }
   getTableElementList(sourceElementList) {
+    const splitCellSelectionContext = this.getSplitCellSelectionContext(
+      sourceElementList
+    );
+    if (splitCellSelectionContext) {
+      return splitCellSelectionContext.value;
+    }
     return this.resolveTableCellContext(sourceElementList)?.td.value || [];
   }
+  getSplitCellSelectionContext(sourceElementList = this.getOriginalElementList(), splitCellSelection = this.range.getSplitCellSelection()) {
+    if (!splitCellSelection) return null;
+    const { pagingId, rootTrId, colIndex } = splitCellSelection;
+    const cellContextList = [];
+    for (let i = 0; i < sourceElementList.length; i++) {
+      const element = sourceElementList[i];
+      if (element.type !== "table" /* TABLE */ || element.pagingId !== pagingId) {
+        continue;
+      }
+      const trList = element.trList;
+      if (!trList?.length) continue;
+      for (let t = 0; t < trList.length; t++) {
+        const tr = trList[t];
+        if (tr.id !== rootTrId && tr.splitRootId !== rootTrId) continue;
+        const tdIndex = tr.tdList.findIndex((td2) => td2.colIndex === colIndex);
+        if (tdIndex < 0) continue;
+        const td = tr.tdList[tdIndex];
+        cellContextList.push({
+          tableIndex: i,
+          trIndex: t,
+          tdIndex,
+          element,
+          tr,
+          td
+        });
+      }
+    }
+    if (cellContextList.length < 2) return null;
+    const value = [];
+    const positionList = [];
+    for (let c = 0; c < cellContextList.length; c++) {
+      const { td } = cellContextList[c];
+      const skipLeadingZero = !!td.splitSyntheticLeadingZero && td.value[0]?.value === ZERO ? 1 : 0;
+      value.push(...td.value.slice(skipLeadingZero));
+      if (td.positionList?.length) {
+        positionList.push(...td.positionList.slice(skipLeadingZero));
+      }
+    }
+    return {
+      value,
+      positionList,
+      cellContextList
+    };
+  }
+  syncTableElementContext(elementList, context) {
+    const { tableId, trId, tdId } = context;
+    for (let i = 0; i < elementList.length; i++) {
+      const element = elementList[i];
+      element.tableId = tableId;
+      element.trId = trId;
+      element.tdId = tdId;
+    }
+  }
+  getCollapsedSplitTableCursorContext(element) {
+    const positionContext = this.position.getPositionContext();
+    const { startIndex, endIndex } = this.range.getRange();
+    if (!element.pagingId || !positionContext.isTable || startIndex !== endIndex || positionContext.tableId !== element.id || !positionContext.trId) {
+      return null;
+    }
+    const trList = element.trList;
+    if (!trList?.length) return null;
+    const currentTr = trList.find((tr) => tr.id === positionContext.trId);
+    const currentTd = currentTr && (positionContext.tdId ? currentTr.tdList.find((td) => td.id === positionContext.tdId) : currentTr.tdList[positionContext.tdIndex]);
+    if (!currentTr?.id || !currentTd || currentTd.colIndex === void 0) {
+      return null;
+    }
+    const rootTrId = currentTr.splitRootId || currentTr.id;
+    let mergedIndex = 0;
+    for (let t = 0; t < trList.length; t++) {
+      const tr = trList[t];
+      if (tr.id !== rootTrId && tr.splitRootId !== rootTrId) {
+        continue;
+      }
+      const td = tr.tdList.find((cell) => cell.colIndex === currentTd.colIndex);
+      if (!td) continue;
+      const skipLeadingZero = !!td.splitSyntheticLeadingZero && td.value[0]?.value === ZERO ? 1 : 0;
+      if (tr.id === currentTr.id && td.id === currentTd.id) {
+        mergedIndex += Math.max(startIndex - skipLeadingZero, 0);
+        return {
+          rootTrId,
+          colIndex: currentTd.colIndex,
+          mergedIndex
+        };
+      }
+      mergedIndex += Math.max(td.value.length - skipLeadingZero, 0);
+    }
+    return null;
+  }
+  applyCollapsedSplitTableCursor(payload) {
+    const {
+      tableIndex,
+      tableId,
+      overflowTr,
+      overflowTrIdx,
+      continuationTr,
+      continuationTdList,
+      logicalCursor,
+      splits
+    } = payload;
+    const tdIndex = overflowTr.tdList.findIndex(
+      (td) => td.colIndex === logicalCursor.colIndex
+    );
+    if (tdIndex < 0) return false;
+    const splitIdx = splits[tdIndex]?.elemIdx;
+    if (splitIdx === void 0) return false;
+    const positionContext = this.position.getPositionContext();
+    if (logicalCursor.mergedIndex >= splitIdx) {
+      const continuationTd = continuationTdList[tdIndex];
+      if (!continuationTd) return false;
+      const hasPrependedZero = !!continuationTd.splitSyntheticLeadingZero && continuationTd.value[0]?.value === ZERO;
+      const continuationCursorIndex = logicalCursor.mergedIndex - splitIdx + (hasPrependedZero ? 1 : 0);
+      positionContext.index = tableIndex;
+      positionContext.trIndex = overflowTrIdx + 1;
+      positionContext.tdIndex = tdIndex;
+      positionContext.tdId = continuationTd.id;
+      positionContext.trId = continuationTr.id;
+      positionContext.tableId = tableId;
+      this.position.setPositionContext(positionContext);
+      this.range.setRange(
+        continuationCursorIndex,
+        continuationCursorIndex
+      );
+      this.pendingTableCursorIndex = continuationCursorIndex;
+      return true;
+    }
+    const rootTd = overflowTr.tdList[tdIndex];
+    if (!rootTd) return false;
+    const rootCursorIndex = Math.min(
+      logicalCursor.mergedIndex,
+      Math.max(rootTd.value.length - 1, 0)
+    );
+    positionContext.index = tableIndex;
+    positionContext.trIndex = overflowTrIdx;
+    positionContext.tdIndex = tdIndex;
+    positionContext.tdId = rootTd.id;
+    positionContext.trId = overflowTr.id;
+    positionContext.tableId = tableId;
+    this.position.setPositionContext(positionContext);
+    this.range.setRange(rootCursorIndex, rootCursorIndex);
+    this.pendingTableCursorIndex = rootCursorIndex;
+    return true;
+  }
   getElementList() {
     const positionContext = this.position.getPositionContext();
     const elementList = this.getOriginalElementList();
@@ -20991,6 +21429,18 @@ var Draw = class {
       isHandleFirstElement: false,
       editorOptions: this.options
     });
+    const splitCellSelection = this.range.getSplitCellSelection();
+    if (splitCellSelection) {
+      const curIndex2 = this.replaceSplitCellSelection(payload, splitCellSelection);
+      if (~curIndex2) {
+        this.range.setRange(curIndex2, curIndex2);
+        this.render({
+          curIndex: curIndex2,
+          isSubmitHistory
+        });
+      }
+      return;
+    }
     let curIndex = -1;
     let activeControl = this.control.getActiveControl();
     if (!activeControl && this.control.getIsRangeWithinControl()) {
@@ -21086,6 +21536,80 @@ var Draw = class {
       }
     }
   }
+  replaceSplitCellSelection(payload, splitCellSelection = this.range.getSplitCellSelection()) {
+    const splitCellSelectionContext = this.getSplitCellSelectionContext(
+      this.getOriginalElementList(),
+      splitCellSelection
+    );
+    if (!splitCellSelectionContext) return -1;
+    const [rootCellContext, ...continuationCellContextList] = splitCellSelectionContext.cellContextList;
+    const rootTd = rootCellContext.td;
+    const rootStartIndex = rootTd.value[0]?.value === ZERO ? 1 : 0;
+    if (!rootStartIndex) {
+      rootTd.value.unshift({
+        value: ZERO,
+        type: "text" /* TEXT */
+      });
+      this.syncTableElementContext([rootTd.value[0]], {
+        tableId: rootCellContext.element.id,
+        trId: rootCellContext.tr.id,
+        tdId: rootTd.id
+      });
+    }
+    this.syncTableElementContext(payload, {
+      tableId: rootCellContext.element.id,
+      trId: rootCellContext.tr.id,
+      tdId: rootTd.id
+    });
+    this.spliceElementList(
+      rootTd.value,
+      1,
+      rootTd.value.length - 1,
+      payload
+    );
+    rootTd.rowList = void 0;
+    rootTd.positionList = void 0;
+    rootTd.mainHeight = void 0;
+    rootTd.realHeight = void 0;
+    rootTd.realMinHeight = void 0;
+    for (let c = 0; c < continuationCellContextList.length; c++) {
+      const continuationTd = continuationCellContextList[c].td;
+      const startIndex = continuationTd.value[0]?.value === ZERO ? 1 : 0;
+      if (!startIndex) {
+        continuationTd.value.unshift({
+          value: ZERO,
+          type: "text" /* TEXT */
+        });
+        this.syncTableElementContext([continuationTd.value[0]], {
+          tableId: continuationCellContextList[c].element.id,
+          trId: continuationCellContextList[c].tr.id,
+          tdId: continuationTd.id
+        });
+      }
+      if (continuationTd.value.length > 1) {
+        this.spliceElementList(
+          continuationTd.value,
+          1,
+          continuationTd.value.length - 1
+        );
+      }
+      continuationTd.rowList = void 0;
+      continuationTd.positionList = void 0;
+      continuationTd.mainHeight = void 0;
+      continuationTd.realHeight = void 0;
+      continuationTd.realMinHeight = void 0;
+    }
+    this.position.setPositionContext({
+      isTable: true,
+      index: rootCellContext.tableIndex,
+      trIndex: rootCellContext.trIndex,
+      tdIndex: rootCellContext.tdIndex,
+      tdId: rootTd.id,
+      trId: rootCellContext.tr.id,
+      tableId: rootCellContext.element.id
+    });
+    return Math.max(rootTd.value.length - 1, 0);
+  }
   getCanvasEvent() {
     return this.canvasEvent;
   }
@@ -21648,6 +22172,9 @@ var Draw = class {
       } else if (element.type === "table" /* TABLE */) {
         let activeSplitRange;
         let mergedSplitFallback;
+        const logicalSplitCursor = this.getCollapsedSplitTableCursorContext(
+          element
+        );
         if (element.pagingId) {
           let tableIndex = i + 1;
           let combineCount = 0;
@@ -21706,6 +22233,11 @@ var Draw = class {
               if (!splitTd) continue;
               const hasSyntheticLeadingZero = !!splitTd.splitSyntheticLeadingZero && splitTd.value[0]?.value === ZERO;
               const splitValue = hasSyntheticLeadingZero ? splitTd.value.slice(1) : splitTd.value;
+              this.syncTableElementContext(splitValue, {
+                tableId: element.id,
+                trId: parentTr.id,
+                tdId: parentTd.id
+              });
               parentTd.value.push(...splitValue);
               parentTd.rowList = void 0;
               parentTd.positionList = void 0;
@@ -21987,13 +22519,12 @@ var Draw = class {
                     const continuationTdList = overflowTr.tdList.map(
                       (td, d) => {
                         const splitIdx = splits[d].elemIdx;
+                        const newTdId = getUUID();
                         const initialListState2 = this.getListStateBeforeIndex(
                           td.value,
                           splitIdx
                         );
-                        const overflowElements = deepClone(
-                          td.value.slice(splitIdx)
-                        );
+                        const overflowElements = td.value.slice(splitIdx);
                         const overflowStartElement = overflowElements[0];
                         let splitSyntheticLeadingZero = false;
                         if (!overflowElements.length || overflowElements[0]?.value !== ZERO) {
@@ -22009,7 +22540,13 @@ var Draw = class {
                           });
                           splitSyntheticLeadingZero = true;
                         }
+                        this.syncTableElementContext(overflowElements, {
+                          tableId: element.id,
+                          trId: newTrId,
+                          tdId: newTdId
+                        });
                         const {
+                          id: _tdId,
                           value: _v,
                           rowList: _rl,
                           positionList: _pl,
@@ -22019,6 +22556,7 @@ var Draw = class {
                         } = td;
                         return {
                           ...deepClone(tdMeta),
+                          id: newTdId,
                           value: overflowElements,
                           splitSyntheticLeadingZero,
                           splitListState: initialListState2,
@@ -22040,8 +22578,21 @@ var Draw = class {
                       splitRootId,
                       splitLevel
                     };
+                    let isLogicalSplitCursorHandled = false;
+                    if (logicalSplitCursor && logicalSplitCursor.rootTrId === splitRootId) {
+                      isLogicalSplitCursorHandled = this.applyCollapsedSplitTableCursor({
+                        tableIndex: i,
+                        tableId: element.id,
+                        overflowTr,
+                        overflowTrIdx,
+                        continuationTr,
+                        continuationTdList,
+                        logicalCursor: logicalSplitCursor,
+                        splits
+                      });
+                    }
                     const positionContext = this.position.getPositionContext();
-                    if (activeSplitRange && positionContext.isTable && positionContext.trId === activeSplitRange.trId) {
+                    if (!isLogicalSplitCursorHandled && activeSplitRange && positionContext.isTable && positionContext.trId === activeSplitRange.trId) {
                       const splitIdx = splits[activeSplitRange.tdIndex]?.elemIdx;
                       const continuationTd = continuationTdList[activeSplitRange.tdIndex];
                       if (splitIdx !== void 0 && continuationTd && activeSplitRange.mergedIndex >= splitIdx) {
@@ -22098,16 +22649,26 @@ var Draw = class {
               element.height -= cloneTrHeight;
               metrics.height -= cloneTrRealHeight;
               metrics.boundingBoxDescent -= cloneTrRealHeight;
-              const cloneElement = deepClone(element);
-              cloneElement.pagingId = pagingId;
-              cloneElement.pagingIndex = element.pagingIndex + 1;
+              const {
+                trList: _currentTrList,
+                id: _currentId,
+                height: _currentHeight,
+                pagingIndex: _currentPagingIndex,
+                ...cloneElementMeta
+              } = element;
+              const cloneElement = {
+                ...deepClone(cloneElementMeta),
+                trList: cloneTrList,
+                height: cloneTrHeight,
+                pagingId,
+                pagingIndex: element.pagingIndex + 1
+              };
               const repeatTrList = trList2.filter((tr) => tr.pagingRepeat);
               if (repeatTrList.length) {
                 const cloneRepeatTrList = deepClone(repeatTrList);
                 cloneRepeatTrList.forEach((tr) => tr.id = getUUID());
                 cloneTrList.unshift(...cloneRepeatTrList);
               }
-              cloneElement.trList = cloneTrList;
               cloneElement.id = getUUID();
               this.spliceElementList(elementList, i + 1, 0, [cloneElement]);
             }
@@ -22555,6 +23116,27 @@ var Draw = class {
     const isPrintMode = this.isPrintMode();
     const isGraffitiMode = this.isGraffitiMode();
     const { isCrossRowCol, tableId } = this.range.getRange();
+    const splitCellSelection = this.range.getSplitCellSelection();
+    const tableCellSelection = this.range.getTableCellSelection();
+    const splitCellRenderOffsetMap = splitCellSelection ? (() => {
+      const splitCellContext = this.getSplitCellSelectionContext(
+        this.getOriginalElementList(),
+        splitCellSelection
+      );
+      if (!splitCellContext) return null;
+      const offsetMap = /* @__PURE__ */ new Map();
+      let offset = 0;
+      for (let c = 0; c < splitCellContext.cellContextList.length; c++) {
+        const { td } = splitCellContext.cellContextList[c];
+        const skipLeadingZero = !!td.splitSyntheticLeadingZero && td.value[0]?.value === ZERO ? 1 : 0;
+        offsetMap.set(td.id, {
+          offset,
+          skipLeadingZero
+        });
+        offset += Math.max(td.value.length - skipLeadingZero, 0);
+      }
+      return offsetMap;
+    })() : null;
     let index = startIndex;
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i];
@@ -22586,6 +23168,9 @@ var Draw = class {
           this.textParticle.complete();
           this.laTexParticle.render(ctx, element, x, y + offsetY);
         } else if (element.type === "table" /* TABLE */) {
+          if (tableCellSelection) {
+            tableRangeElement = element;
+          }
           if (isCrossRowCol) {
             rangeRecord.x = x;
             rangeRecord.y = y;
@@ -22733,11 +23318,14 @@ var Draw = class {
           startIndex: startIndex2,
           endIndex
         } = this.range.getRange();
-        if (currentZone === zone && startIndex2 !== endIndex && startIndex2 <= index && index <= endIndex) {
+        const splitCellOffset = element.tdId ? splitCellRenderOffsetMap?.get(element.tdId) : void 0;
+        const splitCellIndex = splitCellOffset ? index - splitCellOffset.skipLeadingZero + splitCellOffset.offset : index;
+        const isSplitCellElement = !!splitCellOffset && index >= splitCellOffset.skipLeadingZero;
+        if (currentZone === zone && startIndex2 !== endIndex && startIndex2 <= splitCellIndex && splitCellIndex <= endIndex) {
           const positionContext = this.position.getPositionContext();
-          if (!positionContext.isTable && !element.tdId || positionContext.tdId === element.tdId) {
-            if (startIndex2 === index) {
-              const nextElement = elementList[startIndex2 + 1];
+          if (splitCellRenderOffsetMap && isSplitCellElement || !splitCellRenderOffsetMap && (!positionContext.isTable && !element.tdId || positionContext.tdId === element.tdId)) {
+            if (startIndex2 === splitCellIndex) {
+              const nextElement = splitCellRenderOffsetMap && isSplitCellElement ? this.getElementList()[startIndex2 + 1] : elementList[startIndex2 + 1];
               if (nextElement && nextElement.value === ZERO) {
                 rangeRecord.x = x + metrics.width;
                 rangeRecord.y = y - (curRow.spaceAbove || 0);
@@ -22802,7 +23390,7 @@ var Draw = class {
       this.strikeout.render(ctx);
       this.group.render(ctx);
       if (!isPrintMode && !isGraffitiMode) {
-        if (rangeRecord.width && rangeRecord.height) {
+        if (!tableCellSelection && rangeRecord.width && rangeRecord.height) {
           const { x, y, width, height } = rangeRecord;
           this.range.render(ctx, x, y, width, height);
         }
@@ -22814,6 +23402,20 @@ var Draw = class {
           } = positionList[curRow.startIndex];
           this.tableParticle.drawRange(ctx, tableRangeElement, x, y);
         }
+        if (tableCellSelection && tableRangeElement) {
+          const {
+            coordinate: {
+              leftTop: [x, y]
+            }
+          } = positionList[curRow.startIndex];
+          this.tableParticle.drawCellRange(
+            ctx,
+            tableRangeElement,
+            x,
+            y,
+            tableCellSelection
+          );
+        }
       }
     }
   }
@@ -23440,6 +24042,34 @@ var CommandAdapt = class {
     this.zone = draw.getZone();
     this.tableOperate = draw.getTableOperate();
   }
+  getStyleSelectionElementList(options = {}) {
+    const selection = this.range.getSelectionElementList();
+    if (!selection?.length) return null;
+    const { textLikeOnly = false } = options;
+    const result = [];
+    const collect = (elementList) => {
+      for (let i = 0; i < elementList.length; i++) {
+        const element = elementList[i];
+        if (element.type === "table" /* TABLE */ && element.trList?.length) {
+          for (let t = 0; t < element.trList.length; t++) {
+            const tr = element.trList[t];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              collect(tr.tdList[d].value);
+            }
+          }
+          continue;
+        }
+        result.push(element);
+      }
+    };
+    collect(selection);
+    if (!textLikeOnly) {
+      return result;
+    }
+    return result.filter(
+      (element) => isTextLikeElement(element) || element.type === "label" /* LABEL */
+    );
+  }
   mode(payload) {
     this.draw.setMode(payload);
   }
@@ -23585,7 +24215,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     let renderOption = {};
     let changeElementList = [];
     if (selection?.length) {
@@ -23612,7 +24242,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (selection?.length) {
       selection.forEach((el) => {
         el.font = payload;
@@ -23646,7 +24276,9 @@ var CommandAdapt = class {
     if (payload < minSize || payload > maxSize) return;
     let renderOption = {};
     let changeElementList = [];
-    const selection = this.range.getTextLikeSelectionElementList();
+    const selection = this.getStyleSelectionElementList({
+      textLikeOnly: true
+    });
     if (selection?.length) {
       changeElementList = selection;
       renderOption = { isSetCursor: false };
@@ -23686,7 +24318,9 @@ var CommandAdapt = class {
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
     const { defaultSize, maxSize } = this.options;
-    const selection = this.range.getTextLikeSelectionElementList();
+    const selection = this.getStyleSelectionElementList({
+      textLikeOnly: true
+    });
     let renderOption = {};
     let changeElementList = [];
     if (selection?.length) {
@@ -23735,7 +24369,9 @@ var CommandAdapt = class {
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
     const { defaultSize, minSize } = this.options;
-    const selection = this.range.getTextLikeSelectionElementList();
+    const selection = this.getStyleSelectionElementList({
+      textLikeOnly: true
+    });
     let renderOption = {};
     let changeElementList = [];
     if (selection?.length) {
@@ -23783,7 +24419,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (selection?.length) {
       const noBoldIndex = selection.findIndex((s) => !s.bold);
       selection.forEach((el) => {
@@ -23815,7 +24451,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (selection?.length) {
       const noItalicIndex = selection.findIndex((s) => !s.italic);
       selection.forEach((el) => {
@@ -23847,7 +24483,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (selection?.length) {
       const isSetUnderline = selection.some(
         (s) => !s.underline || !textDecoration && s.textDecoration || textDecoration && !s.textDecoration || textDecoration && s.textDecoration && !isObjectEqual(s.textDecoration, textDecoration)
@@ -23889,7 +24525,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (selection?.length) {
       const noStrikeoutIndex = selection.findIndex((s) => !s.strikeout);
       selection.forEach((el) => {
@@ -23924,7 +24560,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (!selection) return;
     const superscriptIndex = selection.findIndex(
       (s) => s.type === "superscript" /* SUPERSCRIPT */
@@ -23947,7 +24583,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (!selection) return;
     const subscriptIndex = selection.findIndex(
       (s) => s.type === "subscript" /* SUBSCRIPT */
@@ -23970,7 +24606,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (selection?.length) {
       selection.forEach((el) => {
         if (payload) {
@@ -24011,7 +24647,7 @@ var CommandAdapt = class {
     const { isIgnoreDisabledRule = false } = options || {};
     const isDisabled = !isIgnoreDisabledRule && (this.draw.isReadonly() || this.draw.isDisabled());
     if (isDisabled) return;
-    const selection = this.range.getSelectionElementList();
+    const selection = this.getStyleSelectionElementList();
     if (selection?.length) {
       selection.forEach((el) => {
         if (payload) {
@@ -24642,25 +25278,39 @@ var CommandAdapt = class {
     const endElement = pickElementAttr(elementList[endIndex], {
       extraPickAttrs: ["id", "controlComponent"]
     });
-    const rowList = this.draw.getRowList();
     const positionList = this.position.getPositionList();
     const startPosition = positionList[startIndex];
     const endPosition = positionList[endIndex];
+    if (!startPosition || !endPosition) return null;
     const startPageNo = startPosition.pageNo;
     const endPageNo = endPosition.pageNo;
     const startRowNo = startPosition.rowIndex;
     const endRowNo = endPosition.rowIndex;
-    const startRow = rowList[startRowNo];
-    const endRow = rowList[endRowNo];
+    const getRowStartPositionIndex = (targetIndex) => {
+      let rowStartIndex = targetIndex;
+      const targetPosition = positionList[targetIndex];
+      while (rowStartIndex > 0) {
+        const prePosition = positionList[rowStartIndex - 1];
+        if (!prePosition || prePosition.pageNo !== targetPosition.pageNo || prePosition.rowNo !== targetPosition.rowNo || prePosition.columnNo !== targetPosition.columnNo) {
+          break;
+        }
+        rowStartIndex--;
+      }
+      return rowStartIndex;
+    };
+    const startRowStartIndex = getRowStartPositionIndex(startIndex);
+    const endRowStartIndex = getRowStartPositionIndex(endIndex);
+    const startRowStartsWithZero = elementList[startRowStartIndex]?.value === ZERO;
+    const endRowStartsWithZero = elementList[endRowStartIndex]?.value === ZERO;
     let startColNo = 0;
     let endColNo = 0;
     if (!this.draw.getCursor().getHitLineStartIndex()) {
-      startColNo = startRow.elementList[0]?.value === ZERO ? startPosition.index - startRow.startIndex : startPosition.index - startRow.startIndex + 1;
+      startColNo = startRowStartsWithZero ? startIndex - startRowStartIndex : startIndex - startRowStartIndex + 1;
     }
     if (startPosition === endPosition) {
       endColNo = startColNo;
     } else {
-      endColNo = endRow.elementList[0]?.value === ZERO ? endPosition.index - endRow.startIndex : endPosition.index - endRow.startIndex + 1;
+      endColNo = endRowStartsWithZero ? endIndex - endRowStartIndex : endIndex - endRowStartIndex + 1;
     }
     const rangeRects = [];
     const height = this.draw.getOriginalHeight();
@@ -24668,6 +25318,7 @@ var CommandAdapt = class {
     const selectionPositionList = this.position.getSelectionPositionList();
     if (selectionPositionList) {
       let currentRowNo = null;
+      let currentPageNo = null;
       let currentX = 0;
       let rangeRect = null;
       for (let p = 0; p < selectionPositionList.length; p++) {
@@ -24677,7 +25328,7 @@ var CommandAdapt = class {
           coordinate: { leftTop, rightTop },
           lineHeight
         } = selectionPositionList[p];
-        if (currentRowNo === null || currentRowNo !== rowNo) {
+        if (currentRowNo === null || currentPageNo === null || currentRowNo !== rowNo || currentPageNo !== pageNo) {
           if (rangeRect) {
             rangeRects.push(rangeRect);
           }
@@ -24688,6 +25339,7 @@ var CommandAdapt = class {
             height: lineHeight
           };
           currentRowNo = rowNo;
+          currentPageNo = pageNo;
           currentX = leftTop[0];
         } else {
           rangeRect.width = rightTop[0] - currentX;