@flozy/editor 3.3.0 → 3.3.2

package/dist/Editor/CommonEditor.js

@@ -31,6 +31,7 @@ import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
 import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
+import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Item = /*#__PURE__*/forwardRef(({
@@ -455,7 +456,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     customProps: customProps,
                     toolbarOptions: toolbarOptions,
                     theme: theme
-                  }) : null, footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
+                  }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
+                    otherProps: otherProps
+                  }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",
                       fontSize: "13px",
@@ -471,7 +474,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
               }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
                 onDrawerOpen: onDrawerOpen,
                 theme: theme,
-                setIsTextSelected: setIsTextSelected
+                setIsTextSelected: setIsTextSelected,
+                customProps: customProps
               }) : null]
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {

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

@@ -0,0 +1,157 @@
+import { Box, IconButton, TextareaAutosize, Typography } from "@mui/material";
+import Styles from "./Styles";
+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 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 { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function getProps(openAI, generatedText) {
+  const dropDownProps = {
+    fromElements: {
+      options: newContentOptions,
+      show: window.getSelection().toString().length
+    },
+    fromToolBar: {
+      options: editContentOptions,
+      show: true
+    },
+    generatedContent: {
+      options: generatedContentOptions,
+      show: true
+    }
+  };
+  if (openAI === "fromToolBar" && generatedText?.length) {
+    return dropDownProps.generatedContent;
+  }
+  return dropDownProps[openAI];
+}
+function AIInput({
+  onSend,
+  loading,
+  generatedText,
+  openAI,
+  inputValue,
+  onInputChange,
+  onClickOutside
+}, ref) {
+  const {
+    theme
+  } = useEditorContext();
+  const classes = Styles(theme);
+  const inputRef = useRef();
+  const [size] = useWindowResize();
+  const inputWrapperRef = useRef();
+  const refs = useClickOutside({
+    onClickOutside,
+    omitIds: ["infinity-select-popover"],
+    omitClass: ["MuiModal-backdrop"],
+    refCount: 2
+  });
+  useEffect(() => {
+    let timeoutId;
+    if (inputRef.current && openAI !== "fromToolBar") {
+      timeoutId = setTimeout(() => {
+        inputRef.current.focus();
+      }, 200);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [openAI]);
+  const isSendBtnDisabled = !inputValue || loading;
+  const props = getProps(openAI, generatedText) || {};
+  const fromToolBar = openAI === "fromToolBar";
+  const handleSendBtnClick = () => {
+    if (isSendBtnDisabled) {
+      return;
+    }
+    onSend("", {
+      replace: true,
+      isSendBtn: true
+    });
+  };
+  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, {
+      component: "div",
+      sx: classes.aiContainer,
+      children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
+        sx: classes.generatedText,
+        children: generatedText
+      }) : null, /*#__PURE__*/_jsxs(Box, {
+        component: "form",
+        sx: classes.aiInputWrapper,
+        onSubmit: e => {
+          e.preventDefault();
+        },
+        ref: refs[0],
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "icon-container",
+          ref: inputWrapperRef,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "infinityIcon"
+          })
+        }), loading ? /*#__PURE__*/_jsxs("div", {
+          className: "loading-container",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            children: "Infinity Writing"
+          }), /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(WaveLoading, {})
+          })]
+        }) : /*#__PURE__*/_jsx(TextareaAutosize, {
+          className: "ai-input",
+          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__*/_jsx(Box, {
+          component: "div",
+          style: classes.sendIconContainer,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
+            onClick: () => handleSendBtnClick(),
+            children: /*#__PURE__*/_jsx(IoSend, {
+              color: "#fff",
+              size: 13
+            })
+          })
+        })]
+      })]
+    }), size.device === "xs" ? null : /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      ref: refs[1],
+      sx: classes.customSelectWrapper,
+      children: /*#__PURE__*/_jsx(CustomSelect, {
+        ...props,
+        onSend: onSend,
+        classes: classes
+      })
+    })]
+  });
+}
+export default /*#__PURE__*/forwardRef(AIInput);

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

@@ -0,0 +1,101 @@
+import { Box, Button, IconButton, Popover, Typography } from "@mui/material";
+import React, { useRef, useState } from "react";
+import { FaChevronRight } from "react-icons/fa";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function CustomSelect({
+  classes,
+  options,
+  onSend,
+  show
+}) {
+  if (show) {
+    return /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      sx: classes.customSelectContainer,
+      children: options?.map((groupOption, index) => {
+        const {
+          options,
+          groupLabel
+        } = groupOption;
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [groupLabel && /*#__PURE__*/_jsx(Typography, {
+            variant: "body2",
+            sx: classes.optionHeading,
+            children: groupLabel
+          }), options?.map((option, i) => {
+            return /*#__PURE__*/_jsx(DisplayOption, {
+              option: option,
+              classes: classes,
+              onSend: onSend
+            }, i);
+          })]
+        }, index);
+      })
+    });
+  } else {
+    return /*#__PURE__*/_jsx(_Fragment, {});
+  }
+}
+export default CustomSelect;
+function DisplayOption({
+  option,
+  classes,
+  onSend
+}) {
+  const {
+    Icon
+  } = option;
+  const [open, setOpen] = useState(false);
+  const optionRef = useRef();
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: classes.optionWrapper,
+    ref: optionRef,
+    children: [/*#__PURE__*/_jsxs(Button, {
+      sx: classes.optionBtn,
+      onClick: e => {
+        e.stopPropagation();
+
+        // is having child options
+        if (option.options?.length) {
+          setOpen(e.currentTarget);
+          return;
+        }
+        setOpen(null);
+        onSend(option.value, option);
+      },
+      id: "infinity-select-popover",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "option-label",
+        id: "infinity-select-popover",
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), option.label]
+      }), option.options?.length && /*#__PURE__*/_jsx(IconButton, {
+        children: /*#__PURE__*/_jsx(FaChevronRight, {
+          color: "#94A3B8",
+          size: 12
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Popover, {
+      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
+      })
+    })]
+  });
+}

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

@@ -0,0 +1,231 @@
+import { useEffect, useRef, useState } from "react";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import Styles from "./Styles";
+import { Box, Fade, Paper, Popper } from "@mui/material";
+import AIInput from "./AIInput";
+import { ReactEditor, useSlate } from "slate-react";
+import { Node, Path, Transforms } from "slate";
+import useWindowResize from "../../hooks/useWindowResize";
+import { MODES } from "./helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const scrollToAIInput = () => {
+  try {
+    setTimeout(() => {
+      const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
+      const selectionRect = window.getSelection().getRangeAt(0).getBoundingClientRect();
+      const halfOfWrapper = slateWrapper.clientHeight / 2;
+      const selectionScollTop = selectionRect.y + selectionRect.height;
+      if (selectionScollTop > halfOfWrapper) {
+        // scroll to half of the slateWrapper
+        slateWrapper.scrollTo({
+          top: slateWrapper.scrollTop + selectionScollTop - halfOfWrapper,
+          behavior: "smooth"
+        });
+      }
+    }, 200);
+  } catch (err) {
+    console.log(err);
+  }
+};
+const updateAnchorEl = setAnchorEl => {
+  try {
+    const selection = window.getSelection();
+    if (selection.rangeCount) {
+      const domRange = selection.getRangeAt(0);
+      const getBoundingClientRect = () => {
+        const editorEle = document.querySelector(".ed-section-inner").getBoundingClientRect();
+        const caretPos = domRange.getBoundingClientRect();
+        return {
+          y: caretPos.y,
+          height: caretPos.height,
+          top: caretPos.top,
+          right: caretPos.right,
+          bottom: caretPos.bottom,
+          x: editorEle.x,
+          left: editorEle.left,
+          width: editorEle.width
+        };
+      };
+      setAnchorEl({
+        getBoundingClientRect
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+function PopoverAIInput({
+  otherProps
+}) {
+  const {
+    services
+  } = otherProps;
+  const {
+    openAI,
+    setOpenAI
+  } = useEditorContext();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [generatedText, setGeneratedText] = useState("");
+  const [inputValue, setInputValue] = useState("");
+  const [selectedOption, setSelectedOption] = useState();
+  const targetRef = useRef();
+  const classes = Styles();
+  const editor = useSlate();
+  const [size] = useWindowResize();
+  const onClickOutside = () => {
+    setAnchorEl(null);
+    setOpenAI("");
+    setGeneratedText("");
+    setLoading(false);
+    setSelectedOption(null);
+    setInputValue("");
+    ReactEditor.focus(editor);
+    Transforms.deselect(editor);
+  };
+  const editorElement = document.querySelector(".ed-section-inner");
+  useEffect(() => {
+    updateAnchorEl(setAnchorEl);
+  }, [openAI, editor.selection]);
+  useEffect(() => {
+    if (openAI === "fromToolBar") {
+      scrollToAIInput();
+    }
+  }, [openAI]);
+  const onSend = async (type, option) => {
+    if (type === "close") {
+      onClickOutside();
+      return;
+    }
+    if (type === "replace_selection") {
+      // replace generated text
+      Transforms.insertText(editor, generatedText);
+      onClickOutside();
+      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: 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 (!option.replace) {
+      if (type === "continue_writing") {
+        setGeneratedText(generatedText + text);
+      } else {
+        setGeneratedText(text);
+      }
+      return;
+    }
+    const currentPath = Path.parent(editor.selection.focus.path);
+    const nextPath = Path.next(currentPath);
+
+    // Get the current selection point
+    const {
+      anchor
+    } = editor.selection;
+    const {
+      path
+    } = editor.selection.anchor;
+    const {
+      text: selectText
+    } = Node.get(editor, path);
+    const insertInNewLine = option.isSendBtn && selectText?.length || type === "continue_writing";
+    if (insertInNewLine) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text
+        }]
+      }, {
+        at: nextPath,
+        select: true
+      });
+    } else {
+      Transforms.insertText(editor, text);
+    }
+    const range = {
+      ...editor.selection,
+      anchor: {
+        ...anchor,
+        offset: openAI === "fromToolBar" ? anchor.offset : 0
+      }
+    };
+    ReactEditor.focus(editor);
+    Transforms.select(editor, range);
+    scrollToAIInput();
+  };
+  const onInputChange = e => {
+    setInputValue(e.target.value);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    children: [size.device === "xs" && openAI ? /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      sx: classes.mobileAIInputWrapper,
+      ref: targetRef,
+      children: /*#__PURE__*/_jsx(AIInput, {
+        loading: loading,
+        onSend: onSend,
+        generatedText: generatedText,
+        anchorEl: anchorEl,
+        openAI: openAI,
+        inputValue: inputValue,
+        onInputChange: onInputChange,
+        onClickOutside: onClickOutside
+      })
+    }) : /*#__PURE__*/_jsx(Popper, {
+      open: Boolean(openAI),
+      anchorEl: anchorEl,
+      transition: true,
+      placement: "bottom-start",
+      sx: {
+        ...classes.aiPopper,
+        width: editorElement?.offsetWidth || 400
+      },
+      ref: targetRef,
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        timeout: 350,
+        children: /*#__PURE__*/_jsx(Paper, {
+          children: /*#__PURE__*/_jsx(AIInput, {
+            loading: loading,
+            onSend: onSend,
+            generatedText: generatedText,
+            anchorEl: anchorEl,
+            openAI: openAI,
+            inputValue: inputValue,
+            onInputChange: onInputChange,
+            onClickOutside: onClickOutside
+          })
+        })
+      })
+    }), openAI ? /*#__PURE__*/_jsx("div", {
+      style: {
+        height: targetRef?.current?.clientHeight > 250 ? targetRef?.current?.clientHeight : 250,
+        background: "transparent"
+      }
+    }) : null]
+  });
+}
+export default PopoverAIInput;

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

@@ -0,0 +1,149 @@
+const Styles = theme => ({
+  aiContainer: {
+    background: "#FCFAFF",
+    border: "1px solid #8360FD",
+    borderRadius: "8px"
+  },
+  aiInputWrapper: {
+    display: "flex",
+    alignItems: "baseline",
+    justifyContent: "space-between",
+    padding: "0px 12px",
+    minHeight: "36px",
+    position: "relative",
+    background: theme?.palette?.editor?.background,
+    borderRadius: "7px",
+    "& .icon-container": {
+      display: "flex",
+      alignItems: "center",
+      height: "48px"
+    },
+    "& .ai-input": {
+      padding: "14px",
+      border: "none",
+      outline: "none",
+      width: "100%",
+      background: "transparent",
+      resize: "none",
+      alignSelf: "center",
+      color: theme?.palette?.editor?.textColor,
+      fontSize: "13px !important",
+      "&::placeholder": {
+        color: "#94A3B8",
+        opacity: 1 /* Firefox */
+      },
+
+      "&::-ms-input-placeholder": {
+        /* Edge 12-18 */color: "#94A3B8"
+      }
+    },
+    "& .action-btns": {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      "& .MuiTypography-root": {
+        color: "#64748B !important",
+        fontSize: "14px",
+        textTransform: "none"
+      },
+      "& .btn-wrapper": {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px"
+      }
+    },
+    "& .loading-container": {
+      display: "flex",
+      alignItems: "center",
+      color: "#2563EB !important",
+      gap: "12px",
+      width: "100%",
+      paddingLeft: "14px",
+      alignSelf: "center",
+      "& .MuiTypography-body1": {
+        fontSize: "14px",
+        color: "#2563EB !important",
+        fontWeight: 500
+      }
+    }
+  },
+  sendBtn: {
+    background: "linear-gradient(331.11deg, #2563EB 7.11%, #8360FD 88.37%)"
+  },
+  sendBtnDisabled: {
+    background: "#C0C9D6"
+  },
+  aiPopper: {
+    zIndex: 9000,
+    "& .MuiPaper-rounded": {
+      background: "transparent",
+      boxShadow: "none"
+    }
+  },
+  generatedText: {
+    margin: "8px",
+    maxHeight: "80px",
+    overflow: "auto"
+  },
+  customSelectWrapper: {
+    width: "fit-content",
+    marginTop: "4px",
+    "@media only screen and (max-width: 600px)": {
+      marginBottom: "4px"
+    }
+  },
+  customSelectContainer: {
+    background: theme?.palette?.editor?.background,
+    boxShadow: "0px 4px 10px 0px #00000029",
+    borderRadius: "8px",
+    maxHeight: "250px",
+    overflow: "auto",
+    // width: "240px",
+    minWidth: "200px",
+    border: "1px solid #E0E0E0"
+  },
+  optionWrapper: {
+    position: "relative"
+
+    // "& .select-option": {
+    //   position: "absolute",
+    //   left: 0,
+    //   top: 0
+    // },
+  },
+
+  optionBtn: {
+    color: "#373232",
+    padding: "8px 12px",
+    textTransform: "none",
+    justifyContent: "space-between",
+    width: "100%",
+    fontWeight: "normal !important",
+    "& .option-label": {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    }
+  },
+  optionHeading: {
+    color: theme?.palette?.editor?.textColor,
+    padding: "14px 0px 8px 4px",
+    fontWeight: 600,
+    borderBottom: "1px solid #DCE4EC",
+    margin: "0px 8px"
+  },
+  mobileAIInputWrapper: {
+    position: "fixed",
+    bottom: "env(safe-area-inset-bottom)",
+    left: 0,
+    width: "100%",
+    zIndex: "9000"
+  },
+  sendIconContainer: {
+    alignSelf: "flex-end",
+    height: "48px",
+    display: "flex",
+    alignItems: "center"
+  }
+});
+export default Styles;