@churchapps/apphelper 0.1.2 → 0.1.4

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

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

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

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