From 4557fb98b646e2c7902d50e0572139db399f9b95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 17 May 2023 00:40:36 +0200
Subject: [PATCH] Lexical: Hide AutosuggestPlugin when clicking outside
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../editor/plugins/autosuggest-plugin.tsx     | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx b/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx
index 1c77fc8b3b..6bd2b31b5f 100644
--- a/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -7,11 +7,14 @@
  */
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
 import clsx from 'clsx';
 import {
   $getSelection,
   $isRangeSelection,
   $isTextNode,
+  COMMAND_PRIORITY_LOW,
+  KEY_ESCAPE_COMMAND,
   LexicalEditor,
   RangeSelection,
 } from 'lexical';
@@ -358,8 +361,8 @@ const AutosuggestPlugin = ({
   };
 
   const renderSuggestion = (suggestion: AutoSuggestion, i: number) => {
-    let inner;
-    let key;
+    let inner: string | JSX.Element;
+    let key: React.Key;
 
     if (typeof suggestion === 'object') {
       inner = <AutosuggestEmoji emoji={suggestion} />;
@@ -447,6 +450,35 @@ const AutosuggestPlugin = ({
     if (suggestions && suggestions.size > 0) setSuggestionsHidden(false);
   }, [suggestions]);
 
+  useEffect(() => {
+    if (resolution !== null && !suggestionsHidden && !suggestions.isEmpty()) {
+      const handleClick = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+
+        if (!editor._rootElement?.contains(target) && !anchorElementRef.current.contains(target)) {
+          setResolution(null);
+        }
+      };
+      document.addEventListener('click', handleClick);
+
+      return () => document.removeEventListener('click', handleClick);
+    }
+  }, [resolution, suggestionsHidden, suggestions.isEmpty()]);
+
+  useEffect(() => mergeRegister(
+    editor.registerCommand<KeyboardEvent>(
+      KEY_ESCAPE_COMMAND,
+      (payload) => {
+        const event = payload;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        setResolution(null);
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    ),
+  ), [editor]);
+
   return resolution === null || editor === null ? null : (
     <LexicalPopoverMenu
       anchorElementRef={anchorElementRef}