@flozy/editor 4.9.2 → 4.9.4

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

@@ -214,40 +214,14 @@ const StyleBuilder = props => {
               }, `accordion_${i}`)
             }, i);
           } else {
-            return /*#__PURE__*/_jsx(ThemeProvider, {
-              theme: muiTheme,
-              children: /*#__PURE__*/_jsxs(Accordion, {
-                defaultExpanded: true,
-                children: [/*#__PURE__*/_jsx(AccordionSummary, {
-                  expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-                  sx: {
-                    padding: "0px"
-                  },
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    variant: "body1",
-                    className: "settingsHeader",
-                    color: "primary",
-                    style: {
-                      fontSize: "14px !important",
-                      fontWeight: "400"
-                    },
-                    children: m?.tab
-                  })
-                }), /*#__PURE__*/_jsx(AccordionDetails, {
-                  sx: {
-                    padding: "5px"
-                  },
-                  children: /*#__PURE__*/_jsx(StyleContent, {
-                    renderTabs: renderTabs,
-                    value: m.value,
-                    element: elementProps,
-                    onChange: onElementPropsChange,
-                    customProps: customProps,
-                    handleClose: handleClose
-                  }, `tab_${m.value}_$${i}`)
-                })]
-              }, `accordion_${i}`)
-            }, i);
+            return /*#__PURE__*/_jsx(StyleContent, {
+              renderTabs: renderTabs,
+              value: m.value,
+              element: elementProps,
+              onChange: onElementPropsChange,
+              customProps: customProps,
+              handleClose: handleClose
+            }, `tab_${m.value}_$${i}`);
           }
         })
       }), needActions ? /*#__PURE__*/_jsxs(DialogActions, {

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/useEditorScroll.js

@@ -19,6 +19,6 @@ function useEditorScroll(editorWrapper = {
         currentEditorWrapper.removeEventListener("scroll", handleScroll);
       }
     };
-  }, [editorWrapper.current]);
+  }, [editorWrapper.current, callback]);
 }
 export default useEditorScroll;

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) {