@blockslides/vue-3 0.2.0

package/src/menus/FloatingMenu.ts

@@ -0,0 +1,84 @@
+import type { FloatingMenuPluginProps } from '@blockslides/extension-floating-menu'
+import { FloatingMenuPlugin } from '@blockslides/extension-floating-menu'
+import type { PropType } from 'vue'
+import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'>
+
+export const FloatingMenu = defineComponent({
+  name: 'FloatingMenu',
+
+  inheritAttrs: false,
+
+  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,
+    },
+
+    options: {
+      type: Object as PropType<FloatingMenuPluginProps['options']>,
+      default: () => ({}),
+    },
+
+    appendTo: {
+      type: [Object, Function] as PropType<FloatingMenuPluginProps['appendTo']>,
+      default: undefined,
+    },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<Required<FloatingMenuPluginProps>['shouldShow'], null>>,
+      default: null,
+    },
+  },
+
+  setup(props, { slots, attrs }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      const { pluginKey, editor, options, appendTo, shouldShow } = 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()
+
+      editor.registerPlugin(
+        FloatingMenuPlugin({
+          pluginKey,
+          editor,
+          element: el,
+          options,
+          appendTo,
+          shouldShow,
+        }),
+      )
+    })
+
+    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/index.ts

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

package/src/useEditor.ts

@@ -0,0 +1,24 @@
+import type { EditorOptions } from '@blockslides/core'
+import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+
+import { Editor } from './Editor.js'
+
+export const useEditor = (options: Partial<EditorOptions> = {}) => {
+  const editor = shallowRef<Editor>()
+
+  onMounted(() => {
+    editor.value = new Editor(options)
+  })
+
+  onBeforeUnmount(() => {
+    // Cloning root node (and its children) to avoid content being lost by destroy
+    const nodes = editor.value?.view.dom?.parentNode
+    const newEl = nodes?.cloneNode(true) as HTMLElement
+
+    nodes?.parentNode?.replaceChild(newEl, nodes)
+
+    editor.value?.destroy()
+  })
+
+  return editor
+}

package/src/useSlideEditor.ts

@@ -0,0 +1,255 @@
+import { computed, watch, toRefs } from 'vue'
+import { templatesV1 } from '@blockslides/ai-context'
+import type { AnyExtension, Editor, JSONContent } from '@blockslides/core'
+import type { SlideOptions } from '@blockslides/extension-slide'
+import { ExtensionKit, type ExtensionKitOptions } from '@blockslides/extension-kit'
+
+import { useEditor } from './useEditor.js'
+import type { EditorOptions } from '@blockslides/core'
+
+type PresetTemplates = ReturnType<typeof templatesV1.listPresetTemplates>
+
+export interface UseSlideEditorProps {
+  /**
+   * 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
+  /**
+   * Editor theme for UI styling
+   */
+  theme?: EditorOptions['theme']
+  /**
+   * The editor's props
+   */
+  editorProps?: EditorOptions['editorProps']
+  /**
+   * Called on every update
+   */
+  onUpdate?: EditorOptions['onUpdate']
+  /**
+   * Additional editor options to pass through to the core editor.
+   * This allows passing any EditorOptions without Vue auto-initializing them.
+   */
+  editorOptions?: Partial<EditorOptions>
+}
+
+const defaultSlide = () => ({
+  /**
+   * Placeholder slide if no content is provided.
+   */
+  type: 'doc',
+  content: [
+    {
+      type: 'slide',
+      attrs: {
+        size: '16x9',
+        className: '',
+        id: 'slide-1',
+        backgroundMode: 'none',
+        backgroundColor: null,
+        backgroundImage: null,
+        backgroundOverlayColor: null,
+        backgroundOverlayOpacity: null,
+      },
+      content: [
+        {
+          type: 'column',
+          attrs: {
+            align: 'center',
+            padding: 'lg',
+            margin: null,
+            gap: 'md',
+            backgroundColor: '#ffffff',
+            backgroundImage: null,
+            borderRadius: null,
+            border: null,
+            fill: true,
+            width: null,
+            height: null,
+            justify: 'center',
+          },
+          content: [
+            {
+              type: 'heading',
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null,
+                id: '1fc4664c-333d-4203-a3f1-3ad27a54c535',
+                'data-toc-id': '1fc4664c-333d-4203-a3f1-3ad27a54c535',
+                level: 1,
+              },
+              content: [
+                {
+                  type: 'text',
+                  text: 'Lorem ipsum dolor sit amet',
+                },
+              ],
+            },
+            {
+              type: 'paragraph',
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null,
+              },
+              content: [
+                {
+                  type: 'text',
+                  text: 'Consectetur adipiscing elit. Sed do eiusmod tempor incididunt. ',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+})
+
+const defaultAddSlideButton = (presets: PresetTemplates) => ({
+  showPresets: true,
+  presets,
+  presetBackground: '#0f172a',
+  presetForeground: '#e5e7eb',
+})
+
+const defaultSlideOptions: Partial<SlideOptions> = {
+  renderMode: 'dynamic',
+  hoverOutline: { color: '#3b82f6', width: '1.5px', offset: '4px' },
+  hoverOutlineCascade: false,
+}
+
+export const useSlideEditor = (props: UseSlideEditorProps = {}) => {
+  const {
+    content,
+    onChange,
+    extensions,
+    extensionKitOptions,
+    presetTemplates,
+    onEditorReady,
+    theme = 'light',
+    editorProps,
+    onUpdate,
+    editorOptions = {}
+  } = props
+  /**
+   * Presets for add slide button.
+   */
+  const presets = computed<PresetTemplates>(
+    () => presetTemplates ?? templatesV1.listPresetTemplates()
+  )
+
+  const mergedExtensionKitOptions = computed<ExtensionKitOptions>(() => {
+    const addSlideButton =
+      extensionKitOptions?.addSlideButton === false
+        ? false
+        : {
+          ...defaultAddSlideButton(presets.value),
+          ...(extensionKitOptions?.addSlideButton ?? {}),
+        }
+
+    const slide =
+      extensionKitOptions?.slide === false
+        ? false
+        : {
+          ...defaultSlideOptions,
+          ...(extensionKitOptions?.slide ?? {}),
+        }
+
+    return {
+      ...extensionKitOptions,
+      addSlideButton,
+      slide,
+    }
+  })
+
+  const resolvedExtensions = computed<AnyExtension[]>(() => {
+    const kit = ExtensionKit.configure(mergedExtensionKitOptions.value)
+    return extensions ? [kit, ...extensions] : [kit]
+  })
+
+  /**
+   * Initial content for the editor.
+   */
+  const initialContent = content ?? defaultSlide()
+
+  console.log('resolvedExtensions', resolvedExtensions.value, resolvedExtensions);
+  console.log('editorOptions (as single prop):', editorOptions);
+  
+  const editor = useEditor(
+    {
+      content: initialContent,
+      extensions: resolvedExtensions.value,
+      theme,
+      editorProps: {
+        attributes: {
+          autocomplete: 'off',
+          autocorrect: 'off',
+          autocapitalize: 'off',
+          class: 'min-h-full min-w-full',
+          ...(editorProps?.attributes ?? {}),
+        },
+        ...editorProps,
+      },
+      ...editorOptions,
+      onUpdate: (ctx: any) => {
+        const json = ctx.editor.getJSON()
+        onChange?.(json, ctx.editor)
+        onUpdate?.(ctx)
+      },
+    }
+  );
+
+  watch(
+    editor,
+    newEditor => {
+      if (newEditor && !newEditor.isDestroyed) {
+        onEditorReady?.(newEditor)
+      } else {
+        console.log('[useSlideEditor] ❌ Editor not ready or destroyed')
+      }
+    },
+    { immediate: true }
+  )
+
+  return { editor, presets }
+}

package/src/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}