@flozy/editor 1.0.0

package/src/components/Editor/common/MentionsPopup.jsx

@@ -0,0 +1,56 @@
+import React, { useRef, useEffect } from "react";
+import { Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { insertMention } from "../utils/mentions";
+
+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 ? (
+    <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"
+    >
+      {chars.map((char, i) => (
+        <div
+          key={char}
+          onClick={() => {
+            Transforms.select(editor, target);
+            insertMention(editor, char);
+            setMentions({ ...mentions, target: null });
+          }}
+          style={{
+            padding: "1px 3px",
+            borderRadius: "3px",
+            background: i === index ? "#B4D5FF" : "transparent",
+          }}
+        >
+          {char}
+        </div>
+      ))}
+    </div>
+  ) : null;
+};
+
+export default MentionsPopup;

package/src/components/Editor/hooks/useMentions.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { Editor, Range } from "slate";
+
+const useMentions = (props) => {
+  const { editor, selection } = props;
+  const [mentions, setMentions] = useState({
+    target: null,
+    index: null,
+    search: null,
+  });
+
+  useEffect(() => {
+    if (selection && Range.isCollapsed(selection)) {
+      const [start] = Range.edges(selection);
+      const wordBefore = Editor.before(editor, start, { unit: "word" });
+      const before = wordBefore && Editor.before(editor, wordBefore);
+      const beforeRange = before && Editor.range(editor, before, start);
+      const beforeText = beforeRange && Editor.string(editor, beforeRange);
+      const beforeMatch = beforeText && beforeText.match(/^@(\w+)$/);
+      const after = Editor.after(editor, start);
+      const afterRange = Editor.range(editor, start, after);
+      const afterText = Editor.string(editor, afterRange);
+      const afterMatch = afterText.match(/^(\s|$)/);
+
+      if (beforeMatch && afterMatch) {
+        setMentions({
+          target: beforeRange,
+          search: beforeMatch[1],
+          index: 0,
+        });
+      }
+    } else {
+      setMentions({
+        target: null,
+        search: null,
+        index: null,
+      });
+    }
+  }, [selection, editor]);
+
+  return [mentions, setMentions];
+};
+
+export default useMentions;

package/src/components/Editor/hooks/withCollaborative.js

@@ -0,0 +1,15 @@
+import { createEditor } from "slate";
+import { withYjs, withCursors } from "@slate-yjs/core";
+
+const withCollaborative = (props) => {
+  const { provider, sharedType, data } = props;
+  return withCursors(
+    withYjs(createEditor(), sharedType, { autoConnect: false }),
+    provider.awareness,
+    {
+      data,
+    }
+  );
+};
+
+export default withCollaborative;

package/src/components/Editor/hooks/withCommon.js

@@ -0,0 +1,17 @@
+import { withReact } from "slate-react";
+import { withHistory } from "slate-history";
+import withLinks from "../plugins/withLinks";
+import withTables from "../plugins/withTable";
+import withEmbeds from "../plugins/withEmbeds";
+import withEquation from "../plugins/withEquation";
+import withMentions from "../plugins/withMentions";
+
+const withCommon = (props) => {
+  return withEquation(
+    withHistory(
+      withEmbeds(withTables(withLinks(withMentions(withReact(props)))))
+    )
+  );
+};
+
+export default withCommon;

package/src/components/Editor/plugins/withEmbeds.js

@@ -0,0 +1,36 @@
+import {Transforms, Path, Node} from 'slate'
+
+const withEmbeds = (editor) =>{
+    
+    const { isVoid, insertBreak } = editor;
+
+    editor.isVoid = (element) => ['video','image','htmlCode'].includes(element.type) ? true : isVoid(element);
+
+
+
+    editor.insertBreak = (...args) => {
+        const parentPath = Path.parent(editor.selection.focus.path);
+        const parentNode = Node.get(editor, parentPath);
+        // console.log(parentNode);
+        if (editor.isVoid(parentNode)) {
+          const nextPath = Path.next(parentPath);
+          Transforms.insertNodes(
+            editor,
+            {
+              type: 'paragraph',
+              children: [{ text: '' }]
+            }, 
+            {
+              at: nextPath,
+              select: true // Focus on this node once inserted
+            }
+          );
+        } else {
+          insertBreak(...args);
+        }
+    }    
+    return editor;
+}
+
+
+export default withEmbeds

package/src/components/Editor/plugins/withEquation.js

@@ -0,0 +1,8 @@
+const withEquation = (editor) =>{
+    const { isInline } = editor;
+    editor.isInline = (element) =>
+        element.type === 'equation' && element.inline ? true : isInline(element)
+    return editor;
+}
+
+export default withEquation;

package/src/components/Editor/plugins/withLinks.js

@@ -0,0 +1,9 @@
+const withLinks = (editor)=>{
+
+    const { isInline } = editor;
+    editor.isInline = (element) => 
+        element.type === 'link' ? true :isInline(element);
+    return editor;
+};
+
+export default withLinks;

package/src/components/Editor/plugins/withMentions.js

@@ -0,0 +1,19 @@
+const withMentions = (editor) => {
+  const { isInline, isVoid, markableVoid } = editor;
+
+  editor.isInline = (element) => {
+    return element.type === "mention" ? true : isInline(element);
+  };
+
+  editor.isVoid = (element) => {
+    return element.type === "mention" ? true : isVoid(element);
+  };
+
+  editor.markableVoid = (element) => {
+    return element.type === "mention" || markableVoid(element);
+  };
+
+  return editor;
+};
+
+export default withMentions;

package/src/components/Editor/plugins/withTable.js

@@ -0,0 +1,74 @@
+import { Editor, Range, Point, Element } from "slate";
+
+const withTable = (editor) => {
+  const { deleteBackward, deleteForward } = editor;
+
+  editor.deleteBackward = (unit) => {
+    const { selection } = editor;
+    if (selection) {
+      const [cell] = Editor.nodes(editor, {
+        match: (n) =>
+          !Editor.isEditor(n) &&
+          Element.isElement(n) &&
+          n.type === "table-cell",
+      });
+      const prevNodePath = Editor.before(editor, selection);
+
+      const [tableNode] = Editor.nodes(editor, {
+        at: prevNodePath,
+        match: (n) =>
+          !Editor.isEditor(n) && Element.isElement && n.type === "table-cell",
+      });
+
+      if (cell) {
+        const [, cellPath] = cell;
+
+        const start = Editor.start(editor, cellPath);
+        if (Point.equals(selection.anchor, start)) {
+          return;
+        }
+      }
+      if (!cell && tableNode) {
+        return;
+      }
+    }
+
+    deleteBackward(unit);
+  };
+  editor.deleteForward = (unit) => {
+    const { selection } = editor;
+    if (selection && Range.isCollapsed(selection)) {
+      const [cell] = Editor.nodes(editor, {
+        match: (n) =>
+          !Editor.isEditor(n) &&
+          Element.isElement(n) &&
+          n.type === "table-cell",
+      });
+
+      const prevNodePath = Editor.after(editor, selection);
+      const [tableNode] = Editor.nodes(editor, {
+        at: prevNodePath,
+        match: (n) =>
+          !Editor.isEditor(n) && Element.isElement && n.type === "table-cell",
+      });
+
+      if (cell) {
+        const [, cellPath] = cell;
+        const end = Editor.end(editor, cellPath);
+
+        if (Point.equals(selection.anchor, end)) {
+          return;
+        }
+      }
+      if (!cell && tableNode) {
+        return;
+      }
+    }
+
+    deleteForward(unit);
+  };
+
+  return editor;
+};
+
+export default withTable;

package/src/components/Editor/utils/SlateUtilityFunctions.js

@@ -0,0 +1,273 @@
+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 = <strong>{children}</strong>;
+  }
+
+  if (leaf.code) {
+    children = <code>{children}</code>;
+  }
+
+  if (leaf.italic) {
+    children = <em>{children}</em>;
+  }
+  if (leaf.strikethrough) {
+    children = (
+      <span style={{ textDecoration: "line-through" }}>{children}</span>
+    );
+  }
+  if (leaf.underline) {
+    children = <u>{children}</u>;
+  }
+  if (leaf.superscript) {
+    children = <sup>{children}</sup>;
+  }
+  if (leaf.subscript) {
+    children = <sub>{children}</sub>;
+  }
+  if (leaf.color) {
+    children = <span style={{ color: leaf.color }}>{children}</span>;
+  }
+  if (leaf.bgColor) {
+    children = (
+      <span style={{ backgroundColor: leaf.bgColor }}>{children}</span>
+    );
+  }
+  if (leaf.fontSize) {
+    const size = sizeMap[leaf.fontSize];
+    children = <span style={{ fontSize: size }}>{children}</span>;
+  }
+  if (leaf.fontFamily) {
+    const family = fontFamilyMap[leaf.fontFamily];
+    children = <span style={{ fontFamily: family }}>{children}</span>;
+  }
+  return children;
+};
+
+export const getBlock = (props) => {
+  const { element, children } = props;
+  const attributes = props.attributes ?? {};
+
+  switch (element.type) {
+    case "headingOne":
+      return (
+        <h1 {...attributes} {...element.attr}>
+          {children}
+        </h1>
+      );
+    case "headingTwo":
+      return (
+        <h2 {...attributes} {...element.attr}>
+          {children}
+        </h2>
+      );
+    case "headingThree":
+      return (
+        <h3 {...attributes} {...element.attr}>
+          {children}
+        </h3>
+      );
+    case "blockquote":
+      return (
+        <blockquote {...attributes} {...element.attr}>
+          {children}
+        </blockquote>
+      );
+    case "alignLeft":
+      return (
+        <div
+          style={{ listStylePosition: "inside" }}
+          {...attributes}
+          {...element.attr}
+        >
+          {children}
+        </div>
+      );
+    case "alignCenter":
+      return (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            listStylePosition: "inside",
+            flexDirection: "column",
+          }}
+          {...attributes}
+          {...element.attr}
+        >
+          {children}
+        </div>
+      );
+    case "alignRight":
+      return (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "flex-end",
+            listStylePosition: "inside",
+            flexDirection: "column",
+          }}
+          {...attributes}
+          {...element.attr}
+        >
+          {children}
+        </div>
+      );
+    case "list-item":
+      return (
+        <li {...attributes} {...element.attr}>
+          {children}
+        </li>
+      );
+    case "orderedList":
+      return (
+        <ol type="1" {...attributes}>
+          {children}
+        </ol>
+      );
+    case "unorderedList":
+      return <ul {...attributes}>{children}</ul>;
+    case "link":
+      return <Link {...props} />;
+    case "table":
+      return <Table {...props} />;
+    case "table-row":
+      return <tr {...attributes}>{children}</tr>;
+    case "table-cell":
+      return (
+        <td {...element.attr} {...attributes}>
+          {children}
+        </td>
+      );
+    case "image":
+      return <Image {...props} />;
+    case "video":
+      return <Video {...props} />;
+    case "equation":
+      return <Equation {...props} />;
+    case "htmlCode":
+      return <HtmlCode {...props} />;
+    case "mention":
+      return <Mentions {...props} />;
+    case "grid":
+      return <Grid {...props} />;
+    case "grid-item":
+      return <GridItem {...props} />;
+    default:
+      return (
+        <div {...element.attr} {...attributes}>
+          {children}
+        </div>
+      );
+  }
+};

package/src/components/Editor/utils/customHooks/useContextMenu.js

@@ -0,0 +1,42 @@
+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/src/components/Editor/utils/customHooks/useFormat.js

@@ -0,0 +1,26 @@
+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/src/components/Editor/utils/customHooks/usePopup.jsx

@@ -0,0 +1,26 @@
+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/src/components/Editor/utils/customHooks/useResize.js

@@ -0,0 +1,41 @@
+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;