@flozy/editor 4.0.2 → 4.0.4

package/dist/Editor/ChatEditor.js

@@ -110,12 +110,12 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }));
-
-  // useEffect(() => {
-  //     setIsExternalUpdate(true);
-  //     setValue(draftToSlate({ data: content }));
-  // }, [content]);
-
+  useEffect(() => {
+    setIsExternalUpdate(true);
+    setValue(draftToSlate({
+      data: content
+    }));
+  }, [content]);
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {
@@ -178,9 +178,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
-    setValue(newValue);
-    if (!isInteracted) {
-      setIsInteracted(true);
+    if (isExternalUpdate) {
+      setIsExternalUpdate(false);
+      return;
+    } else {
+      setValue(newValue);
+      if (!isInteracted) {
+        setIsInteracted(true);
+      }
     }
   };
   const Element = props => {

package/dist/Editor/CommonEditor.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
-import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
+import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
+import PropTypes from "prop-types";
 import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
@@ -16,9 +17,7 @@ import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
-import "./font.css";
-import "./Editor.css";
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -26,21 +25,19 @@ import TopBanner from "./Elements/TopBanner/TopBanner";
 import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
-import "animate.css";
 import decorators from "./utils/Decorators";
-import { getTRBLBreakPoints, getVariableValue } from "./helper/theme";
-import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
+import { getTRBLBreakPoints } from "./helper/theme";
+import { handleInsertLastElement, isFreeGridFragment, 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 RnDCopy from "./common/RnD/RnDCopy";
+import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
+import { onInsertFragment } from "./utils/RnD/RnDCtrlCmds";
+import "./font.css";
+import "./Editor.css";
+import "animate.css";
 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
@@ -88,7 +85,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     otherProps,
     isIframe,
     theme,
-    showThemeButtons
+    showViewport = false
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -108,6 +105,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isScrolling, setIsScrolling] = useState(false);
   const [isTextSelected, setIsTextSelected] = useState(false);
+  const [breakpoint, setBreakpoint] = useState("");
   const [size] = useWindowResize();
   const {
     needDotsBG,
@@ -119,7 +117,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     fullWidth = "80%",
     hideTools
   } = otherProps || {};
-  const [drag, setDrag] = useState(null);
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor(), {
@@ -132,11 +129,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     bannerSpacing,
     pageBgImage,
-    pageColor = "",
+    pageColor,
     color: pageTextColor,
     pageWidth,
-    maxWidth: pageMaxWidth,
-    theme: selectedTheme
+    maxWidth: pageMaxWidth
   } = pageSt?.pageProps || {
     bannerSpacing: {
       left: 0,
@@ -147,15 +143,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 20,
-    placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
+    placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });
-  const [openTheme, setOpenTheme] = useState(false);
-  const [openAITheme, setOpenAITheme] = useState(false);
   useEffect(() => {
     setValue(draftToSlate({
       data: content
     }));
+    if (!ReactEditor.isFocused(editor)) {
+      ReactEditor.focus(editor);
+    }
   }, [id, content]);
   useEffect(() => {
     if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
@@ -184,6 +181,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
     return c;
   };
+
+  // Example of resetting or re-rendering all nodes
+  const reRenderAllNodes = () => {
+    const newNodes = JSON.parse(JSON.stringify(value));
+    setValue(newNodes); // This will re-render the whole document
+  };
+
+  const onSwitchBreakpoint = b => {
+    setBreakpoint(b);
+    reRenderAllNodes();
+  };
   useImperativeHandle(ref, () => ({
     async getThumbnail(needBackground = false, options = {}) {
       try {
@@ -203,7 +211,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     insertFragments(fragments, clearAll = false, rest = {}) {
       try {
         if (!clearAll) {
-          if (rest?.nextLine) {
+          if (isFreeGridFragment(fragments)) {
+            onInsertFragment({
+              editor,
+              slateNodes: fragments[0] || fragments
+            });
+          } else if (rest?.nextLine) {
             const {
               anchor
             } = editor?.selection || {};
@@ -245,18 +258,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         h
       });
     },
+    switchViewport(bp) {
+      console.log("switching breakpoint", bp);
+      onSwitchBreakpoint(bp);
+    },
     undo() {
       editor?.undo();
     },
     redo() {
       editor?.redo();
     },
-    toggleTheme() {
-      setOpenTheme(!openTheme);
-    },
-    toggleAITheme() {
-      setOpenAITheme(!openAITheme);
-    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
@@ -323,6 +334,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const onKeyDown = useCallback(event => {
     const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
     const isCtrlKey = event.ctrlKey || isMetaKey;
+    // for RnD item move front and back
+    const isUpandDown = event.metaKey && [38, 40].indexOf(event.keyCode) > -1;
     if (target && chars.length > 0 && !isCtrlKey) {
       mentionsEvent({
         event,
@@ -334,7 +347,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         type,
         mentionsRef
       });
-    } else if (isCtrlKey) {
+    } else if (isCtrlKey || isUpandDown) {
       commands({
         event,
         editor,
@@ -352,6 +365,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else if (event.key === "Enter") {
       enterEvent(event, editor, customProps?.isMobile);
+    } else if (event.key === 'Backspace') {
+      event.preventDefault();
+      editor.deleteBackward();
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -404,7 +420,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
-  const themeProps = getTheme(selectedTheme);
+  const handleContextMenu = e => {
+    if (!readOnly) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
   const handleCursorScroll = container => {
     try {
       const cursorPosition = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
@@ -419,155 +440,149 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       console.log(err);
     }
   };
-  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,
+  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: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
+        sx: classes.root,
+        style: {
+          ...dotBg
+        },
+        "data-breakpoint": breakpoint,
+        onContextMenu: handleContextMenu,
+        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,
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
-                      className: "max-content",
-                      sx: themeProps?.sxProps || {},
-                      "data-info": outsideEditorClickLabel,
-                      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,
-                            onSelect: () => handleCursorScroll(editorWrapper.current)
-                          }), !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, /*#__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"
+                      className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
+                      sx: {
+                        backgroundColor: "transparent",
+                        padding: {
+                          ...getTRBLBreakPoints(bannerSpacing)
                         },
-                        align: "center",
-                        "data-info": outsideEditorClickLabel,
-                        onClick: handleFooterClick,
-                        children: footer
-                      }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
-                        open: openTheme,
-                        setOpen: setOpenTheme,
+                        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,
+                        onSelect: () => handleCursorScroll(editorWrapper.current)
+                      }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
+                        ref: mentionsRef,
+                        mentions: mentions,
+                        setMentions: setMentions,
                         editor: editor,
-                        services: otherProps?.services
-                      }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
-                        openAITheme: openAITheme,
-                        setOpenAITheme: setOpenAITheme,
-                        onSaveTheme: otherProps?.onSaveTheme
+                        target: target,
+                        index: index,
+                        chars: chars,
+                        type: type,
+                        theme: theme
+                      }) : null, /*#__PURE__*/_jsx(RnDCopy, {
+                        readOnly: readOnly
                       })]
                     })
-                  }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
-                    onDrawerOpen: onDrawerOpen,
-                    theme: theme,
-                    setIsTextSelected: setIsTextSelected,
-                    customProps: customProps
-                  }) : null]
+                  }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
+                    customProps: customProps,
+                    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
+                  })]
                 })
-              }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
-                ...htmlAction,
-                handleCodeToText: handleCodeToText
-              })]
-            }, id)
-          })
-        })]
+              }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
+                onDrawerOpen: onDrawerOpen,
+                theme: theme,
+                setIsTextSelected: setIsTextSelected,
+                customProps: customProps
+              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+                breakpoint: breakpoint,
+                onChange: b => onSwitchBreakpoint(b)
+              }) : null]
+            })
+          }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
+            ...htmlAction,
+            handleCodeToText: handleCodeToText
+          })]
+        }, id)
       })
     })
   });
 });
 CommonEditor.displayName = "CommonEditor";
+CommonEditor.propTypes = {
+  /** Id of the content */
+  id: PropTypes.string,
+  /** Set to true for readonly mode */
+  readOnly: PropTypes.oneOf(["readonly", ""]),
+  /** It can be a draft js content or a slate js content  */
+  content: PropTypes.any,
+  /** User details */
+  user: PropTypes.object,
+  /** API URL base for pages api calls */
+  apiHOST: PropTypes.string,
+  /** A callback function with updated edited content,
+   * this method will get called whenever the content changes happen and wait idle for 500ms
+   * uses the debounce mechanism
+   */
+  onSave: PropTypes.func,
+  /**
+   * MUI theme object form parent application
+   */
+  theme: PropTypes.object,
+  /**
+   * Editor component based props can be passed here
+   * @property {bool} isSignerDetailsRequired - To make username and email required in Forms
+   */
+  otherProps: PropTypes.object
+};
 export default CommonEditor;

package/dist/Editor/DialogWrapper.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-// import styled from "@emotion/styled";
-// import commonStyle from "./commonStyle";
+import ViewportStimulator from "./common/RnD/Theme/ViewportStimulator";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -43,7 +42,9 @@ const DialogWrapper = props => {
     }), /*#__PURE__*/_jsx(DialogContent, {
       children: children
     })]
-  }) : children;
+  }) : /*#__PURE__*/_jsx(ViewportStimulator, {
+    children: children
+  });
 };
 DialogWrapper.defaultProps = {
   fullScreen: false,

package/dist/Editor/Editor.css

@@ -244,13 +244,6 @@ blockquote {
   width: 17px !important;
 }
 
-.react-datepicker__input-container input {
-    height: 40px !important;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    width: 100%;
-}
-
 .close-popupbtn {
   border-radius: 4px !important;
   width: 24px;
@@ -858,17 +851,6 @@ blockquote {
   text-align: center;
 }
 
-.removeScroll::-webkit-outer-spin-button,
-.removeScroll::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-/* For Firefox */
-.removeScroll {
-    -moz-appearance: textfield;
-}
-
 .borderInput:focus-visible {
   outline: none !important;
 }
@@ -918,7 +900,7 @@ blockquote {
 }
 
 .sliderInput {
-  width: 30px;
+  width: 66px;
   padding: 2px 10px;
   margin-left: 18px;
   box-shadow: 0px 4px 16px 0px #0000000d;
@@ -1166,4 +1148,8 @@ blockquote {
 
 .scrollSmooth {
   scroll-behavior: smooth;
+}
+
+.freegrid-section {
+  max-width: 100% !important;
 }