@flozy/editor 4.7.3 → 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, {
@@ -584,6 +584,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
             handleCodeToText: handleCodeToText
+          }), /*#__PURE__*/_jsx(FontLoader, {
+            ...props
           })]
         }, id)
       })

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/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/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/plugins/withCustomDeleteBackward.js

@@ -1,16 +1,4 @@
 import { Editor, Node, Path, Transforms } from "slate";
-const getCurrentNodeType = editor => {
-  if (editor.selection) {
-    // Get the current node at the selection
-    const [node] = Editor.nodes(editor, {
-      match: n => Editor.isBlock(editor, n)
-    });
-
-    // Return the node's type if it exists
-    return node ? node[0].type : null;
-  }
-  return null;
-};
 const isNodeTextEmpty = node => {
   const nodeText = Node.string(node);
   return nodeText.trim() === "";
@@ -26,19 +14,6 @@ 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/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/helper.js

@@ -483,7 +483,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.3",
+  "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;