@flozy/editor 4.0.3 → 4.0.4

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 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, 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 +25,17 @@ 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 { handleInsertLastElement, isFreeGridFragment, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
+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";
 const Item = /*#__PURE__*/forwardRef(({
@@ -60,7 +64,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 +84,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     toolbarOptions,
     otherProps,
     isIframe,
-    theme
+    theme,
+    showViewport = false
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -99,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,
@@ -110,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(), {
@@ -144,6 +150,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 +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 {
@@ -191,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 || {};
@@ -233,6 +258,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         h
       });
     },
+    switchViewport(bp) {
+      console.log("switching breakpoint", bp);
+      onSwitchBreakpoint(bp);
+    },
     undo() {
       editor?.undo();
     },
@@ -305,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,
@@ -316,7 +347,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         type,
         mentionsRef
       });
-    } else if (isCtrlKey) {
+    } else if (isCtrlKey || isUpandDown) {
       commands({
         event,
         editor,
@@ -334,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;
@@ -386,6 +420,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
+  const handleContextMenu = e => {
+    if (!readOnly) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
   const handleCursorScroll = container => {
     try {
       const cursorPosition = window.getSelection()?.getRangeAt(0).getBoundingClientRect();
@@ -410,11 +450,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,
@@ -475,11 +517,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 || {}
@@ -501,6 +544,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 theme: theme,
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps
+              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+                breakpoint: breakpoint,
+                onChange: b => onSwitchBreakpoint(b)
               }) : null]
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
@@ -513,4 +559,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

@@ -267,7 +267,7 @@ blockquote {
   margin: 12px 0px;
   padding: 0px 5px;
   border: 0px solid #ccc;
-  min-height: 100px;
+  min-height: 211px;
 }
 
 .signature-signed-wrapper {
@@ -331,7 +331,7 @@ blockquote {
 .signature-canvas {
   height: 100%;
   width: 100%;
-  border: 1px solid #0052cc;
+  border: 1px solid #2563EB;
   border-radius: 12px;
 }
 
@@ -364,6 +364,7 @@ blockquote {
 
 .dialog-actions-si .MuiButtonBase-root {
   opacity: 1;
+  padding: 6px 5px 0px 3px !important
 }
 
 .signature-tab {
@@ -374,6 +375,19 @@ blockquote {
   width: 100%;
 }
 
+.signature-tab2 {
+  /* display: flex; */
+  align-items: center;
+  border-width: 0px, 0px, 0px, 0px;
+  border-style: solid;
+  border-color: #2563EB;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 7px;
+  padding: 10px;
+}
+
 .upload-sign-img-wrapper {
   text-align: center;
 }
@@ -439,6 +453,10 @@ blockquote {
   color: #ffffff !important;
   border: 1px solid #2563eb !important;
   width: auto !important;
+  padding: 2px 0px 0px 0px !important;
+  min-width: 89px !important;
+  font-family: Inter, sans-serif;
+  text-transform: none;
 }
 
 .MuiButton-root.primaryBtn.disabled,
@@ -459,6 +477,10 @@ blockquote {
   margin-right: 15px !important;
   color: #2563eb;
   width: auto !important;
+  padding: 2px 0px 0px 0px !important;
+  min-width: 89px !important;
+  font-family: Inter, sans-serif;
+  text-transform: none;
 }
 
 .deleteBtn {
@@ -1126,4 +1148,8 @@ blockquote {
 
 .scrollSmooth {
   scroll-behavior: smooth;
+}
+
+.freegrid-section {
+  max-width: 100% !important;
 }

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

@@ -4,13 +4,13 @@ import Icon from "../../common/Icon";
 // import { TbRotateClockwise } from "react-icons/tb";
 // import { FaRegCircleCheck } from "react-icons/fa6";
 import { IoSend } from "react-icons/io5";
-import React, { forwardRef, useEffect, useRef } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import WaveLoading from "../../common/WaveLoading";
-import useWindowResize from "../../hooks/useWindowResize";
 import CustomSelect from "./CustomSelect";
 import { editContentOptions, newContentOptions, generatedContentOptions } from "./helper";
 import useClickOutside from "../../hooks/useClickOutside";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import { ChatMicIcon } from "../../assets/svg/AIIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ function getProps(openAI, generatedText) {
   const dropDownProps = {
     fromElements: {
       options: newContentOptions,
-      show: window.getSelection().toString().length
+      show: generatedText?.length
     },
     fromToolBar: {
       options: editContentOptions,
@@ -36,20 +36,21 @@ function getProps(openAI, generatedText) {
 }
 function AIInput({
   onSend,
-  loading,
   generatedText,
   openAI,
   inputValue,
   onInputChange,
-  onClickOutside
+  onClickOutside,
+  startRecording,
+  loading
 }, ref) {
   const {
     theme
   } = useEditorContext();
   const classes = Styles(theme);
   const inputRef = useRef();
-  const [size] = useWindowResize();
   const inputWrapperRef = useRef();
+  const [contentHeight, setContentHeight] = useState("100px");
   const refs = useClickOutside({
     onClickOutside,
     omitIds: ["infinity-select-popover"],
@@ -74,35 +75,28 @@ function AIInput({
     if (isSendBtnDisabled) {
       return;
     }
-    onSend("", {
-      replace: true,
-      isSendBtn: true
-    });
+    onSend("", {});
   };
+  useEffect(() => {
+    const selectWrapper = refs?.length ? refs[1]?.current : null;
+    const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
+    if (selectWrapper && slateWrapper) {
+      const height = slateWrapper.offsetHeight - selectWrapper.offsetHeight - 80;
+      setContentHeight(height + "px");
+    }
+  }, [refs, generatedText]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [size.device === "xs" ? /*#__PURE__*/_jsx(Box, {
-      component: "div",
-      ref: refs[1],
-      sx: classes.customSelectWrapper,
-      children: /*#__PURE__*/_jsx(CustomSelect, {
-        ...props,
-        onSend: onSend,
-        classes: classes
-      })
-    }) : null, /*#__PURE__*/_jsxs(Box, {
+    children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
-        children: /*#__PURE__*/_jsx("pre", {
-          style: {
-            whiteSpace: "pre-wrap",
-            wordWrap: "break-word",
-            fontFamily: "inherit",
-            margin: 0
-          },
-          children: generatedText
-        })
+        style: {
+          maxHeight: contentHeight
+        },
+        dangerouslySetInnerHTML: {
+          __html: generatedText
+        }
       }) : null, /*#__PURE__*/_jsxs(Box, {
         component: "form",
         sx: classes.aiInputWrapper,
@@ -132,21 +126,25 @@ function AIInput({
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsx(Box, {
+        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            disabled: loading,
+            onClick: () => startRecording(),
+            children: /*#__PURE__*/_jsx(ChatMicIcon, {})
+          }), /*#__PURE__*/_jsx(IconButton, {
             sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
             onClick: () => handleSendBtnClick(),
             children: /*#__PURE__*/_jsx(IoSend, {
               color: "#fff",
               size: 14
             })
-          })
+          })]
         })]
       })]
-    }), size.device === "xs" ? null : /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/_jsx(Box, {
       component: "div",
       ref: refs[1],
       sx: classes.customSelectWrapper,

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

@@ -1,4 +1,4 @@
-import { Box, Button, IconButton, Popover, Typography } from "@mui/material";
+import { Box, Button, IconButton, Popper, Typography } from "@mui/material";
 import React, { useRef, useState } from "react";
 import { FaChevronRight } from "react-icons/fa";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,9 +49,17 @@ function DisplayOption({
   } = option;
   const [open, setOpen] = useState(false);
   const optionRef = useRef();
+  const openOptions = e => {
+    if (option.options?.length && !open) {
+      setOpen(e.currentTarget);
+      return;
+    }
+  };
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.optionWrapper,
     ref: optionRef,
+    onMouseEnter: openOptions,
+    onMouseLeave: () => setOpen(null),
     children: [/*#__PURE__*/_jsxs(Button, {
       sx: classes.optionBtn,
       onClick: e => {
@@ -59,7 +67,7 @@ function DisplayOption({
 
         // is having child options
         if (option.options?.length) {
-          setOpen(e.currentTarget);
+          openOptions(e);
           return;
         }
         setOpen(null);
@@ -77,25 +85,24 @@ function DisplayOption({
           size: 12
         })
       })]
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsx(Popper, {
       open: open && option.options,
       anchorEl: open,
       sx: {
         zIndex: 9001,
         background: "transparent"
       },
-      anchorOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
       onClose: () => {
         setOpen(null);
       },
-      children: /*#__PURE__*/_jsx(CustomSelect, {
-        options: option.options,
-        onSend: onSend,
-        classes: classes,
-        show: open
+      placement: "right-start",
+      children: /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(CustomSelect, {
+          options: option.options,
+          onSend: onSend,
+          classes: classes,
+          show: open
+        })
       })
     })]
   });