diff --git a/frontend/src/editor/editor_error_boundary.tsx b/frontend/src/editor/editor_error_boundary.tsx index af907d5e..75df1017 100644 --- a/frontend/src/editor/editor_error_boundary.tsx +++ b/frontend/src/editor/editor_error_boundary.tsx @@ -1,30 +1,19 @@ -// this file contains a hack to revive slate when it breaks because our other hacks kill it. -// se transcription_editor.tsx for how its used +// this file contains a hack to save slate when it breaks because our other hacks kill it. +// Slate raises exceptions when handling selections. We just ignore these errors and deselct import React, { ReactNode } from 'react'; +import { Editor, Transforms } from 'slate'; -export const NeedsFullRender = React.createContext(false); - -export class ErrorBoundary extends React.Component<{ children: ReactNode }, { error: boolean }> { - constructor(props: { children: ReactNode }) { +export class ErrorBoundary extends React.Component<{ children: ReactNode; editor: Editor }> { + constructor(props: { children: ReactNode; editor: Editor }) { super(props); - this.state = { error: false }; } - static getDerivedStateFromError() { - return { error: true }; + componentDidCatch() { + Transforms.deselect(this.props.editor); } render() { - if (this.state.error) { - setTimeout(() => { - this.setState({ error: false }); - }, 0); - } - return ( - - {this.props.children} - - ); + return this.props.children; } } diff --git a/frontend/src/editor/transcription_editor.tsx b/frontend/src/editor/transcription_editor.tsx index e476901b..72bcb72f 100644 --- a/frontend/src/editor/transcription_editor.tsx +++ b/frontend/src/editor/transcription_editor.tsx @@ -19,7 +19,7 @@ import { useMediaQuery } from '../utils/use_media_query'; import { useSpeakerName } from '../utils/document'; import { useInView } from 'react-intersection-observer'; -import { ErrorBoundary, NeedsFullRender } from './editor_error_boundary'; +import { ErrorBoundary } from './editor_error_boundary'; export function formattedTime(sec: number | undefined): string { if (sec === undefined) { @@ -46,16 +46,10 @@ function Paragraph({ element, children, attributes }: RenderElementProps): JSX.E const startAtom = element.children[0]; const speakerColors = useContext(SpeakerColorsContext); - /* This is a rather bad hack but saves A LOT of resources. - if an error is thrown, we catch it with our error boundary, - set needsRenderFull to true for one render and then set it to false again. - This way the editor is re-vived and we can still get the performance boost, this gives us. - */ + // This is a rather bad hack but saves A LOT of resources. const { ref, inView } = useInView({ fallbackInView: true, }); - const needsFullRender = useContext(NeedsFullRender); - const renderFull = needsFullRender || inView; const speakerChanged = useSlateSelector((editor) => { const idx = ReactEditor.findPath(editor, element)[0]; @@ -163,7 +157,7 @@ function Paragraph({ element, children, attributes }: RenderElementProps): JSX.E {/* If the paragraph is out of view, we do not render the children (which would the the text leafs). Instead we just add the plain text of the paragraph here to enable search and scrolling without jumping content. */} - {renderFull ? children : element.children.map((x) => x.text).join('')} + {inView ? children : element.children.map((x) => x.text).join('')} ); @@ -252,7 +246,7 @@ export function TranscriptionEditor({ }} > - +