Merge branch 'feature/react-renderer' into main

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<EditorContentProps, EditorContentState> | null = null
 }

packages/react/src/EditorContent.tsx

@@ -1,11 +1,32 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import { Editor } from './Editor'
+import { ReactRenderer } from './ReactRenderer'
 
-type EditorContentProps = {
-  editor: Editor | null
+const Portals: React.FC<{ renderers: Map<string, ReactRenderer> }> = ({ renderers }) => {
+  return (
+    <>
+      {Array.from(renderers).map(([key, renderer]) => {
+        return ReactDOM.createPortal(
+          renderer.reactElement,
+          renderer.element,
+          key,
+        )
+      })}
+    </>
+  )
 }
 
-export class PureEditorContent extends React.Component<EditorContentProps, EditorContentProps> {
+export interface EditorContentProps {
+  editor: Editor | null,
+}
+
+export interface EditorContentState {
+  editor: Editor | null,
+  renderers: Map<string, ReactRenderer>
+}
+
+export class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
   editorContentRef: React.RefObject<any>
 
   constructor(props: EditorContentProps) {
@@ -13,7 +34,8 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     this.editorContentRef = React.createRef()
 
     this.state = {
-      editor: this.props.editor
+      editor: this.props.editor,
+      renderers: new Map(),
     }
   }
 
@@ -21,6 +43,14 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     const { editor } = this.props
 
     if (editor && editor.options.element) {
+      if (editor.contentComponent) {
+        return
+      }
+
+      // this.setState({
+      //   editor,
+      // })
+
       const element = this.editorContentRef.current
 
       element.appendChild(editor.options.element.firstChild)
@@ -40,9 +70,12 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
 
   render() {
     return (
-      <div ref={this.editorContentRef} />
+      <>
+        <div ref={this.editorContentRef} />
+        <Portals renderers={this.state.renderers} />
+      </>
     )
   }
 }
 
-export const EditorContent = React.memo(PureEditorContent);
+export const EditorContent = React.memo(PureEditorContent)

packages/react/src/NodeViewContent.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useReactNodeView } from './useReactNodeView'
+
+export interface NodeViewContentProps {
+  as: React.ElementType
+}
+
+export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
+  const { isEditable } = useReactNodeView()
+  const Tag = props.as || 'div'
+
+  return (
+    <Tag
+      data-node-view-content=""
+      contentEditable={isEditable}
+      style={{ whiteSpace: 'pre-wrap' }}
+    />
+  )
+}

packages/react/src/NodeViewWrapper.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useReactNodeView } from './useReactNodeView'
+
+export interface NodeViewWrapperProps {
+  as: React.ElementType
+}
+
+export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = props => {
+  const { onDragStart } = useReactNodeView()
+  const Tag = props.as || 'div'
+
+  return (
+    <Tag
+      data-node-view-wrapper=""
+      onDragStart={onDragStart}
+      style={{ whiteSpace: 'normal' }}
+    >
+     {props.children}
+    </Tag>
+  )
+}

packages/react/src/ReactNodeViewRenderer.ts

@@ -1,208 +0,0 @@
-// // @ts-nocheck
-// import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
-// import { Decoration, NodeView } from 'prosemirror-view'
-// import { NodeSelection } from 'prosemirror-state'
-// import { Node as ProseMirrorNode } from 'prosemirror-model'
-// import React from 'react'
-// import ReactDOM from 'react-dom'
-// import { Editor } from './Editor'
-// import { ReactRenderer } from './ReactRenderer'
-
-// interface ReactNodeViewRendererOptions {
-//   stopEvent: ((event: Event) => boolean) | null,
-//   update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
-// }
-
-// class ReactNodeView implements NodeView {
-
-//   renderer!: ReactRenderer
-
-//   editor: Editor
-
-//   extension!: Node
-
-//   node!: ProseMirrorNode
-
-//   decorations!: Decoration[]
-
-//   getPos!: any
-
-//   isDragging = false
-
-//   options: ReactNodeViewRendererOptions = {
-//     stopEvent: null,
-//     update: null,
-//   }
-
-//   constructor(component: any, props: NodeViewRendererProps, options?: Partial<ReactNodeViewRendererOptions>) {
-//     this.options = { ...this.options, ...options }
-//     this.editor = props.editor as Editor
-//     this.extension = props.extension
-//     this.node = props.node
-//     this.getPos = props.getPos
-//     this.mount(component)
-//   }
-
-//   mount(component: any) {
-//     const props = {}
-
-//     if (!component.displayName) {
-//       component.displayName = this.extension.config.name
-//     }
-
-//     this.renderer = new ReactRenderer(component, {
-//       editor: this.editor,
-//       props,
-//     })
-//   }
-
-//   get dom() {
-//     // if (!this.renderer.element) {
-//     //   return null
-//     // }
-
-//     // if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
-//     //   throw Error('Please use the NodeViewWrapper component for your node view.')
-//     // }
-
-//     return this.renderer.element
-//   }
-
-//   get contentDOM() {
-//     // console.log(this.dom)
-//     // return null
-//     // if (!this.renderer.element) {
-//     //   return null
-//     // }
-
-//     const hasContent = !this.node.type.isAtom
-
-//     if (!hasContent) {
-//       return null
-//     }
-
-//     const contentElement = this.dom.querySelector('[data-node-view-content]')
-
-//     return contentElement || this.dom
-//   }
-
-//   stopEvent(event: Event) {
-//     if (typeof this.options.stopEvent === 'function') {
-//       return this.options.stopEvent(event)
-//     }
-
-//     const target = (event.target as HTMLElement)
-//     const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
-
-//     // ignore all events from child nodes
-//     if (!isInElement) {
-//       return false
-//     }
-
-//     const { isEditable } = this.editor
-//     const { isDragging } = this
-//     const isDraggable = !!this.node.type.spec.draggable
-//     const isSelectable = NodeSelection.isSelectable(this.node)
-//     const isCopyEvent = event.type === 'copy'
-//     const isPasteEvent = event.type === 'paste'
-//     const isCutEvent = event.type === 'cut'
-//     const isClickEvent = event.type === 'mousedown'
-//     const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
-
-//     // ProseMirror tries to drag selectable nodes
-//     // even if `draggable` is set to `false`
-//     // this fix prevents that
-//     if (!isDraggable && isSelectable && isDragEvent) {
-//       event.preventDefault()
-//     }
-
-//     if (isDraggable && isDragEvent && !isDragging) {
-//       event.preventDefault()
-//       return false
-//     }
-
-//     // we have to store that dragging started
-//     if (isDraggable && isEditable && !isDragging && isClickEvent) {
-//       const dragHandle = target.closest('[data-drag-handle]')
-//       const isValidDragHandle = dragHandle
-//         && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
-
-//       if (isValidDragHandle) {
-//         this.isDragging = true
-//         document.addEventListener('dragend', () => {
-//           this.isDragging = false
-//         }, { once: true })
-//       }
-//     }
-
-//     // these events are handled by prosemirror
-//     if (
-//       isDragging
-//       || isCopyEvent
-//       || isPasteEvent
-//       || isCutEvent
-//       || (isClickEvent && isSelectable)
-//     ) {
-//       return false
-//     }
-
-//     return true
-//   }
-
-//   ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
-//     if (mutation.type === 'selection') {
-//       if (this.node.isLeaf) {
-//         return true
-//       }
-
-//       return false
-//     }
-
-//     if (!this.contentDOM) {
-//       return true
-//     }
-
-//     const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
-//       || this.contentDOM === mutation.target
-
-//     return contentDOMHasChanged
-//   }
-
-//   destroy() {
-//     this.renderer.destroy()
-//   }
-
-//   update(node: ProseMirrorNode, decorations: Decoration[]) {
-//     if (typeof this.options.update === 'function') {
-//       return this.options.update(node, decorations)
-//     }
-
-//     if (node.type !== this.node.type) {
-//       return false
-//     }
-
-//     if (node === this.node && this.decorations === decorations) {
-//       return true
-//     }
-
-//     this.node = node
-//     this.decorations = decorations
-//     // this.renderer.updateProps({ node, decorations })
-//     this.renderer.render()
-
-//     return true
-//   }
-// }
-
-// export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer {
-//   return (props: NodeViewRendererProps) => {
-//     // try to get the parent component
-//     // this is important for vue devtools to show the component hierarchy correctly
-//     // maybe it’s `undefined` because <editor-content> isn’t rendered yet
-//     if (!(props.editor as Editor).contentComponent) {
-//       return {}
-//     }
-
-//     return new ReactNodeView(component, props, options) as NodeView
-//   }
-// }

packages/react/src/ReactNodeViewRenderer.tsx

@@ -0,0 +1,273 @@
+import React, { useState, useEffect } from 'react'
+import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
+import { Decoration, NodeView } from 'prosemirror-view'
+import { NodeSelection } from 'prosemirror-state'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Editor } from './Editor'
+import { ReactRenderer } from './ReactRenderer'
+import { ReactNodeViewContext } from './useReactNodeView'
+
+interface ReactNodeViewRendererOptions {
+  stopEvent: ((event: Event) => boolean) | null,
+  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+}
+
+class ReactNodeView implements NodeView {
+
+  renderer!: ReactRenderer
+
+  editor: Editor
+
+  extension!: Node
+
+  node!: ProseMirrorNode
+
+  decorations!: Decoration[]
+
+  getPos!: any
+
+  isDragging = false
+
+  options: ReactNodeViewRendererOptions = {
+    stopEvent: null,
+    update: null,
+  }
+
+  constructor(component: any, props: NodeViewRendererProps, options?: Partial<ReactNodeViewRendererOptions>) {
+    this.options = { ...this.options, ...options }
+    this.editor = props.editor as Editor
+    this.extension = props.extension
+    this.node = props.node
+    this.getPos = props.getPos
+    this.mount(component)
+  }
+
+  onDragStart(event: DragEvent) {
+    const { view } = this.editor
+    const target = (event.target as HTMLElement)
+
+    if (this.contentDOM?.contains(target)) {
+      return
+    }
+
+    // sometimes `event.target` is not the `dom` element
+    event.dataTransfer?.setDragImage(this.dom, 0, 0)
+
+    const selection = NodeSelection.create(view.state.doc, this.getPos())
+    const transaction = view.state.tr.setSelection(selection)
+
+    view.dispatch(transaction)
+  }
+
+  mount(Component: any) {
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      selected: false,
+      extension: this.extension,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+    }
+
+    if (!Component.displayName) {
+      const capitalizeFirstChar = (string: string): string => {
+        return string.charAt(0).toUpperCase() + string.substring(1)
+      }
+
+      Component.displayName = capitalizeFirstChar(this.extension.config.name)
+    }
+
+    const ReactNodeView: React.FunctionComponent = (props) => {
+      const [isEditable, setIsEditable] = useState(this.editor.isEditable)
+      const onDragStart = this.onDragStart.bind(this)
+      const onViewUpdate = () => {
+        setIsEditable(this.editor.isEditable)
+      }
+
+      useEffect(() => {
+        this.editor.on('viewUpdate', onViewUpdate)
+
+        return () => {
+          this.editor.off('viewUpdate', onViewUpdate)
+        }
+      }, [])
+
+      return (
+        <ReactNodeViewContext.Provider value={{ onDragStart, isEditable }}>
+          <Component {...props} />
+        </ReactNodeViewContext.Provider>
+      )
+    }
+
+    this.renderer = new ReactRenderer(ReactNodeView, {
+      editor: this.editor,
+      props,
+    })
+  }
+
+  get dom() {
+    if (!this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')) {
+      throw Error('Please use the ReactViewWrapper component for your node view.')
+    }
+
+    return this.renderer.element
+  }
+
+  get contentDOM() {
+    if (this.node.isLeaf) {
+      return null
+    }
+
+    const contentElement = this.dom.querySelector('[data-node-view-content]')
+
+    return contentElement || this.dom
+  }
+
+  stopEvent(event: Event) {
+    if (typeof this.options.stopEvent === 'function') {
+      return this.options.stopEvent(event)
+    }
+
+    const target = (event.target as HTMLElement)
+    const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
+
+    // ignore all events from child nodes
+    if (!isInElement) {
+      return false
+    }
+
+    const { isEditable } = this.editor
+    const { isDragging } = this
+    const isDraggable = !!this.node.type.spec.draggable
+    const isSelectable = NodeSelection.isSelectable(this.node)
+    const isCopyEvent = event.type === 'copy'
+    const isPasteEvent = event.type === 'paste'
+    const isCutEvent = event.type === 'cut'
+    const isClickEvent = event.type === 'mousedown'
+    const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
+
+    // ProseMirror tries to drag selectable nodes
+    // even if `draggable` is set to `false`
+    // this fix prevents that
+    if (!isDraggable && isSelectable && isDragEvent) {
+      event.preventDefault()
+    }
+
+    if (isDraggable && isDragEvent && !isDragging) {
+      event.preventDefault()
+      return false
+    }
+
+    // we have to store that dragging started
+    if (isDraggable && isEditable && !isDragging && isClickEvent) {
+      const dragHandle = target.closest('[data-drag-handle]')
+      const isValidDragHandle = dragHandle
+        && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
+
+      if (isValidDragHandle) {
+        this.isDragging = true
+        document.addEventListener('dragend', () => {
+          this.isDragging = false
+        }, { once: true })
+      }
+    }
+
+    // these events are handled by prosemirror
+    if (
+      isDragging
+      || isCopyEvent
+      || isPasteEvent
+      || isCutEvent
+      || (isClickEvent && isSelectable)
+    ) {
+      return false
+    }
+
+    return true
+  }
+
+  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+    if (mutation.type === 'selection') {
+      if (this.node.isLeaf) {
+        return true
+      }
+
+      return false
+    }
+
+    if (!this.contentDOM) {
+      return true
+    }
+
+    const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
+      || this.contentDOM === mutation.target
+
+    return contentDOMHasChanged
+  }
+
+  destroy() {
+    this.renderer.destroy()
+  }
+
+  update(node: ProseMirrorNode, decorations: Decoration[]) {
+    if (typeof this.options.update === 'function') {
+      return this.options.update(node, decorations)
+    }
+
+    if (node.type !== this.node.type) {
+      return false
+    }
+
+    if (node === this.node && this.decorations === decorations) {
+      return true
+    }
+
+    this.node = node
+    this.decorations = decorations
+    this.renderer.updateProps({ node, decorations })
+    this.renderer.render()
+
+    return true
+  }
+
+  updateAttributes(attributes: {}) {
+    if (!this.editor.view.editable) {
+      return
+    }
+
+    const { state } = this.editor.view
+    const pos = this.getPos()
+    const transaction = state.tr.setNodeMarkup(pos, undefined, {
+      ...this.node.attrs,
+      ...attributes,
+    })
+
+    this.editor.view.dispatch(transaction)
+  }
+
+  selectNode() {
+    this.renderer.updateProps({
+      selected: true,
+    })
+  }
+
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: false,
+    })
+  }
+}
+
+export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer {
+  return (props: NodeViewRendererProps) => {
+    // try to get the parent component
+    // this is important for vue devtools to show the component hierarchy correctly
+    // maybe it’s `undefined` because <editor-content> isn’t rendered yet
+    if (!(props.editor as Editor).contentComponent) {
+      return {}
+    }
+
+    return new ReactNodeView(component, props, options) as NodeView
+  }
+}

packages/react/src/ReactRenderer.ts

@@ -1,58 +0,0 @@
-// // @ts-nocheck
-
-// import React from 'react'
-// import { render, unmountComponentAtNode } from 'react-dom'
-
-// import { Editor } from './Editor'
-
-// export interface VueRendererOptions {
-//   as?: string;
-//   editor: Editor;
-//   props?: { [key: string]: any };
-// }
-
-// export class ReactRenderer {
-//   id: string
-
-//   editor: Editor
-
-//   component: any
-
-//   teleportElement: Element
-
-//   element: Element
-
-//   props: { [key: string]: any }
-
-//   constructor(component: any, { props = {}, editor }: VueRendererOptions) {
-//     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
-//     this.component = component
-//     this.editor = editor
-//     this.props = props
-
-//     this.teleportElement = document.createElement('div')
-//     // this.teleportElement.setAttribute('data-bla', '')
-//     // render(React.createElement(component), this.teleportElement)
-//     // render(React.createElement(component), this.teleportElement)
-//     this.render()
-//     // this.element = this.teleportElement.firstElementChild as Element
-//     this.element = this.teleportElement
-//   }
-
-//   render() {
-//     render(React.createElement(this.component), this.teleportElement)
-//   }
-
-//   updateProps(props: { [key: string]: any } = {}) {
-//     // TODO
-//   }
-
-//   destroy() {
-//     // TODO
-//     // console.log('DESTROY', { bla: this.teleportElement })
-//     // console.log(document.querySelector('[data-bla]'))
-//     unmountComponentAtNode(this.teleportElement)
-//     // unmountComponentAtNode(document.querySelector('[data-bla]'))
-//   }
-
-// }

packages/react/src/ReactRenderer.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { AnyObject } from '@tiptap/core'
+import { Editor } from './Editor'
+
+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 {
+  id: string
+
+  editor: Editor
+
+  component: any
+
+  element: Element
+
+  props: AnyObject
+
+  reactElement: React.ReactNode
+
+  ref: React.Component | null = null
+
+  constructor(component: React.Component | React.FunctionComponent, { props = {}, editor }: ReactRendererOptions) {
+    this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
+    this.component = component
+    this.editor = editor
+    this.props = props
+    this.element = document.createElement('div')
+    this.element.classList.add('react-renderer')
+    this.render()
+  }
+
+  render(): void {
+    const Component = this.component
+    const props = this.props
+
+    if (isClassComponent(Component)) {
+      props.ref = (ref: React.Component) => this.ref = ref
+    }
+
+    this.reactElement = <Component {...props } />
+
+    if (this.editor?.contentComponent) {
+      this.editor.contentComponent.setState({
+        renderers: this.editor.contentComponent.state.renderers.set(
+          this.id,
+          this,
+        ),
+      })
+    }
+  }
+
+  updateProps(props: AnyObject = {}): void {
+    this.props = {
+      ...this.props,
+      ...props,
+    }
+
+    this.render()
+  }
+
+  destroy(): void {
+    if (this.editor?.contentComponent) {
+      const { renderers } = this.editor.contentComponent.state
+
+      renderers.delete(this.id)
+
+      this.editor.contentComponent.setState({
+        renderers,
+      })
+    }
+  }
+}

packages/react/src/index.ts

@@ -1,7 +1,8 @@
-// @ts-nocheck
 export * from '@tiptap/core'
 export { Editor } from './Editor'
 export * from './useEditor'
-// export * from './ReactRenderer'
-// export * from './ReactNodeViewRenderer'
+export * from './ReactRenderer'
+export * from './ReactNodeViewRenderer'
 export * from './EditorContent'
+export * from './NodeViewWrapper'
+export * from './NodeViewContent'

packages/react/src/useReactNodeView.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react'
+
+export interface ReactNodeViewContextProps {
+  isEditable: boolean,
+  onDragStart: (event: DragEvent) => void,
+}
+
+export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({
+  isEditable: undefined,
+  onDragStart: undefined,
+})
+
+export const useReactNodeView = () => useContext(ReactNodeViewContext)

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -106,9 +106,7 @@ class VueNodeView implements NodeView {
   }
 
   get contentDOM() {
-    const hasContent = !this.node.type.isAtom
-
-    if (!hasContent) {
+    if (this.node.isLeaf) {
       return null
     }
 

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()
   }
 }

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -107,9 +107,7 @@ class VueNodeView implements NodeView {
   }
 
   get contentDOM() {
-    const hasContent = !this.node.type.isAtom
-
-    if (!hasContent) {
+    if (this.node.isLeaf) {
       return null
     }
 

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 };
+  editor: Editor,
+  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]) => {