@blockslides/vue-3 0.2.0

package/dist/menus/BubbleMenu.d.ts

@@ -0,0 +1,6 @@
+import { BubbleMenuPluginProps } from '../../../extension-bubble-menu/src';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>;
+export declare const BubbleMenu: any;
+export {};

package/dist/menus/FloatingMenu.d.ts

@@ -0,0 +1,6 @@
+import { FloatingMenuPluginProps } from '../../../extension-floating-menu/src';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'>;
+export declare const FloatingMenu: any;
+export {};

package/dist/menus/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BubbleMenu.js';
+export * from './FloatingMenu.js';
+export { default as BubbleMenuPreset } from './BubbleMenuPreset.vue';

package/dist/menus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FloatingMenu-By8Qi7tW.cjs");exports.BubbleMenu=e.BubbleMenu;exports.BubbleMenuPreset=e._sfc_main;exports.FloatingMenu=e.FloatingMenu;

package/dist/menus.d.ts

@@ -0,0 +1 @@
+export * from './menus/index'

package/dist/menus.js

@@ -0,0 +1,6 @@
+import { B as a, _ as b, F as n } from "./FloatingMenu-BKkixozS.js";
+export {
+  a as BubbleMenu,
+  b as BubbleMenuPreset,
+  n as FloatingMenu
+};

package/dist/useEditor.d.ts

@@ -0,0 +1,4 @@
+import { EditorOptions } from '../../core/src';
+import { Editor } from './Editor.js';
+
+export declare const useEditor: (options?: Partial<EditorOptions>) => import('vue').ShallowRef<Editor | undefined, Editor | undefined>;

package/dist/useSlideEditor.d.ts

@@ -0,0 +1,36 @@
+import { templatesV1 } from '../../ai-context/src';
+import { AnyExtension, Editor, JSONContent, EditorOptions } from '../../core/src';
+import { ExtensionKitOptions } from '../../extension-kit/src';
+
+type PresetTemplates = ReturnType<typeof templatesV1.listPresetTemplates>;
+export interface UseSlideEditorProps extends Omit<Partial<EditorOptions>, 'extensions'> {
+    /**
+     * Initial content for the editor. If omitted, a single preset slide is used.
+     */
+    content?: EditorOptions['content'];
+    /**
+     * Called on every update with the current JSON document.
+     */
+    onChange?: (doc: JSONContent, editor: Editor) => void;
+    /**
+     * Additional extensions to append after the ExtensionKit bundle.
+     */
+    extensions?: AnyExtension[];
+    /**
+     * Customize or disable pieces of ExtensionKit (e.g., bubbleMenu: false).
+     */
+    extensionKitOptions?: ExtensionKitOptions;
+    /**
+     * Optional preset list to power the add-slide button.
+     */
+    presetTemplates?: PresetTemplates;
+    /**
+     * Called once when an editor instance is ready.
+     */
+    onEditorReady?: (editor: Editor) => void;
+}
+export declare const useSlideEditor: (props?: UseSlideEditorProps) => {
+    editor: import('vue').ShallowRef<import('./Editor.js').Editor | undefined, import('./Editor.js').Editor | undefined>;
+    presets: import('vue').ComputedRef<templatesV1.PresetTemplate[]>;
+};
+export {};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@blockslides/vue-3",
+  "description": "Vue 3 components for blockslides",
+  "version": "0.2.0",
+  "homepage": "https://github.com/keivanmojmali/blockslides",
+  "keywords": [
+    "blockslides",
+    "blockslides vue components",
+    "editor",
+    "wysiwyg"
+  ],
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "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",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "devDependencies": {
+    "@floating-ui/dom": "^1.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.5.13",
+    "@blockslides/core": "^0.3.2",
+    "@blockslides/pm": "^0.1.1"
+  },
+  "optionalDependencies": {
+    "@blockslides/extension-bubble-menu": "^0.1.1",
+    "@blockslides/extension-floating-menu": "^0.1.1"
+  },
+  "peerDependencies": {
+    "@floating-ui/dom": "^1.0.0",
+    "vue": "^3.0.0",
+    "@blockslides/core": "^0.3.2",
+    "@blockslides/pm": "^0.1.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/keivanmojmali/blockslides",
+    "directory": "packages/vue-3"
+  },
+  "sideEffects": false,
+  "author": "keivanmojmali",
+  "scripts": {
+    "build": "vite build",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
+  }
+}

package/src/Editor.ts

@@ -0,0 +1,93 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { EditorOptions, Storage } from '@blockslides/core'
+import { Editor as CoreEditor } from '@blockslides/core'
+import type { EditorState, Plugin, PluginKey } from '@blockslides/pm/state'
+import type { AppContext, ComponentInternalInstance, ComponentPublicInstance, Ref } from 'vue'
+import { customRef, markRaw } from 'vue'
+
+function useDebouncedRef<T>(value: T) {
+  return customRef<T>((track, trigger) => {
+    return {
+      get() {
+        track()
+        return value
+      },
+      set(newValue) {
+        // update state
+        value = newValue
+
+        // update view as soon as possible
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            trigger()
+          })
+        })
+      },
+    }
+  })
+}
+
+export type ContentComponent = ComponentInternalInstance & {
+  ctx: ComponentPublicInstance
+}
+
+export class Editor extends CoreEditor {
+  private reactiveState: Ref<EditorState>
+
+  private reactiveExtensionStorage: Ref<Storage>
+
+  public contentComponent: ContentComponent | null = null
+
+  public appContext: AppContext | null = null
+
+  constructor(options: Partial<EditorOptions> = {}) {
+    super(options)
+
+    this.reactiveState = useDebouncedRef(this.view.state)
+    this.reactiveExtensionStorage = useDebouncedRef(this.extensionStorage)
+
+    this.on('beforeTransaction', ({ nextState }) => {
+      this.reactiveState.value = nextState
+      this.reactiveExtensionStorage.value = this.extensionStorage
+    })
+
+    return markRaw(this) // eslint-disable-line
+  }
+
+  get 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[],
+  ): EditorState {
+    const nextState = super.registerPlugin(plugin, handlePlugins)
+
+    if (this.reactiveState) {
+      this.reactiveState.value = nextState
+    }
+
+    return nextState
+  }
+
+  /**
+   * Unregister a ProseMirror plugin.
+   */
+  public unregisterPlugin(nameOrPluginKey: string | PluginKey): EditorState | undefined {
+    const nextState = super.unregisterPlugin(nameOrPluginKey)
+
+    if (this.reactiveState && nextState) {
+      this.reactiveState.value = nextState
+    }
+
+    return nextState
+  }
+}

package/src/EditorContent.ts

@@ -0,0 +1,77 @@
+import type { PropType, Ref } from 'vue'
+import { defineComponent, getCurrentInstance, h, nextTick, onBeforeUnmount, ref, unref, watchEffect } from 'vue'
+
+import type { Editor } from './Editor.js'
+
+export const EditorContent = defineComponent({
+  name: 'EditorContent',
+
+  props: {
+    editor: {
+      default: null,
+      type: Object as PropType<Editor>,
+    },
+  },
+
+  setup(props) {
+    const rootEl: Ref<Element | undefined> = ref()
+    const instance = getCurrentInstance()
+
+    watchEffect(() => {
+      const editor = props.editor
+
+      if (editor && editor.options.element && rootEl.value) {
+        nextTick(() => {
+          if (!rootEl.value || !editor.view.dom?.parentNode) {
+            return
+          }
+
+          // TODO using the new editor.mount method might allow us to remove this
+          const element = unref(rootEl.value)
+
+          rootEl.value.append(...editor.view.dom.parentNode.childNodes)
+
+          // @ts-ignore
+          editor.contentComponent = instance.ctx._
+
+          if (instance) {
+            editor.appContext = {
+              ...instance.appContext,
+              // Vue internally uses prototype chain to forward/shadow injects across the entire component chain
+              // so don't use object spread operator or 'Object.assign' and just set `provides` as is on editor's appContext
+              // @ts-expect-error forward instance's 'provides' into appContext
+              provides: instance.provides,
+            }
+          }
+
+          editor.setOptions({
+            element,
+          })
+
+          editor.createNodeViews()
+        })
+      }
+    })
+
+    onBeforeUnmount(() => {
+      const editor = props.editor
+
+      if (!editor) {
+        return
+      }
+
+      editor.contentComponent = null
+      editor.appContext = null
+    })
+
+    return { rootEl }
+  },
+
+  render() {
+    return h('div', {
+      ref: (el: any) => {
+        this.rootEl = el
+      },
+    })
+  },
+})

package/src/NodeViewContent.ts

@@ -0,0 +1,21 @@
+import { defineComponent, h } from 'vue'
+
+export const NodeViewContent = defineComponent({
+  name: 'NodeViewContent',
+
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  render() {
+    return h(this.as, {
+      style: {
+        whiteSpace: 'pre-wrap',
+      },
+      'data-node-view-content': '',
+    })
+  },
+})

package/src/NodeViewWrapper.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h } from 'vue'
+
+export const NodeViewWrapper = defineComponent({
+  name: 'NodeViewWrapper',
+
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  inject: ['onDragStart', 'decorationClasses'],
+
+  render() {
+    return h(
+      this.as,
+      {
+        // @ts-ignore
+        class: this.decorationClasses,
+        style: {
+          whiteSpace: 'normal',
+        },
+        'data-node-view-wrapper': '',
+        // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
+        onDragstart: this.onDragStart,
+      },
+      this.$slots.default?.(),
+    )
+  },
+})

package/src/SlideEditor.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, watch, onMounted } from 'vue'
+import { EditorContent } from './EditorContent'
+import BubbleMenuPreset from './menus/BubbleMenuPreset.vue'
+import { useSlideEditor, type UseSlideEditorProps } from './useSlideEditor'
+import type { Editor } from '@blockslides/core'
+
+export interface BubbleMenuPresetProps {
+  editor: Editor
+  [key: string]: any
+}
+
+export interface SlideEditorProps extends UseSlideEditorProps {
+  /**
+   * Toggle or customize the built-in BubbleMenuPreset.
+   * - true (default): render with defaults
+   * - false: disable entirely
+   * - object: pass through to BubbleMenuPreset
+   */
+  bubbleMenuPreset?: boolean | BubbleMenuPresetProps
+  className?: string
+  style?: any
+}
+
+const props = withDefaults(defineProps<SlideEditorProps>(), {
+  bubbleMenuPreset: true,
+})
+
+const {
+  bubbleMenuPreset,
+  className,
+  style,
+  ...hookProps
+} = props
+
+const { editor } = useSlideEditor(hookProps)
+
+const bubbleMenuProps = computed(() => {
+  if (props.bubbleMenuPreset === false) return null
+  if (props.bubbleMenuPreset === true) return {}
+  return props.bubbleMenuPreset
+})
+
+</script>
+
+<template>
+  <div v-if="editor" :class="className" :style="style">
+    <div class="bs-viewport">
+      <EditorContent :editor="editor" />
+      <BubbleMenuPreset v-if="bubbleMenuProps" :editor="editor" v-bind="bubbleMenuProps" />
+    </div>
+  </div>
+</template>
+ 

package/src/VueMarkViewRenderer.ts

@@ -0,0 +1,130 @@
+/* eslint-disable no-underscore-dangle */
+import type { MarkViewProps, MarkViewRenderer, MarkViewRendererOptions } from '@blockslides/core'
+import { MarkView } from '@blockslides/core'
+import type { Component, PropType } from 'vue'
+import { defineComponent, h, toRaw } from 'vue'
+
+import type { 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,
+  },
+  updateAttributes: {
+    type: Function as PropType<MarkViewProps['updateAttributes']>,
+    required: true as const,
+  },
+  HTMLAttributes: {
+    type: Object as PropType<MarkViewProps['HTMLAttributes']>,
+    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)
+
+    const componentProps = { ...props, updateAttributes: this.updateAttributes.bind(this) } satisfies MarkViewProps
+
+    // Create extended component with provide
+    const extendedComponent = defineComponent({
+      extends: { ...component },
+      props: Object.keys(componentProps),
+      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: componentProps,
+    })
+  }
+
+  get dom() {
+    return this.renderer.element as HTMLElement
+  }
+
+  get contentDOM() {
+    return this.dom.querySelector('[data-mark-view-content]') as HTMLElement | null
+  }
+
+  updateAttributes(attrs: Record<string, any>): void {
+    // since this.mark is now an proxy, we need to get the actual mark from it
+    const unproxiedMark = toRaw(this.mark)
+    super.updateAttributes(attrs, unproxiedMark)
+  }
+
+  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)
+  }
+}