@peers-app/peers-ui 0.0.14

package/src/components/typeahead/mentions-plugin.tsx

@@ -0,0 +1,265 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption,
+  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 '../markdown-editor/mention-node';
+
+// 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 () => {
+      mentionString = mentionString || '';
+      const prefix = mentionString[0];
+      // 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) {
+        let results = await config.query(mentionString);
+        results = results.map(r => ({ ...r, clickable: false }));
+        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);
+      filteredResults = filteredResults.map(r => ({ ...r, clickable: false }));
+      setResults(filteredResults);
+    })();
+  }, [mentionString]);
+
+  return results;
+}
+
+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 textTrimmed = text.trimStart();
+      return {
+        leadOffset: text.length - textTrimmed.length,
+        matchingString: text.trim(),
+        replaceableString: text.trim(),
+      };
+    },
+    [checkForSlashTriggerMatch, editor],
+  );
+
+  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/typeahead/typeahead-editor.tsx

@@ -0,0 +1,140 @@
+import { CodeNode } from '@lexical/code';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { observable, Observable } from "@peers-app/peers-sdk";
+import { COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND } from 'lexical';
+import React, { useEffect, useState } from 'react';
+import { MarkdownPlugin } from '../markdown-editor/markdown-plugin';
+import { MentionNode } from '../markdown-editor/mention-node';
+import theme from '../markdown-editor/theme';
+import { MentionsPlugin } from './mentions-plugin';
+import { IMentionConfig, mentionConfigs } from '../../mention-configs';
+
+const editorConfig = {
+  namespace: 'PeersEditor',
+  nodes: [
+    HeadingNode,
+    QuoteNode,
+    CodeNode,
+    ListNode,
+    ListItemNode,
+    MentionNode,
+    AutoLinkNode as any,
+    LinkNode,
+  ],
+  // Handling of errors during update
+  onError(error: Error) {
+    throw error;
+  },
+  // The editor theme
+  theme,
+};
+
+export interface IEditorEffects {
+  onKeyDown?: (e: React.KeyboardEvent) => (boolean | void);
+  focus?: () => void;
+}
+
+export interface ITypeaheadEditorProps {
+  value: Observable<string>;
+  effects?: IEditorEffects;
+  autoFocus?: boolean;
+  maxHeight?: string | number;
+  mentionConfigs?: IMentionConfig[];
+}
+
+export function TypeaheadEditor(props: ITypeaheadEditorProps) {
+  const { effects } = props;
+  const editorRef = React.useRef<HTMLDivElement>(null);
+
+  const [mentionsOpen] = useState(() => {
+    const obs = observable(false);
+    return obs;
+  });
+
+  if (effects) {
+    effects.focus = () => {
+      if (editorRef.current?.children[0]) {
+        const div = editorRef.current.children[0] as HTMLDivElement;
+        setTimeout(() => {
+          div.focus();
+          // Set the selection to the end of the div content
+          const range = document.createRange();
+          range.selectNodeContents(div);
+          range.collapse(false);
+          const selection = window.getSelection();
+          if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }, 10);
+      }
+    }
+  }
+
+  const _mentionConfigs = props.mentionConfigs ?? mentionConfigs;
+
+  return (
+    <div className="border rounded border-dark-subtle">
+      <LexicalComposer initialConfig={{ ...editorConfig }}>
+        <div className="editor-container">
+
+          <div
+            className="editor-inner"
+            ref={editorRef}
+            style={{ maxHeight: props.maxHeight ?? 30, overflowY: 'hidden' }}
+          >
+            <RichTextPlugin
+              contentEditable={
+                <ContentEditable
+                  className="editor-input p-1"
+                />
+              }
+              // placeholder={(isEditable) => !isEditable ? <div className="text-muted">Type here...</div> : null}
+              ErrorBoundary={LexicalErrorBoundary}
+            />
+            <HistoryPlugin />
+            {props.autoFocus && <AutoFocusPlugin defaultSelection='rootEnd' />}
+            
+            {_mentionConfigs.length > 0 && (
+              <MentionsPlugin
+                mentionConfigs={_mentionConfigs}
+                mentionsOpen={mentionsOpen}
+              />
+            )}
+
+            <MarkdownPlugin markdownObs={props.value} />
+            {/* <MarkdownShortcutPlugin transformers={customMarkdownTransformers} /> */}
+            <OnKeyDownPlugin effects={props.effects} mentionsOpen={mentionsOpen} />
+          </div>
+        </div>
+      </LexicalComposer>
+    </div>
+  );
+}
+
+const OnKeyDownPlugin = (props: { effects?: IEditorEffects, mentionsOpen: Observable<boolean> }) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const removeListener = editor.registerCommand(KEY_DOWN_COMMAND, (event: KeyboardEvent) => {
+      if (props.mentionsOpen()) {
+        return false;
+      }
+      if (props.effects?.onKeyDown) {
+        const result = props.effects.onKeyDown(event as any);
+        return !!result;
+      }
+      return false;
+    }, COMMAND_PRIORITY_LOW);
+    return removeListener;
+  }, [editor]);
+  return null;
+}

package/src/components/typeahead/typeahead.tsx

@@ -0,0 +1,77 @@
+import { formatMention, getAllMentions, observable, Observable } from "@peers-app/peers-sdk";
+import React, { useState } from 'react';
+import { useObservable, usePromise, useSubscription } from "../../hooks";
+import { IMentionConfig } from '../../mention-configs';
+import { TypeaheadEditor } from './typeahead-editor';
+
+interface IProps<T> {
+  value: Observable<string> | Observable<string | undefined>
+  textValue?: Observable<string>
+  mentionConfigs: IMentionConfig[]
+  autoFocus?: boolean
+  onSubmit?: (value: string, textValue: string) => void
+}
+
+export function Typeahead<T>(props: IProps<T>) {
+  const { value: sourceValue } = props;
+
+  // const typeaheadValue = useObservableState('', true);
+  const [typeaheadValue] = useState(() => {
+    if (props.textValue) {
+      return props.textValue;
+    } else {
+      return observable('');
+    }
+  });
+  useObservable(typeaheadValue);
+  const existingMention = usePromise(async () => {
+    const id = sourceValue();
+    if (!id) return true;
+    for (const config of props.mentionConfigs) {
+      const refValue = await config.getById(id);
+      if (refValue) {
+        typeaheadValue(formatMention({ kind: config.kind, id, name: refValue.name }) + ' ');
+        return true;
+      }
+    }
+    return true;
+  });
+  
+  useSubscription(typeaheadValue, () => {
+    const mentions = getAllMentions(typeaheadValue());
+    const resolvedMention = mentions.find(m => m.id !== sourceValue()) || mentions[0];
+    const resolvedId = resolvedMention?.id;
+    if (resolvedId !== sourceValue() || mentions.length > 1) {
+      sourceValue(resolvedId);
+      if (resolvedId) {
+        const newTypeaheadValue = formatMention(resolvedMention) + ' ';
+        typeaheadValue(newTypeaheadValue);
+      }
+    }
+  }, true);
+
+  if (!existingMention) {
+    return <div>...</div>
+  }
+
+  return (
+    <TypeaheadEditor
+      value={typeaheadValue}
+      mentionConfigs={props.mentionConfigs}
+      autoFocus={props.autoFocus}
+      
+      // these settings configure it for a single line input
+      effects={{
+        onKeyDown(e) {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            if (props.onSubmit) {
+              props.onSubmit(sourceValue() ?? '', typeaheadValue());
+            }
+            return true;
+          }
+        },        
+      }}
+    />
+  )
+}