@churchapps/apphelper 0.0.1

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

@@ -0,0 +1,102 @@
+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 '../../../material/iconPicker/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

@@ -0,0 +1,243 @@
+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 } 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";
+    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
+    editor.style.left = `${
+      rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2 < 0
+        ? 0
+        : rect.left
+          + window.pageXOffset
+          - editor.offsetWidth / 2
+          + rect.width / 2
+    }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 = ["Primary", "Secondary", "Success", "Danger", "Warning", "Info", "Light", "Dark"];
+  const sizes = ["Small", "Medium", "Large"];
+  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();
+    });
+  }
+
+  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={(e) => {
+            const newArray = [...classNamesList];
+            let index = 0;
+            newArray.forEach((item, i) => {
+              variants.forEach((element) => {
+                if (item.includes(element.toLowerCase())) {
+                  index = i;
+                };
+              })
+            })
+            newArray.splice(index, 1, e.target.value.toString());
+            setClassNamesList(newArray);
+          }}>
+            {variants.map((optionValue: string) => (
+              <MenuItem key={appearance + " btn-" + optionValue.toLowerCase()} value={"btn-" + optionValue.toLowerCase()}>{optionValue}</MenuItem>
+            ))}
+          </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

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

@@ -0,0 +1,95 @@
+/**
+ * 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, 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

@@ -0,0 +1,41 @@
+import { EmojiNode, $isEmojiNode, $createEmojiNode, $toggleEmojiNode } from './EmojiNode';
+import  materialIcons from '../../../material/iconPicker/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.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

@@ -0,0 +1,152 @@
+/**
+ * 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 '../../../material/iconPicker/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;
+      }}
+    />
+  );
+}