@flozy/editor 4.4.8 → 4.4.9

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

@@ -17,6 +17,7 @@ import VirtualElement from "./VirtualElement";
 import { ItemTypes } from "./ElementSettings/settingsConstants";
 import { focusSelection, clearSelection } from "../../helper";
 import { selectText } from "../../utils/helper";
+import { removeSign } from "./ElementSettings/OtherSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -155,6 +156,7 @@ const RnD = props => {
       switch (e.detail) {
         case 1:
           if (!enable) {
+            // focusSelection(editor, { path });
             setSelectedElement({
               path: str_path,
               enable: 1,
@@ -162,7 +164,6 @@ const RnD = props => {
               anchorEl: rndRef?.current
             });
           }
-          // ReactEditor.focus(editor);
           break;
         case 2:
           focusSelection(editor, {
@@ -225,6 +226,13 @@ const RnD = props => {
             selectedActionPath: path
           });
           break;
+        case "signatureSettings":
+          setSelectedElement({
+            ...selectedElementProps,
+            selectedAction: actionType,
+            selectedActionPath: path
+          });
+          break;
         case "imageFrame":
           setSelectedElement({
             ...selectedElementProps,
@@ -233,6 +241,9 @@ const RnD = props => {
             selectedActionPath: path
           });
           break;
+        case "removeSign":
+          removeSign(editor, sp);
+          break;
         case "saveAsTemplate":
           const curPath = type === "parent" ? Path.parent(path) : path;
           const currentNode = Node.get(editor, curPath);
@@ -270,7 +281,9 @@ const RnD = props => {
         dragOver: null
       }, null);
     }
+    // focusSelection(editor, { path: updated_at });
   };
+
   const onDragStart = e => {
     e.preventDefault();
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
@@ -299,7 +312,7 @@ const RnD = props => {
           width,
           height
         },
-        isDragging: 1,
+        isDragging: true,
         parentPath: getParentSectionPath({
           ref
         }, ".freegrid-container-parent")
@@ -311,15 +324,13 @@ const RnD = props => {
   };
   const onDrag = (e, d) => {
     e.preventDefault();
-    e.stopPropagation();
     const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
-    console.log(lines);
     setAbsPosition({
       ...absPosition,
       "--zIndex": 2000
     });
     updateDragging({
-      isDragging: 2,
+      isDragging: true,
       position: {
         ...dragging.position,
         x: e.clientX,
@@ -337,7 +348,7 @@ const RnD = props => {
   const onDragStop = (e, d) => {
     e.preventDefault();
     e.stopPropagation();
-    if (dragging?.isDragging === 2 && dragging?.position?.strXY) {
+    if (dragging?.isDragging && dragging?.position?.strXY) {
       d.x = e.x;
       d.y = e.y;
       d.offsetX = e.offsetX;
@@ -370,17 +381,6 @@ const RnD = props => {
       setAbsPosition({
         ...ud
       });
-    } else {
-      // invalid drags
-      // found in dev mode and in safari browser
-      updateDragging({
-        isDragging: 0,
-        position: {},
-        lines: [],
-        active: false,
-        id: null
-      });
-      setPosition({});
     }
   };
   const onResizeStop = (e, direction, ref, d, position) => {

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

@@ -104,6 +104,13 @@ const Section = props => {
   };
   const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
   const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
+  let tempProps = {};
+  if (element?.type === "temp") {
+    tempProps = {
+      "--left": `${element?.left}px`,
+      "--top": `${element?.top}px`
+    };
+  }
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
@@ -122,7 +129,10 @@ const Section = props => {
   }, theme);
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
-    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
+    className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
+    style: {
+      ...tempProps
+    },
     sx: {
       ...classes.root,
       background: sectionBgColor,

package/dist/Editor/common/Section/styles.js

@@ -52,6 +52,20 @@ const SectionStyle = theme => ({
       [theme.breakpoints.between("xs", "md")]: {
         maxWidth: `320px !important`
       }
+    },
+    "&.is-temp": {
+      position: "fixed",
+      background: "red",
+      padding: "12px",
+      width: "10px",
+      height: "10px",
+      // left: 0,
+      // top: 0,
+      margin: "auto",
+      left: "var(--left)",
+      top: "var(--top)",
+      zIndex: 1000,
+      pointerEvents: "none"
     }
   }
 });

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

@@ -3,6 +3,6 @@ const mentions = props => {
     CHARACTERS,
     search
   } = props;
-  return CHARACTERS.filter(c => c?.name?.toLowerCase()?.startsWith(search?.toLowerCase())).slice(0, 10);
+  return CHARACTERS.filter(c => c.name.toLowerCase().startsWith(search?.toLowerCase())).slice(0, 10);
 };
 export default mentions;

package/dist/Editor/helper/RnD/focusNode.js

@@ -0,0 +1,70 @@
+import { Editor, Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+const TEMP_NODE_ID = "temp-focus-node";
+const ensureTemporaryFocusNode = (editor, selectedDOM) => {
+  // Check if the temporary focus node already exists
+  const {
+    left,
+    top
+  } = selectedDOM?.getBoundingClientRect();
+  const [tempNodeEntry] = Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  });
+  if (!tempNodeEntry) {
+    // If not, insert the temporary focus node at the start of the editor
+    Transforms.insertNodes(editor, {
+      type: "temp",
+      temp: TEMP_NODE_ID,
+      children: [{
+        text: ""
+      }],
+      left,
+      top
+    }, {
+      at: [editor.children.length]
+    });
+  } else {
+    Transforms.setNodes(editor, {
+      type: "temp",
+      temp: TEMP_NODE_ID,
+      children: [{
+        text: ""
+      }],
+      left,
+      top
+    }, {
+      at: tempNodeEntry[1]
+    });
+  }
+};
+export const focusUsingTemporaryNode = (editor, selectedDOM) => {
+  // de-select and select
+  Transforms.deselect(editor);
+
+  // Ensure the temporary node exists
+  ensureTemporaryFocusNode(editor, selectedDOM);
+
+  // Select the temporary node without causing scroll
+  const [tempNodeEntry] = Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  });
+  if (tempNodeEntry) {
+    const [, path] = tempNodeEntry;
+    Transforms.select(editor, path); // Move selection to the temp node
+  }
+
+  ReactEditor.focus(editor);
+};
+export const cleanupTemporaryFocusNode = editor => {
+  // Remove the temporary focus node if it exists
+  for (const [, path] of Editor.nodes(editor, {
+    at: [],
+    match: n => n.temp === TEMP_NODE_ID
+  })) {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  }
+};

package/dist/Editor/helper/index.js

@@ -4,6 +4,7 @@ import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
 import { getQueryStrings } from "../utils/SlateUtilityFunctions";
 import { Node } from "slate";
+// import { focusUsingTemporaryNode } from "./RnD/focusNode";
 const HIDE_PLACHOLDERS = ["grid", "grid-item", "table"];
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar", "mini-tool-wrpr-ei", "element-selector", "element-selector-ctrl"];
 const RND_ITEMS = ["freegridItem", "freegridBox"];
@@ -254,8 +255,9 @@ export const focusSelection = (editor, {
     const selectedDOM = ReactEditor.toDOMNode(editor, selectedNode);
     selectedDOM.scrollIntoView({
       behavior: "smooth",
-      block: "center"
+      block: "nearest"
     });
+    // focusUsingTemporaryNode(editor, selectedDOM);
   } catch (err) {
     console.log(err);
   }
@@ -302,7 +304,7 @@ export const getTextColor = (color = "") => {
     WebkitTextFillColor: "transparent !important",
     color: "transparent !important",
     caretColor: "black",
-    '& span': {
+    "& span": {
       color: "transparent !important"
     }
   } : {

package/dist/Editor/hooks/useBreakpoints.js

@@ -1,6 +1,6 @@
 import { useMediaQuery } from "@mui/material";
 export const STIMULATOR_MOCK = {
-  xs: "@media (min-width: 1200px) and (max-width: 7680px)"
+  xs: "@media (min-width: 1200px) and (max-width: 1980px)"
 };
 export const isStimulator = () => {
   try {

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 to find the start of the word
+    // Move backwards
     while (true) {
       const before = Editor.before(editor, start, {
         unit: "character"
@@ -22,15 +22,16 @@ const getStartEnd = ({
         anchor: before,
         focus: start
       });
-      if (before) {
-        if (wordBefore.trim() === "") {
-          break;
-        } else if (SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
-          start = before;
-        } else {
-          start = before;
+      if (before && wordBefore && SHORTHAND_CMDS.indexOf(wordBefore) < 0) {
+        start = before;
+        if (start.offset === 0) {
+          // Means we've wrapped to beginning of another block
           break;
         }
+      } else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
+        // reached the character end
+        start = before;
+        break;
       } else {
         break;
       }
@@ -40,38 +41,11 @@ 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: "",
-      wordRange: null,
-      type: null
+      word,
+      search: word?.substring(1, word.length),
+      target: wordRange,
+      type: TYPES[word[0]]
     };
   } catch (err) {
     return {

package/dist/Editor/hooks/withCommon.js

@@ -9,12 +9,7 @@ import withLayout from "../plugins/withLayout";
 import withHtml from "../plugins/withHTML";
 import withErrorHandling from "./withErrorHandling";
 import withCustomDeleteBackward from "../plugins/withCustomDeleteBackward";
-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;
+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))))))))));
 };
 export default withCommon;

package/dist/Editor/plugins/withHTML.js

@@ -114,23 +114,6 @@ const withHtml = editor => {
         const defaultInsert = loopChildren(decoded, true);
         if (defaultInsert) {
           insertData(data);
-          // } else if (editor.isChatEditor) {
-          //   // Only convert table to paragraphs if in chat editor mode
-          //   const paragraphs = decoded.map(row =>
-          //     row.children.map(cell =>
-          //       cell.children.map(paragraph =>
-          //         paragraph.children.map(textNode => textNode.text).join('')
-          //       ).join(' ')
-          //     ).join(' ')
-          //   ).join('\n'); // Joining with a newline for separate paragraphs
-
-          //   // Insert text as paragraphs
-          //   const textNodes = paragraphs.split('\n').map(text => ({
-          //     type: 'paragraph',
-          //     children: [{ text }]
-          //   }));
-
-          //   Transforms.insertNodes(editor, textNodes);
         } else {
           // do not paste table, grid inside table cell
           // only plain text for internal paste
@@ -144,9 +127,6 @@ const withHtml = editor => {
       const parsed = new DOMParser().parseFromString(html, "text/html");
       const isGoogleSheet = parsed.body.querySelector("google-sheets-html-origin");
       if (isGoogleSheet) {
-        if (editor.isChatEditor) {
-          return;
-        }
         const table = parsed.body.querySelector("table");
         const colGrp = table.querySelector("colgroup");
         if (colGrp) {
@@ -158,15 +138,6 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      let is_img_table = false;
-      formattedFragment.map(f => {
-        if (f.type === 'image' || f?.type?.includes('table')) {
-          is_img_table = true;
-        }
-      });
-      if (editor.isChatEditor && is_img_table) {
-        return;
-      }
       handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
       return;
     } else {

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

@@ -0,0 +1,16 @@
+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 == null) {
+      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

@@ -232,6 +232,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: {
@@ -529,6 +538,15 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Code, {
         ...props
       });
+    // RnD Focus Node
+    case "temp":
+      return /*#__PURE__*/_jsx("span", {
+        ...attributes,
+        ...element.attr,
+        contentEditable: false,
+        className: "temp-focus-node",
+        children: children
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

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

@@ -1,6 +1,9 @@
 import { Editor, Transforms, Element as SlateElement } from "slate";
 import { Box } from "@mui/material";
 import { fontFamilyMap, sizeMap } from "../font";
+import Table from "../../Elements/Table/Table";
+import TableRow from "../../Elements/Table/TableRow";
+import TableCell from "../../Elements/Table/TableCell";
 import Mentions from "../../Elements/Mentions/Mentions";
 import CheckList from "../../Elements/List/CheckList";
 import { isEmptyTextNode } from "../../helper";
@@ -337,11 +340,31 @@ export const getBlock = props => {
         ...props,
         isEmpty: isEmpty
       });
+    case "table":
+      return /*#__PURE__*/_jsx(Table, {
+        ...props
+      });
+    case "table-head":
+      return /*#__PURE__*/_jsx("thead", {
+        children: children
+      });
+    case "table-body":
+      return /*#__PURE__*/_jsx("tbody", {
+        children: children
+      });
+    case "table-row":
+      return /*#__PURE__*/_jsx(TableRow, {
+        ...props
+      });
+    case "table-cell":
+      return /*#__PURE__*/_jsx(TableCell, {
+        ...props
+      });
     case "mention":
       return /*#__PURE__*/_jsx(Mentions, {
         ...props
       });
     default:
-      return null;
+      return;
   }
 };

package/dist/Editor/utils/customHooks/useResize.js

@@ -10,7 +10,7 @@ const useResize = ({
   const defaultSize = getBreakPointsValue(allSize);
   const {
     width,
-    height = 370
+    height
   } = parentDOM?.getBoundingClientRect() || {
     ...defaultSize
   };
@@ -50,11 +50,10 @@ const useResize = ({
     setSize(currentSize => {
       const calcWidth = (currentSize.width || width) + e.movementX;
       const cWP = calcWidth / width * 100;
-      const calcHeight = (parseInt(currentSize.height) || height) + e.movementY;
       const calc = {
-        width: Math.max(calcWidth, 140),
-        height: Math.max(calcHeight, 50),
-        widthInPercent: cWP > 100 ? 100 : Math.max(cWP, 15)
+        width: calcWidth,
+        height: (parseInt(currentSize.height) || height) + e.movementY,
+        widthInPercent: cWP > 100 ? 100 : cWP
       };
       latest = calc;
       return calc;

package/dist/Editor/utils/events.js

@@ -285,4 +285,40 @@ export const enterEvent = (e, editor, isMobile) => {
   } catch (err) {
     console.log(err);
   }
+};
+export const upDownArrowKeyEvents = (e, editor) => {
+  try {
+    const {
+      selection
+    } = editor;
+    if (!selection || Range.isCollapsed(selection)) {
+      return;
+    }
+    const parentPath = selection.anchor.path.slice(0, -1);
+    const nextNodePath = [...parentPath];
+    const index = parentPath[parentPath.length - 1];
+    const parentNode = Editor.parent(editor, parentPath);
+    if (parentNode.children[index + 1]) {
+      nextNodePath[parentPath.length - 1] += 1;
+    } else {
+      return;
+    }
+    Transforms.move(editor, {
+      distance: 0,
+      unit: 'offset',
+      reverse: false
+    });
+    Transforms.select(editor, {
+      anchor: {
+        path: nextNodePath,
+        offset: 0
+      },
+      focus: {
+        path: nextNodePath,
+        offset: 0
+      }
+    });
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/utils/helper.js

@@ -1,4 +1,4 @@
-import { Editor, Node, Transforms, Element, Path } from "slate";
+import { Editor, Node, Transforms, Element } from "slate";
 import { ReactEditor } from "slate-react";
 import insertNewLine from "./insertNewLine";
 import { getDevice } from "../helper/theme";
@@ -470,11 +470,4 @@ export const editorThemeStyle = {
 };
 export const getEditorTheme = (themeType = "light") => {
   return editorThemeStyle[themeType] || {};
-};
-export const getPreviousNode = editor => {
-  try {
-    const parentPath = Path.parent(editor?.selection?.anchor?.path);
-    const prevPath = Path.previous(parentPath);
-    return getNode(editor, prevPath);
-  } catch (err) {}
 };

package/package.json

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