@flozy/editor 1.6.0 → 1.6.2

package/dist/Editor/common/iconslist.js

@@ -200,7 +200,7 @@ _jsx("svg", {
   children: /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M93.8939 186.893C41.0032 186.893 0.560547 146.445 0.560547 93.5599C0.560547 40.6692 41.0032 0.226562 93.8939 0.226562C146.785 0.226562 187.227 40.6692 187.227 93.5599C187.227 146.445 146.779 186.893 93.8939 186.893V186.893ZM93.8939 62.4452C75.2272 62.4452 62.7792 74.8931 62.7792 93.5599C62.7792 112.227 75.2219 124.669 93.8886 124.669C112.555 124.669 124.998 112.227 124.998 93.5599C125.003 74.8932 112.56 62.4452 93.8939 62.4452ZM93.8939 622.445C41.0032 622.445 0.560547 582.003 0.560547 529.112C0.560547 476.221 41.0032 435.779 93.8939 435.779C146.785 435.779 187.227 476.221 187.227 529.112C187.227 582.003 146.779 622.445 93.8939 622.445V622.445ZM93.8939 498.003C75.2272 498.003 62.7845 510.445 62.7845 529.112C62.7845 547.779 75.2272 560.221 93.8939 560.221C112.561 560.221 125.003 547.779 125.003 529.112C125.003 510.445 112.561 498.003 93.8939 498.003ZM622.774 93.5626C622.774 74.8959 610.331 62.4532 591.665 62.4532L249.438 62.448C230.771 62.448 218.329 74.8959 218.329 93.5627C218.329 112.229 230.771 124.672 249.438 124.672H591.665C610.331 124.672 622.774 112.229 622.774 93.5627V93.5626ZM622.774 311.336C622.774 292.669 610.331 280.227 591.665 280.227H249.438C230.771 280.227 218.329 292.669 218.329 311.336C218.329 330.003 230.771 342.445 249.438 342.445H591.665C610.331 342.445 622.774 330.003 622.774 311.336ZM622.774 529.109C622.774 510.443 610.331 498 591.665 498H249.438C230.771 498 218.329 510.443 218.329 529.109C218.329 547.776 230.771 560.219 249.438 560.219H591.665C610.331 560.224 622.774 547.776 622.774 529.109ZM81.4406 367.336L174.774 305.112C190.331 295.779 193.441 277.112 187.217 261.555C174.774 249.112 156.107 242.893 140.555 252.226C140.555 252.226 137.446 252.226 137.446 255.336L65.8886 302.002L53.4459 289.56C41.0032 277.117 19.2219 280.226 9.88855 292.669C0.555216 305.112 0.555216 320.669 9.88855 333.112L40.9979 364.221C50.3312 373.56 68.9979 376.669 81.4406 367.336V367.336Z",
-    fill: "black"
+    fill: "#64748B"
   })
 });
 export const HeadingTypeIcon = props => /*#__PURE__*/_jsx("svg", {
@@ -1406,4 +1406,49 @@ export const FormIcon = () => {
       fill: "#64748B"
     })]
   });
+};
+export const CellResize = () => {
+  return /*#__PURE__*/_jsx("svg", {
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 256 256",
+    enableBackground: "new 0 0 256 256",
+    children: /*#__PURE__*/_jsx("g", {
+      children: /*#__PURE__*/_jsx("g", {
+        children: /*#__PURE__*/_jsxs("g", {
+          children: [/*#__PURE__*/_jsx("path", {
+            fill: "#000000",
+            d: "M98.6,78.9v29.4H79H59.3V93.5V78.6l-24.6,24.6L10,128l24.2,24.2c13.3,13.3,24.4,24.2,24.6,24.2c0.3,0,0.5-6.5,0.5-14.4v-14.4H79h19.6l0.1,29.2l0.2,29.3l9.7,0.2l9.6,0.2V128V49.5h-9.8h-9.8L98.6,78.9L98.6,78.9z"
+          }), /*#__PURE__*/_jsx("path", {
+            fill: "#000000",
+            d: "M137.8,128v78.5h9.8h9.8V177v-29.4H177h19.6V162c0,7.9,0.2,14.4,0.5,14.4c0.2,0,11.3-10.9,24.6-24.2L246,128l-24.7-24.7l-24.6-24.6v14.9v14.8H177h-19.6V78.9V49.5h-9.8h-9.8L137.8,128L137.8,128z"
+          })]
+        })
+      })
+    })
+  });
+};
+export const FileUploadIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M5.2 12.9639H4C1.6 12.9639 1 12.3657 1 9.97291V3.99097C1 1.59819 1.6 1 4 1H4.9C5.8 1 5.99801 1.26321 6.34001 1.71784L7.24001 2.91423C7.46801 3.21333 7.6 3.39278 8.2 3.39278H10C12.4 3.39278 13 3.99097 13 6.38375V7.58014",
+      stroke: "#9C9C9C",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M8.05604 10.7628C6.64604 10.8645 6.64604 12.8983 8.05604 13H11.392C11.794 13 12.19 12.8504 12.484 12.5813C13.474 11.7199 12.946 9.99706 11.644 9.83555C11.176 7.03001 7.10805 8.0948 8.06805 10.7687",
+      stroke: "#9C9C9C",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
 };

package/dist/Editor/hooks/useMentions.js

@@ -1,5 +1,86 @@
 import { useEffect, useState } from "react";
 import { Editor, Range } from "slate";
+const SHORTHAND_CMDS = ["@", "/"];
+const TYPES = {
+  "@": "mentions",
+  "/": "elements"
+};
+const SHORTHAND_MATCHES = {
+  mentions: new RegExp(/^@(\w+)$/),
+  elements: new RegExp(/^\/(\w+)$/)
+};
+const getStartEnd = ({
+  selection,
+  editor
+}) => {
+  try {
+    // Get start and end, modify it as we move along.
+    let [start, end] = Range.edges(selection);
+
+    // Move backwards
+    while (true) {
+      const before = Editor.before(editor, start, {
+        unit: "character"
+      });
+      const wordBefore = before && Editor.string(editor, {
+        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
+          break;
+        }
+      } else if (SHORTHAND_CMDS.indexOf(wordBefore) >= 0) {
+        // reached the character end
+        start = before;
+        break;
+      } else {
+        break;
+      }
+    }
+    const wordRange = {
+      anchor: start,
+      focus: end
+    };
+    const word = Editor.string(editor, wordRange);
+    return {
+      word,
+      search: word?.substring(1, word.length),
+      target: wordRange,
+      type: TYPES[word[0]]
+    };
+  } catch (err) {
+    return {
+      word: "",
+      wordRange: null,
+      type: null
+    };
+  }
+};
+const getRegexCategories = beforeText => {
+  try {
+    if (beforeText) {
+      if (beforeText.match(SHORTHAND_MATCHES.mentions)) {
+        return {
+          type: "mentions",
+          beforeMatch: beforeText.match(SHORTHAND_MATCHES.mentions)
+        };
+      } else if (beforeText.match(SHORTHAND_MATCHES.elements)) {
+        return {
+          type: "elements",
+          beforeMatch: beforeText.match(SHORTHAND_MATCHES.elements)
+        };
+      }
+    } else {
+      return null;
+    }
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
+};
 const useMentions = props => {
   const {
     editor,
@@ -8,34 +89,40 @@ const useMentions = props => {
   const [mentions, setMentions] = useState({
     target: null,
     index: null,
-    search: null
+    search: null,
+    type: null
   });
   useEffect(() => {
     if (selection && Range.isCollapsed(selection)) {
-      const [start] = Range.edges(selection);
-      const wordBefore = Editor.before(editor, start, {
-        unit: "word"
+      const {
+        target,
+        search,
+        type
+      } = getStartEnd({
+        selection,
+        editor
       });
-      const before = wordBefore && Editor.before(editor, wordBefore);
-      const beforeRange = before && Editor.range(editor, before, start);
-      const beforeText = beforeRange && Editor.string(editor, beforeRange);
-      const beforeMatch = beforeText && beforeText.match(/^@(\w+)$/);
-      const after = Editor.after(editor, start);
-      const afterRange = Editor.range(editor, start, after);
-      const afterText = Editor.string(editor, afterRange);
-      const afterMatch = afterText.match(/^(\s|$)/);
-      if (beforeMatch && afterMatch) {
+      if (target && type) {
+        setMentions({
+          target,
+          search,
+          index: 0,
+          type: type
+        });
+      } else {
         setMentions({
-          target: beforeRange,
-          search: beforeMatch[1],
-          index: 0
+          target: null,
+          search: null,
+          index: null,
+          type: null
         });
       }
     } else {
       setMentions({
         target: null,
         search: null,
-        index: null
+        index: null,
+        type: null
       });
     }
   }, [selection, editor]);

package/dist/Editor/hooks/useMouseMove.js

@@ -0,0 +1,53 @@
+import { useEffect, useState, createContext, useContext, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const EditorContext = /*#__PURE__*/createContext();
+export const EditorProvider = ({
+  children
+}) => {
+  const [event] = useMouseMove();
+  const [previous, setPrevious] = useState("");
+  const path = event?.target?.getAttribute("data-path");
+  const value = useMemo(() => {
+    if (path) {
+      setPrevious(path);
+      return {
+        hoverPath: path
+      };
+    } else {
+      return {
+        hoverPath: previous
+      };
+    }
+  }, [path]);
+  return /*#__PURE__*/_jsx(EditorContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+export const useEditorContext = () => {
+  return useContext(EditorContext);
+};
+const useMouseMove = () => {
+  const [event, setEvent] = useState({
+    target: null
+  });
+  useEffect(() => {
+    addListener();
+    return () => {
+      removeListener();
+    };
+  }, []);
+  const onMouseMove = e => {
+    setEvent({
+      target: e.target
+    });
+  };
+  const addListener = () => {
+    document.addEventListener("mousemove", onMouseMove);
+  };
+  const removeListener = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+  };
+  return [event];
+};
+export default useMouseMove;

package/dist/Editor/hooks/useScroll.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+const useScroll = id => {
+  const [event, setEvent] = useState("");
+  useEffect(() => {
+    addListener();
+    return () => {
+      removeListener();
+    };
+  }, []);
+  const onScroll = () => {
+    setEvent("start");
+  };
+  const onScrollEnd = () => {
+    setEvent("end");
+  };
+  const addListener = () => {
+    document.getElementById(id)?.addEventListener("scroll", onScroll);
+    document.getElementById(id)?.addEventListener("scrollend", onScrollEnd);
+  };
+  const removeListener = () => {
+    document.getElementById(id)?.removeEventListener("scroll", onScroll);
+    document.getElementById(id)?.removeEventListener("scrollend", onScrollEnd);
+  };
+  return [event];
+};
+export default useScroll;

package/dist/Editor/plugins/withEmbeds.js

@@ -1,4 +1,5 @@
 import { Transforms, Path, Node } from "slate";
+const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
 const withEmbeds = editor => {
   const {
     isVoid,
@@ -27,6 +28,17 @@ const withEmbeds = editor => {
         at: nextPath,
         select: true // Focus on this node once inserted
       });
+    } else if (AvoidCopying.indexOf(parentNode?.type) >= 0) {
+      const nextPath = Path.next(parentPath);
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }, {
+        at: nextPath,
+        select: true // Focus on this node once inserted
+      });
     } else {
       insertBreak(...args);
     }

package/dist/Editor/service/fileupload.js

@@ -3,10 +3,10 @@ export const uploadFile = async (formData, props) => {
     const response = await fetch(`${props.API_HOST}/general/notes/file_upload`, {
       method: "POST",
       headers: {
-        "Content-Type": "application/json",
+        // "Content-Type": "application/json",
         Authorization: `Bearer ${props.token}`
       },
-      body: JSON.stringify(formData)
+      body: formData
     });
     const result = await response.json();
     return result.data;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -30,10 +30,12 @@ import Form from "../Elements/Form/Form";
 import FormField from "../Elements/Form/FormField";
 import InlineIcon from "../Elements/InlineIcon/InlineIcon";
 import EmbedLink from "../Elements/Embed/link";
+import SimpleText from "../Elements/SimpleText";
+import CheckList from "../Elements/List/CheckList";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
-export const toggleBlock = (editor, format) => {
+export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
   const isIndent = alignment.includes(format);
@@ -60,8 +62,14 @@ export const toggleBlock = (editor, format) => {
     match: n => list_types.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
     split: true
   });
+
+  // inserting blocks from "/"" commands remove searched word
+  if (!selection) {
+    Transforms.insertText(editor, "");
+  }
   Transforms.setNodes(editor, {
-    type: isActive ? "paragraph" : isList ? "list-item" : format
+    type: isActive ? "paragraph" : isList ? "list-item" : format,
+    ...attr
   });
   if (isList && !isActive) {
     Transforms.wrapNodes(editor, {
@@ -96,12 +104,32 @@ export const isBlockActive = (editor, format) => {
   });
   return !!match;
 };
+export const getBlockActive = (editor, format) => {
+  const [match] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
+  });
+  return {
+    isActive: !!match,
+    props: match && match[0]
+  };
+};
+export const upateBlockActive = (editor, format, attr = {}) => {
+  const [match] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
+  });
+  if (match && match[1] !== undefined) {
+    Transforms.setNodes(editor, attr, {
+      at: match[1]
+    });
+  }
+};
 export const activeMark = (editor, format) => {
   const defaultMarkData = {
     color: "#000000",
     bgColor: "#FFFFFF",
     fontSize: "normal",
-    fontFamily: "PoppinsRegular"
+    fontFamily: "PoppinsRegular",
+    fontWeight: "normal"
   };
   try {
     const marks = Editor.marks(editor);
@@ -152,9 +180,16 @@ export const getMarked = (leaf, children) => {
     });
   }
   if (leaf.color) {
+    const textStyles = leaf?.color?.indexOf("gradient") >= 0 ? {
+      background: leaf.color,
+      "-webkit-background-clip": "text",
+      "-webkit-text-fill-color": "transparent"
+    } : {
+      color: leaf.color
+    };
     children = /*#__PURE__*/_jsx("span", {
       style: {
-        color: leaf.color
+        ...textStyles
       },
       children: children
     });
@@ -162,7 +197,7 @@ export const getMarked = (leaf, children) => {
   if (leaf.bgColor) {
     children = /*#__PURE__*/_jsx("span", {
       style: {
-        backgroundColor: leaf.bgColor
+        background: leaf.bgColor
       },
       children: children
     });
@@ -185,6 +220,14 @@ export const getMarked = (leaf, children) => {
       children: children
     });
   }
+  if (leaf.fontWeight) {
+    children = /*#__PURE__*/_jsx("span", {
+      style: {
+        fontWeight: leaf.fontWeight
+      },
+      children: children
+    });
+  }
   return children;
 };
 export const getBlock = props => {
@@ -216,6 +259,13 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx("blockquote", {
         ...attributes,
         ...element.attr,
+        style: {
+          borderColor: element?.color || "transparent",
+          background: element?.bgColor || "none",
+          padding: `${element?.bgColor ? "16px" : "0px"} 8px`,
+          borderRadius: `${element?.color ? "0px" : "12px"} 12px 12px ${element?.color ? "0px" : "12px"}`,
+          margin: `${element?.bgColor ? "16px" : "0px"} 0px`
+        },
         children: children
       });
     case "alignLeft":
@@ -269,6 +319,10 @@ export const getBlock = props => {
         ...attributes,
         children: children
       });
+    case "checkList":
+      return /*#__PURE__*/_jsx(CheckList, {
+        ...props
+      });
     case "link":
       return /*#__PURE__*/_jsx(Link, {
         ...props
@@ -390,11 +444,8 @@ export const getBlock = props => {
         ...props
       });
     default:
-      return /*#__PURE__*/_jsx("div", {
-        ...element.attr,
-        ...attributes,
-        className: "simple-text",
-        children: children
+      return /*#__PURE__*/_jsx(SimpleText, {
+        ...props
       });
   }
 };

package/dist/Editor/utils/carousel.js

@@ -1,13 +1,16 @@
 import { Transforms } from "slate";
 import { carouselItem } from "./carouselItem";
+import insertNewLine from "./insertNewLine";
 export const insertCarousel = editor => {
   const grid = {
     type: "carousel",
     grid: "container",
     children: [{
-      ...carouselItem()
+      ...carouselItem(1)
+    }, {
+      ...carouselItem(2)
     }]
   };
   Transforms.insertNodes(editor, grid);
-  Transforms.move(editor);
+  insertNewLine(editor);
 };

package/dist/Editor/utils/carouselItem.js

@@ -1,12 +1,12 @@
 import { Transforms } from "slate";
-export const carouselItem = () => {
+export const carouselItem = (itemNo = "") => {
   return {
     type: "carousel-item",
     image: null,
     children: [{
       type: "paragraph",
       children: [{
-        text: `Carousel Item Text - ${new Date().getTime()}`
+        text: `Slide ${itemNo}`
       }]
     }]
   };

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

@@ -35,11 +35,10 @@ const useResize = ({
   };
   const onMouseMove = e => {
     setSize(currentSize => {
-      const widthInPX = currentSize.widthInPercent / 100 * width;
-      const calcWidth = widthInPX + e.movementX;
+      const calcWidth = (currentSize.width || width) + e.movementX;
       return {
         width: calcWidth,
-        height: currentSize.height + e.movementY,
+        height: (currentSize.height || height) + e.movementY,
         widthInPercent: calcWidth / width * 100
       };
     });

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

@@ -11,7 +11,8 @@ const useTableResize = ({
   const [size, setSize] = useState({
     height: 300,
     widthInPercent: 100,
-    ...defaultSize
+    ...defaultSize,
+    width
   });
   const [resizing, setResizing] = useState(false);
   const onLoad = defaultSize => {

package/dist/Editor/utils/embed.js

@@ -1,5 +1,12 @@
 import { Transforms } from "slate";
-import { createParagraph } from "./paragraph";
+import insertNewLine from "./insertNewLine";
+export const insertDefaultEmbed = (editor, type, defaultURL = "") => {
+  const url = defaultURL ? defaultURL : type === "image" ? "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" : "https://www.youtube.com/embed/a_feKqxjY-4?si=da6PxCxKEUYqadRn";
+  insertEmbed(editor, {
+    url,
+    images: []
+  }, type);
+};
 export const createEmbedNode = (type, {
   url,
   alt,
@@ -10,8 +17,15 @@ export const createEmbedNode = (type, {
   url,
   images: images || [],
   children: [{
-    text: ""
-  }]
+    text: " "
+  }],
+  size: {
+    widthInPercent: "100%",
+    height: "auto"
+  },
+  alignment: {
+    horizantal: "center"
+  }
 });
 export const insertEmbed = (editor, embedData, format) => {
   const {
@@ -21,7 +35,7 @@ export const insertEmbed = (editor, embedData, format) => {
   if (!url && images.length === 0) return;
   const embed = createEmbedNode(format, embedData);
   Transforms.insertNodes(editor, embed, {
-    select: true
+    at: editor.selection.anchor.path
   });
-  Transforms.insertNodes(editor, createParagraph(""));
+  insertNewLine(editor);
 };

package/dist/Editor/utils/emoji.js

@@ -0,0 +1,8 @@
+import { Transforms } from "slate";
+export const insertEmoji = (editor, emoji, position) => {
+  console.log(editor.selection);
+  Transforms.insertText(editor, emoji, {
+    at: position,
+    select: true
+  });
+};

package/dist/Editor/utils/events.js

@@ -1,5 +1,5 @@
-import { Transforms, Editor } from "slate";
-import { insertMention } from "./mentions";
+import { Editor, Transforms, Element, Node, Path } from "slate";
+import { toggleBlock } from "./SlateUtilityFunctions";
 const HOTKEYS = {
   b: "bold",
   i: "italic",
@@ -11,11 +11,10 @@ export const mentionsEvent = props => {
     mentions,
     setMentions,
     chars,
-    editor
+    mentionsRef
   } = props;
   const {
-    index,
-    target
+    index
   } = mentions;
   switch (event.key) {
     case "ArrowDown":
@@ -37,18 +36,16 @@ export const mentionsEvent = props => {
     case "Tab":
     case "Enter":
       event.preventDefault();
-      Transforms.select(editor, target);
-      insertMention(editor, chars[index]);
-      setMentions({
-        ...mentions,
-        target: null
-      });
+      if (mentionsRef && mentionsRef?.current) {
+        mentionsRef?.current?.handleOnSelect(chars[index]);
+      }
       break;
     case "Escape":
       event.preventDefault();
       setMentions({
         ...mentions,
-        target: null
+        target: null,
+        type: null
       });
       break;
     default:
@@ -73,4 +70,44 @@ export const commands = props => {
       Editor.addMark(editor, HOTKEYS[event.key], true);
     }
   }
+};
+export const indentation = props => {
+  const {
+    editor
+  } = props;
+  const {
+    selection
+  } = editor;
+  if (selection) {
+    const [listItemNode] = Editor.nodes(editor, {
+      match: n => n.type === "list-item"
+    });
+    if (listItemNode) {
+      const [, listItemPath] = listItemNode;
+      const [parentNode] = Editor.parent(editor, listItemPath);
+      const type = parentNode.type;
+      Transforms.wrapNodes(editor, {
+        type,
+        children: []
+      }, {
+        at: listItemPath
+      });
+    }
+  }
+};
+export const escapeEvent = props => {
+  const {
+    editor
+  } = props;
+  const list_types = ["orderedList", "unorderedList", "checkList"];
+  const parentPath = Path.ancestors(editor.selection.anchor.path);
+  const parentNodes = parentPath.filter(m => m.length).map(m => Node.get(editor, m));
+  if (parentNodes.length === 2 && parentNodes[1]?.type === "list-item") {
+    toggleBlock(editor, "list-item", editor.selection);
+  } else {
+    Transforms.unwrapNodes(editor, {
+      match: n => list_types.includes(!Editor.isEditor(n) && Element.isElement(n) && n.type),
+      split: true
+    });
+  }
 };