@churchapps/apphelper 0.4.12 → 0.4.18

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

@@ -1,102 +0,0 @@
-import type { TextMatchTransformer } from "@lexical/markdown";
-import { TextNode, $createTextNode, $isTextNode } from "lexical";
-
-import {
-  $isCustomLinkNode,
-  CustomLinkNode,
-  $createCustomLinkNode
-} from "./CustomLinkNode";
-import {
-  EmojiNode,
-  $createEmojiNode
-} from "../emoji/EmojiNode";
-
-import iconNamesList from '../../IconNamesList';
-
-const CUSTOM_LINK_NODE_MARKDOWN_REGEX_QUERY = /(?:\[([^[]+?)\])(?:\(([^(]+)\))(?:({([^}]*)})?)(?:((.*)\)?))$/;
-
-const CUSTOM_LINK_NODE_MARKDOWN_REGEX = new RegExp(CUSTOM_LINK_NODE_MARKDOWN_REGEX_QUERY);
-
-const replaceCustomLinkNode = (textNode : TextNode, match : any) => {
-  let linkUrl = match[2],
-    linkText = match[1];
-  if (match.input.length > match.input.trim().length) {
-    linkText = ' '.repeat(match.input.length - match.input.trim().length) + linkText;
-  }
-  const otherText = match[5];
-
-
-  const linkNode = $createCustomLinkNode(
-    linkUrl,
-    match[4] ? (match[4].includes("_self") ? "_self" : "_blank") : "_blank",
-    match[4]
-      ? match[4]
-        .split(" ")
-        .filter((word: string) => word[0] === ".")
-        .map((word: string) => word.replace(".", ""))
-      : []
-  );
-
-  const linkTextNode = $createTextNode(linkText);
-  linkTextNode.setFormat(textNode.getFormat());
-
-  linkNode.append(linkTextNode);
-  textNode.replace(linkNode);
-
-  const emojiText = otherText.replace(CUSTOM_LINK_NODE_MARKDOWN_REGEX, '').trim();
-
-
-
-
-
-  if (match[5]) {
-    const otherTextNode = $createTextNode(match[5].replace(CUSTOM_LINK_NODE_MARKDOWN_REGEX, ''));
-
-    linkNode.getParent().append(otherTextNode);
-  }
-
-
-  if (CUSTOM_LINK_NODE_MARKDOWN_REGEX.test(match[5])) {
-    const blankNode = $createTextNode("");
-
-    linkNode.getParent().append(blankNode);
-
-    replaceCustomLinkNode(blankNode, match[5].match(CUSTOM_LINK_NODE_MARKDOWN_REGEX_QUERY));
-  }
-
-  if (emojiText) {
-    if (!iconNamesList.includes(emojiText.replaceAll(':', ''))) return;
-
-    linkNode.getParent().append($createEmojiNode(emojiText.replaceAll(':', '')));
-  }
-};
-
-export const CUSTOM_LINK_NODE_TRANSFORMER: TextMatchTransformer = {
-  dependencies: [EmojiNode, CustomLinkNode],
-  export: (node, exportChildren, exportFormat) => {
-    if (!$isCustomLinkNode(node)) {
-      return null;
-    }
-
-    const linkContent = `[${node.getTextContent()}](${node.__url}){:target="${node.__target}" ${node
-      ?.__classNames
-      ?.join(' ')
-      .split(' ')
-      .map((className: string) => "." + className.replaceAll('.', ''))
-      .join(" ")}}`;
-
-    const firstChild = node.getFirstChild();
-
-    if (node.getChildrenSize() === 1 && $isTextNode(firstChild)) {
-      return exportFormat(firstChild, linkContent);
-    } else {
-      return linkContent;
-
-    }
-  },
-  importRegExp: CUSTOM_LINK_NODE_MARKDOWN_REGEX,
-  regExp: CUSTOM_LINK_NODE_MARKDOWN_REGEX,
-  replace: replaceCustomLinkNode,
-  trigger: "[",
-  type: "text-match"
-};

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

@@ -1,270 +0,0 @@
-import React, { useCallback, useRef, FC, useEffect } from "react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { mergeRegister } from "@lexical/utils";
-import { $isCustomLinkNode } from "./CustomLinkNode";
-import { $getSelection, SELECTION_CHANGE_COMMAND, $isRangeSelection, $getNodeByKey } from "lexical";
-import { TOGGLE_CUSTOM_LINK_NODE_COMMAND } from "./CustomLinkNode";
-import { FloatingLinkEditorProps } from "./FloatingLinkEditor.types";
-import { getSelectedNode } from "../ToolbarPlugin";
-import { FormControl, InputLabel, Select, MenuItem, TextField, Button, SelectChangeEvent } from "@mui/material";
-
-const positionEditorElement = (editor: HTMLElement, rect: DOMRect | null) => {
-  if (rect === null) {
-    editor.style.opacity = "0";
-    editor.style.top = "-1000px";
-    editor.style.left = "-1000px";
-  } else {
-    editor.style.opacity = "1";
-    // Add viewport height check
-    const editorHeight = editor.offsetHeight;
-    const viewportHeight = window.innerHeight;
-    let topPosition = rect.top + rect.height + 10;
-    
-    // If editor would go off bottom of screen, position it above the selection instead
-    if (topPosition + editorHeight > viewportHeight) {
-      topPosition = rect.top - editorHeight - 10;
-    }
-    
-    editor.style.top = `${topPosition}px`;
-    
-    // Ensure editor stays within horizontal bounds
-    const leftPosition = Math.max(
-      0,
-      Math.min(
-        rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2,
-        window.innerWidth - editor.offsetWidth
-      )
-    );
-    editor.style.left = `${leftPosition}px`;
-  }
-};
-
-const LowPriority = 1;
-
-const FloatingLinkEditor: FC<FloatingLinkEditorProps> = ({
-  linkUrl,
-  setLinkUrl,
-  classNamesList,
-  setClassNamesList,
-  targetAttribute,
-  setTargetAttribute,
-  selectedElementKey
-}) => {
-  const [editor] = useLexicalComposerContext();
-
-  const editorRef = useRef(null);
-
-  const mouseDownRef = useRef(false);
-
-  /*
-  const [lastSelection, setLastSelection] = useState<
-    GridSelection | NodeSelection | RangeSelection | null
-  >(null);
-  */
-
-  const updateLinkEditor = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      const node = getSelectedNode(selection);
-
-      const parent = node.getParent();
-      if ($isCustomLinkNode(parent)) {
-        const _url = editor.getElementByKey(parent.__key)?.getAttribute("href");
-        if (_url) {
-          setLinkUrl(_url);
-        }
-      } else if ($isCustomLinkNode(node)) {
-        const _url = editor.getElementByKey(node.__key)?.getAttribute("href");
-        if (_url) {
-          setLinkUrl(_url);
-        }
-      }
-    }
-    const editorElem = editorRef.current;
-    const nativeSelection = window.getSelection();
-
-    if (!nativeSelection) return;
-
-    const activeElement = document.activeElement;
-
-    if (editorElem === null) {
-      return;
-    }
-
-    const rootElement = editor.getRootElement();
-    if (
-      selection !== null
-      && !nativeSelection?.isCollapsed
-      && rootElement !== null
-      && rootElement.contains(nativeSelection.anchorNode)
-    ) {
-      const domRange = nativeSelection.getRangeAt(0);
-      let rect;
-      if (nativeSelection.anchorNode === rootElement) {
-        let inner: Element | HTMLElement = rootElement;
-        while (inner.firstElementChild != null) {
-          inner = inner.firstElementChild;
-        }
-        rect = inner.getBoundingClientRect();
-      } else {
-        rect = domRange.getBoundingClientRect();
-      }
-
-      if (!mouseDownRef.current) {
-        positionEditorElement(editorElem, rect);
-      }
-      //setLastSelection(selection);
-    } else if (!activeElement || activeElement.className !== "link-input") {
-      positionEditorElement(editorElem, null);
-      //setLastSelection(null);
-    }
-
-    return true;
-  }, [editor]); //eslint-disable-line
-
-  useEffect(() => (
-    mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateLinkEditor();
-        });
-      }),
-
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          editor.getEditorState().read(() => {
-            updateLinkEditor();
-          });
-          return true;
-        },
-        LowPriority
-      )
-    )
-  ), [editor, updateLinkEditor]);
-
-  useEffect(() => {
-    editor.getEditorState().read(() => {
-      updateLinkEditor();
-    });
-  }, [editor, updateLinkEditor]);
-
-  useEffect(() => {
-    editor.getEditorState().read(() => {
-      updateLinkEditor();
-    });
-  }, []); //eslint-disable-line
-
-  const variants = ["Light", "Light Accent", "Accent", "Dark Accent", "Dark", "Transparent Light", "Transparent Light Accent", "Transparent Accent", "Transparent Dark Accent", "Transparent Dark", "Primary", "Secondary", "Success", "Danger", "Warning", "Info"];
-  const sizes = ["Small", "Medium", "Large", "XL", "2X", "3X", "4X"];
-  let appearance = "link";
-  if (classNamesList[0].indexOf("btn")>-1) appearance="btn";
-  if (classNamesList[0].indexOf("btn-block")>-1) appearance="btn btn-block";
-
-  const handleSave = () => {
-    editor.dispatchCommand(TOGGLE_CUSTOM_LINK_NODE_COMMAND, {
-      url: linkUrl,
-      classNames: classNamesList,
-      target: targetAttribute
-    });
-
-    editor.update(() => {
-      if (!selectedElementKey) return;
-
-      const selectedNode = $getNodeByKey(selectedElementKey);
-
-      selectedNode?.selectEnd();
-    });
-  }
-
-  const getVariantKeyName = (variant: string) => {
-    const keyNameParts = variant.split(" ");
-    keyNameParts[0] = keyNameParts[0].toLowerCase();
-    return keyNameParts.join("");
-  }
-
-  const handleVariantChange = (e: SelectChangeEvent<string>) => {
-    const newArray = [...classNamesList];
-    let index = 0;
-    newArray.forEach((item, i) => {
-      variants.forEach((element) => {
-        if (item.includes(getVariantKeyName(element))) {
-          index = i;
-        };
-      })
-    })
-    newArray.splice(index, 1, e.target.value.toString());
-    setClassNamesList(newArray);
-  }
-
-  const getVariantItems = () => {
-    const result: React.ReactElement[] = [];
-    variants.forEach((variant: string, idx:number) => {
-      result.push(<MenuItem key={appearance + " btn-" + getVariantKeyName(variant)} value={"btn-" + getVariantKeyName(variant)}>{variant}</MenuItem>);
-      if (idx===4 || idx===9) result.push(<MenuItem disabled>──────────</MenuItem>)
-    })
-    return result;
-  }
-
-  return (
-    <div ref={editorRef} className="link-editor">
-
-      <TextField label="Url" value={linkUrl} onChange={e => { setLinkUrl(e.target.value) }} fullWidth size="small" />
-
-      <FormControl fullWidth>
-        <InputLabel>Appearance</InputLabel>
-        <Select name="classNames" fullWidth label="Appearance" size="small" value={appearance} onChange={(e) => {
-          let className = "";
-          if (e.target.value.toString()!=="link") className = e.target.value.toString();
-          setClassNamesList([className, "btn-primary", "btn-medium"])
-        }}>
-          <MenuItem value="link">Standard Link</MenuItem>
-          <MenuItem value="btn">Button</MenuItem>
-          <MenuItem value="btn btn-block">Full Width Button</MenuItem>
-        </Select>
-      </FormControl>
-
-      {appearance!=="link"
-      && <div>
-        <FormControl fullWidth>
-          <InputLabel>Variant</InputLabel>
-          <Select name="classNames" fullWidth label="Variant" size="small" value={ classNamesList[1] } onChange={handleVariantChange}>
-            {getVariantItems()}
-          </Select>
-        </FormControl>
-        <FormControl fullWidth>
-          <InputLabel>Size</InputLabel>
-          <Select name="classNames" fullWidth label="Size" size="small" value={ classNamesList[2] } onChange={(e) => {
-            const newArray = [...classNamesList];
-            let index = 0;
-            newArray.forEach((item, i) => {
-              sizes.forEach((element) => {
-                if(item.includes(element.toLowerCase())) {
-                  index = i;
-                };
-              })
-            })
-            newArray.splice(index, 1, e.target.value.toString());
-            setClassNamesList(newArray);
-          }}>
-            {sizes.map((optionValue: string) => (
-              <MenuItem key={appearance + " btn-" + optionValue.toLowerCase()} value={"btn-" + optionValue.toLowerCase()}>{optionValue}</MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </div>
-      }
-
-      <div className="target-check">
-        <input type="checkbox" checked={targetAttribute === "_blank"} onChange={(e) => {
-          setTargetAttribute((currentValue: string) => currentValue === "_blank" ? "_self" : "_blank" );
-        }} />
-        - Open in new window
-      </div><br />
-
-      <Button fullWidth={true} variant="contained" onClick={handleSave}>Save</Button>
-    </div>
-  );
-};
-
-export default FloatingLinkEditor;

package/src/components/markdownEditor/plugins/customLink/FloatingLinkEditor.types.ts

@@ -1,11 +0,0 @@
-import { Dispatch, SetStateAction } from "react";
-
-export interface FloatingLinkEditorProps {
-  linkUrl: string;
-  setLinkUrl: (value: string) => void;
-  targetAttribute: string;
-  setTargetAttribute: Dispatch<SetStateAction<string>>;
-  classNamesList: Array<string>;
-  setClassNamesList: (value: Array<string>) => void;
-  selectedElementKey: string | null;
-}

package/src/components/markdownEditor/plugins/emoji/EmojiNode.tsx

@@ -1,95 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import type {
-  EditorConfig,
-  LexicalNode,
-  NodeKey,
-  SerializedTextNode,
-  Spread,
-} from 'lexical';
-
-import {$applyNodeReplacement, TextNode} from 'lexical';
-
-export type SerializedEmojiNode = Spread<
-  {
-    type: string;
-  },
-  SerializedTextNode
->;
-
-export class EmojiNode extends TextNode {
-  exportJSON() : SerializedEmojiNode {
-    const json = {
-      ...super.exportJSON(),
-      type: 'emoji'
-    };
-    return json;
-  }
-
-  static getType(): string {
-    return 'emoji';
-  }
-
-  static clone(node: EmojiNode): EmojiNode {
-    return new EmojiNode(node.__text, node.__key);
-  }
-
-  static importJSON(serializedNode: SerializedEmojiNode): EmojiNode {
-    const node = new EmojiNode(serializedNode.text);
-    return node;
-  }
-
-  /*
-  constructor(text: string, key?: NodeKey) {
-    super(text, key);
-  }
-*/
-
-  createDOM(config: EditorConfig): HTMLElement {
-    const dom = document.createElement('span');
-    const inner = super.createDOM(config);
-    dom.className = 'material-symbols-outlined';
-    dom.appendChild(inner);
-    return dom;
-  }
-
-  updateDOM(
-    prevNode: TextNode,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
-    const inner = dom.firstChild;
-    if (inner === null) {
-      return true;
-    }
-    super.updateDOM(prevNode as this, inner as HTMLElement, config);
-    return false;
-  }
-}
-
-export function $isEmojiNode(
-  node: LexicalNode | null | undefined,
-): node is EmojiNode {
-  return node instanceof EmojiNode;
-}
-
-export function $createEmojiNode(
-  emojiText: string
-): EmojiNode {
-  const node = new EmojiNode(emojiText).setMode('token');
-  return $applyNodeReplacement(node);
-}
-
-
-export function $toggleEmojiNode(
-  emojiText: string,
-): EmojiNode {
-  const node = new EmojiNode(emojiText).setMode('token');
-  return node;
-}

package/src/components/markdownEditor/plugins/emoji/EmojiNodeTransform.ts

@@ -1,41 +0,0 @@
-import { EmojiNode, $isEmojiNode, $createEmojiNode, $toggleEmojiNode } from './EmojiNode';
-import  materialIcons from '../../IconNamesList';
-
-import type { TextMatchTransformer } from "@lexical/markdown";
-import { TextNode, $isTextNode } from "lexical";
-
-const EMOJI_NODE_MARKDOWN_REGEX_QUERY = /:[A-Za-z_]+:$/;
-
-export const EMOJI_NODE_MARKDOWN_REGEX = new RegExp(EMOJI_NODE_MARKDOWN_REGEX_QUERY);
-
-const replaceEmojiMarkdownWithNode = (textNode: TextNode) => {
-  const emojiNode = $createEmojiNode(
-    textNode.__text.replaceAll(':', '')
-  );
-
-  textNode.replace(emojiNode);
-
-  return emojiNode;
-};
-
-export const EMOJI_NODE_MARKDOWN_TRANSFORM: TextMatchTransformer = {
-  dependencies: [EmojiNode],
-  export: (node, exportChildren, exportFormat) => {
-    if (!($isEmojiNode(node) || $isTextNode(node))) {
-      return null;
-    }
-
-    if (!materialIcons || !materialIcons.includes(node.getTextContent().replaceAll(':', ''))) {
-      return null;
-    }
-
-    const linkContent = ':' + node.__text.replaceAll(':', '') + ':';
-
-    return linkContent;
-  },
-  importRegExp: EMOJI_NODE_MARKDOWN_REGEX,
-  regExp: EMOJI_NODE_MARKDOWN_REGEX,
-  replace: replaceEmojiMarkdownWithNode,
-  trigger: ":",
-  type: "text-match"
-};

package/src/components/markdownEditor/plugins/emoji/EmojiPickerPlugin.tsx

@@ -1,152 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {
-  LexicalTypeaheadMenuPlugin,
-  useBasicTypeaheadTriggerMatch,
-} from '@lexical/react/LexicalTypeaheadMenuPlugin';
-import {
-  $createTextNode,
-  $getSelection,
-  $isRangeSelection,
-  TextNode,
-} from 'lexical';
-import { $createEmojiNode } from './EmojiNode';
-import materialIcons from '../../IconNamesList';
-import * as React from 'react';
-import {useCallback, useEffect, useMemo, useState} from 'react';
-import * as ReactDOM from 'react-dom';
-
-
-function EmojiMenuItem({
-  index,
-  isSelected,
-  onClick,
-  onMouseEnter,
-  option,
-}: {
-  index: number;
-  isSelected: boolean;
-  onClick: () => void;
-  onMouseEnter: () => void;
-  option: string;
-}) {
-  let className = 'item';
-  if (isSelected) {
-    className += ' selected';
-  }
-  return (
-    <li
-      key={option}
-      tabIndex={-1}
-      className={className}
-      role="option"
-      aria-selected={isSelected}
-      id={'typeahead-item-' + index}
-      onMouseEnter={onMouseEnter}
-      onClick={onClick}>
-      <span className="text">
-        <span className="material-symbols-outlined">{option}</span> {option}
-      </span>
-    </li>
-  );
-}
-
-
-const MAX_EMOJI_SUGGESTION_COUNT = 10;
-
-export default function EmojiPickerPlugin() {
-  const [editor] = useLexicalComposerContext();
-  const [queryString, setQueryString] = useState<string | null>(null);
-
-
-
-  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch(':', {
-    minLength: 0,
-  });
-
-  const options: Array<any> = useMemo(() => {
-    let result = materialIcons.filter((option: string) =>
-      (queryString != null) ? new RegExp(queryString, 'gi').exec(option) : materialIcons
-    );
-    return result.slice(0, MAX_EMOJI_SUGGESTION_COUNT);
-  }, [queryString]);
-
-  const onSelectOption = useCallback(
-    (
-      selectedOption: any,
-      nodeToRemove: TextNode | null,
-      closeMenu: () => void,
-    ) => {
-      editor.update(() => {
-        const selection = $getSelection();
-
-        if (!$isRangeSelection(selection) || selectedOption == null) {
-          return;
-        }
-
-        if (nodeToRemove) {
-          nodeToRemove.remove();
-        }
-
-        selection.insertNodes([$createEmojiNode(selectedOption)]);
-
-        closeMenu();
-      });
-    },
-    [editor],
-  );
-
-  if (typeof document === "undefined") {
-    return null;
-  }
-
-  return (
-    <LexicalTypeaheadMenuPlugin
-      onQueryChange={setQueryString}
-      onSelectOption={onSelectOption}
-      triggerFn={checkForTriggerMatch}
-      options={options}
-      menuRenderFn={(
-        anchorElementRef,
-        {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
-      ) => {
-        if (anchorElementRef.current == null || options.length === 0) {
-          return null;
-        }
-
-        return anchorElementRef.current && options.length
-          ? ReactDOM.createPortal(
-            <div className="typeahead-popover emoji-menu">
-              <ul>
-                {options.map((option: string, index) => (
-                  <div key={option}>
-                    <EmojiMenuItem
-                      index={index}
-                      isSelected={selectedIndex === index}
-                      onClick={() => {
-                        setHighlightedIndex(index);
-                        selectOptionAndCleanUp(option);
-                      }}
-                      onMouseEnter={() => {
-                        setHighlightedIndex(index);
-                      }}
-                      option={option}
-                    />
-                  </div>
-                ))}
-              </ul>
-            </div>,
-            anchorElementRef.current,
-          )
-          : null;
-      }}
-    />
-  );
-}