Lexical: add hashtag plugin

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/editor/index.tsx

@@ -11,6 +11,7 @@ import { LexicalComposer, InitialConfigType } from '@lexical/react/LexicalCompos
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
@@ -26,6 +27,7 @@ import { useAppDispatch, useFeatures } from 'soapbox/hooks';
 import nodes from './nodes';
 import FloatingLinkEditorPlugin from './plugins/floating-link-editor-plugin';
 import FloatingTextFormatToolbarPlugin from './plugins/floating-text-format-toolbar-plugin';
+import NewMentionsPlugin from './plugins/mention-plugin';
 
 const StatePlugin = ({ composeId, autoFocus }: { composeId: string, autoFocus: boolean }) => {
   const dispatch = useAppDispatch();
@@ -52,6 +54,7 @@ const ComposeEditor = React.forwardRef<string, any>(({ composeId, condensed, onF
       onError: console.error,
       nodes,
       theme: {
+        hashtag: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
         text: {
           bold: 'font-bold',
           code: 'font-mono',
@@ -126,11 +129,13 @@ const ComposeEditor = React.forwardRef<string, any>(({ composeId, condensed, onF
         }}
         />
         <HistoryPlugin />
+        <HashtagPlugin />
         {features.richText && <LinkPlugin />}
         {features.richText && floatingAnchorElem && (
           <>
             <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
             <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} />
+            <NewMentionsPlugin />
           </>
         )}
         <StatePlugin composeId={composeId} autoFocus={autoFocus} />

app/soapbox/features/compose/editor/nodes.ts

@@ -8,13 +8,14 @@ LICENSE file in the /app/soapbox/features/compose/editor directory.
 */
 
 import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { HashtagNode } from '@lexical/hashtag';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 
 import type { Klass, LexicalNode } from 'lexical';
 
-const PlaygroundNodes: Array<Klass<LexicalNode>> = [
+const ComposeNodes: Array<Klass<LexicalNode>> = [
   HeadingNode,
   QuoteNode,
   CodeNode,
@@ -22,6 +23,7 @@ const PlaygroundNodes: Array<Klass<LexicalNode>> = [
   AutoLinkNode,
   LinkNode,
   HorizontalRuleNode,
+  HashtagNode,
 ];
 
-export default PlaygroundNodes;
+export default ComposeNodes;

package.json

@@ -55,6 +55,7 @@
     "@jest/globals": "^29.0.0",
     "@lcdp/offline-plugin": "^5.1.0",
     "@lexical/code": "^0.8.1",
+    "@lexical/hashtag": "^0.8.1",
     "@lexical/link": "^0.8.1",
     "@lexical/markdown": "^0.8.1",
     "@lexical/react": "^0.8.1",

yarn.lock

@@ -2400,7 +2400,7 @@
   resolved "https://registry.yarnpkg.com/@lexical/dragon/-/dragon-0.8.1.tgz#b6c872fd618ad4593cf52dd9403e0c536b5ef7d1"
   integrity sha512-AnGolX/J8I+2Wc08fIz2mM52GgvxYLSBfvIMbN2ztc+UPgPB16cVzBVaJOEZm1+D7YeOG2pVRk+rfrsOdL7i4Q==
 
-"@lexical/hashtag@0.8.1":
+"@lexical/hashtag@0.8.1", "@lexical/hashtag@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@lexical/hashtag/-/hashtag-0.8.1.tgz#c1ae42dd98cebbf1cb61373faaa79443ef2bd595"
   integrity sha512-H7Owb8BxcqexJpihsccvw3sc6PKI+IzosIYUZ5NC+PB/0D6uUSoAyuNugySvTx57iIVzQECDa4kTvqO1lQHXGw==