@springmicro/rte 0.1.3

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

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

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

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

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

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

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

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

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