@flozy/editor 1.1.5 → 1.1.6

package/dist/Editor/plugins/withLinks.js

@@ -1,8 +1,46 @@
+import { Transforms, Element, Node } from "slate";
+const INLINE_ELLEMENTS = ["link", "chip-text", "drawer"];
 const withLinks = editor => {
   const {
-    isInline
+    isInline,
+    deleteBackward,
+    normalizeNode
   } = editor;
-  editor.isInline = element => element.type === 'link' ? true : isInline(element);
+  editor.isInline = element => INLINE_ELLEMENTS.indexOf(element.type) > -1 ? true : isInline(element);
+
+  // remove empty inline
+  editor.normalizeNode = entry => {
+    const [node, path] = entry;
+    if (Element.isElement(node) && node.type === "paragraph") {
+      const children = Array.from(Node.children(editor, path));
+      for (const [child, childPath] of children) {
+        // remove link nodes whose text value is empty string.
+        // empty text links happen when you move from link to next line or delete link line.
+        if (Element.isElement(child) && INLINE_ELLEMENTS.indexOf(child.type) > -1 && child.children[0].text === "") {
+          if (children.length === 1) {
+            Transforms.removeNodes(editor, {
+              at: path
+            });
+            Transforms.insertNodes(editor, {
+              type: "paragraph",
+              children: [{
+                text: ""
+              }]
+            });
+          } else {
+            Transforms.removeNodes(editor, {
+              at: childPath
+            });
+          }
+          return;
+        }
+      }
+    }
+    normalizeNode(entry);
+  };
+  editor.deleteBackward = unit => {
+    deleteBackward(unit);
+  };
   return editor;
 };
 export default withLinks;

package/dist/Editor/plugins/withTable.js

@@ -1,10 +1,19 @@
-import { Editor, Range, Point, Element } from "slate";
+import { Editor, Range, Point, Element, Transforms } from "slate";
 const NON_DELETABLE_BLOCKS = ["table-cell", "carousel-item"];
 const withTable = editor => {
   const {
     deleteBackward,
     deleteForward
   } = editor;
+  editor.insertData = data => {
+    try {
+      const text = data.getData("text/plain");
+      Transforms.insertText(editor, text);
+      return;
+    } catch (err) {
+      console.log(err);
+    }
+  };
   editor.deleteBackward = unit => {
     const {
       selection

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -21,6 +21,8 @@ import Carousel from "../Elements/Carousel/Carousel";
 import CarouselItem from "../Elements/Carousel/CarouselItem";
 import ImageTextWrapper from "../Elements/ImageText/ImageTextWrapper";
 import ImageText from "../Elements/ImageText/ImageText";
+import ChipText from "../Elements/ChipText/ChipText";
+import DrawerMenu from "../Elements/DrawerMenu/DrawerMenu";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -343,6 +345,14 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(CarouselItem, {
         ...props
       });
+    case "chip-text":
+      return /*#__PURE__*/_jsx(ChipText, {
+        ...props
+      });
+    case "drawer":
+      return /*#__PURE__*/_jsx(DrawerMenu, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

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

@@ -0,0 +1,46 @@
+import { useState } from "react";
+const useTableResize = ({
+  parentDOM,
+  size: defaultSize
+}) => {
+  const {
+    width
+  } = parentDOM?.getBoundingClientRect() || {
+    ...defaultSize
+  };
+  const [size, setSize] = useState({
+    height: 300,
+    widthInPercent: 100,
+    ...defaultSize
+  });
+  const [resizing, setResizing] = useState(false);
+  const onLoad = defaultSize => {
+    setSize({
+      widthInPercent: 100,
+      height: 300,
+      ...defaultSize
+    });
+  };
+  const onMouseDown = () => {
+    document.addEventListener("pointermove", onMouseMove);
+    document.addEventListener("pointerup", onMouseUp);
+    setResizing(true);
+  };
+  const onMouseUp = () => {
+    document.removeEventListener("pointermove", onMouseMove);
+    document.removeEventListener("pointerup", onMouseUp);
+    setResizing(false);
+  };
+  const onMouseMove = e => {
+    setSize(currentSize => {
+      const calcWidth = currentSize?.width + e.movementX;
+      return {
+        width: calcWidth,
+        height: currentSize.height + e.movementY,
+        widthInPercent: calcWidth / width * 100
+      };
+    });
+  };
+  return [size, onMouseDown, resizing, onLoad];
+};
+export default useTableResize;

package/dist/Editor/utils/insertChipText.js

@@ -0,0 +1,49 @@
+import { Editor, Transforms, Path, Range, Element } from "slate";
+export const createChipTextNode = (href, showInNewTab, text) => ({
+  type: "chip-text",
+  href,
+  target: showInNewTab ? "_blank" : "_self",
+  children: [{
+    text
+  }]
+});
+export const insertChipText = (editor, {
+  url,
+  showInNewTab
+}) => {
+  const {
+    selection
+  } = editor;
+  const chipText = createChipTextNode(url, showInNewTab, "Chip Text");
+  if (!!selection) {
+    const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
+    if (editor.isVoid(parent)) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [chipText]
+      }, {
+        at: Path.next(parentPath),
+        select: true
+      });
+    } else if (Range.isCollapsed(selection)) {
+      Transforms.insertNodes(editor, chipText, {
+        select: true
+      });
+    } else {
+      Transforms.wrapNodes(editor, chipText, {
+        split: true
+      });
+    }
+  } else {
+    Transforms.insertNodes(editor, {
+      type: "paragraph",
+      children: [chipText]
+    });
+  }
+};
+export const removeChipText = (editor, path) => {
+  Transforms.unwrapNodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "chip-text"
+  });
+};

package/dist/Editor/utils/insertDrawerMenu.js

@@ -0,0 +1,52 @@
+import { Editor, Transforms, Path, Range, Element } from "slate";
+export const createDrawerMenuNode = ({
+  text
+}) => ({
+  type: "drawer",
+  anchor: "left",
+  menus: [{
+    type: "menu",
+    text: "Menu 1",
+    url: "http://google.com"
+  }],
+  children: [{
+    text: "Menu"
+  }]
+});
+export const insertDrawerMenu = (editor, props) => {
+  const {
+    selection
+  } = editor;
+  const drawerMenu = createDrawerMenuNode(props);
+  if (!!selection) {
+    const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
+    if (editor.isVoid(parent)) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [drawerMenu]
+      }, {
+        at: Path.next(parentPath),
+        select: true
+      });
+    } else if (Range.isCollapsed(selection)) {
+      Transforms.insertNodes(editor, drawerMenu, {
+        select: true
+      });
+    } else {
+      Transforms.wrapNodes(editor, drawerMenu, {
+        split: true
+      });
+    }
+  } else {
+    Transforms.insertNodes(editor, {
+      type: "paragraph",
+      children: [drawerMenu]
+    });
+  }
+};
+export const removeDrawerMenu = (editor, path) => {
+  Transforms.unwrapNodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "drawer"
+  });
+};

package/dist/Editor/utils/table.js

@@ -1,4 +1,5 @@
-import { Transforms, Editor, Range, Element, Path } from "slate";
+import { Transforms, Editor, Range, Element, Path, Node } from "slate";
+import { ReactEditor } from "slate-react";
 const prefixKey = (obj, pk = "") => {
   return Object.keys(obj).reduce((a, b) => {
     a[`${pk}${b}`] = obj[b];
@@ -54,6 +55,30 @@ export class TableUtil {
     });
   };
 
+  getDOMNode = path => {
+    try {
+      const [tableNode] = Editor.nodes(this.editor, {
+        at: path,
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+      });
+      const tableDOM = ReactEditor.toDOMNode(this.editor, tableNode[0]);
+      return tableDOM;
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  getTotalWidth = (path, colCount = 0) => {
+    try {
+      let totalWidth = 0;
+      for (let i = 0; i < colCount; i++) {
+        const dom = ReactEditor.toDOMNode(this.editor, Node.get(this.editor, [...path, 0, i]));
+        totalWidth += parseFloat(dom.style.width);
+      }
+      return totalWidth;
+    } catch (err) {
+      console.log(err);
+    }
+  };
   insertRow = action => {
     const {
       selection
@@ -172,7 +197,6 @@ export class TableUtil {
         selection
       } = this.editor;
       if (!!selection && Range.isCollapsed(selection)) {
-        console.log("styleProps", styleProps);
         const tableProps = parseByPrefixKey(styleProps, "table.");
         const rowProps = parseByPrefixKey(styleProps, "row.");
         const cellProps = parseByPrefixKey(styleProps, "col.");
@@ -181,7 +205,6 @@ export class TableUtil {
           currentRowPath,
           currentTablePath
         } = paths;
-        console.log(tableProps, rowProps, cellProps);
         Transforms.setNodes(this.editor, {
           ...tableProps
         }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -22,6 +22,7 @@
     "interweave": "^13.1.0",
     "lint-staged": "^13.2.3",
     "prettier": "^3.0.1",
+    "react-best-gradient-color-picker": "^2.2.23",
     "react-datepicker": "^4.18.0",
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",