Compare commits

...

2 Commits

Author SHA1 Message Date
Ammar Ahmed
b47383aff7 mobile: remove margin in editor 2024-05-07 11:48:21 +05:00
Ammar Ahmed
b1ace27e67 mobile: fix editor scrolling on update 2024-05-06 14:07:37 +05:00
3 changed files with 40 additions and 19 deletions

View File

@@ -20,10 +20,6 @@
/* color: var(--nn_primary_paragraph) ## TODO: use fixed color */ /* color: var(--nn_primary_paragraph) ## TODO: use fixed color */
} }
.main-editor > .ProseMirror:first-child {
margin-top: -5px !important;
}
::selection { ::selection {
color: white; color: white;
background-color: var(--nn_primary_accent); background-color: var(--nn_primary_accent);

View File

@@ -196,7 +196,14 @@ const Tiptap = ({
? useTabStore.getState().noteState[tabRef.current.noteId] ? useTabStore.getState().noteState[tabRef.current.noteId]
: undefined; : undefined;
const top = noteState?.top; const top = noteState?.top;
logger("info", tabRef.current.noteId, noteState?.top); logger(
"info",
"editor.onCreate",
tabRef.current?.noteId,
noteState?.top,
noteState?.to,
noteState?.from
);
if (noteState?.to || noteState?.from) { if (noteState?.to || noteState?.from) {
editors[tabRef.current.id]?.chain().setTextSelection({ editors[tabRef.current.id]?.chain().setTextSelection({
@@ -204,6 +211,7 @@ const Tiptap = ({
from: noteState.from from: noteState.from
}); });
} }
logger("info", "Scrolling to", top, useTabStore.getState().noteState);
containerRef.current?.scrollTo({ containerRef.current?.scrollTo({
left: 0, left: 0,
top: top || 0, top: top || 0,
@@ -234,7 +242,6 @@ const Tiptap = ({
const _editor = useTiptap(tiptapOptions, [tiptapOptions]); const _editor = useTiptap(tiptapOptions, [tiptapOptions]);
const update = useCallback(() => { const update = useCallback(() => {
logger("info", "LOADING NOTE...");
editors[tabRef.current.id]?.commands.setTextSelection(0); editors[tabRef.current.id]?.commands.setTextSelection(0);
setTick((tick) => tick + 1); setTick((tick) => tick + 1);
globalThis.editorControllers[tabRef.current.id]?.setTitlePlaceholder( globalThis.editorControllers[tabRef.current.id]?.setTitlePlaceholder(
@@ -278,6 +285,13 @@ const Tiptap = ({
? state.noteState[tabRef.current.noteId] ? state.noteState[tabRef.current.noteId]
: undefined; : undefined;
if (noteState) { if (noteState) {
if (
containerRef.current &&
containerRef.current?.scrollHeight < noteState.top
) {
console.log("Container too small to scroll.");
return;
}
containerRef.current?.scrollTo({ containerRef.current?.scrollTo({
left: 0, left: 0,
top: noteState.top, top: noteState.top,
@@ -317,6 +331,7 @@ const Tiptap = ({
}; };
updateScrollPosition(useTabStore.getState()); updateScrollPosition(useTabStore.getState());
const unsub = useTabStore.subscribe((state, prevState) => { const unsub = useTabStore.subscribe((state, prevState) => {
if (state.currentTab !== tabRef.current.id) { if (state.currentTab !== tabRef.current.id) {
isFocusedRef.current = false; isFocusedRef.current = false;

View File

@@ -54,6 +54,7 @@ type Timers = {
selectionChange: NodeJS.Timeout | null; selectionChange: NodeJS.Timeout | null;
change: NodeJS.Timeout | null; change: NodeJS.Timeout | null;
wordCounter: NodeJS.Timeout | null; wordCounter: NodeJS.Timeout | null;
scroll: NodeJS.Timeout | null;
}; };
function isInViewport(element: any) { function isInViewport(element: any) {
@@ -135,7 +136,8 @@ export function useEditorController({
const timers = useRef<Timers>({ const timers = useRef<Timers>({
selectionChange: null, selectionChange: null,
change: null, change: null,
wordCounter: null wordCounter: null,
scroll: null
}); });
if (!tabRef.current.noteId && loading) { if (!tabRef.current.noteId && loading) {
@@ -210,14 +212,19 @@ export function useEditorController({
const scroll = useCallback( const scroll = useCallback(
(_event: React.UIEvent<HTMLDivElement, UIEvent>) => { (_event: React.UIEvent<HTMLDivElement, UIEvent>) => {
const noteId = useTabStore const value = _event.currentTarget.scrollTop;
.getState() if (timers.current.scroll !== null) clearTimeout(timers.current.scroll);
.getNoteIdForTab(useTabStore.getState().currentTab); timers.current.scroll = setTimeout(() => {
if (noteId) { if (
useTabStore.getState().setNoteState(noteId, { tabRef.current.noteId &&
top: _event.currentTarget.scrollTop tabRef.current.noteId === useTabStore.getState().getCurrentNoteId()
}); ) {
} logger("info", tabRef.current.noteId, value);
useTabStore.getState().setNoteState(tabRef.current.noteId, {
top: value
});
}
}, 16);
}, },
[] []
); );
@@ -259,10 +266,13 @@ export function useEditorController({
preserveWhitespace: true preserveWhitespace: true
}); });
editor.commands.setTextSelection({ if (editor.isFocused && (to !== 1 || from !== 1)) {
from, logger("info", "Setting focus", to, from);
to editor.commands.setTextSelection({
}); from,
to
});
}
countWords(0); countWords(0);
} }