@flozy/editor 3.4.1 → 3.4.2

package/dist/Editor/CommonEditor.js

@@ -98,7 +98,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const [isScrolling, setIsScrolling] = useState(false);
   const [isTextSelected, setIsTextSelected] = useState(false);
-  const [openInfiniti, setOpenInfiniti] = useState(false);
   const [size] = useWindowResize();
   const {
     needDotsBG,
@@ -386,7 +385,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx(EditorProvider, {
     theme: theme,
     editor: editor,
-    setOpenInfiniti: setOpenInfiniti,
     children: /*#__PURE__*/_jsx(DialogWrapper, {
       classes: classes,
       ...props,
@@ -416,10 +414,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                   handleInsertLastElement(e, editor);
                 },
                 onScroll: handleScroll,
-                style: {
-                  ...editorWrapperStyle,
-                  overflowY: openInfiniti ? "hidden" : "auto"
-                },
+                style: editorWrapperStyle,
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",

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

@@ -94,7 +94,15 @@ function AIInput({
       sx: classes.aiContainer,
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
-        children: generatedText
+        children: /*#__PURE__*/_jsx("pre", {
+          style: {
+            whiteSpace: "pre-wrap",
+            wordWrap: "break-word",
+            fontFamily: "inherit",
+            margin: 0
+          },
+          children: generatedText
+        })
       }) : null, /*#__PURE__*/_jsxs(Box, {
         component: "form",
         sx: classes.aiInputWrapper,
@@ -103,19 +111,14 @@ function AIInput({
         },
         ref: refs[0],
         children: [/*#__PURE__*/_jsx("div", {
-          className: "icon-container",
+          className: "icon-container icons-elements",
           ref: inputWrapperRef,
           children: /*#__PURE__*/_jsx(Icon, {
             icon: "infinityIcon"
           })
-        }), loading ? /*#__PURE__*/_jsxs("div", {
+        }), loading ? /*#__PURE__*/_jsx("div", {
           className: "loading-container",
-          children: [/*#__PURE__*/_jsx(Typography, {
-            variant: "body1",
-            children: "Infinity Writing"
-          }), /*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(WaveLoading, {})
-          })]
+          children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
           placeholder: fromToolBar ? "" : "Ask AI to write anything...",
@@ -129,15 +132,16 @@ function AIInput({
               handleSendBtnClick();
             }
           }
-        }), /*#__PURE__*/_jsx(Box, {
+        }), fromToolBar ? null : /*#__PURE__*/_jsx(Box, {
           component: "div",
           style: classes.sendIconContainer,
+          className: "icons-elements",
           children: /*#__PURE__*/_jsx(IconButton, {
             sx: isSendBtnDisabled ? classes.sendBtnDisabled : classes.sendBtn,
             onClick: () => handleSendBtnClick(),
             children: /*#__PURE__*/_jsx(IoSend, {
               color: "#fff",
-              size: 13
+              size: 14
             })
           })
         })]

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

@@ -4,7 +4,7 @@ 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 { Editor, Node, Path, Transforms } from "slate";
 import useWindowResize from "../../hooks/useWindowResize";
 import { MODES } from "./helper";
 import { getSelectedText } from "../../utils/helper";
@@ -29,6 +29,66 @@ const scrollToAIInput = () => {
     console.log(err);
   }
 };
+const insertAtNextLine = (editor, text) => {
+  const nextLine = getNextLine(editor);
+  Transforms.splitNodes(editor, {
+    at: nextLine.at
+  });
+  Transforms.insertNodes(editor, {
+    type: "paragraph",
+    children: [{
+      text
+    }]
+  }, {
+    at: nextLine.at
+  });
+  const currentPath = Path.parent(nextLine.at.focus.path);
+  const nextPath = Path.next(currentPath);
+  ReactEditor.focus(editor);
+  Transforms.select(editor, {
+    anchor: Editor.start(editor, nextPath),
+    focus: Editor.end(editor, nextPath)
+  });
+};
+const getNextLine = editor => {
+  const {
+    selection
+  } = editor;
+  const {
+    focus
+  } = selection;
+  const {
+    text = ""
+  } = Node.get(editor, focus.path);
+  let nextLineIndex = 0;
+  let indexOfNextLine = 0;
+  if (text?.length) {
+    // split the text based on caret position
+    const textBeforeCaret = text.substring(0, focus.offset);
+    const textAfterCaret = text.substring(focus.offset);
+
+    // getting the index of the next line after the caret position
+    indexOfNextLine = textAfterCaret?.indexOf("\n");
+    if (indexOfNextLine >= 0) {
+      // index of next line
+      nextLineIndex = textBeforeCaret?.length + indexOfNextLine;
+    } else {
+      nextLineIndex = text?.length;
+    }
+  }
+  const data = {
+    ...focus,
+    offset: nextLineIndex
+  };
+  const at = {
+    anchor: data,
+    focus: data
+  };
+  return {
+    at,
+    indexOfNextLine
+  };
+};
 const updateAnchorEl = (setAnchorEl, editor) => {
   try {
     if (!editor.selection) {
@@ -41,17 +101,19 @@ const updateAnchorEl = (setAnchorEl, editor) => {
         // selected text as caret
         caret = selection.getRangeAt(0);
       } else {
-        const focussedNode = Node.get(editor, editor?.selection?.anchor?.path);
-        // foccussed DOM as caret
-        caret = ReactEditor.toDOMNode(editor, focussedNode);
+        caret = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
       }
       const getBoundingClientRect = () => {
-        const editorEle = document.querySelector(".ed-section-inner").getBoundingClientRect();
+        const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
+        const editorEle = document.querySelector(".ed-section-inner")?.getBoundingClientRect();
         const caretPos = caret.getBoundingClientRect();
+        const isAIInputReachTop = caretPos.height + caretPos.y <= editorContainer.y;
+        const yValue = isAIInputReachTop ? "-500" : caretPos.y; // -500 is to hide the AI input if the toolbar reached the top
+
         return {
-          y: caretPos.y,
+          y: yValue,
           height: caretPos.height,
-          top: caretPos.top,
+          top: yValue,
           right: caretPos.right,
           bottom: caretPos.bottom,
           x: editorEle.x,
@@ -140,6 +202,10 @@ function PopoverAIInput({
     let {
       data: text
     } = result || {};
+    if (!text) {
+      onClickOutside();
+      return;
+    }
     if (!option.replace) {
       if (type === "continue_writing") {
         setGeneratedText(generatedText + text);
@@ -148,8 +214,6 @@ function PopoverAIInput({
       }
       return;
     }
-    const currentPath = Path.parent(editor.selection.focus.path);
-    const nextPath = Path.next(currentPath);
 
     // Get the current selection point
     const {
@@ -157,21 +221,28 @@ function PopoverAIInput({
     } = editor.selection;
     const {
       path
-    } = editor.selection.anchor;
+    } = 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
-      });
+      if (getSelectedText(editor)) {
+        const currentPath = Path.parent(editor.selection.focus.path);
+        const nextPath = Path.next(currentPath);
+        Transforms.insertNodes(editor, {
+          type: "paragraph",
+          children: [{
+            text
+          }]
+        }, {
+          at: nextPath,
+          select: true
+        });
+      } else {
+        insertAtNextLine(editor, text);
+        return;
+      }
     } else {
       Transforms.insertText(editor, text);
     }
@@ -184,8 +255,10 @@ function PopoverAIInput({
     };
     ReactEditor.focus(editor);
     Transforms.select(editor, range);
-    scrollToAIInput();
+
+    // scrollToAIInput();
   };
+
   const onInputChange = e => {
     setInputValue(e.target.value);
   };
@@ -220,6 +293,9 @@ function PopoverAIInput({
         ...TransitionProps,
         timeout: 350,
         children: /*#__PURE__*/_jsx(Paper, {
+          sx: getSelectedText(editor) ? {
+            marginTop: "6px"
+          } : {},
           children: /*#__PURE__*/_jsx(AIInput, {
             loading: loading,
             onSend: onSend,

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

@@ -2,39 +2,45 @@ const Styles = theme => ({
   aiContainer: {
     background: "#FCFAFF",
     border: "1px solid #8360FD",
-    borderRadius: "8px"
+    borderRadius: "6px",
+    boxShadow: "0px 4px 10px 0px #00000029"
   },
   aiInputWrapper: {
     display: "flex",
     alignItems: "baseline",
     justifyContent: "space-between",
-    padding: "0px 12px",
+    padding: "0px 4px 0px 12px",
     minHeight: "36px",
     position: "relative",
     background: "#FCFAFF",
-    borderRadius: "7px",
+    borderRadius: "5px",
     "& .icon-container": {
       display: "flex",
-      alignItems: "center",
-      height: "48px"
+      alignItems: "center"
+    },
+    "& .icons-elements": {
+      height: "40px"
     },
     "& .ai-input": {
-      padding: "14px",
+      padding: "8px 4px 8px 18px",
       border: "none",
       outline: "none",
       width: "100%",
       background: "transparent",
       resize: "none",
       alignSelf: "center",
-      color: theme?.palette?.editor?.textColor,
-      fontSize: "13px !important",
+      color: "#000",
+      fontSize: "14px !important",
+      fontFamily: '"Inter", sans-serif',
       "&::placeholder": {
         color: "#94A3B8",
-        opacity: 1 /* Firefox */
+        opacity: 1 /* Firefox */,
+        fontFamily: '"Inter", sans-serif',
+        fontWeight: 500
       },
-
       "&::-ms-input-placeholder": {
-        /* Edge 12-18 */color: "#94A3B8"
+        /* Edge 12-18 */color: "#94A3B8",
+        fontFamily: '"Inter", sans-serif'
       }
     },
     "& .action-btns": {
@@ -71,7 +77,10 @@ const Styles = theme => ({
     background: "linear-gradient(331.11deg, #2563EB 7.11%, #8360FD 88.37%)"
   },
   sendBtnDisabled: {
-    background: "#C0C9D6"
+    background: "#C0C9D6",
+    "&:hover": {
+      background: "#C0C9D6"
+    }
   },
   aiPopper: {
     zIndex: 9000,
@@ -114,7 +123,7 @@ const Styles = theme => ({
   },
 
   optionBtn: {
-    color: "#373232",
+    color: theme?.palette?.editor?.textColor || "#373232",
     padding: "8px 12px",
     textTransform: "none",
     justifyContent: "space-between",
@@ -142,7 +151,6 @@ const Styles = theme => ({
   },
   sendIconContainer: {
     alignSelf: "flex-end",
-    height: "48px",
     display: "flex",
     alignItems: "center"
   }

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -4,7 +4,7 @@ const usePopupStyles = theme => ({
     zIndex: 1300,
     borderRadius: "10px",
     padding: "0px",
-    boxShadow: "0 4px 10px rgba(0,0,0,.2)",
+    boxShadow: "0px 4px 10px 0px #00000029",
     overflow: "hidden"
   },
   papper: {
@@ -40,10 +40,10 @@ const usePopupStyles = theme => ({
       color: theme?.palette?.editor?.textColor
     },
     "&.active": {
-      border: `1px solid ${theme?.palette?.editor?.activeColor}`
+      background: "#E9F3FE"
     },
     "&:hover": {
-      border: `1px solid ${theme?.palette?.editor?.activeColor}`
+      background: "#E9F3FE"
     },
     "&.renderComp": {
       padding: "0px",

package/dist/Editor/common/Shorthands/elements.js

@@ -226,7 +226,7 @@ const ELEMENTS_LIST = [{
   }
 }, {
   name: "Ask AI to write anything",
-  group: "INFINITY AI",
+  group: "Infinity AI",
   desc: "",
   type: "infinityAI",
   icon: /*#__PURE__*/_jsx(Icon, {

package/dist/Editor/hooks/useMouseMove.js

@@ -19,8 +19,7 @@ export const useEditorSelection = editor => {
 export const EditorProvider = ({
   editor,
   theme,
-  children,
-  setOpenInfiniti
+  children
 }) => {
   const [event] = useMouseMove();
   const [previous, setPrevious] = useState("");
@@ -55,10 +54,7 @@ export const EditorProvider = ({
       popupType,
       setPopupType,
       openAI,
-      setOpenAI: value => {
-        setOpenAI(value);
-        setOpenInfiniti(!!value);
-      }
+      setOpenAI
     },
     children: children
   });

package/dist/Editor/utils/infinityAI.js

@@ -1,23 +1,4 @@
-import { Node, Path, Transforms } from "slate";
+import { Transforms } from "slate";
 export const insertInfinityAI = editor => {
   Transforms.delete(editor, editor.selection);
-  const {
-    path
-  } = editor.selection.anchor;
-  const {
-    text
-  } = Node.get(editor, path);
-  const currentPath = Path.parent(editor.selection.focus.path);
-  const nextPath = Path.next(currentPath);
-  if (text?.length) {
-    Transforms.insertNodes(editor, {
-      type: "paragraph",
-      children: [{
-        text: ""
-      }]
-    }, {
-      at: nextPath,
-      select: true
-    });
-  }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"