@flozy/editor 3.8.9 → 3.9.0

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 } from 'slate';
+import { createEditor, Transforms, Editor } from 'slate';
 import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
@@ -31,7 +31,12 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
-    data: content
+    data: content && content?.length > 0 ? content : [{
+      type: 'paragraph',
+      children: [{
+        text: ''
+      }]
+    }]
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
@@ -47,57 +52,62 @@ 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 position = {
-            anchor: {
-              path: [0],
-              offset: 0
-            },
-            focus: {
-              path: [0],
-              offset: 0
-            }
-          };
-          // Create a new selection
-          Transforms.select(editor, position);
-        }
         ReactEditor.focus(editor);
       }
     },
-    setContent: newContent => {
-      setIsExternalUpdate(true);
-      setValue(newContent);
-      ReactEditor.focus(editor);
+    submitChat: () => {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(value);
+      onsubmit(false, {
+        strVal,
+        restVal
+      });
     },
     // 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: () => {
+    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) => {
       if (!editor) return;
-      while (editor.children.length > 0) {
-        Transforms.removeNodes(editor, {
-          at: [0]
+      try {
+        if (clear) {
+          while (editor.children.length > 0) {
+            Transforms.removeNodes(editor, {
+              at: [0]
+            });
+          }
+        }
+        const newValue = draftToSlate({
+          data: content
         });
+        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(() => {
@@ -105,7 +115,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     setValue(draftToSlate({
       data: content
     }));
-  }, [id, content]);
+  }, [content]);
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {

package/dist/Editor/CommonEditor.js

@@ -1,6 +1,5 @@
 /* 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";
@@ -19,7 +18,7 @@ import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -27,14 +26,12 @@ 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(({
@@ -63,8 +60,7 @@ const Leaf = ({
   children,
   leaf
 }) => {
-  const theme = useTheme();
-  children = getMarked(leaf, children, theme);
+  children = getMarked(leaf, children);
   return /*#__PURE__*/_jsx("span", {
     ...attributes,
     children: children
@@ -103,7 +99,6 @@ 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,
@@ -115,6 +110,7 @@ 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(), {
@@ -148,9 +144,6 @@ 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) {
@@ -179,17 +172,6 @@ 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 {
@@ -251,9 +233,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         h
       });
     },
-    switchViewport(bp) {
-      setBreakpoint(bp);
-    },
     undo() {
       editor?.undo();
     },
@@ -326,8 +305,6 @@ 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,
@@ -339,7 +316,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         type,
         mentionsRef
       });
-    } else if (isCtrlKey || isUpandDown) {
+    } else if (isCtrlKey) {
       commands({
         event,
         editor,
@@ -409,12 +386,6 @@ 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,
@@ -425,13 +396,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       footer: footer || "",
       children: /*#__PURE__*/_jsx(Box, {
         component: "div",
-        className: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
+        className: `${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
         sx: classes.root,
         style: {
           ...dotBg
         },
-        "data-breakpoint": breakpoint,
-        onContextMenu: handleContextMenu,
         children: /*#__PURE__*/_jsxs(Slate, {
           editor: editor,
           initialValue: value,
@@ -491,12 +460,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         chars: chars,
                         type: type,
                         theme: theme
-                      }) : null, /*#__PURE__*/_jsx(RnDCopy, {
-                        readOnly: readOnly
-                      })]
+                      }) : null]
                     })
                   }), !hideMiniToolBar ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
+                    toolbarOptions: toolbarOptions,
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
                     otherProps: otherProps || {}
@@ -518,9 +486,6 @@ 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, {
@@ -533,30 +498,4 @@ 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,7 +1,8 @@
 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 styled from "@emotion/styled";
+// import commonStyle from "./commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -42,9 +43,7 @@ const DialogWrapper = props => {
     }), /*#__PURE__*/_jsx(DialogContent, {
       children: children
     })]
-  }) : /*#__PURE__*/_jsx(ViewportStimulator, {
-    children: children
-  });
+  }) : children;
 };
 DialogWrapper.defaultProps = {
   fullScreen: false,

package/dist/Editor/Editor.css

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

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

@@ -51,51 +51,43 @@ const insertAtNextLine = (editor, text) => {
   });
 };
 const getNextLine = editor => {
-  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);
+  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);
 
-        // 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
-      };
+    // 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;
     }
-    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 {
@@ -103,16 +95,13 @@ const updateAnchorEl = (setAnchorEl, editor) => {
       return;
     }
     const selection = window.getSelection();
-    if (selection.rangeCount && selection.anchorOffset !== selection.focusOffset) {
+    if (selection.rangeCount) {
       let caret;
       if (getSelectedText(editor)) {
         // selected text as caret
         caret = selection.getRangeAt(0);
       } else {
-        const sel = getNextLine(editor);
-        if (sel) {
-          caret = ReactEditor.toDOMRange(editor, sel.at);
-        }
+        caret = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
       }
       const getBoundingClientRect = () => {
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();

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

@@ -1,4 +1,6 @@
 import React from "react";
+import { Box } from "@mui/material";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
@@ -9,18 +11,27 @@ const AccordionSummary = props => {
   const {
     textColor,
     bgColor,
-    borderColor
+    borderColor,
+    borderRadius,
+    bannerSpacing
   } = element;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Box, {
     className: `accordion-summary-container`,
     ...attributes,
-    style: {
+    sx: {
       width: "100%",
       position: "relative",
       backgroundColor: bgColor,
       border: `1px solid ${borderColor}`,
-      color: textColor
+      color: textColor,
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
+      padding: {
+        ...getTRBLBreakPoints(bannerSpacing)
+      }
     },
+    component: "div",
     children: children
   });
 };

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

@@ -1,7 +1,6 @@
 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";
@@ -17,7 +16,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, groupByBreakpoint } from "../../helper/theme";
+import { getTRBLBreakPoints } from "../../helper/theme";
 import { handleLinkType } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,7 +24,6 @@ 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 {
@@ -123,6 +121,11 @@ function AppHeader(props) {
       }
     }
   };
+
+  // const onMenuSettings = (menuItem, i) => (event) => {
+  //   event.preventDefault();
+  // };
+
   const drawer = /*#__PURE__*/_jsxs(Box, {
     onClick: handleDrawerToggle,
     sx: {
@@ -161,20 +164,15 @@ 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: {
@@ -196,14 +194,13 @@ function AppHeader(props) {
             ...elevateStyle,
             background: bgColor,
             boxShadow: "none",
-            ...appbarSp,
+            padding: {
+              ...getTRBLBreakPoints(bannerSpacing)
+            },
             zIndex: 999
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsxs(Toolbar, {
-            sx: {
-              ...toolbarSp
-            },
             style: {
               flexDirection: isLogoRight ? "row-reverse" : "row",
               paddingLeft: "0px",
@@ -220,11 +217,8 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                [theme.breakpoints.up("sm")]: {
-                  display: "none"
-                },
-                [theme.breakpoints.between("xs", "md")]: {
-                  display: "block"
+                display: {
+                  sm: "none"
                 }
               },
               children: /*#__PURE__*/_jsx(MenuIcon, {})
@@ -242,14 +236,9 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                [theme.breakpoints.up("sm")]: {
-                  display: "block"
-                },
-                [theme.breakpoints.between("xs", "md")]: {
-                  display: "none"
-                },
-                "& img": {
-                  marginRight: "7px"
+                display: {
+                  xs: "none",
+                  sm: "block"
                 }
               },
               className: "app-logo",
@@ -263,11 +252,9 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                [theme.breakpoints.up("sm")]: {
-                  display: "block"
-                },
-                [theme.breakpoints.between("xs", "md")]: {
-                  display: "none"
+                display: {
+                  xs: "none",
+                  sm: "block"
                 }
               },
               children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {