diff --git a/src/useEditor.ts b/src/useEditor.ts index b6a090b6e0..7734ab8d01 100644 --- a/src/useEditor.ts +++ b/src/useEditor.ts @@ -11,8 +11,68 @@ function useForceUpdate() { export const useEditor = (options: Partial = {}, deps: DependencyList = []) => { const [editor, setEditor] = useState(null) + const forceUpdate = useForceUpdate() + const { + onBeforeCreate, + onBlur, + onCreate, + onDestroy, + onFocus, + onSelectionUpdate, + onTransaction, + onUpdate, + } = options + + // This effect will handle updating the editor instance + // when the event handlers change. + useEffect(() => { + if (!editor) { + return + } + + if (onBeforeCreate) { + editor.off('beforeCreate') + editor.on('beforeCreate', onBeforeCreate) + } + + if (onBlur) { + editor.off('blur') + editor.on('blur', onBlur) + } + + if (onCreate) { + editor.off('create') + editor.on('create', onCreate) + } + + if (onDestroy) { + editor.off('destroy') + editor.on('destroy', onDestroy) + } + + if (onFocus) { + editor.off('focus') + editor.on('focus', onFocus) + } + + if (onSelectionUpdate) { + editor.off('selectionUpdate') + editor.on('selectionUpdate', onSelectionUpdate) + } + + if (onTransaction) { + editor.off('transaction') + editor.on('transaction', onTransaction) + } + + if (onUpdate) { + editor.off('update') + editor.on('update', onUpdate) + } + }, [onBeforeCreate, onBlur, onCreate, onDestroy, onFocus, onSelectionUpdate, onTransaction, onUpdate]) + useEffect(() => { let isMounted = true