@flozy/editor 11.2.1 → 11.2.2

package/dist/Editor/common/iconslist.js

@@ -1677,27 +1677,6 @@ export const CloseIcon = props => /*#__PURE__*/_jsxs("svg", {
     strokeLinejoin: "round"
   })]
 });
-export const CloseIcon2 = props => /*#__PURE__*/_jsxs("svg", {
-  width: "10",
-  height: "10",
-  viewBox: "0 0 10 10",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  ...(props || {}),
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "M9.12476 0.875L0.875176 9.12458",
-    stroke: "#8F9CAE",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M0.875183 0.875L9.12476 9.12458",
-    stroke: "#8F9CAE",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })]
-});
 export const SearchIcon = () => /*#__PURE__*/_jsxs("svg", {
   width: "18",
   height: "18",

package/dist/Editor/commonStyle.js

@@ -54,10 +54,10 @@ const useCommonStyle = theme => ({
         marginTop: "4px"
       },
       "& .MuiPaper-root": {
-        border: "unset !important",
-        borderRadius: "0px",
-        height: "fit-content",
-        padding: "2px"
+        border: 'unset !important',
+        borderRadius: '0px',
+        height: 'fit-content',
+        padding: '2px'
       },
       "& .muiIconsListParent": {
         "& svg": {
@@ -73,7 +73,7 @@ const useCommonStyle = theme => ({
       "& .MuiGrid-root>.MuiGrid-item": {
         paddingRight: "0px !important",
         fontFamily: "Inter, sans-serif",
-        height: "fit-content"
+        height: 'fit-content'
       },
       "& .MuiInputBase-root": {
         borderRadius: "10px",
@@ -134,14 +134,14 @@ const useCommonStyle = theme => ({
           borderRadius: "10px",
           width: "52px !important",
           marginLeft: "10px",
-          height: "36px !important"
+          height: '36px !important'
         },
         "& .spacingSlider": {
           width: "calc(100% - 18px)"
         }
       },
-      "& .MuiFormHelperText-root": {
-        margin: "4px 0px 0px 0px",
+      '& .MuiFormHelperText-root': {
+        margin: '4px 0px 0px 0px',
         color: theme?.palette?.editor?.closeButtonSvgStroke,
         fontFamily: "Inter, sans-serif"
       }
@@ -211,16 +211,16 @@ const useCommonStyle = theme => ({
       backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+      backgroundColor: theme?.palette?.editor?.background,
       "@media only screen and (max-width: 899px)": {
         width: "100% !important"
       }
     },
     "& .popup_tabs-header": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+      backgroundColor: theme?.palette?.editor?.background,
       "& .popup_tabs-header-label-active": {
         color: theme?.palette?.editor?.activeColor,
-        backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+        backgroundColor: theme?.palette?.editor?.background
       }
     },
     "& .colorpicker": {
@@ -249,40 +249,6 @@ const useCommonStyle = theme => ({
         backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
         color: theme?.palette?.editor?.textColor
       }
-    },
-    "& .colorPickerActionBtns": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
-      display: "flex",
-      justifyContent: "end",
-      padding: "10px",
-      position: "sticky",
-      bottom: 0,
-      right: 0,
-      boxShadow: `0px -3px 12px 0px ${theme?.palette?.editor?.cardShadow}`,
-      gap: "8px",
-      "& button": {
-        fontWeight: 600,
-        fontSize: "14px",
-        opacity: 1,
-        borderRadius: "8px",
-        textTransform: "math-auto",
-        padding: "4px 20px",
-        height: "fit-content",
-        minWidth: "90px",
-        "@media only screen and (max-width: 899px)": {
-          width: "50%"
-        },
-        "&.confirmBtn": {
-          backgroundColor: "#2563EB",
-          color: "#ffffff",
-          border: `1px solid #2563EB`
-        },
-        "&.cancelBtn": {
-          backgroundColor: theme?.palette?.editor?.closeButtonBackground,
-          color: theme?.palette?.editor?.customDialogueCloseBtnColor,
-          border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder}`
-        }
-      }
     }
   },
   colorPickerBtnBorder: {
@@ -437,14 +403,14 @@ const useCommonStyle = theme => ({
       padding: "8px 12px",
       fontSize: "12px",
       color: theme?.palette?.editor?.menuOptionTextColor,
-      fontWeight: "500",
+      fontWeight: '500',
       fontFamily: "Inter, sans-serif",
-      minHeight: "36px",
+      minHeight: '36px',
       "&:hover": {
         backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
       }
     },
-    "& .Mui-selected": {
+    '& .Mui-selected': {
       background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
     },
     "& .MuiListSubheader-root": {
@@ -453,16 +419,16 @@ const useCommonStyle = theme => ({
       fontSize: "12px"
     },
     "& .MuiPaper-root": {
-      borderRadius: "8px",
-      padding: "0px",
+      borderRadius: '8px',
+      padding: '0px',
       background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
     },
-    "& .MuiButtonBase-root": {
-      margin: "4px",
-      borderRadius: "6px"
+    '& .MuiButtonBase-root': {
+      margin: '4px',
+      borderRadius: '6px'
     },
-    "& .MuiList-root": {
-      padding: "0px"
+    '& .MuiList-root': {
+      padding: '0px'
     }
   },
   datePicker: {
@@ -564,24 +530,7 @@ const useCommonStyle = theme => ({
   },
   pageSettingPopUpRoot: {
     padding: "16px 8px 16px 10px!important",
-    height: "100%",
-    "& .text-field-wrapper": {
-      "& input:-webkit-autofill": {
-        WebkitBackgroundClip: "text !important",
-        WebkitBoxShadow: "0 0 0 1000px transparent inset !important",
-        WebkitTextFillColor: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
-        transition: "background-color 600000s 0s, color 600000s 0s !important"
-      },
-      "& .MuiFilledInput-root": {
-        backgroundColor: "rgba(255, 255, 255, 0.5)",
-        "&:hover": {
-          backgroundColor: "rgba(255, 255, 255, 0.7)"
-        },
-        "&.Mui-focused": {
-          backgroundColor: "rgba(255, 255, 255, 0.9)"
-        }
-      }
-    }
+    height: "100%"
   },
   buttonMoreIcon: {
     position: "absolute",
@@ -592,11 +541,11 @@ 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": {
+    padding: '4px !important',
+    '& svg': {
+      width: '18px !important',
+      height: '18px !important',
+      '& path': {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -604,8 +553,8 @@ const useCommonStyle = theme => ({
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    "& svg": {
-      "& path": {
+    '& svg': {
+      '& path': {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -613,11 +562,11 @@ const useCommonStyle = theme => ({
   buttonMoreOption3: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: "5px !important",
-    "& svg": {
-      width: "16px !important",
-      height: "16px !important",
-      "& path": {
+    padding: '5px !important',
+    '& svg': {
+      width: '16px !important',
+      height: '16px !important',
+      '& path': {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -625,37 +574,37 @@ const useCommonStyle = theme => ({
   resizeButton: {
     background: theme?.palette?.editor?.aiInputBackground,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
-    padding: "5px !important",
-    borderRadius: "50% !important",
-    "& svg": {
-      width: "18px",
-      height: "18px",
-      "& path": {
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
       }
     },
-    "&:hover": {
+    '&:hover': {
       background: theme?.palette?.editor?.aiInputBackground
     }
   },
   gradientFillBtn: {
     background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
-    textTransform: "math-auto !important",
-    color: "#FFFFFF !important",
-    padding: "0px 12px !important",
-    height: "32px",
-    borderRadius: "8px",
-    fontWeight: "500",
-    fontSize: "14px"
+    textTransform: 'math-auto !important',
+    color: '#FFFFFF !important',
+    padding: '0px 12px !important',
+    height: '32px',
+    borderRadius: '8px',
+    fontWeight: '500',
+    fontSize: '14px'
   },
   emptyThumbBtn: {
     background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
     color: `${theme?.palette?.editor?.textColor} !important`,
-    fontSize: "14px !important",
-    "& svg": {
-      width: "20px !important",
-      height: "20px !important",
-      "& path": {
+    fontSize: '14px !important',
+    '& svg': {
+      width: '20px !important',
+      height: '20px !important',
+      '& path': {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -727,13 +676,6 @@ const useCommonStyle = theme => ({
           stroke: theme?.palette?.editor?.closeButtonSvgStroke
         }
       }
-    },
-    "& .element-toolbar": {
-      "& button": {
-        borderRadius: "50%",
-        background: theme?.palette?.editor?.signatureFontBtnBg,
-        border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`
-      }
     }
   }
 });

package/dist/Editor/helper/index.js

@@ -7,7 +7,7 @@ import { Node } from "slate";
 const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
 const TEXT_NODES = ["paragraph", "headingOne", "headingTwo", "headingThree"];
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
-export const RND_ITEMS = ["freegridItem", "freegridBox"];
+const RND_ITEMS = ["freegridItem", "freegridBox"];
 export const getThumbnailImage = async (dom, options = {}) => {
   try {
     const canvas = await html2canvas(dom, {
@@ -99,9 +99,6 @@ function padZero(str, len) {
   return (zeros + str).slice(-len);
 }
 export function getEmbedURL(element, needType = false) {
-  if (typeof element?.href !== "string" && typeof element?.url !== "string") {
-    return null;
-  }
   let refUrl = element.href ? element.href : element.url;
   refUrl = refUrl ? refUrl.includes("http") ? refUrl : `//${refUrl}` : "Link";
   let embedUrl = refUrl;

package/dist/Editor/helper/theme.js

@@ -1,6 +1,4 @@
-import { ReactEditor } from "slate-react";
 import { sizeMap } from "../utils/font";
-import { Editor, Node } from "slate";
 export const breakpoints = {
   small: 0,
   mobile: 600,
@@ -35,7 +33,7 @@ const overrideValues = (value, ot) => {
   return Object.keys(value).reduce((a, b) => {
     return {
       ...a,
-      [b]: overrides[ot] ? overrides[ot](value[b], value) : value
+      [b]: overrides[ot] ? overrides[ot](value[b]) : value
     };
   }, {});
 };
@@ -52,15 +50,7 @@ const overrides = {
   overrideReSizeH: val => {
     return val ? `${val?.height}px` : "auto";
   },
-  overrideBorderRadius: (val, breakpointValues) => {
-    if (!val?.topLeft) {
-      Object.values(breakpointValues || {}).forEach(v => {
-        if (v) {
-          // Applying the values from breakpoints that exist to those that do not have
-          val = v;
-        }
-      });
-    }
+  overrideBorderRadius: val => {
     return `${val?.topLeft}px ${val?.topRight}px ${val?.bottomLeft}px ${val?.bottomRight}px`;
   }
 };
@@ -128,197 +118,6 @@ export const getTRBLBreakPoints = (value, breakpoint) => {
     console.log(err);
   }
 };
-export function getElementStyle(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);
-  }
-}
-export function getTextSizeVal(editor) {
-  try {
-    const currentNode = Node.get(editor, editor.selection.anchor.path);
-    const currentElement = ReactEditor.toDOMNode(editor, currentNode);
-    if (currentElement) {
-      const element = currentElement.querySelector('span[data-slate-string="true"]');
-      const fontSize = getElementProperty(element, "font-size");
-      return fontSize || 16;
-    }
-  } catch (err) {
-    // console.log(err);
-  }
-}
-export function getVariableValue(val) {
-  const bodyElement = document.body;
-  const computedStyle = getComputedStyle(bodyElement);
-  const [, variableName] = val?.match(/var\((--[^)]+)\)/) || [];
-  const varValue = computedStyle.getPropertyValue(variableName).trim();
-  return varValue;
-}
-const MAP_PROPERTY_KEYS = {
-  fontFamily: "font-family",
-  fontSize: "font-size",
-  textSize: "font-size",
-  fontWeight: "font-weight",
-  color: "color",
-  bgColor: "background-color"
-};
-export function getElementProperty(element, styleProperty) {
-  if (!element) {
-    return "";
-  }
-  const computedStyle = window.getComputedStyle(element);
-  const property = MAP_PROPERTY_KEYS[styleProperty] || styleProperty;
-  let style = computedStyle.getPropertyValue(property);
-  if (property === "font-family") {
-    style = style.replace(/"/g, ""); // remove double quotes if exists e.g: '"Courier New"'
-  }
-
-  return style || "";
-}
-export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic", "fontWeight"
-// "underline",
-// "strikethrough",
-];
-
-const themeElements = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
-export const isTextCustomized = editor => {
-  try {
-    if (editor.selection) {
-      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
-      if (!currentElement) {
-        return false;
-      }
-      const {
-        children,
-        type
-      } = currentElement;
-      if (!themeElements.includes(type)) {
-        return false;
-      }
-      if (!children?.length) {
-        return true;
-      }
-      const customized = textThemeFields.some(field => {
-        const element = children.find(child => child.text.trim() !== "") || {};
-        const value = element[field];
-        if (field === "fontSize") {
-          return Object.keys(value || {}).length;
-        } else {
-          return value;
-        }
-      });
-      return customized;
-    } else {
-      return null;
-    }
-  } catch (err) {
-    return null;
-  }
-};
-const addToTheme = (field, value, element) => {
-  switch (field) {
-    case "fontFamily":
-      return {
-        fontFamily: value
-      };
-    case "fontSize":
-      return {
-        fontSize: value?.lg
-      };
-    case "color":
-      return {
-        color: value
-      };
-    case "bold":
-      return {
-        fontWeight: "bold"
-      };
-    case "italic":
-      return {
-        fontStyle: "italic"
-      };
-    // case "underline":
-    // case "strikethrough":
-    //   let textDecoration = "";
-
-    //   if (element.underline) {
-    //     textDecoration = "underline";
-    //   }
-
-    //   if (element.strikethrough) {
-    //     textDecoration += " strikethrough";
-    //   }
-
-    //   return { textDecoration };
-    default:
-      return {};
-  }
-};
-const MAP_TEXT_THEME_FIELD = {
-  headingOne: "h1",
-  headingTwo: "h2",
-  headingThree: "h3",
-  headingFour: "h4",
-  headingFive: "h5",
-  headingSix: "h6",
-  paragraphOne: "para1",
-  paragraphTwo: "para2",
-  paragraphThree: "para3"
-};
-export const saveToTheme = editor => {
-  try {
-    if (editor.selection) {
-      const currentElement = Node.parent(editor, editor?.selection?.anchor?.path);
-      if (!currentElement) {
-        return false;
-      }
-      const {
-        children
-      } = currentElement;
-      if (!children?.length) {
-        return true;
-      }
-      let theme = {};
-      textThemeFields.forEach(field => {
-        const element = children.find(child => child.text.trim() !== "") || {};
-        const value = element[field];
-        let style = {};
-        let isValueExist = false;
-        if (value) {
-          isValueExist = true;
-          if (field === "fontSize") {
-            isValueExist = !!Object.keys(value).length;
-          }
-        }
-        if (isValueExist) {
-          style = addToTheme(field, value, element);
-        }
-        theme = {
-          ...theme,
-          ...style
-        };
-      });
-      textThemeFields.forEach(field => {
-        Editor.removeMark(editor, field);
-      });
-      return {
-        field: MAP_TEXT_THEME_FIELD[currentElement?.type],
-        theme
-      };
-    }
-  } catch (err) {
-    return;
-  }
-};
-export const HEADING_THEME_FIELDS = ["h1", "h2", "h3", "h4", "h5", "h6"];
-export const PARAGRAPH_THEME_FIELDS = ["para1", "para2", "para3"];
 export const getBRValue = (props, rbr = "lg") => {
   const {
     value,

package/dist/Editor/hooks/useMouseMove.js

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

package/dist/Editor/hooks/useTable.js

@@ -25,63 +25,6 @@ import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "
 // };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function moveToAdjacentTableCell(editor, reverse = false, otherProps, tableSelection, updateTableSelection) {
-  try {
-    const {
-      startCellPath,
-      endCellPath
-    } = tableSelection;
-    if (startCellPath && startCellPath.toString() === endCellPath.toString()) {
-      const {
-        tableNode,
-        tablePath
-      } = otherProps;
-      const cellPath = startCellPath.slice(tablePath.length - 1);
-      const rows = tableNode.children;
-      const currentRowIndex = cellPath[1];
-      const currentColIndex = cellPath[2];
-      const numRows = rows.length;
-      const numCols = rows[0]?.children?.length || 0;
-
-      // Calculate new indices
-      let newRowIndex = currentRowIndex;
-      let newColIndex = currentColIndex;
-      if (reverse) {
-        // ALT + TAB: Go to previous cell
-        if (currentColIndex > 0) {
-          newColIndex--;
-        } else if (currentRowIndex > 0) {
-          newRowIndex--;
-          newColIndex = rows[newRowIndex].children.length - 1;
-        } else {
-          return; // At first cell, do nothing
-        }
-      } else {
-        // TAB: Go to next cell
-        if (currentColIndex < numCols - 1) {
-          newColIndex++;
-        } else if (currentRowIndex < numRows - 1) {
-          newRowIndex++;
-          newColIndex = 0;
-        } else {
-          return; // At last cell, do nothing
-        }
-      }
-
-      const nextCellPath = [...tablePath, newRowIndex, newColIndex];
-
-      // Move the selection into the next cell
-      Transforms.select(editor, Editor.start(editor, nextCellPath));
-      updateTableSelection({
-        startCellPath: nextCellPath,
-        endCellPath: nextCellPath,
-        isDragging: false
-      });
-    }
-  } catch (err) {
-    console.log("Error on pressing tab in table", err);
-  }
-}
 const handleDragEnd = (dragData, editor, resetAll) => {
   const {
     active,
@@ -184,11 +127,7 @@ export const TableProvider = ({
     let isTextSelected;
     const handleKeyDown = event => {
       const isCutKey = (event.ctrlKey || event.metaKey) && event.key === "x";
-      if (event.key === "Tab") {
-        event.preventDefault();
-        const isReverse = event.shiftKey;
-        moveToAdjacentTableCell(editor, isReverse, otherProps, tableSelection, updateTableSelection);
-      } else if (isCutKey) {
+      if (isCutKey) {
         isTextSelected = isHavingSelection(editor);
       } else if (event.key === "Backspace") {
         const selectedCells = getSelectedCells();

package/dist/Editor/plugins/withEmbeds.js

@@ -1,5 +1,5 @@
 import { Transforms, Path, Node } from "slate";
-const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "blockquote"];
+const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
 const BlockTypes = ["grid"];
 const withEmbeds = editor => {
   const {