Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix loosing cursor position on new paragraph #345

Merged
merged 2 commits into from
Sep 1, 2023
Merged

fix loosing cursor position on new paragraph #345

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98e0284
fix loosing cursor position on new paragraph
anuejn Sep 1, 2023
0b5fba9
more performance improvements
anuejn Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 55 additions & 32 deletions frontend/src/editor/transcription_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useEvent } from '../utils/use_event';
import { SeekToEvent, Paragraph } from './types';
import { PlayerBar, startTimeToClassName } from './player';
import clsx from 'clsx';
import { ComponentProps, useContext, useCallback, memo } from 'react';
import React, { ComponentProps, useContext, useCallback, memo, useState } from 'react';
import { SpeakerColorsContext, SpeakerColorsProvider } from './speaker_colors';
import { useMediaQuery } from '../utils/use_media_query';
import { useSpeakerName } from '../utils/document';
Expand Down Expand Up @@ -42,14 +42,29 @@ export function formattedTime(sec: number | undefined): string {
return `${minutes}:${seconds}`;
}

export const LoadingContext = React.createContext<[boolean, (next: boolean) => void]>([
false,
(_x) => {
/* this is just a placeholder */
},
]);

function Paragraph({ element, children, attributes }: RenderElementProps): JSX.Element {
const readOnly = useReadOnly();
const startAtom = element.children[0];
const speakerColors = useContext(SpeakerColorsContext);
const [loading, setLoading] = useContext(LoadingContext);

if (loading) {
setTimeout(() => {
setLoading(false);
}, 0);
}

// This is a rather bad hack but saves A LOT of resources.
const { ref, inView } = useInView({
fallbackInView: true,
initialInView: !loading,
});

const speakerChanged = useSlateSelector((editor) => {
Expand Down Expand Up @@ -226,6 +241,8 @@ export function TranscriptionEditor({
}
});

const loadingState = useState(true);

const renderLeaf = useCallback(
(props: RenderLeafProps) => {
const { leaf, children, attributes } = props;
Expand All @@ -245,7 +262,18 @@ export function TranscriptionEditor({

return (
<div {...props}>
{editor && initialValue ? (
{loadingState[0] && (
<>
<div
className={clsx(
'grow-[2] fixed left-0 top-0 flex items-center justify-center w-full h-full bg-white z-10',
)}
>
<LoadingBee size={200} className="" />
</div>
</>
)}
{editor && initialValue && (
<Slate
editor={editor}
value={initialValue}
Expand All @@ -260,39 +288,34 @@ export function TranscriptionEditor({
}}
>
<SpeakerColorsProvider>
<ErrorBoundary editor={editor}>
<Editable
renderElement={Paragraph}
renderLeaf={renderLeaf}
readOnly={readOnly}
onClick={(e: React.MouseEvent) => {
const { selection } = editor;
<LoadingContext.Provider value={loadingState}>
<ErrorBoundary editor={editor}>
<Editable
renderElement={Paragraph}
renderLeaf={renderLeaf}
readOnly={readOnly}
onClick={(e: React.MouseEvent) => {
const { selection } = editor;

// fire a 'seek to' event when selection is changed by clicking outside of a text node
// e.g. by clicking at the blank space on the right of a paragraph
if (
selection &&
Range.isCollapsed(selection) &&
e.target instanceof HTMLElement &&
e.target.isContentEditable
) {
const [leaf] = editor.leaf(selection.anchor);
window.dispatchEvent(new SeekToEvent(leaf.start));
}
}}
className={clsx('2xl:-ml-20')}
/>
</ErrorBoundary>
<PlayerBar documentId={documentId} editor={editor} />
// fire a 'seek to' event when selection is changed by clicking outside of a text node
// e.g. by clicking at the blank space on the right of a paragraph
if (
selection &&
Range.isCollapsed(selection) &&
e.target instanceof HTMLElement &&
e.target.isContentEditable
) {
const [leaf] = editor.leaf(selection.anchor);
window.dispatchEvent(new SeekToEvent(leaf.start));
}
}}
className={clsx('2xl:-ml-20')}
/>
</ErrorBoundary>
<PlayerBar documentId={documentId} editor={editor} />
</LoadingContext.Provider>
</SpeakerColorsProvider>
</Slate>
) : (
<>
<div className={clsx('grow-[2] flex items-center justify-center w-full h-full')}>
<LoadingBee size={200} className="" />
</div>
<div className="grow-[2] flex" />
</>
)}
</div>
);
Expand Down