@flozy/editor 4.4.0 → 4.4.2

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";
@@ -33,10 +33,10 @@ 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(({
@@ -365,10 +365,20 @@ 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 {
+        selection
+      } = editor;
+      event.preventDefault();
+      if (selection) {
+        if (!Range.isCollapsed(selection)) {
+          editor.deleteFragment();
+        } else {
+          editor.deleteBackward({
+            unit: 'character'
+          });
+        }
+      }
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -433,19 +443,22 @@ 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"
             });
           }
         } else {
-          console.warn("No valid selection range found");
+          console.warn('No valid selection range found');
         }
       }
     } catch (err) {
-      console.log("handleCursorScroll", err);
+      console.log('handleCursorScroll', err);
     }
   };
   return /*#__PURE__*/_jsx(EditorProvider, {

package/dist/Editor/Editor.css

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

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

@@ -40,9 +40,11 @@ const scrollToAIInput = editor => {
   }, 200);
 };
 const insertText = (editor, text, options) => {
-  const parsed = new DOMParser().parseFromString(text, "text/html");
-  const fragment = deserialize(parsed.body);
-  Transforms.insertFragment(editor, fragment, options);
+  if (text?.length) {
+    const parsed = new DOMParser().parseFromString(text, "text/html");
+    const fragment = deserialize(parsed.body);
+    Transforms.insertFragment(editor, fragment, options);
+  }
 };
 const insertAtNextLine = (editor, text) => {
   const nextLine = getNextLine(editor);
@@ -200,80 +202,83 @@ function PopoverAIInput({
     selectedEleRef.current = selectedElement;
   }, [selectedElement]);
   const onSend = async (type, option) => {
-    if (type === "close") {
-      onClickOutside();
-      return;
-    }
-    if (type === "done") {
-      // Get the current selection point
-      const {
-        anchor
-      } = editor.selection;
-      const {
-        path
-      } = anchor;
-      const {
-        text: selectText
-      } = Node.get(editor, path);
-      if (selectText?.length) {
-        insertAtNextLine(editor, generatedText);
-      } else {
+    try {
+      if (type === "close") {
+        onClickOutside();
+        return;
+      }
+      if (type === "done") {
+        // Get the current selection point
+        const {
+          anchor
+        } = editor.selection;
+        const {
+          path
+        } = anchor;
+        const {
+          text: selectText
+        } = Node.get(editor, path);
+        if (selectText?.length) {
+          insertAtNextLine(editor, generatedText);
+        } else {
+          insertText(editor, generatedText);
+        }
+        onClickOutside();
+        return;
+      }
+      if (type === "replace_selection") {
+        // replace generated text
         insertText(editor, generatedText);
+        onClickOutside();
+        return;
       }
-      onClickOutside();
-      return;
-    }
-    if (type === "replace_selection") {
-      // replace generated text
-      insertText(editor, generatedText);
-      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 result = await services("infinityAI", payload);
-    setLoading(false);
-    setInputValue("");
-    let {
-      data: text
-    } = result || {};
-    if (!text) {
-      onClickOutside();
-      return;
-    }
-    if (!option.replace) {
-      if (type === "continue_writing") {
-        setGeneratedText(generatedText + text);
+      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 {
-        setGeneratedText(text);
+        setSelectedOption(option);
       }
-      return;
-    }
-    insertText(editor, text);
+      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 result = await services("infinityAI", payload);
+      setLoading(false);
+      setInputValue("");
+      let {
+        data: text
+      } = result || {};
+      if (!text) {
+        onClickOutside();
+        return;
+      }
+      if (!option.replace) {
+        if (type === "continue_writing") {
+          setGeneratedText(generatedText + text);
+        } else {
+          setGeneratedText(text);
+        }
+        return;
+      }
+      insertText(editor, text);
 
-    // scrollToAIInput();
+      // scrollToAIInput();
+    } catch (err) {
+      console.error("Error on sending/inserting text", err);
+    }
   };
-
   const onInputChange = e => {
     setInputValue(e.target.value);
   };

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

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

@@ -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";
@@ -179,7 +179,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 +220,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/Mentions/Mentions.js

@@ -14,9 +14,10 @@ const Mentions = ({
     verticalAlign: "baseline",
     display: "inline-block",
     borderRadius: "4px",
-    backgroundColor: "#eee",
+    backgroundColor: "#2563EB",
     fontSize: "0.9em",
-    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none"
+    boxShadow: selected && focused ? "0 0 0 2px #B4D5FF" : "none",
+    color: "#FFF"
   };
   // See if our empty text child has any styling marks applied and apply those
   if (element.children[0].bold) {

package/dist/Editor/Elements/SimpleText/index.js

@@ -6,7 +6,6 @@ import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
@@ -48,9 +47,9 @@ const SimpleText = props => {
     sx: classes.root,
     key: `para_${path.join("|")}`
   }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
-    contentEditable: false,
     className: "placeholder-simple-text",
-    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs("span", {
+      className: "placeholder-simple-text-default",
       children: ["Type ", /*#__PURE__*/_jsx("span", {
         style: {
           backgroundColor: '#F2F6FA',

package/dist/Editor/Elements/Table/TableRow.js

@@ -23,7 +23,7 @@ const TableRow = props => {
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
-      backgroundColor: bgColor,
+      background: bgColor,
       border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children

package/dist/Editor/Styles/EditorStyles.js

@@ -215,7 +215,7 @@ const editorStyles = ({
     },
     "& .content-editable.empty": {
       "&:after": {
-        color: theme.palette.type === "dark" ? "#99A5B6" : placeHolderColor
+        color: placeHolderColor
       }
     },
     "& .checkbox-edit": {

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -123,7 +123,8 @@ const MiniToolbar = props => {
         label,
         icon: Icon
       }) => {
-        const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false;
+        const isDisabled = popupType === type || type === "undo" ? !canUndo : type === "redo" ? !canRedo : false; // for textFormat type
+
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,

package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js

@@ -1,28 +1,22 @@
 import React from "react";
-import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
+import { Box, Card, CardMedia, Grid } from "@mui/material";
+
+// const Select = (props) => {
+//     const { classes, data, onSelectTemplate } = props;
+//     return (
+//         <Box
+//             className="template-card-action"
+//             component={"div"}
+//             sx={classes.templateCardBtnGrp}
+//             style={{ padding: 0, background: "transparent"}}
+//         >
+//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
+//                 Select
+//             </Button>
+//         </Box>
+//     );
+// };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Select = props => {
-  const {
-    classes,
-    data,
-    onSelectTemplate
-  } = props;
-  return /*#__PURE__*/_jsx(Box, {
-    className: "template-card-action",
-    component: "div",
-    sx: classes.templateCardBtnGrp,
-    style: {
-      padding: 0,
-      background: "transparent"
-    },
-    children: /*#__PURE__*/_jsx(Button, {
-      className: "blueBtn",
-      onClick: onSelectTemplate(data),
-      children: "Select"
-    })
-  });
-};
 const ButtonTemplateCard = props => {
   const {
     classes,
@@ -34,19 +28,19 @@ const ButtonTemplateCard = props => {
     xs: 3,
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         sx: classes.buttonCardMediaWrpr,
-        children: [/*#__PURE__*/_jsx(CardMedia, {
-          className: `template-card-media`,
-          component: "div",
-          image: m?.thumbnail,
-          alt: m?.title,
-          sx: classes.buttonCardMedia
-        }), /*#__PURE__*/_jsx(Select, {
-          classes: classes,
-          onSelectTemplate: onSelectTemplate,
-          data: m
-        })]
+        onClick: onSelectTemplate(m),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "img-wrapper",
+          children: /*#__PURE__*/_jsx(CardMedia, {
+            className: `template-card-media`,
+            component: "div",
+            image: m?.thumbnail,
+            alt: m?.title,
+            sx: classes.buttonCardMedia
+          })
+        })
       })
     })
   }, `template_${m.id}`);