moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MentionPlugin: do a little refactoring

This commit is contained in:
Alex Gleason 2023-09-25 11:41:06 -05:00
parent 72065ffe23
commit 7ff9d2ed3b
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/features/compose/editor/plugins/mention-plugin.tsx
View File

@ -1,7 +1,7 @@
/** /**
* This source code is derived from code from Meta Platforms, Inc. * This source code is derived from code from Meta Platforms, Inc.
* and affiliates, licensed under the MIT license located in the * and affiliates, licensed under the MIT license located in the
* LICENSE file in the /app/soapbox/features/compose/editor directory. * LICENSE file in the /src/features/compose/editor directory.
*/ */
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@ -14,13 +14,6 @@ import type { TextNode } from 'lexical';
const MENTION_REGEX = new RegExp('(^|$|(?:^|\\s))([@])([a-z\\d_-]+(?:@[^@\\s]+)?)', 'i'); const MENTION_REGEX = new RegExp('(^|$|(?:^|\\s))([@])([a-z\\d_-]+(?:@[^@\\s]+)?)', 'i');
const getMentionMatch = (text: string) => {
const matchArr = MENTION_REGEX.exec(text);
if (!matchArr) return null;
return matchArr;
};
const MentionPlugin = (): JSX.Element | null => { const MentionPlugin = (): JSX.Element | null => {
const [editor] = useLexicalComposerContext(); const [editor] = useLexicalComposerContext();
@ -30,28 +23,25 @@ const MentionPlugin = (): JSX.Element | null => {
} }
}, [editor]); }, [editor]);
const createMentionNode = useCallback((textNode: TextNode): MentionNode => { const createNode = useCallback((textNode: TextNode): MentionNode => {
return $createMentionNode(textNode.getTextContent()); return $createMentionNode(textNode.getTextContent());
}, []); }, []);
const getEntityMatch = useCallback((text: string) => { const getMatch = useCallback((text: string) => {
const matchArr = getMentionMatch(text); const match = MENTION_REGEX.exec(text);
if (!match) return null;
if (!matchArr) return null; const length = match[3].length + 1;
const start = match.index + match[1].length;
const end = start + length;
const mentionLength = matchArr[3].length + 1; return { start, end };
const startOffset = matchArr.index + matchArr[1].length;
const endOffset = startOffset + mentionLength;
return {
end: endOffset,
start: startOffset,
};
}, []); }, []);
useLexicalTextEntity<MentionNode>( useLexicalTextEntity<MentionNode>(
getEntityMatch, getMatch,
MentionNode, MentionNode,
createMentionNode, createNode,
); );
return null; return null;