@flozy/editor 5.1.4 → 5.1.6

package/dist/Editor/utils/table.js

@@ -1,6 +1,6 @@
 import { Transforms, Editor, Range, Element, Path, Node } from "slate";
 import { ReactEditor } from "slate-react";
-import { customInsertNode } from "./helper";
+import { customInsertNode, getNode } from "./helper";
 export const DEFAULT_TABLE_NODE = () => ({
   type: "table",
   children: [{
@@ -13,7 +13,10 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }]
+      }],
+      size: {
+        width: 120
+      }
     }, {
       type: "table-cell",
       children: [{
@@ -22,7 +25,10 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }]
+      }],
+      size: {
+        width: 120
+      }
     }, {
       type: "table-cell",
       children: [{
@@ -31,7 +37,10 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }]
+      }],
+      size: {
+        width: 120
+      }
     }]
   }, {
     type: "table-row",
@@ -43,7 +52,10 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }]
+      }],
+      size: {
+        width: 120
+      }
     }, {
       type: "table-cell",
       children: [{
@@ -52,7 +64,10 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }]
+      }],
+      size: {
+        width: 120
+      }
     }, {
       type: "table-cell",
       children: [{
@@ -63,9 +78,7 @@ export const DEFAULT_TABLE_NODE = () => ({
         cellBgColor: "#FFFFFF"
       }],
       size: {
-        widthInPercent: 100,
-        height: 100,
-        width: 365.3307291666667
+        width: 120
       }
     }]
   }, {
@@ -78,7 +91,10 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }]
+      }],
+      size: {
+        width: 120
+      }
     }, {
       type: "table-cell",
       children: [{
@@ -87,7 +103,10 @@ export const DEFAULT_TABLE_NODE = () => ({
           text: ""
         }],
         cellBgColor: "#FFFFFF"
-      }]
+      }],
+      size: {
+        width: 120
+      }
     }, {
       type: "table-cell",
       children: [{
@@ -98,14 +117,14 @@ export const DEFAULT_TABLE_NODE = () => ({
         cellBgColor: "#FFFFFF"
       }],
       size: {
-        height: 300,
-        widthInPercent: 100
+        width: 120
       }
     }]
   }],
   rows: 3,
   columns: 3
 });
+const isFreeGridTable = n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "freegridItem" && n.childType === "table";
 const prefixKey = (obj, pk = "") => {
   return Object.keys(obj).reduce((a, b) => {
     a[`${pk}${b}`] = obj[b];
@@ -144,12 +163,49 @@ export class TableUtil {
     customInsertNode(this.editor, newTable);
   };
   removeTable = () => {
-    Transforms.removeNodes(this.editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-      // mode:'highest'
+    const [freeGridItem] = Editor.nodes(this.editor, {
+      match: isFreeGridTable
     });
+    if (freeGridItem) {
+      Transforms.removeNodes(this.editor, {
+        match: isFreeGridTable
+      });
+    } else {
+      Transforms.removeNodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+      });
+    }
+  };
+  duplicateTable = () => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [freeGridItem] = Editor.nodes(this.editor, {
+        match: isFreeGridTable
+      });
+      let clone;
+      let path;
+      if (freeGridItem) {
+        const [freeGridNode, freeGridPath] = freeGridItem;
+        clone = freeGridNode;
+        path = freeGridPath;
+      } else {
+        const [[tableNode, tablePath]] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        clone = tableNode;
+        path = tablePath;
+      }
+      const nextPath = Path.next(path);
+      if (clone) {
+        const clonedNode = JSON.parse(JSON.stringify(clone));
+        Transforms.insertNodes(this.editor, clonedNode, {
+          at: nextPath
+        });
+      }
+    }
   };
-
   getDOMNode = path => {
     try {
       const [tableNode] = Editor.nodes(this.editor, {
@@ -186,9 +242,12 @@ export class TableUtil {
         const [[table, tablePath]] = Editor.nodes(this.editor, {
           match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
         });
-        const [, currentRow] = tableNode;
-        const path = action === "after" ? Path.next(currentRow) : currentRow;
-        Transforms.insertNodes(this.editor, createRow(Array(table.columns).fill("")), {
+        const [currentRowData, currentRow] = tableNode;
+        const isDuplicate = action === "duplicate";
+        const isInsertNext = action === "after" || isDuplicate;
+        const path = isInsertNext ? Path.next(currentRow) : currentRow;
+        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRowOnInsertAbove(currentRowData, currentRow, this.editor);
+        Transforms.insertNodes(this.editor, insertData, {
           at: path
         });
         Transforms.setNodes(this.editor, {
@@ -199,6 +258,23 @@ export class TableUtil {
       }
     }
   };
+  clearRow = () => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableRow] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
+      });
+      if (tableRow) {
+        const [tableRowNode, tableRowPath] = tableRow;
+        tableRowNode?.children?.forEach((cell, index) => {
+          const currentCellPath = [...tableRowPath, index];
+          clearCellText(this.editor, currentCellPath);
+        });
+      }
+    }
+  };
   deleteRow = () => {
     try {
       const {
@@ -259,6 +335,58 @@ export class TableUtil {
       }
     }
   };
+  duplicateColumn = () => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [, currentCell] = tableNode;
+        const currentCellPath = currentCell;
+        const insertNextCellPath = Path.next(currentCell);
+        for (let row = 0; row < table.rows; row++) {
+          currentCellPath[currentCellPath.length - 2] = row;
+          insertNextCellPath[insertNextCellPath?.length - 2] = row;
+          const cellNode = getNode(this.editor, currentCellPath);
+          Transforms.insertNodes(this.editor, JSON.parse(JSON.stringify(cellNode)), {
+            at: insertNextCellPath
+          });
+        }
+        Transforms.setNodes(this.editor, {
+          columns: table.columns + 1
+        }, {
+          at: tablePath
+        });
+      }
+    }
+  };
+  clearColumn = () => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
+      if (tableNode) {
+        const [[table]] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [, currentCell] = tableNode;
+        const currentCellPath = currentCell;
+        for (let row = 0; row < table.rows; row++) {
+          currentCellPath[currentCellPath.length - 2] = row;
+          clearCellText(this.editor, currentCellPath);
+        }
+      }
+    }
+  };
   deleteColumn = () => {
     try {
       const {
@@ -326,6 +454,7 @@ export class TableUtil {
         }, {
           at: currentCellPath
         });
+        applyColumnStyle(this.editor, currentCellPath, currentTablePath, cellProps, tableProps?.rows);
 
         // cell bg entire
         if (cellProps?.entireBgColor || tableProps?.borderColor || rowProps?.borderColor) {
@@ -363,6 +492,14 @@ export class TableUtil {
       console.log(err);
     }
   };
+  resizeTableCell = (styleProps, path) => {
+    const cellProps = parseByPrefixKey(styleProps, "col.");
+    Transforms.setNodes(this.editor, {
+      ...cellProps
+    }, {
+      at: path
+    });
+  };
   getTableProps = () => {
     const {
       selection
@@ -485,14 +622,14 @@ export class TableUtil {
     }
   };
 }
-const createRow = cellText => {
-  const newRow = Array.from(cellText, value => createTableCell(value));
+const createRow = (cellText, other) => {
+  const newRow = Array.from(cellText, value => createTableCell(value, other));
   return {
     type: "table-row",
     children: newRow
   };
 };
-export const createTableCell = text => {
+export const createTableCell = (text, other = {}) => {
   return {
     type: "table-cell",
     children: [{
@@ -500,7 +637,35 @@ export const createTableCell = text => {
       children: [{
         text
       }]
-    }]
+    }],
+    size: {
+      width: 120
+    },
+    ...other
+  };
+};
+const createRowOnInsertAbove = (currentRow, currRowPath, editor) => {
+  const isFirstRow = currRowPath[currRowPath?.length - 1] === 0;
+  const rowChild = currentRow?.children?.map((cell, i) => {
+    let other = {};
+
+    // remove the current row's size and add it on the currently inserting cell
+    if (isFirstRow) {
+      const cellPath = [...currRowPath, i];
+      Transforms.setNodes(editor, {
+        size: null
+      }, {
+        at: cellPath
+      });
+      other = {
+        size: cell?.size
+      };
+    }
+    return createTableCell("", other);
+  });
+  return {
+    type: "table-row",
+    children: rowChild
   };
 };
 
@@ -549,4 +714,43 @@ const createTableNode = (cellText, rows, columns) => {
     columns
   };
   return tableNode;
+};
+const columnStyleKeys = ["entireBgColor", "entireBorderColor", "entireTextColor", "entireFontFamily", "entireFontWeight", "entireTextSize"];
+const applyColumnStyle = (editor, currentCellPath, currentTablePath, cellProps, rows) => {
+  const colStyle = columnStyleKeys.reduce((acc, key) => {
+    const style = cellProps[key];
+    if (style) {
+      acc[key] = style;
+    }
+    return acc;
+  }, {});
+  for (let r = 0; r < rows; r++) {
+    const cellPosition = currentCellPath[currentCellPath?.length - 1]; // cell position on each row as per selected column cell
+
+    Transforms.setNodes(editor, colStyle, {
+      at: [...currentTablePath, r, cellPosition]
+    });
+  }
+};
+export const clearCellText = (editor, currentCellPath) => {
+  try {
+    const existingCellNode = getNode(editor, currentCellPath);
+    Transforms.removeNodes(editor, {
+      at: currentCellPath
+    });
+    Transforms.insertNodes(editor, {
+      ...(existingCellNode || {}),
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }],
+        cellBgColor: "#FFFFFF"
+      }]
+    }, {
+      at: currentCellPath
+    });
+  } catch (err) {
+    console.log(err);
+  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.1.4",
+  "version": "5.1.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"