@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,356 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption,
+  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 + ']';
+
+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
+      let 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]);
+
+  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}
+      role="option"
+      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) => {
+            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'} />;
+              }
+            } else {
+              picture = <i className={'bi bi-question pe-1'} />;
+            }
+            return new MentionTypeaheadOption(result, picture);
+          }
+        )
+        .slice(0, SUGGESTION_LIST_LENGTH_LIMIT),
+    [results],
+  );
+
+  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,
+        );
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ *
+ */
+export default {
+  code: 'editor-code',
+  heading: {
+    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',
+  list: {
+    listitem: 'editor-listitem',
+    nested: {
+      // listitem: 'editor-nested-listitem',
+      listitem: 'PlaygroundEditorTheme__nestedListItem',
+    },
+    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',
+  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',
+  },
+};

package/src/components/markdown-editor/toolbar.tsx

@@ -0,0 +1,263 @@
+import React from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import {
+  $getSelection,
+  $isRangeSelection,
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  REDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  UNDO_COMMAND,
+} from 'lexical';
+import {
+  INSERT_UNORDERED_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  INSERT_CHECK_LIST_COMMAND,
+} from '@lexical/list';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const LowPriority = 1;
+
+function Divider() {
+  return <span className='tool-bar-divider'></span>;
+}
+
+export interface IToolbarControl {
+  iconClass: string;
+  onClick: () => any;
+  title?: string;
+}
+
+export interface IToolbarProps {
+  topRightControls?: IToolbarControl[];
+}
+
+export function ToolbarPlugin(props: IToolbarProps) {
+  const [editor] = useLexicalComposerContext();
+  const toolbarRef = useRef(null);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  // New state for list types
+  const [isUnorderedList, setIsUnorderedList] = useState(false);
+  const [isOrderedList, setIsOrderedList] = useState(false);
+  const [isCheckList, setIsCheckList] = useState(false);
+
+  const $updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      // Update text format
+      setIsBold(selection.hasFormat('bold'));
+      setIsItalic(selection.hasFormat('italic'));
+      setIsUnderline(selection.hasFormat('underline'));
+      setIsStrikethrough(selection.hasFormat('strikethrough'));
+
+      // Update list format
+      const anchorNode = selection.anchor.getNode();
+      const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        setIsUnorderedList(elementDOM.tagName === 'UL');
+        setIsOrderedList(elementDOM.tagName === 'OL');
+        setIsCheckList(elementDOM.tagName === 'UL' && elementDOM.classList.contains('PlaygroundEditorTheme__checklist'));
+      }
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          $updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, _newEditor) => {
+          $updateToolbar();
+          return false;
+        },
+        LowPriority,
+      ),
+      editor.registerCommand(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload);
+          return false;
+        },
+        LowPriority,
+      ),
+      editor.registerCommand(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload);
+          return false;
+        },
+        LowPriority,
+      ),
+    );
+  }, [editor, $updateToolbar]);
+
+  const insertUnorderedList = () => {
+    if (isUnorderedList) {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    }
+  };
+
+  const insertOrderedList = () => {
+    if (isOrderedList) {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    }
+  };
+
+  const insertCheckList = () => {
+    if (isCheckList) {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
+    }
+  };
+
+  return (
+    <div className="toolbar" ref={toolbarRef}>
+      {/* <button
+        disabled={!canUndo}
+        onClick={() => {
+          editor.dispatchCommand(UNDO_COMMAND, undefined);
+        }}
+        className="toolbar-item spaced"
+        aria-label="Undo">
+        <i className="bi bi-arrow-counterclockwise" />
+      </button>
+      <button
+        disabled={!canRedo}
+        onClick={() => {
+          editor.dispatchCommand(REDO_COMMAND, undefined);
+        }}
+        className="toolbar-item"
+        aria-label="Redo">
+        <i className="bi bi-arrow-clockwise" />
+      </button>
+      <Divider /> */}
+      <button
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+        }}
+        tabIndex={-1}
+        className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
+        aria-label="Format Bold">
+        <i className="bi bi-type-bold" />
+      </button>
+      <button
+        tabIndex={-1}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+        }}
+        className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
+        aria-label="Format Italics">
+        <i className="bi bi-type-italic" />
+      </button>
+      {/* <button
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+        }}
+        className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
+        aria-label="Format Underline">
+        <i className="bi bi-type-underline" />
+      </button> */}
+      <button
+        tabIndex={-1}
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+        }}
+        className={'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')}
+        aria-label="Format Strikethrough">
+        <i className="bi bi-type-strikethrough" />
+      </button>
+      <Divider />
+      {/* <button
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+        }}
+        className="toolbar-item spaced"
+        aria-label="Left Align">
+        <i className="bi bi-text-left" />
+      </button>
+      <button
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+        }}
+        className="toolbar-item spaced"
+        aria-label="Center Align">
+        <i className="bi bi-text-center" />
+      </button>
+      <button
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+        }}
+        className="toolbar-item spaced"
+        aria-label="Right Align">
+        <i className="bi bi-text-right" />
+      </button>
+      <button
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+        }}
+        className="toolbar-item"
+        aria-label="Justify Align">
+        <i className="bi bi-justify" />
+      </button>{' '} */}
+      {/* <Divider /> */}
+      <button
+        tabIndex={-1}
+        onClick={insertUnorderedList}
+        className={'toolbar-item spaced ' + (isUnorderedList ? 'active' : '')}
+        aria-label="Insert Unordered List">
+        <i className="bi bi-list-ul" />
+      </button>
+      <button
+        tabIndex={-1}
+        onClick={insertOrderedList}
+        className={'toolbar-item spaced ' + (isOrderedList ? 'active' : '')}
+        aria-label="Insert Ordered List">
+        <i className="bi bi-list-ol" />
+      </button>
+      <button
+        tabIndex={-1}
+        onClick={insertCheckList}
+        className={'toolbar-item spaced ' + (isCheckList ? 'active' : '')}
+        aria-label="Insert Check List">
+        <i className="bi bi-list-check" />
+      </button>
+
+      {(props.topRightControls?.length ?? 0) > 0 && (
+        <div className='float-end'>
+          {props.topRightControls?.map((control, i) => (
+            <button
+              key={i}
+              tabIndex={-1}
+              onClick={control.onClick}
+              className={'toolbar-item spaced active'}
+              aria-label="Insert Check List"
+              title={control.title}
+            >
+              <i className={control.iconClass} />
+            </button>
+          ))}
+        </div>
+      )}
+      
+    </div>
+  );
+}