You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
871 B
41 lines
871 B
import { EditorOptions } from '@tiptap/core'
|
|
import { DependencyList, useEffect, useState } from 'react'
|
|
|
|
import { Editor } from './Editor'
|
|
|
|
function useForceUpdate() {
|
|
const [, setValue] = useState(0)
|
|
|
|
return () => setValue(value => value + 1)
|
|
}
|
|
|
|
export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
|
|
const [editor, setEditor] = useState<Editor | null>(null)
|
|
const forceUpdate = useForceUpdate()
|
|
|
|
useEffect(() => {
|
|
let isMounted = true
|
|
|
|
const instance = new Editor(options)
|
|
|
|
setEditor(instance)
|
|
|
|
instance.on('transaction', () => {
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
if (isMounted) {
|
|
forceUpdate()
|
|
}
|
|
})
|
|
})
|
|
})
|
|
|
|
return () => {
|
|
instance.destroy()
|
|
isMounted = false
|
|
}
|
|
}, deps)
|
|
|
|
return editor
|
|
}
|