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 */
}
.main-editor > .ProseMirror:first-child {
margin-top: -5px !important;
}
::selection {
color: white;
background-color: var(--nn_primary_accent);

View File

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

View File

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