diff --git a/apps/mobile/app/screens/editor/index.tsx b/apps/mobile/app/screens/editor/index.tsx index cffd57fee..d33164fc0 100755 --- a/apps/mobile/app/screens/editor/index.tsx +++ b/apps/mobile/app/screens/editor/index.tsx @@ -143,7 +143,6 @@ const Editor = React.memo( { const [visible, setVisible] = useState(false); const timer = useRef(); const insets = useGlobalSafeAreaInsets(); - const [width, setWidth] = useState(400); + const [width, setWidth] = useState(0); const groupProgressInfo = useRef<{ [name: string]: { @@ -54,7 +54,6 @@ export const ProgressBar = () => { useEffect(() => { if (loading) { - console.log(loading); if ( loading.current === loading.total && typeof loading.success === "boolean" @@ -116,6 +115,7 @@ export const ProgressBar = () => { justifyContent: "center", position: "absolute", zIndex: visible ? 1 : -1, + opacity: visible ? 1 : 0, marginTop: insets.top + 45, width: "100%" }} diff --git a/apps/mobile/app/screens/editor/tiptap/editor-events.ts b/apps/mobile/app/screens/editor/tiptap/editor-events.ts index 6dd0db0d1..1e14cb1f7 100644 --- a/apps/mobile/app/screens/editor/tiptap/editor-events.ts +++ b/apps/mobile/app/screens/editor/tiptap/editor-events.ts @@ -42,5 +42,6 @@ export const EventTypes = { showTabs: "editor-events:show-tabs", tabFocused: "editor-events:tab-focused", toc: "editor-events:toc", - createInternalLink: "editor-events:create-internal-link" + createInternalLink: "editor-events:create-internal-link", + load: "editor-events:load" }; diff --git a/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts b/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts index ef1ead9d9..06be05e4f 100644 --- a/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts +++ b/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts @@ -343,6 +343,12 @@ export const useEditorEvents = ( const data = event.nativeEvent.data; const editorMessage = JSON.parse(data) as EditorMessage; + if (editorMessage.type === EventTypes.load) { + console.log("Editor loaded"); + editor.onLoad(); + return; + } + if (editorMessage.type === EventTypes.back) { return onBackPress(); } diff --git a/apps/mobile/app/screens/editor/tiptap/use-editor.ts b/apps/mobile/app/screens/editor/tiptap/use-editor.ts index 4b6b693ad..5a5d8ed6b 100644 --- a/apps/mobile/app/screens/editor/tiptap/use-editor.ts +++ b/apps/mobile/app/screens/editor/tiptap/use-editor.ts @@ -411,8 +411,6 @@ export const useEditor = ( const noteIsLocked = event.item.locked && !(event.item as NoteWithContent).content; - console.log("noteIsLocked", noteIsLocked); - // If note was already opened in a tab, focus that tab. if (typeof event.tabId !== "number") { if (useTabStore.getState().hasTabForNote(event.item.id)) { @@ -422,7 +420,6 @@ export const useEditor = ( readonly: event.item.readonly || readonly, locked: noteIsLocked }); - console.log(noteIsLocked, "focused tab..."); useTabStore.getState().focusTab(tabId); } console.log("Note already loaded, focusing the tab"); @@ -437,7 +434,6 @@ export const useEditor = ( } } else { if (lastTabFocused.current !== event.tabId) { - console.log("Focused tab"); useTabStore.getState().focusTab(event.tabId); } } @@ -489,6 +485,7 @@ export const useEditor = ( ); await postMessage(EditorEvents.title, item.title, tabId); + overlay(false); loadingState.current = currentContents.current[item.id]?.data; await postMessage( @@ -715,45 +712,24 @@ export const useEditor = ( const onLoad = useCallback(async () => { if (currentNotes.current) overlay(true); - clearTimeout(timers.current["editor:loaded"]); - timers.current["editor:loaded"] = setTimeout(async () => { - postMessage(EditorEvents.theme, theme); - commands.setInsets( - isDefaultEditor ? insets : { top: 0, left: 0, right: 0, bottom: 0 } - ); - await commands.setSettings(); + postMessage(EditorEvents.theme, theme); + commands.setInsets( + isDefaultEditor ? insets : { top: 0, left: 0, right: 0, bottom: 0 } + ); + await commands.setSettings(); - if (!state.current.ready && (await onReady())) { - state.current.ready = true; - } - setTimeout(() => overlay(false), 300); + if (!state.current.ready && (await onReady())) { + state.current.ready = true; + } - const noteId = useTabStore.getState().getCurrentNoteId(); - async function restoreTabNote() { - if (!noteId) return; - const note = await db.notes.note(noteId); - if (!note) { - console.log("Editor loaded with blank note"); - loadNote({ newNote: true }); - if (tabBarRef.current?.page === 1) { - state.current.currentlyEditing = false; - } - } + const noteId = useTabStore.getState().getCurrentNoteId(); + if (!noteId) { + overlay(false); + loadNote({ newNote: true }); + if (tabBarRef.current?.page === 1) { + state.current.currentlyEditing = false; } - - if (noteId) { - if (useSettingStore.getState().isAppLoading) { - const unsub = useSettingStore.subscribe(async (state) => { - if (!state.isAppLoading) { - restoreTabNote(); - unsub(); - } - }); - } else { - restoreTabNote(); - } - } - }, 500); + } }, [ onReady, postMessage, diff --git a/packages/editor-mobile/src/components/editor.tsx b/packages/editor-mobile/src/components/editor.tsx index 32f95176b..3b714b128 100644 --- a/packages/editor-mobile/src/components/editor.tsx +++ b/packages/editor-mobile/src/components/editor.tsx @@ -29,7 +29,14 @@ import { } from "@notesnook/editor"; import { toBlobURL } from "@notesnook/editor/dist/utils/downloader"; import { useThemeColors } from "@notesnook/theme"; -import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react"; +import { + useCallback, + useEffect, + useLayoutEffect, + useMemo, + useRef, + useState +} from "react"; import { useEditorController } from "../hooks/useEditorController"; import { useSettings } from "../hooks/useSettings"; import { @@ -47,6 +54,8 @@ import Title from "./title"; globalThis.toBlobURL = toBlobURL as typeof globalThis.toBlobURL; +let didCallOnLoad = false; + const Tiptap = ({ settings, getContentDiv @@ -214,6 +223,11 @@ const Tiptap = ({ contentPlaceholderRef.current?.appendChild(getContentDiv()); } + if (!didCallOnLoad) { + didCallOnLoad = true; + post("editor-events:load"); + } + const updateScrollPosition = (state: TabStore) => { if (isFocusedRef.current) return; if (state.currentTab === tabRef.current.id) { @@ -265,7 +279,7 @@ const Tiptap = ({ return () => { unsub(); }; - }, []); + }, [getContentDiv]); const onClickEmptyArea: React.MouseEventHandler = useCallback( (event) => { @@ -466,31 +480,43 @@ const TiptapProvider = (): JSX.Element => { const settings = useSettings(); const { colors } = useThemeColors("editor"); const contentRef = useRef(); + + const getContentDiv = useCallback(() => { + if (contentRef.current) { + return contentRef.current; + } + const editorContainer = document.createElement("div"); + editorContainer.classList.add("selectable"); + editorContainer.style.flex = "1"; + editorContainer.style.cursor = "text"; + editorContainer.style.padding = "0px 12px"; + editorContainer.style.color = colors.primary.paragraph; + editorContainer.style.paddingBottom = `150px`; + editorContainer.style.fontSize = `${settings.fontSize}px`; + editorContainer.style.fontFamily = + getFontById(settings.fontFamily)?.font || "sans-serif"; + contentRef.current = editorContainer; + return editorContainer; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + useEffect(() => { + if (contentRef.current) { + contentRef.current.style.color = colors.primary.paragraph; + } + }, [colors]); + + useEffect(() => { + if (contentRef.current) { + contentRef.current.style.fontSize = `${settings.fontSize}px`; + contentRef.current.style.fontFamily = + getFontById(settings.fontFamily)?.font || "sans-serif"; + } + }, [settings.fontSize, settings.fontFamily]); + return ( - { - if (contentRef.current) { - logger("info", "return content"); - return contentRef.current; - } - logger("info", "new content"); - const editorContainer = document.createElement("div"); - editorContainer.classList.add("selectable"); - editorContainer.style.flex = "1"; - editorContainer.style.cursor = "text"; - editorContainer.style.padding = "0px 12px"; - editorContainer.style.color = - colors?.primary?.paragraph || colors.primary.paragraph; - editorContainer.style.paddingBottom = `150px`; - editorContainer.style.fontSize = `${settings.fontSize}px`; - editorContainer.style.fontFamily = - getFontById(settings.fontFamily)?.font || "sans-serif"; - contentRef.current = editorContainer; - return editorContainer; - }} - /> + ); }; diff --git a/packages/editor-mobile/src/hooks/useEditorController.ts b/packages/editor-mobile/src/hooks/useEditorController.ts index 24b74b41a..db1af856c 100644 --- a/packages/editor-mobile/src/hooks/useEditorController.ts +++ b/packages/editor-mobile/src/hooks/useEditorController.ts @@ -217,16 +217,6 @@ export function useEditorController({ return; } - if (tab.id === message.tabId) { - logger( - "info", - message.type, - tab.noteId, - "Focused:", - tab.id === useTabStore.getState().currentTab - ); - } - const editor = editors[tab.id]; switch (type) { case "native:updatehtml": { diff --git a/packages/editor-mobile/src/index.tsx b/packages/editor-mobile/src/index.tsx index c52af72df..5a868bf9d 100644 --- a/packages/editor-mobile/src/index.tsx +++ b/packages/editor-mobile/src/index.tsx @@ -17,14 +17,13 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ global.Buffer = require("buffer").Buffer; -import React from "react"; -import { createRoot } from "react-dom/client"; -import "./index.css"; -import App from "./App"; -import "@notesnook/editor/styles/katex.min.css"; import "@notesnook/editor/styles/fonts.mobile.css"; import "@notesnook/editor/styles/katex-fonts.mobile.css"; +import "@notesnook/editor/styles/katex.min.css"; import "@notesnook/editor/styles/styles.css"; +import { createRoot } from "react-dom/client"; +import App from "./App"; +import "./index.css"; const rootElement = document.getElementById("root"); if (rootElement) { diff --git a/packages/editor-mobile/src/utils/index.ts b/packages/editor-mobile/src/utils/index.ts index f679347f3..b2eb335fb 100644 --- a/packages/editor-mobile/src/utils/index.ts +++ b/packages/editor-mobile/src/utils/index.ts @@ -190,7 +190,8 @@ export const EventTypes = { showTabs: "editor-events:show-tabs", tabFocused: "editor-events:tab-focused", toc: "editor-events:toc", - createInternalLink: "editor-events:create-internal-link" + createInternalLink: "editor-events:create-internal-link", + load: "editor-events:load" } as const; export function randId(prefix: string) {