@flozy/editor 4.5.6 → 4.5.8

package/dist/Editor/ChatEditor.js

@@ -46,7 +46,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [deboundedValue] = useDebounce(value, 500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
-      needLayout
+      needLayout,
+      isChatEditor: true
     });
   }, []);
   const isReadOnly = readOnly === "readonly";
@@ -248,6 +249,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       restVal
     });
   };
+  const handlePaste = event => {
+    const items = event.clipboardData.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith("image/")) {
+        event.preventDefault(); // Prevent the default paste behavior
+        return; // Exit early to keep the editor empty
+      }
+    }
+  };
+
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
@@ -267,7 +278,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         placeholder: "Start typing ...",
         spellCheck: true,
         onBlur: handleBlur,
-        onKeyDown: onKeyDown
+        onKeyDown: onKeyDown,
+        onPaste: handlePaste
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,

package/dist/Editor/CommonEditor.js

@@ -1,7 +1,7 @@
 /* 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 { createEditor, Transforms, Range } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -10,7 +10,7 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
@@ -27,16 +27,16 @@ import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
-import { handleInsertLastElement, isFreeGrid, isFreeGridFragment, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, isFreeGridFragment, isPageSettings, 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 FontLoader from "./common/FontLoader/FontLoader";
 import "./font.css";
 import "./Editor.css";
 import "animate.css";
-import FontLoader from "./common/FontLoader/FontLoader";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Item = /*#__PURE__*/forwardRef(({
@@ -82,6 +82,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
+    toolbarOptions,
     otherProps,
     isIframe,
     theme,
@@ -114,7 +115,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorClass,
     fixedWidth = "60%",
     fullWidth = "80%",
-    hideTools = []
+    hideTools
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
@@ -287,11 +288,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     index,
     type
   } = mentions;
-  const updatedHideTools = !isFreeGrid(content) ? [...hideTools, "freegrid"] : hideTools;
-  const chars = type && !isFreeGrid(content) ? Shorthands[type]({
+  const chars = type ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: updatedHideTools || []
+    hideTools: hideTools || []
   }) : [];
   const handleEditorChange = newValue => {
     setValue(newValue);
@@ -365,11 +365,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     } else if (event.key === "Enter") {
       enterEvent(event, editor, customProps?.isMobile);
-    } else if (event.key === "ArrowUp" && otherProps?.tagName !== "Pages") {
-      upDownArrowKeyEvents(event, editor);
-    } else if (event.key === "ArrowDown" && otherProps?.tagName !== "Pages") {
-      upDownArrowKeyEvents(event, editor);
     } else if (event.key === "Backspace") {
+      const isPageSettingsNode = isPageSettings(event, editor);
+      if (isPageSettingsNode) {
+        return;
+      }
       const {
         selection
       } = editor;
@@ -384,7 +384,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         }
       }
     }
-  }, [chars, target, mentions, setMentions, search, type, mentionsRef]);
+  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   const dotBg = needDotsBG ? {
     background: "white",
@@ -447,10 +447,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const selection = window?.getSelection();
         if (selection && selection.rangeCount > 0) {
           const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
-          const containerBottom = container?.getBoundingClientRect()?.bottom;
+          const containerRect = container?.getBoundingClientRect();
+          const containerBottom = containerRect?.bottom;
           if (cursorPosition && cursorPosition.bottom > containerBottom - 250) {
+            // Calculate dynamic scroll based on remaining space
+            const scrollAmount = Math.min(200, cursorPosition.bottom - containerBottom + 250);
             container?.scrollBy({
-              top: 200,
+              top: scrollAmount,
               behavior: "smooth"
             });
           }
@@ -524,7 +527,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
-                        decorate: d => decorators(d, editor),
+                        decorate: decorators,
                         onKeyDown: onKeyDown,
                         onSelect: () => handleCursorScroll(editorWrapper.current)
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {

package/dist/Editor/Editor.css

@@ -234,18 +234,6 @@ blockquote {
   background-color: #0052cc;
 }
 
-.signature-btn-container .sign-placeholder {
-  display: none; /* will changed to flex on DnD */
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #E4E6E9;
-  border-radius: 10px;
-  background: white;
-  box-shadow: 0px 4px 16px 0px #0000000D;
-  gap: 10px;
-}
-
 .signature-btn-grps {
   display: flex;
   justify-content: space-around;
@@ -256,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;
@@ -903,6 +884,7 @@ blockquote {
 /* For Firefox */
 .removeScroll {
     -moz-appearance: textfield;
+    appearance: none;
 }
 
 .borderInput:focus-visible {

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

@@ -90,7 +90,6 @@ function AIInput({
     children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
-      ref: refs[0],
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
         style: {
@@ -105,6 +104,7 @@ function AIInput({
         onSubmit: e => {
           e.preventDefault();
         },
+        ref: refs[0],
         children: [/*#__PURE__*/_jsx("div", {
           className: "icon-container icons-elements",
           ref: inputWrapperRef,
@@ -116,21 +116,22 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: "Ask AI to write anything...",
+          placeholder: fromToolBar ? "" : "Ask AI to write anything...",
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
+          disabled: fromToolBar,
           onKeyDown: event => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
               handleSendBtnClick();
             }
           }
-        }), /*#__PURE__*/_jsxs(Box, {
+        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [/*#__PURE__*/_jsx(IconButton, {
+          children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
             disabled: loading,
             onClick: () => startRecording(),
             children: /*#__PURE__*/_jsx(ChatMicIcon, {})

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

@@ -201,29 +201,6 @@ function PopoverAIInput({
   useEffect(() => {
     selectedEleRef.current = selectedElement;
   }, [selectedElement]);
-  const framePayload = (type, option) => {
-    let payload = {
-      mode: option.mode || 0,
-      query: option?.inputValue || inputValue
-    };
-    if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
-      payload.textOptionInput = type;
-    }
-    const selectedText = getSelectedText(editor);
-    const textData = generatedText || selectedText;
-    if (option.mode) {
-      payload.textData = textData;
-    } else if (selectedText && Number(payload.mode) === 0) {
-      payload.query = `${selectedText} \n ${payload.query}`;
-    }
-    const tryAgain = type === "try_again";
-    if (tryAgain) {
-      // resetting previous payload
-      const prevPayload = selectedOption?.payload || {};
-      payload = prevPayload;
-    }
-    return payload;
-  };
   const onSend = async (type, option) => {
     try {
       if (type === "close") {
@@ -255,12 +232,28 @@ function PopoverAIInput({
         onClickOutside();
         return;
       }
+      if (type === "speech_to_text") {
+        setGeneratedText(option.text);
+        return;
+      }
+      if (type === "try_again") {
+        // resetting the previous option and try again
+        option = selectedOption;
+        type = selectedOption.value;
+      } else {
+        setSelectedOption(option);
+      }
       setLoading(true);
-      const payload = framePayload(type, option);
-      setSelectedOption({
-        ...option,
-        payload
-      });
+      const payload = {
+        mode: option.mode || 0,
+        query: option?.inputValue || inputValue
+      };
+      if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
+        payload.textOptionInput = type;
+      }
+      if (option.mode) {
+        payload.textData = generatedText || window.getSelection().toString();
+      }
       const result = await services("infinityAI", payload);
       setLoading(false);
       setInputValue("");
@@ -271,19 +264,15 @@ function PopoverAIInput({
         onClickOutside();
         return;
       }
-
-      // if (!option.replace) {
-      if (type === "continue_writing") {
-        setGeneratedText(generatedText + text);
-      } else {
-        setGeneratedText(text);
+      if (!option.replace) {
+        if (type === "continue_writing") {
+          setGeneratedText(generatedText + text);
+        } else {
+          setGeneratedText(text);
+        }
+        return;
       }
-
-      //   return;
-      // }
-
-      // ** we are not using this insertText right now, AI returned response will not insert into the editor immediately, so option.replace will be false always
-      // insertText(editor, text);
+      insertText(editor, text);
 
       // scrollToAIInput();
     } catch (err) {

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

@@ -1,5 +1,6 @@
 const Styles = theme => ({
   aiContainer: {
+    background: "#FCFAFF",
     background: theme?.palette?.editor?.aiInputBackground,
     border: "1px solid #8360FD",
     borderRadius: "6px",
@@ -102,7 +103,6 @@ const Styles = theme => ({
   customSelectWrapper: {
     width: "fit-content",
     marginTop: "4px",
-    position: "absolute",
     "@media only screen and (max-width: 600px)": {
       marginBottom: "4px"
     }

package/dist/Editor/Elements/Button/EditorButton.js

@@ -10,14 +10,10 @@ import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../.
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
-import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
   const theme = useTheme();
-  const {
-    theme: appTheme
-  } = useEditorContext();
   const {
     attributes,
     element,
@@ -144,8 +140,8 @@ const EditorButton = props => {
           sx: {
             display: "inline-flex",
             color: "rgba(0, 0, 0, 0.54)",
-            borderRadius: "50% !important",
-            border: "none !important"
+            borderRadius: '50% !important',
+            border: 'none !important'
           },
           ...btnProps,
           children: /*#__PURE__*/_jsx(Icon, {
@@ -216,7 +212,7 @@ const EditorButton = props => {
           },
           "& svg": {
             "& path": {
-              stroke: appTheme?.palette?.text?.primary
+              stroke: theme.palette.text.primary
             }
           },
           "& button": {
@@ -281,7 +277,7 @@ const EditorButton = props => {
             right: "-42px",
             stroke: "#fff",
             "& path": {
-              fill: openMoreOptions ? appTheme.palette.text.blueText : ""
+              fill: openMoreOptions ? theme.palette.text.blueText : ""
             }
           },
           onClick: handleMoreBtn,

package/dist/Editor/Elements/Embed/Embed.css

@@ -1,5 +1,5 @@
 .embed {
-  width: fit-content;
+  /* width: fit-content; */
   position: relative;
   margin: 0px;
 }

package/dist/Editor/Elements/Embed/Image.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, memo } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
@@ -94,8 +94,7 @@ const ImageContent = props => {
     onTouchEnd: onTouchEnd // for mobile
     ,
     "data-path": path.join(","),
-    draggable: false,
-    contentEditable: false
+    draggable: false
   });
 };
 const Image = props => {
@@ -223,7 +222,7 @@ const Image = props => {
   const getWidth = () => {
     if (resizing) {
       return {
-        width: `${size.width}px`,
+        width: `${size.widthInPercent}%`,
         height: objectFit ? `${size.height}px` : "auto"
       };
     } else {

package/dist/Editor/Elements/Embed/Video.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -53,7 +53,8 @@ const VideoContent = props => {
       ...videoSX
     },
     src: embedURL,
-    title: alt
+    title: alt,
+    allowFullScreen: true
   });
 };
 const VideoPlaceholder = props => {
@@ -179,7 +180,7 @@ const Video = ({
   const getWidth = () => {
     if (resizing) {
       return {
-        width: size.width ? `${size.width}px` : "100%",
+        width: size.widthInPercent ? `${size.widthInPercent}%` : "100%",
         height: url ? `${size.height || 370}px` : "auto"
       };
     } else {
@@ -220,7 +221,6 @@ const Video = ({
       alignContent: vertical
     },
     ...element.attr,
-    contentEditable: false,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,

package/dist/Editor/Elements/Form/Form.js

@@ -401,6 +401,7 @@ const Form = props => {
               component: "button",
               onClick: onSubmitClick,
               disabled: loading,
+              contentEditable: false,
               sx: {
                 background: buttonProps?.bgColor || "rgb(30, 75, 122)",
                 borderWidth: "1px",

package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js

@@ -71,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsx(RadioGroup, {
+          children: /*#__PURE__*/_jsxs(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: /*#__PURE__*/_jsx(FormControlLabel, {
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,7 +84,16 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            })
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "after",
+              label: "After",
+              onChange: () => {
+                setSchedule("after");
+              },
+              control: /*#__PURE__*/_jsx(Radio, {
+                size: "small"
+              })
+            })]
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -206,33 +206,6 @@ const FreeGrid = props => {
           at: [...insertAt]
         });
         break;
-      case "addSignature":
-        Transforms.insertNodes(editor, [{
-          type: "freegridItem",
-          childType: "signature",
-          children: [{
-            type: "signature",
-            children: [{
-              text: ""
-            }],
-            data: {
-              name: "",
-              email: "",
-              date: ""
-            }
-          }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 217,
-          height: 173,
-          width_xs: 217,
-          height_xs: 173
-        }], {
-          at: [...insertAt]
-        });
-        break;
       case "addImage":
         Transforms.insertNodes(editor, [{
           type: "freegridItem",
@@ -384,7 +357,6 @@ const FreeGrid = props => {
       Transforms.removeNodes(editor, {
         at: Path.parent(path)
       });
-      setSelectedElement({});
     } catch (err) {
       console.log(err);
     }
@@ -502,8 +474,6 @@ const FreeGrid = props => {
         backgroundSize: "cover"
       },
       "data-path": path.join("|"),
-      "data-dragOverId": path.join("|"),
-      "data-dragOverType": "parent",
       style: {
         "--cols": `100%`,
         "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -190,8 +190,6 @@ const FreeGridBox = props => {
       ...attributes,
       className: "fgi_type_box freegrid-container-parent",
       "data-path": path.join("|"),
-      "data-dragOverId": path.join("|"),
-      "data-dragOverType": "parent",
       style: {
         "--height": `${height}px`,
         "--cols": `100%`,

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -220,10 +220,8 @@ const FreeGridItem = props => {
     settingsProps: {
       settings: "freegridItem",
       onChange: onChangeSettings,
-      customProps,
-      onlyPopup: true // for signature popup in DnD
+      customProps
     },
-
     style: {
       "--left": `${left || 0}px`,
       "--marginTop": `${marginTop || 0}px`,

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -39,10 +39,6 @@ const FREE_GRID_ELEMENTS = [{
   actionType: "addAppHeader",
   label: "App Header",
   icon: "appHeader"
-}, {
-  actionType: "addSignature",
-  label: "Signature",
-  icon: "signature"
 }];
 const AddElement = props => {
   const {

package/dist/Editor/Elements/FreeGrid/Options/sectionItemOptions.js

@@ -9,8 +9,6 @@ const tableOptions = ["drag", "edit", "settings", "saveAsTemplate", "close"];
 const embedScriptOptions = ["embedScript", "saveAsTemplate", "close"];
 const sectionOptions = ["addElement", "settings", "moveUp", "moveDown", "saveAsTemplate", "more"];
 const formOptions = ["drag", "edit", "settings", "addFormField", "workFlow", "saveAsTemplate", "close"];
-const signatureOptions = ["signatureSettings", "saveAsTemplate", "close"];
-const signOptions = ["removeSign", "saveAsTemplate", "close"];
 const itemOptions = {
   default: commonOptions,
   text: textOptions,
@@ -22,8 +20,6 @@ const itemOptions = {
   section: sectionOptions,
   table: tableOptions,
   embedScript: embedScriptOptions,
-  video: videoOptions,
-  signature: signatureOptions,
-  sign: signOptions
+  video: videoOptions
 };
 export default itemOptions;