@hufe921/canvas-editor 0.9.125 → 0.9.127

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [0.9.127](https://github.com/Hufe921/canvas-editor/compare/v0.9.126...v0.9.127) (2026-02-18)
+
+
+### Bug Fixes
+
+* format elements error in executeComputeElementListHeight api #1356 ([6fe3e70](https://github.com/Hufe921/canvas-editor/commit/6fe3e70d801a34337814e936ebe83349fe8d2684)), closes [#1356](https://github.com/Hufe921/canvas-editor/issues/1356)
+* move cursor to the visible range boundary error ([2c01b92](https://github.com/Hufe921/canvas-editor/commit/2c01b929be8bd58560bb3c1c99292f0b4fff4eae))
+
+
+
+## [0.9.126](https://github.com/Hufe921/canvas-editor/compare/v0.9.125...v0.9.126) (2026-02-12)
+
+
+### Bug Fixes
+
+* adjusted image rowFlex when converting HTML to elements #1354 ([3fe395e](https://github.com/Hufe921/canvas-editor/commit/3fe395e7c0e669d5d93bca673f9429faa20e2aeb)), closes [#1354](https://github.com/Hufe921/canvas-editor/issues/1354)
+* cursor positioning when clicking control postfix #1353 ([ea650f6](https://github.com/Hufe921/canvas-editor/commit/ea650f6520b194d76458fbe33b88b01f901db4bc)), closes [#1353](https://github.com/Hufe921/canvas-editor/issues/1353)
+* restore titleId when splitting/merging title #921 #1337 ([0b659ef](https://github.com/Hufe921/canvas-editor/commit/0b659ef9ff9d9562880dedba86e0c0540ea90c65)), closes [#921](https://github.com/Hufe921/canvas-editor/issues/921) [#1337](https://github.com/Hufe921/canvas-editor/issues/1337)
+
+
+### Chores
+
+* add claude settings ([99de4e4](https://github.com/Hufe921/canvas-editor/commit/99de4e416e16b970b23d770319f278a9071ec4e7))
+* update README.md ([afa05b2](https://github.com/Hufe921/canvas-editor/commit/afa05b2272d1c093ac02f948375e707291be5439))
+
+
+### Features
+
+* add compute elements height  and remaining page height api #1213 ([f5e80f9](https://github.com/Hufe921/canvas-editor/commit/f5e80f99f8505c57bf36f8b9c8e948a0b29cf6d8)), closes [#1213](https://github.com/Hufe921/canvas-editor/issues/1213)
+* implement list number style inheritance with config option #727 ([0b99406](https://github.com/Hufe921/canvas-editor/commit/0b994068723c85bff504e04470ae82ee241b894e)), closes [#727](https://github.com/Hufe921/canvas-editor/issues/727)
+
+
+
 ## [0.9.125](https://github.com/Hufe921/canvas-editor/compare/v0.9.124...v0.9.125) (2026-02-07)
 
 

package/README.md

@@ -1,5 +1,9 @@
 <h1 align="center">canvas-editor</h1>
 
+<p align="center">
+  <a href="https://trendshift.io/repositories/8401" target="_blank"><img src="https://trendshift.io/api/badge/repositories/8401" alt="Hufe921%2Fcanvas-editor | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</p>
+
 <p align="center">
 <a href="https://www.npmjs.com/package/@hufe921/canvas-editor" target="_blank"><img src="https://img.shields.io/npm/v/@hufe921/canvas-editor.svg?sanitize=true" alt="Version"></a>
  <a href="https://github.com/hufe921/canvas-editor/actions" target="_blank">

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.125";
+const version = "0.9.127";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -463,163 +463,6 @@ function scrollIntoView(container, selected) {
     container.scrollTop = bottom - container.clientHeight;
   }
 }
-var browser = { exports: {} };
-var process = browser.exports = {};
-var cachedSetTimeout;
-var cachedClearTimeout;
-function defaultSetTimout() {
-  throw new Error("setTimeout has not been defined");
-}
-function defaultClearTimeout() {
-  throw new Error("clearTimeout has not been defined");
-}
-(function() {
-  try {
-    if (typeof setTimeout === "function") {
-      cachedSetTimeout = setTimeout;
-    } else {
-      cachedSetTimeout = defaultSetTimout;
-    }
-  } catch (e) {
-    cachedSetTimeout = defaultSetTimout;
-  }
-  try {
-    if (typeof clearTimeout === "function") {
-      cachedClearTimeout = clearTimeout;
-    } else {
-      cachedClearTimeout = defaultClearTimeout;
-    }
-  } catch (e) {
-    cachedClearTimeout = defaultClearTimeout;
-  }
-})();
-function runTimeout(fun) {
-  if (cachedSetTimeout === setTimeout) {
-    return setTimeout(fun, 0);
-  }
-  if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
-    cachedSetTimeout = setTimeout;
-    return setTimeout(fun, 0);
-  }
-  try {
-    return cachedSetTimeout(fun, 0);
-  } catch (e) {
-    try {
-      return cachedSetTimeout.call(null, fun, 0);
-    } catch (e2) {
-      return cachedSetTimeout.call(this, fun, 0);
-    }
-  }
-}
-function runClearTimeout(marker) {
-  if (cachedClearTimeout === clearTimeout) {
-    return clearTimeout(marker);
-  }
-  if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
-    cachedClearTimeout = clearTimeout;
-    return clearTimeout(marker);
-  }
-  try {
-    return cachedClearTimeout(marker);
-  } catch (e) {
-    try {
-      return cachedClearTimeout.call(null, marker);
-    } catch (e2) {
-      return cachedClearTimeout.call(this, marker);
-    }
-  }
-}
-var queue = [];
-var draining = false;
-var currentQueue;
-var queueIndex = -1;
-function cleanUpNextTick() {
-  if (!draining || !currentQueue) {
-    return;
-  }
-  draining = false;
-  if (currentQueue.length) {
-    queue = currentQueue.concat(queue);
-  } else {
-    queueIndex = -1;
-  }
-  if (queue.length) {
-    drainQueue();
-  }
-}
-function drainQueue() {
-  if (draining) {
-    return;
-  }
-  var timeout = runTimeout(cleanUpNextTick);
-  draining = true;
-  var len = queue.length;
-  while (len) {
-    currentQueue = queue;
-    queue = [];
-    while (++queueIndex < len) {
-      if (currentQueue) {
-        currentQueue[queueIndex].run();
-      }
-    }
-    queueIndex = -1;
-    len = queue.length;
-  }
-  currentQueue = null;
-  draining = false;
-  runClearTimeout(timeout);
-}
-process.nextTick = function(fun) {
-  var args = new Array(arguments.length - 1);
-  if (arguments.length > 1) {
-    for (var i = 1; i < arguments.length; i++) {
-      args[i - 1] = arguments[i];
-    }
-  }
-  queue.push(new Item(fun, args));
-  if (queue.length === 1 && !draining) {
-    runTimeout(drainQueue);
-  }
-};
-function Item(fun, array) {
-  this.fun = fun;
-  this.array = array;
-}
-Item.prototype.run = function() {
-  this.fun.apply(null, this.array);
-};
-process.title = "browser";
-process.browser = true;
-process.env = {};
-process.argv = [];
-process.version = "";
-process.versions = {};
-function noop() {
-}
-process.on = noop;
-process.addListener = noop;
-process.once = noop;
-process.off = noop;
-process.removeListener = noop;
-process.removeAllListeners = noop;
-process.emit = noop;
-process.prependListener = noop;
-process.prependOnceListener = noop;
-process.listeners = function(name) {
-  return [];
-};
-process.binding = function(name) {
-  throw new Error("process.binding is not supported");
-};
-process.cwd = function() {
-  return "/";
-};
-process.chdir = function(dir) {
-  throw new Error("process.chdir is not supported");
-};
-process.umask = function() {
-  return 0;
-};
 const CURSOR_AGENT_OFFSET_HEIGHT = 12;
 const defaultCursorOption = {
   width: 1,
@@ -4095,6 +3938,9 @@ var ListStyle;
   ListStyle2["DECIMAL"] = "decimal";
   ListStyle2["CHECKBOX"] = "checkbox";
 })(ListStyle || (ListStyle = {}));
+const defaultListOption = {
+  inheritStyle: false
+};
 const ulStyleMapping = {
   [UlStyle.DISC]: "\u2022",
   [UlStyle.CIRCLE]: "\u25E6",
@@ -4480,6 +4326,7 @@ function mergeOption(options = {}) {
   const graffitiOptions = __spreadValues(__spreadValues({}, defaultGraffitiOption), options.graffiti);
   const labelOptions = __spreadValues(__spreadValues({}, defaultLabelOption), options.label);
   const imgCaptionOptions = __spreadValues(__spreadValues({}, defaultImgCaptionOption), options.imgCaption);
+  const listOptions = __spreadValues(__spreadValues({}, defaultListOption), options.list);
   const modeRuleOption = {
     print: __spreadValues(__spreadValues({}, defaultModeRuleOption.print), (_a = options.modeRule) == null ? void 0 : _a.print),
     readonly: __spreadValues(__spreadValues({}, defaultModeRuleOption.readonly), (_b = options.modeRule) == null ? void 0 : _b.readonly),
@@ -4555,7 +4402,8 @@ function mergeOption(options = {}) {
     modeRule: modeRuleOption,
     graffiti: graffitiOptions,
     label: labelOptions,
-    imgCaption: imgCaptionOptions
+    imgCaption: imgCaptionOptions,
+    list: listOptions
   });
 }
 function unzipElementList(elementList) {
@@ -5743,7 +5591,8 @@ function getElementListByHTML(htmlText, options) {
               width,
               height,
               value: src,
-              type: ElementType.IMAGE
+              type: ElementType.IMAGE,
+              rowFlex: convertTextAlignToRowFlex(node.parentElement)
             });
           }
         } else if (node.nodeName === "VIDEO") {
@@ -6410,7 +6259,7 @@ class Cursor {
     } else {
       this._clearBlinkTimeout();
     }
-    browser.exports.nextTick(() => {
+    nextTick(() => {
       this.moveCursorToVisible({
         cursorPosition,
         direction: parseInt(oldTop) > cursorTop ? MoveDirection.UP : MoveDirection.DOWN
@@ -6426,10 +6275,6 @@ class Cursor {
     if (!cursorPosition || !direction)
       return;
     const { pageNo, coordinate: { leftTop, leftBottom } } = cursorPosition;
-    const prePageY = pageNo * (this.draw.getHeight() + this.draw.getPageGap()) + this.container.getBoundingClientRect().top;
-    const isUp = direction === MoveDirection.UP;
-    const x = leftBottom[0];
-    const y = isUp ? leftTop[1] + prePageY : leftBottom[1] + prePageY;
     const scrollContainer = findScrollContainer(this.container);
     const rect = {
       left: 0,
@@ -6437,7 +6282,8 @@ class Cursor {
       top: 0,
       bottom: 0
     };
-    if (scrollContainer === document.documentElement) {
+    const isDocumentScroll = scrollContainer === document.documentElement;
+    if (isDocumentScroll) {
       rect.right = window.innerWidth;
       rect.bottom = window.innerHeight;
     } else {
@@ -6447,6 +6293,10 @@ class Cursor {
       rect.top = top;
       rect.bottom = bottom;
     }
+    const prePageY = pageNo * (this.draw.getHeight() + this.draw.getPageGap()) + this.container.getBoundingClientRect().top;
+    const isUp = direction === MoveDirection.UP;
+    const x = leftBottom[0] + (isDocumentScroll ? 0 : rect.left);
+    const y = isUp ? leftTop[1] + prePageY : leftBottom[1] + prePageY;
     const { maskMargin } = this.options;
     rect.top += maskMargin[0];
     rect.bottom -= maskMargin[2];
@@ -7238,6 +7088,7 @@ function backspaceHideElement(host) {
   }
 }
 function backspace(evt, host) {
+  var _a;
   const draw = host.getDraw();
   if (draw.isReadonly())
     return;
@@ -7292,12 +7143,23 @@ function backspace(evt, host) {
     if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
       const rowFlexElementList = rangeManager.getRangeRowElementList();
       if (rowFlexElementList) {
-        const preElement = elementList[startIndex - 1];
+        const preElement2 = elementList[startIndex - 1];
         rowFlexElementList.forEach((element) => {
-          element.rowFlex = preElement == null ? void 0 : preElement.rowFlex;
+          element.rowFlex = preElement2 == null ? void 0 : preElement2.rowFlex;
         });
       }
     }
+    const preElement = startElement.value === ZERO ? elementList[startIndex - 1] : startElement;
+    const nextElement = elementList[endIndex + 1];
+    if ((preElement == null ? void 0 : preElement.titleId) && (nextElement == null ? void 0 : nextElement.titleId) && preElement.level === nextElement.level && preElement.titleId !== nextElement.titleId) {
+      const preTitleId = preElement.titleId;
+      const nextTitleId = nextElement.titleId;
+      let nextIndex = endIndex + 1;
+      while (nextIndex < elementList.length && ((_a = elementList[nextIndex]) == null ? void 0 : _a.titleId) === nextTitleId) {
+        elementList[nextIndex].titleId = preTitleId;
+        nextIndex++;
+      }
+    }
     if (!isCollapsed) {
       draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
     } else {
@@ -7420,7 +7282,7 @@ function del(evt, host) {
   }
 }
 function enter(evt, host) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g;
   const draw = host.getDraw();
   if (draw.isReadonly())
     return;
@@ -7478,6 +7340,14 @@ function enter(evt, host) {
     const { index: index2 } = cursorPosition;
     if (isCollapsed) {
       draw.spliceElementList(elementList, index2 + 1, 0, [enterText]);
+      if (endElement.titleId && ((_f = elementList[index2 + 2]) == null ? void 0 : _f.titleId) === endElement.titleId) {
+        const newTitleId = getUUID();
+        let nextIndex = index2 + 2;
+        while (nextIndex < elementList.length && ((_g = elementList[nextIndex]) == null ? void 0 : _g.titleId) === endElement.titleId) {
+          elementList[nextIndex].titleId = newTitleId;
+          nextIndex++;
+        }
+      }
     } else {
       draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex, [enterText]);
     }
@@ -14609,6 +14479,12 @@ class Control {
             newElement: elementList[startIndex - 1]
           };
         }
+        if (startIndex === elementList.length - 1) {
+          return {
+            newIndex: startIndex,
+            newElement: elementList[startIndex]
+          };
+        }
         startIndex++;
       }
     } else if (element.controlComponent === ControlComponent.PREFIX || element.controlComponent === ControlComponent.PRE_TEXT) {
@@ -17285,6 +17161,26 @@ class ListParticle {
     }
     return listStyleMap;
   }
+  findStyledElement(elementList) {
+    let styleElement = elementList[0];
+    for (let i = 1; i < elementList.length; i++) {
+      const element = elementList[i];
+      if (element.font || element.size || element.bold || element.italic) {
+        styleElement = element;
+        break;
+      }
+    }
+    return styleElement;
+  }
+  getListFontStyle(elementList, scale) {
+    if (this.options.list.inheritStyle) {
+      const styleElement = this.findStyledElement(elementList);
+      return this.draw.getElementFont(styleElement, scale);
+    } else {
+      const { defaultFont, defaultSize } = this.options;
+      return `${defaultSize * scale}px ${defaultFont}`;
+    }
+  }
   getListStyleWidth(ctx, listElementList) {
     const { scale, checkbox } = this.options;
     const startElement = listElementList[0];
@@ -17302,8 +17198,11 @@ class ListParticle {
     }, 0);
     if (!count)
       return 0;
+    ctx.save();
+    ctx.font = this.getListFontStyle(listElementList, scale);
     const text = `${this.MEASURE_BASE_TEXT.repeat(String(count).length)}${KeyMap.PERIOD}`;
     const textMetrics = ctx.measureText(text);
+    ctx.restore();
     return Math.ceil((textMetrics.width + this.LIST_GAP) * scale);
   }
   drawListStyle(ctx, row, position) {
@@ -17313,7 +17212,7 @@ class ListParticle {
     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 == null ? void 0 : element.type) !== ElementType.TAB)
@@ -17353,7 +17252,7 @@ class ListParticle {
       if (!text)
         return;
       ctx.save();
-      ctx.font = `${defaultSize * scale}px ${defaultFont}`;
+      ctx.font = this.getListFontStyle(elementList, scale);
       ctx.fillText(text, x, y);
       ctx.restore();
     }
@@ -21238,6 +21137,7 @@ class Command {
     __publicField(this, "executeUpdateOptions");
     __publicField(this, "executeInsertTitle");
     __publicField(this, "executeFocus");
+    __publicField(this, "executeComputeElementListHeight");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getOptions");
@@ -21248,6 +21148,7 @@ class Command {
     __publicField(this, "getText");
     __publicField(this, "getWordCount");
     __publicField(this, "getCursorPosition");
+    __publicField(this, "getRemainingContentHeight");
     __publicField(this, "getRange");
     __publicField(this, "getRangeText");
     __publicField(this, "getRangeContext");
@@ -21370,6 +21271,7 @@ class Command {
     this.executeUpdateOptions = adapt.updateOptions.bind(adapt);
     this.executeInsertTitle = adapt.insertTitle.bind(adapt);
     this.executeFocus = adapt.focus.bind(adapt);
+    this.executeComputeElementListHeight = adapt.computeElementListHeight.bind(adapt);
     this.getImage = adapt.getImage.bind(adapt);
     this.getOptions = adapt.getOptions.bind(adapt);
     this.getValue = adapt.getValue.bind(adapt);
@@ -21378,6 +21280,7 @@ class Command {
     this.getText = adapt.getText.bind(adapt);
     this.getWordCount = adapt.getWordCount.bind(adapt);
     this.getCursorPosition = adapt.getCursorPosition.bind(adapt);
+    this.getRemainingContentHeight = adapt.getRemainingContentHeight.bind(adapt);
     this.getRange = adapt.getRange.bind(adapt);
     this.getRangeText = adapt.getRangeText.bind(adapt);
     this.getRangeContext = adapt.getRangeContext.bind(adapt);
@@ -22707,6 +22610,37 @@ class CommandAdapt {
   getCursorPosition() {
     return this.position.getCursorPosition();
   }
+  getRemainingContentHeight() {
+    if (!this.draw.getIsPagingMode())
+      return 0;
+    const pageRowList = this.draw.getPageRowList();
+    const lastPageIndex = pageRowList.length - 1;
+    const rowList = pageRowList[lastPageIndex] || [];
+    const usedHeight = rowList.reduce((pre, cur) => pre + cur.height + (cur.offsetY || 0), 0);
+    const height = this.draw.getHeight();
+    const mainOuterHeight = this.draw.getMainOuterHeight();
+    const remaining = height - (mainOuterHeight + usedHeight);
+    return remaining > 0 ? remaining : 0;
+  }
+  computeElementListHeight(elementList) {
+    if (!elementList.length)
+      return 0;
+    const innerWidth = this.draw.getInnerWidth();
+    if (innerWidth <= 0)
+      return 0;
+    const targetElementList = deepClone(elementList);
+    formatElementList(targetElementList, {
+      isHandleFirstElement: false,
+      editorOptions: this.options
+    });
+    const surroundElementList = pickSurroundElementList(targetElementList);
+    const rowList = this.draw.computeRowList({
+      innerWidth,
+      elementList: targetElementList,
+      surroundElementList
+    });
+    return rowList.reduce((pre, cur) => pre + cur.height + (cur.offsetY || 0), 0);
+  }
   getRange() {
     return deepClone(this.range.getRange());
   }