tiptapify 0.3.1 → 0.3.3

package/src/components/UI/TiptapifyDialog.vue

@@ -17,6 +17,15 @@ defineExpose({ open, close })
 const emits = defineEmits(['closeDialog'])
 
 const showDialog = ref<boolean>(false)
+
+const field = { variant: 'outlined', density: 'comfortable' }
+const fieldDefaults = {
+  VTextField: field,
+  VTextarea: field,
+  VSelect: field,
+  VAutocomplete: field,
+  VCombobox: field,
+}
 const movableHandler = ref(null)
 
 function open() {
@@ -141,48 +150,105 @@ onBeforeUnmount(() => {
 
 <template>
   <VDialog v-model="showDialog" :max-width="maxWidth" :fullscreen="fullscreen" @click:outside="emitClose">
-    <VCard>
+    <VCard class="tiptapify-dialog" :class="{ 'tiptapify-dialog--fullscreen': fullscreen }">
       <VCardTitle
         ref="movableHandler"
         class="tiptapify-dialog-header"
         :class="!fullscreen ? 'tiptapify-movable-handler' : ''"
         style="user-select: none;"
       >
-        <VLabel>
+        <span class="tiptapify-dialog-title">
           {{ title ?? t(`dialog.${module}.title`) }}
-        </VLabel>
+        </span>
 
         <VSpacer />
 
-        <VBtn density="compact" class="tiptapify-dialog-close" variant="elevated" elevation="4" icon @click="emitClose">
-          <VIcon size="x-small" :icon="`mdiSvg:${mdi.mdiClose}`" />
+        <VBtn class="tiptapify-dialog-close" variant="text" size="32" icon @click="emitClose">
+          <VIcon size="20" :icon="`mdiSvg:${mdi.mdiClose}`" />
         </VBtn>
       </VCardTitle>
 
-      <VDivider />
-
-      <slot name="content" />
+      <!-- Fields a dialog does not style itself get the light outlined look -->
+      <VDefaultsProvider :defaults="fieldDefaults">
+        <slot name="content" />
 
-      <slot name="actions" />
+        <slot name="actions" />
+      </VDefaultsProvider>
     </VCard>
   </VDialog>
 </template>
 
 <style lang="scss" scoped>
+  /* A light card in the spirit of Flux modals: generous padding, soft corners and shadow, no rules */
+  .tiptapify-dialog {
+    border-radius: 12px !important;
+    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
+
+    &.tiptapify-dialog--fullscreen {
+      border-radius: 0 !important;
+    }
+
+    :deep(.v-card-text) {
+      padding: 4px 20px !important;
+    }
+
+    :deep(.v-field--variant-outlined) {
+      border-radius: 8px;
+
+      .v-field__outline__start {
+        border-start-start-radius: 8px;
+        border-end-start-radius: 8px;
+      }
+
+      .v-field__outline__end {
+        border-start-end-radius: 8px;
+        border-end-end-radius: 8px;
+      }
+    }
+
+    :deep(.v-card-actions) {
+      gap: 8px;
+      padding: 16px 20px 20px !important;
+    }
+
+    :deep(.v-card-actions .v-btn),
+    :deep(.tiptapify-dialog-actions .v-btn) {
+      min-height: 38px;
+      padding-inline: 16px;
+      border-radius: 8px;
+      font-weight: 500;
+      letter-spacing: normal;
+      text-transform: none;
+    }
+  }
+
   .tiptapify-dialog-header {
-    align-items: center;
     display: flex;
+    align-items: center;
+    padding: 16px 12px 12px 20px !important;
+  }
+
+  .tiptapify-dialog-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: normal;
+  }
+
+  .tiptapify-dialog-close {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   }
 
   :deep(.v-overlay__content) {
     position: fixed;
   }
 
-  .tiptapify-movable-handler, :deep(.tiptapify-movable-handler > *) {
+  .tiptapify-movable-handler {
     cursor: move;
   }
 
   .tiptapify-dialog-close:hover {
     cursor: pointer;
   }
-</style>
+</style>

package/src/components/editorExtensions.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest'
+import { editorExtensions } from '@tiptapify/components/editorExtensions'
+
+describe('editor extensions', () => {
+  it('selects a link on click instead of opening it', () => {
+    const link = editorExtensions('', false, []).find(extension => extension.name === 'link')
+
+    expect(link?.options).toMatchObject({ openOnClick: false, enableClickSelection: true })
+  })
+})

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' })
+  })
+})