diff --git a/.changeset/mean-moles-poke.md b/.changeset/mean-moles-poke.md deleted file mode 100644 index 24a0b698cf7..00000000000 --- a/.changeset/mean-moles-poke.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@khanacademy/perseus-editor": minor ---- - -Resolving a long-standing Perseus Editor cursor jumping bug by removing the debounce on changes in the Editor and moving it upstream. diff --git a/.changeset/tough-deers-rescue.md b/.changeset/tough-deers-rescue.md new file mode 100644 index 00000000000..518c2a8b916 --- /dev/null +++ b/.changeset/tough-deers-rescue.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus-editor": patch +--- + +Reverting Editor Cursor Bouncing Fix diff --git a/packages/perseus-editor/src/editor.tsx b/packages/perseus-editor/src/editor.tsx index c22d3e75b56..8e0e1fffa01 100644 --- a/packages/perseus-editor/src/editor.tsx +++ b/packages/perseus-editor/src/editor.tsx @@ -162,6 +162,7 @@ type State = { // eslint-disable-next-line react/no-unsafe class Editor extends React.Component { lastUserValue: string | null | undefined; + deferredChange: any | null | undefined; widgetIds: any | null | undefined; underlay = React.createRef(); @@ -250,6 +251,12 @@ class Editor extends React.Component { } } + componentWillUnmount() { + // TODO(jeff, CP-3128): Use Wonder Blocks Timing API. + // eslint-disable-next-line no-restricted-syntax + clearTimeout(this.deferredChange); + } + getWidgetEditor( id: string, type: PerseusWidget["type"], @@ -434,11 +441,17 @@ class Editor extends React.Component { handleChange: (e: React.SyntheticEvent) => void = ( e: React.SyntheticEvent, ) => { - const newValue = e.currentTarget.value; - this.setState({textAreaValue: newValue}); - if (newValue !== this.props.content) { - this.props.onChange({content: newValue}); - } + // TODO(jeff, CP-3128): Use Wonder Blocks Timing API. + // eslint-disable-next-line no-restricted-syntax + clearTimeout(this.deferredChange); + this.setState({textAreaValue: e.currentTarget.value}); + // TODO(jeff, CP-3128): Use Wonder Blocks Timing API. + // eslint-disable-next-line no-restricted-syntax + this.deferredChange = setTimeout(() => { + if (this.state.textAreaValue !== this.props.content) { + this.props.onChange({content: this.state.textAreaValue}); + } + }, this.props.apiOptions.editorChangeDelay); }; _handleKeyDown: (e: React.KeyboardEvent) => void = (