@hufe921/canvas-editor 0.9.34 → 0.9.35

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [0.9.35](https://github.com/Hufe921/canvas-editor/compare/v0.9.34...v0.9.35) (2023-05-31)
+
+
+### Chores
+
+* add CRDT CSpell word ([ef31552](https://github.com/Hufe921/canvas-editor/commit/ef315526be244c210b2a2a220dd3bed986660d75))
+
+
+### Documentation
+
+* starting page number option ([618cb47](https://github.com/Hufe921/canvas-editor/commit/618cb47f77f2aed05d4ca72135ea5312b6d26b00))
+* table cell background color ([9225bef](https://github.com/Hufe921/canvas-editor/commit/9225bef99192d8c4848536d973bb2467ea205f27))
+* update next features ([c6ea0a6](https://github.com/Hufe921/canvas-editor/commit/c6ea0a655c997645cda6df7ced4377707973680f))
+
+
+### Features
+
+* copy and paste sub and sup elements ([a500402](https://github.com/Hufe921/canvas-editor/commit/a500402dd401c6eac55222a366f5fc596c27d7c3))
+* copy and paste table cell background color ([c97c6ef](https://github.com/Hufe921/canvas-editor/commit/c97c6eff4047a91e68079cc9b228f41e02bef1ab))
+* optimize paste title ([bf52e25](https://github.com/Hufe921/canvas-editor/commit/bf52e2588b3af426382334d45d16d1a33510fde1))
+* starting page number option ([bfc61a8](https://github.com/Hufe921/canvas-editor/commit/bfc61a8a06b6c2c09fd968767f2a6ccbe280fe55))
+* table cell background color ([dbcab3b](https://github.com/Hufe921/canvas-editor/commit/dbcab3b48557f5a4ba77b9e6ec40b7ac8d36cc40))
+* unordered list default style ([c8b2a7e](https://github.com/Hufe921/canvas-editor/commit/c8b2a7e59fdd97ac268b0a38e80bac98dfd797ce))
+
+
+
 ## [0.9.34](https://github.com/Hufe921/canvas-editor/compare/v0.9.33...v0.9.34) (2023-05-16)
 
 

package/README.md

@@ -28,11 +28,11 @@ new Editor(document.querySelector(".canvas-editor"), [
 
 ## next features
 
-1. improve page number
-2. improve list and title
-3. improve performance
-4. control rules
-5. table paging
+1. improve list and title
+2. improve performance
+3. control rules
+4. table paging
+5. [CRDT](https://github.com/Hufe921/canvas-editor/tree/feature/CRDT)
 
 ## snapshot
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.34";
+const version = "0.9.35";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -3432,8 +3432,10 @@ function formatElementList(elementList, options) {
         const titleOptions = editorOptions.title;
         for (let v = 0; v < valueList.length; v++) {
           const value = valueList[v];
-          value.titleId = titleId;
-          value.level = el.level;
+          if (el.level) {
+            value.titleId = titleId;
+            value.level = el.level;
+          }
           if (isTextLikeElement(value)) {
             if (!value.size) {
               value.size = titleOptions[titleSizeMapping[value.level]];
@@ -3762,6 +3764,9 @@ function zipElementList(payload) {
             if (td.verticalAlign) {
               zipTd.verticalAlign = td.verticalAlign;
             }
+            if (td.backgroundColor) {
+              zipTd.backgroundColor = td.backgroundColor;
+            }
             tr.tdList[d] = zipTd;
           }
         }
@@ -3834,7 +3839,7 @@ function zipElementList(payload) {
       element = controlElement;
     }
     const pickElement = pickElementAttr(element);
-    if (!element.type || element.type === ElementType.TEXT) {
+    if (!element.type || element.type === ElementType.TEXT || element.type === ElementType.SUBSCRIPT || element.type === ElementType.SUPERSCRIPT) {
       while (e < elementList.length) {
         const nextElement = elementList[e + 1];
         e++;
@@ -3879,12 +3884,15 @@ function getAnchorElement(elementList, anchorIndex) {
   const anchorNextElement = elementList[anchorIndex + 1];
   return !anchorElement.listId && anchorElement.value === ZERO && anchorNextElement && anchorNextElement.value !== ZERO ? anchorNextElement : anchorElement;
 }
-function formatElementContext(sourceElementList, formatElementList2, anchorIndex) {
+function formatElementContext(sourceElementList, formatElementList2, anchorIndex, options) {
   const copyElement = getAnchorElement(sourceElementList, anchorIndex);
   if (!copyElement)
     return;
+  const { isBreakWhenWrap = false } = options || {};
   for (let e = 0; e < formatElementList2.length; e++) {
     const targetElement = formatElementList2[e];
+    if (isBreakWhenWrap && !copyElement.listId && /^\n/.test(targetElement.value))
+      break;
     if (!copyElement.listId && targetElement.type === ElementType.LIST)
       continue;
     if (targetElement.valueList && targetElement.valueList.length) {
@@ -3927,8 +3935,15 @@ function writeClipboardItem(text, html) {
   }
 }
 function convertElementToDom(element, options) {
-  const isBlock = element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT;
-  const dom = document.createElement(isBlock ? "p" : "span");
+  let tagName = "span";
+  if (element.type === ElementType.SUPERSCRIPT) {
+    tagName = "sup";
+  } else if (element.type === ElementType.SUBSCRIPT) {
+    tagName = "sub";
+  } else if (element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT) {
+    tagName = "p";
+  }
+  const dom = document.createElement(tagName);
   dom.style.fontFamily = element.font || options.defaultFont;
   if (element.rowFlex) {
     const isAlignment = element.rowFlex === RowFlex.ALIGNMENT;
@@ -3970,6 +3985,9 @@ function writeElementList(elementList, options) {
             tdDom.rowSpan = td.rowspan;
             const childDom = buildDomFromElementList(zipElementList(td.value));
             tdDom.innerHTML = childDom.innerHTML;
+            if (td.backgroundColor) {
+              tdDom.style.backgroundColor = td.backgroundColor;
+            }
             trDom.append(tdDom);
           }
           tableDom.append(trDom);
@@ -4071,28 +4089,41 @@ function writeElementList(elementList, options) {
     return;
   writeClipboardItem(text, html);
 }
+function convertTextNodeToElement(textNode) {
+  if (!textNode || textNode.nodeType !== 3)
+    return null;
+  const parentNode = textNode.parentNode;
+  const rowFlex = getElementRowFlex(parentNode);
+  const value = textNode.textContent;
+  const style = window.getComputedStyle(parentNode);
+  if (!value || parentNode.nodeName === "STYLE")
+    return null;
+  const element = {
+    value,
+    color: style.color,
+    bold: Number(style.fontWeight) > 500,
+    italic: style.fontStyle.includes("italic"),
+    size: Math.floor(parseFloat(style.fontSize))
+  };
+  if (parentNode.nodeName === "SUB") {
+    element.type = ElementType.SUBSCRIPT;
+  } else if (parentNode.nodeName === "SUP") {
+    element.type = ElementType.SUPERSCRIPT;
+  }
+  if (rowFlex !== RowFlex.LEFT) {
+    element.rowFlex = rowFlex;
+  }
+  if (style.backgroundColor !== "rgba(0, 0, 0, 0)") {
+    element.highlight = style.backgroundColor;
+  }
+  return element;
+}
 function getElementListByHTML(htmlText, options) {
   const elementList = [];
   function findTextNode(dom) {
     if (dom.nodeType === 3) {
-      const parentNode = dom.parentNode;
-      const rowFlex = getElementRowFlex(parentNode);
-      const value = dom.textContent;
-      const style = window.getComputedStyle(parentNode);
-      if (value && parentNode.nodeName !== "STYLE") {
-        const element = {
-          value,
-          color: style.color,
-          bold: Number(style.fontWeight) > 500,
-          italic: style.fontStyle.includes("italic"),
-          size: Math.floor(Number(style.fontSize.replace("px", "")))
-        };
-        if (rowFlex !== RowFlex.LEFT) {
-          element.rowFlex = rowFlex;
-        }
-        if (style.backgroundColor !== "rgba(0, 0, 0, 0)") {
-          element.highlight = style.backgroundColor;
-        }
+      const element = convertTextNodeToElement(dom);
+      if (element) {
         elementList.push(element);
       }
     } else if (dom.nodeType === 1) {
@@ -4193,6 +4224,9 @@ function getElementListByHTML(htmlText, options) {
                 rowspan: tableCell.rowSpan,
                 value: valueList
               };
+              if (tableCell.style.backgroundColor) {
+                td.backgroundColor = tableCell.style.backgroundColor;
+              }
               tr.tdList.push(td);
             });
             if (tr.tdList.length) {
@@ -4312,6 +4346,8 @@ class CursorAgent {
                 let start = 0;
                 while (start < pasteElementList.length) {
                   const pasteElement = pasteElementList[start];
+                  if (anchorElement.titleId && /^\n/.test(pasteElement.value))
+                    break;
                   if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement.type)) {
                     pasteElementList.splice(start, 1);
                     if (pasteElement.valueList) {
@@ -4328,7 +4364,9 @@ class CursorAgent {
                   start++;
                 }
               }
-              formatElementContext(elementList, pasteElementList, startIndex);
+              formatElementContext(elementList, pasteElementList, startIndex, {
+                isBreakWhenWrap: true
+              });
             }
             this.draw.insertElementList(pasteElementList);
           });
@@ -7007,7 +7045,9 @@ const defaultPageNumberOption = {
   rowFlex: RowFlex.CENTER,
   format: FORMAT_PLACEHOLDER.PAGE_NO,
   numberType: NumberType.ARABIC,
-  disabled: false
+  disabled: false,
+  startPageNo: 1,
+  fromPageNo: 0
 };
 class PageNumber {
   constructor(draw) {
@@ -7017,17 +7057,19 @@ class PageNumber {
     this.options = draw.getOptions();
   }
   render(ctx, pageNo) {
-    const { pageNumber: { size, font, color, rowFlex, numberType, format }, scale, pageMode } = this.options;
+    const { scale, pageMode, pageNumber: { size, font, color, rowFlex, numberType, format, startPageNo, fromPageNo } } = this.options;
+    if (pageNo < fromPageNo)
+      return;
     let text = format;
     const pageNoReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_NO);
     if (pageNoReg.test(text)) {
-      const realPageNo = pageNo + 1;
+      const realPageNo = pageNo + startPageNo - fromPageNo;
       const pageNoText = numberType === NumberType.CHINESE ? convertNumberToChinese(realPageNo) : `${realPageNo}`;
       text = text.replace(pageNoReg, pageNoText);
     }
     const pageCountReg = new RegExp(FORMAT_PLACEHOLDER.PAGE_COUNT);
     if (pageCountReg.test(text)) {
-      const pageCount = this.draw.getPageCount();
+      const pageCount = this.draw.getPageCount() - fromPageNo;
       const pageCountText = numberType === NumberType.CHINESE ? convertNumberToChinese(pageCount) : `${pageCount}`;
       text = text.replace(pageCountReg, pageCountText);
     }
@@ -7190,8 +7232,10 @@ class SelectionObserver {
 }
 class TableParticle {
   constructor(draw) {
+    __publicField(this, "draw");
     __publicField(this, "range");
     __publicField(this, "options");
+    this.draw = draw;
     this.range = draw.getRange();
     this.options = draw.getOptions();
   }
@@ -7211,7 +7255,45 @@ class TableParticle {
     }
     return trList;
   }
-  _drawBorder(payload) {
+  getRangeRowCol() {
+    const { isTable, index: index2, trIndex, tdIndex } = this.draw.getPosition().getPositionContext();
+    if (!isTable)
+      return null;
+    const { isCrossRowCol, startTdIndex, endTdIndex, startTrIndex, endTrIndex } = this.range.getRange();
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    if (!isCrossRowCol) {
+      return [[curTrList[trIndex].tdList[tdIndex]]];
+    }
+    let startTd = curTrList[startTrIndex].tdList[startTdIndex];
+    let endTd = curTrList[endTrIndex].tdList[endTdIndex];
+    if (startTd.x > endTd.x || startTd.y > endTd.y) {
+      [startTd, endTd] = [endTd, startTd];
+    }
+    const startColIndex = startTd.colIndex;
+    const endColIndex = endTd.colIndex + (endTd.colspan - 1);
+    const startRowIndex = startTd.rowIndex;
+    const endRowIndex = endTd.rowIndex + (endTd.rowspan - 1);
+    const rowCol = [];
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      const tdList = [];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        const tdColIndex = td.colIndex;
+        const tdRowIndex = td.rowIndex;
+        if (tdColIndex >= startColIndex && tdColIndex <= endColIndex && tdRowIndex >= startRowIndex && tdRowIndex <= endRowIndex) {
+          tdList.push(td);
+        }
+      }
+      if (tdList.length) {
+        rowCol.push(tdList);
+      }
+    }
+    return rowCol.length ? rowCol : null;
+  }
+  _drawOuterBorder(payload) {
     const { ctx, startX, startY, width, height, isDrawFullBorder } = payload;
     ctx.beginPath();
     const x = Math.round(startX);
@@ -7227,6 +7309,66 @@ class TableParticle {
     ctx.stroke();
     ctx.translate(-0.5, -0.5);
   }
+  _drawBorder(ctx, element, startX, startY) {
+    const { colgroup, trList, borderType } = element;
+    if (!colgroup || !trList || borderType === TableBorder.EMPTY)
+      return;
+    const { scale } = this.options;
+    const tableWidth = element.width * scale;
+    const tableHeight = element.height * scale;
+    const isExternalBorderType = borderType === TableBorder.EXTERNAL;
+    ctx.save();
+    this._drawOuterBorder({
+      ctx,
+      startX,
+      startY,
+      width: tableWidth,
+      height: tableHeight,
+      isDrawFullBorder: isExternalBorderType
+    });
+    if (!isExternalBorderType) {
+      for (let t = 0; t < trList.length; t++) {
+        const tr = trList[t];
+        for (let d = 0; d < tr.tdList.length; d++) {
+          const td = tr.tdList[d];
+          const width = td.width * scale;
+          const height = td.height * scale;
+          const x = Math.round(td.x * scale + startX + width);
+          const y = Math.round(td.y * scale + startY);
+          ctx.translate(0.5, 0.5);
+          ctx.beginPath();
+          ctx.moveTo(x, y);
+          ctx.lineTo(x, y + height);
+          ctx.lineTo(x - width, y + height);
+          ctx.stroke();
+          ctx.translate(-0.5, -0.5);
+        }
+      }
+    }
+    ctx.restore();
+  }
+  _drawBackgroundColor(ctx, element, startX, startY) {
+    const { trList } = element;
+    if (!trList)
+      return;
+    const { scale } = this.options;
+    for (let t = 0; t < trList.length; t++) {
+      const tr = trList[t];
+      for (let d = 0; d < tr.tdList.length; d++) {
+        const td = tr.tdList[d];
+        if (!td.backgroundColor)
+          continue;
+        ctx.save();
+        const width = td.width * scale;
+        const height = td.height * scale;
+        const x = Math.round(td.x * scale + startX);
+        const y = Math.round(td.y * scale + startY);
+        ctx.fillStyle = td.backgroundColor;
+        ctx.fillRect(x, y, width, height);
+        ctx.restore();
+      }
+    }
+  }
   computeRowColInfo(element) {
     const { colgroup, trList } = element;
     if (!colgroup || !trList)
@@ -7345,42 +7487,8 @@ class TableParticle {
     ctx.restore();
   }
   render(ctx, element, startX, startY) {
-    const { colgroup, trList, borderType } = element;
-    if (!colgroup || !trList || borderType === TableBorder.EMPTY)
-      return;
-    const { scale } = this.options;
-    const tableWidth = element.width * scale;
-    const tableHeight = element.height * scale;
-    const isExternalBorderType = borderType === TableBorder.EXTERNAL;
-    ctx.save();
-    this._drawBorder({
-      ctx,
-      startX,
-      startY,
-      width: tableWidth,
-      height: tableHeight,
-      isDrawFullBorder: isExternalBorderType
-    });
-    if (!isExternalBorderType) {
-      for (let t = 0; t < trList.length; t++) {
-        const tr = trList[t];
-        for (let d = 0; d < tr.tdList.length; d++) {
-          const td = tr.tdList[d];
-          const width = td.width * scale;
-          const height = td.height * scale;
-          const x = Math.round(td.x * scale + startX + width);
-          const y = Math.round(td.y * scale + startY);
-          ctx.translate(0.5, 0.5);
-          ctx.beginPath();
-          ctx.moveTo(x, y);
-          ctx.lineTo(x, y + height);
-          ctx.lineTo(x - width, y + height);
-          ctx.stroke();
-          ctx.translate(-0.5, -0.5);
-        }
-      }
-    }
-    ctx.restore();
+    this._drawBackgroundColor(ctx, element, startX, startY);
+    this._drawBorder(ctx, element, startX, startY);
   }
 }
 var TableOrder;
@@ -10108,9 +10216,7 @@ class ListParticle {
       return;
     let text = "";
     if (startElement.listType === ListType.UL) {
-      if (startElement.listStyle) {
-        text = ulStyleMapping[startElement.listStyle] || ulStyleMapping[UlStyle.DISC];
-      }
+      text = ulStyleMapping[startElement.listStyle] || ulStyleMapping[UlStyle.DISC];
     } else {
       text = `${listIndex + 1}${KeyMap.PERIOD}`;
     }
@@ -10508,6 +10614,9 @@ class Draw {
   getTableTool() {
     return this.tableTool;
   }
+  getTableParticle() {
+    return this.tableParticle;
+  }
   getHeader() {
     return this.header;
   }
@@ -11416,6 +11525,7 @@ const _Command = class {
     _Command.cancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt);
     _Command.tableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt);
     _Command.tableBorderType = adapt.tableBorderType.bind(adapt);
+    _Command.tableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt);
     _Command.image = adapt.image.bind(adapt);
     _Command.hyperlink = adapt.hyperlink.bind(adapt);
     _Command.deleteHyperlink = adapt.deleteHyperlink.bind(adapt);
@@ -11581,6 +11691,9 @@ const _Command = class {
   executeTableBorderType(payload) {
     return _Command.tableBorderType(payload);
   }
+  executeTableTdBackgroundColor(payload) {
+    return _Command.tableTdBackgroundColor(payload);
+  }
   executeHyperlink(payload) {
     return _Command.hyperlink(payload);
   }
@@ -11731,6 +11844,7 @@ __publicField(Command, "mergeTableCell");
 __publicField(Command, "cancelMergeTableCell");
 __publicField(Command, "tableTdVerticalAlign");
 __publicField(Command, "tableBorderType");
+__publicField(Command, "tableTdBackgroundColor");
 __publicField(Command, "image");
 __publicField(Command, "hyperlink");
 __publicField(Command, "deleteHyperlink");
@@ -12898,6 +13012,26 @@ class CommandAdapt {
       curIndex: endIndex
     });
   }
+  tableTdBackgroundColor(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const rowCol = this.draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c];
+        col.backgroundColor = payload;
+      }
+    }
+    const { endIndex } = this.range.getRange();
+    this.range.setRange(endIndex, endIndex);
+    this.draw.render({
+      isCompute: false
+    });
+  }
   hyperlink(payload) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)