diff --git a/docs/src/demos/Examples/Community/index.vue b/docs/src/demos/Examples/Community/index.vue index 9c9730af..7aec67da 100644 --- a/docs/src/demos/Examples/Community/index.vue +++ b/docs/src/demos/Examples/Community/index.vue @@ -110,7 +110,7 @@ export default { }) }, onKeyDown(props) { - return component.vm.onKeyDown(props) + return component.ref.onKeyDown(props) }, onExit() { popup[0].destroy() diff --git a/docs/src/demos/Experiments/Commands/index.vue b/docs/src/demos/Experiments/Commands/index.vue index e59e8878..6a5b9abc 100644 --- a/docs/src/demos/Experiments/Commands/index.vue +++ b/docs/src/demos/Experiments/Commands/index.vue @@ -105,7 +105,7 @@ export default { }) }, onKeyDown(props) { - return component.vm.onKeyDown(props) + return component.ref.onKeyDown(props) }, onExit() { popup[0].destroy() diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue index 9a5dc8a1..ccc93ecb 100644 --- a/docs/src/demos/Nodes/Mention/index.vue +++ b/docs/src/demos/Nodes/Mention/index.vue @@ -69,7 +69,7 @@ export default { }) }, onKeyDown(props) { - return component.vm.onKeyDown(props) + return component.ref.onKeyDown(props) }, onExit() { popup[0].destroy() diff --git a/packages/react/src/Editor.ts b/packages/react/src/Editor.ts index b687498e..06614c23 100644 --- a/packages/react/src/Editor.ts +++ b/packages/react/src/Editor.ts @@ -1,6 +1,7 @@ import React from 'react' import { Editor as CoreEditor } from '@tiptap/core' +import { EditorContentProps, EditorContentState } from './EditorContent' export class Editor extends CoreEditor { - public contentComponent: React.Component | null = null + public contentComponent: React.Component | null = null } diff --git a/packages/react/src/EditorContent.tsx b/packages/react/src/EditorContent.tsx index 93029683..0e96b494 100644 --- a/packages/react/src/EditorContent.tsx +++ b/packages/react/src/EditorContent.tsx @@ -2,11 +2,6 @@ import React from 'react' import ReactDOM from 'react-dom' import { Editor } from './Editor' import { ReactRenderer } from './ReactRenderer' -import { ReactNodeViewContext } from './useReactNodeView' - -type EditorContentProps = { - editor: Editor | null -} const Portals: React.FC<{ renderers: Map }> = ({ renderers }) => { return ( @@ -22,7 +17,16 @@ const Portals: React.FC<{ renderers: Map }> = ({ renderer ) } -export class PureEditorContent extends React.Component { +export interface EditorContentProps { + editor: Editor | null, +} + +export interface EditorContentState { + editor: Editor | null, + renderers: Map +} + +export class PureEditorContent extends React.Component { editorContentRef: React.RefObject constructor(props: EditorContentProps) { diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx index fb606091..a122ef60 100644 --- a/packages/react/src/ReactNodeViewRenderer.tsx +++ b/packages/react/src/ReactNodeViewRenderer.tsx @@ -78,30 +78,23 @@ class ReactNodeView implements NodeView { Component.displayName = capitalizeFirstChar(this.extension.config.name) } - const ReactNodeView: React.FC = (props) => { + const ReactNodeView: React.FunctionComponent = (props) => { const [isEditable, setIsEditable] = useState(this.editor.isEditable) - - const handleEditableChange = () => { + const onDragStart = this.onDragStart.bind(this) + const onViewUpdate = () => { setIsEditable(this.editor.isEditable) } - const onDragStart = this.onDragStart.bind(this) - useEffect(() => { - this.editor.on('viewUpdate', handleEditableChange) + this.editor.on('viewUpdate', onViewUpdate) return () => { - this.editor.off('viewUpdate', handleEditableChange) + this.editor.off('viewUpdate', onViewUpdate) } }, []) return ( - + ) diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx index a1953ee9..3f2e5763 100644 --- a/packages/react/src/ReactRenderer.tsx +++ b/packages/react/src/ReactRenderer.tsx @@ -1,28 +1,19 @@ import React from 'react' +import { AnyObject } from '@tiptap/core' import { Editor } from './Editor' -export interface ReactRendererOptions { - as?: string, - editor: Editor, - props?: { [key: string]: any }, -} - -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 - ); + ) +} + +export interface ReactRendererOptions { + as?: string, + editor: Editor, + props?: AnyObject, } export class ReactRenderer { @@ -34,13 +25,13 @@ export class ReactRenderer { element: Element - props: { [key: string]: any } + props: AnyObject reactElement: React.ReactNode ref: React.Component | null = null - constructor(component: any, { props = {}, editor }: ReactRendererOptions) { + constructor(component: React.Component | React.FunctionComponent, { props = {}, editor }: ReactRendererOptions) { this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString() this.component = component this.editor = editor @@ -50,7 +41,7 @@ export class ReactRenderer { this.render() } - render() { + render(): void { const Component = this.component const props = this.props @@ -62,8 +53,6 @@ export class ReactRenderer { if (this.editor?.contentComponent) { this.editor.contentComponent.setState({ - // TODO - // @ts-ignore renderers: this.editor.contentComponent.state.renderers.set( this.id, this, @@ -72,7 +61,7 @@ export class ReactRenderer { } } - updateProps(props: { [key: string]: any } = {}) { + updateProps(props: AnyObject = {}): void { this.props = { ...this.props, ...props, @@ -81,10 +70,8 @@ export class ReactRenderer { this.render() } - destroy() { + destroy(): void { if (this.editor?.contentComponent) { - // TODO - // @ts-ignore const { renderers } = this.editor.contentComponent.state renderers.delete(this.id) @@ -94,5 +81,4 @@ export class ReactRenderer { }) } } - } diff --git a/packages/react/src/useReactNodeView.ts b/packages/react/src/useReactNodeView.ts index 094a388e..142edbfa 100644 --- a/packages/react/src/useReactNodeView.ts +++ b/packages/react/src/useReactNodeView.ts @@ -1,11 +1,11 @@ -import React, { useContext } from 'react' +import { createContext, useContext } from 'react' export interface ReactNodeViewContextProps { isEditable: boolean, onDragStart: (event: DragEvent) => void, } -export const ReactNodeViewContext = React.createContext>({ +export const ReactNodeViewContext = createContext>({ isEditable: undefined, onDragStart: undefined, }) diff --git a/packages/vue-2/src/VueRenderer.ts b/packages/vue-2/src/VueRenderer.ts index 74ddceec..19aa3cab 100644 --- a/packages/vue-2/src/VueRenderer.ts +++ b/packages/vue-2/src/VueRenderer.ts @@ -1,21 +1,22 @@ import Vue from 'vue' +import { AnyObject } from '@tiptap/core' import { VueConstructor } from 'vue/types/umd' export class VueRenderer { - vm!: Vue + ref!: Vue constructor(component: Vue | VueConstructor, props: any) { const Component = Vue.extend(component) - this.vm = new Component(props).$mount() + this.ref = new Component(props).$mount() } get element() { - return this.vm.$el + return this.ref.$el } - updateProps(props: { [key: string]: any } = {}) { - if (!this.vm.$props) { + updateProps(props: AnyObject = {}) { + if (!this.ref.$props) { return } @@ -26,13 +27,13 @@ export class VueRenderer { Object .entries(props) .forEach(([key, value]) => { - this.vm.$props[key] = value + this.ref.$props[key] = value }) Vue.config.silent = originalSilent } destroy() { - this.vm.$destroy() + this.ref.$destroy() } } diff --git a/packages/vue-3/src/VueRenderer.ts b/packages/vue-3/src/VueRenderer.ts index e8dd4cca..45f6e683 100644 --- a/packages/vue-3/src/VueRenderer.ts +++ b/packages/vue-3/src/VueRenderer.ts @@ -1,10 +1,10 @@ import { reactive, markRaw, Component } from 'vue' +import { AnyObject } from '@tiptap/core' import { Editor } from './Editor' export interface VueRendererOptions { - as?: string, editor: Editor, - props?: { [key: string]: any }, + props?: AnyObject, } export class VueRenderer { @@ -18,7 +18,7 @@ export class VueRenderer { element: Element - props: { [key: string]: any } + props: AnyObject constructor(component: Component, { props = {}, editor }: VueRendererOptions) { this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString() @@ -44,7 +44,7 @@ export class VueRenderer { return this.editor.contentComponent?.ctx.$refs[this.id] } - updateProps(props: { [key: string]: any } = {}) { + updateProps(props: AnyObject = {}) { Object .entries(props) .forEach(([key, value]) => {