tiptapify 0.3.5 → 0.4.0

package/src/extensions/components/media/video/videoFile.test.ts

@@ -0,0 +1,98 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { Document } from '@tiptap/extension-document'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { VideoFile } from '@tiptapify/extensions/components/media/video/videoFile'
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, VideoFile],
+  })
+
+  return editor
+}
+
+function videoAttrs() {
+  return editor!.state.doc.firstChild!.attrs
+}
+
+describe('video file node', () => {
+  afterEach(() => {
+    editor?.destroy()
+    editor = null
+  })
+
+  it('renders a responsive video with controls by default', () => {
+    createEditor('')
+    editor!.commands.setContent('')
+    editor!.commands.setVideoFile({ src: 'https://cdn.example.com/a.mp4' })
+
+    expect(editor!.getHTML()).toContain(
+      '<video src="https://cdn.example.com/a.mp4" controls="" playsinline="" preload="metadata"></video>',
+    )
+  })
+
+  it('does not play by itself in the editor, while the saved video keeps autoplay', () => {
+    createEditor('<video src="https://cdn.example.com/a.mp4" autoplay muted controls></video>')
+
+    const video = editor!.view.dom.querySelector('video')!
+    expect(video.hasAttribute('autoplay')).toBe(false)
+    expect(video.getAttribute('src')).toBe('https://cdn.example.com/a.mp4')
+    expect(editor!.getHTML()).toContain('autoplay=""')
+  })
+
+  it('renders every option and parses it back', () => {
+    createEditor('')
+    editor!.commands.setVideoFile({
+      src: 'https://cdn.example.com/a.mp4',
+      poster: 'https://cdn.example.com/a.jpg',
+      controls: false,
+      autoplay: true,
+      loop: true,
+      start: 42,
+      width: 640,
+      height: 360,
+    })
+
+    const html = editor!.getHTML()
+
+    expect(html).toContain('src="https://cdn.example.com/a.mp4#t=42"')
+    expect(html).toContain('poster="https://cdn.example.com/a.jpg"')
+    expect(html).toContain('autoplay="" muted=""')
+    expect(html).toContain('loop=""')
+    expect(html).toContain('width="640" height="360"')
+    expect(html).not.toContain('controls')
+
+    editor!.destroy()
+    createEditor(html)
+
+    expect(videoAttrs()).toEqual({
+      src: 'https://cdn.example.com/a.mp4',
+      poster: 'https://cdn.example.com/a.jpg',
+      controls: false,
+      autoplay: true,
+      loop: true,
+      start: 42,
+      width: 640,
+      height: 360,
+    })
+    expect(editor!.getHTML()).toBe(html)
+  })
+
+  it('parses a video without options', () => {
+    createEditor('<video src="/a.mp4"></video>')
+
+    expect(videoAttrs()).toMatchObject({ src: '/a.mp4', controls: false, autoplay: false, loop: false, start: 0, width: null })
+  })
+
+  it('reads the file from a <source> child', () => {
+    createEditor('<video controls><source src="/a.webm#t=7" type="video/webm"></video>')
+
+    expect(videoAttrs()).toMatchObject({ src: '/a.webm', start: 7, controls: true })
+  })
+})

package/src/extensions/components/media/video/videoFile.ts

@@ -0,0 +1,142 @@
+import { Node } from '@tiptap/core'
+
+export type VideoFileAttrs = {
+  src: string,
+  poster?: string | null,
+  controls?: boolean,
+  // Autoplay renders `autoplay muted`: browsers only autoplay muted videos
+  autoplay?: boolean,
+  loop?: boolean,
+  // Seconds, 0 for none; stored on the src as the `#t=` media fragment
+  start?: number,
+  // null for a responsive (full width, 16:9) video
+  width?: number | null,
+  height?: number | null,
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    video: {
+      setVideoFile: (attrs: VideoFileAttrs) => ReturnType
+    }
+  }
+}
+
+function sourceOf(element: HTMLElement): string | null {
+  return element.getAttribute('src') ?? element.querySelector('source[src]')?.getAttribute('src') ?? null
+}
+
+/**
+ * Splits a `#t=<seconds>` media fragment off a video URL.
+ */
+export function splitStartFragment(url: string | null): { src: string | null, start: number } {
+  const match = url?.match(/^(.*?)#t=(?:npt:)?(\d+(?:\.\d+)?)(?:,[\d.]*)?$/)
+
+  if (!url || !match) {
+    return { src: url, start: 0 }
+  }
+
+  return { src: match[1], start: Math.floor(Number(match[2])) }
+}
+
+function parseDimension(element: HTMLElement, name: string): number | null {
+  const value = Number.parseInt(element.getAttribute(name) ?? '', 10)
+
+  return value > 0 ? value : null
+}
+
+/**
+ * An uploaded (or linked) video file, played by the browser's own `<video>` player.
+ */
+export const VideoFile = Node.create({
+  name: 'video',
+
+  group: 'block',
+
+  atom: true,
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: element => splitStartFragment(sourceOf(element)).src,
+        renderHTML: attributes => ({
+          src: attributes.start ? `${attributes.src}#t=${attributes.start}` : attributes.src,
+        }),
+      },
+      start: {
+        default: 0,
+        parseHTML: element => splitStartFragment(sourceOf(element)).start,
+        rendered: false,
+      },
+      poster: {
+        default: null,
+      },
+      controls: {
+        default: true,
+        parseHTML: element => element.hasAttribute('controls'),
+        renderHTML: attributes => (attributes.controls ? { controls: '' } : {}),
+      },
+      autoplay: {
+        default: false,
+        parseHTML: element => element.hasAttribute('autoplay'),
+        renderHTML: attributes => (attributes.autoplay ? { autoplay: '', muted: '' } : {}),
+      },
+      loop: {
+        default: false,
+        parseHTML: element => element.hasAttribute('loop'),
+        renderHTML: attributes => (attributes.loop ? { loop: '' } : {}),
+      },
+      width: {
+        default: null,
+        parseHTML: element => parseDimension(element, 'width'),
+      },
+      height: {
+        default: null,
+        parseHTML: element => parseDimension(element, 'height'),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      { tag: 'video[src]' },
+      // A video with its file in a <source> child
+      { tag: 'video', getAttrs: element => (element.querySelector('source[src]') ? null : false) },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['video', { ...HTMLAttributes, playsinline: '', preload: 'metadata' }]
+  },
+
+  // In the editor the video never starts by itself (autoplay is for the published page), and its block
+  // takes the clicks to be selected while the player takes none (see the editor styles)
+  addNodeView() {
+    return ({ HTMLAttributes }) => {
+      const dom = document.createElement('div')
+      dom.className = 'tiptapify-video'
+
+      const video = document.createElement('video')
+      const attributes = { ...HTMLAttributes, playsinline: '', preload: 'metadata' }
+
+      for (const [name, value] of Object.entries(attributes)) {
+        if (name !== 'autoplay' && value !== null && value !== undefined) {
+          video.setAttribute(name, String(value))
+        }
+      }
+
+      dom.append(video)
+
+      return { dom }
+    }
+  },
+
+  addCommands() {
+    return {
+      setVideoFile: attrs => ({ commands }) => commands.insertContent({ type: this.name, attrs }),
+    }
+  },
+})

package/src/extensions/components/misc/fullscreen/Button.test.ts

@@ -0,0 +1,55 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { App, createApp, h, nextTick } from 'vue'
+import { createVuetify } from 'vuetify'
+import { createI18n } from 'vue-i18n'
+import Tiptapify from '@tiptapify/components/Tiptapify.vue'
+import { messages } from '@tiptapify/i18n'
+
+// jsdom has no `visualViewport` nor `ResizeObserver`; Vuetify's overlays read them
+if (!('visualViewport' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).visualViewport = {
+    scale: 1, offsetLeft: 0, offsetTop: 0, addEventListener: () => {}, removeEventListener: () => {},
+  }
+}
+if (!('ResizeObserver' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+let app: App | null = null
+
+async function flush() {
+  for (let i = 0; i < 8; i++) {
+    await nextTick()
+  }
+}
+
+afterEach(() => {
+  app?.unmount()
+  app = null
+  document.body.innerHTML = ''
+})
+
+describe('fullscreen', () => {
+  it('keeps the skin of the editor: its container carries the root classes and tokens', async () => {
+    app = createApp({ setup: () => () => h(Tiptapify, { skin: 'pastel', items: ['fullscreen'] }) })
+    app.use(createVuetify())
+    app.use(createI18n({ legacy: false, locale: 'en', fallbackLocale: 'en', messages }))
+    app.mount(document.body.appendChild(document.createElement('div')))
+    await flush()
+
+    const root = document.querySelector<HTMLElement>('[id^="tiptapify-editor-"]')!
+    document.querySelector<HTMLButtonElement>('.tiptapify-toolbar .v-btn')!.click()
+    await flush()
+
+    const container = document.querySelector<HTMLElement>('[id^="tiptapify-editor-fullscreen-"]')!
+    expect(container.classList).toContain('tiptapify-skin-pastel')
+    expect(container.classList).toContain('tiptapify-shape-groups-flat')
+    expect([...container.classList]).toEqual([...root.classList])
+    expect(container.getAttribute('style')).toBe(root.getAttribute('style'))
+    expect(container.querySelector('.tiptapify-frame')).not.toBeNull()
+  })
+})

package/src/extensions/components/misc/fullscreen/Button.vue

@@ -9,7 +9,7 @@ import { inject, nextTick, ref, Ref } from 'vue'
 
 import { ComposerTranslation } from 'vue-i18n'
 
-const { variantBtn } = useTiptapifyConfig()
+const { variantBtn, rootClasses, tokens } = useTiptapifyConfig()
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
@@ -54,7 +54,7 @@ async function changeEditorContainer(source: string, target: string) {
 
   <VDialog v-model="showDialog" fullscreen @close="dialogClose()" @update:model-value="!showDialog ? dialogClose() : ''">
     <VCard>
-      <div :id="`tiptapify-editor-fullscreen-${editor?.instanceId}`" />
+      <div :id="`tiptapify-editor-fullscreen-${editor?.instanceId}`" :class="rootClasses" :style="tokens" />
     </VCard>
   </VDialog>
 </template>

package/src/extensions/components/style/StyleColor.test.ts

@@ -0,0 +1,255 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { App, computed, createApp, h, nextTick, provide, shallowRef } from 'vue'
+import { createVuetify } from 'vuetify'
+import { Editor } from '@tiptap/vue-3'
+import { Document } from '@tiptap/extension-document'
+import { Highlight } from '@tiptap/extension-highlight'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { TextStyleKit } from '@tiptap/extension-text-style'
+import { UndoRedo } from '@tiptap/extensions'
+import StyleColor from '@tiptapify/extensions/components/style/StyleColor.vue'
+import { ColorKind, loadRecent } from '@tiptapify/extensions/components/style/color/colors'
+
+// jsdom has no `visualViewport`; Vuetify's overlay positioning reads it
+if (!('visualViewport' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).visualViewport = {
+    scale: 1,
+    offsetLeft: 0,
+    offsetTop: 0,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }
+}
+
+// Nor `ResizeObserver`, which the menu's positioning reads
+if (!('ResizeObserver' in globalThis)) {
+  ;(globalThis as Record<string, unknown>).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+}
+
+let app: App | null = null
+let editor: Editor | null = null
+
+async function flush() {
+  for (let i = 0; i < 5; i++) {
+    await nextTick()
+  }
+}
+
+async function openPicker(kind: ColorKind, content = '<p>Hello</p>'): Promise<HTMLElement> {
+  const instance = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, TextStyleKit, Highlight.configure({ multicolor: true }), UndoRedo],
+  })
+  instance.commands.selectAll()
+  editor = instance
+
+  app = createApp({
+    setup() {
+      provide('tiptapifyEditor', shallowRef(instance))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+
+      const color = computed(() => String(instance.getAttributes(kind === 'text' ? 'textStyle' : 'highlight').color ?? ''))
+
+      return () => [
+        h('button', { id: 'color-activator' }, 'open'),
+        h(StyleColor, { kind, activator: '#color-activator', color: color.value }),
+      ]
+    },
+  })
+  app.use(createVuetify())
+  app.mount(document.body.appendChild(document.createElement('div')))
+  await flush()
+
+  document.querySelector<HTMLElement>('#color-activator')!.click()
+  await flush()
+
+  return document.querySelector<HTMLElement>('.tiptapify-color')!
+}
+
+function swatch(popover: HTMLElement, label: string): HTMLButtonElement {
+  return popover.querySelector<HTMLButtonElement>(`.tiptapify-color__swatch[aria-label="${label}"]`)!
+}
+
+function textColor(): string | undefined {
+  return editor!.getAttributes('textStyle').color
+}
+
+function isOpen(): boolean {
+  return !!document.querySelector('.tiptapify-color')?.closest('.v-overlay--active')
+}
+
+async function key(element: HTMLElement, name: string) {
+  element.dispatchEvent(new KeyboardEvent('keydown', { key: name, bubbles: true, cancelable: true }))
+  await flush()
+}
+
+async function typeHex(popover: HTMLElement, value: string): Promise<HTMLInputElement> {
+  const input = popover.querySelector<HTMLInputElement>('.tiptapify-color__hex input')!
+  input.value = value
+  input.dispatchEvent(new Event('input'))
+  await flush()
+
+  return input
+}
+
+afterEach(() => {
+  app?.unmount()
+  app = null
+  editor?.destroy()
+  editor = null
+  document.body.innerHTML = ''
+  localStorage.clear()
+  delete (globalThis as Record<string, unknown>).EyeDropper
+  vi.restoreAllMocks()
+})
+
+describe('StyleColor', () => {
+  it('previews a hovered color outside undo and applies a click as one undo step', async () => {
+    const popover = await openPicker('text', '<p><span style="color: #1d4ed8">Hello</span></p>')
+    const red = swatch(popover, 'style.color.names.dark_red')
+
+    expect(swatch(popover, 'style.color.names.dark_blue').getAttribute('aria-pressed')).toBe('true')
+
+    red.dispatchEvent(new MouseEvent('mouseenter'))
+    expect(textColor()).toBe('#b91c1c')
+    expect(editor!.can().undo()).toBe(false)
+
+    red.dispatchEvent(new MouseEvent('mouseleave'))
+    expect(textColor()).toBe('#1d4ed8')
+
+    red.dispatchEvent(new MouseEvent('mouseenter'))
+    red.click()
+    await flush()
+
+    expect(textColor()).toBe('#b91c1c')
+    expect(isOpen()).toBe(false)
+    expect(loadRecent('text')).toEqual(['#b91c1c'])
+
+    editor!.commands.undo()
+    expect(textColor()).toBe('#1d4ed8')
+  })
+
+  it('removes the color with the first cell', async () => {
+    const popover = await openPicker('text', '<p><span style="color: #1d4ed8">Hello</span></p>')
+
+    swatch(popover, 'style.color.default').click()
+    await flush()
+
+    expect(textColor()).toBeFalsy()
+  })
+
+  it('shows recent colors per kind', async () => {
+    localStorage.setItem('tiptapify:recent-colors:highlight', JSON.stringify(['#123456']))
+    const popover = await openPicker('highlight')
+
+    expect(popover.textContent).toContain('style.color.recent')
+    swatch(popover, '#123456').click()
+    await flush()
+
+    expect(editor!.getAttributes('highlight').color).toBe('#123456')
+  })
+
+  it('moves through the swatches with arrow keys, and Esc restores the original color', async () => {
+    const popover = await openPicker('text', '<p><span style="color: #1d4ed8">Hello</span></p>')
+    const blue = swatch(popover, 'style.color.names.blue')
+    blue.focus()
+
+    await key(blue, 'ArrowRight')
+    expect(document.activeElement).toBe(swatch(popover, 'style.color.names.purple'))
+    expect(textColor()).toBe('#a855f7')
+
+    await key(document.activeElement as HTMLElement, 'ArrowUp')
+    expect(textColor()).toBe('#7e22ce')
+
+    await key(document.activeElement as HTMLElement, 'Escape')
+    expect(isOpen()).toBe(false)
+    expect(textColor()).toBe('#1d4ed8')
+    expect(editor!.can().undo()).toBe(false)
+  })
+
+  it('applies a focused swatch with Enter', async () => {
+    const popover = await openPicker('highlight')
+    const amber = swatch(popover, 'style.color.names.amber')
+    amber.focus()
+
+    await key(amber, 'Enter')
+
+    expect(editor!.getAttributes('highlight').color).toBe('#fcd34d')
+    expect(isOpen()).toBe(false)
+  })
+
+  it('applies a typed hex color and keeps an invalid one in the field', async () => {
+    const popover = await openPicker('text')
+
+    let input = await typeHex(popover, '#abz')
+    await key(input, 'Enter')
+    expect(isOpen()).toBe(true)
+    expect(popover.textContent).toContain('style.color.hex_invalid')
+    expect(textColor()).toBeFalsy()
+
+    input = await typeHex(popover, '#abc')
+    expect(textColor()).toBe('#aabbcc')
+    // Not the message text: Vuetify 4 keeps it in the DOM while its leave transition runs
+    expect(popover.querySelector('.tiptapify-color__hex')!.classList).not.toContain('v-input--error')
+
+    await key(input, 'Enter')
+    expect(isOpen()).toBe(false)
+    expect(textColor()).toBe('#aabbcc')
+
+    editor!.commands.undo()
+    expect(textColor()).toBeFalsy()
+  })
+
+  it('drops a typed color when Esc closes the popover', async () => {
+    const popover = await openPicker('text')
+    const input = await typeHex(popover, '#abc')
+    input.focus()
+
+    await key(input, 'Escape')
+    input.dispatchEvent(new FocusEvent('blur'))
+    await flush()
+
+    expect(isOpen()).toBe(false)
+    expect(textColor()).toBeFalsy()
+    expect(editor!.can().undo()).toBe(false)
+  })
+
+  it('offers the eyedropper only where the browser has one', async () => {
+    let popover = await openPicker('text')
+    expect(popover.querySelector('.tiptapify-color__eyedropper')).toBeNull()
+
+    app!.unmount()
+    document.body.innerHTML = ''
+    const open = vi.fn().mockResolvedValue({ sRGBHex: '#0F766E' })
+    ;(globalThis as Record<string, unknown>).EyeDropper = class {
+      open = open
+    }
+
+    popover = await openPicker('text')
+    popover.querySelector<HTMLElement>('.tiptapify-color__eyedropper')!.click()
+    await flush()
+
+    expect(open).toHaveBeenCalled()
+    expect(textColor()).toBe('#0f766e')
+  })
+
+  it('expands the custom color picker inside the popover', async () => {
+    const popover = await openPicker('text')
+    const toggle = popover.querySelector<HTMLElement>('.tiptapify-color__custom-toggle')!
+    // jsdom draws no canvas
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null)
+
+    toggle.click()
+    await flush()
+
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(popover.querySelector('.v-color-picker')).not.toBeNull()
+    expect(isOpen()).toBe(true)
+  })
+})