diff --git a/package-lock.json b/package-lock.json
index 2951c49..6d2b70a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@lexical/code": "^0.37.0",
+ "@lexical/hashtag": "^0.37.0",
"@lexical/link": "^0.37.0",
"@lexical/list": "^0.37.0",
"@lexical/markdown": "^0.37.0",
diff --git a/package.json b/package.json
index 61ad39d..71e9466 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
},
"dependencies": {
"@lexical/code": "^0.37.0",
+ "@lexical/hashtag": "^0.37.0",
"@lexical/link": "^0.37.0",
"@lexical/list": "^0.37.0",
"@lexical/markdown": "^0.37.0",
diff --git a/src/editor/RichTextEditor.tsx b/src/editor/RichTextEditor.tsx
index 0169156..9e97114 100644
--- a/src/editor/RichTextEditor.tsx
+++ b/src/editor/RichTextEditor.tsx
@@ -14,12 +14,16 @@ import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
import { LinkNode, AutoLinkNode } from '@lexical/link';
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
+import { HashtagNode } from '@lexical/hashtag';
import { ImageNode } from './nodes/ImageNode';
+import { MentionNode } from './nodes/MentionNode';
import ToolbarPlugin from './plugins/ToolbarPlugin';
import MarkdownPlugin from './plugins/MarkdownShortcutPlugin';
import ImagesPlugin from './plugins/ImagesPlugin';
import DragDropPastePlugin from './plugins/DragDropPastePlugin';
+import HashtagPlugin from './plugins/HashtagPlugin';
+import MentionsPlugin from './plugins/MentionsPlugin';
import editorTheme from './themes/EditorTheme';
import './styles/editor.css';
@@ -78,6 +82,8 @@ const editorConfig = {
LinkNode,
AutoLinkNode,
ImageNode,
+ HashtagNode,
+ MentionNode,
],
};
@@ -104,6 +110,8 @@ export default function RichTextEditor() {
+
+
diff --git a/src/editor/nodes/MentionNode.ts b/src/editor/nodes/MentionNode.ts
new file mode 100644
index 0000000..575ce0b
--- /dev/null
+++ b/src/editor/nodes/MentionNode.ts
@@ -0,0 +1,130 @@
+import {
+ $applyNodeReplacement,
+ type DOMConversionMap,
+ type DOMConversionOutput,
+ type DOMExportOutput,
+ type EditorConfig,
+ type LexicalNode,
+ type NodeKey,
+ type SerializedTextNode,
+ type Spread,
+ TextNode,
+} from 'lexical';
+
+export type SerializedMentionNode = Spread<
+ {
+ mentionName: string;
+ },
+ SerializedTextNode
+>;
+
+function $convertMentionElement(
+ domNode: HTMLElement,
+): DOMConversionOutput | null {
+ const textContent = domNode.textContent;
+ const mentionName = domNode.getAttribute('data-lexical-mention-name');
+
+ if (textContent !== null) {
+ const node = $createMentionNode(
+ typeof mentionName === 'string' ? mentionName : textContent,
+ textContent,
+ );
+ return {
+ node,
+ };
+ }
+
+ return null;
+}
+
+const mentionStyle = 'background-color: rgba(24, 119, 232, 0.2)';
+
+export class MentionNode extends TextNode {
+ __mention: string;
+
+ static getType(): string {
+ return 'mention';
+ }
+
+ static clone(node: MentionNode): MentionNode {
+ return new MentionNode(node.__mention, node.__text, node.__key);
+ }
+
+ static importJSON(serializedNode: SerializedMentionNode): MentionNode {
+ return $createMentionNode(serializedNode.mentionName).updateFromJSON(
+ serializedNode,
+ );
+ }
+
+ constructor(mentionName: string, text?: string, key?: NodeKey) {
+ super(text ?? mentionName, key);
+ this.__mention = mentionName;
+ }
+
+ exportJSON(): SerializedMentionNode {
+ return {
+ ...super.exportJSON(),
+ mentionName: this.__mention,
+ };
+ }
+
+ createDOM(config: EditorConfig): HTMLElement {
+ const dom = super.createDOM(config);
+ dom.style.cssText = mentionStyle;
+ dom.className = 'mention';
+ dom.spellcheck = false;
+
+ return dom;
+ }
+
+ exportDOM(): DOMExportOutput {
+ const element = document.createElement('span');
+ element.setAttribute('data-lexical-mention', 'true');
+ if (this.__text !== this.__mention) {
+ element.setAttribute('data-lexical-mention-name', this.__mention);
+ }
+ element.textContent = this.__text;
+ return {element};
+ }
+
+ static importDOM(): DOMConversionMap | null {
+ return {
+ span: (domNode: HTMLElement) => {
+ if (!domNode.hasAttribute('data-lexical-mention')) {
+ return null;
+ }
+ return {
+ conversion: $convertMentionElement,
+ priority: 1,
+ };
+ },
+ };
+ }
+
+ isTextEntity(): true {
+ return true;
+ }
+
+ canInsertTextBefore(): boolean {
+ return false;
+ }
+
+ canInsertTextAfter(): boolean {
+ return false;
+ }
+}
+
+export function $createMentionNode(
+ mentionName: string,
+ textContent?: string,
+): MentionNode {
+ const mentionNode = new MentionNode(mentionName, textContent ?? mentionName);
+ mentionNode.setMode('segmented').toggleDirectionless();
+ return $applyNodeReplacement(mentionNode);
+}
+
+export function $isMentionNode(
+ node: LexicalNode | null | undefined,
+): node is MentionNode {
+ return node instanceof MentionNode;
+}
diff --git a/src/editor/plugins/HashtagPlugin.tsx b/src/editor/plugins/HashtagPlugin.tsx
new file mode 100644
index 0000000..6d5ba75
--- /dev/null
+++ b/src/editor/plugins/HashtagPlugin.tsx
@@ -0,0 +1,18 @@
+import type {JSX} from 'react';
+
+import {HashtagNode, registerLexicalHashtag} from '@lexical/hashtag';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useEffect} from 'react';
+
+export default function HashtagPlugin(): JSX.Element | null {
+ const [editor] = useLexicalComposerContext();
+
+ useEffect(() => {
+ if (!editor.hasNodes([HashtagNode])) {
+ throw new Error('HashtagPlugin: HashtagNode not registered on editor');
+ }
+ return registerLexicalHashtag(editor);
+ }, [editor]);
+
+ return null;
+}
diff --git a/src/editor/plugins/MentionsPlugin.tsx b/src/editor/plugins/MentionsPlugin.tsx
new file mode 100644
index 0000000..8ffdc5c
--- /dev/null
+++ b/src/editor/plugins/MentionsPlugin.tsx
@@ -0,0 +1,288 @@
+import type {JSX} from 'react';
+import type {MenuTextMatch} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+ LexicalTypeaheadMenuPlugin,
+ MenuOption,
+ useBasicTypeaheadTriggerMatch,
+} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import {TextNode} from 'lexical';
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import * as ReactDOM from 'react-dom';
+
+import {$createMentionNode} from '../nodes/MentionNode';
+
+const PUNCTUATION =
+ '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+
+const TRIGGERS = ['@'].join('');
+
+// Chars we expect to see in a mention (non-space, non-punctuation).
+const VALID_CHARS = '[^' + TRIGGERS + PUNCTUATION + '\\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"
+ '[' +
+ PUNCTUATION +
+ ']|' + // 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 = 5;
+
+const mentionsCache = new Map();
+
+const dummyMentionsData = [
+ 'Alice Johnson',
+ 'Bob Smith',
+ 'Charlie Brown',
+ 'David Wilson',
+ 'Emma Davis',
+ 'Frank Miller',
+ 'Grace Lee',
+ 'Henry Taylor',
+ 'Isabella Martinez',
+ 'Jack Anderson',
+];
+
+const dummyLookupService = {
+ search(string: string, callback: (results: Array) => void): void {
+ setTimeout(() => {
+ const results = dummyMentionsData.filter((mention) =>
+ mention.toLowerCase().includes(string.toLowerCase()),
+ );
+ callback(results);
+ }, 100);
+ },
+};
+
+function useMentionLookupService(mentionString: string | null) {
+ const [results, setResults] = useState>([]);
+
+ useEffect(() => {
+ const cachedResults = mentionsCache.get(mentionString);
+
+ if (mentionString == null) {
+ setResults([]);
+ return;
+ }
+
+ if (cachedResults === null) {
+ return;
+ } else if (cachedResults !== undefined) {
+ setResults(cachedResults);
+ return;
+ }
+
+ mentionsCache.set(mentionString, null);
+ dummyLookupService.search(mentionString, (newResults) => {
+ mentionsCache.set(mentionString, newResults);
+ setResults(newResults);
+ });
+ }, [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,
+ replaceableString: match[2],
+ };
+ }
+ }
+ return null;
+}
+
+function getPossibleQueryMatch(text: string): MenuTextMatch | null {
+ return checkForAtSignMentions(text, 1);
+}
+
+class MentionTypeaheadOption extends MenuOption {
+ name: string;
+ picture: JSX.Element;
+
+ constructor(name: string, picture: JSX.Element) {
+ super(name);
+ this.name = name;
+ this.picture = picture;
+ }
+}
+
+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 (
+
+ {option.picture}
+ {option.name}
+
+ );
+}
+
+export default function MentionsPlugin(): JSX.Element | null {
+ const [editor] = useLexicalComposerContext();
+
+ const [queryString, setQueryString] = useState(null);
+
+ const results = useMentionLookupService(queryString);
+
+ const checkForSlashTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
+ minLength: 0,
+ });
+
+ const options = useMemo(
+ () =>
+ results
+ .map(
+ (result) =>
+ new MentionTypeaheadOption(result, ),
+ )
+ .slice(0, SUGGESTION_LIST_LENGTH_LIMIT),
+ [results],
+ );
+
+ const onSelectOption = useCallback(
+ (
+ selectedOption: MentionTypeaheadOption,
+ nodeToReplace: TextNode | null,
+ closeMenu: () => void,
+ ) => {
+ editor.update(() => {
+ const mentionNode = $createMentionNode(selectedOption.name);
+ if (nodeToReplace) {
+ nodeToReplace.replace(mentionNode);
+ }
+ mentionNode.select();
+ closeMenu();
+ });
+ },
+ [editor],
+ );
+
+ const checkForMentionMatch = useCallback(
+ (text: string) => {
+ const slashMatch = checkForSlashTriggerMatch(text, editor);
+ if (slashMatch !== null) {
+ return null;
+ }
+ return getPossibleQueryMatch(text);
+ },
+ [checkForSlashTriggerMatch, editor],
+ );
+
+ return (
+
+ onQueryChange={setQueryString}
+ onSelectOption={onSelectOption}
+ triggerFn={checkForMentionMatch}
+ options={options}
+ menuRenderFn={(
+ anchorElementRef,
+ {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
+ ) =>
+ anchorElementRef.current && results.length
+ ? ReactDOM.createPortal(
+
+
+ {options.map((option, i: number) => (
+ {
+ setHighlightedIndex(i);
+ selectOptionAndCleanUp(option);
+ }}
+ onMouseEnter={() => {
+ setHighlightedIndex(i);
+ }}
+ key={option.key}
+ option={option}
+ />
+ ))}
+
+