tiptapify 0.3.5 → 0.4.1

package/src/components/MenuFloating.vue

@@ -3,56 +3,59 @@ import { Editor } from '@tiptap/vue-3'
 import { inject, Ref } from 'vue'
 import { FloatingMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
-
-defineProps({
-  variant: { type: String, default () { return '' } },
-  theme: { type: String, default () { return 'light' } },
-})
+import BubbleRow from '@tiptapify/components/UI/BubbleRow.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { ComposerTranslation } from 'vue-i18n'
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+// What an empty line may become
+const items = [
+  {
+    name: 'h1',
+    icon: mdi.mdiFormatHeader1,
+    label: 'style.headings.h1',
+    hotkey: 'Mod-Alt-1',
+    active: () => editor.value.isActive('heading', { level: 1 }),
+    click: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
+  },
+  {
+    name: 'h2',
+    icon: mdi.mdiFormatHeader2,
+    label: 'style.headings.h2',
+    hotkey: 'Mod-Alt-2',
+    active: () => editor.value.isActive('heading', { level: 2 }),
+    click: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
+  },
+  {
+    name: 'bulletList',
+    icon: mdi.mdiFormatListBulleted,
+    label: 'lists.bullet',
+    hotkey: 'Mod-Shift-8',
+    active: () => editor.value.isActive('bulletList'),
+    click: () => editor.value.chain().focus().toggleBulletList().run(),
+  },
+]
 </script>
 
 <template>
   <FloatingMenu v-if="editor" :editor="editor">
-    <div class="floating-menu">
-      <VCard>
-        <VCardText class="pa-0">
-          <VToolbar :theme="theme" density="compact" height="auto" class="p-0">
-            <VToolbarItems>
-              <VBtnGroup divided density="compact">
-                <VBtn
-                  :color="`${editor.isActive('heading', { level: 1 }) ? 'primary' : ''}`"
-                  size="small"
-                  @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-                >
-                  <VIcon :icon="mdi['mdiFormatHeader1']" size="16" />
-                </VBtn>
-                <VBtn
-                  :color="`${editor.isActive('heading', { level: 2 }) ? 'primary' : ''}`"
-                  size="small"
-                  @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                >
-                  <VIcon :icon="mdi['mdiFormatHeader2']" size="16" />
-                </VBtn>
-                <VBtn
-                  :color="`${editor.isActive('bulletList') ? 'primary' : ''}`"
-                  size="small"
-                  @click="editor.chain().focus().toggleBulletList().run()"
-                >
-                  <VIcon :icon="mdi['mdiFormatListBulleted']" size="16" />
-                </VBtn>
-              </VBtnGroup>
-            </VToolbarItems>
-          </VToolbar>
-        </VCardText>
-      </VCard>
-    </div>
+    <BubbleRow class="floating-menu">
+      <VBtn
+        v-for="item in items"
+        :key="item.name"
+        size="32"
+        variant="text"
+        color=""
+        :class="{ 'tiptapify-btn--active': item.active() }"
+        :aria-pressed="item.active()"
+        @click="item.click"
+      >
+        <Tooltip :label="t(item.label)" :hotkey="item.hotkey" />
+        <VIcon :icon="`mdiSvg:${item.icon}`" size="20" />
+      </VBtn>
+    </BubbleRow>
   </FloatingMenu>
 </template>
-
-<style scoped lang="scss">
-.floating-menu {
-  border-radius: 6px;
-  box-shadow: 4px 4px 20px var(--dark-gray);
-}
-</style>

package/src/components/Tiptapify.upload.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest'
+import Tiptapify from '@tiptapify/components/Tiptapify.vue'
+
+describe('Tiptapify upload prop', () => {
+  it('defaults to no upload endpoint', () => {
+    const props = (Tiptapify as unknown as { props: Record<string, { default: unknown }> }).props
+
+    expect(props.upload.default).toBeNull()
+  })
+})

package/src/components/Tiptapify.vue

@@ -11,23 +11,29 @@ import {
   TiptapifyAiResolvedOptions,
   TiptapifyEditor,
   TiptapifyFooterAlignment,
+  TiptapifyLinkPreviewOptions,
   TiptapifySkinInput,
+  TiptapifyUploadOptions,
   variantBtnTypes,
   variantFieldTypes
 } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 import ImageBubbleMenu from '@tiptapify/components/ImageBubbleMenu.vue'
+import PasteCardMenu from '@tiptapify/extensions/components/media/linkCard/PasteCardMenu.vue'
 
 import { useI18n } from 'vue-i18n'
 
 import { getTiptapEditor } from '@tiptapify/components/index'
-import { TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
+import { skinRootClasses, TIPTAPIFY_CONFIG_KEY } from '@tiptapify/composables/useTiptapifyConfig'
+import { TIPTAPIFY_UPLOAD_KEY } from '@tiptapify/composables/useTiptapifyUpload'
+import { createLinkPreviewState, TIPTAPIFY_LINK_PREVIEW_KEY } from '@tiptapify/composables/useTiptapifyLinkPreview'
 import { resolveSkin } from '@tiptapify/skins/registry'
 import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 
 import Footer from '@tiptapify/components/Footer.vue'
 import { useTheme } from 'vuetify/framework'
+import { contentCss, contentHTML, TiptapifyContentStyles } from '@tiptapify/utils/contentStyles'
 
 const props = defineProps({
   locale: { type: String, default () { return 'en' } },
@@ -63,6 +69,14 @@ const props = defineProps({
   imageSlider: { type: Number, default() { return 0 } },
   // The skin of the editor chrome: a registered name ('default', 'pastel') or an inline skin object
   skin: { type: [String, Object] as PropType<TiptapifySkinInput>, default() { return defaults.skin } },
+  // The upload endpoint of files picked in the image and video dialogs; without it a picked image is
+  // embedded as base64 and a video is inserted by its link only
+  upload: { type: Object as PropType<TiptapifyUploadOptions | null>, default: null },
+  // The backend endpoint of link cards (OpenGraph data of pages); without it there are no link cards
+  linkPreview: { type: Object as PropType<TiptapifyLinkPreviewOptions | null>, default: null },
+  // How the saved HTML carries the look of its content: `inline` styles, or `classes` for a site that loads
+  // tiptapify/content.css
+  contentStyles: { type: String as PropType<TiptapifyContentStyles>, default: 'inline' },
 })
 
 const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
@@ -121,7 +135,7 @@ const tiptapifyAi = computed(() => {
 })
 
 function contentChanged() {
-  const html = editor.value?.getHTML() ?? ''
+  const html = contentHTML(editor.value?.getHTML() ?? '', props.contentStyles)
   emit('update:modelValue', html)
   emit('content-changed', { html, json: editor.value?.getJSON() })
 }
@@ -145,7 +159,7 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
       (<TiptapifyEditor>editorInstance).interactiveStyles = props.interactiveStyles
       emit('editor-ready', {
         editor: editorInstance,
-        getHTML: () => editorInstance.getHTML(),
+        getHTML: () => contentHTML(editorInstance.getHTML(), props.contentStyles),
         getJSON: () => editorInstance.getJSON(),
       })
     },
@@ -153,34 +167,33 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
       captionPlaceholder: t('dialog.image.caption_placeholder'),
       sliderMinImages: props.imageSlider,
       sliderLabel: t('media.slider'),
+      // Without an upload endpoint the image dialog embeds a picked file as base64
+      allowBase64: !props.upload?.endpoint,
     },
 )
 
 provide('tiptapifyEditor', editor)
 
+// The editor shows its content with the content styles, under its own `.tiptap` (the HTML preview too)
+const CONTENT_STYLE_ID = 'tiptapify-content-styles'
+if (typeof document !== 'undefined' && !document.getElementById(CONTENT_STYLE_ID)) {
+  const style = document.createElement('style')
+  style.id = CONTENT_STYLE_ID
+  style.textContent = contentCss('.tiptap', { weightless: false })
+  document.head.append(style)
+}
+
 const scrollContainer = ref<HTMLElement | null>(null)
 provide('tiptapifyScrollContainer', scrollContainer)
 provide('tiptapifyI18n', { t })
 provide('tiptapifyAi', tiptapifyAi)
+provide(TIPTAPIFY_UPLOAD_KEY, toRef(props, 'upload'))
+provide(TIPTAPIFY_LINK_PREVIEW_KEY, createLinkPreviewState(toRef(props, 'linkPreview')))
 // The skin prop resolves through the registry; computed refs so a prop change
 // re-resolves tokens and shape without an editor re-render
 const resolvedSkin = computed(() => resolveSkin(props.skin))
 
-// The shape classes: `.tiptapify-shape-{flag}-{value}` for all six flags, so CSS gates on
-// shape (not on the skin name); templates read the computed refs. The name class stays
-// as the escape hatch for consumer CSS.
-const shapeClasses = computed(() => {
-  const shape = resolvedSkin.value.shape
-
-  return [
-    `tiptapify-shape-toolbar-${shape.toolbar}`,
-    `tiptapify-shape-groups-${shape.groups}`,
-    `tiptapify-shape-buttons-${shape.buttons}`,
-    `tiptapify-shape-bubble-${shape.bubble}`,
-    `tiptapify-shape-dialog-${shape.dialog}`,
-    `tiptapify-shape-menu-${shape.menu}`,
-  ].join(' ')
-})
+const rootClasses = computed(() => skinRootClasses(resolvedSkin.value.className, resolvedSkin.value.shape))
 
 provide(TIPTAPIFY_CONFIG_KEY, {
   variantBtn: toRef(props, 'variantBtn'),
@@ -189,6 +202,7 @@ provide(TIPTAPIFY_CONFIG_KEY, {
   skinName: computed(() => resolvedSkin.value.name),
   tokens: computed(() => resolvedSkin.value.tokens),
   shape: computed(() => resolvedSkin.value.shape),
+  rootClasses,
 })
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
@@ -210,7 +224,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     :id="`tiptapify-editor-${editor?.instanceId}`"
-    :class="[resolvedSkin.className, shapeClasses]"
+    :class="rootClasses"
     :style="resolvedSkin.tokens"
   >
     <div :class="`tiptapify-frame rounded-${rounded}`">
@@ -230,12 +244,14 @@ onBeforeUnmount(() => {
       <VProgressLinear v-model="loadingProgress" :color="loadingColor" :height="loadingHeight" :indeterminate="loading" />
 
       <div ref="scrollContainer" class="pa-2 tiptapify-container resizable" :style="computeResizableHeight" @click="onContainerClick">
-        <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
+        <MenuFloating v-if="floatingMenu" />
 
-        <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
+        <MenuBubble v-if="bubbleMenu" />
 
         <ImageBubbleMenu />
 
+        <PasteCardMenu />
+
         <EditorContent :editor="editor" class="tiptapify-editor" />
       </div>
 
@@ -370,34 +386,15 @@ onBeforeUnmount(() => {
     }
   }
 
-  /* Task list specific styles */
+  /* Task lists: the layout is the content styles (utils/contentStyles.ts); the editor adds the pointer */
   ul[data-type='taskList'] {
-    list-style: none;
-    margin-left: 0;
-    padding: 0;
-
-    li {
-      align-items: flex-start;
-      display: flex;
-
-      > label {
-        flex: 0 0 auto;
-        margin-right: 0.5rem;
-        user-select: none;
-      }
-
-      > div {
-        flex: 1 1 auto;
-      }
+    li > label {
+      user-select: none;
     }
 
     input[type='checkbox'] {
       cursor: pointer;
     }
-
-    ul[data-type='taskList'] {
-      margin: 0;
-    }
   }
 
   /* Heading styles */
@@ -598,6 +595,41 @@ onBeforeUnmount(() => {
     display: block;
   }
 
+  /*
+   * While editing, a click on a player or an embed selects its block (a double click opens the video
+   * or the embed dialog)
+   */
+  &[contenteditable='true'] {
+    div[data-youtube-video],
+    .iframe-wrapper,
+    .tiptapify-video {
+      cursor: pointer;
+    }
+
+    div[data-youtube-video] iframe,
+    .iframe-wrapper iframe,
+    .tiptapify-video video {
+      pointer-events: none;
+    }
+  }
+
+  div[data-youtube-video].ProseMirror-selectednode iframe,
+  .iframe-wrapper.ProseMirror-selectednode iframe,
+  .tiptapify-video.ProseMirror-selectednode video {
+    outline: 2px solid rgb(var(--v-theme-primary));
+    outline-offset: 2px;
+  }
+
+  /* Link cards: their look is the content styles; the editor only adds the selection */
+  .tiptapify-link-card {
+    cursor: pointer;
+
+    &.ProseMirror-selectednode {
+      outline: 2px solid rgb(var(--v-theme-primary));
+      outline-offset: 2px;
+    }
+  }
+
   /* Image with the caption under it (see extensions/components/media/image/caption.ts) */
   .tiptapify-image {
     --tiptapify-image-max-height: 400px;
@@ -608,7 +640,10 @@ onBeforeUnmount(() => {
     max-width: 100%;
     margin: 1rem 0;
 
-    /* Never wider than the text, never taller than the max height: big photos stay out of the way */
+    /*
+     * Never wider than the text; without a set width (dialog or resizing) never taller than the max height
+     * either, so big photos stay out of the way
+     */
     img {
       max-width: 100%;
       height: auto !important;
@@ -616,12 +651,16 @@ onBeforeUnmount(() => {
     }
 
     [data-resize-wrapper] {
-      max-width: min(100%, calc(var(--tiptapify-image-max-height) * var(--tiptapify-image-ratio, 100)));
+      max-width: 100%;
       border-radius: var(--tf-image-radius, 0.125rem);
       outline: 1px solid transparent;
       transition: outline-color 0.15s;
     }
 
+    &:not([data-sized]) [data-resize-wrapper] {
+      max-width: min(100%, calc(var(--tiptapify-image-max-height) * var(--tiptapify-image-ratio, 100)));
+    }
+
     /* One block: hovering outlines it, a click selects it and shows its toolbar */
     img {
       cursor: pointer;
@@ -862,6 +901,7 @@ onBeforeUnmount(() => {
 
 .tiptapify-dialog-actions {
   display: flex;
+  flex: 1 1 auto;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;

package/src/components/Toolbar/Index.vue

@@ -366,6 +366,16 @@ toolbarItems = toolbarItems
   }
 }
 
+/*
+ * Classic active buttons (`color="primary"` -> `.bg-primary`): Vuetify 4 puts its utilities in a cascade
+ * layer under the button variant's background, so this unlayered rule restores the fill. The quiet buttons
+ * above keep their own pressed look (their rules carry `!important`).
+ */
+.tiptapify-toolbar .v-btn.bg-primary {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
 /* A toolbar button that opens a dropdown: the current choice and a chevron */
 .tiptapify-toolbar .v-btn.tiptapify-dropdown-button {
   min-width: 0;

package/src/components/UI/BubbleRow.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+
+// The surface of the menus floating over the text (selection, empty line, image): one row of 32px icon
+// buttons in groups split by `.tiptapify-bubble-divider`; an active button carries `.tiptapify-btn--active`
+const { shape } = useTiptapifyConfig()
+</script>
+
+<template>
+  <div class="tiptapify-bubble-row" :class="{ 'tiptapify-quiet-buttons': shape.buttons === 'quiet' }">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* The fallbacks are the classic shape's base: the default skin emits no bubble tokens */
+.tiptapify-bubble-row {
+  display: flex;
+  align-items: center;
+  gap: var(--tf-bubble-gap, 2px);
+  padding: var(--tf-bubble-padding, 4px);
+  border: var(--tf-bubble-border, none);
+  border-radius: var(--tf-bubble-radius, 6px);
+  background: var(--tf-bubble-bg, rgb(var(--v-theme-surface)));
+  box-shadow: var(--tf-bubble-shadow, 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08));
+}
+
+:slotted(.tiptapify-bubble-divider) {
+  flex: none;
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+/* The classic pressed look: a primary tint (the quiet shape paints its own, Toolbar/Index.vue) */
+.tiptapify-bubble-row:not(.tiptapify-quiet-buttons) :slotted(.v-btn.tiptapify-btn--active) {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+  color: rgb(var(--v-theme-primary));
+}
+</style>

package/src/components/UI/TiptapifyDialog.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { App, computed, createApp, h, nextTick, provide, Ref, ref } from 'vue'
 import { createVuetify } from 'vuetify'
 import { VTextField } from 'vuetify/components'
@@ -23,7 +23,7 @@ if (!('visualViewport' in globalThis)) {
 // variant and the field defaults all key off `shape.dialog`, not the skin name.
 const openApps: { app: App, host: HTMLElement }[] = []
 
-async function openDialog (skinInput: unknown): Promise<HTMLElement> {
+async function openDialog (skinInput: unknown, listeners: Record<string, () => void> = {}, slots: Record<string, () => unknown> = {}): Promise<HTMLElement> {
   const config = resolveSkin(skinInput)
   const dialog: Ref<{ open: () => void } | null> = ref(null)
 
@@ -39,8 +39,9 @@ async function openDialog (skinInput: unknown): Promise<HTMLElement> {
       })
       provide('tiptapifyI18n', { t: (key: string) => key })
 
-      return () => h(TiptapifyDialog, { ref: dialog, title: 'Probe dialog', module: 'link' }, {
+      return () => h(TiptapifyDialog, { ref: dialog, title: 'Probe dialog', module: 'link', ...listeners }, {
         content: () => h('div', { class: 'probe-content' }, [h(VTextField, { label: 'Field' })]),
+        ...slots,
       })
     },
   })
@@ -130,3 +131,36 @@ describe('TiptapifyDialog shape wiring', () => {
     expect(classic.querySelector('.tiptapify-dialog-header')?.nextElementSibling?.classList.contains('v-divider')).toBe(true)
   })
 })
+
+describe('TiptapifyDialog form', () => {
+  it('submits on Enter in a field: the content is a form', async () => {
+    const onSubmit = vi.fn()
+    const card = await openDialog('default', { onSubmit })
+
+    card.querySelector('form')!.requestSubmit()
+
+    expect(onSubmit).toHaveBeenCalledOnce()
+  })
+
+  it('tells the dialog it closed, however it was closed', async () => {
+    const onClosed = vi.fn()
+    const card = await openDialog('default', { onClosed })
+
+    card.querySelector<HTMLElement>('.tiptapify-dialog-close')!.click()
+    await nextTick()
+
+    expect(onClosed).toHaveBeenCalledOnce()
+  })
+})
+
+describe('TiptapifyDialog title', () => {
+  it('shows the title prop, or the title slot of the dialog', async () => {
+    const plain = await openDialog('default')
+    expect(plain.querySelector('.tiptapify-dialog-title')!.textContent!.trim()).toBe('Probe dialog')
+
+    disposeDialogs()
+
+    const custom = await openDialog('default', {}, { title: () => h('b', { class: 'probe-title' }, 'With icon') })
+    expect(custom.querySelector('.tiptapify-dialog-title .probe-title')!.textContent).toBe('With icon')
+  })
+})

package/src/components/UI/TiptapifyDialog.vue

@@ -23,10 +23,18 @@ const { shape, tokens } = useTiptapifyConfig()
 const dialogSoft = computed(() => shape.value.dialog === 'soft')
 
 defineExpose({ open, close })
-const emits = defineEmits(['closeDialog'])
+// `submit`: Enter in a field or a submit button; `closed`: closed in any way (close button, click outside,
+// Esc, close()), for the dialog to reset its form
+const emits = defineEmits(['closeDialog', 'submit', 'closed'])
 
 const showDialog = ref<boolean>(false)
 
+watch(showDialog, (shown) => {
+  if (!shown) {
+    emits('closed')
+  }
+})
+
 const field = { variant: 'outlined', density: 'comfortable' }
 const fieldDefaults = {
   VTextField: field,
@@ -171,7 +179,8 @@ onBeforeUnmount(() => {
         style="user-select: none;"
       >
         <span class="tiptapify-dialog-title">
-          {{ title ?? t(`dialog.${module}.title`) }}
+          <!-- A dialog may put an icon or more into its title -->
+          <slot name="title">{{ title ?? t(`dialog.${module}.title`) }}</slot>
         </span>
 
         <VSpacer />
@@ -193,9 +202,11 @@ onBeforeUnmount(() => {
 
       <!-- In the soft dialog shape, fields a dialog does not style itself get the light outlined look -->
       <VDefaultsProvider :defaults="dialogSoft ? fieldDefaults : {}">
-        <slot name="content" />
+        <form class="tiptapify-dialog-form" novalidate @submit.prevent="emits('submit')">
+          <slot name="content" />
 
-        <slot name="actions" />
+          <slot name="actions" />
+        </form>
       </VDefaultsProvider>
     </VCard>
   </VDialog>

package/src/components/editorExtensions.test.ts

@@ -7,4 +7,13 @@ describe('editor extensions', () => {
 
     expect(link?.options).toMatchObject({ openOnClick: false, enableClickSelection: true })
   })
+
+  it('keeps base64 images unless the host uploads images to its own server', () => {
+    const image = (allowBase64?: boolean) => editorExtensions('', false, [], null, { captionPlaceholder: '', sliderMinImages: 0, sliderLabel: '', allowBase64 })
+      .find(extension => extension.name === 'image')
+
+    expect(image()?.options.allowBase64).toBe(true)
+    expect(image(false)?.options.allowBase64).toBe(false)
+  })
+
 })

package/src/components/editorExtensions.ts

@@ -34,6 +34,9 @@ import { ImageWithCaption } from '@tiptapify/extensions/components/media/image/c
 import { ImageSlider } from '@tiptapify/extensions/components/media/image/slider'
 import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
 import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
+import { VideoFile } from '@tiptapify/extensions/components/media/video/videoFile'
+import { LinkCard } from '@tiptapify/extensions/components/media/linkCard'
+import { LinkCardPaste } from '@tiptapify/extensions/components/media/linkCard/pasteCard'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
 import SlashCommands, { SlashCommandsExtensionOptions } from '@tiptapify/extensions/slash-commands'
 import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
@@ -59,10 +62,23 @@ export interface TiptapifyImageOptions {
   // Images in a row from which the site shows a slider; 0 disables the slider grid
   sliderMinImages: number
   sliderLabel: string
+  // Images embedded as base64 data URLs: kept unless the host uploads images to its own server
+  allowBase64?: boolean
 }
 
 const defaultImageOptions: TiptapifyImageOptions = { captionPlaceholder: '', sliderMinImages: 0, sliderLabel: '' }
 
+// No default size: a responsive video is saved without one and must load back responsive
+const ResponsiveYoutube = Youtube.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: { default: null },
+      height: { default: null },
+    }
+  },
+})
+
 export function editorExtensions (
   placeholder: string,
   slashCommands: SlashCommandsConfig,
@@ -112,17 +128,21 @@ export function editorExtensions (
         directions: ['top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
       },
       captionPlaceholder: imageOptions.captionPlaceholder,
+      allowBase64: imageOptions.allowBase64 ?? true,
     }),
     ImageSlider.configure({
       minImages: imageOptions.sliderMinImages,
       label: imageOptions.sliderLabel,
     }),
-    Youtube.configure({
+    ResponsiveYoutube.configure({
       controls: true,
       nocookie: true,
     }),
     TiptapifyImage,
     TiptapifyVideo,
+    VideoFile,
+    LinkCard,
+    LinkCardPaste,
     Iframe,
     Superscript,
     Subscript,