@hufe921/canvas-editor 0.9.18 → 0.9.20

package/CHANGELOG.md

@@ -0,0 +1,207 @@
+## [0.9.20](https://github.com/Hufe921/canvas-editor/compare/v0.9.19...v0.9.20) (2023-03-08)
+
+
+### Bug Fixes
+
+* near highlight elements render error ([17b469b](https://github.com/Hufe921/canvas-editor/commit/17b469be6b95621b635383c9fc20c9c0adcb8d2b))
+
+
+### Chores
+
+* add CHANGELOG.md ([367a247](https://github.com/Hufe921/canvas-editor/commit/367a24730a739514d24d7c882524f8ded479fb38))
+* add issue template ([7a26819](https://github.com/Hufe921/canvas-editor/commit/7a268199b3607a8c629fc5bc0242be89abbbac90))
+
+
+### Features
+
+* signature adapt to high-resolution screen ([4acf243](https://github.com/Hufe921/canvas-editor/commit/4acf243fed01b0b41ebbcc46c4b6603cabf6c825))
+* open hyperlink shortcut ([3295e37](https://github.com/Hufe921/canvas-editor/commit/3295e3711ae92f5503064691c5558afea99e3f0c))
+* copy and paste highlight element ([0493ae2](https://github.com/Hufe921/canvas-editor/commit/0493ae2d5e10daf917e39a9deb4e29c90e096420))
+
+
+
+## [0.9.19](https://github.com/Hufe921/canvas-editor/compare/v0.9.18...v0.9.19) (2023-03-03)
+
+
+### Bug Fixes
+
+* continuity page render error in lazy mode ([ff06e50](https://github.com/Hufe921/canvas-editor/commit/ff06e50138697ef61ce308e78a7e873046664e30))
+* format paste table data ([909096b](https://github.com/Hufe921/canvas-editor/commit/909096bd0d9d6e845ccecbee815ddebe35e6f021))
+
+
+### Performance Improvements
+
+* improve:control element input ([dc54622](https://github.com/Hufe921/canvas-editor/commit/dc54622258872630ff39309f2b1da3baee1f508f))
+
+
+
+## [0.9.18](https://github.com/Hufe921/canvas-editor/compare/v0.9.17...v0.9.18) (2023-03-02)
+
+
+### Bug Fixes
+
+* scrollbar scroll automatically ([8b5c41b](https://github.com/Hufe921/canvas-editor/commit/8b5c41bd58008a2945574ea178058638b64c0ffb))
+* paper remove error in lazy render mode ([8aac99d](https://github.com/Hufe921/canvas-editor/commit/8aac99d5c3a984d8c89b251e53dd393e73c66327))
+* cannot paste html at the end of the control #133 ([0694bf0](https://github.com/Hufe921/canvas-editor/commit/0694bf0bec5da94d800affbf60b79a16c7d4d0e1)), closes [#133](https://github.com/Hufe921/canvas-editor/issues/133)
+* cannot delete control when it  is first element #131 ([45ef8b6](https://github.com/Hufe921/canvas-editor/commit/45ef8b69540ee28f3d4c3b7cada5fbb44c26a023)), closes [#131](https://github.com/Hufe921/canvas-editor/issues/131)
+
+
+### Features
+
+* add lazy render mode ([f428f56](https://github.com/Hufe921/canvas-editor/commit/f428f566e9e92c7d4cc2affe73b4fc01eaaa56dd))
+
+
+### Performance Improvements
+
+* improve:position compute separate from draw row ([8910c7c](https://github.com/Hufe921/canvas-editor/commit/8910c7cf0a5d74f6ec46615bbc106773b3147cdc))
+
+
+
+## [0.9.17](https://github.com/Hufe921/canvas-editor/compare/v0.9.16...v0.9.17) (2023-02-28)
+
+
+### Bug Fixes
+
+* composing input not save history ([c4f2687](https://github.com/Hufe921/canvas-editor/commit/c4f268772646f91d63c224cf72d5e23278ff2f5e))
+* visible page computing method ([fcb96a6](https://github.com/Hufe921/canvas-editor/commit/fcb96a6f561d315945c1069b4a47d4f788212556))
+
+
+### Documentation
+
+* next features road map ([6e99d8a](https://github.com/Hufe921/canvas-editor/commit/6e99d8ad93a7a907fd97a201186b51539980ba55))
+* cursor style option ([92d65da](https://github.com/Hufe921/canvas-editor/commit/92d65da7d80e0e312d053006d0690d1f9a258ef4))
+
+
+### Features
+
+* set the cursor style when dragging text ([2977183](https://github.com/Hufe921/canvas-editor/commit/29771838f0bdc5aef1f5714fd9d6110f482f3f64))
+
+
+
+## [0.9.16](https://github.com/Hufe921/canvas-editor/compare/v0.9.15...v0.9.16) (2023-02-21)
+
+
+### Features
+
+* render composing text ([63487d4](https://github.com/Hufe921/canvas-editor/commit/63487d4f90332be68cb07f3eacfca3a0d04f8eff))
+* redraw when device pixel ratio change ([4c370ae](https://github.com/Hufe921/canvas-editor/commit/4c370aec1adbc4056f394d2faf370327fd544e22))
+* support mac os shortcut remark ([189e88c](https://github.com/Hufe921/canvas-editor/commit/189e88c5601b2a99b032ae966f945986b8acf8b1))
+
+
+### Tests
+
+* optimize the method of get editor value ([708d578](https://github.com/Hufe921/canvas-editor/commit/708d57812e6ab145113e3fbab047970d155b515c))
+
+
+
+## [0.9.15](https://github.com/Hufe921/canvas-editor/compare/v0.9.14...v0.9.15) (2023-02-16)
+
+
+### Bug Fixes
+
+* draw multi-segment richtext element in one row ([c522c22](https://github.com/Hufe921/canvas-editor/commit/c522c225b1c26d16abcccd74c0d2573fbeb88595))
+
+
+### Documentation
+
+* mac os shortcut ([df8096e](https://github.com/Hufe921/canvas-editor/commit/df8096ebfb8259d02f19b1926457d96af574bda2))
+* update next features ([338a67c](https://github.com/Hufe921/canvas-editor/commit/338a67c6e7baf38097f1ec801d8292000e94742b))
+* update next features ([4cb8d2a](https://github.com/Hufe921/canvas-editor/commit/4cb8d2adf6aa25c7734f3a544e6bbb8a78fe5892))
+* add i18n ([c912563](https://github.com/Hufe921/canvas-editor/commit/c9125635eae8cecf4bdeda56455b66221c2f1db3))
+
+
+### Features
+
+* support mac os shortcut ([ef4bda2](https://github.com/Hufe921/canvas-editor/commit/ef4bda2a46fec7c901fe62abeee4e4315e740643))
+* support mac os shortcut ([0d6e0cf](https://github.com/Hufe921/canvas-editor/commit/0d6e0cf4124ddbbc1333a3955acf6aa7b4e159cc))
+* support partial fields to set i18n lang ([7287b57](https://github.com/Hufe921/canvas-editor/commit/7287b576e86447ebde026117d0e6068a3dfaf8f6))
+
+
+
+## [0.9.14](https://github.com/Hufe921/canvas-editor/compare/v0.9.13...v0.9.14) (2023-02-08)
+
+
+### Bug Fixes
+
+* get rowFlex when line breaks ([34799d7](https://github.com/Hufe921/canvas-editor/commit/34799d7cb90a5ed2161c219121ca7b4fcd692558))
+* paste table data format judgment ([8ff0d01](https://github.com/Hufe921/canvas-editor/commit/8ff0d01dde6f66a5ecdabb89703618f16b86ac75))
+
+
+### Features
+
+* add i18n ([82b8d2c](https://github.com/Hufe921/canvas-editor/commit/82b8d2c5a965386720e029d52689f97b5c62f0bc))
+* paste html with textAlign info ([eb0086a](https://github.com/Hufe921/canvas-editor/commit/eb0086a4b81cd87fdb558e89e92c304f16169cb6))
+
+
+
+## [0.9.13](https://github.com/Hufe921/canvas-editor/compare/v0.9.12...v0.9.13) (2023-02-03)
+
+
+### Bug Fixes
+
+* remove style sheet when paste html ([5bf7029](https://github.com/Hufe921/canvas-editor/commit/5bf7029f0ada5a370f1dfdf6c09b2f977a08609a))
+* copy table width colspan and rowspan info ([0f46db1](https://github.com/Hufe921/canvas-editor/commit/0f46db1f8addca04510c683855840770abde69a9))
+* adjust selection boundary ([4865eb5](https://github.com/Hufe921/canvas-editor/commit/4865eb5d5a0ded64215a98651ab23dc6404681c2))
+
+
+### Documentation
+
+* add algolia search ([8177c11](https://github.com/Hufe921/canvas-editor/commit/8177c11c2b4225196aa2a387dcf814fd5af73007))
+
+
+### Features
+
+* paste table element ([db51a27](https://github.com/Hufe921/canvas-editor/commit/db51a27666e21a942ecabc9c6d5f926ce473fedb))
+* paste image element ([0c07db7](https://github.com/Hufe921/canvas-editor/commit/0c07db7a5d53db47117e6fdd11bec995f0a3616b))
+* paste separator element ([77d546f](https://github.com/Hufe921/canvas-editor/commit/77d546f476b0009f6925d660cdcbeefd5150b6c2))
+* paste checkbox element ([e37da11](https://github.com/Hufe921/canvas-editor/commit/e37da11a79dd5e226f954833b102a8c01a19fef9))
+* shrink the contextmenu scope ([64f5ff1](https://github.com/Hufe921/canvas-editor/commit/64f5ff15aa25aaede301277580be0770cec593b0))
+
+
+
+## [0.9.12](https://github.com/Hufe921/canvas-editor/compare/v0.9.11...v0.9.12) (2023-01-20)
+
+
+### Bug Fixes
+
+* adjust selection by shortcut #111 ([a19a0a1](https://github.com/Hufe921/canvas-editor/commit/a19a0a1126f5d8521cde7d53d1042d4fa67ade89)), closes [#111](https://github.com/Hufe921/canvas-editor/issues/111)
+* compatible with browsers that do not support ClipboardItem #108 ([196f638](https://github.com/Hufe921/canvas-editor/commit/196f63831849e555d1c24daa78d69e187e642214)), closes [#108](https://github.com/Hufe921/canvas-editor/issues/108)
+* line thickness of rendered margin ([e8f3b2a](https://github.com/Hufe921/canvas-editor/commit/e8f3b2a6da725feb014d83ff96ab3c6a68b50655))
+* cannot cut whole line except the first page ([ca13a3b](https://github.com/Hufe921/canvas-editor/commit/ca13a3b268791e18d7bc6b0b3297ef0ca5c76387))
+
+
+### Documentation
+
+* adjust selection by direction key ([01353ad](https://github.com/Hufe921/canvas-editor/commit/01353ad59e208d1db1810f43f868201090273d02))
+* adjust selection by shortcut ([81ac4d8](https://github.com/Hufe921/canvas-editor/commit/81ac4d8dc0177090ef11098c9916d156415b5db9))
+* add global api ([3678b7f](https://github.com/Hufe921/canvas-editor/commit/3678b7f34b692e9e56141101e2c9e8b2d627a677))
+* add docs url to README.md ([a369adb](https://github.com/Hufe921/canvas-editor/commit/a369adbe32c9f0779725a68b3f6b20cc9cfbe5b2))
+* update index page ([38cb302](https://github.com/Hufe921/canvas-editor/commit/38cb302fa3a62d5db600ed2df3e8794497a59c52))
+
+
+### Features
+
+* adjust selection by direction key ([1dfdd9a](https://github.com/Hufe921/canvas-editor/commit/1dfdd9a057f20c0fc512f869b3c914317c0fed85))
+* adjust range by shortcut ([4a11bca](https://github.com/Hufe921/canvas-editor/commit/4a11bcacd94a6a0f1340b1741e8ce77d1c6d7e84))
+* update server host ([bf93c29](https://github.com/Hufe921/canvas-editor/commit/bf93c2991ad7e657ea63f2ccb84d0ea803609125))
+* add docs workflow ([f2374a1](https://github.com/Hufe921/canvas-editor/commit/f2374a14f562d25e9498b4ec0c96da9927849ebb))
+* add docs workflow ([7fd0792](https://github.com/Hufe921/canvas-editor/commit/7fd07928b340e3a9795bc4c10d41820d5daffb61))
+* add docs ([db52ab8](https://github.com/Hufe921/canvas-editor/commit/db52ab815d708b5f66df0f6661b17e1227067181))
+* add font selection and font wysiwyg ([72d6174](https://github.com/Hufe921/canvas-editor/commit/72d6174d7b0b61be8db42dcf7a21512fafbc1f2d))
+
+
+
+## [0.9.11](https://github.com/Hufe921/canvas-editor/compare/v0.9.10...v0.9.11) (2022-12-25)
+
+
+### Features
+
+* optimize event code structure ([f63affc](https://github.com/Hufe921/canvas-editor/commit/f63affc1c4219ee4d65485d11299dbfee47a8be2))
+* add isPointInRange function to Range ([5e9c1ce](https://github.com/Hufe921/canvas-editor/commit/5e9c1ce57774012cb1903c2e97ac87ff42d1e245))
+* drag text to editor ([4cf4ea5](https://github.com/Hufe921/canvas-editor/commit/4cf4ea5e45e0ee94a20b53f5e775bba0ef9bacca))
+* use selection text when searching ([bcdb234](https://github.com/Hufe921/canvas-editor/commit/bcdb2340ae87dd72831d23b5ac83e984d09842e3))
+* add cut row feature to contextmenu ([172cb6d](https://github.com/Hufe921/canvas-editor/commit/172cb6d88cf3069452c012b8a52b18d5dba1ff99))
+* cut a whole line when no selection ([2c38f13](https://github.com/Hufe921/canvas-editor/commit/2c38f13113afb0889a3907a825f397de6a877181))
+
+
+

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.18";
+const version = "0.9.20";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -3273,7 +3273,9 @@ function formatElementList(elementList, options) {
             const td = tr.tdList[d];
             const tdId = getUUID();
             td.id = tdId;
-            formatElementList(td.value, options);
+            formatElementList(td.value, __spreadProps(__spreadValues({}, options), {
+              isHandleFirstElement: true
+            }));
             for (let v = 0; v < td.value.length; v++) {
               const value = td.value[v];
               value.tdId = tdId;
@@ -3725,6 +3727,9 @@ function writeElementList(elementList, options) {
         if (element.size) {
           dom.style.fontSize = `${element.size}px`;
         }
+        if (element.highlight) {
+          dom.style.backgroundColor = element.highlight;
+        }
         clipboardDom.append(dom);
       }
     }
@@ -3757,6 +3762,9 @@ function getElementListByHTML(htmlText, options) {
         if (rowFlex !== RowFlex.LEFT) {
           element.rowFlex = rowFlex;
         }
+        if (style.backgroundColor !== "rgba(0, 0, 0, 0)") {
+          element.highlight = style.backgroundColor;
+        }
         elementList.push(element);
       }
     } else if (dom.nodeType === 1) {
@@ -4040,6 +4048,10 @@ var MouseEventButton;
   MouseEventButton2[MouseEventButton2["CENTER"] = 1] = "CENTER";
   MouseEventButton2[MouseEventButton2["RIGHT"] = 2] = "RIGHT";
 })(MouseEventButton || (MouseEventButton = {}));
+const isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
+function isMod(evt) {
+  return isApple ? evt.metaKey : evt.ctrlKey;
+}
 var KeyMap;
 (function(KeyMap2) {
   KeyMap2["Delete"] = "Delete";
@@ -4168,8 +4180,7 @@ class CheckboxControl {
     return data2;
   }
   setValue() {
-    const { endIndex } = this.control.getRange();
-    return endIndex;
+    return -1;
   }
   setSelect() {
     const { control } = this.element;
@@ -4305,7 +4316,11 @@ function mousedown(evt, host) {
   const hyperlinkParticle = draw.getHyperlinkParticle();
   hyperlinkParticle.clearHyperlinkPopup();
   if (curElement.type === ElementType.HYPERLINK) {
-    hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]);
+    if (isMod(evt)) {
+      hyperlinkParticle.openHyperlink(curElement);
+    } else {
+      hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]);
+    }
   }
   const dateParticle = draw.getDateParticle();
   dateParticle.clearDatePicker();
@@ -4437,10 +4452,6 @@ function mousemove(evt, host) {
     isCompute: false
   });
 }
-const isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
-function isMod(evt) {
-  return isApple ? evt.metaKey : evt.ctrlKey;
-}
 function keydown(evt, host) {
   var _a;
   if (host.isComposing)
@@ -4512,7 +4523,7 @@ function keydown(evt, host) {
       value: ZERO
     }, restArg);
     let curIndex;
-    if (activeControl) {
+    if (activeControl && !control.isRangInPostfix()) {
       curIndex = control.setValue([enterText]);
     } else {
       if (isCollapsed) {
@@ -4522,8 +4533,10 @@ function keydown(evt, host) {
       }
       curIndex = index2 + 1;
     }
-    rangeManager.setRange(curIndex, curIndex);
-    draw.render({ curIndex });
+    if (~curIndex) {
+      rangeManager.setRange(curIndex, curIndex);
+      draw.render({ curIndex });
+    }
     evt.preventDefault();
   } else if (evt.key === KeyMap.Left) {
     if (isReadonly)
@@ -4699,7 +4712,6 @@ function keydown(evt, host) {
   }
 }
 function input(data2, host) {
-  var _a;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -4752,7 +4764,7 @@ function input(data2, host) {
     return newElement;
   });
   let curIndex;
-  if (activeControl && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) === element.controlId) {
+  if (activeControl && !control.isRangInPostfix()) {
     curIndex = control.setValue(inputData);
   } else {
     const start = startIndex + 1;
@@ -4764,11 +4776,13 @@ function input(data2, host) {
     }
     curIndex = startIndex + inputData.length;
   }
-  rangeManager.setRange(curIndex, curIndex);
-  draw.render({
-    curIndex,
-    isSubmitHistory: !isComposing
-  });
+  if (~curIndex) {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({
+      curIndex,
+      isSubmitHistory: !isComposing
+    });
+  }
   if (isComposing) {
     host.compositionInfo = {
       elementList,
@@ -5890,10 +5904,10 @@ class Margin {
     this.draw = draw;
     this.options = draw.getOptions();
   }
-  render(ctx) {
+  render(ctx, pageNo) {
     const { marginIndicatorColor, pageMode } = this.options;
     const width = this.draw.getWidth();
-    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight() : this.draw.getHeight();
+    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight(pageNo) : this.draw.getHeight();
     const margins = this.draw.getMargins();
     const marginIndicatorSize = this.draw.getMarginIndicatorSize();
     ctx.save();
@@ -6277,7 +6291,7 @@ class PageNumber {
   render(ctx, pageNo) {
     const { pageNumberSize, pageNumberFont, scale, pageMode } = this.options;
     const width = this.draw.getWidth();
-    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight() : this.draw.getHeight();
+    const height = pageMode === PageMode.CONTINUITY ? this.draw.getCanvasHeight(pageNo) : this.draw.getHeight();
     const pageNumberBottom = this.draw.getPageNumberBottom();
     ctx.save();
     ctx.fillStyle = "#00000";
@@ -6826,6 +6840,7 @@ class HyperlinkParticle {
     hyperlinkPopupContainer.classList.add(`${EDITOR_PREFIX}-hyperlink-popup`);
     const hyperlinkDom = document.createElement("a");
     hyperlinkDom.target = "_blank";
+    hyperlinkDom.rel = "noopener";
     hyperlinkPopupContainer.append(hyperlinkDom);
     this.container.append(hyperlinkPopupContainer);
     return { hyperlinkPopupContainer, hyperlinkDom };
@@ -6845,6 +6860,12 @@ class HyperlinkParticle {
   clearHyperlinkPopup() {
     this.hyperlinkPopupContainer.style.display = "none";
   }
+  openHyperlink(element) {
+    const newTab = window.open(element.url, "_blank");
+    if (newTab) {
+      newTab.opener = null;
+    }
+  }
   render(ctx, element, x, y) {
     ctx.save();
     ctx.font = element.style;
@@ -7026,8 +7047,7 @@ class SelectControl {
     return data2;
   }
   setValue() {
-    const range = this.control.getRange();
-    return range.endIndex;
+    return -1;
   }
   keydown(evt) {
     const elementList = this.control.getElementList();
@@ -7326,6 +7346,16 @@ class Control {
     }
     return false;
   }
+  isRangInPostfix() {
+    if (!this.activeControl)
+      return false;
+    const { startIndex, endIndex } = this.getRange();
+    if (startIndex !== endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const element = elementList[startIndex];
+    return element.controlComponent === ControlComponent.POSTFIX;
+  }
   getContainer() {
     return this.draw.getContainer();
   }
@@ -8911,12 +8941,12 @@ class Draw {
   getHeight() {
     return Math.floor(this.options.height * this.options.scale);
   }
-  getCanvasWidth() {
-    const page = this.getPage();
+  getCanvasWidth(pageNo = -1) {
+    const page = this.getPage(pageNo);
     return page.width;
   }
-  getCanvasHeight() {
-    const page = this.getPage();
+  getCanvasHeight(pageNo = -1) {
+    const page = this.getPage(pageNo);
     return page.height;
   }
   getInnerWidth() {
@@ -8982,8 +9012,8 @@ class Draw {
   setPageNo(payload) {
     this.pageNo = payload;
   }
-  getPage() {
-    return this.pageList[this.pageNo];
+  getPage(pageNo = -1) {
+    return this.pageList[~pageNo ? pageNo : this.pageNo];
   }
   getPageList() {
     return this.pageList;
@@ -9023,12 +9053,6 @@ class Draw {
   insertElementList(payload) {
     if (!payload.length)
       return;
-    const activeControl = this.control.getActiveControl();
-    if (activeControl) {
-      const element = activeControl.getElement();
-      if (element.controlComponent !== ControlComponent.POSTFIX)
-        return;
-    }
     const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
     if (isPartRangeInControlOutside)
       return;
@@ -9039,27 +9063,35 @@ class Draw {
       isHandleFirstElement: false,
       editorOptions: this.options
     });
-    const elementList = this.getElementList();
-    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;
+    let curIndex = -1;
+    const activeControl = this.control.getActiveControl();
+    if (activeControl && !this.control.isRangInPostfix()) {
+      curIndex = activeControl.setValue(payload);
+    } else {
+      const elementList = this.getElementList();
+      const isCollapsed = startIndex === endIndex;
+      const start = startIndex + 1;
+      if (!isCollapsed) {
+        elementList.splice(start, endIndex - startIndex);
       }
-      elementList.splice(start + i, 0, element);
+      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);
+      }
+      curIndex = startIndex + payload.length;
+    }
+    if (~curIndex) {
+      this.range.setRange(curIndex, curIndex);
+      this.render({
+        curIndex
+      });
     }
-    const curIndex = startIndex + payload.length;
-    this.range.setRange(curIndex, curIndex);
-    this.render({
-      curIndex
-    });
   }
   getOriginalElementList() {
     return this.elementList;
@@ -9145,6 +9177,7 @@ class Draw {
       const canvas = this.pageList[0];
       canvas.style.height = `${height}px`;
       canvas.height = height * dpr;
+      this.ctxList[0].scale(dpr, dpr);
     }
     this.render({
       isSubmitHistory: false,
@@ -9514,6 +9547,7 @@ class Draw {
         pageDom.style.height = `${reduceHeight}px`;
         pageDom.height = reduceHeight * dpr;
       }
+      this.ctxList[0].scale(dpr, dpr);
     } else {
       for (let i = 0; i < this.rowList.length; i++) {
         const row = this.rowList[i];
@@ -9601,17 +9635,20 @@ class Draw {
         const preElement = curRow.elementList[j - 1];
         if (element.underline) {
           this.underline.recordFillInfo(ctx, x, y + curRow.height, metrics.width, 0, element.color);
-        } else if (preElement && preElement.underline) {
+        } else if (preElement == null ? void 0 : preElement.underline) {
           this.underline.render(ctx);
         }
         if (element.strikeout) {
           this.strikeout.recordFillInfo(ctx, x, y + curRow.height / 2, metrics.width);
-        } else if (preElement && preElement.strikeout) {
+        } else if (preElement == null ? void 0 : preElement.strikeout) {
           this.strikeout.render(ctx);
         }
         if (element.highlight) {
+          if (preElement && preElement.highlight && preElement.highlight !== element.highlight) {
+            this.highlight.render(ctx);
+          }
           this.highlight.recordFillInfo(ctx, x, y, metrics.width, curRow.height, element.highlight);
-        } else if (preElement && preElement.highlight) {
+        } else if (preElement == null ? void 0 : preElement.highlight) {
           this.highlight.render(ctx);
         }
         const { startIndex: startIndex2, endIndex } = this.range.getRange();
@@ -9681,7 +9718,7 @@ class Draw {
     const ctx = this.ctxList[pageNo];
     this._clearPage(pageNo);
     this.background.render(ctx);
-    this.margin.render(ctx);
+    this.margin.render(ctx, pageNo);
     const index2 = rowList[0].startIndex;
     this._drawRow(ctx, {
       positionList,
@@ -9723,6 +9760,7 @@ class Draw {
   }
   render(payload) {
     var _a;
+    const { pageMode } = this.options;
     const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true } = payload || {};
     let { curIndex } = payload || {};
     const innerWidth = this.getInnerWidth();
@@ -9750,7 +9788,7 @@ class Draw {
       this.ctxList.splice(curPageCount, deleteCount);
       this.pageList.splice(curPageCount, deleteCount).forEach((page) => page.remove());
     }
-    if (isLazy) {
+    if (isLazy && pageMode === PageMode.PAGING) {
       this._lazyRender();
     } else {
       this._immediateRender();