@churchapps/apphelper 0.4.12 → 0.4.18

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

@@ -1,424 +0,0 @@
-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, $createCodeNode } 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);
-  };
-
-  const formatCodeBlock = () => {
-    if (blockType !== "code") {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) { $wrapNodes(selection, () => $createCodeNode()); }
-      });
-    }
-    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>
-      <button className="item" onClick={formatCodeBlock}>
-        <span className="icon code" />
-        <span className="text">Code</span>
-        {blockType === "code" && <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 [isCode, setIsCode] = 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"));
-      setIsCode(selection.hasFormat("code"));
-      //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
-
-  const editorEl = (typeof window !== 'undefined') && window.document.getElementById('elementEditDialog');
-  const portalKey = editorEl ? editorEl : document.body;
-
-  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}
-              />,
-              portalKey
-            )}
-          <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>
-          <button onClick={() => { editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code"); }} className={"toolbar-item spaced " + (isCode ? "active" : "")} aria-label="Format Code">
-            <i className="format code" />
-          </button>
-          {isLink && createPortal(<FloatingLinkEditor selectedElementKey={selectedElementKey} linkUrl={linkUrl} setLinkUrl={setLinkUrl} classNamesList={classNamesList} setClassNamesList={setClassNamesList} targetAttribute={targetAttribute} setTargetAttribute={setTargetAttribute} />, portalKey)}
-        </>)}
-      <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

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

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