tiptapify 0.3.2 → 0.3.4

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

@@ -3,19 +3,25 @@
 import * as mdi from '@mdi/js'
 import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import SkinScope from '@tiptapify/components/SkinScope.vue'
 import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { menuContentClass } from '@tiptapify/skins/menu'
 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 }
 })
 
-const { variantBtn } = useTiptapifyConfig()
+const { variantBtn, shape } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -83,7 +89,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="menuContentClass(shape.menu === 'soft')">
     <template #activator="{ props: menuProps }">
       <VBtn
         :color="buttonActive ? 'primary' : ''"
@@ -97,20 +114,22 @@ watch(() => bulletLists.value, () => {
       </VBtn>
     </template>
 
-    <VList>
-      <VListItem
-        v-for="(bulletList, key) in menuItems"
-        :key="key"
-        link
-        :active="editor.isActive(bulletList.name)"
-        @click="toggleList(bulletList.name)"
-      >
-        <Tooltip :label="t('lists.bullet')" />
-        <VListItemTitle class="d-flex justify-center align-center">
-          <BtnIcon :icon="bulletList.icon" />
-        </VListItemTitle>
-      </VListItem>
-    </VList>
+    <SkinScope>
+      <VList>
+        <VListItem
+          v-for="(bulletList, key) in menuItems"
+          :key="key"
+          link
+          :active="editor.isActive(bulletList.name)"
+          @click="toggleList(bulletList.name)"
+        >
+          <Tooltip :label="t('lists.bullet')" />
+          <VListItemTitle class="d-flex justify-center align-center">
+            <BtnIcon :icon="bulletList.icon" />
+          </VListItemTitle>
+        </VListItem>
+      </VList>
+    </SkinScope>
   </VMenu>
 
   <VBtn

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 SkinScope from '@tiptapify/components/SkinScope.vue'
+import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
+import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+import { menuContentClass } from '@tiptapify/skins/menu'
+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, shape } = 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="menuContentClass(shape.menu === 'soft')">
+      <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>
+
+      <SkinScope>
+        <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>
+      </SkinScope>
+    </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. The pastel skin of the grid lives in src/skins/menu.css. */
+.tiptapify-list-style-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 64px);
+  gap: 6px;
+  padding: 4px;
+}
+
+.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>')
+  })
+})