@flozy/editor 4.1.9 → 4.2.1

package/dist/Editor/ChatEditor.js

@@ -46,7 +46,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [deboundedValue] = useDebounce(value, 500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
-      needLayout
+      needLayout,
+      isChatEditor: true
     });
   }, []);
   const isReadOnly = readOnly === "readonly";

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -449,7 +449,8 @@ const FreeGrid = props => {
         props: {
           editor,
           path,
-          classes
+          classes,
+          customProps
         }
       }
     },
@@ -471,7 +472,7 @@ const FreeGrid = props => {
         "--cols": `100%`,
         "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
         background: sectionBgColor,
-        backgroundImage: `url('${sectionBackgroundImage}')`,
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         backgroundSize: "cover"
       },
       children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -200,10 +200,11 @@ const FreeGridBox = props => {
           ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
         },
         background: sectionBgColor,
-        backgroundImage: `url(${sectionBackgroundImage})`,
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderStyle: borderStyle || "solid"
+        borderStyle: borderStyle || "solid",
+        backgroundSize: "cover"
       },
       children: children
     })

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -1,51 +1,65 @@
 import React from "react";
-import { Box, List, ListItemButton } from "@mui/material";
+import { Box, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const FREE_GRID_ELEMENTS = [{
+  actionType: "addText",
+  label: "Text",
+  icon: "text"
+}, {
+  actionType: "addButton",
+  label: "Button",
+  icon: "button"
+}, {
+  actionType: "addImage",
+  label: "Image",
+  icon: "image"
+}, {
+  actionType: "addVideo",
+  label: "Embed or Video",
+  icon: "embed"
+}, {
+  actionType: "addBox",
+  label: "Box",
+  icon: "colorbox"
+}, {
+  actionType: "addTable",
+  label: "Table",
+  icon: "table"
+}, {
+  actionType: "addCode",
+  label: "Code",
+  icon: "embedScript"
+}, {
+  actionType: "addForm",
+  label: "Form",
+  icon: "form"
+}, {
+  actionType: "addAppHeader",
+  label: "App Header",
+  icon: "appHeader"
+}];
 const AddElement = props => {
   const {
     handleClick
   } = props;
   return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsxs(List, {
+    children: /*#__PURE__*/_jsx(List, {
       className: "item-list-wrpr",
-      children: [/*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addText"),
-        children: "Text"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addButton"),
-        children: "Button"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addImage"),
-        children: "Image"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addVideo"),
-        children: "Embed or Video"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addTable"),
-        children: "Table"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addCode"),
-        children: "Code"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addBox"),
-        children: "Box"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addForm"),
-        children: "Form"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addAppHeader"),
-        children: "App Header"
-      })]
+      children: FREE_GRID_ELEMENTS.map(m => {
+        return /*#__PURE__*/_jsxs(ListItemButton, {
+          className: "item-wrapper",
+          onClick: handleClick(m.actionType),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: m.icon
+            })
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: m.label
+          })]
+        }, m.actionType);
+      })
     })
   });
 };

package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js

@@ -8,7 +8,8 @@ const SectionSettings = props => {
   const {
     editor,
     path,
-    classes
+    classes,
+    customProps
   } = props;
   const element = Node.get(editor, path);
   const styleMaps = sectionStyle?.filter(f => !f?.hideOnFGS);
@@ -38,7 +39,7 @@ const SectionSettings = props => {
         value: m.value,
         element: element,
         onChange: onChange,
-        customProps: {},
+        customProps: customProps,
         handleClose: handleClose
       }, `tab_${m.value}_$${i}`);
     })

package/dist/Editor/Styles/EditorStyles.js

@@ -289,6 +289,7 @@ const editorStyles = ({
   fullScreenWrapper: {
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
+      paddingTop: '20px',
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -25,8 +25,11 @@ const useOptionsPopupStyle = () => ({
       }
     },
     "& .item-wrapper": {
-      padding: "12px",
+      padding: "8px",
       fontFamily: "sans-serif",
+      "& .MuiListItemIcon-root": {
+        minWidth: "30px"
+      },
       "&.title": {
         display: "flex",
         fontWeight: "bold",

package/dist/Editor/common/RnD/VirtualElement/index.js

@@ -5,6 +5,64 @@ import updateAutoProps from "./updateAutoProps";
 import { calculateGridArea } from "../Utils/gridDropItem";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ROOT_ITEM_CLASS = ".freegrid-item.path-3";
+
+// Function to group items by path and calculate heights
+function groupByPathAndCalculateHeight(data) {
+  const root = {};
+  const heightData = {};
+
+  // Step 1: Group items based on their path
+  data.forEach(item => {
+    const segments = item.path.split("|");
+    let current = root;
+    segments.forEach((segment, index) => {
+      if (!current[segment]) {
+        current[segment] = {
+          children: {},
+          props: {
+            height: 0
+          }
+        };
+      }
+      if (index === segments.length - 1) {
+        // Assign the properties of the item including height
+        current[segment] = {
+          ...item,
+          children: current[segment].children
+        };
+      }
+      current = current[segment].children;
+    });
+  });
+
+  // Step 2: Recursively calculate the height of each parent based on children
+  const calculateHeight = node => {
+    if (!node.children || Object.keys(node.children).length === 0) {
+      // Base case: If there are no children, return the node's height
+      return node.props.height;
+    }
+
+    // Calculate the height by summing the heights of all children
+    let totalHeight = 0;
+    Object.values(node.children).forEach(child => {
+      totalHeight += calculateHeight(child);
+    });
+
+    // Update the parent's height to be the total height of its children
+    node.props.height = totalHeight;
+    if (node?.path) {
+      heightData[node.path] = totalHeight;
+    }
+    return totalHeight;
+  };
+
+  // Start calculation from the root
+  Object.values(root).forEach(node => calculateHeight(node));
+  return {
+    root,
+    heightData
+  };
+}
 const VirtualElement = props => {
   const classes = useVirtualElementStyles();
   const {
@@ -19,9 +77,10 @@ const VirtualElement = props => {
     if (virtualRef?.current) {
       setTimeout(() => {
         const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
+        const groupData = groupByPathAndCalculateHeight(allData);
         // it should trigger by auto alignment or on clicking mobile view change
-        updateAutoProps(editor, allData, "xs");
-      }, 0);
+        updateAutoProps(editor, allData, "xs", groupData);
+      }, 100);
     }
   }, [updated_at, virtualRef?.current]);
   const calculateProps = (curPath, dom, domClass, allData) => {
@@ -35,11 +94,12 @@ const VirtualElement = props => {
     };
     const itemsData = [];
     const items = dom.querySelectorAll(domClass);
-    let sectionHeight = 0;
+    const nextItemPathLength = curPath?.split("|").length + 2;
+    let sectionHeight = 12;
     for (let i = 0; i < items.length; i++) {
       const itemRect = items[i]?.getBoundingClientRect();
       if (items[i]?.classList.contains("type_box")) {
-        allData = calculateProps(items[i]?.dataset.path, items[i], ".freegrid-item", allData);
+        allData = calculateProps(items[i]?.dataset.path, items[i], `.freegrid-item.path-${nextItemPathLength}`, allData);
       } else {
         const y = Math.abs(rect.top - itemRect?.top);
         itemsData.push({

package/dist/Editor/common/RnD/VirtualElement/styles.js

@@ -10,6 +10,7 @@ const useVirtualElementStyles = () => ({
     right: 0,
     top: 0,
     "& .freegrid-item": {
+      position: "relative !important",
       gridArea: "none !important",
       width: "calc(100% - 48px) !important",
       height: "auto !important",

package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js

@@ -1,6 +1,7 @@
 import { Node, Transforms } from "slate";
-const updateAutoProps = (editor, datas = [], breakpoint = "") => {
+const updateAutoProps = (editor, datas = [], breakpoint = "", groupData) => {
   try {
+    // const { heightData } = groupData;
     for (let i = 0; i < datas.length; i++) {
       const {
         path,

package/dist/Editor/hooks/useMentions.js

@@ -13,7 +13,7 @@ const getStartEnd = ({
     // Get start and end, modify it as we move along.
     let [start, end] = Range.edges(selection);
 
-    // Move backwards
+    // Move backwards to find the start of the word
     while (true) {
       const before = Editor.before(editor, start, {
         unit: "character"
@@ -22,16 +22,15 @@ const getStartEnd = ({
         anchor: before,
         focus: start
       });
-      if (before && wordBefore && SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
-        start = before;
-        if (start.offset === 0) {
-          // Means we've wrapped to beginning of another block
+      if (before) {
+        if (wordBefore.trim() === "") {
+          break;
+        } else if (SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
+          start = before;
+        } else {
+          start = before;
           break;
         }
-      } else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
-        // reached the character end
-        start = before;
-        break;
       } else {
         break;
       }
@@ -41,11 +40,38 @@ const getStartEnd = ({
       focus: end
     };
     const word = Editor.string(editor, wordRange);
+    const firstChar = word[0];
+
+    // Handle the commands
+    if (firstChar === '@') {
+      // Only trigger @ if preceded by a space
+      const isPrecededBySpace = Editor.string(editor, {
+        anchor: {
+          path: start.path,
+          offset: start.offset - 1
+        },
+        focus: start
+      }).trim() === "";
+      if (isPrecededBySpace) {
+        return {
+          word,
+          search: word.substring(1),
+          target: wordRange,
+          type: TYPES[firstChar]
+        };
+      }
+    } else if (firstChar === '/') {
+      return {
+        word,
+        search: word.substring(1),
+        target: wordRange,
+        type: TYPES[firstChar]
+      };
+    }
     return {
-      word,
-      search: word?.substring(1, word.length),
-      target: wordRange,
-      type: TYPES[word[0]]
+      word: "",
+      wordRange: null,
+      type: null
     };
   } catch (err) {
     return {

package/dist/Editor/hooks/withCommon.js

@@ -9,7 +9,12 @@ import withLayout from "../plugins/withLayout";
 import withHtml from "../plugins/withHTML";
 import withErrorHandling from "./withErrorHandling";
 import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
-const withCommon = (props, rest = {}) => {
-  return rest.needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
+const withCommon = (props, {
+  needLayout = false,
+  isChatEditor = false
+}) => {
+  const editor = needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
+  editor.isChatEditor = isChatEditor;
+  return editor;
 };
 export default withCommon;

package/dist/Editor/plugins/withHTML.js

@@ -101,6 +101,9 @@ const withHtml = editor => {
     return element.type === "image" ? true : isVoid(element);
   };
   editor.insertData = data => {
+    if (editor.isChatEditor) {
+      return;
+    }
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);

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

@@ -365,6 +365,6 @@ export const getBlock = props => {
         ...props
       });
     default:
-      return;
+      return null;
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.1.9",
+  "version": "4.2.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"