@flozy/editor 1.0.5 → 1.0.7

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -0,0 +1,224 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { Editor, Transforms, Element as SlateElement } from "slate";
+import Link from "../Elements/Link/Link";
+import Image from "../Elements/Embed/Image";
+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 Mentions from "../Elements/Mentions/Mentions";
+import Grid from "../Elements/Grid/Grid";
+import GridItem from "../Elements/Grid/GridItem";
+const alignment = ["alignLeft", "alignRight", "alignCenter"];
+const list_types = ["orderedList", "unorderedList"];
+export const sizeMap = {
+  small: "0.75em",
+  normal: "1em",
+  medium: "1.75em",
+  huge: "2.5em"
+};
+export const fontFamilyMap = {
+  sans: "Helvetica,Arial, sans serif",
+  serif: "Georgia, Times New Roaman,serif",
+  monospace: "Monaco, Courier New,monospace"
+};
+export const toggleBlock = (editor, format) => {
+  const isActive = isBlockActive(editor, format);
+  const isList = list_types.includes(format);
+  const isIndent = alignment.includes(format);
+  const isAligned = alignment.some(alignmentType => isBlockActive(editor, alignmentType));
+
+  /*If the node is already aligned and change in indent is called we should unwrap it first and split the node to prevent
+    messy, nested DOM structure and bugs due to that.*/
+  if (isAligned && isIndent) {
+    Transforms.unwrapNodes(editor, {
+      match: n => alignment.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
+      split: true
+    });
+  }
+
+  /* Wraping the nodes for alignment, to allow it to co-exist with other block level operations*/
+  if (isIndent) {
+    Transforms.wrapNodes(editor, {
+      type: format,
+      children: []
+    });
+    return;
+  }
+  Transforms.unwrapNodes(editor, {
+    match: n => list_types.includes(!Editor.isEditor(n) && SlateElement.isElement(n) && n.type),
+    split: true
+  });
+  Transforms.setNodes(editor, {
+    type: isActive ? "paragraph" : isList ? "list-item" : format
+  });
+  if (isList && !isActive) {
+    Transforms.wrapNodes(editor, {
+      type: format,
+      children: []
+    });
+  }
+};
+export const addMarkData = (editor, data) => {
+  Editor.addMark(editor, data.format, data.value);
+};
+export const toggleMark = (editor, format) => {
+  const isActive = isMarkActive(editor, format);
+  if (isActive) {
+    Editor.removeMark(editor, format);
+  } else {
+    Editor.addMark(editor, format, true);
+  }
+};
+export const isMarkActive = (editor, format) => {
+  const marks = Editor.marks(editor);
+  return marks ? marks[format] === true : false;
+};
+export const isBlockActive = (editor, format) => {
+  const [match] = Editor.nodes(editor, {
+    match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
+  });
+  return !!match;
+};
+export const activeMark = (editor, format) => {
+  const defaultMarkData = {
+    color: "black",
+    bgColor: "black",
+    fontSize: "normal",
+    fontFamily: "sans"
+  };
+  const marks = Editor.marks(editor);
+  const defaultValue = defaultMarkData[format];
+  return marks?.[format] ?? defaultValue;
+};
+export const getMarked = (leaf, children) => {
+  if (leaf.bold) {
+    children = /*#__PURE__*/React.createElement("strong", null, children);
+  }
+  if (leaf.code) {
+    children = /*#__PURE__*/React.createElement("code", null, children);
+  }
+  if (leaf.italic) {
+    children = /*#__PURE__*/React.createElement("em", null, children);
+  }
+  if (leaf.strikethrough) {
+    children = /*#__PURE__*/React.createElement("span", {
+      style: {
+        textDecoration: "line-through"
+      }
+    }, children);
+  }
+  if (leaf.underline) {
+    children = /*#__PURE__*/React.createElement("u", null, children);
+  }
+  if (leaf.superscript) {
+    children = /*#__PURE__*/React.createElement("sup", null, children);
+  }
+  if (leaf.subscript) {
+    children = /*#__PURE__*/React.createElement("sub", null, children);
+  }
+  if (leaf.color) {
+    children = /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: leaf.color
+      }
+    }, children);
+  }
+  if (leaf.bgColor) {
+    children = /*#__PURE__*/React.createElement("span", {
+      style: {
+        backgroundColor: leaf.bgColor
+      }
+    }, children);
+  }
+  if (leaf.fontSize) {
+    const size = sizeMap[leaf.fontSize];
+    children = /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: size
+      }
+    }, children);
+  }
+  if (leaf.fontFamily) {
+    const family = fontFamilyMap[leaf.fontFamily];
+    children = /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontFamily: family
+      }
+    }, children);
+  }
+  return children;
+};
+export const getBlock = props => {
+  const {
+    element,
+    children
+  } = props;
+  const attributes = props.attributes ?? {};
+  switch (element.type) {
+    case "headingOne":
+      return /*#__PURE__*/React.createElement("h1", _extends({}, attributes, element.attr), children);
+    case "headingTwo":
+      return /*#__PURE__*/React.createElement("h2", _extends({}, attributes, element.attr), children);
+    case "headingThree":
+      return /*#__PURE__*/React.createElement("h3", _extends({}, attributes, element.attr), children);
+    case "blockquote":
+      return /*#__PURE__*/React.createElement("blockquote", _extends({}, attributes, element.attr), children);
+    case "alignLeft":
+      return /*#__PURE__*/React.createElement("div", _extends({
+        style: {
+          listStylePosition: "inside"
+        }
+      }, attributes, element.attr), children);
+    case "alignCenter":
+      return /*#__PURE__*/React.createElement("div", _extends({
+        style: {
+          display: "flex",
+          alignItems: "center",
+          listStylePosition: "inside",
+          flexDirection: "column"
+        }
+      }, attributes, element.attr), children);
+    case "alignRight":
+      return /*#__PURE__*/React.createElement("div", _extends({
+        style: {
+          display: "flex",
+          alignItems: "flex-end",
+          listStylePosition: "inside",
+          flexDirection: "column"
+        }
+      }, attributes, element.attr), children);
+    case "list-item":
+      return /*#__PURE__*/React.createElement("li", _extends({}, attributes, element.attr), children);
+    case "orderedList":
+      return /*#__PURE__*/React.createElement("ol", _extends({
+        type: "1"
+      }, attributes), children);
+    case "unorderedList":
+      return /*#__PURE__*/React.createElement("ul", attributes, children);
+    case "link":
+      return /*#__PURE__*/React.createElement(Link, props);
+    case "table":
+      return /*#__PURE__*/React.createElement(Table, props);
+    case "table-row":
+      return /*#__PURE__*/React.createElement("tr", attributes, children);
+    case "table-cell":
+      return /*#__PURE__*/React.createElement("td", _extends({}, element.attr, attributes), children);
+    case "image":
+      return /*#__PURE__*/React.createElement(Image, props);
+    case "video":
+      return /*#__PURE__*/React.createElement(Video, props);
+    case "equation":
+      return /*#__PURE__*/React.createElement(Equation, props);
+    case "htmlCode":
+      return /*#__PURE__*/React.createElement(HtmlCode, props);
+    case "mention":
+      return /*#__PURE__*/React.createElement(Mentions, props);
+    case "grid":
+      return /*#__PURE__*/React.createElement(Grid, props);
+    case "grid-item":
+      return /*#__PURE__*/React.createElement(GridItem, props);
+    default:
+      return /*#__PURE__*/React.createElement("div", _extends({}, element.attr, attributes), children);
+  }
+};

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

@@ -0,0 +1,37 @@
+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'
+  });
+  const handleClick = () => {
+    setShowMenu(false);
+  };
+  const handleContextMenu = e => {
+    if (!isFormat) return;
+    setSelection(editor.selection);
+    e.preventDefault();
+    setShowMenu(true);
+    const xPos = e.pageX + "px";
+    const yPos = e.pageY + "px";
+    setMenuLocation({
+      top: yPos,
+      left: xPos
+    });
+  };
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    document.addEventListener('contextmenu', handleContextMenu);
+    return () => {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('contextmenu', handleContextMenu);
+    };
+  }, [isFormat]);
+  return [showMenu, menuLocation];
+};
+export default useContextMenu;

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

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { Editor, Element } from 'slate';
+
+// This hook returns if the node in the current selection matches the format passed to it.
+const useFormat = (editor, format) => {
+  const [isFormat, setIsFormat] = useState(false);
+  useEffect(() => {
+    if (editor.selection) {
+      // It matches at the editor.selection location by default, so if null handle it seperately.
+      const [node] = Editor.nodes(editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === format
+      });
+      setIsFormat(!!node);
+    } else {
+      setIsFormat(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.selection]);
+  return isFormat;
+};
+export default useFormat;

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

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+//This hook returns if the click was inside the popUp ref or outside it .
+function usePopup(popupRef) {
+  const [showPopup, setShowPopup] = useState(false);
+  useEffect(() => {
+    const handleDocumentClick = e => {
+      const clickedComponent = e.target;
+      if (!popupRef?.current?.contains(clickedComponent)) {
+        setShowPopup(false);
+      }
+    };
+    document.addEventListener('click', handleDocumentClick);
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return [showPopup, setShowPopup];
+}
+export default usePopup;

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

@@ -0,0 +1,47 @@
+import { useState } from "react";
+const useResize = ({
+  parentDOM,
+  size: defaultSize
+}) => {
+  const {
+    width
+  } = parentDOM?.getBoundingClientRect() || {
+    ...defaultSize
+  };
+  const [size, setSize] = useState({
+    height: 300,
+    widthInPercent: 100,
+    ...defaultSize
+  });
+  const [resizing, setResizing] = useState(false);
+  const onLoad = dom => {
+    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 widthInPX = currentSize.widthInPercent / 100 * width;
+      const calcWidth = widthInPX + e.movementX;
+      return {
+        width: calcWidth,
+        height: currentSize.height + e.movementY,
+        widthInPercent: calcWidth / width * 100
+      };
+    });
+  };
+  return [size, onMouseDown, resizing, onLoad];
+};
+export default useResize;

package/dist/Editor/utils/draftToSlate.js

@@ -0,0 +1,111 @@
+const getStyle = (text, inlineStyle, data) => {
+  if (inlineStyle?.style) {
+    switch (inlineStyle?.style) {
+      case "BOLD":
+        return {
+          text,
+          bold: true
+        };
+      case "ITALIC":
+        return {
+          text,
+          italic: true
+        };
+      default:
+        return {
+          text
+        };
+    }
+  } else if (inlineStyle?.key !== undefined) {
+    const entityData = data?.entityMap[inlineStyle?.key];
+    switch (entityData?.type) {
+      case "mention":
+        return {
+          character: text,
+          type: entityData?.type,
+          data: entityData?.data,
+          children: [{
+            text: ""
+          }]
+        };
+      default:
+        return {
+          text
+        };
+    }
+  } else {
+    return {
+      text
+    };
+  }
+};
+const splitInlineStyleRanges = (text, inlineStyleRanges, data) => {
+  if (inlineStyleRanges.length > 0) {
+    let currentOffset = 0;
+    let allRanges = [];
+    for (let i = 0; i < inlineStyleRanges.length; i++) {
+      const {
+        offset,
+        length
+      } = inlineStyleRanges[i];
+      if (currentOffset < offset) {
+        allRanges.push({
+          offset: currentOffset,
+          length: offset - currentOffset
+        });
+        allRanges.push({
+          offset,
+          length
+        });
+        currentOffset = offset + length;
+      }
+    }
+    // last line push
+    if (currentOffset < text.length) {
+      allRanges.push({
+        offset: currentOffset,
+        length: text.length - currentOffset
+      });
+    }
+    const splits = allRanges.reduce((a, b) => {
+      a.push({
+        ...getStyle(text.substr(b.offset, b.length), inlineStyleRanges.find(f => f.offset === b.offset && f.length === b.length), data)
+      });
+      return a;
+    }, []);
+    return splits;
+  } else {
+    return [text];
+  }
+};
+export const draftToSlate = props => {
+  const {
+    data
+  } = props;
+  if (data?.blocks && data?.blocks?.length > 0) {
+    const converted = data?.blocks?.reduce((a, b) => {
+      if (b?.text !== undefined) {
+        const blocks = splitInlineStyleRanges(b?.text, [...b?.inlineStyleRanges, ...b?.entityRanges], data).map(m => {
+          return {
+            ...m
+          };
+        });
+        a.push({
+          type: "paragraph",
+          children: blocks
+        });
+      }
+      return a;
+    }, []);
+    return converted;
+  } else if (data?.length) {
+    return data;
+  } else {
+    return [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }];
+  }
+};

package/dist/Editor/utils/embed.js

@@ -0,0 +1,24 @@
+import { Transforms } from "slate";
+import { createParagraph } from "./paragraph";
+export const createEmbedNode = (type, {
+  url,
+  alt
+}) => ({
+  type,
+  alt,
+  url,
+  children: [{
+    text: ""
+  }]
+});
+export const insertEmbed = (editor, embedData, format) => {
+  const {
+    url
+  } = embedData;
+  if (!url) return;
+  const embed = createEmbedNode(format, embedData);
+  Transforms.insertNodes(editor, embed, {
+    select: true
+  });
+  Transforms.insertNodes(editor, createParagraph(""));
+};

package/dist/Editor/utils/equation.js

@@ -0,0 +1,23 @@
+import { Transforms, Range } from "slate";
+const createEquationNode = (math, inline) => ({
+  type: 'equation',
+  inline,
+  math,
+  children: [{
+    text: ''
+  }]
+});
+export const insertEquation = (editor, math, inline) => {
+  const equation = createEquationNode(math, inline);
+  const {
+    selection
+  } = editor;
+  if (!!selection) {
+    if (Range.isExpanded(selection)) Transforms.collapse(editor, {
+      edge: 'end'
+    });
+    Transforms.insertNodes(editor, equation, {
+      select: true
+    });
+  }
+};

package/dist/Editor/utils/events.js

@@ -0,0 +1,76 @@
+import { Transforms, Editor } from "slate";
+import { insertMention } from "./mentions";
+const HOTKEYS = {
+  b: "bold",
+  i: "italic",
+  u: "underline"
+};
+export const mentionsEvent = props => {
+  const {
+    event,
+    mentions,
+    setMentions,
+    chars,
+    editor
+  } = props;
+  const {
+    index,
+    target
+  } = mentions;
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      const prevIndex = index >= chars.length - 1 ? 0 : index + 1;
+      setMentions({
+        ...mentions,
+        index: prevIndex
+      });
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      const nextIndex = index <= 0 ? chars.length - 1 : index - 1;
+      setMentions({
+        ...mentions,
+        index: nextIndex
+      });
+      break;
+    case "Tab":
+    case "Enter":
+      event.preventDefault();
+      Transforms.select(editor, target);
+      insertMention(editor, chars[index]);
+      setMentions({
+        ...mentions,
+        target: null
+      });
+      break;
+    case "Escape":
+      event.preventDefault();
+      setMentions({
+        ...mentions,
+        target: null
+      });
+      break;
+    default:
+      break;
+  }
+};
+const isMarkActive = (editor, format) => {
+  const marks = Editor.marks(editor);
+  return marks ? marks[format] === true : false;
+};
+export const commands = props => {
+  const {
+    event,
+    editor
+  } = props;
+  if (HOTKEYS[event.key]) {
+    event.preventDefault();
+    const isActive = isMarkActive(editor, HOTKEYS[event.key]);
+    if (isActive) {
+      Editor.removeMark(editor, HOTKEYS[event.key]);
+    } else {
+      Editor.addMark(editor, HOTKEYS[event.key], true);
+    }
+  }
+};

package/dist/Editor/utils/grid.js

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

package/dist/Editor/utils/gridItem.js

@@ -0,0 +1,19 @@
+import { Transforms } from "slate";
+export const gridItem = () => {
+  return {
+    type: "grid-item",
+    grid: 6,
+    children: [{
+      type: "paragraph",
+      children: [{
+        text: `Grid Item Text - ${new Date().getTime()}`
+      }]
+    }]
+  };
+};
+export const insertGridItem = editor => {
+  Transforms.insertNodes(editor, {
+    ...gridItem()
+  });
+  Transforms.move(editor);
+};

package/dist/Editor/utils/link.js

@@ -0,0 +1,52 @@
+import { Editor, Transforms, Path, Range, Element } from 'slate';
+export const createLinkNode = (href, showInNewTab, text) => ({
+  type: 'link',
+  href,
+  target: showInNewTab ? '_blank' : '_self',
+  children: [{
+    text
+  }]
+});
+export const insertLink = (editor, {
+  url,
+  showInNewTab
+}) => {
+  if (!url) return;
+  const {
+    selection
+  } = editor;
+  const link = createLinkNode(url, showInNewTab, 'Link');
+  if (!!selection) {
+    const [parent, parentPath] = Editor.parent(editor, selection.focus.path);
+    if (parent.type === 'link') {
+      removeLink(editor);
+    }
+    if (editor.isVoid(parent)) {
+      Transforms.insertNodes(editor, {
+        type: 'paragraph',
+        children: [link]
+      }, {
+        at: Path.next(parentPath),
+        select: true
+      });
+    } else if (Range.isCollapsed(selection)) {
+      Transforms.insertNodes(editor, link, {
+        select: true
+      });
+    } else {
+      Transforms.wrapNodes(editor, link, {
+        split: true
+      });
+    }
+  } else {
+    Transforms.insertNodes(editor, {
+      type: 'paragraph',
+      children: [link]
+    });
+  }
+};
+export const removeLink = editor => {
+  Transforms.unwrapNodes(editor, {
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link'
+  });
+};

package/dist/Editor/utils/mentions.js

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

package/dist/Editor/utils/paragraph.js

@@ -0,0 +1,6 @@
+export const createParagraph = text => ({
+  type: 'paragraph',
+  children: [{
+    text
+  }]
+});