@flozy/editor 4.6.1 → 4.6.2

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, Range, 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, isPageSettings, 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;
@@ -145,11 +146,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     placeHolderColor: invertColor(pageColor || "#FFF"),
     theme
   });
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {
     setValue(draftToSlate({
       data: content
     }));
-    if (!ReactEditor.isFocused(editor)) {
+    if (!isMobile && !ReactEditor.isFocused(editor)) {
       ReactEditor.focus(editor);
     }
   }, [id, content]);
@@ -287,11 +289,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,10 +366,6 @@ 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) {
@@ -388,7 +385,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",
@@ -453,10 +450,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"
             });
           }
@@ -531,7 +531,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 {
@@ -1206,17 +1188,4 @@ blockquote {
 
 .freegrid-section {
   max-width: 100% !important;
-}
-
-.divider-settings {
-  display: none;
-  position: absolute;
-}
-
-.dividerComponent:hover {
-  padding: 10px 0;
-}
-
-.dividerComponent:hover .divider-settings {
-  display: block;
 }

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/Divider/Divider.js

@@ -1,129 +1,30 @@
-import React, { useState } from "react";
-import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import { ReactEditor, useSlateStatic } from "slate-react";
-import { IconButton, Tooltip } from "@mui/material";
-import { GridSettingsIcon } from "../../common/iconslist";
-import DividerPopup from "./DividerPopup";
-import { Transforms } from "slate";
+import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
   const {
     attributes,
-    children,
-    element,
-    customProps
+    children
   } = props;
-  const {
-    theme
-  } = useEditorContext();
-  const {
-    borderColor = theme?.palette?.text?.primary || '#0F172A',
-    borderWidth = '1px',
-    borderStyle = 'solid'
-  } = element;
-  const {
-    readOnly
-  } = customProps;
-  const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
-  const [openSettings, setOpenSettings] = useState(false);
-  const {
-    hoverPath
-  } = useEditorContext();
-  const [showTool] = useEditorSelection(editor);
-  const selected = hoverPath === path.join(",");
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const DividerToolbar = ({
-    selected,
-    showTool,
-    onSettings
-  }) => {
-    return /*#__PURE__*/_jsx("div", {
-      contentEditable: false,
-      className: "divider-settings",
-      style: {
-        top: "-20px",
-        left: 0
-      },
-      children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Divider Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          sx: {
-            boxShadow: '0px 0px 4px 0px #00000040',
-            borderRadius: '50%'
-          },
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      })
-    });
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  const onDelete = () => {
-    if (path) {
-      Transforms.removeNodes(editor, {
-        at: path
-      });
-    }
-  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "dividerComponent",
+    contentEditable: "false",
     style: {
-      userSelect: "none",
-      position: 'relative'
+      userSelect: "none"
     },
-    children: [!readOnly && /*#__PURE__*/_jsx("div", {
-      className: `element-root element-selector`,
-      contentEditable: false,
-      style: {
-        zIndex: 1000
-      },
-      children: /*#__PURE__*/_jsx(DividerToolbar, {
-        selected: selected,
-        showTool: showTool,
-        onSettings: onSettings
-      })
-    }), /*#__PURE__*/_jsx("hr", {
-      contentEditable: false,
+    children: [/*#__PURE__*/_jsx("hr", {
+      contentEditable: "false",
       className: "editorDivider",
       style: {
-        userSelect: "none",
-        borderTop: !borderColor?.includes("linear") ? `${borderWidth} ${borderStyle} ${borderColor}` : `transparent`,
-        backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
-        height: borderColor?.includes("linear") ? borderWidth : undefined
+        userSelect: "none"
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {
         display: "none"
       },
       children: children
-    }), openSettings ? /*#__PURE__*/_jsx(DividerPopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      onDelete: onDelete,
-      customProps: customProps
-    }) : null]
+    })]
   });
 };
 export default Divider;

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 => {
@@ -86,8 +87,7 @@ const Video = ({
     url,
     xsHidden,
     width: oldWidth,
-    bannerSpacing,
-    aspectRatio
+    bannerSpacing
   } = element;
   const editor = useSlateStatic();
   const [openSetttings, setOpenSettings] = useState(false);
@@ -180,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 {
@@ -189,10 +189,9 @@ const Video = ({
           width: {
             ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
           },
-          height: url && !aspectRatio ? {
+          height: url ? {
             ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
-          } : "auto",
-          aspectRatio: aspectRatio ? aspectRatio : "auto"
+          } : "auto"
         }, theme)
       };
     }
@@ -222,7 +221,6 @@ const Video = ({
       alignContent: vertical
     },
     ...element.attr,
-    contentEditable: false,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -6,6 +6,7 @@ import { insertEmoji } from "../../utils/emoji";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import Icon from "../../common/Icon";
 import EmojiPicker from "./EmojiPicker";
+import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -19,6 +20,7 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [target, setTarget] = useState(selectionTarget);
   const open = Boolean(anchorEl);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useImperativeHandle(ref, () => ({
     triggerClick: target => {
       setTarget(target);
@@ -54,7 +56,27 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
         icon: "emoji"
       }),
       icoBtnType: icoBtnType
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+      open: open,
+      onClose: handleClose,
+      customClass: "emojiDrawer",
+      children: /*#__PURE__*/_jsx(Paper, {
+        style: {
+          width: '100%'
+        },
+        sx: {
+          '& em-emoji-picker': {
+            width: '100%'
+          }
+        },
+        children: /*#__PURE__*/_jsx(EmojiPicker, {
+          data: data,
+          onEmojiSelect: onEmojiSelect,
+          theme: theme?.palette?.type,
+          dynamicWidth: true
+        })
+      })
+    }) : /*#__PURE__*/_jsx(Popover, {
       style: {
         zIndex: 10001
       },

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",