@churchapps/apphelper 0.0.1

package/src/components/markdownEditor/plugins/ToolbarPlugin.tsx

@@ -0,0 +1,401 @@
+import React from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SELECTION_CHANGE_COMMAND, FORMAT_TEXT_COMMAND, $getSelection, $isRangeSelection, $createParagraphNode, $getNodeByKey } from "lexical";
+import { $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from "@lexical/list";
+import { createPortal } from "react-dom";
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
+import { $isCodeNode, getDefaultCodeLanguage, getCodeLanguages } from "@lexical/code";
+import { Icon } from "@mui/material";
+import FloatingLinkEditor from "./customLink/FloatingLinkEditor";
+import { TOGGLE_CUSTOM_LINK_NODE_COMMAND, $isCustomLinkNode } from "./customLink/CustomLinkNode";
+
+const LowPriority = 1;
+
+const supportedBlockTypes = new Set(["paragraph", "quote", "code", "h1", "h2", "h3", "h4", "ul", "ol"]);
+
+const blockTypeToBlockName: any = {
+  code: "Code Block",
+  h1: "Large Heading",
+  h2: "Small Heading",
+  h3: "Heading",
+  h4: "Heading",
+  h5: "Heading",
+  ol: "Numbered List",
+  paragraph: "Normal",
+  quote: "Quote",
+  ul: "Bulleted List"
+};
+
+function Divider() {
+  return <div className="divider" />;
+}
+
+/*
+function positionEditorElement(editor: any, rect: any) {
+  if (rect === null) {
+    editor.style.opacity = "0";
+    editor.style.top = "-1000px";
+    editor.style.left = "-1000px";
+  } else {
+    editor.style.opacity = "1";
+    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
+    editor.style.left = `${rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2}px`;
+  }
+}
+*/
+
+function Select({ onChange, className, options, value }: { onChange: any, className: any, options: any, value: any }) {
+  return (
+    <select className={className} onChange={onChange} value={value}>
+      <option hidden={true} value="" />
+      {options.map((option: any) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export function getSelectedNode(selection: any) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+}
+
+function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockOptionsDropDown }: { editor: any, blockType: any, toolbarRef: any, setShowBlockOptionsDropDown: any }) {
+  const dropDownRef = useRef(null);
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (toolbar !== null && dropDown !== null) {
+      const { top, left } = toolbar.getBoundingClientRect();
+      dropDown.style.top = `${top + 40}px`;
+      dropDown.style.left = `${left}px`;
+    }
+  }, [dropDownRef, toolbarRef]);
+
+  useEffect(() => {
+    const dropDown = dropDownRef.current;
+    const toolbar = toolbarRef.current;
+
+    if (dropDown !== null && toolbar !== null) {
+      const handle = (event: any) => {
+        const target = event.target;
+
+        if (!dropDown.contains(target) && !toolbar.contains(target)) {
+          setShowBlockOptionsDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+
+      return () => {
+        document.removeEventListener("click", handle);
+      };
+    }
+  }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+
+  const formatParagraph = () => {
+    if (blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatLargeHeading = () => {
+    if (blockType !== "h1") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h1"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatSmallHeading = () => {
+    if (blockType !== "h2") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h2"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatHeading3 = () => {
+    if (blockType !== "h3") {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) { $wrapNodes(selection, () => $createHeadingNode("h3")); }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatHeading4 = () => {
+    if (blockType !== "h4") {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) { $wrapNodes(selection, () => $createHeadingNode("h4")); }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatBulletList = () => {
+    if (blockType !== "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatNumberedList = () => {
+    if (blockType !== "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatQuote = () => {
+    if (blockType !== "quote") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createQuoteNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  return (
+    <div className="dropdown" ref={dropDownRef}>
+      <button className="item" onClick={formatParagraph}>
+        <span className="icon paragraph" />
+        <span className="text">Normal</span>
+        {blockType === "paragraph" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatLargeHeading}>
+        <span className="icon large-heading" />
+        <span className="text">Large Heading</span>
+        {blockType === "h1" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatSmallHeading}>
+        <span className="icon small-heading" />
+        <span className="text">Small Heading</span>
+        {blockType === "h2" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatHeading3}>
+        <span className="icon h3" />
+        <span className="text">Heading 3</span>
+        {blockType === "h4" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatHeading4}>
+        <span className="icon h4" />
+        <span className="text">Heading 4</span>
+        {blockType === "h4" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatBulletList}>
+        <span className="icon bullet-list" />
+        <span className="text">Bullet List</span>
+        {blockType === "ul" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatNumberedList}>
+        <span className="icon numbered-list" />
+        <span className="text">Numbered List</span>
+        {blockType === "ol" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatQuote}>
+        <span className="icon quote" />
+        <span className="text">Quote</span>
+        {blockType === "quote" && <span className="active" />}
+      </button>
+    </div>
+  );
+}
+
+interface Props {
+  goFullScreen: () => void
+}
+
+export function ToolbarPlugin(props: Props) {
+  const [editor] = useLexicalComposerContext();
+  const toolbarRef = useRef(null);
+  const [blockType, setBlockType] = useState("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = useState(null);
+  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
+  const [codeLanguage, setCodeLanguage] = useState("");
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  //const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [linkUrl, setLinkUrl] = useState<string>("https://");
+  const [targetAttribute, setTargetAttribute] = useState<string>("_self");
+  const [classNamesList, setClassNamesList] = useState<Array<string>>(["primary"]);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      const element = anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey);
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getTag() : element.getTag();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          setBlockType(type);
+          if ($isCodeNode(element)) {
+            setCodeLanguage(element.getLanguage() || getDefaultCodeLanguage());
+          }
+        }
+      }
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+      //setIsStrikethrough(selection.hasFormat("strikethrough"));
+
+      // Update links
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isCustomLinkNode(parent) || $isCustomLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, [editor]);
+
+  useEffect(() =>
+    mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          return false;
+        },
+        LowPriority
+      )
+    ), [editor, updateToolbar]);
+
+  const codeLanguges = useMemo(() => getCodeLanguages(), []);
+  const onCodeLanguageSelect = useCallback(
+    (e: any) => {
+      editor.update(() => {
+        if (selectedElementKey !== null) {
+          const node = $getNodeByKey(selectedElementKey);
+          if ($isCodeNode(node)) {
+            node.setLanguage(e.target.value);
+          }
+        }
+      });
+    },
+    [editor, selectedElementKey]
+  );
+
+  const insertLink = useCallback(() => {
+    editor.dispatchCommand(TOGGLE_CUSTOM_LINK_NODE_COMMAND, {
+      url: linkUrl,
+      classNames: classNamesList,
+      target: targetAttribute
+    });
+  }, [editor, isLink]); //eslint-disable-line
+
+  return (
+    <div className="toolbar" ref={toolbarRef}>
+      {supportedBlockTypes.has(blockType) && (
+        <>
+          <button
+            className="toolbar-item block-controls"
+            onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
+            aria-label="Formatting Options"
+          >
+            <span className={"icon block-type " + blockType} />
+            <span className="text">{
+              blockTypeToBlockName[blockType]
+            }</span>
+            <i className="chevron-down" />
+          </button>
+          {showBlockOptionsDropDown
+            && createPortal(
+              <BlockOptionsDropdownList
+                editor={editor}
+                blockType={blockType}
+                toolbarRef={toolbarRef}
+                setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
+              />,
+              document.body
+            )}
+          <Divider />
+        </>
+      )}
+      {blockType === "code"
+        ? (<>
+          <Select className="toolbar-item code-language" onChange={onCodeLanguageSelect} options={codeLanguges} value={codeLanguage} />
+          <i className="chevron-down inside" />
+        </>)
+        : (<>
+          <button onClick={() => { editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"); }} className={"toolbar-item spaced " + (isBold ? "active" : "")} aria-label="Format Bold">
+            <i className="format bold" />
+          </button>
+          <button onClick={() => { editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"); }} className={"toolbar-item spaced " + (isItalic ? "active" : "")} aria-label="Format Italics">
+            <i className="format italic" />
+          </button>
+          <button onClick={() => { editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"); }} className={"toolbar-item spaced " + (isUnderline ? "active" : "")} aria-label="Format Underline">
+            <i className="format underline" />
+          </button>
+          <button onClick={insertLink} className={"toolbar-item spaced " + (isLink ? "active" : "")} aria-label="Insert Link">
+            <i className="format link" />
+          </button>
+          {isLink && createPortal(<FloatingLinkEditor selectedElementKey={selectedElementKey} linkUrl={linkUrl} setLinkUrl={setLinkUrl} classNamesList={classNamesList} setClassNamesList={setClassNamesList} targetAttribute={targetAttribute} setTargetAttribute={setTargetAttribute} />, document.body)}
+        </>)}
+      <Divider />
+      <button onClick={() => { props.goFullScreen() }} className="toolbar-item spaced" aria-label="Full Screen">
+        <Icon>fullscreen</Icon>
+      </button>
+    </div>
+  );
+}

package/src/components/markdownEditor/plugins/customLink/CustomLinkNode.tsx

@@ -0,0 +1,224 @@
+import { LexicalNode, createCommand, LexicalCommand, $isElementNode, $getSelection, ElementNode, NodeKey, $applyNodeReplacement, $isRangeSelection } from "lexical";
+import { LinkNode } from "@lexical/link";
+import utils from "@lexical/utils";
+
+export interface LinkCustomizationAttributes {
+  url: string;
+  target?: string;
+  classNames?: Array<string>;
+}
+
+export class CustomLinkNode extends LinkNode {
+  __url: string;
+  __target: string;
+  __classNames: Array<string>;
+  constructor(
+    url: string,
+    target: string,
+    classNames: Array<string>,
+    key?: NodeKey
+  ) {
+    super(url, { target }, key);
+    this.__url = url || "https://";
+    this.__target = target || "_self";
+    this.__classNames = classNames || [];
+  }
+
+  static importJSON(serializedNode: any) {
+    return super.importJSON(serializedNode);
+  }
+
+  exportJSON() {
+    return super.exportJSON();
+  }
+
+  static getType() : string {
+    return "customlinknode";
+  }
+
+  static clone(node : CustomLinkNode) : CustomLinkNode {
+    const newLinkNode = new CustomLinkNode(node.__url, node.__target, node.__classNames, node.__key);
+
+    return $applyNodeReplacement(newLinkNode);
+  }
+
+  createDOM() {
+    const link = document.createElement("a");
+
+    link.href = this.__url;
+
+    link.setAttribute("target", this.__target || "_blank");
+
+    utils.addClassNamesToElement(link, (this.__classNames || []).join(" "));
+
+    return link;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  setClassNames(classNames : Array<string>) : void {
+    const writable = this.getWritable();
+
+    writable.__classNames = classNames;
+  }
+}
+
+export const TOGGLE_CUSTOM_LINK_NODE_COMMAND: LexicalCommand<LinkCustomizationAttributes> = createCommand();
+
+export function $createCustomLinkNode(
+  url: string,
+  target: string,
+  classNames: Array<string>
+): CustomLinkNode {
+  return $applyNodeReplacement(new CustomLinkNode(url, target, classNames));
+}
+
+export function $isCustomLinkNode(
+  node: LexicalNode | null | undefined | any
+): node is CustomLinkNode {
+  return node instanceof LinkNode;
+}
+
+export const toggleCustomLinkNode = (
+  {
+    url,
+    target = "_blank",
+    classNames = [],
+    getNodeByKey
+  } : LinkCustomizationAttributes & {
+    getNodeByKey: (key: NodeKey) => HTMLElement | null;
+  }): void => {
+  const addAttributesToLinkNode = (linkNode: CustomLinkNode, { url, target, classNames}: LinkCustomizationAttributes) => {
+    const dom = getNodeByKey(linkNode.getKey());
+
+    if (!dom) return;
+
+    const uniqueClassNames = classNames;
+
+    linkNode.setURL(url);
+    linkNode.setTarget(target);
+
+    linkNode.setClassNames(uniqueClassNames);
+
+    dom.setAttribute("href", url);
+    dom.setAttribute("target", target);
+
+    dom.setAttribute("class", uniqueClassNames.join(" "));
+  };
+
+  const selection = $getSelection();
+
+  if (!$isRangeSelection(selection)) {
+    return;
+  }
+
+  const nodes = selection.extract();
+
+  if (url === null) {
+    // Remove LinkNodes
+    nodes.forEach((node) => {
+      const parent = node.getParent();
+
+      if ($isCustomLinkNode(parent)) {
+        const children = parent.getChildren();
+
+        for (let i = 0; i < children.length; i++) {
+          parent.insertBefore(children[i]);
+        }
+
+        parent.remove();
+      }
+    });
+  } else {
+    // Add or merge LinkNodes
+    if (nodes.length === 1) {
+      const firstNode = nodes[0];
+      // if the first node is a LinkNode or if its
+      // parent is a LinkNode, we update the URL, target and rel.
+      const linkNode = $isCustomLinkNode(firstNode)
+        ? firstNode
+        : $getLinkAncestor(firstNode);
+      if (linkNode !== null && $isCustomLinkNode(linkNode)) {
+        addAttributesToLinkNode(linkNode, {url, target, classNames});
+        return;
+      }
+    }
+
+    let prevParent: ElementNode | LinkNode | null = null;
+    let linkNode: LinkNode | null = null;
+
+    nodes.forEach((node) => {
+      const parent = node.getParent();
+
+      if (
+        parent === linkNode
+        || parent === null
+        || ($isElementNode(node) && !node.isInline())
+      ) {
+        return;
+      }
+
+      if ($isCustomLinkNode(parent)) {
+        linkNode = parent;
+
+        addAttributesToLinkNode(parent, {url, target, classNames});
+
+        return;
+      }
+
+      if (!parent.is(prevParent)) {
+        prevParent = parent;
+        linkNode = $createCustomLinkNode(url, target, classNames);
+
+        if ($isCustomLinkNode(parent)) {
+          if (node.getPreviousSibling() === null) {
+            parent.insertBefore(linkNode);
+          } else {
+            parent.insertAfter(linkNode);
+          }
+        } else {
+          node.insertBefore(linkNode);
+        }
+      }
+
+      if ($isCustomLinkNode(node)) {
+        if (node.is(linkNode)) {
+          return;
+        }
+        if (linkNode !== null) {
+          const children = node.getChildren();
+
+          for (let i = 0; i < children.length; i++) {
+            linkNode.append(children[i]);
+          }
+        }
+
+        node.remove();
+        return;
+      }
+
+      if (linkNode !== null) {
+        linkNode.append(node);
+      }
+    });
+  }
+}
+
+const $getLinkAncestor = (node: LexicalNode): null | LexicalNode => (
+  $getAncestor(node, (ancestor) => $isCustomLinkNode(ancestor))
+)
+
+const $getAncestor = (
+  node: LexicalNode,
+  predicate: (ancestor: LexicalNode) => boolean
+): null | LexicalNode => {
+  let parent: null | LexicalNode = node;
+  while (
+    parent !== null
+    && (parent = parent.getParent()) !== null
+    && !predicate(parent)
+  );
+  return parent;
+}

package/src/components/markdownEditor/plugins/customLink/CustomLinkNodePlugin.tsx

@@ -0,0 +1,32 @@
+import { FC, useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  LinkCustomizationAttributes,
+  toggleCustomLinkNode,
+  TOGGLE_CUSTOM_LINK_NODE_COMMAND
+} from "./CustomLinkNode";
+
+const COMMAND_PRIORITY = 1;
+
+const CustomLinkNodePlugin: FC = () => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    editor.registerCommand(
+      TOGGLE_CUSTOM_LINK_NODE_COMMAND,
+      (props: LinkCustomizationAttributes) => {
+        toggleCustomLinkNode({
+          ...props,
+          getNodeByKey: (key: string) => editor.getElementByKey(key)
+        });
+
+        return true;
+      },
+      COMMAND_PRIORITY
+    );
+  }, [editor]);
+
+  return null;
+};
+
+export default CustomLinkNodePlugin;