Capability to mention users in a document (#4838)

* feat: mention user

* fix: trigger api call on every letter typed

* fix: this allows command menu to re-render upon props change, shouldComponentUpdate prevented re-rendering when necessary

* fix: add node

* fix: mention node styling

* fix: Caret not visible after inserting mention

* fix: apply mentionRule

* fix: label is to be obtained from content, not attrs

* feat: add mentions table and model

* fix: typo

* fix: make all mention nodes visible in shared doc

* feat: parse mention ids from doc text

* feat: MentionsProcessor

* feat: documents.publish tests

* feat: tests for MentionsProcessor

* feat: schedule notifs for mentions

* fix: get rid of Mention model

* fix: put actor id and mention id in raw md

* Revert "fix: put actor id and mention id in raw md"

This reverts commit 3bb8a22e3c560971dccad6d2f82266256bcb2d96.

* Revert "Revert "fix: put actor id and mention id in raw md""

This reverts commit 3c5b36c40cebf147663908cf27d0dce6488adfad.

* fix: review

* fix: no need of set

* fix: show avatar

* fix: get rid of eventName

* fix: font-weight

* fix: prioritize mention notifs

* fix: store id in md

* fix: no need of prepending m

* fix: fetchPage

* fix: Avatars incorrect color

* fix: remove scanRE

* fix: test

* fix: include alphabet other than latin

* lockfile

* fix: regex should test for letters, marks and digits

---------

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/editor/index.tsx

@@ -41,6 +41,7 @@ import EditorContext from "./components/EditorContext";
 import EmojiMenu from "./components/EmojiMenu";
 import { SearchResult } from "./components/LinkEditor";
 import LinkToolbar from "./components/LinkToolbar";
+import MentionMenu from "./components/MentionMenu";
 import SelectionToolbar from "./components/SelectionToolbar";
 import WithTheme from "./components/WithTheme";
 
@@ -142,6 +143,8 @@ type State = {
   blockMenuSearch: string;
   /** If the emoji insert menu is visible */
   emojiMenuOpen: boolean;
+  /** If the mention user menu is visible */
+  mentionMenuOpen: boolean;
 };
 
 /**
@@ -175,6 +178,7 @@ export class Editor extends React.PureComponent<
     linkMenuOpen: false,
     blockMenuSearch: "",
     emojiMenuOpen: false,
+    mentionMenuOpen: false,
   };
 
   isBlurred: boolean;
@@ -214,6 +218,8 @@ export class Editor extends React.PureComponent<
     this.events.on(EventType.blockMenuClose, this.handleCloseBlockMenu);
     this.events.on(EventType.emojiMenuOpen, this.handleOpenEmojiMenu);
     this.events.on(EventType.emojiMenuClose, this.handleCloseEmojiMenu);
+    this.events.on(EventType.mentionMenuOpen, this.handleOpenMentionMenu);
+    this.events.on(EventType.mentionMenuClose, this.handleCloseMentionMenu);
   }
 
   /**
@@ -673,6 +679,10 @@ export class Editor extends React.PureComponent<
     this.setState({ emojiMenuOpen: true, blockMenuSearch: search });
   };
 
+  private handleOpenMentionMenu = (search: string) => {
+    this.setState({ mentionMenuOpen: true, blockMenuSearch: search });
+  };
+
   private handleCloseEmojiMenu = () => {
     if (!this.state.emojiMenuOpen) {
       return;
@@ -680,6 +690,13 @@ export class Editor extends React.PureComponent<
     this.setState({ emojiMenuOpen: false });
   };
 
+  private handleCloseMentionMenu = () => {
+    if (!this.state.mentionMenuOpen) {
+      return;
+    }
+    this.setState({ mentionMenuOpen: false });
+  };
+
   private handleOpenLinkMenu = () => {
     this.setState({ blockMenuOpen: false, linkMenuOpen: true });
   };
@@ -772,6 +789,16 @@ export class Editor extends React.PureComponent<
                   search={this.state.blockMenuSearch}
                   onClose={this.handleCloseEmojiMenu}
                 />
+                <MentionMenu
+                  view={this.view}
+                  commands={this.commands}
+                  dictionary={dictionary}
+                  rtl={isRTL}
+                  onShowToast={this.props.onShowToast}
+                  isActive={this.state.mentionMenuOpen}
+                  search={this.state.blockMenuSearch}
+                  onClose={this.handleCloseMentionMenu}
+                />
                 <BlockMenu
                   view={this.view}
                   commands={this.commands}