@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/markdown-editor/mention-node.ts

@@ -1,3 +1,4 @@
+import type { IMentionData } from "@peers-app/peers-sdk";
 import {
   $applyNodeReplacement,
   type DOMConversionMap,
@@ -9,10 +10,9 @@ import {
   type SerializedTextNode,
   type Spread,
   TextNode,
-} from 'lexical';
-import { IMentionData } from "@peers-app/peers-sdk";
-import { mainContentPath } from '../../globals';
-import { mentionConfigs } from '../../mention-configs';
+} from "lexical";
+import { mainContentPath } from "../../globals";
+import { mentionConfigs } from "../../mention-configs";
 
 export type SerializedMentionNode = Spread<
   {
@@ -21,20 +21,18 @@ export type SerializedMentionNode = Spread<
   SerializedTextNode
 >;
 
-function $convertMentionElement(
-  domNode: HTMLElement,
-): DOMConversionOutput | null {
+function $convertMentionElement(domNode: HTMLElement): DOMConversionOutput | null {
   const mentionName = domNode.textContent?.substring(1);
-  const dataKind = domNode.getAttribute('data-kind') ?? '';
-  const dataId = domNode.getAttribute('data-id') ?? '';
-  const clickable = domNode.getAttribute('data-clickable');
-  
+  const dataKind = domNode.getAttribute("data-kind") ?? "";
+  const dataId = domNode.getAttribute("data-id") ?? "";
+  const clickable = domNode.getAttribute("data-clickable");
+
   if (mentionName && dataId) {
     const data: IMentionData = {
-      kind: dataKind as any,
+      kind: dataKind,
       name: mentionName,
       id: dataId,
-      clickable: clickable === 'true' ? true : clickable === 'false' ? false : undefined,
+      clickable: clickable === "true" ? true : clickable === "false" ? false : undefined,
     };
     const node = $createMentionNode(data);
     return {
@@ -46,9 +44,8 @@ function $convertMentionElement(
 }
 
 export class MentionNode extends TextNode {
-
   static getType(): string {
-    return 'mention';
+    return "mention";
   }
 
   static clone(node: MentionNode): MentionNode {
@@ -67,17 +64,17 @@ export class MentionNode extends TextNode {
 
   constructor(
     public readonly data: IMentionData,
-    key?: NodeKey
+    key?: NodeKey,
   ) {
     // const prefix = (data.kind === 'assistant' || data.kind === 'user') ? '@' : '$';
-    const prefix = data.kind === 'user' ? '@' : '';
+    const prefix = data.kind === "user" ? "@" : "";
     super(prefix + data.name, key);
   }
 
   exportJSON(): SerializedMentionNode {
     return {
       ...super.exportJSON(),
-      type: 'mention',
+      type: "mention",
       version: 1,
       data: this.data,
     };
@@ -87,24 +84,27 @@ export class MentionNode extends TextNode {
     const dom = super.createDOM(config);
 
     const kind = this.data.kind;
-    const mentionConfig = mentionConfigs.find(c => c.kind === kind);
+    const mentionConfig = mentionConfigs.find((c) => c.kind === kind);
 
     if (mentionConfig) {
-      dom.className = mentionConfig.styleClass || 'mention-default-default';
+      dom.className = mentionConfig.styleClass || "mention-default-default";
     } else {
       dom.className = `mention-${this.data.kind}`;
     }
 
     dom.textContent = this.__text;
-    dom.setAttribute('data-kind', this.data.kind);
-    dom.setAttribute('data-id', this.data.id);
-    dom.setAttribute('data-clickable', this.data.clickable === undefined ? '' : String(this.data.clickable));
+    dom.setAttribute("data-kind", this.data.kind);
+    dom.setAttribute("data-id", this.data.id);
+    dom.setAttribute(
+      "data-clickable",
+      this.data.clickable === undefined ? "" : String(this.data.clickable),
+    );
 
     // currently ignoring `clickable` attribute
     // if (this.data.clickable !== false) {...
     const onClick = mentionConfig?.onClick;
-    dom.style.cursor = 'pointer';
-    dom.addEventListener('click', () => {
+    dom.style.cursor = "pointer";
+    dom.addEventListener("click", () => {
       if (onClick) {
         onClick(this.data);
       } else {
@@ -114,9 +114,9 @@ export class MentionNode extends TextNode {
       }
     });
 
-    if (mentionConfig && kind !== 'user') {
-      const iconSpan = document.createElement('i');
-      iconSpan.className = 'pe-1 ' + mentionConfig.iconClass;
+    if (mentionConfig && kind !== "user") {
+      const iconSpan = document.createElement("i");
+      iconSpan.className = `pe-1 ${mentionConfig.iconClass}`;
       dom.prepend(iconSpan);
       return dom;
     }
@@ -150,19 +150,22 @@ export class MentionNode extends TextNode {
   }
 
   exportDOM(): DOMExportOutput {
-    const element = document.createElement('span');
-    element.setAttribute('data-lexical-mention', 'true');
+    const element = document.createElement("span");
+    element.setAttribute("data-lexical-mention", "true");
     element.textContent = this.__text;
-    element.setAttribute('data-kind', this.data.kind);
-    element.setAttribute('data-id', this.data.id);
-    element.setAttribute('data-clickable', this.data.clickable === undefined ? '' : String(this.data.clickable));
+    element.setAttribute("data-kind", this.data.kind);
+    element.setAttribute("data-id", this.data.id);
+    element.setAttribute(
+      "data-clickable",
+      this.data.clickable === undefined ? "" : String(this.data.clickable),
+    );
     return { element };
   }
 
   static importDOM(): DOMConversionMap | null {
     return {
       span: (domNode: HTMLElement) => {
-        if (!domNode.hasAttribute('data-lexical-mention')) {
+        if (!domNode.hasAttribute("data-lexical-mention")) {
           return null;
         }
         return {
@@ -188,12 +191,10 @@ export class MentionNode extends TextNode {
 
 export function $createMentionNode(data: IMentionData): MentionNode {
   const mentionNode = new MentionNode(data);
-  mentionNode.setMode('segmented').toggleDirectionless();
+  mentionNode.setMode("segmented").toggleDirectionless();
   return $applyNodeReplacement(mentionNode);
 }
 
-export function $isMentionNode(
-  node: LexicalNode | null | undefined,
-): node is MentionNode {
+export function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode {
   return node instanceof MentionNode;
 }

package/src/components/markdown-editor/mentions-plugin.tsx

@@ -1,22 +1,21 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import {
   LexicalTypeaheadMenuPlugin,
   MenuOption,
-  MenuTextMatch,
+  type MenuTextMatch,
   useBasicTypeaheadTriggerMatch,
-} from '@lexical/react/LexicalTypeaheadMenuPlugin';
-import { IMentionData, observable, Observable } from "@peers-app/peers-sdk";
-import { $getSelection, TextNode } from 'lexical';
-import { sortBy, uniqBy } from 'lodash';
-import * as React from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import * as ReactDOM from 'react-dom';
-import { IMentionConfig } from '../../mention-configs';
-import { $createMentionNode } from './mention-node';
-
-const PUNCTUATION =
-  '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
-const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
+} from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { type IMentionData, type Observable, observable } from "@peers-app/peers-sdk";
+import { $getSelection, type TextNode } from "lexical";
+import { sortBy, uniqBy } from "lodash";
+import * as React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import * as ReactDOM from "react-dom";
+import type { IMentionConfig } from "../../mention-configs";
+import { $createMentionNode } from "./mention-node";
+
+const PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
+const NAME = `\\b[A-Z][^\\s${PUNCTUATION}]`;
 
 const DocumentMentionsRegex = {
   NAME,
@@ -25,36 +24,36 @@ const DocumentMentionsRegex = {
 
 const PUNC = DocumentMentionsRegex.PUNCTUATION;
 
-const TRIGGERS = ['@', '<'].join('');
+const TRIGGERS = ["@", "<"].join("");
 
 // Chars we expect to see in a mention (non-space, non-punctuation).
-const VALID_CHARS = '[^' + TRIGGERS + PUNC + '\\s]';
+const VALID_CHARS = `[^${TRIGGERS}${PUNC}\\s]`;
 
 // Non-standard series of chars. Each series must be preceded and followed by
 // a valid char.
 const VALID_JOINS =
-  '(?:' +
-  '\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
-  ' |' + // E.g. " " in "Josh Duck"
-  '[' +
+  "(?:" +
+  "\\.[ |$]|" + // E.g. "r. " in "Mr. Smith"
+  " |" + // E.g. " " in "Josh Duck"
+  "[" +
   PUNC +
-  ']|' + // E.g. "-' in "Salier-Hellendag"
-  ')';
+  "]|" + // E.g. "-' in "Salier-Hellendag"
+  ")";
 
 const LENGTH_LIMIT = 75;
 
 const AtSignMentionsRegex = new RegExp(
-  '(^|\\s|\\()(' +
-  '[' +
-  TRIGGERS +
-  ']' +
-  '((?:' +
-  VALID_CHARS +
-  VALID_JOINS +
-  '){0,' +
-  LENGTH_LIMIT +
-  '})' +
-  ')$',
+  "(^|\\s|\\()(" +
+    "[" +
+    TRIGGERS +
+    "]" +
+    "((?:" +
+    VALID_CHARS +
+    VALID_JOINS +
+    "){0," +
+    LENGTH_LIMIT +
+    "})" +
+    ")$",
 );
 
 // 50 is the longest alias length limit.
@@ -62,82 +61,85 @@ const ALIAS_LENGTH_LIMIT = 50;
 
 // Regex used to match alias.
 const AtSignMentionsRegexAliasRegex = new RegExp(
-  '(^|\\s|\\()(' +
-  '[' +
-  TRIGGERS +
-  ']' +
-  '((?:' +
-  VALID_CHARS +
-  '){0,' +
-  ALIAS_LENGTH_LIMIT +
-  '})' +
-  ')$',
+  "(^|\\s|\\()(" +
+    "[" +
+    TRIGGERS +
+    "]" +
+    "((?:" +
+    VALID_CHARS +
+    "){0," +
+    ALIAS_LENGTH_LIMIT +
+    "})" +
+    ")$",
 );
 
 // At most, 5 suggestions are shown in the popup.
 const SUGGESTION_LIST_LENGTH_LIMIT = 10;
 export const MENTIONS_MAX_RESULTS = 10;
 
-
-function useMentionLookupService(mentionString: string | null, mentionConfigs: IMentionConfig[] = []): IMentionData[] {
+function useMentionLookupService(
+  mentionString: string | null,
+  mentionConfigs: IMentionConfig[] = [],
+): IMentionData[] {
   const [results, setResults] = useState<Array<IMentionData>>([]);
 
   useEffect(() => {
     if (!mentionString) {
       setResults([]);
-      return;      
+      return;
     }
     (async () => {
       const prefix = mentionString[0];
       mentionString = mentionString.slice(1);
       // TODO simplify how users can include completed tasks in their search
-      let searchCompletedTasks = prefix === '$' && mentionString.startsWith('done');
+      const searchCompletedTasks = prefix === "$" && mentionString.startsWith("done");
       if (searchCompletedTasks) {
         mentionString = mentionString.slice(4);
       }
-      let kind = '';
-      if (mentionString.includes(':')) {
-        const parts = mentionString.split(':');
+      let kind = "";
+      if (mentionString.includes(":")) {
+        const parts = mentionString.split(":");
         kind = parts[0];
-        mentionString = parts[1] || '';
+        mentionString = parts[1] || "";
       }
-      const config = mentionConfigs?.find(c => c.kind === kind);
+      const config = mentionConfigs?.find((c) => c.kind === kind);
       if (config) {
         const results = await config.query(mentionString);
         setResults(results);
         return;
       }
-      const results = await Promise.all(
-        mentionConfigs?.map(c => c.query(mentionString || '')),
-      );
+      const results = await Promise.all(mentionConfigs?.map((c) => c.query(mentionString || "")));
       let allResults = results.flat();
-      allResults = uniqBy(allResults, 'id');
+      allResults = uniqBy(allResults, "id");
       let filteredResults = allResults;
-      if (prefix === '@') {
-        filteredResults = filteredResults.filter((result) => result.kind === 'user' || result.kind === 'assistant');
+      if (prefix === "@") {
+        filteredResults = filteredResults.filter(
+          (result) => result.kind === "user" || result.kind === "assistant",
+        );
       } else {
-        filteredResults = filteredResults.filter((result) => result.kind !== 'user' && result.kind !== 'assistant');
+        filteredResults = filteredResults.filter(
+          (result) => result.kind !== "user" && result.kind !== "assistant",
+        );
       }
       if (kind) {
-        filteredResults = allResults.filter((result) => result.kind.toLowerCase() === kind.toLowerCase());
+        filteredResults = allResults.filter(
+          (result) => result.kind.toLowerCase() === kind.toLowerCase(),
+        );
       } else if (!filteredResults.length) {
         filteredResults = allResults;
       }
-      filteredResults = sortBy(filteredResults, r => {
-        return r.name.toLowerCase().indexOf((mentionString!).toLowerCase());
+      filteredResults = sortBy(filteredResults, (r) => {
+        return r.name.toLowerCase().indexOf((mentionString ?? "").toLowerCase());
       });
       filteredResults = filteredResults.slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
       setResults(filteredResults);
     })();
-  }, [mentionString]);
+  }, [mentionString, mentionConfigs?.find, mentionConfigs?.map]);
 
   return results;
 }
 
-function checkForAtSignMentions(
-  text: string,
-  minMatchLength: number,
-): MenuTextMatch | null {
+function checkForAtSignMentions(text: string, minMatchLength: number): MenuTextMatch | null {
   let match = AtSignMentionsRegex.exec(text);
 
   if (match === null) {
@@ -172,7 +174,7 @@ class MentionTypeaheadOption extends MenuOption {
 
   constructor(
     public readonly data: IMentionData,
-    picture: JSX.Element
+    picture: JSX.Element,
   ) {
     super(data.name);
     this.name = data.name;
@@ -197,9 +199,9 @@ function MentionsTypeaheadMenuItem({
   onMouseEnter: () => void;
   option: MentionTypeaheadOption;
 }) {
-  let className = 'item';
+  let className = "item";
   if (isSelected) {
-    className += ' selected';
+    className += " selected";
   }
   return (
     <li
@@ -207,9 +209,8 @@ function MentionsTypeaheadMenuItem({
       tabIndex={-1}
       className={className}
       ref={option.setRefElement}
-      role="option"
       aria-selected={isSelected}
-      id={'typeahead-item-' + index}
+      id={`typeahead-item-${index}`}
       onMouseEnter={onMouseEnter}
       onClick={onClick}
       data-kind={option.data.kind}
@@ -222,17 +223,15 @@ function MentionsTypeaheadMenuItem({
   );
 }
 
-export function MentionsPlugin(
-  props: {
-    mentionConfigs?: IMentionConfig[]
-    mentionsOpen?: Observable<boolean>
-  }
-): JSX.Element | null {
+export function MentionsPlugin(props: {
+  mentionConfigs?: IMentionConfig[];
+  mentionsOpen?: Observable<boolean>;
+}): JSX.Element | null {
   const [editor] = useLexicalComposerContext();
 
   const [queryString, setQueryString] = useState<string | null>(null);
   const results = useMentionLookupService(queryString, props.mentionConfigs);
-  const [_mentionsOpen] = useState(() => observable(false));  
+  const [_mentionsOpen] = useState(() => observable(false));
 
   if (props.mentionsOpen) {
     const finalMentionsOpen = _mentionsOpen() && results.length > 0;
@@ -241,31 +240,30 @@ export function MentionsPlugin(
     }
   }
 
-  const checkForSlashTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
+  const checkForSlashTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
     minLength: 0,
   });
 
   const options = useMemo(
     () =>
       results
-        .map(
-          (result) => {
-            let picture = <i className="bi bi-question pe-1" />;
-            const config = props.mentionConfigs?.find(c => c.kind === result.kind);
-            if (config) {
-              if (config.picture) {
-                picture = config.picture(result);
-              } else {
-                picture = <i className={config.iconClass + ' pe-1'} />;
-              }
+        .map((result) => {
+          const picKey = `mention-pic-${result.kind}-${result.id}`;
+          let picture = <i key={picKey} className="bi bi-question pe-1" />;
+          const config = props.mentionConfigs?.find((c) => c.kind === result.kind);
+          if (config) {
+            if (config.picture) {
+              picture = config.picture(result);
             } else {
-              picture = <i className={'bi bi-question pe-1'} />;
+              picture = <i key={picKey} className={`${config.iconClass} pe-1`} />;
             }
-            return new MentionTypeaheadOption(result, picture);
+          } else {
+            picture = <i key={picKey} className={"bi bi-question pe-1"} />;
           }
-        )
+          return new MentionTypeaheadOption(result, picture);
+        })
         .slice(0, SUGGESTION_LIST_LENGTH_LIMIT),
-    [results],
+    [results, props.mentionConfigs?.find],
   );
 
   const onSelectOption = useCallback(
@@ -282,7 +280,7 @@ export function MentionsPlugin(
         mentionNode.selectNext(); // Move cursor to the position after the mention
         const selection = $getSelection();
         if (selection !== null) {
-          selection.insertText(' '); // Insert a space after the mention
+          selection.insertText(" "); // Insert a space after the mention
         }
         closeMenu();
       });
@@ -301,7 +299,7 @@ export function MentionsPlugin(
     [checkForSlashTriggerMatch, editor],
   );
 
-  const popoverRef = React.useRef<HTMLDivElement>(null);
+  const _popoverRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <LexicalTypeaheadMenuPlugin<MentionTypeaheadOption>
@@ -318,14 +316,14 @@ export function MentionsPlugin(
         if (!(anchorElementRef.current && results.length)) {
           return null;
         }
-        
+
         // distance from the top of the viewport to the top of the anchor element
         const anchorTop = anchorElementRef.current.getBoundingClientRect().top;
         const viewportHeight = window.innerHeight;
 
-        let className = 'typeahead-popover mentions-menu';
-        if (anchorTop > (viewportHeight / 2)) {
-          className += ' mentions-menu-popup';
+        let className = "typeahead-popover mentions-menu";
+        if (anchorTop > viewportHeight / 2) {
+          className += " mentions-menu-popup";
         }
 
         return ReactDOM.createPortal(

package/src/components/markdown-editor/theme.ts

@@ -6,42 +6,41 @@
  *
  */
 export default {
-  code: 'editor-code',
+  code: "editor-code",
   heading: {
-    h1: 'editor-heading-h1',
-    h2: 'editor-heading-h2',
-    h3: 'editor-heading-h3',
-    h4: 'editor-heading-h4',
-    h5: 'editor-heading-h5',
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+    h3: "editor-heading-h3",
+    h4: "editor-heading-h4",
+    h5: "editor-heading-h5",
   },
-  image: 'editor-image',
-  link: 'editor-link',
+  image: "editor-image",
+  link: "editor-link",
   list: {
-    listitem: 'editor-listitem',
+    listitem: "editor-listitem",
     nested: {
       // listitem: 'editor-nested-listitem',
-      listitem: 'PlaygroundEditorTheme__nestedListItem',
+      listitem: "PlaygroundEditorTheme__nestedListItem",
     },
-    ol: 'editor-list-ol',
-    ul: 'editor-list-ul',
-    checklist: 'PlaygroundEditorTheme__checklist',
-    listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
-    listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
-    
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    checklist: "PlaygroundEditorTheme__checklist",
+    listitemChecked: "PlaygroundEditorTheme__listItemChecked",
+    listitemUnchecked: "PlaygroundEditorTheme__listItemUnchecked",
   },
-  ltr: 'ltr',
-  paragraph: 'editor-paragraph',
-  placeholder: 'editor-placeholder',
-  quote: 'editor-quote',
-  rtl: 'rtl',
+  ltr: "ltr",
+  paragraph: "editor-paragraph",
+  placeholder: "editor-placeholder",
+  quote: "editor-quote",
+  rtl: "rtl",
   text: {
-    bold: 'editor-text-bold',
-    code: 'editor-text-code',
-    hashtag: 'editor-text-hashtag',
-    italic: 'editor-text-italic',
-    overflowed: 'editor-text-overflowed',
-    strikethrough: 'editor-text-strikethrough',
-    underline: 'editor-text-underline',
-    underlineStrikethrough: 'editor-text-underlineStrikethrough',
+    bold: "editor-text-bold",
+    code: "editor-text-code",
+    hashtag: "editor-text-hashtag",
+    italic: "editor-text-italic",
+    overflowed: "editor-text-overflowed",
+    strikethrough: "editor-text-strikethrough",
+    underline: "editor-text-underline",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
   },
 };