@flozy/editor 5.5.9 → 5.6.1

package/dist/Editor/utils/helper.js

@@ -4,6 +4,7 @@ import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
 export const windowVar = {};
 let ST_TIMEOUT = null;
+const BLOCKS = ["grid", "dataView"];
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
   var d = new Date(date),
@@ -163,7 +164,7 @@ export const handleInsertLastElement = (event, editor) => {
   if (isFreeGrid) {
     return;
   }
-  const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => c.type === "grid");
+  const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => BLOCKS.includes(c.type));
   if (!ReactEditor.isFocused(editor)) {
     if (isLastElementEmpty) {
       if (hasPath) {
@@ -212,7 +213,7 @@ export const isListItem = editor => {
   });
   return node;
 };
-const getNode = (editor, path) => {
+export const getNode = (editor, path) => {
   try {
     return Node.get(editor, path);
   } catch (err) {
@@ -264,6 +265,17 @@ export const decodeAndParseBase64 = encodedString => {
   const jsonData = JSON.parse(decodedURLString);
   return jsonData;
 };
+export const encodeToBase64 = data => {
+  // Convert the data to a JSON string
+  const jsonString = JSON.stringify(data);
+
+  // URL-encode the JSON string
+  const encodedURLString = encodeURIComponent(jsonString);
+
+  // Base64-encode the URL-encoded string
+  const base64EncodedString = btoa(encodedURLString);
+  return base64EncodedString;
+};
 export const hasVerticalScrollbar = (element = {}) => {
   return element.scrollHeight > element.clientHeight;
 };
@@ -611,4 +623,93 @@ export const isPageSettings = (event, editor) => {
     isPageSettingsNode = true;
     return isPageSettingsNode;
   }
+};
+export function capitalizeFirstLetter(str) {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+export const insertLineBreakAtEndOfPath = (editor, path) => {
+  try {
+    const [node, nodePath] = Editor.node(editor, path); // Get the node at the specified path
+    if (node) {
+      // Insert the line break
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }, {
+        at: nodePath
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export function isHavingSelection(editor) {
+  try {
+    return editor?.selection && !Range.isCollapsed(editor.selection);
+  } catch (err) {
+    console.log(err);
+  }
+}
+const omitNodes = ["site-settings", "page-settings"];
+export function getInitialValue(value = [], readOnly) {
+  if (readOnly === "readonly" && value?.length) {
+    // remove last empty nodes on readonly mode, to remove empty spaces
+
+    let lastNonEmptyElementIndex;
+    for (let i = value?.length; i > 0; i--) {
+      const elementIndex = i - 1;
+      const node = value[elementIndex];
+      if (lastNonEmptyElementIndex) {
+        break;
+      }
+      if (node?.type === "paragraph") {
+        // Ensure all children of the paragraph node are text nodes
+        const hasOnlyTextChildren = node.children.every(child => Text.isText(child));
+        const text = node.children[node.children.length - 1]?.text;
+        lastNonEmptyElementIndex = hasOnlyTextChildren ? text ? elementIndex : null : elementIndex;
+      } else if (omitNodes.includes(node?.type)) {
+        continue;
+      } else {
+        lastNonEmptyElementIndex = elementIndex;
+      }
+    }
+    const newValue = [...value].slice(0, lastNonEmptyElementIndex + 1);
+    return newValue;
+  }
+  return value;
+}
+export function getSelectedCls(defaultCls = "", selected, selectedClsName = "selected") {
+  return `${defaultCls} ${selected ? selectedClsName : ""}`;
+}
+export function handleNegativeInteger(val) {
+  return val < 0 ? 0 : val;
+}
+export const containsSurrogatePair = text => {
+  // Match surrogate pairs (high and low surrogate)
+  const surrogatePairRegex = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
+  return surrogatePairRegex.test(text);
+};
+export const getNodeWithType = (editor, nodeType = "", otherOptions) => {
+  try {
+    const options = {
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === nodeType,
+      ...(otherOptions || {})
+    };
+    const [node, nodePath] = Editor.nodes(editor, options);
+    return node ? [node, nodePath] : [];
+  } catch (err) {
+    console.log(err);
+    return [];
+  }
+};
+export const getSlateDom = (editor, range) => {
+  try {
+    const slateDom = ReactEditor.toDOMRange(editor, range);
+    return slateDom;
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/utils/insertNewLine.js

@@ -1,4 +1,4 @@
-import { Transforms } from "slate";
+import { Editor, Element, Path, Transforms } from "slate";
 const insertNewLine = editor => {
   Transforms.insertNodes(editor, {
     type: "paragraph",
@@ -9,4 +9,22 @@ const insertNewLine = editor => {
     at: [editor.children.length]
   });
 };
+export const insertNewLineAfterCurrentPath = editor => {
+  const currentPath = editor?.selection?.anchor?.path;
+  const [tableNode] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+  });
+  if (currentPath && tableNode) {
+    const currentParentPath = Path.parent(currentPath);
+    const nextPath = Path.next(currentParentPath);
+    Transforms.insertNodes(editor, {
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }, {
+      at: nextPath
+    });
+  }
+};
 export default insertNewLine;

package/dist/Editor/utils/pageSettings.js

@@ -9,7 +9,13 @@ export const findPageSettings = editor => {
       path: null,
       element: {
         pageProps: {
-          pageWidth: "fixed"
+          pageWidth: "fixed",
+          "lineHeight": {
+            "xs": 1.43,
+            "sm": 1.43,
+            "md": 1.43,
+            "lg": 1.43
+          }
         }
       }
     };
@@ -34,7 +40,13 @@ export const getPageSettings = editor => {
         path: null,
         element: {
           pageProps: {
-            pageWidth: "fixed"
+            pageWidth: "fixed",
+            "lineHeight": {
+              "xs": 1.43,
+              "sm": 1.43,
+              "md": 1.43,
+              "lg": 1.43
+            }
           }
         }
       };

package/dist/Editor/utils/serializeToText.js

@@ -2,6 +2,8 @@ export const serializeToText = node => {
   try {
     if (!node?.type && node?.text) {
       return node?.text;
+    } else if (node?.type === 'mention') {
+      return '@' + node?.character?.name || '';
     }
     let n = Array.isArray(node) ? node : node?.children;
     n = n && Array.isArray(n) ? n : n ? [n] : [];

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.5.9",
+  "version": "5.6.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -68,7 +68,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac30/Documents/CODE_BASE/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac30/Documents/CODE_BASE/flozy/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [