@flozy/editor 4.0.1 → 4.0.2

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

@@ -1,4 +1,4 @@
-import { Box, Button, IconButton, Popover, Typography } from "@mui/material";
+import { Box, Button, IconButton, Popper, Typography } from "@mui/material";
 import React, { useRef, useState } from "react";
 import { FaChevronRight } from "react-icons/fa";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -49,9 +49,17 @@ function DisplayOption({
   } = option;
   const [open, setOpen] = useState(false);
   const optionRef = useRef();
+  const openOptions = e => {
+    if (option.options?.length && !open) {
+      setOpen(e.currentTarget);
+      return;
+    }
+  };
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.optionWrapper,
     ref: optionRef,
+    onMouseEnter: openOptions,
+    onMouseLeave: () => setOpen(null),
     children: [/*#__PURE__*/_jsxs(Button, {
       sx: classes.optionBtn,
       onClick: e => {
@@ -59,7 +67,7 @@ function DisplayOption({
 
         // is having child options
         if (option.options?.length) {
-          setOpen(e.currentTarget);
+          openOptions(e);
           return;
         }
         setOpen(null);
@@ -77,25 +85,24 @@ function DisplayOption({
           size: 12
         })
       })]
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsx(Popper, {
       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
+      placement: "right-start",
+      children: /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(CustomSelect, {
+          options: option.options,
+          onSend: onSend,
+          classes: classes,
+          show: open
+        })
       })
     })]
   });

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

@@ -1,26 +1,33 @@
 import { useEffect, useRef, useState } from "react";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import Styles from "./Styles";
-import { Box, Fade, Paper, Popper } from "@mui/material";
+import { Fade, Paper, Popper } from "@mui/material";
 import AIInput from "./AIInput";
 import { ReactEditor, useSlate } from "slate-react";
-import { Editor, Node, Path, Transforms } from "slate";
-import useWindowResize from "../../hooks/useWindowResize";
+import { Node, Transforms } from "slate";
 import { MODES } from "./helper";
 import { getSelectedText } from "../../utils/helper";
+import { VoiceToText } from "./VoiceToText";
+import deserialize from "../../helper/deserialize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const scrollToAIInput = () => {
+const scrollToAIInput = editor => {
   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
+      let selectionRect;
+      if (getSelectedText(editor)) {
+        selectionRect = window.getSelection().getRangeAt(0).getBoundingClientRect();
+      } else {
+        selectionRect = ReactEditor.toDOMRange(editor, getNextLine(editor).at).getBoundingClientRect();
+      }
+      const selectionScrollBottom = selectionRect.bottom;
+
+      // if the cursor or selection top position is greater than 80
+      if (selectionScrollBottom > 80) {
+        // scroll to top of the slateWrapper
         slateWrapper.scrollTo({
-          top: slateWrapper.scrollTop + selectionScollTop - halfOfWrapper,
+          top: slateWrapper.scrollTop + selectionScrollBottom - 80,
           behavior: "smooth"
         });
       }
@@ -29,26 +36,19 @@ const scrollToAIInput = () => {
     console.log(err);
   }
 };
+const insertText = (editor, text, options) => {
+  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);
-  Transforms.splitNodes(editor, {
+  insertText(editor, text, {
     at: nextLine.at
   });
-  Transforms.insertNodes(editor, {
-    type: "paragraph",
-    children: [{
-      text
-    }]
-  }, {
+  Transforms.splitNodes(editor, {
     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 {
@@ -101,8 +101,14 @@ const updateAnchorEl = (setAnchorEl, editor) => {
         // selected text as caret
         caret = selection.getRangeAt(0);
       } else {
-        caret = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
+        const domElement = ReactEditor.toDOMRange(editor, getNextLine(editor).at);
+        const {
+          textContent,
+          parentElement
+        } = domElement?.commonAncestorContainer || {};
+        caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
       }
+
       const getBoundingClientRect = () => {
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const editorEle = document.querySelector(".ed-section-inner")?.getBoundingClientRect();
@@ -144,10 +150,8 @@ function PopoverAIInput({
   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("");
@@ -163,8 +167,8 @@ function PopoverAIInput({
     updateAnchorEl(setAnchorEl, editor);
   }, [openAI, editor.selection]);
   useEffect(() => {
-    if (openAI === "fromToolBar") {
-      scrollToAIInput();
+    if (openAI) {
+      scrollToAIInput(editor);
     }
   }, [openAI]);
   const onSend = async (type, option) => {
@@ -172,12 +176,35 @@ function PopoverAIInput({
       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
-      Transforms.insertText(editor, generatedText);
+      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;
@@ -188,7 +215,7 @@ function PopoverAIInput({
     setLoading(true);
     const payload = {
       mode: option.mode || 0,
-      query: inputValue
+      query: option?.inputValue || inputValue
     };
     if (option.mode === MODES.translate || option.mode === MODES.rephraseTone) {
       payload.textOptionInput = type;
@@ -214,47 +241,7 @@ function PopoverAIInput({
       }
       return;
     }
-
-    // Get the current selection point
-    const {
-      anchor
-    } = editor.selection;
-    const {
-      path
-    } = anchor;
-    const {
-      text: selectText
-    } = Node.get(editor, path);
-    const insertInNewLine = option.isSendBtn && selectText?.length || type === "continue_writing";
-    if (insertInNewLine) {
-      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);
-    }
-    const range = {
-      ...editor.selection,
-      anchor: {
-        ...anchor,
-        offset: openAI === "fromToolBar" ? anchor.offset : 0
-      }
-    };
-    ReactEditor.focus(editor);
-    Transforms.select(editor, range);
+    insertText(editor, text);
 
     // scrollToAIInput();
   };
@@ -263,21 +250,7 @@ function PopoverAIInput({
     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, {
+    children: [/*#__PURE__*/_jsx(Popper, {
       open: Boolean(openAI),
       anchorEl: anchorEl,
       transition: true,
@@ -286,7 +259,6 @@ function PopoverAIInput({
         ...classes.aiPopper,
         width: editorElement?.offsetWidth || 400
       },
-      ref: targetRef,
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {
@@ -296,21 +268,25 @@ function PopoverAIInput({
           sx: getSelectedText(editor) ? {
             marginTop: "6px"
           } : {},
-          children: /*#__PURE__*/_jsx(AIInput, {
-            loading: loading,
+          children: /*#__PURE__*/_jsx(VoiceToText, {
+            otherProps: otherProps,
             onSend: onSend,
-            generatedText: generatedText,
-            anchorEl: anchorEl,
-            openAI: openAI,
-            inputValue: inputValue,
-            onInputChange: onInputChange,
-            onClickOutside: onClickOutside
+            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,
+        height: "100vh",
         background: "transparent"
       }
     }) : null]

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

@@ -91,7 +91,6 @@ const Styles = theme => ({
   },
   generatedText: {
     margin: "8px",
-    maxHeight: "100px",
     overflow: "auto",
     fontSize: "inherit"
   },
@@ -167,7 +166,8 @@ const Styles = theme => ({
   sendIconContainer: {
     alignSelf: "flex-end",
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    gap: "6px"
   }
 });
 export default Styles;

package/dist/Editor/Elements/AI/VoiceToText/AudioWave.js

@@ -0,0 +1,73 @@
+import { Box } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import WaveSurfer from "wavesurfer.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SoundWave = props => {
+  const {
+    audioChunks = null
+  } = props; // Initialize to null if not provided
+  const waveContent = useRef(null);
+  const wavesurfer = useRef(null);
+  const [playOnce, setPlayOnce] = useState(false);
+  useEffect(() => {
+    if (waveContent.current) {
+      if (wavesurfer.current) {
+        wavesurfer.current.destroy();
+      }
+      wavesurfer.current = WaveSurfer.create({
+        container: waveContent.current,
+        waveColor: "#2563EB",
+        progressColor: "#2563EB",
+        cursorWidth: 0,
+        // Disable the cursor
+        barWidth: 2,
+        barGap: 1,
+        barRadius: 2,
+        scrollParent: false,
+        // Prevent scrolling
+        height: waveContent.current.clientHeight // Set height to fit container
+      });
+
+      // Fit the waveform to the container width
+      const resize = () => {
+        if (wavesurfer.current) {
+          const containerWidth = waveContent.current.clientWidth;
+          const duration = wavesurfer.current.getDuration();
+          if (duration > 0) {
+            const newZoom = containerWidth / duration;
+            wavesurfer.current.zoom(newZoom);
+          }
+        }
+      };
+      window.addEventListener("resize", resize);
+      resize();
+      return () => {
+        window.removeEventListener("resize", resize);
+      };
+    }
+  }, []);
+  useEffect(() => {
+    if (wavesurfer.current && audioChunks) {
+      const audioBlob = new Blob(audioChunks, {
+        type: "audio/webm"
+      });
+      const recordedUrl = URL.createObjectURL(audioBlob);
+      wavesurfer.current.load(recordedUrl).then().catch(e => console.error("Error loading audio: ", e));
+      if (!playOnce) {
+        setPlayOnce(true);
+      }
+    } else if (wavesurfer.current && !audioChunks) {
+      // Clear the waveform when audioChunks is null
+      wavesurfer.current.empty();
+    }
+  }, [audioChunks, playOnce]);
+  return /*#__PURE__*/_jsx(Box, {
+    ref: waveContent,
+    style: {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden"
+    }
+  });
+};
+export const AudioWave = SoundWave;

package/dist/Editor/Elements/AI/VoiceToText/index.js

@@ -0,0 +1,184 @@
+import { useState, useEffect, useRef, cloneElement } from "react";
+import PropTypes from "prop-types";
+import STTStyles from "./style";
+import { Grid, IconButton, Box } from "@mui/material";
+import { AudioWave } from "./AudioWave";
+import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function STT(props) {
+  const {
+    otherProps,
+    onSend,
+    setIsRecording
+  } = props;
+  const {
+    services
+  } = otherProps;
+  const classes = STTStyles();
+  const [mediaRecorder, setMediaRecorder] = useState(null);
+  const [audioChunks, setAudioChunks] = useState([]);
+  const [chunkIndex, setChunkIndex] = useState(0);
+  const audioChunksRef = useRef([]);
+  const [transcription, setTranscription] = useState("");
+  const [showPause, setShowPause] = useState(true);
+  const setChunk = event => {
+    if (event.data.size > 0) {
+      setAudioChunks(prev => {
+        const updatedChunks = [...prev, event.data];
+        audioChunksRef.current = updatedChunks; // Update ref manually
+        return updatedChunks;
+      });
+    }
+  };
+  const sendChunck = async (isLast = false) => {
+    if (audioChunksRef.current.length > 0) {
+      const audioBlob = new Blob(audioChunksRef.current, {
+        type: "audio/webm"
+      });
+      const formData = new FormData();
+      formData.append("audio", audioBlob, `audio_chunk_${chunkIndex}.wav`);
+      formData.append("chunkIndex", chunkIndex); // Send chunk index to the backend
+      if (isLast) {
+        formData.append("isLastChunk", true); // Send chunk index to the backend
+      } else {
+        formData.append("isLastChunk", false);
+        setChunkIndex(prevIndex => prevIndex + 1);
+      }
+      const result = await services("speechToText", {
+        formData
+      });
+      setTranscription(result?.data || "");
+      await sendChunck();
+    }
+  };
+  const handleStopRecording = () => {
+    sendChunck(true);
+    setAudioChunks([]);
+  };
+  const startRecording = async () => {
+    setTranscription("");
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: true
+    });
+    const recorder = new MediaRecorder(stream);
+    setMediaRecorder(recorder);
+    recorder.ondataavailable = setChunk;
+    recorder.onstop = handleStopRecording;
+    recorder.start(100);
+    setIsRecording(true);
+    setTimeout(() => {
+      sendChunck();
+    }, 2000);
+  };
+  useEffect(() => {
+    startRecording();
+  }, []);
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+
+      // Stop all tracks to release the microphone
+      if (mediaRecorder.stream) {
+        mediaRecorder.stream.getTracks().forEach(track => track.stop());
+      }
+      setChunkIndex(0);
+      setShowPause(false);
+    }
+  };
+  const sendToInfiniti = async () => {
+    setIsRecording(false);
+    await onSend("", {
+      inputValue: transcription
+    });
+    stopRecording();
+    setShowPause(true);
+  };
+  const closeRecording = () => {
+    setAudioChunks([]);
+    stopRecording();
+    setIsRecording(false);
+    setShowPause(true);
+    setTranscription("");
+  };
+  useEffect(() => {
+    audioChunksRef.current = audioChunks;
+  }, [audioChunks]);
+  const transcriptionText = typeof transcription === "string" && transcription?.replace(/\s+/g, "")?.length; // Remove all whitespace characters like \n \t
+
+  return /*#__PURE__*/_jsxs(Grid, {
+    xs: 12,
+    sx: classes.AudioVizualizerContainer,
+    children: [transcriptionText ? /*#__PURE__*/_jsx(Grid, {
+      xs: 12,
+      sx: classes.TranscriptionContainer,
+      children: /*#__PURE__*/_jsx("pre", {
+        style: {
+          whiteSpace: "pre-wrap",
+          wordWrap: "break-word",
+          fontFamily: "inherit",
+          margin: 0
+        },
+        children: transcription
+      })
+    }) : null, /*#__PURE__*/_jsxs(Grid, {
+      xs: 12,
+      sx: classes.AudioVizualizerContent,
+      children: [/*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: closeRecording,
+          children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: classes.AudioVisualiser,
+        children: /*#__PURE__*/_jsx(AudioWave, {
+          audioChunks: audioChunks
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        children: showPause ? /*#__PURE__*/_jsx(IconButton, {
+          onClick: stopRecording,
+          children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
+        }) : /*#__PURE__*/_jsx(IconButton, {
+          onClick: sendToInfiniti,
+          disabled: !transcriptionText,
+          style: !transcriptionText ? {
+            opacity: 0.5
+          } : {},
+          children: /*#__PURE__*/_jsx(TickBlueCircle, {})
+        })
+      })]
+    })]
+  });
+}
+const withHOC = STT => {
+  const Container = props => {
+    const classes = STTStyles();
+    const {
+      children
+    } = props;
+    const [isRecording, setIsRecording] = useState(false);
+    return /*#__PURE__*/_jsx(Grid, {
+      xs: 12,
+      children: /*#__PURE__*/_jsx(Grid, {
+        className: classes.SttContainer,
+        children: !isRecording ? /*#__PURE__*/_jsx(Grid, {
+          xs: 12,
+          children: /*#__PURE__*/cloneElement(children, {
+            startRecording: () => setIsRecording(true)
+          })
+        }) : /*#__PURE__*/_jsx(STT, {
+          ...props,
+          setIsRecording: setIsRecording
+        })
+      })
+    });
+  };
+  return Container;
+};
+STT.defaultProps = {
+  classes: {}
+};
+STT.propTypes = {
+  classes: PropTypes.object
+};
+export const VoiceToText = withHOC(STT);

package/dist/Editor/Elements/AI/VoiceToText/style.js

@@ -0,0 +1,40 @@
+const styles = () => ({
+  SttContainer: {
+    display: "flex",
+    width: "100%",
+    padding: "12px",
+    zIndex: 1
+  },
+  STTInput: {
+    width: "100%",
+    borderRadius: "8px",
+    "&& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+      borderColor: "#2563EB"
+    },
+    "&& .MuiOutlinedInput-root": {
+      background: "rgba(252, 250, 255, 1)"
+    }
+  },
+  AudioVizualizerContainer: {
+    width: "100%",
+    display: "flex",
+    background: "rgba(252, 250, 255, 1)",
+    borderRadius: "8px",
+    border: "1px solid #2563EB",
+    alignItems: "center",
+    flexWrap: "wrap"
+  },
+  AudioVizualizerContent: {
+    display: "flex",
+    height: "50px",
+    width: "100%"
+  },
+  AudioVisualiser: {
+    flexGrow: "1",
+    height: "100%"
+  },
+  TranscriptionContainer: {
+    padding: "12px"
+  }
+});
+export default styles;

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

@@ -47,10 +47,12 @@ export const newContentOptions = [{
   groupLabel: "",
   options: [
   // improveWriting,
-  ...commonOptions.map(o => ({
-    ...o,
+  {
+    label: "Done",
+    value: "done",
+    Icon: CheckIcon,
     replace: true
-  })), {
+  }, ...commonOptions, {
     label: "Close",
     value: "close",
     Icon: CloseIcon,

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -160,7 +160,7 @@ const Accordion = props => {
     children: [/*#__PURE__*/_jsxs("div", {
       className: "accordion-title",
       style: {
-        background: bgColor
+        backgroundColor: bgColor
       },
       onClick: onToggle,
       children: [/*#__PURE__*/_jsx(Box, {