web: fix typing fast in title input caused some characters to miss

This commit is contained in:
Abdullah Atta
2024-03-14 12:28:08 +05:00
parent 48866efa57
commit b69933444c
4 changed files with 20 additions and 6 deletions

View File

@@ -1 +1 @@
Test note 1 (9) Test note 1 (8) Test note 1 (7) Test note 1 (6) Test note 1 (5) Test note 1 (4) Test note 1 (3) Test note 1 (2) Test note 1 (1) Test note 1 (0) 53ad8e4e40ebebd0f400498d
53ad8e4e40ebebd0f400498dTest note 1 (0) Test note 1 (1) Test note 1 (2) Test note 1 (3) Test note 1 (4) Test note 1 (5) Test note 1 (6) Test note 1 (7) Test note 1 (8) Test note 1 (9)

View File

@@ -1 +1 @@
Test note 2 (9)Test note 2 (8)Test note 2 (7)Test note 2 (6)Test note 2 (5)Test note 2 (4)Test note 2 (3)Test note 2 (2)Test note 2 (1)Test note 2 (0)f054d19e9a2f46eff7b9bb25
f054d19e9a2f46eff7b9bb25Test note 2 (0)Test note 2 (1)Test note 2 (2)Test note 2 (3)Test note 2 (4)Test note 2 (5)Test note 2 (6)Test note 2 (7)Test note 2 (8)Test note 2 (9)

View File

@@ -1 +1 @@
An edit I madeThis is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1
This is Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1Test 1An edit I made

View File

@@ -37,6 +37,7 @@ type TitleBoxProps = {
function TitleBox(props: TitleBoxProps) {
const { readonly, id } = props;
const inputRef = useRef<HTMLInputElement>(null);
const pendingChanges = useRef(false);
// const id = useStore((store) => store.session.id);
const sessionType = useEditorStore((store) => store.getActiveSession()?.type);
const isMobile = useMobile();
@@ -66,6 +67,7 @@ function TitleBox(props: TitleBoxProps) {
const session = useEditorStore.getState().getSession(id);
if (!session || !("note" in session) || !session.note || !inputRef.current)
return;
if (pendingChanges.current) return;
const { title } = session.note;
withSelectionPersist(
@@ -93,7 +95,13 @@ function TitleBox(props: TitleBoxProps) {
if (!preventSave) {
const { activeSessionId } = useEditorStore.getState();
if (!activeSessionId) return;
debouncedOnTitleChange(activeSessionId, activeSessionId, title);
pendingChanges.current = true;
debouncedOnTitleChange(
activeSessionId,
activeSessionId,
title,
pendingChanges
);
}
}
);
@@ -124,12 +132,13 @@ function TitleBox(props: TitleBoxProps) {
}
}}
onChange={(e) => {
pendingChanges.current = true;
e.target.value = replaceDateTime(
e.target.value,
dateFormat,
timeFormat
);
debouncedOnTitleChange(id, id, e.target.value);
debouncedOnTitleChange(id, id, e.target.value, pendingChanges);
updateFontSize(e.target.value.length);
}}
/>
@@ -140,8 +149,13 @@ export default React.memo(TitleBox, (prevProps, nextProps) => {
return prevProps.readonly === nextProps.readonly;
});
function onTitleChange(noteId: string, title: string) {
function onTitleChange(
noteId: string,
title: string,
pendingChanges: React.MutableRefObject<boolean>
) {
useEditorStore.getState().setTitle(noteId, title);
pendingChanges.current = false;
}
const debouncedOnTitleChange = debounceWithId(onTitleChange, 100);