@flozy/editor 6.0.8 → 7.0.0

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,194 +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"]');
-      return getElementProperty(element, "font-size");
-    }
-  } 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"
-};
-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"
-// "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 > 1) {
-        return true;
-      }
-      const customized = textThemeFields.some(field => {
-        const element = children[0] || {};
-        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 > 1) {
-        return true;
-      }
-      let theme = {};
-      textThemeFields.forEach(field => {
-        const element = children[0] || {};
-        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/useDrag.js

@@ -1,26 +1,20 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 const useDrag = () => {
   const [event, setEvent] = useState("");
-  useEffect(() => {
-    addListener();
-    return () => {
-      removeListener();
-    };
-  }, []);
-  const onMouseDown = () => {
+  const onMouseDown = useCallback(() => {
     setEvent("start");
-  };
-  const onMouseUp = () => {
+  }, []);
+  const onMouseUp = useCallback(() => {
     setEvent("end");
-  };
-  const addListener = () => {
+  }, []);
+  useEffect(() => {
     document.addEventListener("pointerdown", onMouseDown);
     document.addEventListener("pointerup", onMouseUp);
-  };
-  const removeListener = () => {
-    document.removeEventListener("pointerdown", onMouseDown);
-    document.removeEventListener("pointerup", onMouseUp);
-  };
+    return () => {
+      document.removeEventListener("pointerdown", onMouseDown);
+      document.removeEventListener("pointerup", onMouseUp);
+    };
+  }, []);
   return [event];
 };
 export default useDrag;

package/dist/Editor/hooks/useEditorScroll.js

@@ -4,8 +4,9 @@ function useEditorScroll(editorWrapper = {
 }, callback) {
   useEffect(() => {
     const handleScroll = () => {
+      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
       if (editorWrapper.current) {
-        callback("scroll");
+        callback();
       }
     };
     const currentEditorWrapper = editorWrapper.current;

package/dist/Editor/hooks/useMouseMove.js

@@ -20,10 +20,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);
@@ -102,12 +99,9 @@ export const EditorProvider = ({
     updateDragging,
     fontFamilies,
     setFontFamilies,
-    openTheme,
-    setOpenTheme,
     activeBreakPoint,
-    setActiveBreakPoint,
-    triggerRender
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, openTheme, activeBreakPoint]);
+    setActiveBreakPoint
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

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 {

package/dist/Editor/plugins/withHTML.js

@@ -9,7 +9,7 @@ const parseCopiedHTML = html => {
   const parsed = new DOMParser().parseFromString(html, "text/html");
 
   // if ol, ul are inside li, remove and push ol,ul after that li to maintain format between our slate list and external source list's json
-  parsed.querySelectorAll("li > ul, li > ol, li > table").forEach(list => {
+  parsed.querySelectorAll("li > ul, li > ol").forEach(list => {
     // Find the parent li
     const parentLi = list.parentElement;
 
@@ -55,7 +55,7 @@ const loopChildren = (children = [], defaultInsert) => {
   }
   return defaultInsert;
 };
-export const getCurrentElement = editor => {
+const getCurrentElement = editor => {
   try {
     if (editor.selection) {
       return Node.parent(editor, editor?.selection?.anchor?.path);
@@ -253,7 +253,13 @@ const withHtml = editor => {
         return;
       }
       const fragment = deserialize(parsed.body);
-      const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
+      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;
       let is_img_table = false;
       formattedFragment.map(f => {
         if (f.type === "image" || f?.type?.includes("table")) {

package/dist/Editor/plugins/withLayout.js

@@ -39,7 +39,7 @@ const withLayout = editor => {
           const title = {
             type: "title",
             children: [{
-              text: ""
+              text: "Untitled"
             }]
           };
           Transforms.insertNodes(editor, title, {

package/dist/Editor/plugins/withTable.js

@@ -1,6 +1,6 @@
 import { Editor, Range, Point, Element, Transforms, Node } from "slate";
 import { TableUtil, createTableCell } from "../utils/table";
-const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item", "page-settings"];
+const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,

package/dist/Editor/theme/ThemeList.js

@@ -1,58 +1,181 @@
-import { Box, MenuItem, Select } from "@mui/material";
-import { defaultTheme } from ".";
-import { useEditorTheme } from "../hooks/useEditorTheme";
-import { useEffect, useState } from "react";
+import { MenuItem, Select, useTheme } from "@mui/material";
+import { fontOptions } from "../utils/font";
+import { toolbarGroups } from "../Toolbar/toolbarGroups";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function ThemeList({
-  editor,
-  services = () => {}
-}) {
-  const [themes, setThemes] = useState([]);
-  const [loading, setLoading] = useState(false);
-  console.log("loading", loading);
-  const getThemesList = async () => {
-    setLoading(true);
-    try {
-      const result = await services("getThemes", {});
-      setThemes(result?.data || []);
-    } catch (err) {
-      console.log(err);
-    }
-    setLoading(false);
-  };
+const themes = [{
+  label: "Theme 1",
+  colors: ["#c90c1f", "#ff5d05"]
+}, {
+  label: "Theme 2",
+  colors: ["#4c0be3", "#43f7ee"]
+}, {
+  label: "Theme 3",
+  colors: ["#22f20f", "#fff705"]
+}];
+const allTools = toolbarGroups.flat();
+function ThemeList(props) {
   const {
-    updateTheme
-  } = useEditorTheme();
-  useEffect(() => {
-    getThemesList();
-  }, []);
-  const handleThemeChange = e => {
-    const {
-      value
-    } = e.target;
-    const selectedTheme = themes.find(t => t.id === value) || defaultTheme;
-    updateTheme(selectedTheme, "THEME_CHANGE");
+    selectedTheme,
+    setSelectedTheme
+  } = props;
+  const fontWeight = allTools.find(f => f.format === "fontWeight");
+  const fontStyles = [{
+    text: "Bold",
+    value: "bold",
+    styleField: "fontWeight"
+  }, {
+    text: "Italic",
+    value: "italic",
+    styleField: "fontStyle"
+  }
+  // {
+  //   text: "Underline",
+  //   value: "underline",
+  //   styleField: "textDecoration",
+  // },
+  // {
+  //   text: "Line through",
+  //   value: "line-through",
+  //   styleField: "textDecoration",
+  // },
+  ];
+
+  const theme = useTheme();
+  const colorVars = theme?.vars?.colors || {};
+  const handleTypographyTheme = (key, value, elementType) => {
+    setSelectedTheme(prev => {
+      const newValue = {
+        ...prev,
+        typography: {
+          ...(prev.typography || {}),
+          [elementType]: {
+            ...(prev?.typography?.[elementType] || {}),
+            [key]: value
+          }
+        }
+      };
+      if (!value) {
+        delete newValue?.typography?.[elementType]?.[key];
+      }
+      return newValue;
+    });
   };
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      padding: "10px",
-      background: "#efefef",
-      borderRadius: "6px"
-    },
-    children: /*#__PURE__*/_jsxs(Select, {
-      onChange: handleThemeChange,
-      defaultValue: 0,
-      children: [/*#__PURE__*/_jsx(MenuItem, {
-        value: 0,
-        children: "Default Theme"
-      }), themes.map((theme, i) => {
-        return /*#__PURE__*/_jsx(MenuItem, {
-          value: theme?.id,
-          children: theme?.name
-        }, i);
+  return /*#__PURE__*/_jsxs("div", {
+    children: [themes.map((theme, i) => {
+      return /*#__PURE__*/_jsxs("button", {
+        style: {
+          margin: "10px"
+        },
+        onClick: () => setSelectedTheme(prev => ({
+          ...prev,
+          colors: theme.colors
+        })),
+        children: [theme.label, /*#__PURE__*/_jsx("div", {
+          children: theme.colors.map((c, j) => {
+            return /*#__PURE__*/_jsx("div", {
+              style: {
+                width: "20px",
+                height: "20px",
+                background: c,
+                margin: "10px"
+              }
+            }, j);
+          })
+        })]
+      }, i);
+    }), /*#__PURE__*/_jsxs("div", {
+      children: ["Heading 1 Font Family", /*#__PURE__*/_jsx(Select
+      // value={""}
+      , {
+        label: "Font Family",
+        onChange: e => {
+          handleTypographyTheme("fontFamily", e.target.value, "h1");
+        },
+        children: fontOptions.map((font, i) => {
+          const {
+            text,
+            value
+          } = font;
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: value,
+            children: text
+          }, i);
+        })
+      }), "Font Weight", /*#__PURE__*/_jsx(Select
+      // value={""}
+      , {
+        label: "Font Weight",
+        onChange: e => {
+          handleTypographyTheme("fontWeight", e.target.value, "h1");
+        },
+        children: fontWeight.options.map((option, i) => {
+          const {
+            text,
+            value
+          } = option;
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: value,
+            children: text
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "font size",
+        onChange: e => {
+          handleTypographyTheme("fontSize", e.target.value, "h1");
+        }
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["Text", /*#__PURE__*/_jsx("br", {}), "Theme color", Object.values(colorVars).map((colorVar, i) => {
+          return /*#__PURE__*/_jsx("button", {
+            style: {
+              width: "20px",
+              height: "20px",
+              background: colorVar,
+              margin: "10px",
+              outline: "none"
+            },
+            onClick: () => handleTypographyTheme("color", colorVar, "h1")
+          }, i);
+        }), "normal color", /*#__PURE__*/_jsx("button", {
+          style: {
+            width: "20px",
+            height: "20px",
+            background: "#ff00e1",
+            margin: "10px",
+            outline: "none"
+          },
+          onClick: () => handleTypographyTheme("color", "#ff00e1", "h1")
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        children: ["Font styles", fontStyles.map((option, i) => {
+          const styles = selectedTheme?.typography?.h1 || {};
+          const {
+            text,
+            value,
+            styleField
+          } = option;
+          return /*#__PURE__*/_jsxs("button", {
+            onClick: () => {
+              handleTypographyTheme(styleField, styles[styleField] === value ? null : value, "h1");
+            },
+            children: [text, " ", styles[styleField] === value]
+          }, i);
+        })]
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "Margin text Spacing",
+        onChange: e => {
+          handleTypographyTheme("letterSpacing", e.target.value, "h1");
+        }
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        placeholder: "Line spacing",
+        onChange: e => {
+          handleTypographyTheme("lineHeight", e.target.value, "h1");
+        }
       })]
-    })
+    })]
   });
 }
 export default ThemeList;