@blockslides/vue-3 0.2.0

package/src/VueNodeViewRenderer.ts

@@ -0,0 +1,317 @@
+/* eslint-disable no-underscore-dangle */
+import type { DecorationWithType, NodeViewProps, NodeViewRenderer, NodeViewRendererOptions } from '@blockslides/core'
+import { NodeView } from '@blockslides/core'
+import type { Node as ProseMirrorNode } from '@blockslides/pm/model'
+import type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@blockslides/pm/view'
+import type { Component, PropType, Ref } from 'vue'
+import { defineComponent, provide, ref } from 'vue'
+
+import type { Editor } from './Editor.js'
+import { VueRenderer } from './VueRenderer.js'
+
+export const nodeViewProps = {
+  editor: {
+    type: Object as PropType<NodeViewProps['editor']>,
+    required: true as const,
+  },
+  node: {
+    type: Object as PropType<NodeViewProps['node']>,
+    required: true as const,
+  },
+  decorations: {
+    type: Object as PropType<NodeViewProps['decorations']>,
+    required: true as const,
+  },
+  selected: {
+    type: Boolean as PropType<NodeViewProps['selected']>,
+    required: true as const,
+  },
+  extension: {
+    type: Object as PropType<NodeViewProps['extension']>,
+    required: true as const,
+  },
+  getPos: {
+    type: Function as PropType<NodeViewProps['getPos']>,
+    required: true as const,
+  },
+  updateAttributes: {
+    type: Function as PropType<NodeViewProps['updateAttributes']>,
+    required: true as const,
+  },
+  deleteNode: {
+    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
+      }) => boolean)
+    | null
+}
+
+class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions> {
+  renderer!: VueRenderer
+
+  decorationClasses!: Ref<string>
+
+  private cachedExtensionWithSyncedStorage: NodeViewProps['extension'] | null = null
+
+  /**
+   * Returns a proxy of the extension that redirects storage access to the editor's mutable storage.
+   * This preserves the original prototype chain (instanceof checks, methods like configure/extend work).
+   * Cached to avoid proxy creation on every update.
+   */
+  get extensionWithSyncedStorage(): NodeViewProps['extension'] {
+    if (!this.cachedExtensionWithSyncedStorage) {
+      const editor = this.editor
+      const extension = this.extension
+
+      this.cachedExtensionWithSyncedStorage = new Proxy(extension, {
+        get(target, prop, receiver) {
+          if (prop === 'storage') {
+            return editor.storage[extension.name as keyof typeof editor.storage] ?? {}
+          }
+          return Reflect.get(target, prop, receiver)
+        },
+      })
+    }
+
+    return this.cachedExtensionWithSyncedStorage
+  }
+
+  mount() {
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations as DecorationWithType[],
+      innerDecorations: this.innerDecorations,
+      view: this.view,
+      selected: false,
+      extension: this.extensionWithSyncedStorage,
+      HTMLAttributes: this.HTMLAttributes,
+      getPos: () => this.getPos(),
+      updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
+    } satisfies NodeViewProps
+
+    const onDragStart = this.onDragStart.bind(this)
+
+    this.decorationClasses = ref(this.getDecorationClasses())
+
+    const extendedComponent = defineComponent({
+      extends: { ...this.component },
+      props: Object.keys(props),
+      template: (this.component as any).template,
+      setup: reactiveProps => {
+        provide('onDragStart', onDragStart)
+        provide('decorationClasses', this.decorationClasses)
+
+        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,
+      // add support for vue devtools
+      // @ts-ignore
+      // eslint-disable-next-line
+      __name: this.component.__name,
+      // @ts-ignore
+      // eslint-disable-next-line
+      __file: this.component.__file,
+    })
+
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+
+    this.renderer = new VueRenderer(extendedComponent, {
+      editor: this.editor,
+      props,
+    })
+  }
+
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
+  get dom() {
+    if (!this.renderer.element || !this.renderer.element.hasAttribute('data-node-view-wrapper')) {
+      throw Error('Please use the NodeViewWrapper component for your node view.')
+    }
+
+    return this.renderer.element as HTMLElement
+  }
+
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
+  get contentDOM() {
+    if (this.node.isLeaf) {
+      return null
+    }
+
+    return this.dom.querySelector('[data-node-view-content]') as HTMLElement | null
+  }
+
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
+  handleSelectionUpdate() {
+    const { from, to } = this.editor.state.selection
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
+
+    if (from <= pos && to >= pos + this.node.nodeSize) {
+      if (this.renderer.props.selected) {
+        return
+      }
+
+      this.selectNode()
+    } else {
+      if (!this.renderer.props.selected) {
+        return
+      }
+
+      this.deselectNode()
+    }
+  }
+
+  /**
+   * On update, update the Vue component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
+    const rerenderComponent = (props?: Record<string, any>) => {
+      this.decorationClasses.value = this.getDecorationClasses()
+      this.renderer.updateProps(props)
+    }
+
+    if (typeof this.options.update === 'function') {
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+      const oldInnerDecorations = this.innerDecorations
+
+      this.node = node
+      this.decorations = decorations
+      this.innerDecorations = innerDecorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () =>
+          rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage }),
+      })
+    }
+
+    if (node.type !== this.node.type) {
+      return false
+    }
+
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
+      return true
+    }
+
+    this.node = node
+    this.decorations = decorations
+    this.innerDecorations = innerDecorations
+
+    rerenderComponent({ node, decorations, innerDecorations, extension: this.extensionWithSyncedStorage })
+
+    return true
+  }
+
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  selectNode() {
+    this.renderer.updateProps({
+      selected: true,
+    })
+    if (this.renderer.element) {
+      this.renderer.element.classList.add('ProseMirror-selectednode')
+    }
+  }
+
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: false,
+    })
+    if (this.renderer.element) {
+      this.renderer.element.classList.remove('ProseMirror-selectednode')
+    }
+  }
+
+  getDecorationClasses() {
+    return (
+      this.decorations
+        // @ts-ignore
+        .flatMap(item => item.type.attrs.class)
+        .join(' ')
+    )
+  }
+
+  destroy() {
+    this.renderer.destroy()
+    this.editor.off('selectionUpdate', this.handleSelectionUpdate)
+  }
+}
+
+export function VueNodeViewRenderer(
+  component: Component<NodeViewProps>,
+  options?: Partial<VueNodeViewRendererOptions>,
+): NodeViewRenderer {
+  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 ProseMirrorNodeView
+    }
+    // check for class-component and normalize if neccessary
+    const normalizedComponent =
+      typeof component === 'function' && '__vccOpts' in component ? (component.__vccOpts as Component) : component
+
+    return new VueNodeView(normalizedComponent, props, options)
+  }
+}

package/src/VueRenderer.ts

@@ -0,0 +1,104 @@
+import type { Editor } from '@blockslides/core'
+import type { Component, DefineComponent } from 'vue'
+import { h, markRaw, reactive, render } from 'vue'
+
+import type { Editor as ExtendedEditor } from './Editor.js'
+
+export interface VueRendererOptions {
+  editor: Editor
+  props?: Record<string, any>
+}
+
+type ExtendedVNode = ReturnType<typeof h> | null
+
+interface RenderedComponent {
+  vNode: ExtendedVNode
+  destroy: () => void
+  el: Element | null
+}
+
+/**
+ * This class is used to render Vue components inside the editor.
+ */
+export class VueRenderer {
+  renderedComponent!: RenderedComponent
+
+  editor: ExtendedEditor
+
+  component: Component
+
+  el: Element | null
+
+  props: Record<string, any>
+
+  /**
+   * Flag to track if the renderer has been destroyed, preventing queued or asynchronous renders from executing after teardown.
+   */
+  destroyed = false
+
+  constructor(component: Component, { props = {}, editor }: VueRendererOptions) {
+    this.editor = editor as ExtendedEditor
+    this.component = markRaw(component)
+    this.el = document.createElement('div')
+    this.props = reactive(props)
+    this.renderedComponent = this.renderComponent()
+  }
+
+  get element(): Element | null {
+    return this.renderedComponent.el
+  }
+
+  get ref(): any {
+    // Composition API
+    if (this.renderedComponent.vNode?.component?.exposed) {
+      return this.renderedComponent.vNode.component.exposed
+    }
+    // Option API
+    return this.renderedComponent.vNode?.component?.proxy
+  }
+
+  renderComponent() {
+    if (this.destroyed) {
+      return this.renderedComponent
+    }
+
+    let vNode: ExtendedVNode = h(this.component as DefineComponent, this.props)
+
+    if (this.editor.appContext) {
+      vNode.appContext = this.editor.appContext
+    }
+    if (typeof document !== 'undefined' && this.el) {
+      render(vNode, this.el)
+    }
+
+    const destroy = () => {
+      if (this.el) {
+        render(null, this.el)
+      }
+      this.el = null
+      vNode = null
+    }
+
+    return { vNode, destroy, el: this.el ? this.el.firstElementChild : null }
+  }
+
+  updateProps(props: Record<string, any> = {}): void {
+    if (this.destroyed) {
+      return
+    }
+
+    Object.entries(props).forEach(([key, value]) => {
+      this.props[key] = value
+    })
+    this.renderComponent()
+  }
+
+  destroy(): void {
+    if (this.destroyed) {
+      return
+    }
+
+    this.destroyed = true
+    this.renderedComponent.destroy()
+  }
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { Editor } from './Editor.js'
+export * from './EditorContent.js'
+export * from './NodeViewContent.js'
+export * from './NodeViewWrapper.js'
+export * from './useEditor.js'
+export * from './useSlideEditor.js'
+export { default as SlideEditor } from './SlideEditor.vue'
+export * from './VueMarkViewRenderer.js'
+export * from './VueNodeViewRenderer.js'
+export * from './VueRenderer.js'
+export * from '@blockslides/core'
+export * from './menus/index.js'

package/src/menus/BubbleMenu.ts

@@ -0,0 +1,111 @@
+import type { BubbleMenuPluginProps } from '@blockslides/extension-bubble-menu'
+import { BubbleMenuPlugin } from '@blockslides/extension-bubble-menu'
+import type { PropType } from 'vue'
+import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>
+
+export const BubbleMenu = defineComponent({
+  name: 'BubbleMenu',
+
+  inheritAttrs: false,
+
+  props: {
+    pluginKey: {
+      type: [String, Object] as PropType<BubbleMenuPluginProps['pluginKey']>,
+      default: 'bubbleMenu',
+    },
+
+    editor: {
+      type: Object as PropType<BubbleMenuPluginProps['editor']>,
+      required: true,
+    },
+
+    updateDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['updateDelay']>,
+      default: undefined,
+    },
+
+    resizeDelay: {
+      type: Number as PropType<BubbleMenuPluginProps['resizeDelay']>,
+      default: undefined,
+    },
+
+    options: {
+      type: Object as PropType<BubbleMenuPluginProps['options']>,
+      default: () => ({}),
+    },
+
+    appendTo: {
+      type: [Object, Function] as PropType<BubbleMenuPluginProps['appendTo']>,
+      default: undefined,
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<BubbleMenuPluginProps>['shouldShow'], null>>,
+      default: null,
+    },
+
+    getReferencedVirtualElement: {
+      type: Function as PropType<Exclude<Required<BubbleMenuPluginProps>['getReferencedVirtualElement'], null>>,
+      default: undefined,
+    },
+  },
+
+  setup(props, { slots, attrs }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      const {
+        editor,
+        options,
+        pluginKey,
+        resizeDelay,
+        appendTo,
+        shouldShow,
+        getReferencedVirtualElement,
+        updateDelay,
+      } = props
+
+      const el = root.value
+
+      if (!el) {
+        return
+      }
+
+      el.style.visibility = 'hidden'
+      el.style.position = 'absolute'
+
+      // Remove element from DOM; plugin will re-parent it when shown
+      el.remove()
+
+      nextTick(() => {
+        editor.registerPlugin(
+          BubbleMenuPlugin({
+            editor,
+            element: el,
+            options,
+            pluginKey,
+            resizeDelay,
+            appendTo,
+            shouldShow,
+            getReferencedVirtualElement,
+            updateDelay,
+          }),
+        )
+      })
+    })
+
+    onBeforeUnmount(() => {
+      const { pluginKey, editor } = props
+
+      editor.unregisterPlugin(pluginKey)
+    })
+
+    // Vue owns this element; attrs are applied reactively by Vue
+    // Plugin re-parents it when showing the menu
+    return () => h('div', { ref: root, ...attrs }, slots.default?.())
+  },
+}) as any

package/src/menus/BubbleMenuPreset.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { BubbleMenuPlugin, type BubbleMenuPluginProps } from '@blockslides/extension-bubble-menu'
+import { NodeSelection } from '@blockslides/pm/state'
+import {
+  type BubbleMenuPresetOptions,
+  buildMenuElement,
+  DEFAULT_ITEMS,
+  DEFAULT_COLOR_PALETTE,
+  DEFAULT_HIGHLIGHT_PALETTE,
+  DEFAULT_FONTS,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_ALIGNMENTS,
+} from '@blockslides/extension-bubble-menu-preset'
+import { isTextSelection, type Editor } from '@blockslides/core'
+
+export interface BubbleMenuPresetProps extends Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> {
+  editor: Editor
+  updateDelay?: number
+  resizeDelay?: number
+  appendTo?: HTMLElement | (() => HTMLElement)
+  shouldShow?: BubbleMenuPluginProps['shouldShow']
+  getReferencedVirtualElement?: () => any
+  options?: any
+}
+
+const props = withDefaults(defineProps<BubbleMenuPresetProps>(), {
+  injectStyles: true,
+})
+
+const pluginKey = 'bubbleMenuPreset'
+const menuEl = ref<HTMLElement | null>(null)
+let cleanup: (() => void) | undefined
+
+const setupBubbleMenu = () => {
+  const attachToEditor = props.editor
+
+  if (!attachToEditor || (attachToEditor as any).isDestroyed) {
+    return
+  }
+
+  // Cleanup previous instance if any
+  if (cleanup) {
+    cleanup()
+    cleanup = undefined
+  }
+
+  const { element, cleanup: elementCleanup } = buildMenuElement(attachToEditor, {
+    items: props.items ?? DEFAULT_ITEMS,
+    className: props.className ?? '',
+    injectStyles: props.injectStyles !== false,
+    textColors: props.textColors ?? DEFAULT_COLOR_PALETTE,
+    highlightColors: props.highlightColors ?? DEFAULT_HIGHLIGHT_PALETTE,
+    fonts: props.fonts ?? DEFAULT_FONTS,
+    fontSizes: props.fontSizes ?? DEFAULT_FONT_SIZES,
+    alignments: props.alignments ?? DEFAULT_ALIGNMENTS,
+    onTextAction: props.onTextAction,
+    onImageReplace: props.onImageReplace,
+  })
+
+  menuEl.value = element
+  cleanup = elementCleanup
+
+  const defaultShouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({ state, editor }) => {
+    const sel = state.selection
+    const imageSelection =
+      (sel instanceof NodeSelection && ['image', 'imageBlock'].includes((sel as any).node?.type?.name)) ||
+      editor.isActive('image') ||
+      editor.isActive('imageBlock')
+
+    if (imageSelection) return true
+    if (isTextSelection(sel) && !sel.empty && !imageSelection) return true
+    return false
+  }
+
+  const plugin = BubbleMenuPlugin({
+    editor: attachToEditor,
+    element,
+    updateDelay: props.updateDelay,
+    resizeDelay: props.resizeDelay,
+    appendTo: props.appendTo,
+    pluginKey,
+    shouldShow: props.shouldShow ?? defaultShouldShow,
+    getReferencedVirtualElement: props.getReferencedVirtualElement,
+    options: props.options,
+  })
+
+  attachToEditor.registerPlugin(plugin)
+}
+
+onMounted(() => {
+  setupBubbleMenu()
+})
+
+// Watch for prop changes and rebuild
+watch(
+  () => [
+    props.editor,
+    props.updateDelay,
+    props.resizeDelay,
+    props.appendTo,
+    props.shouldShow,
+    props.getReferencedVirtualElement,
+    props.options,
+    props.items,
+    props.className,
+    props.injectStyles,
+    props.textColors,
+    props.highlightColors,
+    props.fonts,
+    props.fontSizes,
+    props.alignments,
+    props.onTextAction,
+    props.onImageReplace,
+  ],
+  () => {
+    setupBubbleMenu()
+  }
+)
+
+onBeforeUnmount(() => {
+  if (props.editor) {
+    props.editor.unregisterPlugin(pluginKey)
+  }
+  if (cleanup) {
+    cleanup()
+  }
+  if (menuEl.value?.parentNode) {
+    menuEl.value.parentNode.removeChild(menuEl.value)
+  }
+})
+</script>
+
+<template>
+  <!-- Vue doesn't need portal here as buildMenuElement handles DOM placement -->
+  <div v-if="menuEl" style="display: none"></div>
+</template>