@tiptap/vue-3 3.0.0-next.3 → 3.0.0-next.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-3",
   "description": "Vue components for tiptap",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.5",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -14,9 +14,20 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./menus": {
+      "types": {
+        "import": "./dist/menus/index.d.ts",
+        "require": "./dist/menus/index.d.cts"
+      },
+      "import": "./dist/menus/index.js",
+      "require": "./dist/menus/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -27,19 +38,20 @@
     "src",
     "dist"
   ],
-  "dependencies": {
-    "@tiptap/extension-bubble-menu": "^3.0.0-next.3",
-    "@tiptap/extension-floating-menu": "^3.0.0-next.3"
-  },
   "devDependencies": {
-    "@tiptap/core": "^3.0.0-next.3",
-    "@tiptap/pm": "^3.0.0-next.3",
-    "vue": "^3.0.0"
+    "@tiptap/core": "^3.0.0-next.5",
+    "@tiptap/pm": "^3.0.0-next.5",
+    "vue": "^3.5.13"
+  },
+  "optionalDependencies": {
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.5",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.5"
   },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1",
-    "@tiptap/pm": "^3.0.0-next.1",
-    "vue": "^3.0.0"
+    "@tiptap/core": "^3.0.0-next.4",
+    "@tiptap/pm": "^3.0.0-next.4",
+    "vue": "^3.0.0",
+    "@floating-ui/dom": "^1.0.0"
   },
   "repository": {
     "type": "git",
@@ -48,6 +60,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

package/src/Editor.ts

@@ -1,14 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { Editor as CoreEditor, EditorOptions } from '@tiptap/core'
+import { Editor as CoreEditor, EditorOptions, Storage } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
-import {
-  AppContext,
-  ComponentInternalInstance,
-  ComponentPublicInstance,
-  customRef,
-  markRaw,
-  Ref,
-} from 'vue'
+import { AppContext, ComponentInternalInstance, ComponentPublicInstance, customRef, markRaw, Ref } from 'vue'
 
 function useDebouncedRef<T>(value: T) {
   return customRef<T>((track, trigger) => {
@@ -39,7 +32,7 @@ export type ContentComponent = ComponentInternalInstance & {
 export class Editor extends CoreEditor {
   private reactiveState: Ref<EditorState>
 
-  private reactiveExtensionStorage: Ref<Record<string, any>>
+  private reactiveExtensionStorage: Ref<Storage>
 
   public contentComponent: ContentComponent | null = null
 

package/src/EditorContent.ts

@@ -32,10 +32,11 @@ export const EditorContent = defineComponent({
 
       if (editor && editor.options.element && rootEl.value) {
         nextTick(() => {
-          if (!rootEl.value || !editor.options.element.firstChild) {
+          if (!rootEl.value || !editor.options.element?.firstChild) {
             return
           }
 
+          // TODO using the new editor.mount method might allow us to remove this
           const element = unref(rootEl.value)
 
           rootEl.value.append(...editor.options.element.childNodes)
@@ -77,11 +78,10 @@ export const EditorContent = defineComponent({
   },
 
   render() {
-    return h(
-      'div',
-      {
-        ref: (el: any) => { this.rootEl = el },
+    return h('div', {
+      ref: (el: any) => {
+        this.rootEl = el
       },
-    )
+    })
   },
 })

package/src/VueMarkViewRenderer.ts

@@ -0,0 +1,112 @@
+/* eslint-disable no-underscore-dangle */
+import { MarkView, MarkViewProps, MarkViewRenderer, MarkViewRendererOptions } from '@tiptap/core'
+import { Component, defineComponent, h, PropType } from 'vue'
+
+import { Editor } from './Editor.js'
+import { VueRenderer } from './VueRenderer.js'
+
+export interface VueMarkViewRendererOptions extends MarkViewRendererOptions {
+  as?: string
+  className?: string
+  attrs?: { [key: string]: string }
+}
+
+export const markViewProps = {
+  editor: {
+    type: Object as PropType<MarkViewProps['editor']>,
+    required: true as const,
+  },
+  mark: {
+    type: Object as PropType<MarkViewProps['mark']>,
+    required: true as const,
+  },
+  extension: {
+    type: Object as PropType<MarkViewProps['extension']>,
+    required: true as const,
+  },
+  inline: {
+    type: Boolean as PropType<MarkViewProps['inline']>,
+    required: true as const,
+  },
+  view: {
+    type: Object as PropType<MarkViewProps['view']>,
+    required: true as const,
+  },
+}
+
+export const MarkViewContent = defineComponent({
+  name: 'MarkViewContent',
+
+  props: {
+    as: {
+      type: String,
+      default: 'span',
+    },
+  },
+
+  render() {
+    return h(this.as, {
+      style: {
+        whiteSpace: 'inherit',
+      },
+      'data-mark-view-content': '',
+    })
+  },
+})
+
+export class VueMarkView extends MarkView<Component, VueMarkViewRendererOptions> {
+  renderer: VueRenderer
+
+  constructor(component: Component, props: MarkViewProps, options?: Partial<VueMarkViewRendererOptions>) {
+    super(component, props, options)
+
+    // Create extended component with provide
+    const extendedComponent = defineComponent({
+      extends: { ...component },
+      props: Object.keys(props),
+      template: (this.component as any).template,
+      setup: reactiveProps => {
+        return (component as any).setup?.(reactiveProps, {
+          expose: () => undefined,
+        })
+      },
+      // Add support for scoped styles
+      __scopeId: (component as any).__scopeId,
+      __cssModules: (component as any).__cssModules,
+      __name: (component as any).__name,
+      __file: (component as any).__file,
+    })
+    this.renderer = new VueRenderer(extendedComponent, {
+      editor: this.editor,
+      props,
+    })
+  }
+
+  get dom() {
+    return this.renderer.element as HTMLElement
+  }
+
+  get contentDOM() {
+    return this.dom.querySelector('[data-mark-view-content]') as HTMLElement | null
+  }
+
+  destroy() {
+    this.renderer.destroy()
+  }
+}
+
+export function VueMarkViewRenderer(
+  component: Component,
+  options: Partial<VueMarkViewRendererOptions> = {},
+): MarkViewRenderer {
+  return props => {
+    // 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 {} as unknown as MarkView<any, any>
+    }
+
+    return new VueMarkView(component, props, options)
+  }
+}

package/src/VueNodeViewRenderer.ts

@@ -1,16 +1,8 @@
 /* eslint-disable no-underscore-dangle */
-import {
-  DecorationWithType,
-  NodeView,
-  NodeViewProps,
-  NodeViewRenderer,
-  NodeViewRendererOptions,
-} from '@tiptap/core'
+import { DecorationWithType, NodeView, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@tiptap/core'
 import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
-import {
-  Component, defineComponent, PropType, provide, Ref, ref,
-} from 'vue'
+import { Component, defineComponent, PropType, provide, Ref, ref } from 'vue'
 
 import { Editor } from './Editor.js'
 import { VueRenderer } from './VueRenderer.js'
@@ -48,20 +40,32 @@ export const nodeViewProps = {
     type: Function as PropType<NodeViewProps['deleteNode']>,
     required: true as const,
   },
+  view: {
+    type: Object as PropType<NodeViewProps['view']>,
+    required: true as const,
+  },
+  innerDecorations: {
+    type: Object as PropType<NodeViewProps['innerDecorations']>,
+    required: true as const,
+  },
+  HTMLAttributes: {
+    type: Object as PropType<NodeViewProps['HTMLAttributes']>,
+    required: true as const,
+  },
 }
 
 export interface VueNodeViewRendererOptions extends NodeViewRendererOptions {
   update:
     | ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: readonly Decoration[];
-        oldInnerDecorations: DecorationSource;
-        newNode: ProseMirrorNode;
-        newDecorations: readonly Decoration[];
-        innerDecorations: DecorationSource;
-        updateProps: () => void;
+        oldNode: ProseMirrorNode
+        oldDecorations: readonly Decoration[]
+        oldInnerDecorations: DecorationSource
+        newNode: ProseMirrorNode
+        newDecorations: readonly Decoration[]
+        innerDecorations: DecorationSource
+        updateProps: () => void
       }) => boolean)
-    | null;
+    | null
 }
 
 class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions> {
@@ -181,11 +185,7 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
    * On update, update the React component.
    * To prevent unnecessary updates, the `update` option can be used.
    */
-  update(
-    node: ProseMirrorNode,
-    decorations: readonly Decoration[],
-    innerDecorations: DecorationSource,
-  ): boolean {
+  update(node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
     const rerenderComponent = (props?: Record<string, any>) => {
       this.decorationClasses.value = this.getDecorationClasses()
       this.renderer.updateProps(props)
@@ -282,9 +282,8 @@ export function VueNodeViewRenderer(
       return {} as unknown as ProseMirrorNodeView
     }
     // check for class-component and normalize if neccessary
-    const normalizedComponent = typeof component === 'function' && '__vccOpts' in component
-      ? (component.__vccOpts as Component)
-      : component
+    const normalizedComponent =
+      typeof component === 'function' && '__vccOpts' in component ? (component.__vccOpts as Component) : component
 
     return new VueNodeView(normalizedComponent, props, options)
   }

package/src/VueRenderer.ts

@@ -1,21 +1,19 @@
 import { Editor } from '@tiptap/core'
-import {
-  Component, DefineComponent, h, markRaw, reactive, render,
-} from 'vue'
+import { Component, DefineComponent, h, markRaw, reactive, render } from 'vue'
 
 import { Editor as ExtendedEditor } from './Editor.js'
 
 export interface VueRendererOptions {
-  editor: Editor;
-  props?: Record<string, any>;
+  editor: Editor
+  props?: Record<string, any>
 }
 
-type ExtendedVNode = ReturnType<typeof h> | null;
+type ExtendedVNode = ReturnType<typeof h> | null
 
 interface RenderedComponent {
-  vNode: ExtendedVNode;
-  destroy: () => void;
-  el: Element | null;
+  vNode: ExtendedVNode
+  destroy: () => void
+  el: Element | null
 }
 
 /**

package/src/index.ts

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

package/src/{BubbleMenu.ts → menus/BubbleMenu.ts}

@@ -1,13 +1,5 @@
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
-import {
-  defineComponent,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  ref,
-  Teleport,
-} from 'vue'
+import { defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, Teleport } from 'vue'
 
 export const BubbleMenu = defineComponent({
   name: 'BubbleMenu',
@@ -48,14 +40,7 @@ export const BubbleMenu = defineComponent({
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
-      const {
-        editor,
-        options,
-        pluginKey,
-        resizeDelay,
-        shouldShow,
-        updateDelay,
-      } = props
+      const { editor, options, pluginKey, resizeDelay, shouldShow, updateDelay } = props
 
       if (!root.value) {
         return
@@ -67,15 +52,17 @@ export const BubbleMenu = defineComponent({
       // remove the element from the DOM
       root.value.remove()
 
-      editor.registerPlugin(BubbleMenuPlugin({
-        editor,
-        element: root.value as HTMLElement,
-        options,
-        pluginKey,
-        resizeDelay,
-        shouldShow,
-        updateDelay,
-      }))
+      editor.registerPlugin(
+        BubbleMenuPlugin({
+          editor,
+          element: root.value as HTMLElement,
+          options,
+          pluginKey,
+          resizeDelay,
+          shouldShow,
+          updateDelay,
+        }),
+      )
     })
 
     onBeforeUnmount(() => {

package/src/{FloatingMenu.ts → menus/FloatingMenu.ts}

@@ -1,14 +1,5 @@
-import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
-import {
-  defineComponent,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  ref,
-  Teleport,
-} from 'vue'
+import { defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, Teleport } from 'vue'
 
 export const FloatingMenu = defineComponent({
   name: 'FloatingMenu',
@@ -27,7 +18,7 @@ export const FloatingMenu = defineComponent({
     },
 
     options: {
-      type: Object as PropType<BubbleMenuPluginProps['options']>,
+      type: Object as PropType<FloatingMenuPluginProps['options']>,
       default: () => ({}),
     },
 
@@ -41,12 +32,7 @@ export const FloatingMenu = defineComponent({
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
-      const {
-        pluginKey,
-        editor,
-        options,
-        shouldShow,
-      } = props
+      const { pluginKey, editor, options, shouldShow } = props
 
       if (!root.value) {
         return
@@ -58,13 +44,15 @@ export const FloatingMenu = defineComponent({
       // remove the element from the DOM
       root.value.remove()
 
-      editor.registerPlugin(FloatingMenuPlugin({
-        pluginKey,
-        editor,
-        element: root.value as HTMLElement,
-        options,
-        shouldShow,
-      }))
+      editor.registerPlugin(
+        FloatingMenuPlugin({
+          pluginKey,
+          editor,
+          element: root.value as HTMLElement,
+          options,
+          shouldShow,
+        }),
+      )
     })
 
     onBeforeUnmount(() => {

package/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'