@peers-app/peers-ui 0.27.3 → 0.27.4

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

@@ -1,204 +0,0 @@
-import type { IMentionData } from "@peers-app/peers-sdk";
-import {
-  $applyNodeReplacement,
-  type DOMConversionMap,
-  type DOMConversionOutput,
-  type DOMExportOutput,
-  type EditorConfig,
-  type LexicalNode,
-  type NodeKey,
-  type SerializedTextNode,
-  type Spread,
-  TextNode,
-} from "lexical";
-import { mainContentPath } from "../../globals";
-import { mentionConfigs } from "../../mention-configs";
-
-/** Serialized Lexical payload for a Peers mention node. */
-export type SerializedMentionNode = Spread<
-  {
-    data: IMentionData;
-  },
-  SerializedTextNode
->;
-
-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");
-
-  if (mentionName && dataId) {
-    const data: IMentionData = {
-      kind: dataKind,
-      name: mentionName,
-      id: dataId,
-      clickable: clickable === "true" ? true : clickable === "false" ? false : undefined,
-    };
-    const node = $createMentionNode(data);
-    return {
-      node,
-    };
-  }
-
-  return null;
-}
-
-/** Lexical text entity that renders and navigates a typed Peers mention. */
-export class MentionNode extends TextNode {
-  static getType(): string {
-    return "mention";
-  }
-
-  static clone(node: MentionNode): MentionNode {
-    return new MentionNode(node.data, node.__key);
-  }
-  static importJSON(serializedNode: SerializedMentionNode): MentionNode {
-    const node = $createMentionNode(serializedNode.data);
-    // node.setTextContent('@' + serializedNode.text);
-    node.setTextContent(serializedNode.text);
-    node.setFormat(serializedNode.format);
-    node.setDetail(serializedNode.detail);
-    node.setMode(serializedNode.mode);
-    node.setStyle(serializedNode.style);
-    return node;
-  }
-
-  constructor(
-    public readonly data: IMentionData,
-    key?: NodeKey,
-  ) {
-    // const prefix = (data.kind === 'assistant' || data.kind === 'user') ? '@' : '$';
-    const prefix = data.kind === "user" ? "@" : "";
-    super(prefix + data.name, key);
-  }
-
-  exportJSON(): SerializedMentionNode {
-    return {
-      ...super.exportJSON(),
-      type: "mention",
-      version: 1,
-      data: this.data,
-    };
-  }
-
-  createDOM(config: EditorConfig): HTMLElement {
-    const dom = super.createDOM(config);
-
-    const kind = this.data.kind;
-    const mentionConfig = mentionConfigs.find((c) => c.kind === kind);
-
-    if (mentionConfig) {
-      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),
-    );
-
-    // currently ignoring `clickable` attribute
-    // if (this.data.clickable !== false) {...
-    const onClick = mentionConfig?.onClick;
-    dom.style.cursor = "pointer";
-    dom.addEventListener("click", () => {
-      if (onClick) {
-        onClick(this.data);
-      } else {
-        const id = this.data.id;
-        const href = kind === "user" ? `identity/people/${id}` : `${kind}s/${id}`;
-        mainContentPath(href);
-      }
-    });
-
-    if (mentionConfig && kind !== "user") {
-      const iconSpan = document.createElement("i");
-      iconSpan.className = `pe-1 ${mentionConfig.iconClass}`;
-      dom.prepend(iconSpan);
-      return dom;
-    }
-
-    // else if (kind === 'task') {
-    //   const ckbx = document.createElement('input');
-    //   ckbx.type = 'checkbox';
-    //   ckbx.className = 'me-1';
-    //   const taskId = this.data.id;
-    //   Tasks().get(taskId).then(task => {
-    //     if (!task) return;
-    //     ckbx.checked = !!task.completeDT;
-    //     ckbx.addEventListener('change', () => {
-    //       task.completeDT = ckbx.checked ? new Date() : undefined;
-    //       Tasks().update(task);
-    //     });
-    //   });
-    //   const sub = Tasks().dataChanged.subscribe(evt => {
-    //     const task = evt.dataObject as ITask;
-    //     if (!task || task.taskId !== taskId) return;
-    //     if (!document.body.contains(ckbx)) {
-    //       sub.unsubscribe();
-    //     } else {
-    //       ckbx.checked = !!task.completeDT;
-    //     }
-    //   });
-    //   dom.prepend(ckbx);
-    // }
-
-    return dom;
-  }
-
-  exportDOM(): DOMExportOutput {
-    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),
-    );
-    return { element };
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {
-      span: (domNode: HTMLElement) => {
-        if (!domNode.hasAttribute("data-lexical-mention")) {
-          return null;
-        }
-        return {
-          conversion: $convertMentionElement,
-          priority: 1,
-        };
-      },
-    };
-  }
-
-  isTextEntity(): true {
-    return true;
-  }
-
-  canInsertTextBefore(): boolean {
-    return false;
-  }
-
-  canInsertTextAfter(): boolean {
-    return false;
-  }
-}
-
-/** Create a segmented Lexical mention node from mention data. */
-export function $createMentionNode(data: IMentionData): MentionNode {
-  const mentionNode = new MentionNode(data);
-  mentionNode.setMode("segmented").toggleDirectionless();
-  return $applyNodeReplacement(mentionNode);
-}
-
-/** Return whether a Lexical node is a {@link MentionNode}. */
-export function $isMentionNode(node: LexicalNode | null | undefined): node is MentionNode {
-  return node instanceof MentionNode;
-}

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

@@ -1,354 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import {
-  LexicalTypeaheadMenuPlugin,
-  MenuOption,
-  type MenuTextMatch,
-  useBasicTypeaheadTriggerMatch,
-} 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,
-  PUNCTUATION,
-};
-
-const PUNC = DocumentMentionsRegex.PUNCTUATION;
-
-const TRIGGERS = ["@", "<"].join("");
-
-// Chars we expect to see in a mention (non-space, non-punctuation).
-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"
-  "[" +
-  PUNC +
-  "]|" + // E.g. "-' in "Salier-Hellendag"
-  ")";
-
-const LENGTH_LIMIT = 75;
-
-const AtSignMentionsRegex = new RegExp(
-  "(^|\\s|\\()(" +
-    "[" +
-    TRIGGERS +
-    "]" +
-    "((?:" +
-    VALID_CHARS +
-    VALID_JOINS +
-    "){0," +
-    LENGTH_LIMIT +
-    "})" +
-    ")$",
-);
-
-// 50 is the longest alias length limit.
-const ALIAS_LENGTH_LIMIT = 50;
-
-// Regex used to match alias.
-const AtSignMentionsRegexAliasRegex = new RegExp(
-  "(^|\\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[] {
-  const [results, setResults] = useState<Array<IMentionData>>([]);
-
-  useEffect(() => {
-    if (!mentionString) {
-      setResults([]);
-      return;
-    }
-    (async () => {
-      const prefix = mentionString[0];
-      mentionString = mentionString.slice(1);
-      // TODO simplify how users can include completed tasks in their search
-      const searchCompletedTasks = prefix === "$" && mentionString.startsWith("done");
-      if (searchCompletedTasks) {
-        mentionString = mentionString.slice(4);
-      }
-      let kind = "";
-      if (mentionString.includes(":")) {
-        const parts = mentionString.split(":");
-        kind = parts[0];
-        mentionString = parts[1] || "";
-      }
-      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 || "")));
-      let allResults = results.flat();
-      allResults = uniqBy(allResults, "id");
-      let filteredResults = allResults;
-      if (prefix === "@") {
-        filteredResults = filteredResults.filter(
-          (result) => result.kind === "user" || result.kind === "assistant",
-        );
-      } else {
-        filteredResults = filteredResults.filter(
-          (result) => result.kind !== "user" && result.kind !== "assistant",
-        );
-      }
-      if (kind) {
-        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 = filteredResults.slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
-      setResults(filteredResults);
-    })();
-  }, [mentionString, mentionConfigs?.find, mentionConfigs?.map]);
-
-  return results;
-}
-
-function checkForAtSignMentions(text: string, minMatchLength: number): MenuTextMatch | null {
-  let match = AtSignMentionsRegex.exec(text);
-
-  if (match === null) {
-    match = AtSignMentionsRegexAliasRegex.exec(text);
-  }
-  if (match !== null) {
-    // The strategy ignores leading whitespace but we need to know it's
-    // length to add it to the leadOffset
-    const maybeLeadingWhitespace = match[1];
-
-    const matchingString = match[3];
-    if (matchingString.length >= minMatchLength) {
-      return {
-        leadOffset: match.index + maybeLeadingWhitespace.length,
-        matchingString: match[2],
-        replaceableString: match[2],
-      };
-    }
-  }
-  return null;
-}
-
-function getPossibleQueryMatch(text: string): MenuTextMatch | null {
-  return checkForAtSignMentions(text, 1);
-}
-
-class MentionTypeaheadOption extends MenuOption {
-  name: string;
-  picture: JSX.Element;
-  id: string;
-  userId?: string;
-
-  constructor(
-    public readonly data: IMentionData,
-    picture: JSX.Element,
-  ) {
-    super(data.name);
-    this.name = data.name;
-    this.picture = picture;
-    this.id = data.id;
-    // if (data.kind === 'assistant') {
-    //   this.userId = data.userId;
-    // }
-  }
-}
-
-function MentionsTypeaheadMenuItem({
-  index,
-  isSelected,
-  onClick,
-  onMouseEnter,
-  option,
-}: {
-  index: number;
-  isSelected: boolean;
-  onClick: () => void;
-  onMouseEnter: () => void;
-  option: MentionTypeaheadOption;
-}) {
-  let className = "item";
-  if (isSelected) {
-    className += " selected";
-  }
-  return (
-    <li
-      key={option.key}
-      tabIndex={-1}
-      className={className}
-      ref={option.setRefElement}
-      aria-selected={isSelected}
-      id={`typeahead-item-${index}`}
-      onMouseEnter={onMouseEnter}
-      onClick={onClick}
-      data-kind={option.data.kind}
-      data-id={option.id}
-      data-user-id={option.userId || undefined}
-    >
-      {option.picture}
-      <span className="text">{option.name}</span>
-    </li>
-  );
-}
-
-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));
-
-  if (props.mentionsOpen) {
-    const finalMentionsOpen = _mentionsOpen() && results.length > 0;
-    if (props.mentionsOpen() !== finalMentionsOpen) {
-      props.mentionsOpen(finalMentionsOpen);
-    }
-  }
-
-  const checkForSlashTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
-    minLength: 0,
-  });
-
-  const options = useMemo(
-    () =>
-      results
-        .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 key={picKey} className={`${config.iconClass} pe-1`} />;
-            }
-          } else {
-            picture = <i key={picKey} className={"bi bi-question pe-1"} />;
-          }
-          return new MentionTypeaheadOption(result, picture);
-        })
-        .slice(0, SUGGESTION_LIST_LENGTH_LIMIT),
-    [results, props.mentionConfigs?.find],
-  );
-
-  const onSelectOption = useCallback(
-    (
-      selectedOption: MentionTypeaheadOption,
-      nodeToReplace: TextNode | null,
-      closeMenu: () => void,
-    ) => {
-      editor.update(() => {
-        const mentionNode = $createMentionNode(selectedOption.data);
-        if (nodeToReplace) {
-          nodeToReplace.replace(mentionNode);
-        }
-        mentionNode.selectNext(); // Move cursor to the position after the mention
-        const selection = $getSelection();
-        if (selection !== null) {
-          selection.insertText(" "); // Insert a space after the mention
-        }
-        closeMenu();
-      });
-    },
-    [editor],
-  );
-
-  const checkForMentionMatch = useCallback(
-    (text: string) => {
-      const slashMatch = checkForSlashTriggerMatch(text, editor);
-      if (slashMatch !== null) {
-        return null;
-      }
-      return getPossibleQueryMatch(text);
-    },
-    [checkForSlashTriggerMatch, editor],
-  );
-
-  const _popoverRef = React.useRef<HTMLDivElement>(null);
-
-  return (
-    <LexicalTypeaheadMenuPlugin<MentionTypeaheadOption>
-      onQueryChange={setQueryString}
-      onSelectOption={onSelectOption}
-      triggerFn={checkForMentionMatch}
-      options={options}
-      onOpen={() => _mentionsOpen(true)}
-      onClose={() => _mentionsOpen(false)}
-      menuRenderFn={(
-        anchorElementRef,
-        { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
-      ) => {
-        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";
-        }
-
-        return ReactDOM.createPortal(
-          <div className={className}>
-            <ul>
-              {options.map((option, i: number) => (
-                <MentionsTypeaheadMenuItem
-                  index={i}
-                  isSelected={selectedIndex === i}
-                  onClick={() => {
-                    setHighlightedIndex(i);
-                    selectOptionAndCleanUp(option);
-                  }}
-                  onMouseEnter={() => {
-                    setHighlightedIndex(i);
-                  }}
-                  key={option.key}
-                  option={option}
-                />
-              ))}
-            </ul>
-          </div>,
-          anchorElementRef.current,
-        );
-      }}
-    />
-  );
-}