@flozy/editor 4.1.4 → 4.1.6

package/dist/Editor/ChatEditor.js

@@ -248,6 +248,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       restVal
     });
   };
+  const handlePaste = event => {
+    const items = event.clipboardData.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith("image/")) {
+        event.preventDefault(); // Prevent the default paste behavior
+        return; // Exit early to keep the editor empty
+      }
+    }
+  };
+
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -267,7 +277,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         placeholder: "Start typing ...",
         spellCheck: true,
         onBlur: handleBlur,
-        onKeyDown: onKeyDown
+        onKeyDown: onKeyDown,
+        onPaste: handlePaste
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,

package/dist/Editor/Editor.css

@@ -923,7 +923,7 @@ blockquote {
 }
 
 .sliderInput {
-  width: 30px;
+  width: 66px !important;
   padding: 2px 10px;
   margin-left: 18px;
   box-shadow: 0px 4px 16px 0px #0000000d;

package/dist/Editor/Elements/AI/AIInput.js

@@ -81,7 +81,7 @@ function AIInput({
     const selectWrapper = refs?.length ? refs[1]?.current : null;
     const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
     if (selectWrapper && slateWrapper) {
-      const height = slateWrapper.offsetHeight - selectWrapper.offsetHeight - 80;
+      const height = slateWrapper.offsetHeight - selectWrapper.offsetHeight - 170;
       setContentHeight(height + "px");
     }
   }, [refs, generatedText]);

package/dist/Editor/Elements/AI/Styles.js

@@ -32,6 +32,9 @@ const Styles = theme => ({
       color: "#000",
       fontSize: "14px !important",
       fontFamily: '"Inter", sans-serif',
+      "&:focus-visible": {
+        border: "none !important"
+      },
       "&::placeholder": {
         color: "#94A3B8",
         opacity: 1 /* Firefox */,
@@ -92,7 +95,8 @@ const Styles = theme => ({
   generatedText: {
     margin: "8px",
     overflow: "auto",
-    fontSize: "inherit"
+    fontSize: "inherit",
+    color: `${theme?.palette?.editor?.textColor} !important`
   },
   customSelectWrapper: {
     width: "fit-content",

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -37,14 +37,14 @@ const FormTextArea = props => {
           ...getTRBLBreakPoints(bannerSpacing)
         },
         height: height || "150px",
-        borderColor: borderColor || "transparent",
+        borderColor: `${borderColor || "transparent"} !important`,
         borderWidth: borderWidth || "1px",
         borderRadius: {
           ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
         },
         borderStyle: borderStyle || "solid",
-        color: textColor || "#000",
-        background: bgColor || "transparent",
+        color: `${textColor || "#000"} !important`,
+        background: `${bgColor || "transparent"} !important`,
         fontSize: '14px'
       }
     })

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

@@ -211,6 +211,11 @@ const useFreeGridStyles = ({
           backgroundColor: "#FFF",
           overflow: "hidden"
         },
+        "& .fgi_type_text": {
+          "& .edt-headings": {
+            margin: "0px"
+          }
+        },
         /** element toolbar hide */
         "& .element-toolbar": {
           display: "none"

package/dist/Editor/Toolbar/PopupTool/FullViewCard.js

@@ -35,7 +35,7 @@ const FullViewCard = props => {
       sx: classes.paperOverrides,
       className: "paperOverrides",
       children: /*#__PURE__*/_jsx(Box, {
-        sx: classes.buttonCardMediaWrpr,
+        sx: classes.fullViewCardMediaWrpr,
         onClick: onSelectTemplate(m),
         children: /*#__PURE__*/_jsx("div", {
           className: "img-wrapper",

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -511,17 +511,17 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: "5px",
+    padding: '5px',
     position: "relative",
     margin: "8px",
-    marginBottom: "0px",
-    "& .img-wrapper": {
+    height: "50px",
+    '& .img-wrapper': {
       "&:hover": {
-        padding: "0px 2px 0px 2px",
-        backgroundColor: "#E9F3FE",
-        border: "1px solid #2563EB40",
-        borderRadius: "5px",
-        height: "100%",
+        padding: '0px 2px 0px 2px',
+        backgroundColor: '#E9F3FE',
+        border: '1px solid #2563EB40',
+        borderRadius: '5px',
+        // height: "100%",
         margin: "0px"
         // "& .template-card-action": {
         //   display: "flex",
@@ -643,6 +643,21 @@ const usePopupStyle = theme => ({
     "& fieldset": {
       border: "none !important"
     }
+  },
+  fullViewCardMediaWrpr: {
+    padding: '5px',
+    position: "relative",
+    margin: "8px",
+    height: "140px",
+    '& .img-wrapper': {
+      "&:hover": {
+        padding: '0px 2px 0px 2px',
+        backgroundColor: '#E9F3FE',
+        border: '1px solid #2563EB40',
+        borderRadius: '5px',
+        margin: "0px"
+      }
+    }
   }
 });
 export default usePopupStyle;

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -14,16 +14,17 @@ const FontLoader = props => {
     let currentIndex = 0;
     let retryCount = 0;
     function loadNextBatch() {
-      if (currentIndex >= families.length) {
+      if (currentIndex >= families?.length) {
         console.log('All fonts have been loaded');
         return;
       }
-      const batch = families.slice(currentIndex, currentIndex + batchSize);
+      const batch = families?.slice(currentIndex, currentIndex + batchSize);
       const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
       WebFont.load({
         google: {
           families: [...batchWithWeights]
         },
+        classes: false,
         active: () => {
           console.log(`Fonts loaded successfully: ${batch}`);
           currentIndex += batchSize;
@@ -52,11 +53,11 @@ const FontLoader = props => {
     return fontFamily.replace(/\\/g, '').replace(/['"]/g, '');
   };
   useEffect(() => {
-    let families = ["PoppinsRegular"];
+    let families = [...defaultFonts];
     if (!readOnly) {
-      otherProps.services("listGoogleFont", []).then(data => {
-        families = [...defaultFonts, ...(data?.data || ['PoppinsRegular'])];
-        const filteredfamilies = families.filter(font => !font.includes("Material"));
+      otherProps?.services("listGoogleFont", []).then(data => {
+        families = [...families, ...(data?.data || [])];
+        const filteredfamilies = families?.filter(font => !font?.includes("Material"));
         setFontFamilies({
           id: 1,
           format: "fontFamily",
@@ -68,11 +69,11 @@ const FontLoader = props => {
         console.log(err);
       });
     } else {
-      const elements = Array.from(document.querySelectorAll("*"));
+      const elements = Array.from(document?.querySelectorAll("*"));
       const fontSet = new Set();
       elements.forEach(element => {
-        const computedStyles = window.getComputedStyle(element);
-        fontSet.add(sanitizeFontFamily(computedStyles.fontFamily));
+        const computedStyles = window?.getComputedStyle(element);
+        fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
       });
       families = Array.from(fontSet);
       loadFontsInBatches(families);

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -25,8 +25,22 @@ const Settings = props => {
     children: /*#__PURE__*/_jsx(Popper, {
       open: open,
       anchorEl: anchorEl,
-      placement: placement,
+      placement: "auto-start",
       sx: classes.root,
+      modifiers: [{
+        name: "flip",
+        enabled: true,
+        options: {
+          altBoundary: true,
+          rootBoundary: "viewport"
+        }
+      }, {
+        name: "preventOverflow",
+        enabled: true,
+        options: {
+          padding: 8
+        }
+      }],
       children: /*#__PURE__*/_jsxs(Paper, {
         className: "papper-root",
         children: [/*#__PURE__*/_jsxs(Typography, {

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

@@ -18,43 +18,54 @@ const VirtualElement = props => {
   useEffect(() => {
     if (virtualRef?.current) {
       setTimeout(() => {
-        calculateProps();
+        const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
+        console.log(allData);
+        // it should trigger by auto alignment or on clicking mobile view change
+        updateAutoProps(editor, allData, "xs");
       }, 0);
     }
   }, [updated_at, virtualRef?.current]);
-  const calculateProps = () => {
-    const rect = virtualRef?.current?.getBoundingClientRect();
+  const calculateProps = (curPath, dom, domClass, allData) => {
+    const rect = dom?.getBoundingClientRect();
+    const sectionRect = virtualRef?.current?.getBoundingClientRect();
     const sectionProps = {
-      path,
+      path: curPath,
       props: {
         height: rect.height
       }
     };
     const itemsData = [];
-    const items = virtualRef?.current?.querySelectorAll(ROOT_ITEM_CLASS);
+    const items = dom.querySelectorAll(domClass);
     let sectionHeight = 0;
     for (let i = 0; i < items.length; i++) {
       const itemRect = items[i]?.getBoundingClientRect();
-      const y = Math.abs(rect.top - itemRect?.top);
-      itemsData.push({
-        path: items[i]?.dataset.path,
-        props: {
-          top: y,
-          left: 24,
-          marginTop: 12,
-          width: itemRect?.width,
-          height: itemRect?.height,
-          gridArea: calculateGridArea(y)
-        }
-      });
-      sectionHeight += itemRect?.height;
+      if (items[i]?.classList.contains("type_box")) {
+        allData = calculateProps(items[i]?.dataset.path, items[i], ".freegrid-item", allData);
+      } else {
+        const y = Math.abs(rect.top - itemRect?.top);
+        itemsData.push({
+          path: items[i]?.dataset.path,
+          props: {
+            top: y,
+            left: 24,
+            marginTop: 12,
+            width: itemRect?.width,
+            height: itemRect?.height,
+            gridArea: calculateGridArea(y)
+          }
+        });
+        sectionHeight += itemRect?.height;
+      }
+    }
+    if (dom?.classList.contains("type_box")) {
+      const y = Math.abs(sectionRect.top - rect?.top);
+      sectionProps.props.gridArea = calculateGridArea(y);
     }
     if (sectionHeight > sectionProps?.props?.height) {
       sectionProps.props.height = sectionHeight;
     }
-    const allData = [sectionProps, itemsData]?.flat();
-    // it should trigger by auto alignment or on clicking mobile view change
-    updateAutoProps(editor, allData, "xs");
+    allData = [sectionProps, [...allData, ...itemsData]]?.flat();
+    return allData;
   };
   const getItems = () => {
     const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -136,7 +136,7 @@ const BannerSpacing = props => {
                 type: "number",
                 name: "top",
                 value: pro_value?.top,
-                className: "borderInput",
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.topRight
                 },
@@ -149,7 +149,7 @@ const BannerSpacing = props => {
                 type: "number",
                 name: "right",
                 value: pro_value?.right,
-                className: "borderInput",
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomLeft
                 },
@@ -162,7 +162,7 @@ const BannerSpacing = props => {
                 type: "number",
                 name: "bottom",
                 value: pro_value?.bottom,
-                className: "borderInput",
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.bottomRight
                 },
@@ -174,8 +174,8 @@ const BannerSpacing = props => {
               children: /*#__PURE__*/_jsx("input", {
                 type: "number",
                 name: "left",
-                className: "borderInput",
                 value: pro_value?.left,
+                className: "borderInput removeScroll",
                 style: {
                   ...squreStyle.topLeft
                 },

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -257,7 +257,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("h1", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 1",
         children: children
       });
@@ -265,7 +265,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("h2", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 2",
         children: children
       });
@@ -273,7 +273,7 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("h3", {
         ...attributes,
         ...element.attr,
-        className: `content-editable ${isEmpty ? "empty" : ""}`,
+        className: `edt-headings content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 3",
         children: children
       });

package/package.json

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