@flozy/editor 4.1.8 → 4.2.0

package/dist/Editor/ChatEditor.js

@@ -46,7 +46,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [deboundedValue] = useDebounce(value, 500);
   const editor = useMemo(() => {
     return withCommon(createEditor(), {
-      needLayout
+      needLayout,
+      isChatEditor: true
     });
   }, []);
   const isReadOnly = readOnly === "readonly";

package/dist/Editor/CommonEditor.js

@@ -104,7 +104,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     w: null,
     h: null
   });
-  const [isScrolling, setIsScrolling] = useState(false);
   const [isTextSelected, setIsTextSelected] = useState(false);
   const [breakpoint, setBreakpoint] = useState("");
   const [size] = useWindowResize();
@@ -376,10 +375,10 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundPosition: "-19px -19px"
   } : {};
   const handleScrollStop = useDebouncedCallback(() => {
-    setIsScrolling(false);
+    editorWrapper?.current?.classList.add("hideScroll");
   }, 200);
   const handleScroll = () => {
-    setIsScrolling(true);
+    editorWrapper?.current?.classList.remove("hideScroll");
     handleScrollStop();
   };
   const hasTopBanner = () => {
@@ -467,11 +466,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsxs(Overlay, {
               children: [/*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content scrollSmooth`,
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} scrollable-content scrollSmooth`,
                 sx: classes.slateWrapper,
-                id: "slate-wrapper-scroll-container"
-                // style={editorWrapperStyle}
-                ,
+                id: "slate-wrapper-scroll-container",
                 ref: editorWrapper,
                 onClick: e => {
                   handleInsertLastElement(e, editor);

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -117,6 +117,9 @@ const useFreeGridStyles = ({
         },
         "& .fgi_type_button": {
           height: "100%",
+          "& .moreBtnShow": {
+            display: "none"
+          },
           "& .editor-btn-wrapper": {
             height: "100%",
             "& .editor-btn-wrapper-inner": {

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

@@ -140,7 +140,6 @@ export function onDropItem(props, parentClass) {
     // Update grid area
     const gridArea = `${row} / 1 / ${row + 1} / 2`;
     const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
-    console.log(breakpoint, path);
     Transforms.setNodes(editor, {
       [`gridArea${appenBp}`]: gridArea,
       [`left${appenBp}`]: cCalx,

package/dist/Editor/common/RnD/VirtualElement/index.js

@@ -19,7 +19,6 @@ const VirtualElement = props => {
     if (virtualRef?.current) {
       setTimeout(() => {
         const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
-        console.log(allData);
         // it should trigger by auto alignment or on clicking mobile view change
         updateAutoProps(editor, allData, "xs");
       }, 0);

package/dist/Editor/common/RnD/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Node, Path } from "slate";
+import { Editor, Node, Path, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
 import { Box } from "@mui/material";
 import { Rnd } from "react-rnd";
@@ -163,6 +163,12 @@ const RnD = props => {
         e.preventDefault();
         e.stopPropagation();
       }
+
+      // to prevent auto scroll to top
+      // when no editor.selection
+      if (!editor.selection) {
+        Transforms.select(editor, Editor.end(editor, []));
+      }
       switch (e.detail) {
         case 1:
           if (!enable) {

package/dist/Editor/hooks/useMentions.js

@@ -13,7 +13,7 @@ const getStartEnd = ({
     // Get start and end, modify it as we move along.
     let [start, end] = Range.edges(selection);
 
-    // Move backwards
+    // Move backwards to find the start of the word
     while (true) {
       const before = Editor.before(editor, start, {
         unit: "character"
@@ -22,16 +22,15 @@ const getStartEnd = ({
         anchor: before,
         focus: start
       });
-      if (before && wordBefore && SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
-        start = before;
-        if (start.offset === 0) {
-          // Means we've wrapped to beginning of another block
+      if (before) {
+        if (wordBefore.trim() === "") {
+          break;
+        } else if (SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
+          start = before;
+        } else {
+          start = before;
           break;
         }
-      } else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
-        // reached the character end
-        start = before;
-        break;
       } else {
         break;
       }
@@ -41,11 +40,38 @@ const getStartEnd = ({
       focus: end
     };
     const word = Editor.string(editor, wordRange);
+    const firstChar = word[0];
+
+    // Handle the commands
+    if (firstChar === '@') {
+      // Only trigger @ if preceded by a space
+      const isPrecededBySpace = Editor.string(editor, {
+        anchor: {
+          path: start.path,
+          offset: start.offset - 1
+        },
+        focus: start
+      }).trim() === "";
+      if (isPrecededBySpace) {
+        return {
+          word,
+          search: word.substring(1),
+          target: wordRange,
+          type: TYPES[firstChar]
+        };
+      }
+    } else if (firstChar === '/') {
+      return {
+        word,
+        search: word.substring(1),
+        target: wordRange,
+        type: TYPES[firstChar]
+      };
+    }
     return {
-      word,
-      search: word?.substring(1, word.length),
-      target: wordRange,
-      type: TYPES[word[0]]
+      word: "",
+      wordRange: null,
+      type: null
     };
   } catch (err) {
     return {

package/dist/Editor/hooks/withCommon.js

@@ -9,7 +9,12 @@ import withLayout from "../plugins/withLayout";
 import withHtml from "../plugins/withHTML";
 import withErrorHandling from "./withErrorHandling";
 import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
-const withCommon = (props, rest = {}) => {
-  return rest.needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
+const withCommon = (props, {
+  needLayout = false,
+  isChatEditor = false
+}) => {
+  const editor = needLayout ? withErrorHandling(withHtml(withEquation(withLayout(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))))) : withErrorHandling(withHtml(withEquation(withHistory(withEmbeds(withTables(withLinks(withMentions(withCustomDeleteBackward(withReact(props))))))))));
+  editor.isChatEditor = isChatEditor;
+  return editor;
 };
 export default withCommon;

package/dist/Editor/plugins/withHTML.js

@@ -101,6 +101,9 @@ const withHtml = editor => {
     return element.type === "image" ? true : isVoid(element);
   };
   editor.insertData = data => {
+    if (editor.isChatEditor) {
+      return;
+    }
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);

package/dist/Editor/utils/chatEditor/SlateUtilityFunctions.js

@@ -365,6 +365,6 @@ export const getBlock = props => {
         ...props
       });
     default:
-      return;
+      return null;
   }
 };

package/package.json

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