@flozy/editor 5.5.9 → 5.6.1

package/dist/Editor/plugins/withHTML.js

@@ -2,6 +2,45 @@ 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 parseCopiedHTML = html => {
+  const parsed = new DOMParser().parseFromString(html, "text/html");
+
+  // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
+  parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
+    // Find the parent li
+    const parentLi = list.parentElement;
+
+    // Move the list after the parent li
+    parentLi.after(list);
+  });
+
+  // to handle google docs list
+  parsed.querySelectorAll("li p, li div").forEach(element => {
+    const parent = element.parentNode;
+    // Move all child nodes of <p> or <div> to its parent <li>
+    while (element.firstChild) {
+      parent.insertBefore(element.firstChild, element);
+    }
+    // Remove the <p> or <div> element
+    parent.removeChild(element);
+  });
+
+  // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
+  parsed.querySelectorAll("li").forEach(li => {
+    // Check if the parent of <li> is not a <ul> or <ol>
+    if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
+      // Create a <ul> element
+      const ul = document.createElement("ul");
+      // Append the <li> to the <ul>
+      ul.appendChild(li.cloneNode(true)); // Clone the <li>
+      // Replace the original <li> in the DOM with the <ul>
+      li.replaceWith(ul);
+    }
+  });
+  return parsed;
+};
 const loopChildren = (children = [], defaultInsert) => {
   if (!children?.length) {
     return defaultInsert;
@@ -26,7 +65,7 @@ const getCurrentElement = editor => {
     return null;
   }
 };
-const getCurrentElementText = editor => {
+export const getCurrentElementText = editor => {
   try {
     if (editor.selection) {
       return Editor.string(editor, editor?.selection?.anchor?.path);
@@ -61,12 +100,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 +165,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 +217,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?.trim() && !isTextNode) {
+          insertAtNextNode(editor, decoded);
+          return;
+        }
+        insertData(data);
       }
     } else if (html) {
-      const parsed = new DOMParser().parseFromString(html, "text/html");
+      const parsed = parseCopiedHTML(html);
+      const rootElement = parsed.body;
+      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 +262,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?.trim() && 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)

package/dist/Editor/utils/button.js

@@ -20,10 +20,10 @@ export const insertButton = editor => {
       bottomRight: 30
     },
     bannerSpacing: {
-      left: 16,
-      top: 8,
-      right: 16,
-      bottom: 8
+      left: 24,
+      top: 10,
+      right: 24,
+      bottom: 10
     },
     ...(windowVar.lastButtonProps || {})
   };

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -3,6 +3,7 @@ import { Box } from "@mui/material";
 import { fontFamilyMap, sizeMap } from "../font";
 import Mentions from "../../Elements/Mentions/Mentions";
 import CheckList from "../../Elements/List/CheckList";
+import SimpleText from "../../Elements/SimpleText";
 import { isEmptyTextNode } from "../../helper";
 import { getBreakPointsValue } from "../../helper/theme";
 import insertNewLine from "../insertNewLine";
@@ -15,6 +16,20 @@ const LIST_FORMAT_TYPE = {
   unorderedList: "list-item"
 };
 const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
+export const serializeMentions = node => {
+  try {
+    if (node?.type === 'mention') {
+      return [node.character];
+    }
+    let children = Array.isArray(node) ? node : node?.children;
+    children = children && Array.isArray(children) ? children : [];
+    let mentions = children.map(child => serializeMentions(child)).flat();
+    return mentions.filter(Boolean);
+  } catch (err) {
+    console.log(err);
+    return [];
+  }
+};
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -222,38 +237,88 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("p", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`
+        className: `content-editable ${isEmpty ? "empty" : ""} m-0`
         // placeholder="paragraph"
         ,
         children: children
       });
     case "headingOne":
-      return /*#__PURE__*/_jsx("h1", {
+      return /*#__PURE__*/_jsx("h3", {
         ...attributes,
         ...element.attr,
+        style: {
+          margin: "10px 0px"
+        },
         className: `content-editable ${isEmpty ? "empty" : ""}`
         // placeholder="Heading 1"
         ,
         children: children
       });
     case "headingTwo":
-      return /*#__PURE__*/_jsx("h2", {
+      return /*#__PURE__*/_jsx("h3", {
         ...attributes,
         ...element.attr,
+        style: {
+          margin: "10px 0px"
+        },
         className: `content-editable ${isEmpty ? "empty" : ""}`
         // placeholder="Heading 2"
         ,
         children: children
       });
+    case "title":
+      return /*#__PURE__*/_jsx("h3", {
+        ...attributes,
+        ...element.attr,
+        style: {
+          margin: "10px 0px"
+        },
+        className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
+        children: children
+      });
     case "headingThree":
       return /*#__PURE__*/_jsx("h3", {
         ...attributes,
         ...element.attr,
+        style: {
+          margin: "10px 0px"
+        },
         className: `content-editable ${isEmpty ? "empty" : ""}`
         // placeholder="Heading 3"
         ,
         children: children
       });
+    case "headingFour":
+      return /*#__PURE__*/_jsx("h4", {
+        ...attributes,
+        ...element.attr,
+        style: {
+          margin: "10px 0px"
+        },
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        children: children
+      });
+    case "headingFive":
+      return /*#__PURE__*/_jsx("h5", {
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
+        children: children
+      });
+    case "headingSix":
+      return /*#__PURE__*/_jsx("h6", {
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        children: children
+      });
+    case "headingSeven":
+      return /*#__PURE__*/_jsx("h7", {
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
+        children: children
+      });
     case "blockquote":
       return /*#__PURE__*/_jsx("blockquote", {
         ...attributes,
@@ -305,7 +370,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("li", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        className: `content-editable ${isEmpty ? "empty" : ""} m-0`,
         placeholder: "List",
         style: {
           color: firstChildren?.color
@@ -322,7 +387,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("p", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`
+        className: `content-editable ${isEmpty ? "empty" : ""} m-0`
         // placeholder="paragraph"
         ,
         children: children
@@ -342,6 +407,10 @@ export const getBlock = props => {
         ...props
       });
     default:
-      return null;
+      return /*#__PURE__*/_jsx(SimpleText, {
+        ...props,
+        isEmpty: isEmpty,
+        isChatEditor: true
+      });
   }
 };

package/dist/Editor/utils/customHooks/useResize.js

@@ -4,7 +4,10 @@ const useResize = ({
   parentDOM,
   size: allSize,
   isGrid,
-  onChange
+  onChange,
+  MH,
+  MW,
+  MP
 }) => {
   const device = getDevice(window.innerWidth);
   const defaultSize = getBreakPointsValue(allSize);
@@ -52,9 +55,9 @@ const useResize = ({
       const cWP = calcWidth / width * 100;
       const calcHeight = (parseInt(currentSize.height) || height) + e.movementY;
       const calc = {
-        width: Math.max(calcWidth, 140),
-        height: Math.max(calcHeight, 50),
-        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, 15)
+        width: Math.max(calcWidth, MW || 140),
+        height: Math.max(calcHeight, MH || 50),
+        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, MP || 15)
       };
       latest = calc;
       return calc;

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -2,7 +2,8 @@ import { useState } from "react";
 const useTableResize = ({
   parentDOM,
   size: defaultSize,
-  onDone
+  onDone,
+  minMaxProps = {}
 }) => {
   const {
     width
@@ -38,10 +39,13 @@ const useTableResize = ({
     setIsDone(1);
   };
   const onMouseMove = e => {
+    const {
+      minWidth
+    } = minMaxProps || {};
     setSize(currentSize => {
       const calcWidth = currentSize?.width + e.movementX;
       return {
-        width: calcWidth,
+        width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
         height: currentSize.height + e.movementY,
         widthInPercent: calcWidth / width * 100
       };

package/dist/Editor/utils/dataView.js

@@ -0,0 +1,43 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+const getDefaultDatView = () => ({
+  type: "dataView",
+  title: "",
+  layouts: [{
+    key: "view1",
+    type: "table",
+    label: "Table 1 View",
+    value: "table1",
+    filter: [],
+    sort: []
+  }],
+  properties: [{
+    key: "column1",
+    label: "Task",
+    type: "text",
+    visible: true,
+    default: true
+  }],
+  rows: [{
+    id: new Date().getTime(),
+    column1: ""
+  }],
+  children: [{
+    type: "viewData",
+    children: [{
+      text: ""
+    }]
+  }]
+});
+export const insertDataView = editor => {
+  try {
+    Transforms.insertNodes(editor, {
+      ...getDefaultDatView()
+    }, {
+      at: editor?.selection.focus.path
+    });
+    insertNewLine(editor);
+  } catch (err) {
+    console.log(err);
+  }
+};

package/dist/Editor/utils/embed.js

@@ -1,5 +1,5 @@
 import { Transforms } from "slate";
-import insertNewLine from "./insertNewLine";
+import insertNewLine, { insertNewLineAfterCurrentPath } from "./insertNewLine";
 export const insertDefaultEmbed = (editor, type, defaultURL = "", extProps = {}) => {
   try {
     const url = defaultURL ? defaultURL : type === "image" ? "" : "";
@@ -56,6 +56,7 @@ export const insertEmbed = (editor, embedData, format) => {
       at: editor.selection.anchor.path
     });
     insertNewLine(editor);
+    insertNewLineAfterCurrentPath(editor);
   } catch (err) {
     console.log(err);
   }

package/dist/Editor/utils/events.js

@@ -5,7 +5,6 @@ import { insertAccordion } from "./accordion";
 import { isListItem } from "./helper";
 import RnDCtrlCmds from "./RnD/RnDCtrlCmds";
 import EDITORCMDS from "../common/EditorCmds";
-import { ReactEditor } from "slate-react";
 const HOTKEYS = {
   b: "bold",
   i: "italic",

package/dist/Editor/utils/font.js

@@ -60,7 +60,14 @@ export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
   };
 });
 export const headingMap = {
-  "headingOne": "32px",
-  "headingTwo": "24px",
-  "headingThree": "19px"
-};
+  headingOne: "32px",
+  headingTwo: "24px",
+  headingThree: "19px"
+};
+export const fontWeightOptions = [{
+  text: "Bold",
+  value: "500"
+}, {
+  text: "Bolder",
+  value: "600"
+}];

package/dist/Editor/utils/formfield.js

@@ -1,5 +1,5 @@
 import { Transforms } from "slate";
-export const formField = () => {
+export const formField = data => {
   return {
     type: "form-field",
     grid: 6,
@@ -12,14 +12,18 @@ export const formField = () => {
       text: ""
     }],
     field_type: "text",
-    bgColor: "rgba(255, 255, 255, 1)",
-    borderColor: "#ccc",
+    bgColor: data?.bgColor ? data?.bgColor : "rgba(255, 255, 255, 1)",
+    borderColor: data?.borderColor ? data?.borderColor : "#ccc",
     bannerSpacing: {
       left: 16,
       right: 16,
       top: 16,
       bottom: 16
-    }
+    },
+    fontFamily: data?.fontFamily ? data?.fontFamily : "",
+    textSize: data?.textSize ? data?.textSize : "",
+    textColor: data?.textColor ? data?.textColor : "",
+    fontWeight: data?.fontWeight ? data?.fontWeight : "500"
   };
 };
 export const insertGridItem = editor => {