@flozy/editor 10.0.3 → 10.0.5

package/dist/Editor/common/Uploader.js

@@ -37,6 +37,9 @@ const Uploader = props => {
       onUploaded(result?.imageURL[0]);
     }
   };
+  const {
+    translation
+  } = customProps;
   const onRemoveBG = () => {
     setBase64(null);
     onUploaded("none");
@@ -68,14 +71,14 @@ const Uploader = props => {
           }), /*#__PURE__*/_jsx(Grid, {
             className: "removeImageText",
             onClick: onRemoveBG,
-            children: "REMOVE"
+            children: translation("Remove")
           })]
         });
       default:
         return /*#__PURE__*/_jsx(Grid, {
           className: "removeImageText",
           onClick: onRemoveBG,
-          children: "REMOVE"
+          children: translation("Remove")
         });
     }
   };
@@ -83,7 +86,7 @@ const Uploader = props => {
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
-      children: uploading ? "Uploading..." : ""
+      children: uploading ? translation("uploadingText") : ""
     }), /*#__PURE__*/_jsx(Grid, {
       container: true,
       sx: classes.uploadContainer,
@@ -116,11 +119,11 @@ const Uploader = props => {
                 onChange: handleChange
               }), /*#__PURE__*/_jsx(Icon, {
                 icon: "fileUpload"
-              }), /*#__PURE__*/_jsxs("span", {
+              }), /*#__PURE__*/_jsx("span", {
                 style: {
                   paddingLeft: "8px"
                 },
-                children: ["upload ", title || "image"]
+                children: `${translation("upload")} ${translation(title) || translation("image")}`
               })]
             })
           })

package/dist/Editor/helper/index.js

@@ -276,8 +276,10 @@ export const bringItemToFB = (editor, {
     } = itemNode;
     let arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
     arrangeIndex = moveFront ? arrangeIndex + 1 : arrangeIndex - 1;
+    arrangeIndex = Math.min(arrangeIndex, editor.children.length);
+    arrangeIndex = Math.max(1, arrangeIndex); // to avoid negative z-index
     Transforms.setNodes(editor, {
-      zIndex: Math.min(arrangeIndex, editor.children.length)
+      zIndex: arrangeIndex
     }, {
       at: path
     });
@@ -306,7 +308,7 @@ export const debounce = function (func, wait, immediate) {
 };
 export const getTextColor = (color = "") => {
   return color?.indexOf("gradient") >= 0 ? {
-    background: color?.concat("text"),
+    background: `${color?.concat("text")} !important`,
     WebkitBackgroundClip: "text",
     WebkitTextFillColor: "transparent !important",
     color: "transparent !important",
@@ -321,7 +323,29 @@ export const getTextColor = (color = "") => {
       color: "#000 !important"
     }
   } : {
-    color
+    color: `${color} !important`,
+    WebkitTextFillColor: "unset !important"
+  };
+};
+export const pageTextStyle = (color = "") => {
+  return color?.indexOf("gradient") >= 0 ? {
+    background: color?.concat("text"),
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    color: "transparent",
+    caretColor: "black",
+    "& span": {
+      color: "transparent",
+      "& ::selection": {
+        color: "#000"
+      }
+    },
+    "& ::selection": {
+      color: "#000"
+    }
+  } : {
+    color: color,
+    WebkitTextFillColor: "unset"
   };
 };
 export const getBorderColor = (borderColor = "") => {

package/dist/Editor/hooks/useAutoScroll.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+function useAutoScroll(speed = 10, scrollElementId = "slate-wrapper-scroll-container") {
+  const scrollInterval = useRef(null);
+  function getScrollElement() {
+    return document.getElementById(scrollElementId) || window;
+  }
+  function startAutoScroll(direction) {
+    if (scrollInterval.current) return; // Prevent multiple intervals
+
+    const scrollContainer = getScrollElement();
+    scrollInterval.current = setInterval(() => {
+      scrollContainer.style.scrollBehavior = "auto";
+      if (direction === "up") {
+        scrollContainer.scrollBy(0, -speed);
+      } else if (direction === "down") {
+        scrollContainer.scrollBy(0, speed);
+        scrollContainer.style.scrollBehavior = "smooth";
+      }
+    }, 16); // Approx 60fps
+  }
+
+  function stopAutoScroll() {
+    if (scrollInterval.current) {
+      clearInterval(scrollInterval.current);
+      scrollInterval.current = null;
+      const scrollContainer = getScrollElement();
+      scrollContainer.style.scrollBehavior = "smooth";
+    }
+  }
+  useEffect(() => {
+    return () => stopAutoScroll(); // Cleanup on unmount
+  }, []);
+  return {
+    startAutoScroll,
+    stopAutoScroll
+  };
+}
+export default useAutoScroll;

package/dist/Editor/plugins/withHTML.js

@@ -261,12 +261,13 @@ const withHtml = editor => {
         return;
       }
       const formattedFragment = normalizeFragment ? normalizeFragment(fragment) : fragment;
-      let is_img_table = false;
-      formattedFragment.map(f => {
-        if (f.type === "image" || f?.type?.includes("table")) {
-          is_img_table = true;
-        }
-      });
+
+      // let is_img_table = false;
+      // formattedFragment.map((f) => {
+      //   if (f.type === "image" || f?.type?.includes("table")) {
+      //     is_img_table = true;
+      //   }
+      // });
 
       // if (editor.isChatEditor && is_img_table) {
       //   return;

package/dist/Editor/plugins/withLayout.js

@@ -27,7 +27,8 @@ const ORDERS_LAYOUT_VALIDATIONS = {
 };
 const withLayout = editor => {
   const {
-    normalizeNode
+    normalizeNode,
+    translation
   } = editor;
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
@@ -39,7 +40,7 @@ const withLayout = editor => {
           const title = {
             type: "title",
             children: [{
-              text: "Untitled"
+              text: translation ? translation("Untitled") : "Untitled"
             }]
           };
           Transforms.insertNodes(editor, title, {

package/dist/Editor/plugins/withLinks.js

@@ -11,6 +11,15 @@ const withLinks = editor => {
   // remove empty inline
   editor.normalizeNode = entry => {
     const [node, path] = entry;
+    if (!editor.children.length && !editor.isChatEditor) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      });
+      return;
+    }
     if (Element.isElement(node) && node.type === "paragraph") {
       const children = Array.from(Node.children(editor, path));
       for (const [child, childPath] of children) {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range, Text, Element } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -237,7 +237,7 @@ export const getMarked = (leaf, children, theme) => {
         background: leaf.bgColor
       },
       children: /*#__PURE__*/_jsx(Box, {
-        className: className,
+        className: `${className} leaf-item`,
         component: "span",
         sx: {
           ...groupByBreakpoint({
@@ -258,11 +258,16 @@ export const getMarked = (leaf, children, theme) => {
           //   lg: sizeMap[leaf.fontSize] || leaf.fontSize,
           //   ...getBreakPointsValue(leaf.fontSize, null, "overrideText"),
           // },
-          ...textStyles,
+          '& span[data-slate-string="true"]': {
+            ...textStyles
+          },
           fontFamily: family,
           fontWeight: leaf.fontWeight,
           WebkitTextFillColor: "unset !important"
         },
+        style: {
+          "--fontSize_xs": leaf?.fontSize?.xs || "auto"
+        },
         children: children
       })
     });
@@ -284,17 +289,21 @@ export const getMarked = (leaf, children, theme) => {
 export const getBlock = props => {
   const {
     element,
-    children
+    children,
+    customProps
   } = props;
   const attributes = props.attributes ?? {};
   const isEmpty = isEmptyTextNode(element);
+  const {
+    translation
+  } = customProps;
   switch (element.type) {
     case "headingOne":
       return /*#__PURE__*/_jsxs("h1", {
         ...attributes,
         ...element.attr,
         className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
-        placeholder: "Heading 1",
+        placeholder: translation("Heading 1"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
         })]
@@ -304,7 +313,7 @@ export const getBlock = props => {
         ...attributes,
         ...element.attr,
         className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
-        placeholder: "Heading 2",
+        placeholder: translation("Heading 2"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
         })]
@@ -314,7 +323,7 @@ export const getBlock = props => {
         ...attributes,
         ...element.attr,
         className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
-        placeholder: "Heading 3",
+        placeholder: translation("Heading 3"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
         })]
@@ -324,7 +333,7 @@ export const getBlock = props => {
         ...attributes,
         ...element.attr,
         className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
-        placeholder: "Heading 4",
+        placeholder: translation("Heading 4"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
         })]
@@ -334,7 +343,7 @@ export const getBlock = props => {
         ...attributes,
         ...element.attr,
         className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
-        placeholder: "Heading 5",
+        placeholder: translation("Heading 5"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
         })]
@@ -344,7 +353,7 @@ export const getBlock = props => {
         ...attributes,
         ...element.attr,
         className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
-        placeholder: "Heading 6",
+        placeholder: translation("Heading 6"),
         children: [children, /*#__PURE__*/_jsx("span", {
           contentEditable: false
         })]
@@ -414,7 +423,7 @@ export const getBlock = props => {
         ...attributes,
         ...element.attr,
         className: `content-editable ${isEmpty ? "empty" : ""}`,
-        placeholder: "List",
+        placeholder: translation("List"),
         style: {
           color: firstChildren?.color
         },

package/dist/Editor/utils/brains.js

@@ -17,8 +17,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).toLowerCase().replace(/\/(?:b(?:rain|rai|ra|r)?)?/g, "").trim();
     if (cleanedText) {
       Transforms.delete(editor, {
         at: Editor.range(editor, currentPath)

package/dist/Editor/utils/freegrid.js

@@ -1,5 +1,4 @@
 import { Transforms } from "slate";
-import insertNewLine from "./insertNewLine";
 import scrollToNewSection from "../helper/RnD/scrollToNewSection";
 const Default_text_Node = {
   type: "paragraph",
@@ -22,8 +21,8 @@ export const insertFreeGridItem = (childType, childTypeNode, extProps = {}, type
     top_xs: 24,
     marginTop_xs: 12,
     width_xs: 250,
-    height_xs: 300,
-    gridArea_xs: "1 / 1 / 2 / 2",
+    // height_xs: 300,
+    // gridArea_xs: "1 / 1 / 2 / 2",
     sectionBgColor: "rgb(240, 108, 131)",
     ...(extProps || {})
   };
@@ -166,5 +165,5 @@ export const insertFreeGrid = (editor, path, extProps) => {
     at: newPath
   });
   scrollToNewSection(editor, newPath, extProps);
-  insertNewLine(editor);
+  // insertNewLine(editor);
 };

package/dist/Editor/utils/helper.js

@@ -168,11 +168,11 @@ export const handleInsertLastElement = (event, editor) => {
   }
   const hasPath = event.target.dataset.path;
   const lastElement = editor.children[editor.children?.length - 1];
-  const isFreeGrid = lastElement?.type === "freegrid" || lastElement?.children[0]?.type === "freegrid";
+  const isFreeGrid = lastElement?.type === "freegrid" || lastElement?.children?.[0]?.type === "freegrid";
   if (isFreeGrid) {
     return;
   }
-  const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => BLOCKS.includes(c.type));
+  const isLastElementEmpty = lastElement && lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => BLOCKS.includes(c.type));
   if (!ReactEditor.isFocused(editor)) {
     if (isLastElementEmpty) {
       if (hasPath) {

package/package.json

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