@flozy/editor 4.9.1 → 4.9.3

package/dist/Editor/common/StyleBuilder/tableStyle.js

@@ -1,3 +1,6 @@
+import { toolbarGroups } from "../../Toolbar/toolbarGroups";
+import { fontOptions } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
 const tableStyle = [{
   tab: "Table",
   value: "tableSettings",
@@ -48,4 +51,92 @@ const tableStyle = [{
     placeholder: "Hide on Mobile"
   }]
 }];
-export default tableStyle;
+export default tableStyle;
+const allTools = toolbarGroups.flat();
+const fontWeight = allTools.find(f => f.format === "fontWeight");
+export const tableRowStyle = [{
+  tab: "Row",
+  value: "rowSettings",
+  fields: [{
+    label: "Font Family",
+    key: "row.fontFamily",
+    type: "textOptions",
+    webFont: true,
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }, {
+    label: "Font Weight",
+    key: "row.fontWeight",
+    type: "textOptions",
+    options: fontWeight?.options,
+    width: 7
+  }, {
+    label: "Font Size",
+    key: "row.textSize",
+    type: "fontSize",
+    width: 5,
+    placeholder: "16px or 1em"
+  }, {
+    label: "Text Color",
+    key: "row.textColor",
+    type: "color"
+  }, {
+    label: "Background",
+    key: "row.bgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "row.borderColor",
+    type: "color"
+  }]
+}];
+export const tableColumnStyle = [{
+  tab: "Column",
+  value: "columnSettings",
+  fields: [{
+    label: "Font Family",
+    key: "col.entireFontFamily",
+    type: "textOptions",
+    webFont: true,
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }, {
+    label: "Font Weight",
+    key: "col.entireFontWeight",
+    type: "textOptions",
+    options: fontWeight?.options,
+    width: 7
+  }, {
+    label: "Font Size",
+    key: "col.entireTextSize",
+    type: "fontSize",
+    width: 5,
+    placeholder: "16px or 1em"
+  }, {
+    label: "Entire Text Color",
+    key: "col.entireTextColor",
+    type: "color"
+  }, {
+    label: "Background",
+    key: "col.entireBgColor",
+    type: "color"
+  }, {
+    label: "Border",
+    key: "col.entireBorderColor",
+    type: "color"
+  }]
+}];

package/dist/Editor/common/iconListV2.js

@@ -1192,4 +1192,56 @@ export function CodeElementIcon() {
       strokeLinejoin: "round"
     })]
   });
+}
+export function DragIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "16",
+    height: "12",
+    viewBox: "0 0 10 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("ellipse", {
+      cx: "1.49462",
+      cy: "4.42384",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 1.49462 4.42384)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "4.99999",
+      cy: "4.42384",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 4.99999 4.42384)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "8.50732",
+      cy: "4.42384",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 8.50732 4.42384)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "1.49462",
+      cy: "0.91993",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 1.49462 0.91993)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "4.99999",
+      cy: "0.91993",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 4.99999 0.91993)",
+      fill: "#94A3B8"
+    }), /*#__PURE__*/_jsx("ellipse", {
+      cx: "8.50732",
+      cy: "0.91993",
+      rx: "0.779289",
+      ry: "0.779289",
+      transform: "rotate(-90 8.50732 0.91993)",
+      fill: "#94A3B8"
+    })]
+  });
 }

package/dist/Editor/hooks/useTable.js

@@ -0,0 +1,164 @@
+import { ClickAwayListener } from "@mui/material";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { clearCellText } from "../utils/table";
+import { Editor, Element, Transforms } from "slate";
+import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { jsx as _jsx } from "react/jsx-runtime";
+const handleDragEnd = (dragData, editor, resetAll) => {
+  const {
+    active,
+    over
+  } = dragData;
+  if (over) {
+    const {
+      dragType,
+      path: startCellPath
+    } = active?.data?.current || {};
+    const {
+      path: overCellPath
+    } = over?.data?.current || {};
+    if (startCellPath?.length) {
+      if (dragType === "row") {
+        const startRowPath = startCellPath.slice(0, -1);
+        const overRowPath = overCellPath.slice(0, -1);
+        Transforms.moveNodes(editor, {
+          at: startRowPath,
+          to: overRowPath
+        });
+      } else {
+        const [startCol] = startCellPath.slice(-1);
+        const [overCol] = overCellPath.slice(-1);
+        const [tableData] = Editor.nodes(editor, {
+          at: startCellPath,
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [tableNode, tablePath] = tableData;
+        const rows = tableNode?.rows || 0;
+        for (let row = 0; row < rows; row++) {
+          const startColPath = [...tablePath, row, startCol];
+          const overColPath = [...tablePath, row, overCol];
+          Transforms.moveNodes(editor, {
+            at: startColPath,
+            to: overColPath
+          });
+        }
+      }
+      resetAll();
+    }
+  }
+};
+const getRectangleBounds = tableSelection => {
+  const {
+    startCellPath,
+    endCellPath
+  } = tableSelection;
+  if (!startCellPath?.length) return [];
+  const startPath = startCellPath.slice(0, -2);
+  const startCell = startCellPath.slice(-2);
+  const endCell = endCellPath.slice(-2);
+  const [startRow, startCol] = startCell;
+  const [endRow, endCol] = endCell?.length ? endCell : startCell;
+  const minRow = Math.min(startRow, endRow);
+  const maxRow = Math.max(startRow, endRow);
+  const minCol = Math.min(startCol, endCol);
+  const maxCol = Math.max(startCol, endCol);
+  const selectedPaths = [];
+  for (let row = minRow; row <= maxRow; row++) {
+    for (let col = minCol; col <= maxCol; col++) {
+      selectedPaths.push([...startPath, row, col]);
+    }
+  }
+  return selectedPaths;
+};
+const TableContext = /*#__PURE__*/createContext();
+export function getDefaultTableSelection() {
+  return {
+    startCellPath: [],
+    endCellPath: [],
+    isDragging: false
+  };
+}
+export const TableProvider = ({
+  editor,
+  children,
+  otherProps
+}) => {
+  const [hoverPath, setHoverPath] = useState(null);
+  const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
+  const [tableResizing, setTableResizing] = useState(null);
+
+  // for the button events (like onclick,...etc) inside draggable component to work correctly
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      delay: 250,
+      distance: 0 // throws exceeded distance error
+    }
+  }));
+
+  const getSelectedCells = () => {
+    return getRectangleBounds(tableSelection);
+  };
+  const updateTableSelection = update => {
+    setTableSelection(prev => ({
+      ...prev,
+      ...update
+    }));
+  };
+  const resetAll = () => {
+    setTableSelection(getDefaultTableSelection());
+    Transforms.deselect(editor);
+
+    // hide drag icons after drag completion
+    setTimeout(() => setHoverPath(null), 200);
+  };
+  const values = useMemo(() => {
+    return {
+      hoverPath,
+      setHoverPath,
+      editor,
+      getSelectedCells,
+      updateTableSelection,
+      tableSelection,
+      tableResizing,
+      setTableResizing,
+      otherProps
+    };
+  }, [hoverPath, editor?.selection, tableSelection, tableResizing]);
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === "Backspace") {
+        const selectedCells = getSelectedCells();
+        if (selectedCells?.length > 1) {
+          selectedCells.forEach(currentCellPath => {
+            clearCellText(editor, currentCellPath);
+          });
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [tableSelection]);
+  useEffect(() => {
+    // on deselect table on insert
+    Transforms.deselect(editor);
+  }, []);
+  return /*#__PURE__*/_jsx(TableContext.Provider, {
+    value: values,
+    children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      onClickAway: () => setTableSelection(getDefaultTableSelection()),
+      children: /*#__PURE__*/_jsx(DndContext, {
+        sensors: sensors,
+        onDragEnd: data => handleDragEnd(data, editor, resetAll),
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      })
+    })
+  });
+};
+function useTable() {
+  return useContext(TableContext);
+}
+export default useTable;

package/dist/Editor/utils/helper.js

@@ -157,7 +157,7 @@ export const isListItem = editor => {
   });
   return node;
 };
-const getNode = (editor, path) => {
+export const getNode = (editor, path) => {
   try {
     return Node.get(editor, path);
   } catch (err) {

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)) : createRow(Array(table.columns).fill(""));
+        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,18 @@ export class TableUtil {
       console.log(err);
     }
   };
+  resizeTableCell = (styleProps, rowNode) => {
+    const cellProps = parseByPrefixKey(styleProps, "col.");
+    const [rowData, rowPath] = rowNode;
+    rowData?.children.forEach((_, i) => {
+      const cellPath = [...rowPath, i];
+      Transforms.setNodes(this.editor, {
+        ...cellProps
+      }, {
+        at: cellPath
+      });
+    });
+  };
   getTableProps = () => {
     const {
       selection
@@ -500,7 +641,10 @@ export const createTableCell = text => {
       children: [{
         text
       }]
-    }]
+    }],
+    size: {
+      width: 120
+    }
   };
 };
 
@@ -549,4 +693,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": "4.9.1",
+  "version": "4.9.3",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"