tiptap/packages/react/src/ReactRenderer.tsx

99 lines
2.0 KiB
TypeScript
Raw Normal View History

2021-03-13 04:21:13 +08:00
import React from 'react'
import { Editor } from './Editor'
2021-03-08 20:19:05 +08:00
2021-03-15 01:00:50 +08:00
export interface ReactRendererOptions {
as?: string,
editor: Editor,
props?: { [key: string]: any },
2021-03-13 04:21:13 +08:00
}
2021-03-08 20:19:05 +08:00
2021-03-15 07:22:17 +08:00
function isFunctionalComponent(Component: any) {
return (
typeof Component === 'function' // can be various things
&& !(
Component.prototype // native arrows don't have prototypes
&& Component.prototype.isReactComponent // special property
)
);
}
function isClassComponent(Component: any) {
return !!(
typeof Component === 'function'
&& Component.prototype
&& Component.prototype.isReactComponent
);
}
2021-03-13 04:21:13 +08:00
export class ReactRenderer {
id: string
2021-03-08 20:19:05 +08:00
2021-03-13 04:21:13 +08:00
editor: Editor
2021-03-08 20:19:05 +08:00
2021-03-13 04:21:13 +08:00
component: any
2021-03-08 20:19:05 +08:00
2021-03-13 04:21:13 +08:00
element: Element
2021-03-08 20:19:05 +08:00
2021-03-13 04:21:13 +08:00
props: { [key: string]: any }
2021-03-08 20:19:05 +08:00
2021-03-15 00:01:52 +08:00
reactElement: React.ReactNode
2021-03-15 07:22:17 +08:00
ref: React.Component | null = null
2021-03-15 01:00:50 +08:00
constructor(component: any, { props = {}, editor }: ReactRendererOptions) {
2021-03-13 04:21:13 +08:00
this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
this.component = component
this.editor = editor
this.props = props
2021-03-15 01:00:50 +08:00
this.element = document.createElement('div')
this.element.classList.add('react-renderer')
2021-03-14 23:30:06 +08:00
this.render()
}
render() {
2021-03-15 07:22:17 +08:00
const Component = this.component
const props = this.props
if (isClassComponent(Component)) {
props.ref = (ref: React.Component) => this.ref = ref
}
this.reactElement = <Component {...props } />
2021-03-13 04:21:13 +08:00
if (this.editor?.contentComponent) {
this.editor.contentComponent.setState({
2021-03-15 00:01:52 +08:00
// TODO
// @ts-ignore
2021-03-13 04:21:13 +08:00
renderers: this.editor.contentComponent.state.renderers.set(
this.id,
this,
),
})
}
}
updateProps(props: { [key: string]: any } = {}) {
2021-03-15 00:01:52 +08:00
this.props = {
...this.props,
...props,
}
this.render()
2021-03-13 04:21:13 +08:00
}
destroy() {
if (this.editor?.contentComponent) {
2021-03-15 00:01:52 +08:00
// TODO
// @ts-ignore
2021-03-13 04:21:13 +08:00
const { renderers } = this.editor.contentComponent.state
renderers.delete(this.id)
this.editor.contentComponent.setState({
renderers,
})
}
}
}