@flozy/editor 9.4.9 → 9.5.1

package/dist/Editor/CommonEditor.js

@@ -352,7 +352,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     ...mentions,
     CHARACTERS,
     hideTools: updatedHideTools || [],
-    translation: translation || translationFn
+    translation: translation || translationFn,
+    editor
   }) : [];
   const handleEditorChange = newValue => {
     if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
@@ -699,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/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/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/Section/index.js

@@ -14,6 +14,7 @@ import { SectionSettingIcon } from "../iconListV2";
 // const list_types = ["orderedList", "unorderedList"];
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const SECTION_PROPS = ["sectionBgColor", "sectionBackgroundImage", "sectionBannerSpacing", "sectionBorderRadius", "sectionGridSize", "sectionAlignment"];
 const Toolbar = ({
   readOnly,
   showTool,
@@ -118,11 +119,26 @@ const Section = props => {
       ...data
     };
     delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
+    if (element.type !== "paragraph") {
+      // remove section properties
+      Transforms.unsetNodes(editor, SECTION_PROPS, {
+        at: path
+      });
+      // wrap with paragraph with section properties
+      Transforms.wrapNodes(editor, {
+        ...updateData,
+        type: "paragraph",
+        children: []
+      }, {
+        at: path
+      });
+    } else {
+      Transforms.setNodes(editor, {
+        ...updateData
+      }, {
+        at: path
+      });
+    }
     onClose();
   };
   const onClose = () => {

package/dist/Editor/common/Shorthands/elements.js

@@ -15,6 +15,7 @@ import { Transforms } from "slate";
 import { insertInfinityAI } from "../../utils/infinityAI";
 import { insertDataView } from "../../utils/dataView";
 import SearchButton from "../../Elements/Search/SearchButton";
+import canOpen from "../../helper/canOpen";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
   name: "Heading 1",
@@ -358,8 +359,10 @@ const elements = props => {
   const {
     search,
     hideTools,
-    translation
+    translation,
+    editor
   } = props;
+  const nodeType = canOpen(editor);
   const translatedElements = ELEMENTS_LIST.map(element => ({
     ...element,
     name: translation(element.name),
@@ -370,7 +373,7 @@ const elements = props => {
       });
     } : undefined
   }));
-  const filteredElements = translatedElements.filter(f => (hideTools || []).indexOf(f.type) === -1);
+  const filteredElements = translatedElements.filter(f => (hideTools || []).indexOf(f.type) === -1 && (!f?.hideFor || f?.hideFor?.indexOf(nodeType) === -1));
   return filteredElements.filter(c => c.name.toLowerCase().includes(search?.toLowerCase()));
 };
 export default elements;

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

@@ -247,6 +247,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/utils/SlateUtilityFunctions.js

@@ -62,7 +62,6 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isList = list_types.includes(format);
   const isIndent = alignment.includes(format);
   const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
-  console.log(isAligned, isIndent);
 
   /*If the node is already aligned and change in indent is called we should unwrap it first and split the node to prevent
     messy, nested DOM structure and bugs due to that.*/
@@ -75,29 +74,10 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
 
   /* Wraping the nodes for alignment, to allow it to co-exist with other block level operations*/
   if (isIndent) {
-    const [nodeEntry] = Editor.nodes(editor, {
-      at: editor.selection,
-      match: n => Element.isElement(n) && NEWLINESAFTER.indexOf(n.type) > -1
+    Transforms.wrapNodes(editor, {
+      type: format,
+      children: []
     });
-    // for heading background preserve while alignment change
-    if (nodeEntry) {
-      // for headings alone
-      Transforms.wrapNodes(editor, {
-        type: format,
-        children: []
-      }, {
-        at: editor.selection,
-        match: n => {
-          return Text.isText(n);
-        }
-      });
-    } else {
-      // follow old logic
-      Transforms.wrapNodes(editor, {
-        type: format,
-        children: []
-      });
-    }
     return;
   }
   Transforms.unwrapNodes(editor, {

package/package.json

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