@flozy/editor 11.0.9 → 11.1.0

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

@@ -47,79 +47,69 @@ const getBoxToAutoAlign = (editor, sectionPath) => {
   });
   return boxData || [];
 };
+const handleGridItems = (gridItems, lastRow) => {
+  // to find the previously occupied rows
+  gridItems.forEach(item => {
+    const {
+      gridArea_xs: gridArea,
+      marginTop_xs,
+      height_xs,
+      type
+    } = item;
+    if (type === "paragraph") {
+      // non-freegridItem,
+      // some "paragraph" node is defaulty coming inside in box's children
+      return;
+    }
+    const [startRow] = getGridArea(gridArea);
+    const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
+    const fullHeight = Number(height_xs) + marginTop;
+    const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
+    lastRow = Math.max(endRow, lastRow);
+  });
+  return {
+    lastRow
+  };
+};
+const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
+  let containerHeight = (lastRow - 1) * ROW_HEIGHT;
+  let newlyAddedHeight = 0;
 
-// const handleGridItems = (gridItems, lastRow) => {
-//   // to find the previously occupied rows
-//   gridItems.forEach((item) => {
-//     const { gridArea_xs: gridArea, marginTop_xs, height_xs, type } = item;
-
-//     if (type === "paragraph") {
-//       // non-freegridItem,
-//       // some "paragraph" node is defaulty coming inside in box's children
-//       return;
-//     }
-
-//     const [startRow] = getGridArea(gridArea);
-//     const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
-//     const fullHeight = Number(height_xs) + marginTop;
-
-//     const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
-
-//     lastRow = Math.max(endRow, lastRow);
-//   });
-
-//   return { lastRow };
-// };
-
-// const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
-//   let containerHeight = (lastRow - 1) * ROW_HEIGHT;
-
-//   let newlyAddedHeight = 0;
-
-//   //place it on the next rows that are available
-//   nonGridItems.forEach((item, index) => {
-//     const { height_xs, type, itemIndex } = item;
-
-//     if (type === "paragraph") {
-//       // non-freegridItem
-//       return;
-//     }
-
-//     const startRow = lastRow || 1;
-
-//     const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
-//     let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
-
-//     const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
-
-//     const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
-
-//     const currentElementPath = [...boxPath, itemIndex];
-
-//     Transforms.setNodes(
-//       editor,
-//       {
-//         gridArea_xs: newGridArea,
-//         marginTop_xs: 12,
-//         left_xs: 12,
-//         xs_updatedOn: new Date().getTime(),
-//       },
-//       { at: currentElementPath }
-//     );
-
-//     lastRow = Math.max(endRow, lastRow);
-
-//     containerHeight += fullHeight;
-//     newlyAddedHeight += fullHeight;
-//   });
-
-//   return {
-//     lastRow,
-//     containerHeight,
-//     newlyAddedHeight,
-//   };
-// };
-
+  //place it on the next rows that are available
+  nonGridItems.forEach((item, index) => {
+    const {
+      height_xs,
+      type,
+      itemIndex
+    } = item;
+    if (type === "paragraph") {
+      // non-freegridItem
+      return;
+    }
+    const startRow = lastRow || 1;
+    const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
+    let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
+    const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
+    const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
+    const currentElementPath = [...boxPath, itemIndex];
+    Transforms.setNodes(editor, {
+      gridArea_xs: newGridArea,
+      marginTop_xs: 12,
+      left_xs: 12,
+      xs_updatedOn: new Date().getTime()
+    }, {
+      at: currentElementPath
+    });
+    lastRow = Math.max(endRow, lastRow);
+    containerHeight += fullHeight;
+    newlyAddedHeight += fullHeight;
+  });
+  return {
+    lastRow,
+    containerHeight,
+    newlyAddedHeight
+  };
+};
 const getAncestorFreeGridContainers = (editor, path) => {
   const containers = [...Editor.nodes(editor, {
     at: path,

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

@@ -139,8 +139,7 @@ const ELEMENTS_LIST = [{
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "orderedList"
   }),
-  onInsert: editor => toggleBlock(editor, "orderedList", false),
-  hideFor: ["accordion-summary"]
+  onInsert: editor => toggleBlock(editor, "orderedList", false)
 }, {
   name: "Bulleted List",
   desc: "",
@@ -149,8 +148,7 @@ const ELEMENTS_LIST = [{
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "unorderedList"
   }),
-  onInsert: editor => toggleBlock(editor, "unorderedList", false),
-  hideFor: ["accordion-summary"]
+  onInsert: editor => toggleBlock(editor, "unorderedList", false)
 }, {
   name: "Check List",
   desc: "",
@@ -159,8 +157,7 @@ const ELEMENTS_LIST = [{
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "check-list-item"
   }),
-  onInsert: editor => toggleBlock(editor, "check-list-item", false),
-  hideFor: ["accordion-summary"]
+  onInsert: editor => toggleBlock(editor, "check-list-item", false)
 }, {
   name: "Image",
   desc: "",
@@ -297,8 +294,7 @@ const ELEMENTS_LIST = [{
   onInsert: editor => {
     Transforms.delete(editor, editor.selection); // remove text '/accordion' typed by user
     insertAccordion(editor);
-  },
-  hideFor: ["unorderedList", "orderedList", "check-list-item"]
+  }
 }, {
   name: "Button",
   group: "Elements",

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

@@ -82,11 +82,6 @@ const BackgroundImage = props => {
             children: translation("REMOVE")
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              padding: 0,
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

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

@@ -1,7 +1,6 @@
 import { Box, Card, Checkbox, FormControlLabel, Grid, Tooltip, Typography } from "@mui/material";
 import React from "react";
 import Icon from "../../Icon";
-import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,17 +15,14 @@ const RenderCard = ({
 }) => {
   return /*#__PURE__*/_jsx(Card, {
     sx: {
-      position: "relative",
-      padding: "10px",
-      "& .MuiCheckbox-root svg": {
-        fill: "unset !important"
-      }
+      position: 'relative',
+      padding: "10px"
     },
     children: /*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
         sx: {
           padding: 0,
-          marginTop: "3px"
+          marginTop: '3px'
         },
         onChange: handleChange,
         checked: value,
@@ -62,10 +58,10 @@ const RenderCard = ({
         })
       }),
       sx: {
-        width: "100%",
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "flex-start",
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
         margin: 0
       },
       labelPlacement: "start"
@@ -87,9 +83,6 @@ const CardsMapping = props => {
     selectedCard,
     infoIcon
   } = data;
-  const {
-    theme
-  } = useEditorContext();
   const {
     translation
   } = customProps;
@@ -111,8 +104,7 @@ const CardsMapping = props => {
     sx: {
       marginBottom: "12px",
       "& .MuiPaper-root": {
-        background: theme?.palette?.editor?.miniToolBarBackground,
-        border: activeCard ? "1px solid #2563EB" : `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        border: activeCard ? "1px solid #2563EB" : "1px solid #C8D8FA",
         borderRadius: "8px",
         boxShadow: activeCard ? "0px 4px 16px 0px #2563EB40" : "unset"
       }

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

@@ -14,6 +14,9 @@ const FontSize = props => {
     elementProps,
     customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const {
     key,
     width
@@ -22,9 +25,6 @@ const FontSize = props => {
   const value = useMemo(() => {
     return val || getElementStyle(editor, elementProps, "font-size");
   }, [editor, val]);
-  const {
-    translation
-  } = customProps;
   const handleChange = e => {
     let inc = parseInt(e.target.value) || 16;
     inc = inc > 200 ? 200 : inc;

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

@@ -19,7 +19,6 @@ import SelectSwitch from "./selectSwitch";
 import CardsMapping from "./card";
 import MetaDataMapping from "./metaDataMapping";
 import LineSpacing from "./lineSpacing";
-import EmbedUpload from "./embedUpload";
 const FieldMap = {
   text: Text,
   bannerSpacing: BannerSpacing,
@@ -41,7 +40,6 @@ const FieldMap = {
   selectSwitch: SelectSwitch,
   card: CardsMapping,
   metadatamapping: MetaDataMapping,
-  lineSpacing: LineSpacing,
-  embedUpload: EmbedUpload
+  lineSpacing: LineSpacing
 };
 export default FieldMap;

package/dist/Editor/common/Uploader.js

@@ -1,13 +1,13 @@
 import React, { useRef, useState } from "react";
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import CircularProgress from "@mui/material/CircularProgress";
+import Grid from '@mui/material/Grid';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
 import { convertBase64 } from "../utils/helper";
 import Icon from "./Icon";
 import UploadStyles from "../common/ImageSelector/UploadStyles";
-import { allowedTypes, extensionMap } from "../Elements/Form/Workflow/constant";
+import { allowedFormat, allowedTypes, extensionMap } from "../Elements/Form/Workflow/constant";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,12 +24,6 @@ const Uploader = props => {
   const classes = UploadStyles();
   const [base64, setBase64] = useState(value?.url);
   const [fileName, setFileName] = useState("");
-  const allowedFormat = {
-    Document: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.rtf",
-    Image: "image/*",
-    Video: "video/*",
-    Embed: "*"
-  };
   const {
     uploadFile,
     services,
@@ -122,7 +116,6 @@ const Uploader = props => {
   const renderThumb = () => {
     switch (title) {
       case "Document":
-      case "Video":
         return /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx(Typography, {
             style: {

package/dist/Editor/commonStyle.js

@@ -49,12 +49,6 @@ const useCommonStyle = theme => ({
         fontWeight: "500",
         fontFamily: "Inter, sans-serif"
       },
-      "& .MuiPaper-root": {
-        border: `unset !important`,
-        borderRadius: "0px",
-        height: "fit-content",
-        padding: "2px"
-      },
       "& p": {
         marginBottom: "7px",
         marginTop: "4px"
@@ -71,6 +65,9 @@ const useCommonStyle = theme => ({
         },
         "&::-webkit-scrollbar-thumb": {
           background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
         }
       },
       "& .MuiGrid-root>.MuiGrid-item": {
@@ -565,18 +562,6 @@ const useCommonStyle = theme => ({
       }
     }
   },
-  buttonMoreOption: {
-    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
-    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: "4px !important",
-    "& svg": {
-      width: "18px !important",
-      height: "18px !important",
-      "& path": {
-        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
-      }
-    }
-  },
   pageSettingPopUpRoot: {
     padding: "16px 8px 16px 10px!important",
     height: "100%",
@@ -604,18 +589,18 @@ const useCommonStyle = theme => ({
     right: -40,
     transform: "translateY(-50%)"
   },
-  // buttonMoreOption: {
-  //   background: `${theme?.palette?.editor?.aiInputBackground} !important`,
-  //   border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-  //   padding: "4px !important",
-  //   "& svg": {
-  //     width: "18px !important",
-  //     height: "18px !important",
-  //     "& path": {
-  //       stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
-  //     },
-  //   },
-  // },
+  buttonMoreOption: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    padding: "4px !important",
+    "& svg": {
+      width: "18px !important",
+      height: "18px !important",
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,

package/dist/Editor/helper/index.js

@@ -14,7 +14,7 @@ export const getThumbnailImage = async (dom, options = {}) => {
       windowWidth: 1440,
       windowHeight: 768,
       ...options,
-      backgroundColor: 'white',
+      backgroundColor: null,
       allowTaint: true,
       useCORS: false,
       scale: 0.5,
@@ -23,11 +23,6 @@ export const getThumbnailImage = async (dom, options = {}) => {
         // hide class
         const sw = document.getElementById("slate-wrapper-scroll-container");
         sw.style.minHeight = "2000px";
-        if (options?.fromBrains) {
-          const textbox = document.querySelector(".innert-editor-textbox");
-          textbox.style.padding = "24px";
-          textbox.style.background = options?.pageColor || '#fffff';
-        }
         const svgFrames = document.querySelectorAll(".image-frame svg");
         for (let i = 0; i < svgFrames.length; i++) {
           svgFrames[i].style.width = "100%";

package/dist/Editor/hooks/useMouseMove.js

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

package/dist/Editor/plugins/withEmbeds.js

@@ -1,6 +1,4 @@
 import { Transforms, Path, Node } from "slate";
-import { isListItem } from "../utils/helper";
-import { customizeEnterEvent } from "../utils/events";
 const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
 const BlockTypes = ["grid"];
 const withEmbeds = editor => {
@@ -55,15 +53,6 @@ const withEmbeds = editor => {
   };
   editor.insertBreak = (...args) => {
     try {
-      const ele = isListItem(editor);
-      if (ele && ele[0]) {
-        const {
-          breakNext
-        } = customizeEnterEvent(editor, ele);
-        if (breakNext) {
-          return;
-        }
-      }
       const parentPath = Path.parent(editor.selection.focus.path);
       const parentNode = Node.get(editor, parentPath);
       if (editor.isVoid(parentNode)) {

package/dist/Editor/plugins/withHTML.js

@@ -31,8 +31,6 @@ const parseCopiedHTML = html => {
 
   // claude.ai, copy list inbetween, some li tags are not wrapped with ul or ol
   parsed.querySelectorAll("li").forEach(li => {
-    li.innerHTML = li.innerHTML.replace(/^\n+|\n+$/g, ""); // Removes leading and trailing newlines
-
     // Check if the parent of <li> is not a <ul> or <ol>
     if (!li.parentElement || li.parentElement.tagName !== "UL" && li.parentElement.tagName !== "OL") {
       // Create a <ul> element

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -34,7 +34,7 @@ import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { getTextColor, isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
-import { getBreakpointLineSpacing, getBreakPointsValue, getDevice, getElementProperty, textThemeFields } from "../helper/theme";
+import { getBreakpointLineSpacing, getBreakPointsValue, getDevice, textThemeFields, getElementProperty } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import Divider from "../Elements/Divider/Divider";
 import { getBorderColor, getSlateDom } from "./helper";
@@ -50,7 +50,7 @@ import SearchAttachment from "../Elements/Search/SearchAttachment";
 import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
-export const list_types = ["orderedList", "unorderedList"];
+const list_types = ["orderedList", "unorderedList"];
 const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
@@ -67,7 +67,7 @@ const LIST_FORMAT_TYPE = {
 
 const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
-  let isActive = isBlockActive(editor, format);
+  const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
   const isIndent = alignment.includes(format);
   const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
@@ -202,33 +202,6 @@ export const isBlockActive = (editor, format) => {
   });
   return !!match;
 };
-export const isListActive = editor => {
-  const list_types = ["orderedList", "unorderedList", "check-list-item", "accordion"];
-  const [match] = Editor.nodes(editor, {
-    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && list_types.includes(n.type),
-    mode: "lowest" // To ensure it's the closest parent
-  });
-
-  if (match) {
-    const [matchNode] = match;
-    return matchNode.type;
-  }
-};
-export const getListType = editor => {
-  const [accordionSummary] = Editor.nodes(editor, {
-    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === "accordion-summary"
-  });
-  if (accordionSummary) {
-    return "accordion-summary";
-  }
-  const listItems = ["list-item", "check-list-item"];
-  const [listItem] = Editor.nodes(editor, {
-    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && listItems.includes(n.type)
-  });
-  if (listItem) {
-    return "list-item";
-  }
-};
 export const getBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
     match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format