@flozy/editor 1.5.9 → 1.6.1

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
+    });
+  }
 };

package/dist/Editor/utils/form.js

@@ -1,5 +1,6 @@
 import { Transforms } from "slate";
 import { formField } from "./formfield";
+import insertNewLine from "./insertNewLine";
 export const insertForm = (editor, item) => {
   const grid = !item ? {
     type: "form",
@@ -18,15 +19,8 @@ export const insertForm = (editor, item) => {
     },
     children: [{
       ...formField()
-    }, {
-      text: ""
     }]
   } : item;
-  const {
-    selection
-  } = editor;
-  Transforms.insertNodes(editor, grid, {
-    at: selection.focus.path
-  });
-  Transforms.move(editor);
+  Transforms.insertNodes(editor, grid);
+  insertNewLine(editor);
 };

package/dist/Editor/utils/formfield.js

@@ -9,7 +9,8 @@ export const formField = () => {
     children: [{
       text: ""
     }],
-    bgColor: "rgba(255, 255, 255, 0)",
+    bgColor: "rgba(255, 255, 255, 1)",
+    borderColor: "#ccc",
     bannerSpacing: {
       left: 16,
       right: 16,

package/dist/Editor/utils/grid.js

@@ -1,12 +1,48 @@
 import { Transforms } from "slate";
 import default_grid from "../Elements/Grid/templates/default_grid";
+import insertNewLine from "./insertNewLine";
+import { gridItem } from "./gridItem";
+export const insertPlainGrid = count => {
+  const size = 12 / count;
+  const items = Array.from(Array(count).keys()).map(() => gridItem({
+    grid: size,
+    borderColor: "#ccc",
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    }
+  }));
+  return {
+    type: "grid",
+    grid: "container",
+    children: [...items],
+    alignment: {
+      flexDirection: "row"
+    },
+    lockSpacing: true,
+    bannerSpacing: {
+      top: "16",
+      left: "16",
+      right: "16",
+      bottom: "16"
+    }
+  };
+};
 export const insertGrid = (editor, item, path) => {
-  const grid = !item ? JSON.parse(default_grid) : item;
-  const {
-    selection
-  } = editor;
-  Transforms.insertNodes(editor, grid, {
-    at: path || selection.focus.path,
-    select: true
-  });
+  try {
+    const grid = !item ? JSON.parse(default_grid) : item;
+    const {
+      selection
+    } = editor;
+    Transforms.insertNodes(editor, grid, {
+      at: path || selection.focus.path,
+      select: true
+    });
+    insertNewLine(editor);
+  } catch (err) {
+    console.log(err);
+  }
 };

package/dist/Editor/utils/gridItem.js

@@ -1,15 +1,16 @@
 import { Transforms } from "slate";
-export const gridItem = () => {
+export const gridItem = (props = {}) => {
   return {
     type: "grid-item",
     grid: 6,
     children: [{
       type: "paragraph",
       children: [{
-        text: `About Us`
+        text: " "
       }]
     }],
-    bgColor: "rgba(255, 255, 255, 0)"
+    bgColor: "rgba(255, 255, 255, 0)",
+    ...(props || {})
   };
 };
 export const insertGridItem = editor => {

package/dist/Editor/utils/insertNewLine.js

@@ -0,0 +1,12 @@
+import { Transforms } from "slate";
+const insertNewLine = editor => {
+  Transforms.insertNodes(editor, {
+    type: "paragraph",
+    children: [{
+      text: ""
+    }]
+  }, {
+    at: [editor.children.length]
+  });
+};
+export default insertNewLine;

package/dist/Editor/utils/mentions.js

@@ -1,12 +1,16 @@
 import { Transforms } from "slate";
-export const insertMention = (editor, character) => {
-  const mention = {
-    type: "mention",
-    character,
-    children: [{
-      text: ""
-    }]
-  };
-  Transforms.insertNodes(editor, mention);
-  Transforms.move(editor);
+export const insertMention = (editor, character, type) => {
+  if (type === "mentions") {
+    const mention = {
+      type: "mention",
+      character,
+      children: [{
+        text: ""
+      }]
+    };
+    Transforms.insertNodes(editor, mention);
+    Transforms.move(editor);
+  } else if (type === "elements" && character && character.onInsert) {
+    character.onInsert(editor);
+  }
 };

package/dist/Editor/utils/pageSettings.js

@@ -0,0 +1,67 @@
+import { Editor, Transforms, Element } from "slate";
+export const getPageSettings = editor => {
+  try {
+    const [pageSettingsNode] = Editor.nodes(editor, {
+      at: [],
+      match: n => {
+        return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
+      }
+    });
+    if (pageSettingsNode && pageSettingsNode[0] && pageSettingsNode[1]) {
+      const [element, path] = pageSettingsNode;
+      return {
+        path,
+        element
+      };
+    } else {
+      return {
+        path: null,
+        element: {
+          pageProps: {
+            pageWidth: "fixed"
+          }
+        }
+      };
+    }
+  } catch (err) {
+    console.log(err);
+    return {
+      path: null,
+      element: {}
+    };
+  }
+};
+export const insertPageSettings = (editor, pageProps = {}) => {
+  Transforms.insertNodes(editor, [{
+    type: "page-settings",
+    pageProps: {
+      ...pageProps,
+      pageWidth: "fixed"
+    },
+    children: [{
+      text: ""
+    }]
+  }], {
+    at: [editor.children.length]
+  });
+};
+export const updatePageSettings = (editor, pageProps = {}) => {
+  try {
+    const {
+      path
+    } = getPageSettings(editor);
+    if (path) {
+      Transforms.setNodes(editor, {
+        pageProps: {
+          ...pageProps
+        }
+      }, {
+        at: path
+      });
+    } else {
+      insertPageSettings(editor, pageProps);
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

package/dist/Editor/utils/signature.js

@@ -1,4 +1,5 @@
 import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
 export const insertSignature = editor => {
   const signature = {
     type: "signature",
@@ -9,15 +10,12 @@ export const insertSignature = editor => {
       date: "" // YYYY-MM-DD
     },
 
-    size: {
-      height: 535,
-      widthInPercent: 99.75490196078437,
-      width: 1628.000000000001
-    },
     children: [{
-      text: ""
+      text: " "
     }]
   };
-  Transforms.insertNodes(editor, signature);
-  Transforms.move(editor);
+  Transforms.insertNodes(editor, signature, {
+    at: editor.selection.anchor.path
+  });
+  insertNewLine(editor);
 };

package/dist/Editor/utils/table.js

@@ -1,5 +1,6 @@
 import { Transforms, Editor, Range, Element, Path, Node } from "slate";
 import { ReactEditor } from "slate-react";
+import insertNewLine from "./insertNewLine";
 const prefixKey = (obj, pk = "") => {
   return Object.keys(obj).reduce((a, b) => {
     a[`${pk}${b}`] = obj[b];
@@ -36,18 +37,11 @@ export class TableUtil {
     }, () => ""));
     const newTable = createTableNode(cellText, rows, columns);
     Transforms.insertNodes(this.editor, newTable, {
-      //   mode: "highest",
+      // to insert in current line
+      // at: this.editor.selection.anchor.path,
     });
-    Transforms.insertNodes(this.editor, {
-      type: "paragraph",
-      children: [{
-        text: ""
-      }]
-    }
-    //   { mode: "highest" }
-    );
+    insertNewLine(this.editor);
   };
-
   removeTable = () => {
     Transforms.removeNodes(this.editor, {
       match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
@@ -64,7 +58,7 @@ export class TableUtil {
       const tableDOM = ReactEditor.toDOMNode(this.editor, tableNode[0]);
       return tableDOM;
     } catch (err) {
-      console.log(err);
+      // console.log(err);
     }
   };
   getTotalWidth = (path, colCount = 0) => {
@@ -223,6 +217,21 @@ export class TableUtil {
         }, {
           at: currentCellPath
         });
+
+        // cell bg entire
+        if (cellProps?.entireBgColor) {
+          const {
+            rows
+          } = tableProps;
+          for (let r = 0; r < rows; r++) {
+            Transforms.setNodes(this.editor, {
+              ...cellProps,
+              entireBgColor: cellProps?.entireBgColor
+            }, {
+              at: [currentCellPath[0], r, currentCellPath[2]]
+            });
+          }
+        }
       }
     } catch (err) {
       console.log(err);
@@ -290,6 +299,61 @@ export class TableUtil {
       return null;
     }
   };
+  isCellSelected = selection => {
+    try {
+      if (!selection || Range.isCollapsed(selection) || Editor.string(this.editor, selection) === "") {
+        return false;
+      }
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+      });
+      const [, tableCellPath] = Editor.nodes(this.editor, {
+        at: selection,
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
+      const {
+        anchor,
+        focus
+      } = this.editor.selection || {};
+      if (tableNode && tableNode[0] && tableCellPath && tableCellPath[1] && focus?.path) {
+        let startCell = anchor?.path;
+        let endCell = focus?.path;
+
+        // swap for reverse selection
+        if (startCell[1] > endCell[1]) {
+          startCell = focus?.path;
+          endCell = anchor?.path;
+        } else if (startCell[2] > endCell[2]) {
+          startCell = focus?.path;
+          endCell = anchor?.path;
+        }
+        const {
+          columns
+        } = tableNode[0];
+        const startPath = startCell[0];
+        const startRow = startCell[1];
+        let startCol = startCell[2];
+        const endRow = endCell[1];
+        const endCol = endCell[2];
+        const selectedCellsPath = [];
+        let uptoCol = startRow !== endRow ? columns - 1 : endCol;
+        for (let row = startRow; row <= endRow; row++) {
+          for (let col = startCol; col <= uptoCol; col++) {
+            let nextPath = [startPath, row, col];
+            selectedCellsPath.push(nextPath);
+          }
+          startCol = 0;
+          uptoCol = endCol;
+        }
+        return selectedCellsPath;
+      } else {
+        return false;
+      }
+    } catch (err) {
+      console.log(err);
+      return false;
+    }
+  };
 }
 const createRow = cellText => {
   const newRow = Array.from(cellText, value => createTableCell(value));
@@ -312,13 +376,10 @@ export const createTableCell = text => {
 const createTableNode = (cellText, rows, columns) => {
   const tableChildren = Array.from(cellText, value => createRow(value));
   let tableNode = {
-    type: "paragraph",
-    children: [{
-      type: "table",
-      children: tableChildren,
-      rows,
-      columns
-    }]
+    type: "table",
+    children: tableChildren,
+    rows,
+    columns
   };
   return tableNode;
 };

package/dist/Editor/utils/topBanner.js

@@ -0,0 +1,58 @@
+import { Transforms } from "slate";
+import insertNewLine from "./insertNewLine";
+export const createTopBannerNode = ({
+  url,
+  alt
+}) => ({
+  type: "topbanner",
+  alt,
+  url,
+  children: [{
+    text: " "
+  }],
+  size: {
+    widthInPercent: "100%",
+    height: "auto"
+  }
+});
+export const insertTopBanner = (editor, embedData) => {
+  try {
+    const {
+      url
+    } = embedData;
+    if (!url) return;
+    const embed = createTopBannerNode(embedData);
+    Transforms.insertNodes(editor, embed, {
+      at: [0]
+    });
+    insertNewLine(editor);
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const removeTopBanner = editor => {
+  try {
+    const isTopBanner = editor?.children[0]?.type === "topbanner";
+    if (isTopBanner) {
+      Transforms.removeNodes(editor, {
+        at: [0]
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+export const updateTopBanner = (editor, attr = {}) => {
+  try {
+    const isTopBanner = editor?.children[0]?.type === "topbanner";
+    if (isTopBanner) {
+      Transforms.setNodes(editor, {
+        ...attr
+      }, {
+        at: [0]
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.5.9",
+  "version": "1.6.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -9,6 +9,8 @@
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hocuspocus/provider": "^2.5.0",
@@ -20,6 +22,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "emoji-mart": "^5.5.2",
     "html2canvas": "^1.4.1",
     "husky": "^8.0.3",
     "interweave": "^13.1.0",
@@ -55,7 +58,8 @@
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files"
+    "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
+    "publish:local": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files && rm -rf /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist &&  babel dist -d /Users/dineshkumar/Desktop/devop/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files"
   },
   "eslintConfig": {
     "extends": [

package/dist/Editor/common/MentionsPopup.js

@@ -1,56 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import { Transforms } from "slate";
-import { ReactEditor } from "slate-react";
-import { insertMention } from "../utils/mentions";
-import { jsx as _jsx } from "react/jsx-runtime";
-const MentionsPopup = props => {
-  const {
-    editor,
-    index,
-    target,
-    chars,
-    mentions,
-    setMentions
-  } = props;
-  const ref = useRef(null);
-  useEffect(() => {
-    if (target && chars.length > 0) {
-      const el = ref.current;
-      const domRange = ReactEditor.toDOMRange(editor, target);
-      const rect = domRange.getBoundingClientRect();
-      el.style.top = `${rect.top + window.scrollY + 24}px`;
-      el.style.left = `${rect.left + window.scrollX}px`;
-    }
-  }, [chars.length, editor, index, target]);
-  return target && chars.length > 0 ? /*#__PURE__*/_jsx("div", {
-    ref: ref,
-    style: {
-      top: "-9999px",
-      left: "-9999px",
-      position: "absolute",
-      zIndex: 1,
-      padding: "3px",
-      background: "white",
-      borderRadius: "4px",
-      boxShadow: "0 1px 5px rgba(0,0,0,.2)"
-    },
-    "data-cy": "mentions-portal",
-    children: chars.map((char, i) => /*#__PURE__*/_jsx("div", {
-      onClick: () => {
-        Transforms.select(editor, target);
-        insertMention(editor, char);
-        setMentions({
-          ...mentions,
-          target: null
-        });
-      },
-      style: {
-        padding: "1px 3px",
-        borderRadius: "3px",
-        background: i === index ? "#B4D5FF" : "transparent"
-      },
-      children: char.name
-    }, char))
-  }) : null;
-};
-export default MentionsPopup;