@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/lazy-list.tsx

@@ -1,17 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
-import InfiniteScroll from 'react-infinite-scroll-component';
-import { useObservable } from '../hooks';
 import { observable } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useObservable } from "../hooks";
 
 interface IProps<T> {
-  loadMore: (existingItems: T[]) => Promise<T[]>
-  renderItems: (items: T[]) => React.ReactNode
-  filterItems?:(existingItems: T[]) => T[]
-  endOfList?: React.ReactNode
-  loadingIndicator?: React.ReactNode
-  scrollThreshold?: number | string
-  lazyListStyle?: React.CSSProperties
-  resetTrigger?: any
+  loadMore: (existingItems: T[]) => Promise<T[]>;
+  renderItems: (items: T[]) => React.ReactNode;
+  filterItems?: (existingItems: T[]) => T[];
+  endOfList?: React.ReactNode;
+  loadingIndicator?: React.ReactNode;
+  scrollThreshold?: number | string;
+  lazyListStyle?: React.CSSProperties;
+  resetTrigger?: unknown;
 }
 
 export function LazyList<T>(props: IProps<T>) {
@@ -21,39 +22,57 @@ export function LazyList<T>(props: IProps<T>) {
   const [loading] = useState(() => observable(false));
   useObservable(loading);
   const isLoadingSync = useRef(false); // Synchronous loading flag
+  // Bumped whenever resetTrigger changes so in-flight loadMore calls can discard stale results.
+  const loadGenRef = useRef(0);
 
-  async function loadMore() {
+  const loadMore = useCallback(async () => {
     if (loading() || isLoadingSync.current) {
       return;
     }
     isLoadingSync.current = true;
     loading(true);
-    const moreItems = await props.loadMore(items);
-    if (!moreItems.length) {
-      setAllLoaded(true);
-    } else {
-      itemsObsAry([...itemsObsAry(), ...moreItems]);
+    const gen = loadGenRef.current;
+    try {
+      const moreItems = await props.loadMore(itemsObsAry());
+      if (gen !== loadGenRef.current) {
+        // Reset happened while we were awaiting — discard to avoid mixing old + new results.
+        return;
+      }
+      if (!moreItems.length) {
+        setAllLoaded(true);
+      } else {
+        itemsObsAry([...itemsObsAry(), ...moreItems]);
+      }
+    } finally {
+      if (gen === loadGenRef.current) {
+        loading(false);
+        isLoadingSync.current = false;
+      }
     }
-    loading(false);
-    isLoadingSync.current = false;
-  }
+  }, [props.loadMore, itemsObsAry, loading]);
 
   let renderItems = items;
   if (props.filterItems) {
     renderItems = props.filterItems(items);
   }
 
+  // Must run before the preload effect below: on mount / when `resetTrigger` changes we bump
+  // the generation and clear items first. Otherwise preload starts `loadMore` at gen N, then
+  // this effect runs and increments to N+1, the awaited result is discarded, and nothing
+  // retriggers a fetch (empty list forever — e.g. Groups).
+  useEffect(() => {
+    loadGenRef.current += 1;
+    itemsObsAry([]);
+    setAllLoaded(false);
+    isLoadingSync.current = false;
+    loading(false);
+  }, [itemsObsAry, loading, props.resetTrigger]);
+
   useEffect(() => {
     if (renderItems.length < 50 && !allLoaded && !loading() && !isLoadingSync.current) {
       loadMore();
     }
-  }, [renderItems.length, allLoaded]);
-
-  useEffect(() => {
-    itemsObsAry([]);
-    setAllLoaded(false);
-    isLoadingSync.current = false; // Reset sync loading flag when resetting
-  }, [props.resetTrigger]);
+  }, [renderItems.length, allLoaded, loadMore, loading]);
   // console.log('existing tasks', items.length);
   // console.log('rendering tasks', renderItems.length);
 
@@ -75,24 +94,22 @@ export function LazyList<T>(props: IProps<T>) {
         hasMore={!allLoaded}
         scrollThreshold={props.scrollThreshold}
         loader={
-          props.loadingIndicator ??
-          <>
+          props.loadingIndicator ?? (
             <div className="d-flex justify-content-center">
               <div>loading...</div>
             </div>
-          </>
+          )
         }
         endMessage={
-          props.endOfList ??
-          <>
+          props.endOfList ?? (
             <div className="d-flex justify-content-center">
               <i>end of list</i>
             </div>
-          </>
+          )
         }
       >
         {props.renderItems(renderItems)}
       </InfiniteScroll>
     </div>
-  )
+  );
 }

package/src/components/list-screen.tsx

@@ -1,13 +1,20 @@
-import { DataFilter, ICursorIterable, observable, SortBy, Table } from "@peers-app/peers-sdk";
-import * as _ from 'lodash';
-import React, { useEffect, useState } from 'react';
-import { isDesktop } from '../globals';
+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';
+import { Input } from "./input";
+import { LazyList } from "./lazy-list";
+import { LoadingIndicator } from "./loading-indicator";
 
-interface IProps<T extends { [key: string]: any; }> {
+interface IProps<T extends Record<string, unknown>> {
   table: Table<T>;
   newRecord: (text: string) => Promise<T>;
   getFilter?: (text: string) => DataFilter<T>;
@@ -16,36 +23,35 @@ interface IProps<T extends { [key: string]: any; }> {
   placeholderName?: string;
 }
 
-export function ListScreen<T extends { [key: string]: any; }>(props: IProps<T>) {
-  const {
-    table,
-    newRecord,
-    sortBy,
-  } = props;
+export function ListScreen<T extends Record<string, unknown>>(props: IProps<T>) {
+  const { table, newRecord, sortBy } = props;
 
-  const [searchTextObs] = useState(() => observable(''));
+  const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
 
   const [cursorObs] = useState(() => observable<ICursorIterable<T> | undefined>());
-  
-  async function newCursor() {
+
+  const newCursor = useCallback(async () => {
     const filter = props.getFilter ? props.getFilter(searchText) : null;
-    const cursor = await table.cursor(filter || {}, { sortBy, ...(filter ? {} : { textSearch: searchText }) });
+    const cursor = await table.cursor(filter || {}, {
+      sortBy,
+      ...(filter ? {} : { textSearch: searchText }),
+    });
     cursorObs(cursor);
     return cursor;
-  }
+  }, [table, searchText, props.getFilter, sortBy, cursorObs]);
 
   useEffect(() => {
-    newCursor();
-  }, [searchText]);
+    void newCursor();
+  }, [newCursor]);
 
   const idFieldName = table.metaData.primaryKeyName;
 
   async function loadMore(existing: T[]): Promise<T[]> {
     let moreMatches: T[] = [];
-    let cursor = cursorObs() || await newCursor();
+    const cursor = cursorObs() || (await newCursor());
     for await (const nextRecord of cursor) {
-      if (existing.find(e => e[idFieldName] === nextRecord[idFieldName])) continue;
+      if (existing.find((e) => e[idFieldName] === nextRecord[idFieldName])) continue;
       moreMatches.push(nextRecord);
       if (searchText.length && moreMatches.length > 5) break;
       if (moreMatches.length >= 10) break;
@@ -54,29 +60,39 @@ export function ListScreen<T extends { [key: string]: any; }>(props: IProps<T>)
       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 => words.filter(w => r.name.toLowerCase().includes(w)).length).reverse();
+    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;
     const name = searchText.trim();
     if (!name) return;
-    searchTextObs('');
+    searchTextObs("");
     await newRecord(name);
   }
 
   return (
-    <div className='container-fluid'>
-
+    <div className="container-fluid">
       <div className="input-group mt-3 mb-3">
-        <Input value={searchTextObs} className="form-control" placeholder={`Search or create ${props.placeholderName || table.metaData.name}`}
-          autoFocus={isDesktop() ? true : false}
-          onKeyUp={evt => searchSubmit(evt)}
+        <Input
+          value={searchTextObs}
+          className="form-control"
+          placeholder={`Search or create ${props.placeholderName || table.metaData.name}`}
+          autoFocus={!!isDesktop()}
+          onKeyUp={(evt) => searchSubmit(evt)}
         />
       </div>
 
@@ -84,7 +100,7 @@ export function ListScreen<T extends { [key: string]: any; }>(props: IProps<T>)
         <LazyList
           resetTrigger={searchText}
           loadMore={loadMore}
-          scrollThreshold={0.6}          
+          scrollThreshold={0.6}
           renderItems={(notes) => {
             return notes.map(props.renderItem);
           }}
@@ -102,4 +118,4 @@ export function ListScreen<T extends { [key: string]: any; }>(props: IProps<T>)
       </div>
     </div>
   );
-};
+}

package/src/components/loading-indicator.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 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,9 +1,4 @@
-import React from 'react';
-import {
-  AutoLinkPlugin,
-  createLinkMatcherWithRegExp,
-} from '@lexical/react/LexicalAutoLinkPlugin';
-
+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()@:%_+.~#?&//=]*)(?<![-.+():%])/;
@@ -13,7 +8,7 @@ const EMAIL_REGEX =
 
 const MATCHERS = [
   createLinkMatcherWithRegExp(URL_REGEX, (text) => {
-    return text.startsWith('http') ? text : `https://${text}`;
+    return text.startsWith("http") ? text : `https://${text}`;
   }),
   createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
     return `mailto:${text}`;
@@ -24,13 +19,11 @@ export function LexicalAutoLinkPlugin(): JSX.Element {
   return <AutoLinkPlugin matchers={MATCHERS} />;
 }
 
-
-
-import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+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 url.startsWith("http://") || url.startsWith("https://") || url.startsWith("mailto:");
   };
   return <LexicalLinkPlugin validateUrl={validateUrl} />;
 }

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

@@ -1,10 +1,9 @@
-import React from "react";
-import { IMarkdownEditorProps, MarkdownEditor } from "./editor";
+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,32 +1,31 @@
-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 { 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 { observable, Observable } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
-import { LexicalAutoLinkPlugin } from './autolink-plugin';
-import { customMarkdownTransformers, MarkdownPlugin } from './markdown-plugin';
-import { MentionNode } from './mention-node';
-import { MentionsPlugin } from './mentions-plugin';
-import theme from './theme';
-import { IToolbarControl, ToolbarPlugin } from './toolbar';
-import { COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND } from 'lexical';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { IMentionConfig, mentionConfigs } from '../../mention-configs';
-
+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 theme from "./theme";
+import { type IToolbarControl, ToolbarPlugin } from "./toolbar";
 
 const editorConfig = {
-  namespace: 'PeersEditor',
+  namespace: "PeersEditor",
   nodes: [
     HeadingNode,
     QuoteNode,
@@ -34,6 +33,7 @@ const editorConfig = {
     ListNode,
     ListItemNode,
     MentionNode,
+    // biome-ignore lint/suspicious/noExplicitAny: Lexical node registry typing is narrower than runtime; AutoLinkNode is required for links.
     AutoLinkNode as any,
     LinkNode,
   ],
@@ -46,7 +46,7 @@ const editorConfig = {
 };
 
 export interface IEditorEffects {
-  onKeyDown?: (e: React.KeyboardEvent) => (boolean | void);
+  onKeyDown?: (e: React.KeyboardEvent) => boolean | undefined;
   focus?: () => void;
 }
 
@@ -86,7 +86,7 @@ export function MarkdownEditor(props: IMarkdownEditorProps) {
           }
         }, 10);
       }
-    }
+    };
   }
 
   const _mentionConfigs = props.mentionConfigs ?? mentionConfigs;
@@ -99,26 +99,19 @@ export function MarkdownEditor(props: IMarkdownEditorProps) {
         <div
           className="editor-inner"
           ref={editorRef}
-          style={{ maxHeight: props.maxHeight, overflowY: 'auto' }}
+          style={{ maxHeight: props.maxHeight, overflowY: "auto" }}
         >
           <RichTextPlugin
-            contentEditable={
-              <ContentEditable
-                className="editor-input p-2"
-              />
-            }
+            contentEditable={<ContentEditable className="editor-input p-2" />}
             placeholder={null}
             ErrorBoundary={LexicalErrorBoundary}
           />
           <HistoryPlugin />
-          {props.autoFocus && <AutoFocusPlugin defaultSelection='rootEnd' />}
+          {props.autoFocus && <AutoFocusPlugin defaultSelection="rootEnd" />}
           <ListPlugin />
 
           {_mentionConfigs.length > 0 && (
-            <MentionsPlugin
-              mentionConfigs={_mentionConfigs}
-              mentionsOpen={mentionsOpen}
-            />
+            <MentionsPlugin mentionConfigs={_mentionConfigs} mentionsOpen={mentionsOpen} />
           )}
 
           <LexicalAutoLinkPlugin />
@@ -133,20 +126,29 @@ export function MarkdownEditor(props: IMarkdownEditorProps) {
   );
 }
 
-const OnKeyDownPlugin = (props: { effects?: IEditorEffects, mentionsOpen: Observable<boolean> }) => {
+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()) {
+    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;
-      }
-      if (props.effects?.onKeyDown) {
-        const result = props.effects.onKeyDown(event as any);
-        return !!result;
-      }
-      return false;
-    }, COMMAND_PRIORITY_LOW);
+      },
+      COMMAND_PRIORITY_LOW,
+    );
     return removeListener;
   }, [editor]);
   return null;
-}
+};

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

@@ -1,9 +1,28 @@
-import { $createListItemNode, $createListNode, $isListItemNode, $isListNode, ListItemNode, ListNode, ListType } from '@lexical/list';
-import { $convertFromMarkdownString, $convertToMarkdownString, ElementTransformer, TextMatchTransformer, TRANSFORMERS } from "@lexical/markdown";
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { formatMention, IMentionData, mentionRegex, Observable } from "@peers-app/peers-sdk";
-import { useEffect } from 'react';
-import { $createMentionNode, $isMentionNode, MentionNode } from './mention-node';
+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;
@@ -21,13 +40,11 @@ function getIndent(whitespaces: string): number {
   return indent;
 }
 
-const listReplace = (listType: ListType): ElementTransformer['replace'] => {
+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,
-    );
+    const listItem = $createListItemNode(listType === "check" ? match[3] === "x" : undefined);
     if ($isListNode(nextNode) && nextNode.getListType() === listType) {
       const firstChild = nextNode.getFirstChild();
       if (firstChild !== null) {
@@ -37,17 +54,11 @@ const listReplace = (listType: ListType): ElementTransformer['replace'] => {
         nextNode.append(listItem);
       }
       parentNode.remove();
-    } else if (
-      $isListNode(previousNode) &&
-      previousNode.getListType() === listType
-    ) {
+    } else if ($isListNode(previousNode) && previousNode.getListType() === listType) {
       previousNode.append(listItem);
       parentNode.remove();
     } else {
-      const list = $createListNode(
-        listType,
-        listType === 'number' ? Number(match[2]) : undefined,
-      );
+      const list = $createListNode(listType, listType === "number" ? Number(match[2]) : undefined);
       list.append(listItem);
       parentNode.replace(list);
     }
@@ -77,20 +88,20 @@ const listExport = (
           continue;
         }
       }
-      const indent = ' '.repeat(depth * LIST_INDENT_SIZE);
+      const indent = " ".repeat(depth * LIST_INDENT_SIZE);
       const listType = listNode.getListType();
       const prefix =
-        listType === 'number'
+        listType === "number"
           ? `${listNode.getStart() + index}. `
-          : listType === 'check'
-            ? `- [${listItemNode.getChecked() ? 'x' : ' '}] `
-            : '- ';
+          : listType === "check"
+            ? `- [${listItemNode.getChecked() ? "x" : " "}] `
+            : "- ";
       output.push(indent + prefix + exportChildren(listItemNode));
       index++;
     }
   }
 
-  return output.join('\n');
+  return output.join("\n");
 };
 
 const CHECK_LIST_TRANSFORMER: ElementTransformer = {
@@ -99,13 +110,13 @@ const CHECK_LIST_TRANSFORMER: ElementTransformer = {
     return $isListNode(node) ? listExport(node, exportChildren, 0) : null;
   },
   regExp: /^(\s*)(?:-\s)?\s?(\[(\s|x)?\])\s/i,
-  replace: listReplace('check'),
-  type: 'element',
+  replace: listReplace("check"),
+  type: "element",
 };
 
 const MENTION_TRANSFORMER: TextMatchTransformer = {
-  type: 'text-match',
-  trigger: '<',
+  type: "text-match",
+  trigger: "<",
   dependencies: [MentionNode],
   importRegExp: mentionRegex(),
   regExp: mentionRegex(),
@@ -117,10 +128,10 @@ const MENTION_TRANSFORMER: TextMatchTransformer = {
   },
   replace: (textNode, match) => {
     const kind = match[2];
-    const name = match[3].replace(/_/g, ' ');
+    const name = match[3].replace(/_/g, " ");
     const id = match[4];
     const data: IMentionData = {
-      kind: kind as any,
+      kind,
       name,
       id,
       clickable: false,
@@ -133,10 +144,10 @@ const MENTION_TRANSFORMER: TextMatchTransformer = {
 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 any;
+  ...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') {
+    if (t.dependencies?.[0]?.name === "HeadingNode") {
       return false;
     }
     return true;
@@ -152,11 +163,10 @@ export function MarkdownPlugin(props: IProps) {
   const { markdownObs } = props;
 
   useEffect(() => {
-
-    let markdown = '';
+    let markdown = "";
 
     function setMarkdown() {
-      const newMarkdown = markdownObs() || '';
+      const newMarkdown = markdownObs() || "";
       if (newMarkdown === markdown) {
         return;
       }
@@ -185,10 +195,8 @@ export function MarkdownPlugin(props: IProps) {
     return () => {
       sub.dispose();
       sub2Dispose();
-    }
-  }, [editor]);
+    };
+  }, [editor, markdownObs]);
 
   return null;
 }
-
-