web: remove custom search state logic & use editor commands

apps/web/src/components/editor/action-bar.tsx

@@ -41,7 +41,7 @@ import {
 } from "../../stores/editor-store";
 import { Menu } from "../../hooks/use-menu";
 import { useStore as useAppStore } from "../../stores/app-store";
-import { useEditorManager, useSearch } from "./manager";
+import { useEditorManager } from "./manager";
 
 export function EditorActionBar() {
   // const editorMargins = useEditorStore((store) => store.editorMargins);
@@ -50,7 +50,9 @@ export function EditorActionBar() {
   const activeSession = useEditorStore((store) =>
     store.activeSessionId ? store.getSession(store.activeSessionId) : undefined
   );
-  const { toggleSearch } = useSearch();
+  const editor = useEditorManager((store) =>
+    activeSession?.id ? store.editors[activeSession?.id]?.editor : undefined
+  );
 
   const tools = [
     // {
@@ -104,7 +106,7 @@ export function EditorActionBar() {
         activeSession.type !== "new" &&
         activeSession.type !== "locked" &&
         activeSession.type !== "readonly",
-      onClick: toggleSearch
+      onClick: editor?.startSearch
     },
     {
       title: "Properties",

apps/web/src/components/editor/manager.ts

@@ -40,7 +40,6 @@ class EditorManager extends BaseStore<EditorManager> {
     fontFamily: "sans-serif",
     fontSize: 16
   });
-  searching?: boolean;
   editors: Record<string, EditorContext> = {};
 
   getEditor = (id: string): EditorContext | undefined => {
@@ -86,40 +85,10 @@ const [useEditorManager] = createStore<EditorManager>(
 
 export { useEditorManager };
 
-// export function useEditorInstance(id: string) {
-//   const editor = useEditorContext((store) => store.subState.editors[id]);
-//   const editorRef = useRef(editor);
-//   useEffect(() => {
-//     editorRef.current = editor;
-//   }, [editor]);
-//   return editorRef;
-// }
-// export const editorInstance = (id: string) =>
-//   useEditorManager.getState().editors[id];
-
-// export function useConfigureEditor() {
-//   return useEditorContext((store) => store.configure);
-// }
-
-// export const configureEditor = (
-//   partial:
-//     | Partial<EditorSubState>
-//     | ((oldState: EditorSubState) => Partial<EditorSubState>)
-// ) => useEditorContext.getState().configure(partial);
-
 export function useEditor(id: string) {
   return useEditorManager((store) => store.editors[id]);
 }
 
-export function useSearch() {
-  const isSearching = useEditorManager((store) => store.searching);
-  const toggleSearch = useCallback(
-    () => useEditorManager.setState({ searching: !isSearching }),
-    [isSearching]
-  );
-  return { isSearching, toggleSearch };
-}
-
 export function useToolbarConfig() {
   const toolbarConfig = useEditorManager((store) => store.toolbarConfig);
   const setToolbarConfig = useCallback(

apps/web/src/components/editor/tiptap.tsx

@@ -38,8 +38,7 @@ import {
   Attachment,
   getTableOfContents
 } from "@notesnook/editor";
-import { Box, Flex } from "@theme-ui/components";
-import { useState } from "react";
+import { Flex } from "@theme-ui/components";
 import {
   PropsWithChildren,
   useEffect,
@@ -48,19 +47,13 @@ import {
   useRef
 } from "react";
 import { IEditor } from "./types";
-import {
-  useSearch,
-  useEditorConfig,
-  useToolbarConfig,
-  useEditorManager
-} from "./manager";
+import { useEditorConfig, useToolbarConfig, useEditorManager } from "./manager";
 import { useIsUserPremium } from "../../hooks/use-is-user-premium";
 import { showBuyDialog } from "../../common/dialog-controller";
 import { useStore as useSettingsStore } from "../../stores/setting-store";
 import { debounce } from "@notesnook/common";
 import { ScopedThemeProvider } from "../theme-provider";
 import { useStore as useThemeStore } from "../../stores/theme-store";
-import { toBlobURL } from "@notesnook/editor/dist/utils/downloader";
 import { getChangedNodes } from "@notesnook/editor/dist/utils/prosemirror";
 import { LinkAttributes } from "@notesnook/editor/dist/extensions/link";
 import { writeToClipboard } from "../../utils/clipboard";
@@ -146,7 +139,6 @@ function TipTap(props: TipTapProps) {
     (store) => store.markdownShortcuts
   );
   const { toolbarConfig } = useToolbarConfig();
-  const { isSearching, toggleSearch } = useSearch();
 
   usePermissionHandler({
     claims: {
@@ -199,7 +191,6 @@ function TipTap(props: TipTapProps) {
           editor.commands.focus("start", { scrollIntoView: true });
         oldNonce.current = nonce;
 
-        console.log("on create new editor");
         useEditorManager.getState().setEditor(id, {
           editor: toIEditor(editor as Editor),
           canRedo: editor.can().redo(),
@@ -212,7 +203,7 @@ function TipTap(props: TipTapProps) {
           },
           tableOfContents: getTableOfContents(editor.view.dom)
         });
-        editor.commands.refreshSearch();
+        // editor.commands.refreshSearch();
       },
       onUpdate: ({ editor, transaction }) => {
         const changedHeadings = getChangedNodes(transaction, {
@@ -306,25 +297,6 @@ function TipTap(props: TipTapProps) {
     [tiptapOptions]
   );
 
-  useEffect(
-    () => {
-      const isEditorSearching = editor?.storage.searchreplace?.isSearching;
-      if (isSearching) editor?.commands.startSearch();
-      else if (isEditorSearching) editor?.commands.endSearch();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isSearching]
-  );
-
-  useEffect(
-    () => {
-      const isEditorSearching = editor?.storage.searchreplace?.isSearching;
-      if (isSearching && !isEditorSearching) toggleSearch();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [toggleSearch, editor?.storage.searchreplace?.isSearching]
-  );
-
   // useEffect(() => {
   //   if (!editorContainer) return;
   //   const currentEditor = editor;
@@ -350,8 +322,6 @@ function TipTap(props: TipTapProps) {
   //   };
   // }, [editor, editorContainer]);
 
-  console.log("RENDERING TIPTAP");
-
   if (readonly) return null;
   return (
     <>
@@ -466,7 +436,8 @@ function toIEditor(editor: Editor): IEditor {
           progress
         },
         { query: (a) => a.hash === hash, preventUpdate: true }
-      )
+      ),
+    startSearch: () => editor.commands.startSearch()
   };
 }
 

apps/web/src/components/editor/types.ts

@@ -36,4 +36,5 @@ export interface IEditor {
   updateContent: (content: string) => void;
   attachFile: (file: Attachment) => void;
   sendAttachmentProgress: (hash: string, progress: number) => void;
+  startSearch: () => void;
 }