@flozy/editor 3.6.9 → 3.7.1

package/dist/Editor/plugins/withHTML.js

@@ -1,4 +1,4 @@
-import { Transforms, Editor, Element, Node, Path } from "slate";
+import { Transforms, Editor, Element, Node } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
@@ -15,7 +15,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);
@@ -26,48 +26,6 @@ export const getCurrentElement = editor => {
     return null;
   }
 };
-const getCurrentElementText = editor => {
-  try {
-    if (editor.selection) {
-      return Editor.string(editor, editor?.selection?.anchor?.path);
-    } else {
-      return null;
-    }
-  } catch (err) {
-    return null;
-  }
-};
-const insertAtNextNode = (editor, formattedFragment) => {
-  try {
-    const {
-      selection
-    } = editor;
-    if (selection) {
-      const parentPath = Path.parent(editor?.selection?.anchor?.path);
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath
-      });
-      Transforms.insertFragment(editor, formattedFragment, {
-        at: nextPath
-      });
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-const handleInsert = (editor, defaultInsert, fragment = []) => {
-  if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
-    insertAtNextNode(editor, fragment);
-  } else {
-    defaultInsert();
-  }
-};
 const formatFragment = {
   "list-item": fragment => {
     let refactorFragment = [];
@@ -106,11 +64,11 @@ const withHtml = editor => {
     const currentEl = getCurrentElement(editor);
     const eltype = currentEl?.type;
     if (slateHTML && !formatFragment[eltype]) {
-      const decoded = decodeAndParseBase64(slateHTML);
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
       });
       if (tableNode && tableNode[0]) {
+        const decoded = decodeAndParseBase64(slateHTML);
         const defaultInsert = loopChildren(decoded, true);
         if (defaultInsert) {
           insertData(data);
@@ -121,7 +79,7 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => insertData(data), decoded);
+        insertData(data);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -138,7 +96,7 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
+      Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/plugins/withLayout.js

@@ -32,21 +32,16 @@ const withLayout = editor => {
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
       if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
-        const {
-          anchor
-        } = editor?.selection || {};
-        if (anchor?.offset !== 0) {
-          const title = {
-            type: "title",
-            children: [{
-              text: "Untitled"
-            }]
-          };
-          Transforms.insertNodes(editor, title, {
-            at: path.concat(0),
-            select: true
-          });
-        }
+        const title = {
+          type: "title",
+          children: [{
+            text: "Untitled"
+          }]
+        };
+        Transforms.insertNodes(editor, title, {
+          at: path.concat(0),
+          select: true
+        });
       }
       if (editor.children.length === 0) {
         const paragraph = {

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,
@@ -8,7 +8,7 @@ const withTable = editor => {
     delete: slateDelete
   } = editor;
   editor.delete = arg => {
-    if (arg?.reverse) {
+    if (arg.reverse) {
       const table = new TableUtil(editor);
       const cellsSelected = table.isCellSelected(editor.selection);
       if (cellsSelected && cellsSelected.length > 1) {

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;

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 { fontFamilyMap, sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -34,12 +34,12 @@ import SimpleText from "../Elements/SimpleText";
 import CheckList from "../Elements/List/CheckList";
 import { isEmptyTextNode } from "../helper";
 import Attachments from "../Elements/Attachments/Attachments";
-import { getBreakPointsValue, textThemeFields } from "../helper/theme";
+import { getBreakPointsValue } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
+import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
 import { getBorderColor } from "./helper";
 import Code from "../Elements/EmbedScript/Code";
-import { ReactEditor } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -47,17 +47,7 @@ const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
 };
-
-// const NEWLINESAFTER = [
-//   "headingOne",
-//   "headingTwo",
-//   "headingThree",
-//   "headingFour",
-//   "headingFive",
-//   "headingSix",
-// ];
-
-const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
+const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree"];
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -90,9 +80,8 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   if (!selection) {
     Transforms.insertText(editor, "");
   }
-  const forActiveType = THEME_BLOCK_FIELDS.some(f => f === format) ? format : "paragraph";
   Transforms.setNodes(editor, {
-    type: isActive ? forActiveType : isList ? LIST_FORMAT_TYPE[format] : format,
+    type: isActive ? "paragraph" : isList ? LIST_FORMAT_TYPE[format] : format,
     ...attr
   });
   if (isList && !isActive) {
@@ -101,12 +90,10 @@ export const toggleBlock = (editor, format, selection = true, attr = {}) => {
       children: []
     });
   }
-
-  // if (NEWLINESAFTER.indexOf(format) > -1) {
-  //   insertNewLine(editor);
-  // }
+  if (NEWLINESAFTER.indexOf(format) > -1) {
+    insertNewLine(editor);
+  }
 };
-
 export const addMarkData = (editor, data) => {
   try {
     Editor.addMark(editor, data.format, data.value);
@@ -115,14 +102,9 @@ export const addMarkData = (editor, data) => {
   }
 };
 export const toggleMark = (editor, format) => {
-  const isActive = isMarkBtnActive(editor, format);
+  const isActive = isMarkActive(editor, format);
   if (isActive) {
-    const isThemeSupportedMark = textThemeFields.some(f => f === format);
-    if (isThemeSupportedMark) {
-      Editor.addMark(editor, format, false);
-    } else {
-      Editor.removeMark(editor, format);
-    }
+    Editor.removeMark(editor, format);
   } else {
     Editor.addMark(editor, format, true);
   }
@@ -136,49 +118,6 @@ export const isMarkActive = (editor, format) => {
     return null;
   }
 };
-export const isMarkBtnActive = (editor, format) => {
-  switch (format) {
-    case "bold":
-      {
-        const style = getSelectedElementStyle("font-weight", editor);
-        return style === "700";
-      }
-    case "italic":
-      {
-        const style = getSelectedElementStyle("font-style", editor);
-        return style === format;
-      }
-    // case "underline": {
-    //   const style = getSelectedElementStyle("text-decoration");
-
-    //   return style?.includes(format);
-    // }
-    // case "strikethrough": {
-    //   const style = getSelectedElementStyle("text-decoration");
-
-    //   return style?.includes("line-through");
-    // }
-    default:
-      return isMarkActive(editor, format);
-  }
-};
-export const getSelectedElementStyle = (styleProperty, editor) => {
-  if (!editor.selection) {
-    return "";
-  }
-  if (Range.isCollapsed(editor.selection)) {
-    return "";
-  }
-  const domRange = ReactEditor.toDOMRange(editor, editor.selection);
-  const selectedDomNode = domRange.commonAncestorContainer;
-
-  // If it's a text node, get its parent element
-  const selectedElement = selectedDomNode.nodeType === 3 ? selectedDomNode.parentElement : selectedDomNode;
-  if (selectedElement) {
-    const computedStyle = window.getComputedStyle(selectedElement);
-    return computedStyle.getPropertyValue(styleProperty) || "";
-  }
-};
 export const isBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
     match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
@@ -221,31 +160,6 @@ export const activeMark = (editor, format) => {
     return null;
   }
 };
-
-// to avoid the styles, that automatically assign from themes
-const getThemeMarkedLeaf = (leaf, children) => {
-  const {
-    italic,
-    bold
-  } = leaf || {};
-  const style = {};
-  if (italic === false) {
-    style.fontStyle = "normal";
-  }
-  if (bold === false) {
-    style.fontWeight = "normal";
-  }
-  if (Object.keys(style).length) {
-    children = /*#__PURE__*/_jsx(Box, {
-      component: "span",
-      sx: {
-        "& span": style
-      },
-      children: children
-    });
-  }
-  return children;
-};
 export const getMarked = (leaf, children) => {
   const className = leaf?.doublequote ? "doublequote" : "";
   if (leaf.bold) {
@@ -263,7 +177,6 @@ export const getMarked = (leaf, children) => {
       children: children
     });
   }
-  children = getThemeMarkedLeaf(leaf, children);
   if (leaf.strikethrough) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
@@ -297,22 +210,17 @@ export const getMarked = (leaf, children) => {
     } : {
       color: leaf.color
     };
-    const fontSize = {
-      lg: sizeMap[leaf.fontSize] || leaf.fontSize,
-      ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
-    };
-    const fontSizesImportant = {};
-    Object.entries(fontSize).forEach(([key, value]) => {
-      fontSizesImportant[key] = `${value} !important`;
-    });
     children = /*#__PURE__*/_jsx("span", {
+      style: {
+        background: leaf.bgColor
+      },
       children: /*#__PURE__*/_jsx(Box, {
         className: className,
         component: "span",
         sx: {
-          "& span": {
-            fontSize: fontSizesImportant,
-            background: leaf.bgColor
+          fontSize: {
+            lg: sizeMap[leaf.fontSize] || leaf.fontSize,
+            ...getBreakPointsValue(leaf.fontSize, null, "overrideText")
           },
           ...textStyles,
           fontFamily: family,
@@ -342,71 +250,31 @@ export const getBlock = props => {
   } = props;
   const attributes = props.attributes ?? {};
   const isEmpty = isEmptyTextNode(element);
-  const commonHeadingProps = () => ({
-    ...attributes,
-    ...element.attr,
-    className: `content-editable ${isEmpty ? "empty" : ""} theme-element`
-  });
-  const commonParaProps = paraType => ({
-    ...attributes,
-    ...element.attr,
-    className: `content-editable ${isEmpty ? "empty" : ""} theme-element ${paraType}`
-  });
   switch (element.type) {
     case "headingOne":
       return /*#__PURE__*/_jsx("h1", {
-        ...commonHeadingProps(),
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 1",
         children: children
       });
     case "headingTwo":
       return /*#__PURE__*/_jsx("h2", {
-        ...commonHeadingProps(),
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 2",
         children: children
       });
     case "headingThree":
       return /*#__PURE__*/_jsx("h3", {
-        ...commonHeadingProps(),
+        ...attributes,
+        ...element.attr,
+        className: `content-editable ${isEmpty ? "empty" : ""}`,
         placeholder: "Heading 3",
         children: children
       });
-    case "headingFour":
-      return /*#__PURE__*/_jsx("h4", {
-        ...commonHeadingProps(),
-        placeholder: "Heading 4",
-        children: children
-      });
-    case "headingFive":
-      return /*#__PURE__*/_jsx("h5", {
-        ...commonHeadingProps(),
-        placeholder: "Heading 5",
-        children: children
-      });
-    case "headingSix":
-      return /*#__PURE__*/_jsx("h6", {
-        ...commonHeadingProps(),
-        placeholder: "Heading 6",
-        children: children
-      });
-    case "paragraphOne":
-      return /*#__PURE__*/_jsx("p", {
-        ...commonParaProps("para1"),
-        placeholder: "Paragraph 1",
-        children: children
-      });
-    case "paragraphTwo":
-      return /*#__PURE__*/_jsx("p", {
-        ...commonParaProps("para2"),
-        placeholder: "Paragraph 2",
-        children: children
-      });
-    case "paragraphThree":
-      return /*#__PURE__*/_jsx("p", {
-        ...commonParaProps("para3"),
-        placeholder: "Paragraph 3",
-        children: children
-      });
     case "blockquote":
       return /*#__PURE__*/_jsx("blockquote", {
         ...attributes,

package/dist/Editor/utils/button.js

@@ -1,5 +1,6 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
+import { windowVar } from "./helper";
 export const insertButton = editor => {
   const button = {
     type: "button",
@@ -9,7 +10,22 @@ export const insertButton = editor => {
     buttonLink: {
       linkType: "webAddress"
     },
-    iconPosition: "start"
+    iconPosition: "start",
+    bgColor: "#2563EB",
+    textColor: "#FFF",
+    borderRadius: {
+      topLeft: 30,
+      topRight: 30,
+      bottomLeft: 30,
+      bottomRight: 30
+    },
+    bannerSpacing: {
+      left: 16,
+      top: 8,
+      right: 16,
+      bottom: 8
+    },
+    ...(windowVar.lastButtonProps || {})
   };
   Transforms.insertNodes(editor, button);
   Transforms.move(editor);