@flozy/editor 1.1.2 → 1.1.4

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -6,6 +6,8 @@ import Video from "../Elements/Embed/Video";
 import Equation from "../Elements/Equation/Equation";
 import HtmlCode from "../Elements/CodeToText/HtmlCode";
 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 Grid from "../Elements/Grid/Grid";
 import GridItem from "../Elements/Grid/GridItem";
@@ -14,6 +16,11 @@ import AccordionSummary from "../Elements/Accordion/AccordionSummary";
 import AccordionDetails from "../Elements/Accordion/AccordionDetails";
 import Signature from "../Elements/Signature/Signature";
 import Signed from "../Elements/Signature/Signed";
+import EditorButton from "../Elements/Button/EditorButton";
+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 { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
@@ -66,8 +73,13 @@ export const toggleMark = (editor, format) => {
   }
 };
 export const isMarkActive = (editor, format) => {
-  const marks = Editor.marks(editor);
-  return marks ? marks[format] === true : false;
+  try {
+    const marks = Editor.marks(editor);
+    return marks ? marks[format] === true : false;
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
 };
 export const isBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
@@ -82,9 +94,14 @@ export const activeMark = (editor, format) => {
     fontSize: "normal",
     fontFamily: "sans"
   };
-  const marks = Editor.marks(editor);
-  const defaultValue = defaultMarkData[format];
-  return marks?.[format] ?? defaultValue;
+  try {
+    const marks = Editor.marks(editor);
+    const defaultValue = defaultMarkData[format];
+    return marks?.[format] ?? defaultValue;
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
 };
 export const getMarked = (leaf, children) => {
   if (leaf.bold) {
@@ -251,20 +268,25 @@ export const getBlock = props => {
         ...props
       });
     case "table-row":
-      return /*#__PURE__*/_jsx("tr", {
-        ...attributes,
-        children: children
+      return /*#__PURE__*/_jsx(TableRow, {
+        ...props
       });
     case "table-cell":
-      return /*#__PURE__*/_jsx("td", {
-        ...element.attr,
-        ...attributes,
-        children: children
+      return /*#__PURE__*/_jsx(TableCell, {
+        ...props
       });
     case "image":
       return /*#__PURE__*/_jsx(Image, {
         ...props
       });
+    case "image-text-wrapper":
+      return /*#__PURE__*/_jsx(ImageTextWrapper, {
+        ...props
+      });
+    case "image-text":
+      return /*#__PURE__*/_jsx(ImageText, {
+        ...props
+      });
     case "video":
       return /*#__PURE__*/_jsx(Video, {
         ...props
@@ -309,6 +331,18 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(Signed, {
         ...props
       });
+    case "button":
+      return /*#__PURE__*/_jsx(EditorButton, {
+        ...props
+      });
+    case "carousel":
+      return /*#__PURE__*/_jsx(Carousel, {
+        ...props
+      });
+    case "carousel-item":
+      return /*#__PURE__*/_jsx(CarouselItem, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/dist/Editor/utils/button.js

@@ -0,0 +1,11 @@
+import { Transforms } from "slate";
+export const insertButton = editor => {
+  const button = {
+    type: "button",
+    children: [{
+      text: ""
+    }]
+  };
+  Transforms.insertNodes(editor, button);
+  Transforms.move(editor);
+};

package/dist/Editor/utils/carousel.js

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

package/dist/Editor/utils/carouselItem.js

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

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

@@ -1,13 +1,13 @@
-import { useState, useEffect } from 'react';
-import useFormat from './useFormat.js';
+import { useState, useEffect } from "react";
+import useFormat from "./useFormat.js";
 
 //This hook returns should we show the custom context menu and where to show it.
 const useContextMenu = (editor, format, setSelection) => {
   const isFormat = useFormat(editor, format);
   const [showMenu, setShowMenu] = useState(false);
   const [menuLocation, setMenuLocation] = useState({
-    top: '0px',
-    left: '0px'
+    top: "0px",
+    left: "0px"
   });
   const handleClick = () => {
     setShowMenu(false);
@@ -25,11 +25,11 @@ const useContextMenu = (editor, format, setSelection) => {
     });
   };
   useEffect(() => {
-    document.addEventListener('click', handleClick);
-    document.addEventListener('contextmenu', handleContextMenu);
+    document.addEventListener("click", handleClick);
+    document.addEventListener("contextmenu", handleContextMenu);
     return () => {
-      document.removeEventListener('click', handleClick);
-      document.removeEventListener('contextmenu', handleContextMenu);
+      document.removeEventListener("click", handleClick);
+      document.removeEventListener("contextmenu", handleContextMenu);
     };
   }, [isFormat]);
   return [showMenu, menuLocation];

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

@@ -14,7 +14,7 @@ const useResize = ({
     ...defaultSize
   });
   const [resizing, setResizing] = useState(false);
-  const onLoad = dom => {
+  const onLoad = defaultSize => {
     setSize({
       widthInPercent: 100,
       height: 300,

package/dist/Editor/utils/font.js

@@ -1,8 +1,8 @@
 export const sizeMap = {
-  small: "12",
-  normal: "16",
-  medium: "28",
-  huge: "40"
+  small: "12px",
+  normal: "16px",
+  medium: "28px",
+  huge: "40px"
 };
 export const fontFamilyMap = {
   sans: "Helvetica,Arial, sans serif",

package/dist/Editor/utils/helper.js

@@ -13,4 +13,20 @@ export const formatDate = (date, format = "MM/DD/YYYY") => {
     default:
       return [year, month, day].join("-");
   }
+};
+export const convertBase64 = file => {
+  return new Promise((resolve, reject) => {
+    if (file) {
+      const fileReader = new FileReader();
+      fileReader.readAsDataURL(file);
+      fileReader.onload = () => {
+        resolve(fileReader.result);
+      };
+      fileReader.onerror = error => {
+        reject(error);
+      };
+    } else {
+      resolve("");
+    }
+  });
 };

package/dist/Editor/utils/imageText.js

@@ -0,0 +1,19 @@
+import { Transforms } from "slate";
+export const insertImageText = (editor, path) => {
+  const imageText = {
+    type: "image-text",
+    grid: "container",
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: "sample text"
+      }]
+    }]
+  };
+  if (path) {
+    Transforms.insertNodes(editor, imageText, {
+      at: path
+    });
+  }
+  return imageText;
+};

package/dist/Editor/utils/table.js

@@ -1,4 +1,19 @@
 import { Transforms, Editor, Range, Element, Path } from "slate";
+const prefixKey = (obj, pk = "") => {
+  return Object.keys(obj).reduce((a, b) => {
+    a[`${pk}${b}`] = obj[b];
+    return a;
+  }, {});
+};
+const parseByPrefixKey = (obj, pk = "") => {
+  return Object.keys(obj).reduce((a, b) => {
+    if (b.indexOf(pk) !== -1 && pk) {
+      const key = b.split(pk)[1];
+      a[key] = obj[b];
+    }
+    return a;
+  }, {});
+};
 export class TableUtil {
   constructor(editor) {
     this.editor = editor;
@@ -64,6 +79,31 @@ export class TableUtil {
       }
     }
   };
+  deleteRow = () => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
+      });
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [, currentRow] = tableNode;
+        const path = currentRow;
+        Transforms.removeNodes(this.editor, {
+          at: path
+        });
+        Transforms.setNodes(this.editor, {
+          rows: table.rows - 1
+        }, {
+          at: tablePath
+        });
+      }
+    }
+  };
   insertColumn = action => {
     const {
       selection
@@ -95,6 +135,138 @@ export class TableUtil {
       }
     }
   };
+  deleteColumn = () => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
+      if (tableNode) {
+        const [[table, tablePath]] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [, currentCell] = tableNode;
+        const startPath = currentCell;
+
+        // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
+        startPath[startPath.length - 2] = 0;
+        for (let row = 0; row < table.rows; row++) {
+          Transforms.removeNodes(this.editor, {
+            at: startPath
+          });
+          startPath[startPath.length - 2]++;
+        }
+        Transforms.setNodes(this.editor, {
+          columns: table.columns - 1
+        }, {
+          at: tablePath
+        });
+      }
+    }
+  };
+  updateTableStyle = (styleProps, paths) => {
+    try {
+      const {
+        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.");
+        const {
+          currentCellPath,
+          currentRowPath,
+          currentTablePath
+        } = paths;
+        console.log(tableProps, rowProps, cellProps);
+        Transforms.setNodes(this.editor, {
+          ...tableProps
+        }, {
+          at: currentTablePath
+        });
+        Transforms.setNodes(this.editor, {
+          ...rowProps,
+          tableBorder: tableProps?.borderColor
+        }, {
+          at: currentRowPath
+        });
+        Transforms.setNodes(this.editor, {
+          ...cellProps,
+          rowBorder: rowProps?.borderColor,
+          tableBorder: tableProps?.borderColor
+        }, {
+          at: currentCellPath
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  getTableProps = () => {
+    const {
+      selection
+    } = this.editor;
+    if (!!selection && Range.isCollapsed(selection)) {
+      const [tableNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+      });
+      const [tableCellNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
+      const [tableRowNode] = Editor.nodes(this.editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
+      });
+      if (tableNode && tableCellNode && tableRowNode) {
+        const [currentTable, currentTablePath] = tableNode;
+        const [currentCell, currentCellPath] = tableCellNode;
+        const [currentRow, currentRowPath] = tableRowNode;
+        const startPath = currentCell;
+        Transforms.setNodes(this.editor, {
+          cellBgColor: "#FFFFFF"
+        }, {
+          at: startPath
+        });
+        if (currentTable && currentCell && currentRow) {
+          const currentTableProps = {
+            ...currentTable
+          };
+          delete currentTableProps.children;
+          delete currentTableProps.type;
+          const currentCellProps = {
+            ...currentCell
+          };
+          delete currentCellProps.children;
+          delete currentCellProps.type;
+          const currentRowProps = {
+            ...currentRow
+          };
+          delete currentRowProps.children;
+          delete currentRowProps.type;
+          return {
+            styleProps: {
+              ...prefixKey({
+                ...currentTableProps
+              }, "table."),
+              ...prefixKey({
+                ...currentRowProps
+              }, "row."),
+              ...prefixKey({
+                ...currentCellProps
+              }, "col.")
+            },
+            currentCellPath,
+            currentRowPath,
+            currentTablePath
+          };
+        }
+        return null;
+      }
+      return null;
+    }
+  };
 }
 const createRow = cellText => {
   const newRow = Array.from(cellText, value => createTableCell(value));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -27,6 +27,7 @@
     "react-katex": "^3.0.1",
     "react-scripts": "5.0.1",
     "react-signature-canvas": "^1.0.6",
+    "react-slick": "^0.29.0",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.3",