@flozy/editor 5.3.9 → 5.4.0

package/dist/Editor/helper/index.js

@@ -308,7 +308,13 @@ export const getTextColor = (color = "") => {
     color: "transparent !important",
     caretColor: "black",
     "& span": {
-      color: "transparent !important"
+      color: "transparent !important",
+      "& ::selection": {
+        color: "#000 !important"
+      }
+    },
+    "& ::selection": {
+      color: "#000 !important"
     }
   } : {
     color
@@ -331,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);
@@ -352,7 +358,7 @@ export const clearBrainText = editor => {
     } = editor;
     if (selection) {
       const [currentNode, currentPath] = Editor.node(editor, selection);
-      const cleanedText = Node.string(currentNode).replace(/\/b(?:rain|rai|ra|r)?/g, "").trim();
+      const cleanedText = Node.string(currentNode).replace(/\/(?:b(?:rain|rai|ra|r)?)?/g, "").trim();
       Transforms.insertText(editor, cleanedText, {
         at: currentPath
       });
@@ -360,4 +366,11 @@ export const clearBrainText = editor => {
   } catch (err) {
     console.log(err);
   }
+};
+export const clearSelectionOnly = editor => {
+  try {
+    Transforms.deselect(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/helper/theme.js

@@ -147,4 +147,27 @@ export const groupByBreakpoint = (styleProps, theme) => {
     }
   };
 };
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getBreakpointLineSpacing = (value, breakpoint) => {
+  try {
+    const values = getBreakPointsValue(value, breakpoint);
+    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
+      if (values[b] || values["lg"]) {
+        const value = values[b] || values["lg"];
+        return {
+          ...a,
+          [b]: value
+        };
+      } else {
+        return a;
+      }
+    }, {});
+    if (breakpoint) {
+      return value[breakpoint] || value["lg"] || value;
+    } else {
+      return cssVal["lg"];
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -35,6 +35,7 @@ export const EditorProvider = ({
     path: null
   });
   const [fontFamilies, setFontFamilies] = useState({});
+  const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -97,8 +98,10 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
+    setFontFamilies,
+    activeBreakPoint,
+    setActiveBreakPoint
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/hooks/useTable.js

@@ -0,0 +1,210 @@
+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, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { encodeToBase64, isHavingSelection } from "../utils/helper";
+import { serializeToText } from "../utils/serializeToText";
+import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
+
+// const selectFirstCell = (tablePath, editor, updateTableSelection) => {
+//   const firstCell = [...tablePath, 0, 0];
+
+//   const end = Editor.end(editor, firstCell);
+
+//   Transforms.select(editor, {
+//     anchor: end,
+//     focus: end,
+//   });
+
+//   updateTableSelection({
+//     startCellPath: firstCell,
+//     endCellPath: [],
+//     isDragging: false,
+//   });
+// };
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } 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 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,
+      resetAll
+    };
+  }, [hoverPath, editor?.selection, tableSelection, tableResizing]);
+  useEffect(() => {
+    let isTextSelected;
+    const handleKeyDown = event => {
+      const isCutKey = (event.ctrlKey || event.metaKey) && event.key === "x";
+      if (isCutKey) {
+        isTextSelected = isHavingSelection(editor);
+      } else if (event.key === "Backspace") {
+        const selectedCells = getSelectedCells();
+        if (selectedCells?.length > 1) {
+          selectedCells.forEach(currentCellPath => {
+            clearCellText(editor, currentCellPath);
+          });
+        }
+      }
+    };
+    const handleCopy = (event, isCut) => {
+      try {
+        const isTextSelected = isHavingSelection(editor);
+        const {
+          startCellPath
+        } = tableSelection || {};
+        const customCopy = startCellPath?.length;
+        if (customCopy && !isTextSelected) {
+          event.preventDefault(); // Prevent default copy behavior
+
+          const {
+            tablePath
+          } = otherProps;
+          const [node] = Editor.node(editor, tablePath);
+          const copiedTableNode = createCopiedTableStructure(editor, tableSelection, node, tablePath);
+          const tableNode = [copiedTableNode];
+          const encodedTableNode = encodeToBase64(tableNode);
+          event.clipboardData.setData("application/x-slate-fragment", encodedTableNode);
+          const textData = serializeToText(tableNode);
+          event.clipboardData.setData("text/plain", textData);
+          const tableDom = tableNodeToDom(copiedTableNode);
+          event.clipboardData.setData("text/html", tableDom?.outerHTML);
+          if (isCut) {
+            clearCellText(editor, startCellPath);
+          }
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    const handleCut = e => {
+      // unable to find the text selected or not here, that why handling it on handleKeyDown
+
+      if (!isTextSelected) {
+        e.preventDefault();
+        handleCopy(e, true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("copy", handleCopy);
+    window.addEventListener("cut", handleCut);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("copy", handleCopy);
+      window.removeEventListener("cut", handleCut);
+    };
+  }, [tableSelection, editor, tableSelection]);
+
+  // useEffect(() => {
+  //   selectFirstCell(tablePath, editor, updateTableSelection);
+  // }, []);
+
+  return /*#__PURE__*/_jsx(TableContext.Provider, {
+    value: values,
+    children: /*#__PURE__*/_jsxs(DndContext, {
+      sensors: sensors,
+      onDragEnd: data => handleDragEnd(data, editor, resetAll),
+      children: [/*#__PURE__*/_jsx(ClickAwayListener, {
+        onClickAway: () => setTableSelection(getDefaultTableSelection()),
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      }), /*#__PURE__*/_jsx(DragOverlay, {})]
+    })
+  });
+};
+function useTable() {
+  return useContext(TableContext);
+}
+export default useTable;

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -1,5 +1,6 @@
-import { Editor, Node, Path, Point, Transforms } from "slate";
-import { getNextNode } from "../utils/helper";
+import { Editor, Node, Path, Point, Range, Transforms } from "slate";
+import { containsSurrogatePair, getNextNode } from "../utils/helper";
+const BACKWARD_BLOCKS = ["list-item", "signature"];
 const isNodeTextEmpty = node => {
   const nodeText = Node.string(node);
   return nodeText.trim() === "";
@@ -28,10 +29,41 @@ const withCustomDeleteBackward = editor => {
           return;
         }
       }
+      if (selection && Range.isCollapsed(selection)) {
+        const [currentNode, path] = Editor.node(editor, selection);
+        if (currentNode && typeof currentNode.text === 'string') {
+          const text = currentNode.text;
+          if (containsSurrogatePair(text)) {
+            // Check if the cursor is at the end of a surrogate pair
+            const {
+              offset
+            } = selection.anchor;
+            const beforeCursor = text.slice(0, offset);
+            const afterCursor = text.slice(offset);
+            if (containsSurrogatePair(beforeCursor) || containsSurrogatePair(afterCursor)) {
+              // Delete the entire surrogate pair
+              Transforms.delete(editor, {
+                at: {
+                  anchor: {
+                    path,
+                    offset: offset - 2
+                  },
+                  // Move back 2 for surrogate pair
+                  focus: {
+                    path,
+                    offset
+                  }
+                }
+              });
+              return;
+            }
+          }
+        }
+      }
 
-      // Check if current node is a list item and is the last one
+      // Check if current node is a list item and is the last one, signature node
       const [node] = Editor.nodes(editor, {
-        match: n => n.type === "list-item" // Adjust based on your list item type
+        match: n => BACKWARD_BLOCKS.includes(n.type) // Adjust based on your list item type
       });
 
       if (node) {

package/dist/Editor/plugins/withEmbeds.js

@@ -40,32 +40,36 @@ const withEmbeds = editor => {
     }
   };
   editor.insertBreak = (...args) => {
-    const parentPath = Path.parent(editor.selection.focus.path);
-    const parentNode = Node.get(editor, parentPath);
-    if (editor.isVoid(parentNode)) {
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath,
-        select: true // Focus on this node once inserted
-      });
-    } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath,
-        select: true // Focus on this node once inserted
-      });
-    } else {
-      insertBreak(...args);
+    try {
+      const parentPath = Path.parent(editor.selection.focus.path);
+      const parentNode = Node.get(editor, parentPath);
+      if (editor.isVoid(parentNode)) {
+        const nextPath = Path.next(parentPath);
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: nextPath,
+          select: true // Focus on this node once inserted
+        });
+      } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
+        const nextPath = Path.next(parentPath);
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: nextPath,
+          select: true // Focus on this node once inserted
+        });
+      } else {
+        insertBreak(...args);
+      }
+    } catch (err) {
+      console.log(err);
     }
   };
   return editor;

package/dist/Editor/plugins/withHTML.js

@@ -2,6 +2,8 @@ import { Transforms, Editor, Element, Node, Path } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
+const NON_TEXT_TAGS = ["ol", "ul", "img", "table", "video", "a", "button", "GOOGLE-SHEETS-HTML-ORIGIN"];
+const ALLOWED_TEXT_NODES = ["paragraph", "title", "headingOne", "headingTwo", "headingThree"];
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -61,12 +63,23 @@ const insertAtNextNode = (editor, formattedFragment) => {
     console.log(err);
   }
 };
-const handleInsert = (editor, defaultInsert, fragment = []) => {
-  if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
-    insertAtNextNode(editor, fragment);
-  } else {
-    defaultInsert();
-  }
+
+// const handleInsert = (editor, defaultInsert, fragment = []) => {
+//   if (
+//     getCurrentElementText(editor) &&
+//     fragment.some((f) => f.type === "table")
+//   ) {
+//     insertAtNextNode(editor, fragment);
+//   } else {
+//     defaultInsert();
+//   }
+// };
+
+const getTableCellChild = (fragment = []) => {
+  const table = fragment.find(node => node.type === "table");
+  const row = table?.children?.find(node => node.type === "table-row");
+  const cell = row?.children?.find(node => node.type === "table-cell");
+  return cell?.children || [];
 };
 const formatFragment = {
   "list-item": fragment => {
@@ -115,8 +128,21 @@ const withHtml = editor => {
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
     const eltype = currentEl?.type;
+    const firstNode = editor?.children?.[0];
+    const titlePath = firstNode?.type === "topbanner" ? 1 : 0;
+    const isTitlePath = editor.needLayout && editor?.selection?.anchor?.path[0] === titlePath;
     if (slateHTML && !formatFragment[eltype]) {
+      const [tableCellNode] = Editor.nodes(editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
       const decoded = decodeAndParseBase64(slateHTML);
+      if (tableCellNode) {
+        const tableCellChild = getTableCellChild(decoded);
+        if (tableCellChild?.length) {
+          Transforms.insertFragment(editor, tableCellChild);
+          return;
+        }
+      }
       const tableNode = getFocusedNode(editor, "table");
       const onlyTextNode = getFocusedNode(editor, "freegrid");
 
@@ -154,22 +180,38 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => insertData(data), decoded);
+        const isTextNode = ALLOWED_TEXT_NODES.includes(decoded?.[0]?.type);
+        if (isTitlePath && !isTextNode) {
+          insertAtNextNode(editor, decoded);
+          return;
+        }
+        const currentText = getCurrentElementText(editor);
+        if (currentText && !isTextNode) {
+          insertAtNextNode(editor, decoded);
+          return;
+        }
+        insertData(data);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
+      const rootElement = parsed.body || parsed.documentElement;
+      const isNonText = rootElement ? rootElement?.querySelector(NON_TEXT_TAGS.toString()) : false;
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
         if (editor.isChatEditor) {
           return;
         }
-        const table = parsed.body.querySelector("table");
+        const table = rootElement.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
           colGrp.remove();
         }
         const fragment = deserialize(table);
-        Transforms.insertFragment(editor, [fragment]);
+        if (isTitlePath) {
+          insertAtNextNode(editor, [fragment]);
+        } else {
+          Transforms.insertFragment(editor, [fragment]);
+        }
         return;
       }
       const fragment = deserialize(parsed.body);
@@ -183,7 +225,16 @@ const withHtml = editor => {
       if (editor.isChatEditor && is_img_table) {
         return;
       }
-      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
+      if (isTitlePath && isNonText) {
+        insertAtNextNode(editor, formattedFragment);
+        return;
+      }
+      const currentText = getCurrentElementText(editor);
+      if (currentText && isNonText) {
+        insertAtNextNode(editor, formattedFragment);
+        return;
+      }
+      Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/plugins/withLayout.js

@@ -58,6 +58,7 @@ const withLayout = editor => {
         Transforms.insertNodes(editor, paragraph, {
           at: path.concat(1)
         });
+        return;
       }
       ORDERS_LAYOUT.forEach((enforce, index) => {
         if (index < editor.children.length) {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -43,6 +43,9 @@ import Code from "../Elements/EmbedScript/Code";
 import FreeGrid from "../Elements/FreeGrid/FreeGrid";
 import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
 import FreeGridBox from "../Elements/FreeGrid/FreeGridBox";
+import DataView from "../Elements/DataView/DataView";
+import ViewData from "../Elements/DataView/Layouts/ViewData";
+import ColumnView from "../Elements/DataView/Layouts/ColumnView";
 import SearchAttachment from "../Elements/Search/SearchAttachment";
 // import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -152,7 +155,7 @@ export const activeMark = (editor, format) => {
   const defaultMarkData = {
     color: "#000000",
     bgColor: "#FFFFFF",
-    fontSize: "normal",
+    fontSize: "14px",
     fontFamily: "PoppinsRegular",
     fontWeight: "normal"
   };
@@ -167,6 +170,16 @@ export const activeMark = (editor, format) => {
 };
 export const getMarked = (leaf, children, theme) => {
   const className = leaf?.doublequote ? "doublequote" : "";
+  if (leaf.highlight) {
+    children = /*#__PURE__*/_jsx("span", {
+      style: {
+        color: "inherit"
+      },
+      className: "slate-highlight" // while opening AI, we will use this element to highlight the selection. (PopoverAIInput.js)
+      ,
+      children: children
+    });
+  }
   if (leaf.bold) {
     children = /*#__PURE__*/_jsx("strong", {
       children: children
@@ -237,21 +250,13 @@ export const getMarked = (leaf, children, theme) => {
           // },
           ...textStyles,
           fontFamily: family,
-          fontWeight: leaf.fontWeight
+          fontWeight: leaf.fontWeight,
+          WebkitTextFillColor: "unset !important"
         },
         children: children
       })
     });
   }
-  if (leaf.highlight) {
-    children = /*#__PURE__*/_jsx("span", {
-      style: {
-        background: "#EAEBFE",
-        color: "inherit"
-      },
-      children: children
-    });
-  }
   if (leaf.decoration === "link") {
     children = /*#__PURE__*/_jsx("a", {
       style: {
@@ -309,7 +314,8 @@ export const getBlock = props => {
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
           width: element?.bgColor ? "calc(100% - 16px)" : "100%",
-          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
+          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
+          lineHeight: 1.43
         },
         children: children
       });
@@ -369,12 +375,20 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
+        style: {
+          lineHeight: 1.43
+        },
+        className: "listItemMargin",
         type: "1",
         ...attributes,
         children: children
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
+        style: {
+          lineHeight: 1.43
+        },
+        className: "listItemMargin",
         ...attributes,
         children: children
       });
@@ -562,6 +576,19 @@ export const getBlock = props => {
         contentEditable: false,
         children: children
       });
+    // Data View
+    case "dataView":
+      return /*#__PURE__*/_jsx(DataView, {
+        ...props
+      });
+    case "viewData":
+      return /*#__PURE__*/_jsx(ViewData, {
+        ...props
+      });
+    case "columnView":
+      return /*#__PURE__*/_jsx(ColumnView, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

package/dist/Editor/utils/brains.js

@@ -18,7 +18,7 @@ export const insertBrain = (editor, data, position) => {
     };
     const [currentNode, currentPath] = Editor.node(editor, selection);
     console.log('W1', Node.string(currentNode));
-    const cleanedText = Node.string(currentNode).replace(/\/b(?:rain|rai|ra|r)?/g, "").trim();
+    const cleanedText = Node.string(currentNode).replace(/\/(?:b(?:rain|rai|ra|r)?)?/g, "").trim();
     if (cleanedText) {
       Transforms.delete(editor, {
         at: Editor.range(editor, currentPath)