From 5104cb4fedd04a111e41bdeb1e105c47b35971f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 8 Mar 2023 22:34:57 +0100
Subject: [PATCH] Lexical: add hashtag plugin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/compose/editor/index.tsx | 5 +++++
 app/soapbox/features/compose/editor/nodes.ts  | 6 ++++--
 package.json                                  | 1 +
 yarn.lock                                     | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/compose/editor/index.tsx b/app/soapbox/features/compose/editor/index.tsx
index f2242eaf2b..d14db6e539 100644
--- a/app/soapbox/features/compose/editor/index.tsx
+++ b/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} />
diff --git a/app/soapbox/features/compose/editor/nodes.ts b/app/soapbox/features/compose/editor/nodes.ts
index 50aae08be2..7c16273838 100644
--- a/app/soapbox/features/compose/editor/nodes.ts
+++ b/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;
diff --git a/package.json b/package.json
index 68afa1128d..2bad2228d2 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index ee3c2a45a0..560f04dfa7 100644
--- a/yarn.lock
+++ b/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==