@flozy/editor 2.1.4 → 2.1.6

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -165,7 +165,15 @@ export const toolbarGroups = [[{
   format: "video",
   type: "embed",
   group: "elements"
-}, {
+},
+// {
+//   id: 49,
+//   lbT: "embedScript",
+//   format: "embedScript",
+//   type: "embedScript",
+//   group: "elements",
+// },
+{
   id: 45,
   format: "topbanner",
   type: "topbanner",

package/dist/Editor/common/Icon.js

@@ -1,13 +1,13 @@
 import React from "react";
 import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdFormatListNumbered, MdFormatListBulleted, MdAdd, MdArrowForward, MdEmojiEmotions, MdOutlinePermMedia } from "react-icons/md";
-import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsFillMenuButtonWideFill } from "react-icons/bs";
+import { BsTypeH1, BsTypeH2, BsTypeH3, BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsFillMenuButtonWideFill, BsCodeSlash } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage, DocsUpload, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, DividerIcon, CloseIcon, SearchIcon, ExpandIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -202,7 +202,16 @@ const iconList = {
   checkListButtonActive: /*#__PURE__*/_jsx(CheckListButtonActive, {}),
   excelIcon: /*#__PURE__*/_jsx(ExcelIcon, {}),
   csvIcon: /*#__PURE__*/_jsx(CsvIcon, {}),
-  divider: /*#__PURE__*/_jsx(DividerIcon, {})
+  divider: /*#__PURE__*/_jsx(DividerIcon, {}),
+  SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
+  expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
+  closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
+  embedScript: /*#__PURE__*/_jsx(BsCodeSlash, {
+    size: 20,
+    style: {
+      fill: "#64748B"
+    }
+  })
 };
 const Icon = props => {
   const {

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

@@ -9,7 +9,6 @@ import { toggleBlock } from "../../utils/SlateUtilityFunctions";
 import { TableUtil } from "../../utils/table";
 import Icon from "../Icon";
 import EmojiButton from "../../Elements/Emoji/EmojiButton";
-import DividerButton from "../../Elements/Divider/DividerButton";
 import { insertDivider } from "../../utils/divider";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{

package/dist/Editor/common/iconslist.js

@@ -1673,4 +1673,76 @@ export const CsvIcon = () => /*#__PURE__*/_jsxs("svg", {
     d: "M10.1788 20.5847H10.9753C10.9475 20.8284 10.8559 21.0604 10.7098 21.2573C10.5697 21.4397 10.3875 21.5855 10.1788 21.6821C9.9552 21.7844 9.71217 21.8373 9.46631 21.837C9.23734 21.8459 9.00918 21.805 8.79756 21.7171C8.58593 21.6293 8.39588 21.4965 8.24052 21.3281C7.91249 20.9659 7.74073 20.4888 7.7626 20.0006C7.74301 19.5143 7.91093 19.039 8.23167 18.673C8.37983 18.5042 8.56321 18.37 8.76889 18.2797C8.97456 18.1895 9.19753 18.1455 9.42206 18.1508C9.64785 18.1457 9.87206 18.1898 10.0791 18.2799C10.2862 18.3701 10.4712 18.5042 10.6213 18.673C10.8099 18.8938 10.9313 19.1641 10.9709 19.4518H10.1788C10.1395 19.2957 10.0472 19.158 9.91768 19.0624C9.77323 18.9681 9.60336 18.9202 9.43091 18.9252C9.30533 18.9217 9.18061 18.9471 9.06632 18.9992C8.95203 19.0514 8.8512 19.129 8.77155 19.2261C8.59958 19.4467 8.51173 19.7212 8.52374 20.0006C8.51183 20.2814 8.60313 20.5569 8.7804 20.775C8.86139 20.8714 8.96321 20.9482 9.07819 20.9996C9.19317 21.0509 9.31832 21.0755 9.44418 21.0715C9.6028 21.0807 9.76013 21.0382 9.89257 20.9505C10.025 20.8627 10.1254 20.7344 10.1788 20.5847ZM11.6612 20.7174H12.3914C12.4223 20.8647 12.507 20.9953 12.6289 21.0836C12.7507 21.1719 12.9011 21.2118 13.0507 21.1954C13.1892 21.2025 13.3261 21.1636 13.4402 21.0847C13.4868 21.0509 13.5244 21.0062 13.5499 20.9546C13.5753 20.9029 13.5878 20.8458 13.5862 20.7882C13.5903 20.7117 13.5686 20.636 13.5244 20.5734C13.4803 20.5108 13.4163 20.4649 13.3428 20.4431C13.3103 20.4431 13.1628 20.3988 12.9003 20.3103C12.6226 20.2507 12.3565 20.146 12.1126 20.0006C11.9949 19.9147 11.9001 19.8011 11.8368 19.6699C11.7735 19.5387 11.7436 19.3938 11.7497 19.2483C11.7437 19.1007 11.7703 18.9535 11.8277 18.8174C11.8851 18.6812 11.9718 18.5594 12.0816 18.4606C12.3279 18.2522 12.6446 18.1461 12.9667 18.1641C13.2843 18.152 13.5966 18.2488 13.8517 18.4385C13.9632 18.52 14.0542 18.6265 14.1172 18.7494C14.1802 18.8724 14.2135 19.0083 14.2146 19.1465H13.4756C13.452 19.036 13.3871 18.9387 13.2941 18.8745C13.2012 18.8103 13.0872 18.7842 12.9755 18.8013C12.8543 18.7955 12.7346 18.8297 12.6348 18.8987C12.5939 18.9286 12.5609 18.968 12.5386 19.0135C12.5162 19.0589 12.5052 19.1091 12.5064 19.1598C12.5032 19.2161 12.5165 19.2721 12.5448 19.3209C12.5732 19.3697 12.6152 19.4091 12.6657 19.4341C12.8434 19.5084 13.029 19.5619 13.2189 19.5934C13.4646 19.6346 13.7013 19.7184 13.9181 19.8413C14.0591 19.9314 14.1741 20.0568 14.2517 20.205C14.3293 20.3533 14.3669 20.5192 14.3606 20.6865C14.3679 20.8731 14.3255 21.0584 14.2376 21.2233C14.1498 21.3881 14.0196 21.5266 13.8605 21.6246C13.61 21.7706 13.3227 21.8412 13.033 21.8282C12.8135 21.8476 12.5925 21.8121 12.3901 21.7248C12.1877 21.6375 12.0102 21.5012 11.8736 21.3281C11.7519 21.146 11.6787 20.9358 11.6612 20.7174ZM16.0466 21.7706L14.719 18.2305H15.5111L16.3741 20.6201L17.1131 18.2305H17.8875L16.7148 21.7706H16.0466Z",
     fill: "white"
   })]
+});
+export const CloseIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M14.1245 5.875L5.87493 14.1246",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M5.875 5.875L14.1246 14.1246",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const SearchIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M7.95971 15.2213C11.8035 15.2213 14.9194 12.0377 14.9194 8.11065C14.9194 4.18355 11.8035 1 7.95971 1C4.11597 1 1 4.18355 1 8.11065C1 12.0377 4.11597 15.2213 7.95971 15.2213Z",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M17.0004 17.0006L13.5205 13.4453",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const ExpandIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M14 6V2H10",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M2 10V14H6",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14 2L9 7",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M7 9L2 14",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
 });

package/dist/Editor/hooks/useDragDom.js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from "react";
+const ePos = {
+  x: 0,
+  y: 0
+};
+const useDragDom = props => {
+  const {
+    refDom
+  } = props || {};
+  const [event, setEvent] = useState("");
+  const [delta, setDelta] = useState({
+    x: 0,
+    y: 0
+  });
+  useEffect(() => {
+    addListener();
+    return () => {
+      removeListener();
+    };
+  }, [refDom]);
+  const onMouseDown = e => {
+    ePos.x = e.x;
+    ePos.y = e.y;
+    setDelta({
+      x: 0,
+      y: 0
+    });
+    setEvent("start");
+  };
+  const onMouseMove = e => {
+    if (ePos.x) {
+      setDelta({
+        x: e.x - ePos.x,
+        y: e.y - ePos.y
+      });
+    }
+  };
+  const onMouseUp = e => {
+    setEvent("end");
+    ePos.x = 0;
+    ePos.y = 0;
+    if (event === "start") {
+      setDelta({
+        x: e.x - ePos.x,
+        y: e.y - ePos.y
+      });
+    }
+  };
+  const onClear = () => {
+    setDelta({
+      x: 0,
+      y: 0
+    });
+  };
+  const addListener = () => {
+    refDom?.addEventListener("pointerdown", onMouseDown);
+    refDom?.addEventListener("pointermove", onMouseMove);
+    document.addEventListener("pointerup", onMouseUp);
+  };
+  const removeListener = () => {
+    refDom?.removeEventListener("pointerdown", onMouseDown);
+    document.removeEventListener("pointerup", onMouseUp);
+  };
+  return [event, delta, onClear];
+};
+export default useDragDom;

package/dist/Editor/hooks/useMouseMove.js

@@ -24,6 +24,7 @@ export const EditorProvider = ({
   const [event] = useMouseMove();
   const [previous, setPrevious] = useState("");
   const [drop, setDrop] = useState(0);
+  const [selectedPath, setSelectedPath] = useState(null);
   const path = event?.target?.getAttribute("data-path");
   const onDrop = () => {
     setDrop(drop + 1);
@@ -45,7 +46,9 @@ export const EditorProvider = ({
       ...(value || {}),
       onDrop: onDrop,
       drop,
-      theme: theme
+      theme: theme,
+      selectedPath: selectedPath,
+      setSelectedPath: setSelectedPath
     },
     children: children
   });

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -40,6 +40,7 @@ import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
 import { getBorderColor } from "./helper";
+import Code from "../Elements/EmbedScript/Code";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -289,9 +290,6 @@ export const getBlock = props => {
       });
     case "alignLeft":
       return /*#__PURE__*/_jsx("div", {
-        style: {
-          listStylePosition: "inside"
-        },
         ...attributes,
         ...element.attr,
         children: children
@@ -301,7 +299,6 @@ export const getBlock = props => {
         style: {
           display: "flex",
           alignItems: "center",
-          listStylePosition: "inside",
           flexDirection: "column",
           textAlign: "center"
         },
@@ -314,7 +311,6 @@ export const getBlock = props => {
         style: {
           display: "flex",
           alignItems: "flex-end",
-          listStylePosition: "inside",
           flexDirection: "column",
           textAlign: "right"
         },
@@ -498,6 +494,10 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Divider, {
         ...props
       });
+    case "embedScript":
+      return /*#__PURE__*/_jsx(Code, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,

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

@@ -26,8 +26,8 @@ const useResize = ({
   const onLoad = defaultSize => {
     setSize({
       widthInPercent: 100,
-      height: isGrid ? height : 300,
-      ...defaultSize
+      height: height,
+      ...defaultSize[device]
     });
   };
   const onMouseDown = () => {

package/dist/Editor/utils/embedScript.js

@@ -0,0 +1,20 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+export const createEmbedScript = embedData => ({
+  type: "embedScript",
+  embedData: embedData,
+  children: [{
+    text: " "
+  }]
+});
+export const insertEmbedScript = (editor, embedData) => {
+  try {
+    const embed = createEmbedScript(embedData);
+    Transforms.insertNodes(editor, embed, {
+      at: editor.selection.anchor.path
+    });
+    insertNewLine(editor);
+  } catch (err) {
+    console.log(err);
+  }
+};

package/dist/Editor/utils/events.js

@@ -2,6 +2,7 @@ import { Editor, Transforms, Element, Node, Path } from "slate";
 import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
+import { isListItem } from "./helper";
 const HOTKEYS = {
   b: "bold",
   i: "italic",
@@ -87,18 +88,27 @@ export const indentation = props => {
     } = editor;
     if (selection) {
       const [listItemNode] = Editor.nodes(editor, {
-        match: n => n.type === "list-item"
+        match: n => n.type === "list-item" || n.type === "check-list-item"
       });
       if (listItemNode) {
-        const [, listItemPath] = listItemNode;
-        const [parentNode] = Editor.parent(editor, listItemPath);
-        const type = parentNode.type;
-        Transforms.wrapNodes(editor, {
-          type,
-          children: []
-        }, {
-          at: listItemPath
-        });
+        const [listItem, listItemPath] = listItemNode;
+        if (listItem.type === "check-list-item") {
+          Transforms.wrapNodes(editor, {
+            type: listItem.type,
+            children: [{
+              text: ''
+            }]
+          });
+        } else {
+          const [parentNode] = Editor.parent(editor, listItemPath);
+          const type = parentNode.type;
+          Transforms.wrapNodes(editor, {
+            type,
+            children: []
+          }, {
+            at: listItemPath
+          });
+        }
       }
     }
   } catch (err) {
@@ -113,8 +123,12 @@ export const escapeEvent = props => {
     const list_types = ["orderedList", "unorderedList", "check-list-item"];
     const parentPath = Path.ancestors(editor.selection.anchor.path);
     const parentNodes = parentPath.filter(m => m.length).map(m => Node.get(editor, m));
+    const ele = isListItem(editor);
+    const eleType = ele[0]?.type;
     if (parentNodes.length === 2 && parentNodes[1]?.type === "list-item") {
       toggleBlock(editor, "list-item", editor.selection);
+    } else if (eleType === "check-list-item") {
+      checkListEnterEvent(editor, eleType);
     } else {
       Transforms.unwrapNodes(editor, {
         match: n => list_types.includes(!Editor.isEditor(n) && Element.isElement(n) && n.type),
@@ -125,8 +139,38 @@ export const escapeEvent = props => {
     console.log(err);
   }
 };
-export const enterEvent = (e, editor, ele) => {
+const checkListEnterEvent = (editor, type) => {
+  const selectionPath = editor?.selection?.anchor?.path;
+  const ancestors = Path.ancestors(selectionPath);
+  const parentPath = ancestors[ancestors?.length - 2];
+  if (parentPath?.length) {
+    const lastPathIndex = parentPath.length - 1;
+    const otherPaths = parentPath.slice(0, lastPathIndex);
+    const nextChildrenPath = parentPath[lastPathIndex] + 1;
+    const newPath = [...otherPaths, nextChildrenPath];
+    Transforms.insertNodes(editor, {
+      type: "check-list-item",
+      children: [{
+        text: ''
+      }]
+    }, {
+      at: newPath
+    });
+    Transforms.removeNodes(editor);
+    // focus on the end of the line
+    Transforms.move(editor, {
+      distance: 1,
+      unit: 'line'
+    });
+  } else {
+    toggleBlock(editor, type);
+    insertNewLine(editor);
+  }
+};
+export const enterEvent = (e, editor) => {
   try {
+    const ele = isListItem(editor);
+
     // on shift enter break line in same node
     if (e.shiftKey) {
       e.preventDefault();
@@ -138,11 +182,20 @@ export const enterEvent = (e, editor, ele) => {
       const text = Node.string(ele[0]);
       switch (type) {
         case "list-item":
-        case "check-list-item":
           if (!text) {
             e.preventDefault();
-            toggleBlock(editor, type);
-            insertNewLine(editor);
+            escapeEvent({
+              editor
+            });
+          }
+          break;
+        case "check-list-item":
+          const selectionPath = editor?.selection?.anchor?.path;
+          const currEle = Node.parent(editor, selectionPath);
+          const currEleText = Node.string(currEle);
+          if (!currEleText) {
+            e.preventDefault();
+            checkListEnterEvent(editor, type);
           }
           break;
         case "accordion-summary":

package/dist/Editor/utils/helper.js

@@ -1,4 +1,4 @@
-import { Editor, Node, Transforms } from "slate";
+import { Editor, Node, Transforms, Element } from "slate";
 import { ReactEditor } from "slate-react";
 export const windowVar = {};
 export const formatDate = (date, format = "MM/DD/YYYY") => {
@@ -142,4 +142,11 @@ export const handleInsertLastElement = (event, editor) => {
     }
     ReactEditor.focus(editor);
   }
+};
+export const isListItem = editor => {
+  const format = ["list-item", "check-list-item", "accordion-summary"];
+  const [node] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && format.indexOf(n.type) > -1
+  });
+  return node;
 };

package/package.json

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