@hufe921/canvas-editor 0.9.12 → 0.9.13

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.12";
+const version = "0.9.13";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -187,6 +187,25 @@ const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.CONTROL,
   ElementType.DATE
 ];
+var ControlType;
+(function(ControlType2) {
+  ControlType2["TEXT"] = "text";
+  ControlType2["SELECT"] = "select";
+  ControlType2["CHECKBOX"] = "checkbox";
+})(ControlType || (ControlType = {}));
+var ControlComponent;
+(function(ControlComponent2) {
+  ControlComponent2["PREFIX"] = "prefix";
+  ControlComponent2["POSTFIX"] = "postfix";
+  ControlComponent2["PLACEHOLDER"] = "placeholder";
+  ControlComponent2["VALUE"] = "value";
+  ControlComponent2["CHECKBOX"] = "checkbox";
+})(ControlComponent || (ControlComponent = {}));
+var ImageDisplay;
+(function(ImageDisplay2) {
+  ImageDisplay2["INLINE"] = "inline";
+  ImageDisplay2["BLOCK"] = "block";
+})(ImageDisplay || (ImageDisplay = {}));
 class ImageParticle {
   constructor(draw) {
     __publicField(this, "options");
@@ -3178,25 +3197,6 @@ const defaultControlOption = {
   prefix: "{",
   postfix: "}"
 };
-var ControlType;
-(function(ControlType2) {
-  ControlType2["TEXT"] = "text";
-  ControlType2["SELECT"] = "select";
-  ControlType2["CHECKBOX"] = "checkbox";
-})(ControlType || (ControlType = {}));
-var ControlComponent;
-(function(ControlComponent2) {
-  ControlComponent2["PREFIX"] = "prefix";
-  ControlComponent2["POSTFIX"] = "postfix";
-  ControlComponent2["PLACEHOLDER"] = "placeholder";
-  ControlComponent2["VALUE"] = "value";
-  ControlComponent2["CHECKBOX"] = "checkbox";
-})(ControlComponent || (ControlComponent = {}));
-var ImageDisplay;
-(function(ImageDisplay2) {
-  ImageDisplay2["INLINE"] = "inline";
-  ImageDisplay2["BLOCK"] = "block";
-})(ImageDisplay || (ImageDisplay = {}));
 function formatElementList(elementList, options) {
   var _a;
   const { isHandleFirstElement, editorOptions } = __spreadValues({
@@ -3580,7 +3580,7 @@ function writeClipboardItem(text, html) {
 function writeElementList(elementList, options) {
   const clipboardDom = document.createElement("div");
   function buildDomFromElementList(payload) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e];
       if (element.type === ElementType.TABLE) {
@@ -3593,6 +3593,8 @@ function writeElementList(elementList, options) {
             const tdDom = document.createElement("td");
             tdDom.style.border = "1px solid";
             const td = tr.tdList[d];
+            tdDom.colSpan = td.colspan;
+            tdDom.rowSpan = td.rowspan;
             tdDom.innerText = ((_a = td.value[0]) == null ? void 0 : _a.value) || "";
             trDom.append(tdDom);
           }
@@ -3617,12 +3619,19 @@ function writeElementList(elementList, options) {
       } else if (element.type === ElementType.SEPARATOR) {
         const hr = document.createElement("hr");
         clipboardDom.append(hr);
+      } else if (element.type === ElementType.CHECKBOX) {
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        if ((_b = element.checkbox) == null ? void 0 : _b.value) {
+          checkbox.setAttribute("checked", "true");
+        }
+        clipboardDom.append(checkbox);
       } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
         let text2 = "";
         if (element.type === ElementType.CONTROL) {
-          text2 = ((_c = (_b = element.control.value) == null ? void 0 : _b[0]) == null ? void 0 : _c.value) || "";
+          text2 = ((_d = (_c = element.control.value) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "";
         } else if (element.type === ElementType.DATE) {
-          text2 = ((_d = element.valueList) == null ? void 0 : _d.map((v) => v.value).join("")) || "";
+          text2 = ((_e = element.valueList) == null ? void 0 : _e.map((v) => v.value).join("")) || "";
         } else {
           text2 = element.value;
         }
@@ -3660,13 +3669,14 @@ function writeElementList(elementList, options) {
     return;
   writeClipboardItem(text, html);
 }
-function getElementListByHTML(htmlText) {
+function getElementListByHTML(htmlText, options) {
   const elementList = [];
   function findTextNode(dom) {
+    var _a;
     if (dom.nodeType === 3) {
       const style = window.getComputedStyle(dom.parentNode);
       const value = dom.textContent;
-      if (value) {
+      if (value && ((_a = dom.parentNode) == null ? void 0 : _a.nodeName) !== "STYLE") {
         elementList.push({
           value,
           color: style.color,
@@ -3696,6 +3706,72 @@ function getElementListByHTML(htmlText) {
               url: aElement.href
             });
           }
+        } else if (node.nodeName === "HR") {
+          elementList.push({
+            value: "\n",
+            type: ElementType.SEPARATOR
+          });
+        } else if (node.nodeName === "IMG") {
+          const { src, width, height } = node;
+          if (src && width && height) {
+            elementList.push({
+              width,
+              height,
+              value: src,
+              type: ElementType.IMAGE
+            });
+          }
+        } else if (node.nodeName === "TABLE") {
+          const tableElement = node;
+          const element = {
+            type: ElementType.TABLE,
+            value: "\n",
+            colgroup: [],
+            trList: []
+          };
+          let tdCount = 0;
+          tableElement.querySelectorAll("tr").forEach((trElement, trIndex) => {
+            const trHeightStr = window.getComputedStyle(trElement).height.replace("px", "");
+            const tr = {
+              height: Number(trHeightStr),
+              tdList: []
+            };
+            trElement.querySelectorAll("td").forEach((tdElement) => {
+              const colspan = tdElement.colSpan;
+              const rowspan = tdElement.rowSpan;
+              if (trIndex === 0) {
+                tdCount += colspan;
+              }
+              const td = {
+                colspan,
+                rowspan,
+                value: [{
+                  value: tdElement.innerText
+                }]
+              };
+              tr.tdList.push(td);
+            });
+            element.trList.push(tr);
+          });
+          if (tdCount) {
+            const width = Math.ceil(options.innerWidth / tdCount);
+            for (let i = 0; i < tdCount; i++) {
+              element.colgroup.push({
+                width
+              });
+            }
+          }
+          if (element.colgroup) {
+            elementList.push(element);
+          }
+        } else if (node.nodeName === "INPUT" && node.type === ControlComponent.CHECKBOX) {
+          elementList.push({
+            type: ElementType.CHECKBOX,
+            value: "",
+            checkbox: {
+              value: node.checked
+            }
+          });
         } else {
           findTextNode(node);
           if (node.nodeType === 1 && n !== childNodes.length - 1) {
@@ -3778,7 +3854,9 @@ class CursorAgent {
         }
         if (item.type === "text/html" && isHTML) {
           item.getAsString((htmlText) => {
-            const elementList = getElementListByHTML(htmlText);
+            const elementList = getElementListByHTML(htmlText, {
+              innerWidth: this.draw.getOriginalInnerWidth()
+            });
             this.draw.insertElementList(elementList);
           });
         }
@@ -4392,7 +4470,7 @@ function keydown(evt, host) {
   } else if (evt.key === KeyMap.Right) {
     if (isReadonly)
       return;
-    if (index2 < positionList.length - 1) {
+    if (index2 < positionList.length) {
       const curIndex = endIndex + 1;
       let anchorStartIndex = curIndex;
       let anchorEndIndex = curIndex;
@@ -11375,11 +11453,11 @@ class ContextMenu {
     this._addEvent();
   }
   _addEvent() {
-    document.addEventListener("contextmenu", this._proxyContextMenuEvent);
+    this.container.addEventListener("contextmenu", this._proxyContextMenuEvent);
     document.addEventListener("mousedown", this._handleEffect);
   }
   removeEvent() {
-    document.removeEventListener("contextmenu", this._proxyContextMenuEvent);
+    this.container.removeEventListener("contextmenu", this._proxyContextMenuEvent);
     document.removeEventListener("mousedown", this._handleEffect);
   }
   _getContext() {