@flozy/editor 1.0.0 → 1.0.5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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