@flozy/editor 4.7.2 → 4.7.4

package/dist/Editor/CommonEditor.js

@@ -534,7 +534,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

@@ -559,6 +559,7 @@ blockquote {
 
   .embed {
     justify-content: center;
+    width: 100%;
   }
 
   .embed img {

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

@@ -40,11 +40,9 @@ const scrollToAIInput = editor => {
   }, 200);
 };
 const insertText = (editor, text, options) => {
-  if (text?.length) {
-    const parsed = new DOMParser().parseFromString(text, "text/html");
-    const fragment = deserialize(parsed.body);
-    Transforms.insertFragment(editor, fragment, 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);
@@ -201,95 +199,81 @@ function PopoverAIInput({
   useEffect(() => {
     selectedEleRef.current = selectedElement;
   }, [selectedElement]);
-  const framePayload = (type, option) => {
-    let payload = {
+  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 {
+        insertText(editor, generatedText);
+      }
+      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;
     }
-    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}`;
+      payload.textData = generatedText || window.getSelection().toString();
     }
-    const tryAgain = type === "try_again";
-    if (tryAgain) {
-      // resetting previous payload
-      const prevPayload = selectedOption?.payload || {};
-      payload = prevPayload;
+    const result = await services("infinityAI", payload);
+    setLoading(false);
+    setInputValue("");
+    let {
+      data: text
+    } = result || {};
+    if (!text) {
+      onClickOutside();
+      return;
     }
-    return payload;
-  };
-  const onSend = async (type, option) => {
-    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;
-      }
-      setLoading(true);
-      const payload = framePayload(type, option);
-      setSelectedOption({
-        ...option,
-        payload
-      });
-      const result = await services("infinityAI", payload);
-      setLoading(false);
-      setInputValue("");
-      let {
-        data: text
-      } = result || {};
-      if (!text) {
-        onClickOutside();
-        return;
-      }
-
-      // if (!option.replace) {
+    if (!option.replace) {
       if (type === "continue_writing") {
         setGeneratedText(generatedText + text);
       } else {
         setGeneratedText(text);
       }
-
-      //   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);
-
-      // scrollToAIInput();
-    } catch (err) {
-      console.error("Error on sending/inserting text", err);
+      return;
     }
+    insertText(editor, text);
+
+    // scrollToAIInput();
   };
+
   const onInputChange = e => {
     setInputValue(e.target.value);
   };

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

@@ -102,7 +102,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/Embed/Embed.js

@@ -58,8 +58,15 @@ const Embed = ({
       url: img
     };
     setFormData(fd);
+    let extProps = {};
+    if (format === "video") {
+      extProps = {
+        aspectRatio: "16 / 9"
+      };
+    }
     handleFormSubmit({
-      ...fd
+      ...fd,
+      ...extProps
     });
   };
   return /*#__PURE__*/_jsxs(_Fragment, {

package/dist/Editor/Elements/Embed/Video.js

@@ -209,6 +209,7 @@ const Video = ({
   }, theme);
   return /*#__PURE__*/_jsxs(Box, {
     ...attributes,
+    ...element.attr,
     className: "embed has-hover video dpath",
     sx: {
       display: {
@@ -222,7 +223,6 @@ const Video = ({
       justifyContent: horizantal,
       alignContent: vertical
     },
-    ...element.attr,
     contentEditable: false,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,

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

@@ -24,6 +24,9 @@ const SimpleTextStyle = ({
         color: invertColor(pageColor)
       }
     },
+    "&.embed": {
+      width: "100%"
+    },
     "& .freegrid-section": {
       "&.enable-1:before": {
         content: "' '",

package/dist/Editor/Styles/EditorStyles.js

@@ -286,7 +286,7 @@ const editorStyles = ({
       }
     },
     "& ::selection": {
-      color: "inherit",
+      color: "black",
       background: "#EAEBFE"
     }
   },

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -13,7 +13,6 @@ import PopperHeader from "../PopperHeader";
 import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
-import InfinityAITool from "./InfinityAITool";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -27,8 +26,7 @@ const MiniTextFormat = props => {
   const {
     classes,
     editor,
-    closeMainPopup,
-    customProps
+    closeMainPopup
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -50,7 +48,7 @@ const MiniTextFormat = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs("div", {
         className: "toolWrapper",
-        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
+        children: [/*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
           closeMainPopup: closeMainPopup

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Link.js

@@ -5,6 +5,7 @@ import LinkSettings from "../../../LinkSettings";
 import { insertLink, removeLink } from "../../../../utils/link";
 import { getBlockActive, isBlockActive, upateBlockActive } from "../../../../utils/SlateUtilityFunctions";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const Link = props => {
   const {
     onClose,
@@ -138,18 +139,20 @@ const Link = props => {
       console.log(err);
     }
   };
-  return /*#__PURE__*/_jsx(LinkSettings, {
-    handleClose: onClose,
-    onSave: d => {
-      const upData = getTransformedData(d);
-      onSave({
-        ...upData
-      });
-      onClose();
-    },
-    ...(blockProps || {}),
-    customProps: customProps,
-    theme: theme
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: blockProps ? /*#__PURE__*/_jsx(LinkSettings, {
+      handleClose: onClose,
+      onSave: d => {
+        const upData = getTransformedData(d);
+        onSave({
+          ...upData
+        });
+        onClose();
+      },
+      ...(blockProps || {}),
+      customProps: customProps,
+      theme: theme
+    }) : null
   });
 };
 export default Link;

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/SaveAsTemplate.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Node } from "slate";
 import { Dialog, DialogContent, DialogTitle, IconButton } from "@mui/material";
 import SaveAsTemplate from "../../../StyleBuilder/fieldTypes/saveAsTemplate";
 import { CloseIcon } from "../../../iconslist";

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -12,7 +12,7 @@ const Settings = props => {
     childType,
     open,
     anchorEl,
-    // placement,
+    placement,
     onClose,
     editor,
     classes,

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -123,8 +123,8 @@ export function onDropItem(props, parentClass) {
       dragOver,
       parentPath,
       path,
-      // diffX,
-      // x: cx,
+      diffX,
+      x: cx,
       breakpoint
       // calX,
     } = props;
@@ -134,9 +134,7 @@ export function onDropItem(props, parentClass) {
     let newPath = [];
     newPath = moveTo;
     const cCalx = isContainerElement(editor, moveTo, props);
-    // const posX = parseInt(
-    //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
-    // );
+    const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();

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

@@ -107,7 +107,9 @@ const ELEMENTS_LIST = [{
   icon: /*#__PURE__*/_jsx(Icon, {
     icon: "video"
   }),
-  onInsert: editor => insertDefaultEmbed(editor, "video")
+  onInsert: editor => insertDefaultEmbed(editor, "video", "", {
+    aspectRatio: "16 / 9"
+  })
 }, {
   name: "Embed",
   desc: "",

package/dist/Editor/common/StyleBuilder/embedVideoStyle.js

@@ -16,14 +16,14 @@ const embedVideoStyle = [{
     key: "aspectRatio",
     type: "textOptions",
     options: [{
-      text: "Cover (Default)",
-      value: ""
-    }, {
-      text: "16:9",
+      text: "16:9 (Default)",
       value: "16 / 9"
     }, {
       text: "9:16",
       value: "9 / 16"
+    }, {
+      text: "Custom",
+      value: ""
     }],
     renderOption: option => {
       return /*#__PURE__*/_jsx("span", {

package/dist/Editor/utils/Decorators/index.js

@@ -1,6 +1,5 @@
-import highlightSelection from "./highlightSelection";
 import link from "./link";
-const decorators = (d, editor) => {
-  return [...link(d, editor), ...highlightSelection(d, editor)];
+const decorators = d => {
+  return [...link(d)];
 };
 export default decorators;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -242,15 +242,6 @@ export const getMarked = (leaf, children, theme) => {
       })
     });
   }
-  if (leaf.highlight) {
-    children = /*#__PURE__*/_jsx("span", {
-      style: {
-        background: "#EAEBFE",
-        color: "inherit"
-      },
-      children: children
-    });
-  }
   if (leaf.decoration === "link") {
     children = /*#__PURE__*/_jsx("a", {
       style: {

package/dist/Editor/utils/embed.js

@@ -1,11 +1,12 @@
 import { Transforms } from "slate";
 import insertNewLine from "./insertNewLine";
-export const insertDefaultEmbed = (editor, type, defaultURL = "") => {
+export const insertDefaultEmbed = (editor, type, defaultURL = "", extProps = {}) => {
   try {
     const url = defaultURL ? defaultURL : type === "image" ? "" : "";
     insertEmbed(editor, {
       url,
-      images: []
+      images: [],
+      ...extProps
     }, type);
   } catch (err) {
     console.log(err);
@@ -14,7 +15,8 @@ export const insertDefaultEmbed = (editor, type, defaultURL = "") => {
 export const createEmbedNode = (type, {
   url,
   alt,
-  images
+  images,
+  ...rest
 }) => ({
   type,
   alt,
@@ -23,6 +25,7 @@ export const createEmbedNode = (type, {
   children: [{
     text: " "
   }],
+  ...(rest || {}),
   size: {
     xs: {
       widthInPercent: "100",

package/package.json

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

package/dist/Editor/utils/Decorators/highlightSelection.js

@@ -1,22 +0,0 @@
-import { Editor, Range, Text } from "slate";
-const highlightSelection = ([node, path], editor = {}) => {
-  if (Text.isText(node) && editor?.selection) {
-    const intersection = Range.intersection(editor.selection, Editor.range(editor, path));
-    if (!intersection) {
-      return [];
-    }
-
-    // Avoid applying highlight if the range only includes line breaks
-    const rangeText = Editor.string(editor, intersection);
-    if (!rangeText.trim()) {
-      return [];
-    }
-    const range = {
-      highlight: true,
-      ...intersection
-    };
-    return [range];
-  }
-  return [];
-};
-export default highlightSelection;