From fc121ef39605237e6e70c4e2377155834eb9fcbc Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Mon, 11 Mar 2024 11:32:18 +0500 Subject: [PATCH] web: remove custom search state logic & use editor commands --- apps/web/src/components/editor/action-bar.tsx | 8 ++-- apps/web/src/components/editor/manager.ts | 31 --------------- apps/web/src/components/editor/tiptap.tsx | 39 +++---------------- apps/web/src/components/editor/types.ts | 1 + 4 files changed, 11 insertions(+), 68 deletions(-) diff --git a/apps/web/src/components/editor/action-bar.tsx b/apps/web/src/components/editor/action-bar.tsx index f3022f294..b21b50328 100644 --- a/apps/web/src/components/editor/action-bar.tsx +++ b/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", diff --git a/apps/web/src/components/editor/manager.ts b/apps/web/src/components/editor/manager.ts index c425dfb51..ec3f44d7f 100644 --- a/apps/web/src/components/editor/manager.ts +++ b/apps/web/src/components/editor/manager.ts @@ -40,7 +40,6 @@ class EditorManager extends BaseStore { fontFamily: "sans-serif", fontSize: 16 }); - searching?: boolean; editors: Record = {}; getEditor = (id: string): EditorContext | undefined => { @@ -86,40 +85,10 @@ const [useEditorManager] = createStore( 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 -// | ((oldState: EditorSubState) => Partial) -// ) => 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( diff --git a/apps/web/src/components/editor/tiptap.tsx b/apps/web/src/components/editor/tiptap.tsx index 0bc92302a..1c809ebb1 100644 --- a/apps/web/src/components/editor/tiptap.tsx +++ b/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() }; } diff --git a/apps/web/src/components/editor/types.ts b/apps/web/src/components/editor/types.ts index 433b73e77..91ea1cce9 100644 --- a/apps/web/src/components/editor/types.ts +++ b/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; }