@flozy/editor 7.0.5 → 7.0.7

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js

@@ -59,7 +59,7 @@ function SelectFontSize({
           size = value;
         }
       });
-      return isNaN(parseInt(size)) ? 14 : parseInt(size);
+      return parseInt(size);
     } catch (err) {
       return "";
     }

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectList.js

@@ -68,8 +68,7 @@ const listOptions = [{
 }];
 function SelectList({
   editor,
-  classes,
-  closeMainPopup
+  classes
 }) {
   const selectedList = useMemo(() => {
     return listOptions.find(t => isBlockActive(editor, t.value));
@@ -80,7 +79,6 @@ function SelectList({
     } else if (option.type === "accordion") {
       insertAccordion(editor);
     }
-    closeMainPopup();
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {
     options: listOptions,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js

@@ -125,6 +125,7 @@ function SelectTypography({
         ...upData
       }
     });
+    closeMainPopup();
   };
   const selectedBlock = useMemo(() => {
     return typographyOptions.find(t => {
@@ -151,17 +152,21 @@ function SelectTypography({
     toggleBlock(editor, format);
     if (option.type === "block") {
       // reset old font size
-      // let updatedValue = !selectedBlock ? {} : { xs: "16px", sm: "16px", md: "16px", lg: "16px" }
+      let updatedValue = !selectedBlock ? {} : {
+        xs: "16px",
+        sm: "16px",
+        md: "16px",
+        lg: "16px"
+      };
       addMarkData(editor, {
         format: "fontSize",
-        value: {}
+        value: updatedValue
       });
     } else if (option.type === "mark") {
       const size = sizeMap[option.value] || "";
       const [sizeInNumber] = size.split("px");
       updateMarkData(Number(sizeInNumber));
     }
-    closeMainPopup();
   };
   return /*#__PURE__*/_jsx(CustomSelectTool, {
     options: typographyOptions,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -14,7 +14,6 @@ import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
 import InfinityAITool from "./InfinityAITool";
-import { viewSlateSelection } from "../../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -61,15 +60,13 @@ const MiniTextFormat = props => {
           className: "verticalLine"
         }), /*#__PURE__*/_jsx(SelectList, {
           classes: classes,
-          editor: editor,
-          closeMainPopup: closeMainPopup
+          editor: editor
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectAlignment, {
           fontAlign: fontAlign,
           classes: classes,
-          editor: editor,
-          closeMainPopup: closeMainPopup
+          editor: editor
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectFontSize, {
@@ -101,10 +98,7 @@ const MiniTextFormat = props => {
           editor: editor,
           customProps: customProps
         }, link.id), /*#__PURE__*/_jsx(IconButton, {
-          onClick: e => {
-            viewSlateSelection();
-            setAnchorEl(document.getElementById("mini-text-editor-wrapper"));
-          },
+          onClick: e => setAnchorEl(document.getElementById("mini-text-editor-wrapper")),
           className: `textSettingsIcon ${open ? "btnActive" : ""}`,
           children: /*#__PURE__*/_jsx(TextToolIcon, {})
         }), /*#__PURE__*/_jsx(Popper, {

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

@@ -47,7 +47,7 @@ const TemplateCard = props => {
         }), /*#__PURE__*/_jsx(CardMedia, {
           className: `template-card-media ${fullScreen ? "fullscreen" : ""}`,
           component: "div",
-          image: m?.compressedThum || m?.thumbnail,
+          image: m?.thumbnail,
           alt: m?.title,
           sx: classes.templateCardMedia
         }), /*#__PURE__*/_jsx(PreviewAndSelect, {

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

@@ -14,8 +14,6 @@ import SelectSuperSubscript from "./MiniTextFormat/SelectSuperSubscript";
 import { ColorResetIcon, TextDefaultStyleIcon } from "../../common/iconListV2";
 import FontFamilyAutocomplete from "../FormatTools/FontFamilyAutocomplete";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import LineSpacing from "../../common/StyleBuilder/fieldTypes/lineSpacing";
-import { getPageSettings } from "../../utils/pageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const allTools = toolbarGroups.flat();
@@ -33,18 +31,10 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-  const {
-    element: pageSt
-  } = getPageSettings(editor) || {};
-  const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
-  const {
-    activeBreakPoint
-  } = useEditorContext();
-  const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
   const fontAlign = allTools.filter(f => f.format?.indexOf("align") >= 0);
@@ -61,8 +51,6 @@ const TextFormat = props => {
     color: "",
     bgColor: ""
   };
-  let lineSpacingValue = activeMark(editor, 'lineHeight');
-  lineSpacingValue = lineSpacingValue?.[breakpoint] !== undefined ? lineSpacingValue : pageSettingLine;
   const handleColorPicker = type => e => {
     setType(type);
     setAnchorEl(e.currentTarget);
@@ -103,13 +91,6 @@ const TextFormat = props => {
       value
     });
   };
-  const handleLineSpacing = data => {
-    const [[format, value]] = Object.entries(data);
-    addMarkData(editor, {
-      format,
-      value
-    });
-  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
@@ -379,32 +360,6 @@ const TextFormat = props => {
       xs: 12,
       sx: classes.dividerGrid,
       children: /*#__PURE__*/_jsx(Divider, {})
-    }), /*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        color: "primary",
-        sx: classes.typoLabel,
-        children: "Line Spacing"
-      }), /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 12,
-        className: "typo-icons",
-        sx: classes.evenSpace,
-        children: /*#__PURE__*/_jsx(LineSpacing, {
-          value: lineSpacingValue,
-          onChange: handleLineSpacing,
-          data: {
-            key: 'lineHeight'
-          }
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      sx: classes.dividerGrid,
-      children: /*#__PURE__*/_jsx(Divider, {})
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,

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

@@ -9,7 +9,6 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
 import { isCarouselSelected } from "../../helper";
-import { hideSlateSelection } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -87,7 +86,6 @@ const PopupTool = props => {
       setAnchorEl(null);
     } else {
       updateAnchorEl();
-      hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection, event, selectedElement?.enable]);
   const handleClose = () => {

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -18,7 +18,7 @@ const Upload = props => {
     item: true,
     xs: 12,
     sx: {
-      padding: "10px",
+      padding: 0,
       height: '100%'
     },
     className: "ims-right",

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -6,8 +6,7 @@ const UploadStyles = theme => ({
     boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
     background: theme?.palette?.editor?.uploadFileBg,
     height: '100%',
-    minHeight: '150px',
-    height: 'inherit'
+    minHeight: '150px'
   },
   uploadField: {
     width: "100%",

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

@@ -131,6 +131,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
           setOpenAI("fromElements");
         }
         insertMention(editor, char, type);
+        Transforms.insertText(editor, " "); //Added to insert space after inserting mention node
         setMentions({
           ...mentions,
           target: null

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

@@ -59,7 +59,6 @@ const useElementSettingsStyle = theme => ({
       overflowX: "hidden",
       overflowY: "auto",
       background: theme?.palette?.editor?.background,
-      paddingLeft: "4px",
       "& .MuiTypography-root, .MuiInputBase-root, input": {
         color: theme?.palette?.editor?.textColor
       },

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

@@ -3,7 +3,6 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
@@ -12,9 +11,6 @@ const SwitchViewport = props => {
     onChange
   } = props;
   const classes = useSwitchViewport();
-  const {
-    setActiveBreakPoint
-  } = useEditorContext();
   useEffect(() => {
     console.log(breakpoint);
   }, [breakpoint]);
@@ -25,7 +21,6 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -35,7 +30,6 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
-          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

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

@@ -10,10 +10,11 @@ import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../.
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
 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 Toolbar = ({
-  fromPopper,
   readOnly,
   showTool,
   onSettings,
@@ -39,7 +40,6 @@ const Toolbar = ({
     })
   }) : null;
 };
-const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const themeReact = useTheme();
   const theme = props?.theme;

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

@@ -18,7 +18,6 @@ import FontSize from "./fontSize";
 import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
-import LineSpacing from "./lineSpacing";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -39,7 +38,6 @@ const FieldMap = {
   fontSize: FontSize,
   selectSwitch: SelectSwitch,
   card: CardsMapping,
-  metadatamapping: MetaDataMapping,
-  lineSpacing: LineSpacing
+  metadatamapping: MetaDataMapping
 };
 export default FieldMap;

package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js

@@ -25,10 +25,6 @@ const pageSettingsStyle = [{
     label: "Padding",
     key: "bannerSpacing",
     type: "bannerSpacing"
-  }, {
-    label: "Line Spacing",
-    key: "lineHeight",
-    type: "lineSpacing"
   }]
 }, {
   tab: "Max Width",

package/dist/Editor/commonStyle.js

@@ -49,11 +49,6 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
-      "& .MuiPaper-root": {
-        border: `unset !important`,
-        borderRadius: '0px',
-        height: 'fit-content'
-      },
       "& p": {
         marginBottom: "7px",
         marginTop: "4px"

package/dist/Editor/helper/theme.js

@@ -161,27 +161,4 @@ export const groupByBreakpoint = (styleProps, theme) => {
     }
   };
 };
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
-export const getBreakpointLineSpacing = (value, breakpoint) => {
-  try {
-    const values = getBreakPointsValue(value, breakpoint);
-    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
-      if (values[b] || values["lg"]) {
-        const value = values[b] || values["lg"];
-        return {
-          ...a,
-          [b]: value
-        };
-      } else {
-        return a;
-      }
-    }, {});
-    if (breakpoint) {
-      return value[breakpoint] || value["lg"] || value;
-    } else {
-      return cssVal["lg"];
-    }
-  } catch (err) {
-    // console.log(err);
-  }
-};
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);

package/dist/Editor/hooks/useMouseMove.js

@@ -36,7 +36,6 @@ export const EditorProvider = ({
     path: null
   });
   const [fontFamilies, setFontFamilies] = useState(defaultFontFamilies);
-  const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -99,10 +98,8 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies,
-    activeBreakPoint,
-    setActiveBreakPoint
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
+    setFontFamilies
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/plugins/withHTML.js

@@ -253,13 +253,7 @@ const withHtml = editor => {
         return;
       }
       const fragment = deserialize(parsed.body);
-      const normalizeFragment = formatFragment[eltype];
-      if (normalizeFragment && isNonText) {
-        // When a non-text node is pasted into a list item, insert it into the next node.
-        insertAtNextNode(editor, fragment);
-        return;
-      }
-      const formattedFragment = normalizeFragment ? normalizeFragment(fragment) : fragment;
+      const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
       let is_img_table = false;
       formattedFragment.map(f => {
         if (f.type === "image" || f?.type?.includes("table")) {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range } from "slate";
+import { Editor, Transforms, Element as SlateElement } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -38,7 +38,7 @@ import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
-import { getBorderColor, getSlateDom } from "./helper";
+import { getBorderColor } from "./helper";
 import Code from "../Elements/EmbedScript/Code";
 import FreeGrid from "../Elements/FreeGrid/FreeGrid";
 import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
@@ -161,17 +161,7 @@ export const activeMark = (editor, format) => {
   };
   try {
     const marks = Editor.marks(editor);
-    let defaultValue = defaultMarkData[format];
-    const {
-      selection
-    } = editor || {};
-    if (format === "fontSize" && selection && !Range.isCollapsed(selection)) {
-      const slateDom = getSlateDom(editor, editor?.selection);
-      if (slateDom) {
-        const parentElement = slateDom.commonAncestorContainer.parentElement;
-        defaultValue = window.getComputedStyle(parentElement).fontSize;
-      }
-    }
+    const defaultValue = defaultMarkData[format];
     return marks?.[format] ?? defaultValue;
   } catch (err) {
     console.log(err);
@@ -183,9 +173,10 @@ export const getMarked = (leaf, children, theme) => {
   if (leaf.highlight) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
-        color: "inherit",
-        background: "var(--slate-highlight-bg)"
+        color: "inherit"
       },
+      className: "slate-highlight" // while opening AI, we will use this element to highlight the selection. (PopoverAIInput.js)
+      ,
       children: children
     });
   }
@@ -347,8 +338,7 @@ export const getBlock = props => {
           borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
           margin: `${element?.bgColor ? "16px" : "0px"} 0px`,
           width: element?.bgColor ? "calc(100% - 16px)" : "100%",
-          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px",
-          lineHeight: 1.43
+          borderWidth: element?.color ? "0px 0px 0px 3px" : "0px"
         },
         children: children
       });
@@ -408,9 +398,6 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
-        style: {
-          lineHeight: 1.43
-        },
         className: "listItemMargin",
         type: "1",
         ...attributes,
@@ -418,9 +405,6 @@ export const getBlock = props => {
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
-        style: {
-          lineHeight: 1.43
-        },
         className: "listItemMargin",
         ...attributes,
         children: children

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -43,8 +43,7 @@ const useTableResize = ({
       minWidth
     } = minMaxProps || {};
     setSize(currentSize => {
-      const width = currentSize?.width || parentDOM?.clientWidth;
-      const calcWidth = width + e.movementX;
+      const calcWidth = currentSize?.width + e.movementX;
       return {
         width: minWidth && calcWidth < minWidth ? minWidth : calcWidth,
         height: currentSize.height + e.movementY,

package/dist/Editor/utils/helper.js

@@ -713,47 +713,6 @@ export const getSlateDom = (editor, range) => {
     console.log(err);
   }
 };
-
-// The inputs inside the dynamic table lose focus after calling `setNodes` on the first `onChange` event.
-// To replicate this issue, insert some paragraph nodes above the dynamic table, then type something in the title.
-// After typing the first word, the input loses focus.
-export const focusDynamicTableInput = e => {
-  setTimeout(() => {
-    const input = document.getElementById(e.target.id);
-    if (input) {
-      // Check if the input is not already focused
-      if (document.activeElement !== input) {
-        const length = input.value.length;
-        // Focus on the input
-        input.focus();
-
-        // number input not supports selection
-        if (e.target.type !== "number") {
-          // Set the cursor to the end
-          input.setSelectionRange(length, length);
-        }
-      }
-    }
-  }, 0);
-};
-export const clearWindowSelection = () => {
-  const selection = window.getSelection();
-  if (selection) {
-    selection.removeAllRanges(); // Clears the selection
-  }
-};
-
-export const viewSlateSelection = () => {
-  // if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
-  clearWindowSelection();
-  const selectionBg = "rgba(35, 131, 226, 0.35)";
-  const root = document.documentElement;
-  root.style.setProperty("--slate-highlight-bg", selectionBg);
-};
-export const hideSlateSelection = () => {
-  const root = document.documentElement;
-  root.style.setProperty("--slate-highlight-bg", "none");
-};
 export function handleNegativeInteger(val) {
   return val < 0 ? 0 : val;
 }

package/dist/Editor/utils/pageSettings.js

@@ -9,13 +9,7 @@ export const findPageSettings = editor => {
       path: null,
       element: {
         pageProps: {
-          pageWidth: "fixed",
-          "lineHeight": {
-            "xs": 1.43,
-            "sm": 1.43,
-            "md": 1.43,
-            "lg": 1.43
-          }
+          pageWidth: "fixed"
         }
       }
     };
@@ -40,13 +34,7 @@ export const getPageSettings = editor => {
         path: null,
         element: {
           pageProps: {
-            pageWidth: "fixed",
-            "lineHeight": {
-              "xs": 1.43,
-              "sm": 1.43,
-              "md": 1.43,
-              "lg": 1.43
-            }
+            pageWidth: "fixed"
           }
         }
       };

package/dist/Editor/utils/table.js

@@ -753,25 +753,4 @@ export const clearCellText = (editor, currentCellPath) => {
   } catch (err) {
     console.log(err);
   }
-};
-export const getTableColumns = element => {
-  const {
-    columns,
-    children
-  } = element || {};
-  if (columns) {
-    return columns;
-  }
-  const firstRow = children?.length ? children[0] : {};
-  return firstRow?.children?.length || 0;
-};
-export const getTableRows = element => {
-  const {
-    rows,
-    children
-  } = element || {};
-  if (rows) {
-    return rows;
-  }
-  return children?.length || 0;
 };

package/package.json

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