@springmicro/rte 0.1.3 → 0.1.10

package/src/slate/toolbar/toolbar-groups.ts

@@ -1,213 +0,0 @@
-export type ToolbarGroup = {
-  id: number;
-  format: string;
-  type: string;
-  options?: Array<{ text: string; value: string }>;
-};
-
-const fonts: ToolbarGroup[] = [
-  {
-    id: 1,
-    format: "fontFamily",
-    type: "dropdown",
-    options: [
-      { text: "Sans Serif", value: "sans-serif" },
-      { text: "Serif", value: "serif" },
-      { text: "MonoSpace", value: "monospace" },
-    ],
-  },
-  {
-    id: 2,
-    format: "fontSize",
-    type: "dropdown",
-    options: [
-      { text: "Small", value: "small" },
-      { text: "Normal", value: "normal" },
-      { text: "Medium", value: "medium" },
-      { text: "Huge", value: "huge" },
-    ],
-  },
-];
-
-const fontStyles: ToolbarGroup[] = [
-  {
-    id: 3,
-    format: "bold",
-    type: "mark",
-  },
-  {
-    id: 4,
-    format: "italic",
-    type: "mark",
-  },
-  {
-    id: 5,
-    format: "underline",
-    type: "mark",
-  },
-  {
-    id: 6,
-    format: "strikethrough",
-    type: "mark",
-  },
-];
-
-const colors: ToolbarGroup[] = [
-  {
-    id: 7,
-    format: "color",
-    type: "color-picker",
-  },
-  {
-    id: 8,
-    format: "bgColor",
-    type: "color-picker",
-  },
-];
-
-const subsuper: ToolbarGroup[] = [
-  {
-    id: 9,
-    format: "superscript",
-    type: "mark",
-  },
-  {
-    id: 10,
-    format: "subscript",
-    type: "mark",
-  },
-];
-
-const headings: ToolbarGroup[] = [
-  {
-    id: 11,
-    format: "h1",
-    type: "block",
-  },
-  {
-    id: 12,
-    format: "h2",
-    type: "block",
-  },
-  {
-    id: 13,
-    format: "h3",
-    type: "block",
-  },
-  {
-    id: 14,
-    format: "blockquote",
-    type: "block",
-  },
-];
-
-const lists: ToolbarGroup[] = [
-  {
-    id: 15,
-    format: "orderedList",
-    type: "block",
-  },
-  {
-    id: 16,
-    format: "unorderedList",
-    type: "block",
-  },
-];
-
-const align: ToolbarGroup[] = [
-  {
-    id: 17,
-    format: "alignLeft",
-    type: "block",
-  },
-  {
-    id: 18,
-    format: "alignCenter",
-    type: "block",
-  },
-  {
-    id: 19,
-    format: "alignRight",
-    type: "block",
-  },
-];
-const links: ToolbarGroup[] = [
-  {
-    id: 20,
-    format: "link",
-    type: "link",
-  },
-];
-
-const images: ToolbarGroup[] = [
-  {
-    id: 21,
-    format: "image",
-    type: "image",
-  },
-];
-
-// const embed = [
-//   {
-//     id: 21,
-//     format: "image",
-//     type: "embed",
-//   },
-//   {
-//     id: 22,
-//     format: "video",
-//     type: "embed",
-//   },
-// ]
-const tables: ToolbarGroup[] = [
-  {
-    id: 23,
-    type: "table",
-    format: "table",
-  },
-];
-
-// Not currently serialized
-// const mathAndCode: ToolbarGroup[] = [
-//   {
-//     id: 25,
-//     type: "id",
-//   },
-//   {
-//     id: 26,
-//     type: "equation",
-//   },
-//   {
-//     id: 27,
-//     type: "codeToText",
-//   },
-// ];
-
-export const allToolbarGroups = [
-  fonts,
-  headings,
-  fontStyles,
-  colors,
-  subsuper,
-  lists,
-  align,
-  links,
-  images,
-  tables,
-  // mathAndCode,
-];
-
-export const issuesToolbarGroups = [headings, fontStyles, lists, links];
-
-export const blogToolbarGroups = [
-  headings,
-  fonts,
-  align,
-  subsuper,
-  tables,
-  fontStyles,
-  colors,
-  lists,
-  links,
-  images,
-];

package/src/slate/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/slate/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/slate/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/slate/utils/customHooks/useResize.js

@@ -1,27 +0,0 @@
-import { useState } from 'react';
-
-const useResize = ()=>{
-    const [size,setSize] = useState({width:300,height:300});
-    const [resizing,setResizing] = useState(false);
-    const onMouseDown = ()=>{
-        document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("mouseup", onMouseUp);
-        setResizing(true);
-    }
-    const onMouseUp = () =>{
-          document.removeEventListener("mousemove", onMouseMove);
-          document.removeEventListener("mouseup", onMouseUp);
-          setResizing(false);
-    }
-    const onMouseMove = (e) => {
-        setSize(currentSize => ({ 
-          width: currentSize.width + e.movementX , 
-          height: currentSize.height + e.movementY 
-        }));
-    }
-
-    return [size,onMouseDown,resizing];
-}
-
-
-export default useResize;

package/src/slate/utils/embed.js

@@ -1,18 +0,0 @@
-import { Transforms } from "slate"
-
-import { createParagraph } from "./p"
-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/src/slate/utils/equation.js

@@ -1,22 +0,0 @@
-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/src/slate/utils/index.jsx

@@ -1,267 +0,0 @@
-import { Editor, Transforms, Element as SlateElement } from "slate";
-import { useSlateStatic } from "slate-react";
-import Link from "../components/link/Link";
-import Image from "../components/image/image";
-import Video from "../components/embed/Video";
-import Equation from "../components/equation/Equation";
-import HtmlCode from "../components/code-to-text/HtmlCode";
-import Table from "../components/table/Table";
-
-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 Roman, serif",
-  monospace: "Monaco, Courier New, monospace",
-};
-
-export const defaultMarkData = {
-  color: "black",
-  bgColor: "yellow",
-  fontSize: "normal",
-  fontFamily: "sans-serif",
-};
-
-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 ? "p" : 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 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 "h1":
-      return (
-        <h1 {...attributes} {...element.attr}>
-          {children}
-        </h1>
-      );
-    case "h2":
-      return (
-        <h2 {...attributes} {...element.attr}>
-          {children}
-        </h2>
-      );
-    case "h3":
-      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} />;
-    default:
-      return (
-        <div {...element.attr} {...attributes}>
-          {children}
-        </div>
-      );
-  }
-};

package/src/slate/utils/link.js

@@ -1,44 +0,0 @@
-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: "p", 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: "p", children: [link] })
-  }
-}
-
-export const removeLink = (editor) => {
-  Transforms.unwrapNodes(editor, {
-    match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === "link",
-  })
-}

package/src/slate/utils/p.js

@@ -1,4 +0,0 @@
-export const createParagraph = (text) => ({
-  type: "p",
-  children: [{ text }],
-})