tiptapify 0.3.2 → 0.3.3

package/src/components/editorExtensions.ts

@@ -17,7 +17,6 @@ import { HardBreak } from '@tiptap/extension-hard-break'
 import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
 import { Typography } from '@tiptap/extension-typography'
 import { Highlight } from '@tiptap/extension-highlight'
-import { Image } from '@tiptap/extension-image'
 import { Youtube } from '@tiptap/extension-youtube'
 import { Superscript } from '@tiptap/extension-superscript'
 import { Subscript } from '@tiptap/extension-subscript'
@@ -29,7 +28,10 @@ import { InvisibleCharacters } from '@tiptap/extension-invisible-characters'
 
 import { default as Iframe } from '@tiptapify/extensions/components/media/iframe'
 import { BulletListCircle, BulletListSquare } from '@tiptapify/extensions/components/list/bullet'
+import { ListStyle } from '@tiptapify/extensions/components/list/styles'
 import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
+import { ImageWithCaption } from '@tiptapify/extensions/components/media/image/caption'
+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 CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
@@ -52,7 +54,22 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: SlashCommandsConfig, customExtensions: toolbarSections, limit: number | null = null) {
+export interface TiptapifyImageOptions {
+  captionPlaceholder: string
+  // Images in a row from which the site shows a slider; 0 disables the slider grid
+  sliderMinImages: number
+  sliderLabel: string
+}
+
+const defaultImageOptions: TiptapifyImageOptions = { captionPlaceholder: '', sliderMinImages: 0, sliderLabel: '' }
+
+export function editorExtensions (
+  placeholder: string,
+  slashCommands: SlashCommandsConfig,
+  customExtensions: toolbarSections,
+  limit: number | null = null,
+  imageOptions: TiptapifyImageOptions = defaultImageOptions,
+) {
   const characterCount = limit && limit > 0 ? CharacterCount.configure({ limit }) : CharacterCount
 
   const extensions = [
@@ -65,7 +82,12 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
     Bold,
     Italic,
     Strike,
-    Link,
+    // A click on a link in the text selects it for editing instead of opening it
+    Link.configure({
+      openOnClick: false,
+      enableClickSelection: true,
+      defaultProtocol: 'https',
+    }),
     Blockquote,
     OrderedList,
     BulletList,
@@ -83,11 +105,17 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
       openOnClick: false,
       defaultProtocol: 'https'
     }),
-    Image.configure({
+    ImageWithCaption.configure({
       resize: {
         enabled: true,
         alwaysPreserveAspectRatio: true,
+        directions: ['top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
       },
+      captionPlaceholder: imageOptions.captionPlaceholder,
+    }),
+    ImageSlider.configure({
+      minImages: imageOptions.sliderMinImages,
+      label: imageOptions.sliderLabel,
     }),
     Youtube.configure({
       controls: true,
@@ -117,7 +145,8 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
       visible: false,
     }),
     BulletListCircle,
-    BulletListSquare
+    BulletListSquare,
+    ListStyle,
   ]
 
   if (slashCommands !== false) {

package/src/components/index.ts

@@ -1,5 +1,5 @@
 import { Editor, useEditor } from '@tiptap/vue-3'
-import { editorExtensions } from '@tiptapify/components/editorExtensions'
+import { editorExtensions, TiptapifyImageOptions } from '@tiptapify/components/editorExtensions'
 import { toolbarSections } from '@tiptapify/types/toolbarTypes'
 import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { ShallowRef } from 'vue'
@@ -12,8 +12,9 @@ export function getTiptapEditor (
   limit: number | null = null,
   onUpdate: Function = () => {},
   onCreate?: (editor: Editor) => void,
+  imageOptions?: TiptapifyImageOptions,
 ): ShallowRef<Editor | undefined> {
-  const extensions = editorExtensions(placeholder, slashCommands, customExtensions, limit)
+  const extensions = editorExtensions(placeholder, slashCommands, customExtensions, limit, imageOptions)
 
   return useEditor({
     content,

package/src/extensions/components/actions/redo/Button.vue

@@ -26,7 +26,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     @click="editor.chain().focus().redo().run()"
   >
     <Tooltip :label="t('action.redo')" hotkey="Mod-Shift-z" />
-    <BtnIcon :icon="`mdiSvg:${mdi.mdiRedo}`" />
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiRedoVariant}`" />
   </VBtn>
 </template>
 

package/src/extensions/components/actions/undo/Button.vue

@@ -26,7 +26,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
     @click="editor.chain().focus().undo().run()"
   >
     <Tooltip :label="t('action.undo')" hotkey="Mod-z" />
-    <BtnIcon :icon="`mdiSvg:${mdi.mdiUndo}`" />
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiUndoVariant}`" />
   </VBtn>
 </template>
 

package/src/extensions/components/alignment/menu/Button.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { inject, PropType, Ref } from 'vue'
+
+import { ComposerTranslation } from 'vue-i18n'
+
+type Alignment = 'left' | 'center' | 'right' | 'justify'
+
+const props = defineProps({
+  alignments: { type: Array as PropType<Alignment[]>, default: () => ['left', 'center', 'right', 'justify'] },
+})
+
+const { variantBtn } = useTiptapifyConfig()
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+const alignmentOptions: Record<Alignment, { icon: string, hotkey: string }> = {
+  left: { icon: mdi.mdiFormatAlignLeft, hotkey: 'Mod-Shift-l' },
+  center: { icon: mdi.mdiFormatAlignCenter, hotkey: 'Mod-Shift-e' },
+  right: { icon: mdi.mdiFormatAlignRight, hotkey: 'Mod-Shift-r' },
+  justify: { icon: mdi.mdiFormatAlignJustify, hotkey: 'Mod-Shift-j' },
+}
+
+// A function, not a computed: `isActive` reads the editor state, which Vue does not track
+function currentAlignmentIcon(): string {
+  const active = props.alignments.find(alignment => editor.value.isActive({ textAlign: alignment }))
+
+  return alignmentOptions[active ?? props.alignments[0] ?? 'left'].icon
+}
+</script>
+
+<template>
+  <VBtn
+    :id="`tiptapify-align-button-${editor.instanceId}`"
+    class="tiptapify-dropdown-button"
+    :variant="variantBtn"
+    height="32"
+  >
+    <Tooltip :label="t('alignment')" />
+    <BtnIcon :icon="`mdiSvg:${currentAlignmentIcon()}`" />
+    <BtnIcon :icon="`mdiSvg:${mdi.mdiChevronDown}`" class="tiptapify-dropdown-button__chevron" />
+  </VBtn>
+
+  <VMenu :activator="`#tiptapify-align-button-${editor.instanceId}`" content-class="tiptapify-menu">
+    <VList density="compact">
+      <VListItem
+        v-for="alignment in alignments"
+        :key="alignment"
+        link
+        :active="editor.isActive({ textAlign: alignment })"
+        @click="editor.chain().focus().toggleTextAlign(alignment).run()"
+      >
+        <Tooltip :label="t(`alignments.${alignment}`)" :hotkey="alignmentOptions[alignment].hotkey" />
+        <template #prepend>
+          <BtnIcon :icon="`mdiSvg:${alignmentOptions[alignment].icon}`" />
+        </template>
+        <VListItemTitle>{{ t(`alignments.${alignment}`) }}</VListItemTitle>
+      </VListItem>
+    </VList>
+  </VMenu>
+</template>

package/src/extensions/components/list/bullet/Button.vue

@@ -8,8 +8,12 @@ import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { computed, inject, ref, Ref, watch } from 'vue'
 
 import { ComposerTranslation } from 'vue-i18n'
+import ListStyleButton from '@tiptapify/extensions/components/list/styles/ListStyleButton.vue'
+import { bulletListStyles } from '@tiptapify/extensions/components/list/styles'
 
 const props = defineProps({
+  // The marker styles dropdown (`bulletList:styles`) instead of the separate list types below
+  withStyles: { type: Boolean, default: false },
   withDisc: { type: Boolean, default: true },
   withCircle: { type: Boolean, default: true },
   withSquare: { type: Boolean, default: true }
@@ -83,7 +87,18 @@ watch(() => bulletLists.value, () => {
 </script>
 
 <template>
-  <VMenu v-if="isMenu">
+  <ListStyleButton
+    v-if="withStyles"
+    list-type="bulletList"
+    :icon="mdi.mdiFormatListBulleted"
+    :label="t('lists.bullet')"
+    hotkey="Mod-Shift-8"
+    :presets="bulletListStyles"
+    :disabled="!editor.can().chain().focus().toggleBulletList().run()"
+    @toggle="editor.commands.toggleBulletList()"
+  />
+
+  <VMenu v-else-if="isMenu" content-class="tiptapify-menu">
     <template #activator="{ props: menuProps }">
       <VBtn
         :color="buttonActive ? 'primary' : ''"

package/src/extensions/components/list/numbered/Button.vue

@@ -8,6 +8,13 @@ import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { computed, inject, Ref } from 'vue'
 
 import { ComposerTranslation } from 'vue-i18n'
+import ListStyleButton from '@tiptapify/extensions/components/list/styles/ListStyleButton.vue'
+import { orderedListStyles } from '@tiptapify/extensions/components/list/styles'
+
+defineProps({
+  // The numbering styles dropdown (`orderedList:styles`)
+  withStyles: { type: Boolean, default: false },
+})
 
 const { variantBtn } = useTiptapifyConfig()
 
@@ -25,7 +32,19 @@ const buttonDisabled = computed(() => {
 </script>
 
 <template>
+  <ListStyleButton
+    v-if="withStyles"
+    list-type="orderedList"
+    :icon="mdi.mdiFormatListNumbered"
+    :label="t('lists.numbered')"
+    hotkey="Mod-Shift-7"
+    :presets="orderedListStyles"
+    :disabled="buttonDisabled"
+    @toggle="editor.commands.toggleOrderedList()"
+  />
+
   <VBtn
+    v-else
     :color="editor.isActive('orderedList') ? 'primary' : ''"
     :disabled="buttonDisabled"
     :variant="variantBtn"

package/src/extensions/components/list/styles/ListStyleButton.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import { Editor } from '@tiptap/vue-3'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { ListStylePreset, ListType } from '@tiptapify/extensions/components/list/styles'
+import { inject, PropType, Ref } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+
+// A list button with a dropdown of marker styles next to it, like TinyMCE's advlist
+const props = defineProps({
+  listType: { type: String as PropType<ListType>, required: true },
+  icon: { type: String, required: true },
+  label: { type: String, required: true },
+  hotkey: { type: String, default: '' },
+  presets: { type: Array as PropType<ListStylePreset[]>, required: true },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['toggle'])
+
+const { variantBtn } = useTiptapifyConfig()
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+function isPresetActive(preset: ListStylePreset): boolean {
+  return editor.value.isActive(props.listType) && (editor.value.getAttributes(props.listType).listStyleType ?? null) === preset.value
+}
+
+function presetLabel(preset: ListStylePreset): string {
+  return t(`lists.styles.${(preset.value ?? 'default').replace('-', '_')}`)
+}
+</script>
+
+<template>
+  <div class="tiptapify-list-style-button">
+    <VBtn
+      :color="editor.isActive(listType) ? 'primary' : ''"
+      :disabled="disabled"
+      :variant="variantBtn"
+      size="32"
+      @click="emit('toggle')"
+    >
+      <Tooltip :label="label" :hotkey="hotkey" />
+      <BtnIcon :icon="`mdiSvg:${icon}`" />
+    </VBtn>
+
+    <VMenu content-class="tiptapify-menu">
+      <template #activator="{ props: menuProps }">
+        <VBtn
+          class="tiptapify-list-style-button__chevron"
+          :disabled="disabled"
+          :variant="variantBtn"
+          height="32"
+          width="16"
+          v-bind="menuProps"
+        >
+          <BtnIcon :icon="`mdiSvg:${mdi.mdiChevronDown}`" />
+        </VBtn>
+      </template>
+
+      <div class="tiptapify-list-style-grid">
+        <button
+          v-for="preset in presets"
+          :key="preset.value ?? 'default'"
+          type="button"
+          class="tiptapify-list-style-grid__item"
+          :class="{ 'tiptapify-list-style-grid__item--active': isPresetActive(preset) }"
+          :title="presetLabel(preset)"
+          :aria-label="presetLabel(preset)"
+          @click="editor.chain().focus().setListStyle(listType, preset.value).run()"
+        >
+          <span v-for="(marker, index) in preset.markers" :key="index" class="tiptapify-list-style-grid__line">
+            <span class="tiptapify-list-style-grid__marker">{{ marker }}</span>
+            <span class="tiptapify-list-style-grid__bar" />
+          </span>
+        </button>
+      </div>
+    </VMenu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-list-style-button {
+  display: flex;
+  align-items: center;
+
+  :deep(.tiptapify-list-style-button__chevron) {
+    min-width: 16px !important;
+    padding: 0 !important;
+
+    .v-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+/* Teleported with the menu, so not scoped */
+.tiptapify-list-style-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 64px);
+  gap: 6px;
+  padding: 6px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  background: rgb(var(--v-theme-surface));
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+.tiptapify-list-style-grid__item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 6px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(var(--v-theme-on-surface), 0.05);
+  }
+
+  &--active {
+    border-color: rgb(var(--v-theme-primary));
+    background: rgba(var(--v-theme-primary), 0.06);
+  }
+}
+
+.tiptapify-list-style-grid__line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tiptapify-list-style-grid__marker {
+  min-width: 16px;
+  font-size: 10px;
+  line-height: 10px;
+  text-align: right;
+}
+
+.tiptapify-list-style-grid__bar {
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(var(--v-theme-on-surface), 0.18);
+}
+</style>

package/src/extensions/components/list/styles/index.ts

@@ -0,0 +1,76 @@
+import { Extension } from '@tiptap/core'
+
+export type ListType = 'bulletList' | 'orderedList'
+
+export interface ListStylePreset {
+  // CSS `list-style-type`; null is the browser default (disc / decimal)
+  value: string | null
+  markers: [string, string, string]
+}
+
+export const bulletListStyles: ListStylePreset[] = [
+  { value: null, markers: ['●', '●', '●'] },
+  { value: 'circle', markers: ['○', '○', '○'] },
+  { value: 'square', markers: ['■', '■', '■'] },
+]
+
+export const orderedListStyles: ListStylePreset[] = [
+  { value: null, markers: ['1.', '2.', '3.'] },
+  { value: 'lower-alpha', markers: ['a.', 'b.', 'c.'] },
+  { value: 'lower-greek', markers: ['α.', 'β.', 'γ.'] },
+  { value: 'lower-roman', markers: ['i.', 'ii.', 'iii.'] },
+  { value: 'upper-alpha', markers: ['A.', 'B.', 'C.'] },
+  { value: 'upper-roman', markers: ['I.', 'II.', 'III.'] },
+]
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    listStyle: {
+      // Turns the selection into a list of this type, if it is not one yet, with this marker style
+      setListStyle: (listType: ListType, listStyleType: string | null) => ReturnType
+    }
+  }
+}
+
+/**
+ * The marker style of bullet and numbered lists, saved as inline `list-style-type` the way TinyMCE
+ * did, so lists styled there keep their style and every site renders it without extra CSS.
+ */
+export const ListStyle = Extension.create({
+  name: 'listStyle',
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['bulletList', 'orderedList'],
+        attributes: {
+          listStyleType: {
+            default: null,
+            parseHTML: (element: HTMLElement) => element.style.listStyleType || null,
+            renderHTML: (attributes: Record<string, unknown>) => (
+              attributes.listStyleType ? { style: `list-style-type: ${attributes.listStyleType}` } : {}
+            ),
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    return {
+      setListStyle: (listType: ListType, listStyleType: string | null) => ({ editor, chain }) => {
+        const command = chain().focus()
+
+        if (!editor.isActive(listType)) {
+          if (listType === 'bulletList') {
+            command.toggleBulletList()
+          } else {
+            command.toggleOrderedList()
+          }
+        }
+
+        return command.updateAttributes(listType, { listStyleType }).run()
+      },
+    }
+  },
+})

package/src/extensions/components/list/styles/listStyle.test.ts

@@ -0,0 +1,44 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/vue-3'
+import { editorExtensions } from '@tiptapify/components/editorExtensions'
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({ element: document.createElement('div'), content, extensions: editorExtensions('', false, []) })
+
+  return editor
+}
+
+describe('list styles', () => {
+  afterEach(() => {
+    editor?.destroy()
+    editor = null
+  })
+
+  it('turns a paragraph into a numbered list with the chosen numbering', () => {
+    createEditor('<p>one</p>')
+    editor!.commands.setTextSelection(2)
+
+    editor!.commands.setListStyle('orderedList', 'lower-roman')
+
+    expect(editor!.getHTML()).toBe('<ol style="list-style-type: lower-roman;"><li><p>one</p></li></ol>')
+  })
+
+  it('changes the marker of an existing bullet list and resets it to the default', () => {
+    createEditor('<ul><li><p>one</p></li></ul>')
+    editor!.commands.setTextSelection(3)
+
+    editor!.commands.setListStyle('bulletList', 'square')
+    expect(editor!.getHTML()).toContain('<ul style="list-style-type: square;">')
+
+    editor!.commands.setListStyle('bulletList', null)
+    expect(editor!.getHTML()).toBe('<ul><li><p>one</p></li></ul>')
+  })
+
+  it('reads the list style TinyMCE saved', () => {
+    createEditor('<ol style="list-style-type: upper-alpha;"><li><p>one</p></li></ol>')
+
+    expect(editor!.getJSON().content![0].attrs).toMatchObject({ listStyleType: 'upper-alpha' })
+  })
+})

package/src/extensions/components/media/image/ImageDialog.vue

@@ -150,7 +150,7 @@ onUnmounted(() => {
             <VTextField
               v-model="attrs.title"
               density="comfortable"
-              :label="t('dialog.image.title')"
+              :label="t('dialog.image.caption')"
             />
           </div>
         </div>

package/src/extensions/components/media/image/caption.test.ts

@@ -0,0 +1,122 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { Editor } from '@tiptap/vue-3'
+import { Document } from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
+import { ImageWithCaption } from '@tiptapify/extensions/components/media/image/caption'
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      TiptapifyImage,
+      ImageWithCaption.configure({
+        resize: { enabled: true, alwaysPreserveAspectRatio: true },
+        captionPlaceholder: 'Add a caption',
+      }),
+    ],
+  })
+
+  return editor
+}
+
+function caption(): HTMLInputElement {
+  return editor!.view.dom.querySelector('.tiptapify-image-caption') as HTMLInputElement
+}
+
+function typeCaption(value: string) {
+  caption().value = value
+  caption().dispatchEvent(new Event('input'))
+}
+
+describe('image caption', () => {
+  afterEach(() => {
+    editor?.destroy()
+    editor = null
+  })
+
+  it('shows the image title as the caption under the image', () => {
+    createEditor('<img src="https://example.com/a.png" title="Kyiv at night">')
+
+    expect(caption().value).toBe('Kyiv at night')
+    expect(caption().placeholder).toBe('Add a caption')
+  })
+
+  it('saves the typed caption as the figure caption', () => {
+    createEditor('<img src="https://example.com/a.png">')
+
+    typeCaption('Kyiv at night')
+
+    expect(editor!.getHTML()).toBe('<figure><img src="https://example.com/a.png"><figcaption>Kyiv at night</figcaption></figure>')
+  })
+
+  it('saves an image without a caption as a figure without figcaption', () => {
+    createEditor('<img src="https://example.com/a.png" title="Kyiv at night">')
+
+    typeCaption('  ')
+
+    expect(editor!.getHTML()).toBe('<figure><img src="https://example.com/a.png"></figure>')
+  })
+
+  it('loads a figure with its caption and image attributes', () => {
+    createEditor('<figure><img src="https://example.com/a.png" alt="Kyiv" width="640"><figcaption> Kyiv at night </figcaption></figure>')
+
+    expect(caption().value).toBe('Kyiv at night')
+    expect(editor!.getJSON().content![0].attrs).toMatchObject({ src: 'https://example.com/a.png', alt: 'Kyiv', width: 640, title: 'Kyiv at night' })
+  })
+
+  it('keeps consecutive figures as separate images', () => {
+    createEditor('<figure><img src="https://example.com/a.png"></figure><figure><img src="https://example.com/b.png"></figure>')
+
+    expect(editor!.getJSON().content!.map(node => node.type)).toEqual(['image', 'image'])
+  })
+
+  it('updates the caption when the title is changed elsewhere', () => {
+    createEditor('<img src="https://example.com/a.png">')
+
+    editor!.chain().setNodeSelection(0).updateAttributes('image', { title: 'From the dialog' }).run()
+
+    expect(caption().value).toBe('From the dialog')
+  })
+
+  it('opens the image dialog for this image on double click', () => {
+    createEditor('<p>text</p><img src="https://example.com/a.png" alt="Kyiv">')
+    const listener = vi.fn()
+    window.addEventListener('tiptapify-show-tiptapifyImage', listener)
+
+    editor!.view.dom.querySelector('[data-resize-wrapper]')!.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+
+    window.removeEventListener('tiptapify-show-tiptapifyImage', listener)
+    expect(listener).toHaveBeenCalledOnce()
+    expect(listener.mock.calls[0][0].detail.image).toMatchObject({ src: 'https://example.com/a.png', alt: 'Kyiv' })
+  })
+
+  it('moves the cursor to the text after the image on Enter', () => {
+    createEditor('<img src="https://example.com/a.png"><p>after</p>')
+
+    caption().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+
+    const { $from } = editor!.state.selection
+    expect($from.parent.textContent).toBe('after')
+  })
+
+  it('floats the image with the align attribute', () => {
+    createEditor('<img src="https://example.com/a.png" style="float: right">')
+    const nodeView = editor!.view.nodeDOM(0) as HTMLElement
+
+    expect(nodeView.dataset.align).toBe('right')
+    expect(editor!.getHTML()).toBe('<figure><img src="https://example.com/a.png" style="float: right;"></figure>')
+
+    editor!.chain().setNodeSelection(0).updateAttributes('image', { align: null }).run()
+
+    expect(nodeView.dataset.align).toBeUndefined()
+    expect(editor!.getHTML()).toBe('<figure><img src="https://example.com/a.png"></figure>')
+  })
+})