@hufe921/canvas-editor 0.9.125 → 0.9.126

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [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.126";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -4095,6 +4095,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 +4483,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 +4559,8 @@ function mergeOption(options = {}) {
     modeRule: modeRuleOption,
     graffiti: graffitiOptions,
     label: labelOptions,
-    imgCaption: imgCaptionOptions
+    imgCaption: imgCaptionOptions,
+    list: listOptions
   });
 }
 function unzipElementList(elementList) {
@@ -5743,7 +5748,8 @@ function getElementListByHTML(htmlText, options) {
               width,
               height,
               value: src,
-              type: ElementType.IMAGE
+              type: ElementType.IMAGE,
+              rowFlex: convertTextAlignToRowFlex(node.parentElement)
             });
           }
         } else if (node.nodeName === "VIDEO") {
@@ -7238,6 +7244,7 @@ function backspaceHideElement(host) {
   }
 }
 function backspace(evt, host) {
+  var _a;
   const draw = host.getDraw();
   if (draw.isReadonly())
     return;
@@ -7292,12 +7299,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 +7438,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 +7496,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 +14635,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 +17317,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 +17354,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 +17368,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 +17408,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 +21293,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 +21304,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 +21427,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 +21436,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 +22766,33 @@ 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);
+    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());
   }