@flozy/editor 4.7.8 → 4.7.9

package/dist/Editor/CommonEditor.js

@@ -534,7 +534,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
-                        decorate: decorators,
+                        decorate: d => decorators(d, editor),
                         onKeyDown: onKeyDown,
                         onSelect: () => handleCursorScroll(editorWrapper.current)
                       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
@@ -584,8 +584,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
             handleCodeToText: handleCodeToText
-          }), /*#__PURE__*/_jsx(FontLoader, {
-            ...props
           })]
         }, id)
       })

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

@@ -90,6 +90,7 @@ function AIInput({
     children: [/*#__PURE__*/_jsxs(Box, {
       component: "div",
       sx: classes.aiContainer,
+      ref: refs[0],
       children: [generatedText ? /*#__PURE__*/_jsx(Typography, {
         sx: classes.generatedText,
         style: {
@@ -104,7 +105,6 @@ function AIInput({
         onSubmit: e => {
           e.preventDefault();
         },
-        ref: refs[0],
         children: [/*#__PURE__*/_jsx("div", {
           className: "icon-container icons-elements",
           ref: inputWrapperRef,
@@ -116,22 +116,21 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: fromToolBar ? "" : "Ask AI to write anything...",
+          placeholder: "Ask AI to write anything...",
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
-          disabled: fromToolBar,
           onKeyDown: event => {
             if (event.key === "Enter" && !event.shiftKey) {
               event.preventDefault();
               handleSendBtnClick();
             }
           }
-        }), fromToolBar ? null : /*#__PURE__*/_jsxs(Box, {
+        }), /*#__PURE__*/_jsxs(Box, {
           component: "div",
           style: classes.sendIconContainer,
           className: "icons-elements",
-          children: [isMobile ? null : /*#__PURE__*/_jsx(IconButton, {
+          children: [/*#__PURE__*/_jsx(IconButton, {
             disabled: loading,
             onClick: () => startRecording(),
             children: /*#__PURE__*/_jsx(ChatMicIcon, {})

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);
@@ -199,81 +201,95 @@ function PopoverAIInput({
   useEffect(() => {
     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 {
-        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 = {
+  const framePayload = (type, option) => {
+    let 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 = generatedText || window.getSelection().toString();
+      payload.textData = textData;
+    } else if (selectedText && Number(payload.mode) === 0) {
+      payload.query = `${selectedText} \n ${payload.query}`;
     }
-    const result = await services("infinityAI", payload);
-    setLoading(false);
-    setInputValue("");
-    let {
-      data: text
-    } = result || {};
-    if (!text) {
-      onClickOutside();
-      return;
+    const tryAgain = type === "try_again";
+    if (tryAgain) {
+      // resetting previous payload
+      const prevPayload = selectedOption?.payload || {};
+      payload = prevPayload;
     }
-    if (!option.replace) {
+    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 (type === "continue_writing") {
         setGeneratedText(generatedText + text);
       } else {
         setGeneratedText(text);
       }
-      return;
-    }
-    insertText(editor, text);
 
-    // scrollToAIInput();
-  };
+      //   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);
+    }
+  };
   const onInputChange = e => {
     setInputValue(e.target.value);
   };

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

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

@@ -12,13 +12,19 @@ const EmbedPopup = props => {
     format,
     onDelete
   } = props;
+  const videoStyles = embedVideoStyle?.filter(f => {
+    if (f?.value === "AspectRatio" && format !== "video") {
+      return false;
+    }
+    return true;
+  });
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: format === "image" ? "Image" : format === "video" ? "video" : format === "calendly" ? "calendly" : "Embed",
     type: format === "image" ? "embedImageStyle" : "embedVideoStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: format === "image" ? embedImageStyle : embedVideoStyle,
+    renderTabs: format === "image" ? embedImageStyle : videoStyles,
     customProps: customProps,
     onDelete: onDelete
   });

package/dist/Editor/Styles/EditorStyles.js

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

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

@@ -13,6 +13,7 @@ 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 = {
@@ -49,7 +50,7 @@ const MiniTextFormat = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs("div", {
         className: "toolWrapper",
-        children: [/*#__PURE__*/_jsx(SelectTypography, {
+        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
           closeMainPopup: closeMainPopup

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

@@ -1,5 +1,4 @@
 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,7 +134,9 @@ 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/StyleBuilder/embedVideoStyle.js

@@ -9,7 +9,7 @@ const embedVideoStyle = [{
   }]
 }, {
   tab: "Aspect Ratio",
-  value: "Aspect Ratio",
+  value: "AspectRatio",
   hideOnFGS: true,
   fields: [{
     label: "Aspect Ratio",

package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js

@@ -118,14 +118,14 @@ const SaveAsTemplate = props => {
             children: "Section"
           })
         }), /*#__PURE__*/_jsx(MenuItem, {
-          value: "Templates",
+          value: "Template",
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             color: "primary",
             sx: {
               fontSize: "14px"
             },
-            children: "Templates"
+            children: "Template"
           })
         })]
       })

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -14,6 +14,19 @@ const withCustomDeleteBackward = editor => {
       selection
     } = editor;
     if (selection) {
+      // get the current node
+      const [freeGridItemNode] = Editor.nodes(editor, {
+        match: n => n.type === "freegridItem" // Adjust based on your list item type
+      });
+
+      // if it is freegrid
+      if (freeGridItemNode && freeGridItemNode[0]) {
+        const hasText = Node.string(freeGridItemNode[0]);
+        if (!hasText) {
+          return;
+        }
+      }
+
       // Check if current node is a list item and is the last one
       const [node] = Editor.nodes(editor, {
         match: n => n.type === "list-item" // Adjust based on your list item type

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

@@ -0,0 +1,22 @@
+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;

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

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

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -242,6 +242,15 @@ 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/helper.js

@@ -496,7 +496,7 @@ export const isFreeGrid = (nodes, types = ["freegrid", "freegridItem", "freegrid
     }
     return false;
   } catch (err) {
-    console.log('isFreeGrid error:', err);
+    console.log("isFreeGrid error:", err);
     return false;
   }
 };

package/package.json

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