@peers-app/peers-ui 0.27.3 → 0.27.5

package/src/components/list-screen.tsx

@@ -1,126 +0,0 @@
-import {
-  type DataFilter,
-  type ICursorIterable,
-  observable,
-  type SortBy,
-  type Table,
-} from "@peers-app/peers-sdk";
-import * as _ from "lodash";
-import type React from "react";
-import { useCallback, useEffect, useState } from "react";
-import { isDesktop } from "../globals";
-import { useObservable } from "../hooks";
-import { Input } from "./input";
-import { LazyList } from "./lazy-list";
-import { LoadingIndicator } from "./loading-indicator";
-
-interface IProps<T extends Record<string, unknown>> {
-  table: Table<T>;
-  /**
-   * Creates a new record from the search text when the user presses Enter. When omitted,
-   * the list is browse/search only (no create) and the placeholder drops "or create".
-   */
-  newRecord?: (text: string) => Promise<T>;
-  getFilter?: (text: string) => DataFilter<T>;
-  sortBy?: SortBy<T>;
-  renderItem: (record: T) => JSX.Element;
-  placeholderName?: string;
-}
-
-export function ListScreen<T extends Record<string, unknown>>(props: IProps<T>) {
-  const { table, newRecord, sortBy } = props;
-
-  const [searchTextObs] = useState(() => observable(""));
-  const [searchText] = useObservable(searchTextObs);
-
-  const [cursorObs] = useState(() => observable<ICursorIterable<T> | undefined>());
-
-  const newCursor = useCallback(async () => {
-    const filter = props.getFilter ? props.getFilter(searchText) : null;
-    const cursor = await table.cursor(filter || {}, {
-      sortBy,
-      ...(filter ? {} : { textSearch: searchText }),
-    });
-    cursorObs(cursor);
-    return cursor;
-  }, [table, searchText, props.getFilter, sortBy, cursorObs]);
-
-  useEffect(() => {
-    void newCursor();
-  }, [newCursor]);
-
-  const idFieldName = table.metaData.primaryKeyName;
-
-  async function loadMore(existing: T[]): Promise<T[]> {
-    let moreMatches: T[] = [];
-    const cursor = cursorObs() || (await newCursor());
-    for await (const nextRecord of cursor) {
-      if (existing.find((e) => e[idFieldName] === nextRecord[idFieldName])) continue;
-      moreMatches.push(nextRecord);
-      if (searchText.length && moreMatches.length > 5) break;
-      if (moreMatches.length >= 10) break;
-    }
-    if (moreMatches.length === 0) {
-      cursorObs(undefined);
-    }
-    // if we're using default textSearch, list items with the most words matched in the name first
-    if (
-      !props.getFilter &&
-      moreMatches &&
-      searchText &&
-      table.metaData.fields.find((f) => f.name === "name")
-    ) {
-      const words = searchText.toLowerCase().split(" ");
-      moreMatches = _.sortBy(moreMatches, (r) => {
-        const nameVal = r.name;
-        const nameStr = typeof nameVal === "string" ? nameVal : String(nameVal ?? "");
-        return words.filter((w) => nameStr.toLowerCase().includes(w)).length;
-      }).reverse();
-    }
-    return moreMatches;
-  }
-
-  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== "Enter") return;
-    if (!newRecord) return;
-    const name = searchText.trim();
-    if (!name) return;
-    searchTextObs("");
-    await newRecord(name);
-  }
-
-  return (
-    <div className="container-fluid">
-      <div className="input-group mt-3 mb-3">
-        <Input
-          value={searchTextObs}
-          className="form-control"
-          placeholder={`${newRecord ? "Search or create" : "Search"} ${props.placeholderName || table.metaData.name}`}
-          autoFocus={!!isDesktop()}
-          onKeyUp={(evt) => searchSubmit(evt)}
-        />
-      </div>
-
-      <div className="peers-list-container">
-        <LazyList
-          resetTrigger={searchText}
-          loadMore={loadMore}
-          scrollThreshold={0.6}
-          renderItems={(notes) => {
-            return notes.map(props.renderItem);
-          }}
-          loadingIndicator={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              <LoadingIndicator />
-            </div>
-          }
-          endOfList={
-            <div className="d-flex justify-content-center" style={{ height: 200 }}>
-              {/* <span className="h3">End of List</span> */}
-            </div>
-          }
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/loading-indicator.tsx

@@ -1,7 +0,0 @@
-export const LoadingIndicator = () => {
-  return (
-    <span className="spinner-grow spinner-grow-sm text-secondary m-4" role="status">
-      <span className="visually-hidden">Loading...</span>
-    </span>
-  );
-};

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

@@ -1,29 +0,0 @@
-import { AutoLinkPlugin, createLinkMatcherWithRegExp } from "@lexical/react/LexicalAutoLinkPlugin";
-
-const URL_REGEX =
-  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
-
-const EMAIL_REGEX =
-  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
-
-const MATCHERS = [
-  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
-    return text.startsWith("http") ? text : `https://${text}`;
-  }),
-  createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
-    return `mailto:${text}`;
-  }),
-];
-
-export function LexicalAutoLinkPlugin(): JSX.Element {
-  return <AutoLinkPlugin matchers={MATCHERS} />;
-}
-
-import { LinkPlugin as LexicalLinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-
-export default function LinkPlugin(): JSX.Element {
-  const validateUrl = (url: string) => {
-    return url.startsWith("http://") || url.startsWith("https://") || url.startsWith("mailto:");
-  };
-  return <LexicalLinkPlugin validateUrl={validateUrl} />;
-}

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

@@ -1,9 +0,0 @@
-import { type IMarkdownEditorProps, MarkdownEditor } from "./editor";
-
-export const MarkdownEditorInline = (props: IMarkdownEditorProps) => {
-  return (
-    <div className="border rounded border-dark-subtle">
-      <MarkdownEditor {...props} />
-    </div>
-  );
-};

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

@@ -1,158 +0,0 @@
-import { CodeNode } from "@lexical/code";
-import { AutoLinkNode, LinkNode } from "@lexical/link";
-import { ListItemNode, ListNode } from "@lexical/list";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
-import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
-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 { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { type Observable, observable } from "@peers-app/peers-sdk";
-import { COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND } from "lexical";
-import React, { useEffect, useState } from "react";
-import { type IMentionConfig, mentionConfigs } from "../../mention-configs";
-import { LexicalAutoLinkPlugin } from "./autolink-plugin";
-import { customMarkdownTransformers, MarkdownPlugin } from "./markdown-plugin";
-import { MentionNode } from "./mention-node";
-import { MentionsPlugin } from "./mentions-plugin";
-import { MoveLineWithAltArrowsPlugin } from "./move-line-plugin";
-import { SelectToLineBoundaryPlugin } from "./select-line-boundary-plugin";
-import theme from "./theme";
-import { type IToolbarControl, ToolbarPlugin } from "./toolbar";
-
-const editorConfig = {
-  namespace: "PeersEditor",
-  nodes: [
-    HeadingNode,
-    QuoteNode,
-    CodeNode,
-    ListNode,
-    ListItemNode,
-    MentionNode,
-    // Lexical node registry typing is narrower than runtime; AutoLinkNode is required for links.
-    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 | undefined;
-  focus?: () => void;
-}
-
-export interface IMarkdownEditorProps {
-  value: Observable<string>;
-  effects?: IEditorEffects;
-  topRightControls?: IToolbarControl[];
-  autoFocus?: boolean;
-  hideToolbar?: boolean;
-  maxHeight?: string | number;
-  mentionConfigs?: IMentionConfig[];
-}
-
-export function MarkdownEditor(props: IMarkdownEditorProps) {
-  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 (
-    <LexicalComposer initialConfig={{ ...editorConfig }}>
-      <div className="editor-container">
-        {props.hideToolbar ? null : <ToolbarPlugin topRightControls={props.topRightControls} />}
-
-        <div
-          className="editor-inner"
-          ref={editorRef}
-          style={{ maxHeight: props.maxHeight, overflowY: "auto" }}
-        >
-          <RichTextPlugin
-            contentEditable={<ContentEditable className="editor-input p-2" />}
-            placeholder={null}
-            ErrorBoundary={LexicalErrorBoundary}
-          />
-          <HistoryPlugin />
-          {props.autoFocus && <AutoFocusPlugin defaultSelection="rootEnd" />}
-          <ListPlugin />
-
-          {_mentionConfigs.length > 0 && (
-            <MentionsPlugin mentionConfigs={_mentionConfigs} mentionsOpen={mentionsOpen} />
-          )}
-
-          <LexicalAutoLinkPlugin />
-          <MarkdownPlugin markdownObs={props.value} />
-          <MarkdownShortcutPlugin transformers={customMarkdownTransformers} />
-          <CheckListPlugin />
-          <TabIndentationPlugin />
-          <MoveLineWithAltArrowsPlugin mentionsOpen={mentionsOpen} />
-          <SelectToLineBoundaryPlugin />
-          <OnKeyDownPlugin effects={props.effects} mentionsOpen={mentionsOpen} />
-        </div>
-      </div>
-    </LexicalComposer>
-  );
-}
-
-const OnKeyDownPlugin = (props: {
-  effects?: IEditorEffects;
-  mentionsOpen: Observable<boolean>;
-}) => {
-  const [editor] = useLexicalComposerContext();
-  // Intentionally `[editor]` only: `props.effects` is a stable object ref whose `onKeyDown` is
-  // imperatively reassigned by callers each render; the closure reads the latest value at event time.
-  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 unknown as React.KeyboardEvent);
-          return !!result;
-        }
-        return false;
-      },
-      COMMAND_PRIORITY_LOW,
-    );
-    return removeListener;
-  }, [editor]);
-  return null;
-};

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

@@ -1,202 +0,0 @@
-import {
-  $createListItemNode,
-  $createListNode,
-  $isListItemNode,
-  $isListNode,
-  ListItemNode,
-  ListNode,
-  type ListType,
-} from "@lexical/list";
-import {
-  $convertFromMarkdownString,
-  $convertToMarkdownString,
-  type ElementTransformer,
-  type TextMatchTransformer,
-  TRANSFORMERS,
-} from "@lexical/markdown";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import {
-  formatMention,
-  type IMentionData,
-  mentionRegex,
-  type Observable,
-} from "@peers-app/peers-sdk";
-import { useEffect } from "react";
-import { $createMentionNode, $isMentionNode, MentionNode } from "./mention-node";
-
-// Amount of spaces that define indentation level
-const LIST_INDENT_SIZE = 4;
-
-function getIndent(whitespaces: string): number {
-  const tabs = whitespaces.match(/\t/g);
-  const spaces = whitespaces.match(/ /g);
-  let indent = 0;
-  if (tabs) {
-    indent += tabs.length;
-  }
-  if (spaces) {
-    indent += Math.floor(spaces.length / LIST_INDENT_SIZE);
-  }
-  return indent;
-}
-
-const listReplace = (listType: ListType): ElementTransformer["replace"] => {
-  return (parentNode, children, match) => {
-    const previousNode = parentNode.getPreviousSibling();
-    const nextNode = parentNode.getNextSibling();
-    const listItem = $createListItemNode(listType === "check" ? match[3] === "x" : undefined);
-    if ($isListNode(nextNode) && nextNode.getListType() === listType) {
-      const firstChild = nextNode.getFirstChild();
-      if (firstChild !== null) {
-        firstChild.insertBefore(listItem);
-      } else {
-        // should never happen, but let's handle gracefully, just in case.
-        nextNode.append(listItem);
-      }
-      parentNode.remove();
-    } else if ($isListNode(previousNode) && previousNode.getListType() === listType) {
-      previousNode.append(listItem);
-      parentNode.remove();
-    } else {
-      const list = $createListNode(listType, listType === "number" ? Number(match[2]) : undefined);
-      list.append(listItem);
-      parentNode.replace(list);
-    }
-    listItem.append(...children);
-    listItem.select(0, 0);
-    const indent = getIndent(match[1]);
-    if (indent) {
-      listItem.setIndent(indent);
-    }
-  };
-};
-
-const listExport = (
-  listNode: ListNode,
-  exportChildren: (node: ListItemNode) => string,
-  depth: number,
-): string => {
-  const output = [];
-  const children = listNode.getChildren();
-  let index = 0;
-  for (const listItemNode of children) {
-    if ($isListItemNode(listItemNode)) {
-      if (listItemNode.getChildrenSize() === 1) {
-        const firstChild = listItemNode.getFirstChild();
-        if ($isListNode(firstChild)) {
-          output.push(listExport(firstChild, exportChildren, depth + 1));
-          continue;
-        }
-      }
-      const indent = " ".repeat(depth * LIST_INDENT_SIZE);
-      const listType = listNode.getListType();
-      const prefix =
-        listType === "number"
-          ? `${listNode.getStart() + index}. `
-          : listType === "check"
-            ? `- [${listItemNode.getChecked() ? "x" : " "}] `
-            : "- ";
-      output.push(indent + prefix + exportChildren(listItemNode));
-      index++;
-    }
-  }
-
-  return output.join("\n");
-};
-
-const CHECK_LIST_TRANSFORMER: ElementTransformer = {
-  dependencies: [ListNode, ListItemNode],
-  export: (node, exportChildren) => {
-    return $isListNode(node) ? listExport(node, exportChildren, 0) : null;
-  },
-  regExp: /^(\s*)(?:-\s)?\s?(\[(\s|x)?\])\s/i,
-  replace: listReplace("check"),
-  type: "element",
-};
-
-const MENTION_TRANSFORMER: TextMatchTransformer = {
-  type: "text-match",
-  trigger: "<",
-  dependencies: [MentionNode],
-  importRegExp: mentionRegex(),
-  regExp: mentionRegex(),
-  export: (node) => {
-    if ($isMentionNode(node)) {
-      return formatMention(node.data);
-    }
-    return null;
-  },
-  replace: (textNode, match) => {
-    const kind = match[2];
-    const name = match[3].replace(/_/g, " ");
-    const id = match[4];
-    const data: IMentionData = {
-      kind,
-      name,
-      id,
-      clickable: false,
-    };
-    const node = $createMentionNode(data);
-    textNode.replace(node);
-  },
-};
-
-export const customMarkdownTransformers = [
-  MENTION_TRANSFORMER,
-  CHECK_LIST_TRANSFORMER, // This needs to be first or checklists will be treated as unordered lists
-  ...TRANSFORMERS.filter((transformer) => {
-    const t = transformer as { dependencies?: { name?: string }[] };
-    // disable headings for this markdown since these are inline messages
-    if (t.dependencies?.[0]?.name === "HeadingNode") {
-      return false;
-    }
-    return true;
-  }),
-];
-
-interface IProps {
-  markdownObs: Observable<string>;
-}
-
-export function MarkdownPlugin(props: IProps) {
-  const [editor] = useLexicalComposerContext();
-  const { markdownObs } = props;
-
-  useEffect(() => {
-    let markdown = "";
-
-    function setMarkdown() {
-      const newMarkdown = markdownObs() || "";
-      if (newMarkdown === markdown) {
-        return;
-      }
-      markdown = newMarkdown;
-      editor.update(() => {
-        $convertFromMarkdownString(markdown, customMarkdownTransformers, undefined, true, false);
-      });
-    }
-
-    setMarkdown();
-
-    const sub = markdownObs.subscribe(() => {
-      setMarkdown();
-    });
-
-    const sub2Dispose = editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        const newMarkdown = $convertToMarkdownString(customMarkdownTransformers, undefined, true);
-        if (newMarkdown !== markdown) {
-          markdown = newMarkdown;
-          markdownObs(markdown);
-        }
-      });
-    });
-
-    return () => {
-      sub.dispose();
-      sub2Dispose();
-    };
-  }, [editor, markdownObs]);
-
-  return null;
-}