@flozy/editor 9.5.0 → 9.5.2

package/dist/Editor/CommonEditor.js

@@ -700,8 +700,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         chars: chars,
                         type: type,
                         theme: theme,
-                        otherProps: otherProps,
-                        customProps: customProps
+                        customProps: customProps,
+                        otherProps: customProps
                       }) : null, /*#__PURE__*/_jsx(RnDCopy, {
                         readOnly: readOnly
                       })]

package/dist/Editor/Elements/Carousel/slick.min.css

@@ -83,3 +83,16 @@
 .slick-arrow.slick-hidden {
   display: none;
 }
+
+.slick-dots li {
+  margin-top: 4px;
+  border: 0.5px solid #FFFFFF
+}
+
+.slick-dots .slick-active {
+  background-color: #2563EB !important;
+}
+
+.slick-dots li {
+  background-color: #9DA9BA;
+}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Path, Transforms, Node } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, useTheme } from "@mui/material";
@@ -63,10 +63,9 @@ const FreeGrid = props => {
     height
   } = breakpointValues(element.type, breakpoint, element);
   const {
-    setSelectedElement,
-    setAutoAlign,
-    autoAlign
+    setSelectedElement
   } = useEditorContext();
+  const [autoAlign, setAutoAlign] = useState(false);
   const count = useRef(2);
   const childrenCountRef = useRef(element?.children?.length);
   const onChange = data => {
@@ -563,6 +562,8 @@ const FreeGrid = props => {
     translation: translation,
     customProps: customProps,
     sectionElement: element,
+    autoAlign: autoAlign,
+    setAutoAlign: setAutoAlign,
     children: /*#__PURE__*/_jsxs(Box, {
       ...attributes,
       id: sectionName,

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

@@ -240,6 +240,9 @@ const useFreeGridStyles = ({
               fontSize: "14px",
               borderRadius: "7px"
             }
+          },
+          "& > .simple-text": {
+            display: "none"
           }
         },
         "& .fgi_type_form": {

package/dist/Editor/Elements/Search/SearchButton.js

@@ -25,6 +25,7 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
   const [target, setTarget] = useState(selectionTarget);
   const open = Boolean(anchorEl);
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
+  const currentId = otherProps?.tagName === 'Brains' ? otherProps?.page_id : 0;
   const [mapData, setMapData] = useState([]);
   const [skip, setSkip] = useState(0);
   const [search, setSearch] = useState("");
@@ -65,7 +66,8 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
     getDocs({
       debouncedSearch,
       skip,
-      limit
+      limit,
+      current_doc_id: currentId
     });
   }, [skip, debouncedSearch]);
   const getDocs = async () => {
@@ -75,7 +77,8 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
         const result = await otherProps?.services("getDocs", {
           skip,
           limit,
-          search
+          search,
+          current_doc_id: currentId
         });
         setMapData(prev => skip === 0 ? result.data : [...prev, ...result.data]);
       }

package/dist/Editor/Elements/Search/SearchList.js

@@ -78,6 +78,9 @@ const SearchAndDocList = ({
         InputProps: {
           startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
             position: "start",
+            sx: {
+              pointerEvents: 'none'
+            },
             children: /*#__PURE__*/_jsx(SearchIcon, {})
           }),
           sx: {

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -18,8 +18,11 @@ const TextSize = ({
   const timerRef = useRef();
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
-  const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
-  const value = noFontSize ? getTextSizeVal(editor) : getBreakPointsValue(val, size?.device);
+
+  // const noFontSize =
+  //   val === "normal" || (typeof val === "object" && !Object.keys(val)?.length);
+
+  const value = getTextSizeVal(editor);
   useEffect(() => {
     setFontSize(getSizeVal());
   }, [value]);

package/dist/Editor/common/ColorPickerButton.js

@@ -39,9 +39,6 @@ const ColorPickerToolComponent = ({
       position: "relative"
     },
     children: [/*#__PURE__*/_jsx("div", {
-      style: {
-        marginBottom: "50px"
-      },
       children: /*#__PURE__*/_jsx(CustomColorPicker, {
         gradient: hideGradient ? false : true,
         color: color,
@@ -53,14 +50,7 @@ const ColorPickerToolComponent = ({
         disableEditTheme: disableEditTheme
       })
     }), /*#__PURE__*/_jsxs("div", {
-      style: {
-        display: "flex",
-        justifyContent: "end",
-        margin: "8px",
-        position: "absolute",
-        bottom: 0,
-        right: 0
-      },
+      className: "colorPickerActionBtns",
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: handleClose,
         className: "secondaryBtn",

package/dist/Editor/common/CustomColorPicker/index.js

@@ -4,6 +4,7 @@ import customColorPickerStyles from "./style";
 import { colors } from "../../Elements/Color Picker/defaultColors";
 import { useMemo, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { getVariableValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getColors = (colors, colorTab, key) => {
@@ -67,7 +68,7 @@ function CustomColorPicker(props) {
     sx: classes.customColorPickerContainer,
     children: [/*#__PURE__*/_jsx(ColorPickerTool, {
       gradient: gradient,
-      value: color?.startsWith("var") ? "" : color,
+      value: color?.startsWith("var") ? getVariableValue(color) : color,
       onChange: onChange,
       defaultColors: [],
       popupWidth: "300",

package/dist/Editor/common/RnD/ContextMenu/CMenus.js

@@ -69,7 +69,7 @@ const CMenus = {
     label: "Cut",
     render: translation => {
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [translation("Cut"), " ", /*#__PURE__*/_jsxs("span", {
+        children: [translation("Cut Section"), " ", /*#__PURE__*/_jsxs("span", {
           className: "shortcut-help-info",
           children: [/*#__PURE__*/_jsx(CMDIcon, {}), " X"]
         })]
@@ -80,7 +80,7 @@ const CMenus = {
     label: "Copy",
     render: translation => {
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [translation("Copy"), " ", /*#__PURE__*/_jsxs("span", {
+        children: [translation("Copy Section"), " ", /*#__PURE__*/_jsxs("span", {
           className: "shortcut-help-info",
           children: [/*#__PURE__*/_jsx(CMDIcon, {}), " C"]
         })]
@@ -91,15 +91,12 @@ const CMenus = {
     label: "Paste",
     render: translation => {
       return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [translation("Paste"), " ", /*#__PURE__*/_jsxs("span", {
+        children: [translation("Paste Section"), " ", /*#__PURE__*/_jsxs("span", {
           className: "shortcut-help-info",
           children: [/*#__PURE__*/_jsx(CMDIcon, {}), " V"]
         })]
       });
     }
-  }, {
-    name: "delete",
-    label: "Delete"
   }],
   "parent-container": [{
     name: "cut",

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -70,7 +70,7 @@ const handleMoveNode = (editor, path, newPath, {
 export const reRenderChildNodes = (editor, path) => {
   try {
     const sectionNode = Node.get(editor, path);
-    console.log("sectionNode", sectionNode);
+
     // parent node
     Transforms.setNodes(editor, {
       updated_at: new Date().getTime()
@@ -103,9 +103,7 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
       // get parent node
       parentNode = Node.get(editor, Path.parent(dragItemPath));
     }
-    console.log("moveTopath", moveTopath, path, parentPath, dragOver);
     const moveToNode = Node.get(editor, moveTopath);
-    console.log("parentNode, moveToNode", parentNode, moveToNode);
     const leftOfMoveToNode = moveToNode[`left${appenBp}`];
     if (moveToNode.type === "freegridBox") {
       if (parentNode.type === "freegridBox") {
@@ -216,7 +214,7 @@ export function onDropItem(props, parentClass) {
 
       // const boxNode = Node.get(editor, moveTo);
 
-      if (moveSectionToSection && autoAlign) {
+      if (moveTo?.length === 2 && autoAlign) {
         // auto align in mobile
         Transforms.setNodes(editor, {
           xs_updatedOn: null

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

@@ -41,7 +41,7 @@ const getBoxToAutoAlign = (editor, sectionPath) => {
     at: sectionPath,
     match: node => node.type === "freegridBox" && node.autoAlign
   });
-  return boxData;
+  return boxData || [];
 };
 const handleGridItems = (gridItems, lastRow) => {
   // to find the previously occupied rows
@@ -242,6 +242,9 @@ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
   }, {
     at: boxPath
   });
+  if (!boxNode) {
+    return;
+  }
   const containerItems = boxNode?.children || [];
   const {
     containerHeight

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

@@ -9,6 +9,15 @@ const useVirtualElementStyles = () => ({
     opacity: 1,
     right: 0,
     top: 0,
+    "& .leaf-item": {
+      fontSize: "var(--fontSize_xs) !important",
+      "& span": {
+        fontSize: "var(--fontSize_xs) !important"
+      }
+    },
+    "& .editor-blocker": {
+      display: "none"
+    },
     "& .freegrid-item": {
       position: "relative !important",
       top: "0 !important",
@@ -18,6 +27,9 @@ const useVirtualElementStyles = () => ({
       left: "24px !important",
       marginTop: "var(--marginTop_xs) !important",
       outline: "1px solid gray !important",
+      "&.type_text": {
+        height: "auto !important"
+      },
       // "&.type_box": {
       //   // display: "grid !important",
       //   // gridTemplateRows: "repeat(auto-fill, 50px) !important",
@@ -44,6 +56,15 @@ export const useAutoAlignStyles = () => ({
     top: 0,
     height: "auto !important",
     pointerEvents: "none",
+    "& .leaf-item": {
+      fontSize: "var(--fontSize_xs) !important",
+      "& span": {
+        fontSize: "var(--fontSize_xs) !important"
+      }
+    },
+    "& .editor-blocker": {
+      display: "none"
+    },
     "& .freegrid-item": {
       position: "relative !important",
       top: "0 !important",
@@ -61,6 +82,9 @@ export const useAutoAlignStyles = () => ({
         width: "var(--width_xs) !important",
         height: "var(--height_xs) !important"
       },
+      "&.type_text": {
+        height: "auto !important"
+      },
       // start - default signature classes on free-grid
       "& .fgi_type_signature": {
         height: "100%",

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

@@ -71,7 +71,9 @@ const RnD = props => {
     itemData = {},
     customProps,
     sectionElement,
-    dataSets
+    dataSets,
+    autoAlign,
+    setAutoAlign
   } = props;
   const {
     isSelectedElement,
@@ -79,9 +81,7 @@ const RnD = props => {
     updateDragging,
     contextMenu,
     setContextMenu,
-    theme,
-    autoAlign,
-    setAutoAlign
+    theme
   } = useEditorContext();
   const str_path = path.join("|");
   const selectedElementProps = isSelectedElement(str_path, type);

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

@@ -2,7 +2,8 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Grid, TextField, InputAdornment, Typography, Tooltip } from "@mui/material";
 import ColorPickerButton from "../../ColorPickerButton";
 import { useSlateStatic } from "slate-react";
-import { getElementStyle, getVariableValue } from "../../../helper/theme";
+import { getVariableValue } from "../../../helper/theme";
+import { useButtonStyle } from "../../../hooks/useThemeValues";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MAP_STYLE_PROPS = {
@@ -29,18 +30,21 @@ const Color = props => {
   } = customProps;
   const [recentColors, setRecentColors] = useState({});
   const editor = useSlateStatic();
+  const {
+    buttonStyle
+  } = useButtonStyle(val, editor, elementProps, MAP_STYLE_PROPS[key]);
   const {
     value,
     inputValue
   } = useMemo(() => {
     const isVariable = val && val.startsWith("var");
-    const value = isVariable ? val : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
-    const inputValue = isVariable ? getVariableValue(val) : getElementStyle(editor, elementProps, MAP_STYLE_PROPS[key]);
+    const value = isVariable ? val : buttonStyle;
+    const inputValue = isVariable ? getVariableValue(val) : buttonStyle;
     return {
       value: value || val,
       inputValue: inputValue || val
     };
-  }, [editor, val]);
+  }, [buttonStyle, val]);
   const getLable = label === "Text" ? translation("selectTextColor") : label === "Background" ? translation("selectBgColor") : translation(label);
   useEffect(() => {
     const storedColors = JSON.parse(localStorage.getItem("recentColors"));

package/dist/Editor/commonStyle.js

@@ -136,6 +136,9 @@ const useCommonStyle = theme => ({
           width: "46px !important",
           marginLeft: "10px",
           height: "36px !important"
+        },
+        "& .spacingSlider": {
+          width: "calc(100% - 18px)"
         }
       },
       "& .MuiFormHelperText-root": {
@@ -247,6 +250,16 @@ const useCommonStyle = theme => ({
         backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
         color: theme?.palette?.editor?.textColor
       }
+    },
+    "& .colorPickerActionBtns": {
+      backgroundColor: theme?.palette?.editor?.background,
+      display: "flex",
+      justifyContent: "end",
+      padding: "10px",
+      position: "sticky",
+      bottom: 0,
+      right: 0,
+      boxShadow: "0px -3px 12px 0px #00000017"
     }
   },
   colorPickerBtnBorder: {

package/dist/Editor/hooks/useMouseMove.js

@@ -40,7 +40,6 @@ export const EditorProvider = ({
   });
   const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
   const [activeBreakPoint, setActiveBreakPoint] = useState("");
-  const [autoAlign, setAutoAlign] = useState(false);
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -108,10 +107,8 @@ export const EditorProvider = ({
     setOpenTheme,
     activeBreakPoint,
     setActiveBreakPoint,
-    triggerRender,
-    autoAlign,
-    setAutoAlign
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme, activeBreakPoint, autoAlign]);
+    triggerRender
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/hooks/useThemeValues.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { getElementProperty } from "../helper/theme";
+import { ReactEditor } from "slate-react";
+import { Node } from "slate";
+function useThemeValues() {
+  return {};
+}
+export default useThemeValues;
+export function useButtonStyle(value, editor, element, stylePropertyName) {
+  const [buttonStyle, setButtonStyle] = useState(value);
+  useEffect(() => {
+    const style = getButtonElementStyle(editor, element, stylePropertyName);
+    setButtonStyle(style);
+  }, [value, editor, element, stylePropertyName]);
+  return {
+    buttonStyle
+  };
+}
+export function getButtonElementStyle(editor, element, stylePropertyName) {
+  try {
+    const path = ReactEditor.findPath(editor, element);
+    if (path?.length) {
+      const currentEle = Node.get(editor, path);
+      const dom = ReactEditor.toDOMNode(editor, currentEle);
+      const editorBtn = dom?.querySelector(".button.theme-element");
+      return getElementProperty(editorBtn, stylePropertyName);
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+}

package/dist/Editor/theme/index.js

@@ -1,3 +1,4 @@
+import { getDevice } from "../helper/theme";
 const themeClassName = ".theme-element";
 function getTextStyles(props) {
   const {
@@ -5,11 +6,13 @@ function getTextStyles(props) {
     textDecoration,
     ...rest
   } = props;
+  const device = getDevice();
+  const fontS = typeof fontSize === "object" ? fontSize[device] : fontSize;
   return {
     ...rest,
     '& span[data-slate-string="true"]': {
       textDecoration,
-      fontSize
+      fontSize: fontS
     }
 
     // "&::after": {

package/dist/Editor/themeSettings/colorTheme/index.js

@@ -112,14 +112,15 @@ const ColorTheme = props => {
                     onColorChange(selectedColor, i);
                   }
                 },
-                hideThemeColors: true,
-                hideGradient: true,
+                hideThemeColors: true
+                // hideGradient={true}
+                ,
                 classes: classes,
                 value: color,
                 children: /*#__PURE__*/_jsxs(Grid, {
                   className: "pmBox",
                   style: {
-                    backgroundColor: color
+                    background: color
                   },
                   children: [/*#__PURE__*/_jsx(IconButton, {
                     className: "editBtn",
@@ -163,14 +164,15 @@ const ColorTheme = props => {
                     onColorChange(selectedColor, colorIndex);
                   }
                 },
-                hideThemeColors: true,
-                hideGradient: true,
+                hideThemeColors: true
+                // hideGradient={true}
+                ,
                 classes: classes,
                 value: color,
                 children: /*#__PURE__*/_jsxs(Grid, {
                   className: "sdBox",
                   style: {
-                    backgroundColor: color
+                    background: color
                   },
                   children: [/*#__PURE__*/_jsx(IconButton, {
                     className: "editBtn",

package/dist/Editor/themeSettings/fonts/style.js

@@ -29,8 +29,8 @@ const Style = ({
     fontSize: "12px",
     color: "#64748B",
     ".dotColor": {
-      width: "12px",
-      height: "12px",
+      width: "14px",
+      height: "14px",
       borderRadius: "12px",
       background: "#0F172A",
       marginRight: "3px"
@@ -40,7 +40,8 @@ const Style = ({
     width: "200px",
     whiteSpace: "nowrap",
     overflow: "hidden",
-    textOverflow: "ellipsis"
+    textOverflow: "ellipsis",
+    color: `${appTheme?.palette?.editor?.textColor} !important`
   },
   ".MuiAutocomplete-input": {
     color: appTheme?.palette?.editor?.textColor

package/package.json

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