@flozy/editor 11.2.3 → 11.2.4

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useImperativeHandle, forwardRef, useState } from "react";
-import { Editable, Slate, ReactEditor } from 'slate-react';
-import { createEditor, Transforms, Editor } from 'slate';
+import { Editable, Slate, ReactEditor } from "slate-react";
+import { createEditor, Transforms, Editor } from "slate";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked, serializeMentions } from "./utils/chatEditor/SlateUtilityFunctions";
 import MiniTextFormat from "./Toolbar/PopupTool/MiniTextFormat";
@@ -33,15 +33,15 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     isMobile = false,
     debounceTimeOut = 10,
     isMarkDown = false,
-    markDownContent = '',
+    markDownContent = "",
     translation
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
     data: content && content?.length > 0 ? content : [{
-      type: 'paragraph',
+      type: "paragraph",
       children: [{
-        text: ''
+        text: ""
       }]
     }]
   });
@@ -173,7 +173,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   let {
     type
   } = mentions;
-  if (type && type === "elements" && hideTools?.indexOf("slash") > -1) {
+  if (type && type === "elements" && hideTools.indexOf("slash") > -1) {
     type = null;
   }
   const chars = type ? Shorthands[type]({
@@ -257,7 +257,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         editor
       });
     } else if (event.key === "Enter" && !isMobile) {
-      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === 'paragraph' && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === '';
+      const isEmpty = debouncedValue?.current.length === 1 && debouncedValue?.current[0].type === "paragraph" && debouncedValue?.current[0].children.length === 1 && debouncedValue?.current[0].children[0].text === "";
       if (isEmpty) {
         event.preventDefault();
         return;

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 PropTypes from "prop-types";
 import { createEditor, Range, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
@@ -17,7 +17,7 @@ import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor, pageTextStyle } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useTheme, IconButton } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -26,9 +26,12 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
-import { getInitialValue, handleCopy, handleInsertLastElement, isEverythingSelected, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
+import { getTRBLBreakPoints, getVariableValue, getBreakpointLineSpacing } from "./helper/theme";
+import { getInitialValue, handleCopy, handleInsertLastElement, isEverythingSelected, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel, GetPageBgImage } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
+import { getTheme } from "./theme";
+import ThemeSettings from "./themeSettings";
+import ThemeSettingsAI from "./themeSettingsAI";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
@@ -37,9 +40,11 @@ import "./font.css";
 import "./Editor.css";
 import "animate.css";
 import FontLoader from "./common/FontLoader/FontLoader";
+import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
 import { CustomDialogComponent } from "./common/CustomDialog";
 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
@@ -94,6 +99,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     otherProps,
     isIframe,
     theme,
+    showThemeButtons,
     showViewport = false,
     overrideWrapperStyles = {},
     translation
@@ -127,14 +133,29 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     fixedWidth = "60%",
     fullWidth = "80%",
     hideTools = [],
-    translationMock
+    translationMock,
+    uploadFile,
+    resumeUploadState,
+    uploadTerminator,
+    isUploadInProgress = () => {}
   } = otherProps || {};
   const translationFn = translation || translationMock || (() => {});
+  const getTitleSaveData = title => {
+    const val = debouncedValue.current;
+    const data = {
+      text: serializeToText(val),
+      title: title
+    };
+    if (customProps.onSaveTitle) {
+      const isTitleChanged = true;
+      customProps.onSaveTitle(JSON.stringify(val), data, isTitleChanged);
+    }
+  };
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     const editor = createEditor();
     editor.needLayout = needLayout;
-    editor.translation = translationFn;
+    editor.getTitleSaveData = getTitleSaveData;
     return withCommon(editor, {
       needLayout
     });
@@ -145,10 +166,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     bannerSpacing,
     pageBgImage,
-    pageColor,
+    pageColor = "",
     color: pageTextColor,
     pageWidth,
     maxWidth: pageMaxWidth,
+    theme: selectedTheme,
     lineHeight
   } = pageSt?.pageProps || {
     bannerSpacing: {
@@ -160,10 +182,17 @@ 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,
     overrideWrapperStyles
   });
+  const [openTheme, setOpenTheme] = useState(false);
+  const [openAITheme, setOpenAITheme] = useState(false);
+  const [, setThemeUpdated] = useState(0);
+  const triggerRender = () => {
+    setThemeUpdated(prev => prev + 1); // Incrementing forces a re-render while updating theme
+  };
+
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {
     setValue(draftToSlate({
@@ -206,17 +235,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       title: serializeToText(title?.children) || "Untitled"
     };
   };
-  const getTitleSaveData = title => {
-    const val = debouncedValue.current;
-    const data = {
-      text: serializeToText(val),
-      title: title
-    };
-    if (customProps.onSaveTitle) {
-      const isTitleChanged = true;
-      customProps.onSaveTitle(JSON.stringify(val), data, isTitleChanged);
-    }
-  };
   const getPreviewImage = async (needBackground = false, options = {}) => {
     ReactEditor.blur(editor);
     const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
@@ -316,6 +334,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     redo() {
       editor?.redo();
     },
+    toggleTheme() {
+      setOpenTheme(!openTheme);
+    },
+    toggleAITheme() {
+      setOpenAITheme(!openAITheme);
+    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
@@ -370,7 +394,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     ICON_API: "https://assets.agenciflow.com",
     translation: translationFn,
     getTitleSaveData,
-    customLineHeight: lineH
+    customLineHeight: lineH,
+    uploadFile,
+    resumeUploadState,
+    uploadTerminator,
+    isUploadInProgress
   };
   const renderElement = useCallback(props => {
     return /*#__PURE__*/_jsx(Element, {
@@ -510,8 +538,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const editorWrapperStyle = useMemo(() => {
     const style = {};
-    if (pageBgImage && pageBgImage !== "none") {
-      style.backgroundImage = `url(${pageBgImage})`;
+    const bgImageUrl = GetPageBgImage(pageBgImage);
+    if (bgImageUrl) {
+      style.backgroundImage = `url(${bgImageUrl})`;
       style.backgroundSize = `cover`;
       style.backgroundRepeat = "repeat";
     } else {
@@ -519,6 +548,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor, pageTextColor]);
+  const themeProps = getTheme(selectedTheme);
 
   // const handleContextMenu = (e) => {
   //   if (!readOnly) {
@@ -552,7 +582,23 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsxs(EditorProvider, {
     theme: theme,
     editor: editor,
-    children: [/*#__PURE__*/_jsx(FontLoader, {
+    openTheme: openTheme,
+    setOpenTheme: setOpenTheme,
+    triggerRender: triggerRender,
+    children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
+      className: "theme-buttons",
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setOpenTheme(true),
+        className: "themePaintIcon",
+        children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
+      }), /*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setOpenAITheme(true),
+        style: {
+          marginTop: "4px"
+        },
+        children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
+      })]
+    }) : null, /*#__PURE__*/_jsx(FontLoader, {
       otherProps: {
         services: otherProps?.services
       },
@@ -562,6 +608,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       ...props,
       fullScreen: fullScreen,
       footer: footer || "",
+      selectedTheme: selectedTheme,
       children: /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
@@ -589,13 +636,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 id: "slate-wrapper-scroll-container",
                 ref: editorWrapper,
                 onClick: e => {
-                  handleInsertLastElement(e, editor);
+                  if (!isReadOnly) {
+                    handleInsertLastElement(e, editor);
+                  }
                 },
                 onScroll: handleScroll,
                 style: editorWrapperStyle,
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
+                  sx: themeProps?.sxProps || {},
                   "data-info": outsideEditorClickLabel,
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
@@ -665,6 +715,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     "data-info": outsideEditorClickLabel,
                     onClick: handleFooterClick,
                     children: footer
+                  }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
+                    open: openTheme,
+                    setOpen: setOpenTheme,
+                    editor: editor,
+                    services: otherProps?.services,
+                    appTheme: theme,
+                    customProps: customProps
+                  }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
+                    openAITheme: openAITheme,
+                    setOpenAITheme: setOpenAITheme,
+                    onSaveTheme: otherProps?.onSaveTheme,
+                    theme: theme
                   })]
                 })
               }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {

package/dist/Editor/DialogWrapper.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import ViewportStimulator from "./common/RnD/Theme/ViewportStimulator";
+import MainThemeProvider from "./common/RnD/Theme/MainThemeProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -9,40 +10,45 @@ const DialogWrapper = props => {
     fullScreen,
     onClose,
     children,
-    classes
+    classes,
+    selectedTheme
   } = props;
-  return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
-    className: `dialogComp`,
-    open: fullScreen,
-    fullScreen: fullScreen,
-    onClose: onClose,
-    style: {
-      zIndex: 1000
-    },
-    sx: classes.fullScreenWrapper,
-    children: [/*#__PURE__*/_jsx(DialogTitle, {
+  return fullScreen ? /*#__PURE__*/_jsx(MainThemeProvider, {
+    userSelectedTheme: selectedTheme,
+    children: /*#__PURE__*/_jsxs(Dialog, {
+      className: `dialogComp`,
+      open: fullScreen,
+      fullScreen: fullScreen,
+      onClose: onClose,
       style: {
-        padding: "6px 8px"
+        zIndex: 1000
       },
-      children: /*#__PURE__*/_jsx(Grid, {
+      sx: classes.fullScreenWrapper,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        style: {
+          padding: "6px 8px"
+        },
         children: /*#__PURE__*/_jsx(Grid, {
-          style: {
-            display: "flex",
-            justifyContent: "end"
-          },
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onClose,
+          children: /*#__PURE__*/_jsx(Grid, {
             style: {
-              background: "rgba(255,255,255,0.5)"
+              display: "flex",
+              justifyContent: "end"
             },
-            children: /*#__PURE__*/_jsx(CloseIcon, {})
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onClose,
+              style: {
+                background: "rgba(255,255,255,0.5)"
+              },
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
           })
         })
-      })
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      children: children
-    })]
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: children
+      })]
+    })
   }) : /*#__PURE__*/_jsx(ViewportStimulator, {
+    selectedTheme: selectedTheme,
     children: children
   });
 };

package/dist/Editor/Editor.css

@@ -1342,16 +1342,16 @@ blockquote {
 
 ::selection {
   color: inherit;
-  background: rgba(35, 131, 226, 0.35) !important;
+  /* background: rgba(35, 131, 226, 0.35) !important; */ 
 }
 
 ::-moz-selection {
-  background: rgba(35, 131, 226, 0.35) !important;
+  /* background: rgba(35, 131, 226, 0.35) !important; */
   color: inherit;
 }
 
 ::-webkit-selection {
-  background: rgba(35, 131, 226, 0.35) !important;
+  /* background: rgba(35, 131, 226, 0.35) !important; */
   color: inherit;
 }
 
@@ -1383,6 +1383,39 @@ code.markcode {
   font-family: 'Source Code Pro' !important;
 }
 
+.theme-buttons {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin: auto;
+  position: absolute;
+  top: 60px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.themePaintIcon:hover .iconBorder {
+  fill: #2563EB;
+}
+
+.themePaintIcon:hover .iconStroke {
+  stroke: #2563EB;
+}
+
 .hyperLink {
   word-break: break-all;
-}
+}
+
+.truncateText {
+  display: inline-block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media only screen and (max-width: 600px) {
+  .truncateText {
+    width: 180px;
+  }
+}

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -167,6 +167,7 @@ function PopoverAIInput({
   const [generatedText, setGeneratedText] = useState("");
   const [inputValue, setInputValue] = useState("");
   const [selectedOption, setSelectedOption] = useState();
+  const [threadId, setThreadId] = useState("");
   const selectedEleRef = useRef({});
   const classes = Styles();
   const editor = useSlate();
@@ -188,6 +189,7 @@ function PopoverAIInput({
   useEffect(() => {
     if (openAI) {
       scrollToAIInput(editor);
+      setThreadId("");
     }
   }, [openAI]);
   useEffect(() => {
@@ -196,8 +198,12 @@ function PopoverAIInput({
   const framePayload = (type, option) => {
     let payload = {
       mode: option.mode || 0,
-      query: option?.inputValue || inputValue
+      query: option?.inputValue || inputValue,
+      useSession: true
     };
+    if (threadId) {
+      payload.threadId = threadId;
+    }
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
     }
@@ -257,12 +263,14 @@ function PopoverAIInput({
       setLoading(false);
       setInputValue("");
       let {
-        data: text
-      } = result || {};
+        body: text,
+        threadId
+      } = result?.data || {};
       if (!text) {
         onClickOutside();
         return;
       }
+      setThreadId(threadId || "");
 
       // if (!option.replace) {
       if (type === "continue_writing") {

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

@@ -268,7 +268,7 @@ function AppHeader(props) {
               style: {
                 display: "inline-flex",
                 alignItems: "center",
-                color: textColor,
+                color: textColor || "#000000",
                 fontSize: logoFontSize,
                 fontFamily: titleFontFamily,
                 justifyContent: isLogoRight ? "end" : "start"
@@ -323,7 +323,7 @@ function AppHeader(props) {
                     fontFamily: fontFamily,
                     textTransform: "none",
                     fontSize: fontSize || "16px",
-                    color: textColor || "#FFF",
+                    color: textColor || "#000",
                     background: bgColor || "none",
                     border: borderColorHover ? `1px solid transparent` : "none",
                     "& .m-settings": {
@@ -339,7 +339,7 @@ function AppHeader(props) {
                       background: "#FFF"
                     },
                     "&:hover": {
-                      color: textColorHover || textColor || "#FFF",
+                      color: textColorHover || textColor || "#000",
                       background: bgColorHover || bgColor || "none",
                       border: borderColorHover ? `1px solid ${borderColorHover}` : "none",
                       "& .m-settings": {

package/dist/Editor/Elements/Attachments/AttachmentStyles.js

@@ -0,0 +1,16 @@
+const useAttachmentStyle = theme => ({
+  attachmentRoot: {
+    "& .uploadinDetails": {
+      display: "flex",
+      gap: "10px",
+      "& .MuiCircularProgress-root": {
+        width: "15px !important",
+        height: "15px !important"
+      }
+    },
+    "& .cancelBtn": {
+      display: "contents"
+    }
+  }
+});
+export default useAttachmentStyle;