@tiptap/vue-3 2.0.0-beta.21 → 2.0.0-beta.211

package/src/Editor.ts

@@ -1,13 +1,14 @@
-import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { Editor as CoreEditor, EditorOptions } from '@tiptap/core'
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
 import {
-  markRaw,
-  Ref,
-  customRef,
   ComponentInternalInstance,
   ComponentPublicInstance,
+  customRef,
+  markRaw,
   reactive,
+  Ref,
 } from 'vue'
+
 import { VueRenderer } from './VueRenderer'
 
 function useDebouncedRef<T>(value: T) {
@@ -33,12 +34,14 @@ function useDebouncedRef<T>(value: T) {
 }
 
 export type ContentComponent = ComponentInternalInstance & {
-  ctx: ComponentPublicInstance,
+  ctx: ComponentPublicInstance
 }
 
 export class Editor extends CoreEditor {
   private reactiveState: Ref<EditorState>
 
+  private reactiveExtensionStorage: Ref<Record<string, any>>
+
   public vueRenderers = reactive<Map<string, VueRenderer>>(new Map())
 
   public contentComponent: ContentComponent | null = null
@@ -47,24 +50,31 @@ export class Editor extends CoreEditor {
     super(options)
 
     this.reactiveState = useDebouncedRef(this.view.state)
+    this.reactiveExtensionStorage = useDebouncedRef(this.extensionStorage)
 
     this.on('transaction', () => {
       this.reactiveState.value = this.view.state
+      this.reactiveExtensionStorage.value = this.extensionStorage
     })
 
-    return markRaw(this)
+    return markRaw(this) // eslint-disable-line
   }
 
   get state() {
-    return this.reactiveState
-      ? this.reactiveState.value
-      : this.view.state
+    return this.reactiveState ? this.reactiveState.value : this.view.state
+  }
+
+  get storage() {
+    return this.reactiveExtensionStorage ? this.reactiveExtensionStorage.value : super.storage
   }
 
   /**
    * Register a ProseMirror plugin.
    */
-  public registerPlugin(plugin: Plugin, handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[]): void {
+  public registerPlugin(
+    plugin: Plugin,
+    handlePlugins?: (newPlugin: Plugin, plugins: Plugin[]) => Plugin[],
+  ): void {
     super.registerPlugin(plugin, handlePlugins)
     this.reactiveState.value = this.view.state
   }

package/src/EditorContent.ts

@@ -1,17 +1,18 @@
 import {
+  DefineComponent,
+  defineComponent,
+  getCurrentInstance,
   h,
-  ref,
+  nextTick,
+  onBeforeUnmount,
+  PropType,
   Ref,
-  unref,
+  ref,
   Teleport,
-  PropType,
-  defineComponent,
-  DefineComponent,
+  unref,
   watchEffect,
-  nextTick,
-  onBeforeUnmount,
-  getCurrentInstance,
 } from 'vue'
+
 import { Editor } from './Editor'
 
 export const EditorContent = defineComponent({
@@ -39,7 +40,7 @@ export const EditorContent = defineComponent({
 
           const element = unref(rootEl.value)
 
-          rootEl.value.appendChild(editor.options.element.firstChild)
+          rootEl.value.append(...editor.options.element.childNodes)
 
           // @ts-ignore
           editor.contentComponent = instance.ctx._
@@ -56,6 +57,10 @@ export const EditorContent = defineComponent({
     onBeforeUnmount(() => {
       const editor = props.editor
 
+      if (!editor) {
+        return
+      }
+
       // destroy nodeviews before vue removes dom element
       if (!editor.isDestroyed) {
         editor.view.setProps({
@@ -71,7 +76,7 @@ export const EditorContent = defineComponent({
 
       const newElement = document.createElement('div')
 
-      newElement.appendChild(editor.options.element.firstChild)
+      newElement.append(...editor.options.element.childNodes)
 
       editor.setOptions({
         element: newElement,

package/src/FloatingMenu.ts

@@ -1,39 +1,64 @@
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 import {
+  defineComponent,
   h,
-  ref,
-  PropType,
-  onMounted,
   onBeforeUnmount,
-  defineComponent,
+  onMounted,
+  PropType,
+  ref,
 } from 'vue'
-import {
-  FloatingMenuPlugin,
-  FloatingMenuPluginKey,
-  FloatingMenuPluginProps,
-} from '@tiptap/extension-floating-menu'
 
 export const FloatingMenu = defineComponent({
   name: 'FloatingMenu',
 
   props: {
+    pluginKey: {
+      // TODO: TypeScript breaks :(
+      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
+      type: null,
+      default: 'floatingMenu',
+    },
+
     editor: {
       type: Object as PropType<FloatingMenuPluginProps['editor']>,
       required: true,
     },
+
+    tippyOptions: {
+      type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
+      default: () => ({}),
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<FloatingMenuPluginProps>['shouldShow'], null>>,
+      default: null,
+    },
   },
 
-  setup({ editor }, { slots }) {
+  setup(props, { slots }) {
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
+      const {
+        pluginKey,
+        editor,
+        tippyOptions,
+        shouldShow,
+      } = props
+
       editor.registerPlugin(FloatingMenuPlugin({
+        pluginKey,
         editor,
         element: root.value as HTMLElement,
+        tippyOptions,
+        shouldShow,
       }))
     })
 
     onBeforeUnmount(() => {
-      editor.unregisterPlugin(FloatingMenuPluginKey)
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey)
     })
 
     return () => h('div', { ref: root }, slots.default?.())

package/src/NodeViewContent.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 
 export const NodeViewContent = defineComponent({
   props: {
@@ -9,13 +9,11 @@ export const NodeViewContent = defineComponent({
   },
 
   render() {
-    return h(
-      this.as, {
-        style: {
-          whiteSpace: 'pre-wrap',
-        },
-        'data-node-view-content': '',
+    return h(this.as, {
+      style: {
+        whiteSpace: 'pre-wrap',
       },
-    )
+      'data-node-view-content': '',
+    })
   },
 })

package/src/NodeViewWrapper.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 
 export const NodeViewWrapper = defineComponent({
   props: {
@@ -12,15 +12,16 @@ export const NodeViewWrapper = defineComponent({
 
   render() {
     return h(
-      this.as, {
+      this.as,
+      {
         // @ts-ignore
-        class: this.decorationClasses.value,
+        class: this.decorationClasses,
         style: {
           whiteSpace: 'normal',
         },
         'data-node-view-wrapper': '',
         // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
-        onDragStart: this.onDragStart,
+        onDragstart: this.onDragStart,
       },
       this.$slots.default?.(),
     )

package/src/VueNodeViewRenderer.ts

@@ -2,59 +2,71 @@ import {
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
+  NodeViewRendererOptions,
   NodeViewRendererProps,
 } from '@tiptap/core'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import {
-  ref,
-  Ref,
-  provide,
-  PropType,
   Component,
   defineComponent,
+  PropType,
+  provide,
+  Ref,
+  ref,
 } from 'vue'
-import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
-import { Node as ProseMirrorNode } from 'prosemirror-model'
+
 import { Editor } from './Editor'
 import { VueRenderer } from './VueRenderer'
 
 export const nodeViewProps = {
   editor: {
     type: Object as PropType<NodeViewProps['editor']>,
-    required: true,
+    required: true as const,
   },
   node: {
     type: Object as PropType<NodeViewProps['node']>,
-    required: true,
+    required: true as const,
   },
   decorations: {
     type: Object as PropType<NodeViewProps['decorations']>,
-    required: true,
+    required: true as const,
   },
   selected: {
     type: Boolean as PropType<NodeViewProps['selected']>,
-    required: true,
+    required: true as const,
   },
   extension: {
     type: Object as PropType<NodeViewProps['extension']>,
-    required: true,
+    required: true as const,
   },
   getPos: {
     type: Function as PropType<NodeViewProps['getPos']>,
-    required: true,
+    required: true as const,
   },
   updateAttributes: {
     type: Function as PropType<NodeViewProps['updateAttributes']>,
-    required: true,
+    required: true as const,
+  },
+  deleteNode: {
+    type: Function as PropType<NodeViewProps['deleteNode']>,
+    required: true as const,
   },
 }
 
-interface VueNodeViewRendererOptions {
-  stopEvent: ((event: Event) => boolean) | null,
-  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
+  update:
+    | ((props: {
+        oldNode: ProseMirrorNode
+        oldDecorations: Decoration[]
+        newNode: ProseMirrorNode
+        newDecorations: Decoration[]
+        updateProps: () => void
+      }) => boolean)
+    | null
 }
 
-class VueNodeView extends NodeView<Component, Editor> {
-
+class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions> {
   renderer!: VueRenderer
 
   decorationClasses!: Ref<string>
@@ -68,6 +80,7 @@ class VueNodeView extends NodeView<Component, Editor> {
       extension: this.extension,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
     }
 
     const onDragStart = this.onDragStart.bind(this)
@@ -77,12 +90,23 @@ class VueNodeView extends NodeView<Component, Editor> {
     const extendedComponent = defineComponent({
       extends: { ...this.component },
       props: Object.keys(props),
-      setup: () => {
+      template: (this.component as any).template,
+      setup: reactiveProps => {
         provide('onDragStart', onDragStart)
         provide('decorationClasses', this.decorationClasses)
 
-        return (this.component as any).setup?.(props)
+        return (this.component as any).setup?.(reactiveProps, {
+          expose: () => undefined,
+        })
       },
+      // add support for scoped styles
+      // @ts-ignore
+      // eslint-disable-next-line
+      __scopeId: this.component.__scopeId,
+      // add support for CSS Modules
+      // @ts-ignore
+      // eslint-disable-next-line
+      __cssModules: this.component.__cssModules,
     })
 
     this.renderer = new VueRenderer(extendedComponent, {
@@ -96,7 +120,7 @@ class VueNodeView extends NodeView<Component, Editor> {
       throw Error('Please use the NodeViewWrapper component for your node view.')
     }
 
-    return this.renderer.element
+    return this.renderer.element as HTMLElement
   }
 
   get contentDOM() {
@@ -106,12 +130,29 @@ class VueNodeView extends NodeView<Component, Editor> {
 
     const contentElement = this.dom.querySelector('[data-node-view-content]')
 
-    return contentElement || this.dom
+    return (contentElement || this.dom) as HTMLElement | null
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {
+    const updateProps = (props?: Record<string, any>) => {
+      this.decorationClasses.value = this.getDecorationClasses()
+      this.renderer.updateProps(props)
+    }
+
     if (typeof this.options.update === 'function') {
-      return this.options.update(node, decorations)
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+
+      this.node = node
+      this.decorations = decorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps: () => updateProps({ node, decorations }),
+      })
     }
 
     if (node.type !== this.node.type) {
@@ -124,8 +165,8 @@ class VueNodeView extends NodeView<Component, Editor> {
 
     this.node = node
     this.decorations = decorations
-    this.decorationClasses.value = this.getDecorationClasses()
-    this.renderer.updateProps({ node, decorations })
+
+    updateProps({ node, decorations })
 
     return true
   }
@@ -143,20 +184,24 @@ class VueNodeView extends NodeView<Component, Editor> {
   }
 
   getDecorationClasses() {
-    return this.decorations
-      // @ts-ignore
-      .map(item => item.type.attrs.class)
-      .flat()
-      .join(' ')
+    return (
+      this.decorations
+        // @ts-ignore
+        .map(item => item.type.attrs.class)
+        .flat()
+        .join(' ')
+    )
   }
 
   destroy() {
     this.renderer.destroy()
   }
-
 }
 
-export function VueNodeViewRenderer(component: Component, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer {
+export function VueNodeViewRenderer(
+  component: Component,
+  options?: Partial<VueNodeViewRendererOptions>,
+): NodeViewRenderer {
   return (props: NodeViewRendererProps) => {
     // try to get the parent component
     // this is important for vue devtools to show the component hierarchy correctly
@@ -165,6 +210,6 @@ export function VueNodeViewRenderer(component: Component, options?: Partial<VueN
       return {}
     }
 
-    return new VueNodeView(component, props, options) as ProseMirrorNodeView
+    return new VueNodeView(component, props, options) as unknown as ProseMirrorNodeView
   }
 }

package/src/VueRenderer.ts

@@ -1,16 +1,17 @@
-import { reactive, markRaw, Component } from 'vue'
-import { AnyObject } from '@tiptap/core'
-import { Editor } from './Editor'
+import { Editor } from '@tiptap/core'
+import { Component, markRaw, reactive } from 'vue'
+
+import { Editor as ExtendedEditor } from './Editor'
 
 export interface VueRendererOptions {
   editor: Editor,
-  props?: AnyObject,
+  props?: Record<string, any>,
 }
 
 export class VueRenderer {
   id: string
 
-  editor: Editor
+  editor: ExtendedEditor
 
   component: Component
 
@@ -18,11 +19,11 @@ export class VueRenderer {
 
   element: Element
 
-  props: AnyObject
+  props: Record<string, any>
 
   constructor(component: Component, { props = {}, editor }: VueRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
-    this.editor = editor
+    this.editor = editor as ExtendedEditor
     this.component = markRaw(component)
     this.teleportElement = document.createElement('div')
     this.element = this.teleportElement
@@ -41,10 +42,10 @@ export class VueRenderer {
   }
 
   get ref(): any {
-    return this.editor.contentComponent?.ctx.$refs[this.id]
+    return this.editor.contentComponent?.refs[this.id]
   }
 
-  updateProps(props: AnyObject = {}): void {
+  updateProps(props: Record<string, any> = {}): void {
     Object
       .entries(props)
       .forEach(([key, value]) => {

package/src/index.ts

@@ -1,10 +1,10 @@
-export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
 export * from './FloatingMenu'
+export * from './NodeViewContent'
+export * from './NodeViewWrapper'
 export * from './useEditor'
-export * from './VueRenderer'
 export * from './VueNodeViewRenderer'
-export * from './NodeViewWrapper'
-export * from './NodeViewContent'
+export * from './VueRenderer'
+export * from '@tiptap/core'

package/src/useEditor.ts

@@ -1,9 +1,10 @@
-import { onMounted, onBeforeUnmount, ref } from 'vue'
 import { EditorOptions } from '@tiptap/core'
+import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+
 import { Editor } from './Editor'
 
 export const useEditor = (options: Partial<EditorOptions> = {}) => {
-  const editor = ref<Editor>()
+  const editor = shallowRef<Editor>()
 
   onMounted(() => {
     editor.value = new Editor(options)