@flozy/editor 4.5.8 → 4.6.0

package/dist/Editor/ChatEditor.js

@@ -180,6 +180,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
+    const value_txt = serializeToText(value);
+    if (!value_txt) {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(newValue);
+      onSave(strVal, restVal);
+    }
     setValue(newValue);
     if (!isInteracted) {
       setIsInteracted(true);

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, Range } from "slate";
+import { createEditor, Range, Transforms } 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 } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent, upDownArrowKeyEvents } 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, isFreeGridFragment, isPageSettings, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, isFreeGrid, 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,7 +82,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onSave,
     editor: collaborativeEditor,
     readOnly,
-    toolbarOptions,
     otherProps,
     isIframe,
     theme,
@@ -115,7 +114,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorClass,
     fixedWidth = "60%",
     fullWidth = "80%",
-    hideTools
+    hideTools = []
   } = otherProps || {};
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
@@ -288,10 +287,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     index,
     type
   } = mentions;
-  const chars = type ? Shorthands[type]({
+  const updatedHideTools = !isFreeGrid(content) ? [...hideTools, "freegrid"] : hideTools;
+  const chars = type && !isFreeGrid(content) ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: hideTools || []
+    hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
     setValue(newValue);
@@ -365,6 +365,10 @@ 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) {
@@ -384,7 +388,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         }
       }
     }
-  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
+  }, [chars, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   const dotBg = needDotsBG ? {
     background: "white",
@@ -447,13 +451,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         const selection = window?.getSelection();
         if (selection && selection.rangeCount > 0) {
           const cursorPosition = selection.getRangeAt(0)?.getBoundingClientRect();
-          const containerRect = container?.getBoundingClientRect();
-          const containerBottom = containerRect?.bottom;
+          const containerBottom = container?.getBoundingClientRect()?.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: scrollAmount,
+              top: 200,
               behavior: "smooth"
             });
           }
@@ -527,7 +528,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
-                        decorate: decorators,
+                        decorate: d => decorators(d, editor),
                         onKeyDown: onKeyDown,
                         onSelect: () => handleCursorScroll(editorWrapper.current)
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {

package/dist/Editor/Editor.css

@@ -234,6 +234,18 @@ 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;
@@ -244,6 +256,13 @@ 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;
@@ -884,7 +903,6 @@ blockquote {
 /* For Firefox */
 .removeScroll {
     -moz-appearance: textfield;
-    appearance: none;
 }
 
 .borderInput:focus-visible {

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

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

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

@@ -201,6 +201,29 @@ 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") {
@@ -232,28 +255,12 @@ 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 = {
-        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 payload = framePayload(type, option);
+      setSelectedOption({
+        ...option,
+        payload
+      });
       const result = await services("infinityAI", payload);
       setLoading(false);
       setInputValue("");
@@ -264,15 +271,19 @@ function PopoverAIInput({
         onClickOutside();
         return;
       }
-      if (!option.replace) {
-        if (type === "continue_writing") {
-          setGeneratedText(generatedText + text);
-        } else {
-          setGeneratedText(text);
-        }
-        return;
+
+      // if (!option.replace) {
+      if (type === "continue_writing") {
+        setGeneratedText(generatedText + text);
+      } else {
+        setGeneratedText(text);
       }
-      insertText(editor, text);
+
+      //   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);
 
       // scrollToAIInput();
     } catch (err) {

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

@@ -1,6 +1,5 @@
 const Styles = theme => ({
   aiContainer: {
-    background: "#FCFAFF",
     background: theme?.palette?.editor?.aiInputBackground,
     border: "1px solid #8360FD",
     borderRadius: "6px",
@@ -103,6 +102,7 @@ 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,10 +10,14 @@ 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,
@@ -140,8 +144,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, {
@@ -212,7 +216,7 @@ const EditorButton = props => {
           },
           "& svg": {
             "& path": {
-              stroke: theme.palette.text.primary
+              stroke: appTheme?.palette?.text?.primary
             }
           },
           "& button": {
@@ -277,7 +281,7 @@ const EditorButton = props => {
             right: "-42px",
             stroke: "#fff",
             "& path": {
-              fill: openMoreOptions ? theme.palette.text.blueText : ""
+              fill: openMoreOptions ? appTheme.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, memo } from "react";
+import React, { useEffect, useState } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
@@ -94,7 +94,8 @@ const ImageContent = props => {
     onTouchEnd: onTouchEnd // for mobile
     ,
     "data-path": path.join(","),
-    draggable: false
+    draggable: false,
+    contentEditable: false
   });
 };
 const Image = props => {
@@ -222,7 +223,7 @@ const Image = props => {
   const getWidth = () => {
     if (resizing) {
       return {
-        width: `${size.widthInPercent}%`,
+        width: `${size.width}px`,
         height: objectFit ? `${size.height}px` : "auto"
       };
     } else {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -53,8 +53,7 @@ const VideoContent = props => {
       ...videoSX
     },
     src: embedURL,
-    title: alt,
-    allowFullScreen: true
+    title: alt
   });
 };
 const VideoPlaceholder = props => {
@@ -87,7 +86,8 @@ const Video = ({
     url,
     xsHidden,
     width: oldWidth,
-    bannerSpacing
+    bannerSpacing,
+    aspectRatio
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -180,7 +180,7 @@ const Video = ({
   const getWidth = () => {
     if (resizing) {
       return {
-        width: size.widthInPercent ? `${size.widthInPercent}%` : "100%",
+        width: size.width ? `${size.width}px` : "100%",
         height: url ? `${size.height || 370}px` : "auto"
       };
     } else {
@@ -189,9 +189,10 @@ const Video = ({
           width: {
             ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
           },
-          height: url ? {
+          height: url && !aspectRatio ? {
             ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
-          } : "auto"
+          } : "auto",
+          aspectRatio: aspectRatio ? aspectRatio : "auto"
         }, theme)
       };
     }
@@ -221,6 +222,7 @@ 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,7 +401,6 @@ 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__*/_jsxs(RadioGroup, {
+          children: /*#__PURE__*/_jsx(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -84,16 +84,7 @@ 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,6 +206,33 @@ 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",
@@ -357,6 +384,7 @@ const FreeGrid = props => {
       Transforms.removeNodes(editor, {
         at: Path.parent(path)
       });
+      setSelectedElement({});
     } catch (err) {
       console.log(err);
     }
@@ -474,6 +502,8 @@ 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,6 +190,8 @@ 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,8 +220,10 @@ const FreeGridItem = props => {
     settingsProps: {
       settings: "freegridItem",
       onChange: onChangeSettings,
-      customProps
+      customProps,
+      onlyPopup: true // for signature popup in DnD
     },
+
     style: {
       "--left": `${left || 0}px`,
       "--marginTop": `${marginTop || 0}px`,

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

@@ -39,6 +39,10 @@ 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,6 +9,8 @@ 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,
@@ -20,6 +22,8 @@ const itemOptions = {
   section: sectionOptions,
   table: tableOptions,
   embedScript: embedScriptOptions,
-  video: videoOptions
+  video: videoOptions,
+  signature: signatureOptions,
+  sign: signOptions
 };
 export default itemOptions;