From 34da4b2fa55cc29c25e706bb9f6ad84d62c823be Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Thu, 21 Apr 2022 15:06:00 +0500
Subject: [PATCH] fix: clear decorations on search close

---
 .../extensions/searchreplace/searchreplace.js | 13 ++++++++----
 .../toolbar/floatingmenus/searchreplace.js    | 21 +++++++++++++------
 .../search-replace/search-replace.ts          | 12 +++++++----
 .../toolbar/floating-menus/search-replace.tsx | 20 +++++++++++++-----
 4 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/packages/editor/dist/extensions/searchreplace/searchreplace.js b/packages/editor/dist/extensions/searchreplace/searchreplace.js
index 3c32d918b..cfc68fe46 100644
--- a/packages/editor/dist/extensions/searchreplace/searchreplace.js
+++ b/packages/editor/dist/extensions/searchreplace/searchreplace.js
@@ -140,10 +140,15 @@ export var SearchReplace = Extension.create({
                     return true;
                 };
             },
-            endSearch: function () { return function () {
-                _this.storage.isSearching = false;
-                return true;
-            }; },
+            endSearch: function () {
+                return function (_a) {
+                    var state = _a.state, dispatch = _a.dispatch;
+                    _this.storage.isSearching = false;
+                    _this.storage.searchTerm = "";
+                    updateView(state, dispatch);
+                    return true;
+                };
+            },
             search: function (term, options) {
                 return function (_a) {
                     var state = _a.state, dispatch = _a.dispatch;
diff --git a/packages/editor/dist/toolbar/floatingmenus/searchreplace.js b/packages/editor/dist/toolbar/floatingmenus/searchreplace.js
index b35388d24..0f6f03e65 100644
--- a/packages/editor/dist/toolbar/floatingmenus/searchreplace.js
+++ b/packages/editor/dist/toolbar/floatingmenus/searchreplace.js
@@ -40,7 +40,7 @@ export function SearchReplaceFloatingMenu(props) {
     var _c = __read(useState(false), 2), matchWholeWord = _c[0], setMatchWholeWord = _c[1];
     var _d = __read(useState(false), 2), enableRegex = _d[0], setEnableRegex = _d[1];
     var replaceText = useRef("");
-    var searchText = useRef("");
+    var searchInputRef = useRef();
     var search = useCallback(function (term) {
         editor.commands.search(term, {
             matchCase: matchCase,
@@ -49,11 +49,21 @@ export function SearchReplaceFloatingMenu(props) {
         });
     }, [matchCase, enableRegex, matchWholeWord]);
     useEffect(function () {
-        search(searchText.current);
+        if (!searchInputRef.current)
+            return;
+        search(searchInputRef.current.value);
     }, [search, matchCase, matchWholeWord, enableRegex]);
     useEffect(function () {
-        if (isSearching && selectedText)
+        if (isSearching && selectedText) {
+            if (searchInputRef.current) {
+                var input_1 = searchInputRef.current;
+                setTimeout(function () {
+                    input_1.value = selectedText;
+                    input_1.focus();
+                }, 0);
+            }
             search(selectedText);
+        }
     }, [isSearching, selectedText, search]);
     if (!isSearching)
         return null;
@@ -70,9 +80,8 @@ export function SearchReplaceFloatingMenu(props) {
                                     mr: 1,
                                     width: 200,
                                     alignItems: "center",
-                                } }, { children: [_jsx(Input, { defaultValue: selectedText, autoFocus: true, sx: { p: 1 }, placeholder: "Find", onChange: function (e) {
-                                            searchText.current = e.target.value;
-                                            search(searchText.current);
+                                } }, { children: [_jsx(Input, { defaultValue: selectedText, ref: searchInputRef, autoFocus: true, sx: { p: 1 }, placeholder: "Find", onChange: function (e) {
+                                            search(e.target.value);
                                         } }), _jsxs(Flex, __assign({ sx: {
                                             position: "absolute",
                                             right: 0,
diff --git a/packages/editor/src/extensions/search-replace/search-replace.ts b/packages/editor/src/extensions/search-replace/search-replace.ts
index 5fbe1cf19..0fa55e07f 100644
--- a/packages/editor/src/extensions/search-replace/search-replace.ts
+++ b/packages/editor/src/extensions/search-replace/search-replace.ts
@@ -174,10 +174,14 @@ export const SearchReplace = Extension.create<SearchOptions, SearchStorage>({
           }
           return true;
         },
-      endSearch: () => () => {
-        this.storage.isSearching = false;
-        return true;
-      },
+      endSearch:
+        () =>
+        ({ state, dispatch }) => {
+          this.storage.isSearching = false;
+          this.storage.searchTerm = "";
+          updateView(state, dispatch);
+          return true;
+        },
       search:
         (term, options?: SearchSettings) =>
         ({ state, dispatch }) => {
diff --git a/packages/editor/src/toolbar/floating-menus/search-replace.tsx b/packages/editor/src/toolbar/floating-menus/search-replace.tsx
index e9123b27f..fdf0b2a77 100644
--- a/packages/editor/src/toolbar/floating-menus/search-replace.tsx
+++ b/packages/editor/src/toolbar/floating-menus/search-replace.tsx
@@ -16,7 +16,7 @@ export function SearchReplaceFloatingMenu(props: FloatingMenuProps) {
   const [matchWholeWord, setMatchWholeWord] = useState(false);
   const [enableRegex, setEnableRegex] = useState(false);
   const replaceText = useRef("");
-  const searchText = useRef("");
+  const searchInputRef = useRef<HTMLInputElement>();
 
   const search = useCallback(
     (term: string) => {
@@ -30,11 +30,21 @@ export function SearchReplaceFloatingMenu(props: FloatingMenuProps) {
   );
 
   useEffect(() => {
-    search(searchText.current);
+    if (!searchInputRef.current) return;
+    search(searchInputRef.current.value);
   }, [search, matchCase, matchWholeWord, enableRegex]);
 
   useEffect(() => {
-    if (isSearching && selectedText) search(selectedText);
+    if (isSearching && selectedText) {
+      if (searchInputRef.current) {
+        const input = searchInputRef.current;
+        setTimeout(() => {
+          input.value = selectedText;
+          input.focus();
+        }, 0);
+      }
+      search(selectedText);
+    }
   }, [isSearching, selectedText, search]);
 
   if (!isSearching) return null;
@@ -67,12 +77,12 @@ export function SearchReplaceFloatingMenu(props: FloatingMenuProps) {
             >
               <Input
                 defaultValue={selectedText}
+                ref={searchInputRef}
                 autoFocus
                 sx={{ p: 1 }}
                 placeholder="Find"
                 onChange={(e) => {
-                  searchText.current = e.target.value;
-                  search(searchText.current);
+                  search(e.target.value);
                 }}
               />
               <Flex