@flozy/editor 3.7.2 → 3.7.3

package/dist/Editor/CommonEditor.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
 import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
@@ -18,7 +18,7 @@ import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, IconButton, Typography } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -28,12 +28,19 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints } from "./helper/theme";
-import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
+import { getTRBLBreakPoints, getVariableValue } from "./helper/theme";
+import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
+import { getTheme } from "./theme";
+import { useTheme } from "@emotion/react";
+import ThemeSettings from "./themeSettings";
+import ThemeSettingsAI from "./themeSettingsAI";
+import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
+import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const ThemeContext = /*#__PURE__*/createContext(null);
 const Item = /*#__PURE__*/forwardRef(({
   children,
   ...props
@@ -60,7 +67,8 @@ const Leaf = ({
   children,
   leaf
 }) => {
-  children = getMarked(leaf, children);
+  const theme = useTheme();
+  children = getMarked(leaf, children, theme);
   return /*#__PURE__*/_jsx("span", {
     ...attributes,
     children: children
@@ -79,7 +87,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     toolbarOptions,
     otherProps,
     isIframe,
-    theme
+    theme,
+    showThemeButtons
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -123,10 +132,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     bannerSpacing,
     pageBgImage,
-    pageColor,
+    pageColor = "",
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth
+    maxWidth: pageMaxWidth,
+    theme: selectedTheme
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -137,9 +147,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 20,
-    placeHolderColor: invertColor(pageColor || "#FFF"),
+    placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
     theme
   });
+  const [openTheme, setOpenTheme] = useState(false);
+  const [openAITheme, setOpenAITheme] = useState(false);
   useEffect(() => {
     setValue(draftToSlate({
       data: content
@@ -239,6 +251,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     redo() {
       editor?.redo();
     },
+    toggleTheme() {
+      setOpenTheme(!openTheme);
+    },
+    toggleAITheme() {
+      setOpenAITheme(!openAITheme);
+    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
@@ -319,7 +337,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (isCtrlKey) {
       commands({
         event,
-        editor
+        editor,
+        needLayout
       });
     } else if (event.key === "Tab") {
       event.preventDefault();
@@ -385,113 +404,152 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
-  return /*#__PURE__*/_jsx(EditorProvider, {
-    theme: theme,
-    editor: editor,
-    children: /*#__PURE__*/_jsx(DialogWrapper, {
-      classes: classes,
-      ...props,
-      fullScreen: fullScreen,
-      footer: footer || "",
-      children: /*#__PURE__*/_jsx(Box, {
-        component: "div",
-        className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
-        sx: classes.root,
-        style: {
-          ...dotBg
-        },
-        children: /*#__PURE__*/_jsxs(Slate, {
-          editor: editor,
-          initialValue: value,
-          onChange: handleEditorChange,
-          children: [/*#__PURE__*/_jsx(DragAndDrop, {
-            children: /*#__PURE__*/_jsxs(Overlay, {
-              children: [/*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
-                sx: classes.slateWrapper,
-                id: "slate-wrapper-scroll-container"
-                // style={editorWrapperStyle}
-                ,
-                ref: editorWrapper,
-                onClick: e => {
-                  handleInsertLastElement(e, editor);
-                },
-                onScroll: handleScroll,
-                style: editorWrapperStyle,
-                children: /*#__PURE__*/_jsxs(Box, {
-                  component: "div",
-                  className: "max-content",
-                  "data-info": outsideEditorClickLabel,
-                  children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
-                    className: "scroll-area",
-                    "data-info": outsideEditorClickLabel,
+  const themeProps = getTheme(selectedTheme);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: {
+      openTheme,
+      setOpenTheme
+    },
+    children: /*#__PURE__*/_jsx(CssVarsProvider, {
+      theme: extendTheme(selectedTheme?.theme?.cssVars || {}),
+      children: /*#__PURE__*/_jsxs(EditorProvider, {
+        theme: theme,
+        editor: editor,
+        children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "end",
+            alignItems: "center",
+            gap: "8px",
+            width: "70vw",
+            margin: "auto"
+          },
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            onClick: () => setOpenTheme(true),
+            children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
+          }), /*#__PURE__*/_jsx(IconButton, {
+            onClick: () => setOpenAITheme(true),
+            style: {
+              marginTop: "4px"
+            },
+            children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
+          })]
+        }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
+          classes: classes,
+          ...props,
+          fullScreen: fullScreen,
+          footer: footer || "",
+          children: /*#__PURE__*/_jsx(Box, {
+            component: "div",
+            className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
+            sx: classes.root,
+            style: {
+              ...dotBg
+            },
+            children: /*#__PURE__*/_jsxs(Slate, {
+              editor: editor,
+              initialValue: value,
+              onChange: handleEditorChange,
+              children: [/*#__PURE__*/_jsx(DragAndDrop, {
+                children: /*#__PURE__*/_jsxs(Overlay, {
+                  children: [/*#__PURE__*/_jsx(Box, {
+                    className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
+                    sx: classes.slateWrapper,
+                    id: "slate-wrapper-scroll-container"
+                    // style={editorWrapperStyle}
+                    ,
+                    ref: editorWrapper,
+                    onClick: e => {
+                      handleInsertLastElement(e, editor);
+                    },
+                    onScroll: handleScroll,
+                    style: editorWrapperStyle,
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
-                      className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
-                      sx: {
-                        backgroundColor: "transparent",
-                        padding: {
-                          ...getTRBLBreakPoints(bannerSpacing)
-                        },
-                        width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
-                        height: viewport.h ? `${viewport.h}px` : `100%`,
-                        alignSelf: "center",
-                        transformOrigin: "left top",
-                        transition: "all 0.3s",
-                        minHeight: "87%",
-                        maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
-                      },
+                      className: "max-content",
+                      sx: themeProps?.sxProps || {},
                       "data-info": outsideEditorClickLabel,
-                      children: [/*#__PURE__*/_jsx(Editable, {
-                        className: "innert-editor-textbox",
-                        readOnly: isReadOnly,
-                        renderElement: renderElement,
-                        renderLeaf: renderLeaf,
-                        decorate: decorators,
-                        onKeyDown: onKeyDown
-                      }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
-                        ref: mentionsRef,
-                        mentions: mentions,
-                        setMentions: setMentions,
-                        editor: editor,
-                        target: target,
-                        index: index,
-                        chars: chars,
-                        type: type,
+                      children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
+                        className: "scroll-area",
+                        "data-info": outsideEditorClickLabel,
+                        children: /*#__PURE__*/_jsxs(Box, {
+                          component: "div",
+                          className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
+                          sx: {
+                            backgroundColor: "transparent",
+                            padding: {
+                              ...getTRBLBreakPoints(bannerSpacing)
+                            },
+                            width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
+                            height: viewport.h ? `${viewport.h}px` : `100%`,
+                            alignSelf: "center",
+                            transformOrigin: "left top",
+                            transition: "all 0.3s",
+                            minHeight: "87%",
+                            maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
+                          },
+                          "data-info": outsideEditorClickLabel,
+                          children: [/*#__PURE__*/_jsx(Editable, {
+                            className: "innert-editor-textbox",
+                            readOnly: isReadOnly,
+                            renderElement: renderElement,
+                            renderLeaf: renderLeaf,
+                            decorate: decorators,
+                            onKeyDown: onKeyDown
+                          }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
+                            ref: mentionsRef,
+                            mentions: mentions,
+                            setMentions: setMentions,
+                            editor: editor,
+                            target: target,
+                            index: index,
+                            chars: chars,
+                            type: type,
+                            theme: theme
+                          }) : null]
+                        })
+                      }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
+                        customProps: customProps,
+                        toolbarOptions: toolbarOptions,
                         theme: theme
-                      }) : null]
+                      }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
+                        otherProps: otherProps || {}
+                      }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
+                        sx: {
+                          color: "rgb(100, 116, 139)",
+                          fontSize: "13px",
+                          paddingBottom: hideMiniToolBar ? "0px" : "12px",
+                          cursor: "pointer"
+                        },
+                        align: "center",
+                        "data-info": outsideEditorClickLabel,
+                        onClick: handleFooterClick,
+                        children: footer
+                      }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
+                        open: openTheme,
+                        setOpen: setOpenTheme,
+                        editor: editor,
+                        services: otherProps?.services
+                      }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
+                        openAITheme: openAITheme,
+                        setOpenAITheme: setOpenAITheme,
+                        onSaveTheme: otherProps?.onSaveTheme
+                      })]
                     })
-                  }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
-                    customProps: customProps,
-                    toolbarOptions: toolbarOptions,
-                    theme: theme
-                  }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
-                    otherProps: otherProps || {}
-                  }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
-                    sx: {
-                      color: "rgb(100, 116, 139)",
-                      fontSize: "13px",
-                      paddingBottom: hideMiniToolBar ? "0px" : "12px",
-                      cursor: "pointer"
-                    },
-                    align: "center",
-                    "data-info": outsideEditorClickLabel,
-                    onClick: handleFooterClick,
-                    children: footer
-                  })]
+                  }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
+                    onDrawerOpen: onDrawerOpen,
+                    theme: theme,
+                    setIsTextSelected: setIsTextSelected,
+                    customProps: customProps
+                  }) : null]
                 })
-              }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
-                onDrawerOpen: onDrawerOpen,
-                theme: theme,
-                setIsTextSelected: setIsTextSelected,
-                customProps: customProps
-              }) : null]
-            })
-          }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
-            ...htmlAction,
-            handleCodeToText: handleCodeToText
-          })]
-        }, id)
+              }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
+                ...htmlAction,
+                handleCodeToText: handleCodeToText
+              })]
+            }, id)
+          })
+        })]
       })
     })
   });

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -9,6 +9,55 @@ import Icon from "../../common/Icon";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const accordionBtnStyleKeys = {
+  accordionTextColor: "textColor",
+  accordionBgColor: "bgColor",
+  accordionBorderColor: "borderColor"
+};
+const getAccordionData = updateData => {
+  const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
+  const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
+
+  Object.entries(updateData).forEach(([key, value]) => {
+    const accordionBtnStyleKey = accordionBtnStyleKeys[key];
+    if (accordionBtnStyleKey) {
+      // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
+      accordionBtnStyle[accordionBtnStyleKey] = value;
+      return;
+    }
+    accordionTitleStyle[key] = value;
+  });
+  return {
+    accordionBtnStyle,
+    accordionTitleStyle
+  };
+};
+const convertAccordionBtnStyleKeys = (data = {}) => {
+  const style = {
+    ...data
+  };
+  Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
+    const val = data[value];
+    if (val) {
+      // deleting the existing style key in node e.g: textColor
+      delete style[value];
+
+      // convertint into new key in element props e.g: accordionTextColor
+      style[key] = val;
+    }
+  });
+  return style;
+};
+const getElementProps = element => {
+  const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
+
+  // joining accordion title and button styles
+  const elementProps = {
+    ...accordionSummary,
+    ...convertAccordionBtnStyleKeys(element)
+  };
+  return elementProps;
+};
 const Accordion = props => {
   const {
     attributes,
@@ -69,16 +118,34 @@ const Accordion = props => {
       at: path
     });
   };
+  const setNodes = (data, path) => {
+    Transforms.setNodes(editor, data, {
+      at: path
+    });
+  };
   const onSave = data => {
     const updateData = {
       ...data
     };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
+    const {
+      accordionBtnStyle,
+      accordionTitleStyle
+    } = getAccordionData(updateData);
+
+    // applying accordion title style
+    const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
+    const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
+    setNodes({
+      ...accordionTitleStyle,
+      type: "accordion-summary",
+      children: accordionSummary.children
+    }, accordionSummaryPath);
+
+    // applying accordion button style
+    delete accordionBtnStyle.children;
+    setNodes({
+      ...accordionBtnStyle
+    }, path);
     onClose();
   };
   const onClose = () => {
@@ -123,7 +190,7 @@ const Accordion = props => {
       },
       children: children[1]
     }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
-      element: element,
+      element: getElementProps(element),
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js

@@ -1,6 +1,7 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
 import accordionTitleBtnStyle from "../../common/StyleBuilder/accordionTitleBtnStyle";
+import accordionTitleStyle from "../../common/StyleBuilder/accordionTitleStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionBtnPopup = props => {
   const {
@@ -10,12 +11,12 @@ const AccordionBtnPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Collapse Button",
+    title: "Accordion Settings",
     type: "accordionTitleBtnStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: accordionTitleBtnStyle,
+    renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
     customProps: customProps
   });
 };

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -1,68 +1,17 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
-import AccordionTitlePopup from "./AccordionTitlePopup";
-import { IconButton, Tooltip } from "@mui/material";
-import { GridSettingsIcon } from "../../common/iconslist";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
     children,
-    element,
-    customProps
+    element
   } = props;
-  const {
-    readOnly
-  } = customProps;
-  const [openSetttings, setOpenSettings] = useState(false);
-  const editor = useSlateStatic();
-  const [showTool] = useEditorSelection(editor);
-  const selected = useSelected();
-  const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
     bgColor,
     borderColor
   } = element;
-  const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
-      className: "element-toolbar hr",
-      contentEditable: false,
-      style: {
-        top: "-42px"
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    }) : null;
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
@@ -72,12 +21,7 @@ const AccordionSummary = props => {
       border: `1px solid ${borderColor}`,
       color: textColor
     },
-    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      customProps: customProps
-    }) : null]
+    children: children
   });
 };
 export default AccordionSummary;

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -62,6 +62,11 @@ function AppHeader(props) {
   const handleDrawerToggle = () => {
     setMobileOpen(prevState => !prevState);
   };
+  const closeDrawer = () => {
+    if (mobileOpen) {
+      handleDrawerToggle();
+    }
+  };
   const onSettings = e => {
     if (!readOnly) {
       e.stopPropagation();
@@ -148,10 +153,27 @@ function AppHeader(props) {
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(List, {
       children: menus.map((item, i) => {
         const buttonProps = handleLinkType(item.url, item.linkType, true, item.target === "_blank");
+        const onTouchEnd = e => {
+          if (buttonProps?.onTouchEnd) {
+            buttonProps?.onTouchEnd(e);
+            closeDrawer();
+          }
+        };
+        const onClick = e => {
+          if (buttonProps?.onClick) {
+            buttonProps?.onClick(e);
+            closeDrawer();
+          }
+        };
+        const props = {
+          ...buttonProps,
+          onTouchEnd,
+          onClick
+        };
         return /*#__PURE__*/_jsx(ListItem, {
           disablePadding: true,
           children: /*#__PURE__*/_jsx(ListItemButton, {
-            ...buttonProps,
+            ...props,
             sx: {
               textAlign: "center"
             },
@@ -229,7 +251,7 @@ function AppHeader(props) {
               style: {
                 display: "inline-flex",
                 alignItems: "center",
-                color: textColor,
+                color: textColor || "#000000",
                 fontSize: logoFontSize,
                 fontFamily: titleFontFamily,
                 justifyContent: isLogoRight ? "end" : "start"
@@ -277,7 +299,7 @@ function AppHeader(props) {
                     fontFamily: fontFamily,
                     textTransform: "none",
                     fontSize: fontSize || "16px",
-                    color: textColor || "#FFF",
+                    color: textColor || "#000",
                     background: bgColor || "none",
                     "& .m-settings": {
                       display: "none",
@@ -292,7 +314,7 @@ function AppHeader(props) {
                       background: "#FFF"
                     },
                     "&:hover": {
-                      color: textColorHover || textColor || "#FFF",
+                      color: textColorHover || textColor || "#000",
                       background: bgColorHover || bgColor || "none",
                       "& .m-settings": {
                         display: "block"