@flozy/editor 3.8.8 → 3.8.9

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
-import { createEditor, Transforms, Editor } from 'slate';
+import { createEditor, Transforms } from 'slate';
 import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
@@ -31,12 +31,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
-    data: content && content?.length > 0 ? content : [{
-      type: 'paragraph',
-      children: [{
-        text: ''
-      }]
-    }]
+    data: content
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
@@ -52,11 +47,10 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     emojiClick: emoji => {
       if (editor) {
-        ReactEditor.focus(editor);
         insertEmoji(editor, emoji?.native, editor.selection);
         if (editor.selection) {
-          // const path = editor.selection.anchor.path;
-          // const offset = editor.selection.anchor.offset + emoji?.native.length;
+          const path = editor.selection.anchor.path;
+          const offset = editor.selection.anchor.offset + emoji?.native.length;
           const position = {
             anchor: {
               path: [0],
@@ -73,57 +67,37 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         ReactEditor.focus(editor);
       }
     },
-    submitChat: () => {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(value);
-      onsubmit(false, {
-        strVal,
-        restVal
-      });
+    setContent: newContent => {
+      setIsExternalUpdate(true);
+      setValue(newContent);
+      ReactEditor.focus(editor);
     },
     // Focus enable
-    enableFocus: () => {
-      if (editor) {
-        const position = {
-          anchor: {
-            path: [0],
-            offset: 0
-          },
-          focus: {
-            path: [0],
-            offset: 0
-          }
-        };
-        Transforms.select(editor, position);
-        ReactEditor.focus(editor);
-      }
-    },
-    clearAll: (content = null, clear = true) => {
+    //     enableFocus: () => {
+    //     if (editor) {
+    //         const position = {
+    //             anchor: { path: [0], offset: 0 },
+    //             focus: { path: [0], offset: 0 },
+    //         };
+    //         Transforms.select(editor, position);
+    //         ReactEditor.focus(editor);
+    //     }
+    // },
+
+    clearAll: () => {
       if (!editor) return;
-      try {
-        if (clear) {
-          while (editor.children.length > 0) {
-            Transforms.removeNodes(editor, {
-              at: [0]
-            });
-          }
-        }
-        const newValue = draftToSlate({
-          data: content
+      while (editor.children.length > 0) {
+        Transforms.removeNodes(editor, {
+          at: [0]
         });
-        setValue(newValue);
-        setTimeout(() => {
-          if (editor.children.length === 0) {
-            Transforms.insertNodes(editor, newValue);
-          }
-          Transforms.select(editor, Editor.end(editor, []));
-          ReactEditor.focus(editor);
-        }, 300);
-      } catch {
-        console.log("error:");
       }
+      Transforms.insertNodes(editor, {
+        type: 'paragraph',
+        children: [{
+          text: ''
+        }]
+      });
+      ReactEditor.focus(editor);
     }
   }));
   useEffect(() => {
@@ -131,7 +105,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     setValue(draftToSlate({
       data: content
     }));
-  }, [content]);
+  }, [id, content]);
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {

package/dist/Editor/CommonEditor.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
+import PropTypes, { object } from "prop-types";
 import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
@@ -18,7 +19,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, Typography, useTheme } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -26,12 +27,14 @@ 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 } from "./helper/theme";
 import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
+import RnDCopy from "./common/RnD/RnDCopy";
+import "animate.css";
+import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Item = /*#__PURE__*/forwardRef(({
@@ -60,7 +63,8 @@ const Leaf = ({
   children,
   leaf
 }) => {
-  children = getMarked(leaf, children);
+  const theme = useTheme();
+  children = getMarked(leaf, children, theme);
   return /*#__PURE__*/_jsx("span", {
     ...attributes,
     children: children
@@ -99,6 +103,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,
@@ -110,7 +115,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(), {
@@ -144,6 +148,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     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) {
@@ -172,6 +179,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 {
@@ -233,6 +251,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         h
       });
     },
+    switchViewport(bp) {
+      setBreakpoint(bp);
+    },
     undo() {
       editor?.undo();
     },
@@ -305,6 +326,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,
@@ -316,7 +339,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         type,
         mentionsRef
       });
-    } else if (isCtrlKey) {
+    } else if (isCtrlKey || isUpandDown) {
       commands({
         event,
         editor,
@@ -386,6 +409,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
+  const handleContextMenu = e => {
+    if (!readOnly) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -396,11 +425,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       footer: footer || "",
       children: /*#__PURE__*/_jsx(Box, {
         component: "div",
-        className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
+        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,
@@ -460,11 +491,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         chars: chars,
                         type: type,
                         theme: theme
-                      }) : null]
+                      }) : null, /*#__PURE__*/_jsx(RnDCopy, {
+                        readOnly: readOnly
+                      })]
                     })
                   }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
-                    toolbarOptions: toolbarOptions,
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
                     otherProps: otherProps || {}
@@ -486,6 +518,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 theme: theme,
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
+                breakpoint: breakpoint,
+                onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
@@ -498,4 +533,30 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
 });
 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

@@ -830,17 +830,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;
 }
@@ -890,7 +879,7 @@ blockquote {
 }
 
 .sliderInput {
-  width: 30px;
+  width: 66px;
   padding: 2px 10px;
   margin-left: 18px;
   box-shadow: 0px 4px 16px 0px #0000000d;
@@ -1138,4 +1127,8 @@ blockquote {
 
 .scrollSmooth {
   scroll-behavior: smooth;
+}
+
+.freegrid-section {
+  max-width: 100% !important;
 }

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

@@ -51,43 +51,51 @@ const insertAtNextLine = (editor, text) => {
   });
 };
 const getNextLine = editor => {
-  const {
-    selection
-  } = editor;
-  const {
-    focus
-  } = selection;
-  const {
-    text = ""
-  } = Node.get(editor, focus.path);
-  let nextLineIndex = 0;
-  let indexOfNextLine = 0;
-  if (text?.length) {
-    // split the text based on caret position
-    const textBeforeCaret = text.substring(0, focus.offset);
-    const textAfterCaret = text.substring(focus.offset);
+  try {
+    const {
+      selection
+    } = editor;
+    const {
+      focus
+    } = selection;
+    if (focus?.path?.length > 0) {
+      const {
+        text = ""
+      } = Node.get(editor, focus.path);
+      let nextLineIndex = 0;
+      let indexOfNextLine = 0;
+      if (text?.length) {
+        // split the text based on caret position
+        const textBeforeCaret = text.substring(0, focus.offset);
+        const textAfterCaret = text.substring(focus.offset);
 
-    // getting the index of the next line after the caret position
-    indexOfNextLine = textAfterCaret?.indexOf("\n");
-    if (indexOfNextLine >= 0) {
-      // index of next line
-      nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
-    } else {
-      nextLineIndex = text?.length;
+        // getting the index of the next line after the caret position
+        indexOfNextLine = textAfterCaret?.indexOf("\n");
+        if (indexOfNextLine >= 0) {
+          // index of next line
+          nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
+        } else {
+          nextLineIndex = text?.length;
+        }
+      }
+      const data = {
+        ...focus,
+        offset: nextLineIndex
+      };
+      const at = {
+        anchor: data,
+        focus: data
+      };
+      return {
+        at,
+        indexOfNextLine
+      };
     }
+    return null;
+  } catch (err) {
+    console.log(err);
+    return null;
   }
-  const data = {
-    ...focus,
-    offset: nextLineIndex
-  };
-  const at = {
-    anchor: data,
-    focus: data
-  };
-  return {
-    at,
-    indexOfNextLine
-  };
 };
 const updateAnchorEl = (setAnchorEl, editor) => {
   try {
@@ -95,13 +103,16 @@ const updateAnchorEl = (setAnchorEl, editor) => {
       return;
     }
     const selection = window.getSelection();
-    if (selection.rangeCount) {
+    if (selection.rangeCount && selection.anchorOffset !== selection.focusOffset) {
       let caret;
       if (getSelectedText(editor)) {
         // selected text as caret
         caret = selection.getRangeAt(0);
       } else {
-        caret = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
+        const sel = getNextLine(editor);
+        if (sel) {
+          caret = ReactEditor.toDOMRange(editor, sel.at);
+        }
       }
       const getBoundingClientRect = () => {
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();

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

@@ -160,7 +160,7 @@ const Accordion = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "accordion-title",
       style: {
-        background: bgColor
+        backgroundColor: bgColor
       },
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {

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

@@ -1,7 +1,4 @@
 import React from "react";
-import { getBorderColor, getTextColor } from "../../helper";
-import { Box } from "@mui/material";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
@@ -12,29 +9,18 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor,
-    borderRadius,
-    bannerSpacing
+    borderColor
   } = element;
-  const textStyles = getTextColor(textColor);
-  const borderStyle = getBorderColor(borderColor);
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/_jsx("div", {
     className: `accordion-summary-container`,
     ...attributes,
-    sx: {
+    style: {
       width: "100%",
       position: "relative",
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
-      padding: {
-        ...getTRBLBreakPoints(bannerSpacing)
-      },
-      background: bgColor,
-      ...borderStyle,
-      '& span[data-slate-string="true"]': textStyles
+      backgroundColor: bgColor,
+      border: `1px solid ${borderColor}`,
+      color: textColor
     },
-    component: "div",
     children: children
   });
 };

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Transforms, Editor, Element } from "slate";
+import { useTheme } from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
@@ -16,7 +17,7 @@ import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import AppHeaderPopup from "./AppHeaderPopup";
-import { getTRBLBreakPoints } from "../../helper/theme";
+import { getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import { handleLinkType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,6 +25,7 @@ import { createElement as _createElement } from "react";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const drawerWidth = 240;
 function AppHeader(props) {
+  const theme = useTheme();
   const navWrprRef = useRef(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const {
@@ -121,11 +123,6 @@ function AppHeader(props) {
       }
     }
   };
-
-  // const onMenuSettings = (menuItem, i) => (event) => {
-  //   event.preventDefault();
-  // };
-
   const drawer = /*#__PURE__*/_jsxs(Box, {
     onClick: handleDrawerToggle,
     sx: {
@@ -164,15 +161,20 @@ function AppHeader(props) {
     })]
   });
   const container = window !== undefined ? () => window().document.body : undefined;
-  // const elevateStyle = useEleveateScroll({
-  //   ...props,
-  //   parentRef: navWrprRef,
-  //   needElevation: readOnly,
-  // });
-
   const elevateStyle = {
     position: "relative"
   };
+  const appbarSp = groupByBreakpoint({
+    padding: {
+      ...getTRBLBreakPoints(bannerSpacing)
+    }
+  }, theme);
+  const toolbarSp = groupByBreakpoint({
+    flexDirection: {
+      xs: "row-reverse !important",
+      lg: "unset"
+    }
+  }, theme);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Box, {
       sx: {
@@ -194,13 +196,14 @@ function AppHeader(props) {
             ...elevateStyle,
             background: bgColor,
             boxShadow: "none",
-            padding: {
-              ...getTRBLBreakPoints(bannerSpacing)
-            },
+            ...appbarSp,
             zIndex: 999
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsxs(Toolbar, {
+            sx: {
+              ...toolbarSp
+            },
             style: {
               flexDirection: isLogoRight ? "row-reverse" : "row",
               paddingLeft: "0px",
@@ -217,8 +220,11 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                display: {
-                  sm: "none"
+                [theme.breakpoints.up("sm")]: {
+                  display: "none"
+                },
+                [theme.breakpoints.between("xs", "md")]: {
+                  display: "block"
                 }
               },
               children: /*#__PURE__*/_jsx(MenuIcon, {})
@@ -236,9 +242,14 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                display: {
-                  xs: "none",
-                  sm: "block"
+                [theme.breakpoints.up("sm")]: {
+                  display: "block"
+                },
+                [theme.breakpoints.between("xs", "md")]: {
+                  display: "none"
+                },
+                "& img": {
+                  marginRight: "7px"
                 }
               },
               className: "app-logo",
@@ -252,9 +263,11 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                display: {
-                  xs: "none",
-                  sm: "block"
+                [theme.breakpoints.up("sm")]: {
+                  display: "block"
+                },
+                [theme.breakpoints.between("xs", "md")]: {
+                  display: "none"
                 }
               },
               children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {