@hufe921/canvas-editor 0.9.73 → 0.9.74

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [0.9.74](https://github.com/Hufe921/canvas-editor/compare/v0.9.73...v0.9.74) (2024-04-19)
+
+
+### Bug Fixes
+
+* control component disabling segmenter ([868a791](https://github.com/Hufe921/canvas-editor/commit/868a79148d8e68ba1b34ddd8d37941e3e26988d7))
+* delete default control color property #513 ([224ead0](https://github.com/Hufe921/canvas-editor/commit/224ead0dff28f333e04bfb7c7ba4068d32670e52)), closes [#513](https://github.com/Hufe921/canvas-editor/issues/513)
+* disable control placeholder selection #511 ([2985d6b](https://github.com/Hufe921/canvas-editor/commit/2985d6b62ee5311a5f8350282f313e9faca95204)), closes [#511](https://github.com/Hufe921/canvas-editor/issues/511)
+
+
+### Features
+
+* add control border #388 ([de06f6c](https://github.com/Hufe921/canvas-editor/commit/de06f6cc9b2d3f37033647cf159bb9c09a432c1b)), closes [#388](https://github.com/Hufe921/canvas-editor/issues/388)
+* add extension property ([5027d73](https://github.com/Hufe921/canvas-editor/commit/5027d730c4522d496ef933830df026960077e660))
+* add security rules to IFrameBlock element ([cdbd1ff](https://github.com/Hufe921/canvas-editor/commit/cdbd1ff4ded52a588d837c3b2cb04fe6168ed51f))
+* add srcdoc property to IFrameBlock element #454 ([6696992](https://github.com/Hufe921/canvas-editor/commit/66969925ac5193b5a2b0e227df247052cf79364f)), closes [#454](https://github.com/Hufe921/canvas-editor/issues/454)
+* control default style #340 ([eee2236](https://github.com/Hufe921/canvas-editor/commit/eee22363d3a0de8333a6b6f8815ef178fbfc3c8d)), closes [#340](https://github.com/Hufe921/canvas-editor/issues/340)
+* record the first cursor position #517 ([0878506](https://github.com/Hufe921/canvas-editor/commit/087850606224290bc6e1992711416ac0acbfa45b)), closes [#517](https://github.com/Hufe921/canvas-editor/issues/517)
+
+
+### Tests
+
+* update block test case ([6d358d1](https://github.com/Hufe921/canvas-editor/commit/6d358d16dc2eb1af309c554c369f30a805451acc))
+
+
+
 ## [0.9.73](https://github.com/Hufe921/canvas-editor/compare/v0.9.72...v0.9.73) (2024-04-12)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.73";
+const version = "0.9.74";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -455,7 +455,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "conceptId",
   "imgDisplay",
   "imgFloatPosition",
-  "textDecoration"
+  "textDecoration",
+  "extension"
 ];
 const TABLE_TD_ZIP_ATTR = [
   "verticalAlign",
@@ -479,6 +480,14 @@ const CONTROL_CONTEXT_ATTR = [
   "controlId",
   "controlComponent"
 ];
+const CONTROL_STYLE_ATTR = [
+  "font",
+  "size",
+  "bold",
+  "highlight",
+  "italic",
+  "strikeout"
+];
 const EDITOR_ELEMENT_CONTEXT_ATTR = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,
@@ -3857,20 +3866,20 @@ function formatElementList(elementList, options) {
       const { editorOptions: { control: controlOption, checkbox: checkboxOption } } = options;
       const controlId = getUUID();
       elementList.splice(i, 1);
-      const thePrePostfixArgs = {};
-      if (editorOptions && editorOptions.control) {
-        thePrePostfixArgs.color = editorOptions.control.bracketColor;
-      }
+      const controlDefaultStyle = pickObject(el.control, CONTROL_STYLE_ATTR);
+      const thePrePostfixArg = __spreadProps(__spreadValues({}, controlDefaultStyle), {
+        color: editorOptions.control.bracketColor
+      });
       const prefixStrList = splitText(prefix || controlOption.prefix);
       for (let p = 0; p < prefixStrList.length; p++) {
         const value2 = prefixStrList[p];
-        elementList.splice(i, 0, __spreadValues({
+        elementList.splice(i, 0, __spreadProps(__spreadValues({}, thePrePostfixArg), {
           controlId,
           value: value2,
           type: el.type,
           control: el.control,
           controlComponent: ControlComponent.PREFIX
-        }, thePrePostfixArgs));
+        }));
         i++;
       }
       if (value && value.length || type === ControlType.CHECKBOX || type === ControlType.SELECT && code && (!value || !value.length)) {
@@ -3898,7 +3907,7 @@ function formatElementList(elementList, options) {
               for (let e = 0; e < valueStrList.length; e++) {
                 const value2 = valueStrList[e];
                 const isLastLetter = e === valueStrList.length - 1;
-                elementList.splice(i, 0, __spreadProps(__spreadValues({}, valueStyleList[valueStyleIndex]), {
+                elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlDefaultStyle), valueStyleList[valueStyleIndex]), {
                   controlId,
                   value: value2 === "\n" ? ZERO : value2,
                   letterSpacing: isLastLetter ? checkboxOption.gap : 0,
@@ -3929,7 +3938,7 @@ function formatElementList(elementList, options) {
           for (let v = 0; v < valueList.length; v++) {
             const element = valueList[v];
             const value2 = element.value;
-            elementList.splice(i, 0, __spreadProps(__spreadValues({}, element), {
+            elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlDefaultStyle), element), {
               controlId,
               value: value2 === "\n" ? ZERO : value2,
               type: element.type || ElementType.TEXT,
@@ -3940,33 +3949,32 @@ function formatElementList(elementList, options) {
           }
         }
       } else if (placeholder) {
-        const thePlaceholderArgs = {};
-        if (editorOptions && editorOptions.control) {
-          thePlaceholderArgs.color = editorOptions.control.placeholderColor;
-        }
+        const thePlaceholderArgs = __spreadProps(__spreadValues({}, controlDefaultStyle), {
+          color: editorOptions.control.placeholderColor
+        });
         const placeholderStrList = splitText(placeholder);
         for (let p = 0; p < placeholderStrList.length; p++) {
           const value2 = placeholderStrList[p];
-          elementList.splice(i, 0, __spreadValues({
+          elementList.splice(i, 0, __spreadProps(__spreadValues({}, thePlaceholderArgs), {
             controlId,
             value: value2 === "\n" ? ZERO : value2,
             type: el.type,
             control: el.control,
             controlComponent: ControlComponent.PLACEHOLDER
-          }, thePlaceholderArgs));
+          }));
           i++;
         }
       }
       const postfixStrList = splitText(postfix || controlOption.postfix);
       for (let p = 0; p < postfixStrList.length; p++) {
         const value2 = postfixStrList[p];
-        elementList.splice(i, 0, __spreadValues({
+        elementList.splice(i, 0, __spreadProps(__spreadValues({}, thePrePostfixArg), {
           controlId,
           value: value2,
           type: el.type,
           control: el.control,
           controlComponent: ControlComponent.POSTFIX
-        }, thePrePostfixArgs));
+        }));
         i++;
       }
       i--;
@@ -4172,7 +4180,8 @@ function zipElementList(payload) {
     } else if (element.controlId) {
       const controlId = element.controlId;
       if (controlId) {
-        const control = element.control;
+        const controlDefaultStyle = pickObject(element, CONTROL_STYLE_ATTR);
+        const control = __spreadValues(__spreadValues({}, element.control), controlDefaultStyle);
         const controlElement = {
           type: ElementType.CONTROL,
           value: "",
@@ -5724,6 +5733,12 @@ function mousemove(evt, host) {
     }
     if (start === end)
       return;
+    const elementList = draw.getElementList();
+    const startElement = elementList[start + 1];
+    const endElement = elementList[end];
+    if ((startElement == null ? void 0 : startElement.controlComponent) === ControlComponent.PLACEHOLDER && (endElement == null ? void 0 : endElement.controlComponent) === ControlComponent.PLACEHOLDER && startElement.controlId === endElement.controlId) {
+      return;
+    }
     rangeManager.setRange(start, end);
   }
   draw.render({
@@ -6723,7 +6738,7 @@ function getWordRangeBySegmenter(host) {
   const paragraphInfo = rangeManager.getRangeParagraphInfo();
   if (!paragraphInfo)
     return null;
-  const paragraphText = ((_a = paragraphInfo == null ? void 0 : paragraphInfo.elementList) == null ? void 0 : _a.map((e) => !e.type || TEXTLIKE_ELEMENT_TYPE.includes(e.type) && e.controlComponent !== ControlComponent.CHECKBOX ? e.value : ZERO).join("")) || "";
+  const paragraphText = ((_a = paragraphInfo == null ? void 0 : paragraphInfo.elementList) == null ? void 0 : _a.map((e) => !e.type || e.type !== ElementType.CONTROL && TEXTLIKE_ELEMENT_TYPE.includes(e.type) ? e.value : ZERO).join("")) || "";
   if (!paragraphText)
     return null;
   const cursorStartIndex = cursorPosition.index;
@@ -7239,6 +7254,9 @@ class HistoryManager {
   isCanRedo() {
     return !!this.redoStack.length;
   }
+  isStackEmpty() {
+    return !this.undoStack.length && !this.redoStack.length;
+  }
   recovery() {
     this.undoStack = [];
     this.redoStack = [];
@@ -8020,6 +8038,7 @@ class RangeManager {
     this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
   }
   setRangeStyle() {
+    var _a;
     const rangeStyleChangeListener = this.listener.rangeStyleChange;
     const isSubscribeRangeStyleChange = this.eventBus.isSubscribe("rangeStyleChange");
     if (!rangeStyleChangeListener && !isSubscribeRangeStyleChange)
@@ -8046,8 +8065,8 @@ class RangeManager {
     const bold = !~curElementList.findIndex((el) => !el.bold);
     const italic = !~curElementList.findIndex((el) => !el.italic);
     const underline = !~curElementList.findIndex((el) => {
-      var _a;
-      return !el.underline && !((_a = el.control) == null ? void 0 : _a.underline);
+      var _a2;
+      return !el.underline && !((_a2 = el.control) == null ? void 0 : _a2.underline);
     });
     const strikeout = !~curElementList.findIndex((el) => !el.strikeout);
     const color = curElement.color || null;
@@ -8063,6 +8082,7 @@ class RangeManager {
     const undo = this.historyManager.isCanUndo();
     const redo = this.historyManager.isCanRedo();
     const groupIds = curElement.groupIds || null;
+    const extension = (_a = curElement.extension) != null ? _a : null;
     const rangeStyle = {
       type,
       undo,
@@ -8083,7 +8103,8 @@ class RangeManager {
       listType,
       listStyle,
       groupIds,
-      textDecoration
+      textDecoration,
+      extension
     };
     if (rangeStyleChangeListener) {
       rangeStyleChangeListener(rangeStyle);
@@ -8123,7 +8144,8 @@ class RangeManager {
       listType: null,
       listStyle: null,
       groupIds: null,
-      textDecoration: null
+      textDecoration: null,
+      extension: null
     };
     if (rangeStyleChangeListener) {
       rangeStyleChangeListener(rangeStyle);
@@ -10085,6 +10107,47 @@ class ControlSearch {
     ctx.restore();
   }
 }
+class ControlBorder {
+  constructor(draw) {
+    __publicField(this, "borderRect");
+    __publicField(this, "options");
+    this.borderRect = this.clearBorderInfo();
+    this.options = draw.getOptions();
+  }
+  clearBorderInfo() {
+    this.borderRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    return this.borderRect;
+  }
+  recordBorderInfo(x, y, width, height) {
+    const isFirstRecord = !this.borderRect.width;
+    if (isFirstRecord) {
+      this.borderRect.x = x;
+      this.borderRect.y = y;
+      this.borderRect.height = height;
+    }
+    this.borderRect.width += width;
+  }
+  render(ctx) {
+    if (!this.borderRect.width)
+      return;
+    const { scale, control: { borderWidth, borderColor } } = this.options;
+    const { x, y, width, height } = this.borderRect;
+    ctx.save();
+    ctx.translate(0, 1 * scale);
+    ctx.lineWidth = borderWidth * scale;
+    ctx.strokeStyle = borderColor;
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.stroke();
+    ctx.restore();
+    this.clearBorderInfo();
+  }
+}
 class SelectControl {
   constructor(element, control) {
     __publicField(this, "element");
@@ -10227,7 +10290,9 @@ class SelectControl {
     if (!valueSet)
       return;
     const elementList = context.elementList || this.control.getElementList();
-    const styleElement = pickObject(this.getValue(context)[0], EDITOR_ELEMENT_STYLE_ATTR);
+    const range = context.range || this.control.getRange();
+    const valueElement = this.getValue(context)[0];
+    const styleElement = valueElement ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR) : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR);
     const prefixIndex = this.clearSelect(context);
     if (!~prefixIndex)
       return;
@@ -10360,7 +10425,11 @@ class TextControl {
       this.control.removePlaceholder(startIndex, context);
     }
     const startElement = elementList[startIndex];
-    const anchorElement = startElement.type && !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type) || startElement.controlComponent === ControlComponent.PREFIX ? pickObject(startElement, ["control", "controlId"]) : omitObject(startElement, ["type"]);
+    const anchorElement = startElement.type && !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type) || startElement.controlComponent === ControlComponent.PREFIX ? pickObject(startElement, [
+      "control",
+      "controlId",
+      ...CONTROL_STYLE_ATTR
+    ]) : omitObject(startElement, ["type"]);
     const start = range.startIndex + 1;
     for (let i = 0; i < data2.length; i++) {
       const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
@@ -10461,6 +10530,7 @@ class TextControl {
 }
 class Control {
   constructor(draw) {
+    __publicField(this, "controlBorder");
     __publicField(this, "draw");
     __publicField(this, "range");
     __publicField(this, "listener");
@@ -10469,6 +10539,7 @@ class Control {
     __publicField(this, "options");
     __publicField(this, "controlOptions");
     __publicField(this, "activeControl");
+    this.controlBorder = new ControlBorder(draw);
     this.draw = draw;
     this.range = draw.getRange();
     this.listener = draw.getListener();
@@ -11091,6 +11162,12 @@ class Control {
     }
     return zipElementList(controlElementList);
   }
+  recordBorderInfo(x, y, width, height) {
+    this.controlBorder.recordBorderInfo(x, y, width, height);
+  }
+  drawBorder(ctx) {
+    this.controlBorder.render(ctx);
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -12229,25 +12306,36 @@ const _IFrameBlock = class {
     __publicField(this, "element");
     this.element = element;
   }
+  _defineIframeProperties(iframeWindow) {
+    Object.defineProperties(iframeWindow, {
+      parent: {
+        get: () => null
+      },
+      __POWERED_BY_CANVAS_EDITOR__: {
+        get: () => true
+      }
+    });
+  }
   render(blockItemContainer) {
-    var _a;
+    var _a, _b;
     const block = this.element.block;
     const iframe = document.createElement("iframe");
+    iframe.setAttribute("data-id", this.element.id);
     iframe.sandbox.add(..._IFrameBlock.sandbox);
     iframe.style.border = "none";
     iframe.style.width = "100%";
     iframe.style.height = "100%";
-    iframe.src = ((_a = block.iframeBlock) == null ? void 0 : _a.src) || "";
+    if ((_a = block.iframeBlock) == null ? void 0 : _a.src) {
+      iframe.src = block.iframeBlock.src;
+    } else if ((_b = block.iframeBlock) == null ? void 0 : _b.srcdoc) {
+      iframe.srcdoc = block.iframeBlock.srcdoc;
+    }
     blockItemContainer.append(iframe);
+    this._defineIframeProperties(iframe.contentWindow);
   }
 };
 let IFrameBlock = _IFrameBlock;
-__publicField(IFrameBlock, "sandbox", [
-  "allow-forms",
-  "allow-scripts",
-  "allow-same-origin",
-  "allow-popups"
-]);
+__publicField(IFrameBlock, "sandbox", ["allow-scripts", "allow-same-origin"]);
 class VideoBlock {
   constructor(element) {
     __publicField(this, "element");
@@ -13374,7 +13462,8 @@ class Draw {
     this.printModeData = null;
     this.render({
       isInit: true,
-      isSetCursor: false
+      isSetCursor: false,
+      isFirstRender: true
     });
   }
   getLetterReg() {
@@ -13991,7 +14080,8 @@ class Draw {
     });
     this.historyManager.recovery();
     this.render({
-      isSetCursor: false
+      isSetCursor: false,
+      isFirstRender: true
     });
   }
   setEditorData(payload) {
@@ -14058,6 +14148,10 @@ class Draw {
   getElementSize(el) {
     return el.actualSize || el.size || this.options.defaultSize;
   }
+  getElementRowMargin(el) {
+    const { defaultBasicRowMarginHeight, defaultRowMargin, scale } = this.options;
+    return defaultBasicRowMarginHeight * (el.rowMargin || defaultRowMargin) * scale;
+  }
   computeRowList(payload) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { innerWidth, elementList, isPagingMode = false } = payload;
@@ -14492,11 +14586,11 @@ class Draw {
     }
   }
   drawRow(ctx, payload) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     this._drawHighlight(ctx, payload);
     const { rowList, pageNo, elementList, positionList, startIndex, zone: zone2 } = payload;
     const isPrintMode = this.mode === EditorMode.PRINT;
-    const { scale, tdPadding, defaultBasicRowMarginHeight, defaultRowMargin, group: group2 } = this.options;
+    const { scale, tdPadding, group: group2 } = this.options;
     const { isCrossRowCol, tableId } = this.range.getRange();
     let index2 = startIndex;
     for (let i = 0; i < rowList.length; i++) {
@@ -14574,11 +14668,20 @@ class Draw {
             this.textParticle.complete();
           }
         }
-        if (element.underline || ((_a = element.control) == null ? void 0 : _a.underline)) {
+        if ((_a = element.control) == null ? void 0 : _a.border) {
+          if (((_b = preElement == null ? void 0 : preElement.control) == null ? void 0 : _b.border) && preElement.controlId !== element.controlId) {
+            this.control.drawBorder(ctx);
+          }
+          const rowMargin = this.getElementRowMargin(element);
+          this.control.recordBorderInfo(x, y + rowMargin, element.metrics.width, curRow.height - 2 * rowMargin);
+        } else if ((_c = preElement == null ? void 0 : preElement.control) == null ? void 0 : _c.border) {
+          this.control.drawBorder(ctx);
+        }
+        if (element.underline || ((_d = element.control) == null ? void 0 : _d.underline)) {
           if ((preElement == null ? void 0 : preElement.type) === ElementType.SUPERSCRIPT && element.type !== ElementType.SUPERSCRIPT || (preElement == null ? void 0 : preElement.type) === ElementType.SUBSCRIPT && element.type !== ElementType.SUBSCRIPT) {
             this.underline.render(ctx);
           }
-          const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin) * scale;
+          const rowMargin = this.getElementRowMargin(element);
           const offsetX = element.left || 0;
           let offsetY2 = 0;
           if (element.type === ElementType.SUBSCRIPT) {
@@ -14587,8 +14690,8 @@ class Draw {
             offsetY2 = this.superscriptParticle.getOffsetY(element);
           }
           const color = element.controlComponent === ControlComponent.PLACEHOLDER ? void 0 : element.color;
-          this.underline.recordFillInfo(ctx, x - offsetX, y + curRow.height - rowMargin + offsetY2, metrics.width + offsetX, 0, color, (_b = element.textDecoration) == null ? void 0 : _b.style);
-        } else if ((preElement == null ? void 0 : preElement.underline) || ((_c = preElement == null ? void 0 : preElement.control) == null ? void 0 : _c.underline)) {
+          this.underline.recordFillInfo(ctx, x - offsetX, y + curRow.height - rowMargin + offsetY2, metrics.width + offsetX, 0, color, (_e = element.textDecoration) == null ? void 0 : _e.style);
+        } else if ((preElement == null ? void 0 : preElement.underline) || ((_f = preElement == null ? void 0 : preElement.control) == null ? void 0 : _f.underline)) {
           this.underline.render(ctx);
         }
         if (element.strikeout) {
@@ -14661,6 +14764,7 @@ class Draw {
         this.listParticle.drawListStyle(ctx, curRow, positionList[curRow.startIndex]);
       }
       this.textParticle.complete();
+      this.control.drawBorder(ctx);
       this.underline.render(ctx);
       this.strikeout.render(ctx);
       this.group.render(ctx);
@@ -14786,7 +14890,7 @@ class Draw {
   render(payload) {
     var _a;
     const { header, footer } = this.options;
-    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false, isSourceHistory = false } = payload || {};
+    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false, isSourceHistory = false, isFirstRender = false } = payload || {};
     let { curIndex } = payload || {};
     const innerWidth = this.getInnerWidth();
     const isPagingMode = this.getIsPagingMode();
@@ -14849,7 +14953,7 @@ class Draw {
       }
       this.cursor.drawCursor();
     }
-    if (isSubmitHistory) {
+    if (isSubmitHistory && !isFirstRender || curIndex !== void 0 && this.historyManager.isStackEmpty()) {
       const oldElementList = getSlimCloneElementList(this.elementList);
       const oldHeaderElementList = getSlimCloneElementList(this.header.getElementList());
       const oldFooterElementList = getSlimCloneElementList(this.footer.getElementList());
@@ -18058,7 +18162,9 @@ const defaultControlOption = {
   placeholderColor: "#9c9b9b",
   bracketColor: "#000000",
   prefix: "{",
-  postfix: "}"
+  postfix: "}",
+  borderWidth: 1,
+  borderColor: "#000000"
 };
 const defaultCheckboxOption = {
   width: 14,