tiptapify 0.3.5 → 0.4.1

package/src/extensions/components/media/linkCard/pasteCard.ts

@@ -0,0 +1,153 @@
+import { Editor, Extension } from '@tiptap/core'
+import { EditorState, Plugin, PluginKey, Transaction } from '@tiptap/pm/state'
+import { LinkCardAttrs } from '@tiptapify/extensions/components/media/linkCard'
+
+// A link pasted alone into an empty paragraph: its paragraph (mapped through later changes) and its address
+export type PastedLinkState = { pos: number, url: string }
+
+// The pasted link the menu offers to show as a card: the paragraph range and the link text range in it
+export type PastedLink = { url: string, from: number, to: number, paragraphFrom: number, paragraphTo: number }
+
+// The class of the paste menu: the editor losing focus to it keeps the pasted link
+export const PASTE_CARD_MENU_CLASS = 'tiptapify-link-card-paste'
+
+export const linkCardPasteKey = new PluginKey<PastedLinkState | null>('linkCardPaste')
+
+/**
+ * The text as one http(s) address, as typed (no protocol of our own), or null: anything else, spaces
+ * inside included, is ordinary text.
+ */
+export function pastedLinkUrl(text: string | null | undefined): string | null {
+  const url = (text ?? '').trim()
+
+  if (!url || /\s/.test(url)) {
+    return null
+  }
+
+  try {
+    const { protocol } = new URL(url)
+
+    return protocol === 'http:' || protocol === 'https:' ? url : null
+  } catch {
+    return null
+  }
+}
+
+function isEmptyParagraph(state: EditorState): boolean {
+  const { selection } = state
+  const parent = selection.$from.parent
+
+  return selection.empty && parent.type.name === 'paragraph' && parent.content.size === 0
+}
+
+// The paragraph a paste into an empty paragraph produced, when it holds just one address
+function trackPaste(tr: Transaction, oldState: EditorState): PastedLinkState | null {
+  if (!isEmptyParagraph(oldState)) {
+    return null
+  }
+
+  const { $from } = tr.selection
+  const url = $from.parent.type.name === 'paragraph' ? pastedLinkUrl($from.parent.textContent) : null
+
+  return url && $from.depth > 0 ? { pos: $from.before(), url } : null
+}
+
+function blurredToMenu(meta: unknown): boolean {
+  const target = (meta as { event?: FocusEvent } | undefined)?.event?.relatedTarget
+
+  return target instanceof Element && !!target.closest(`.${PASTE_CARD_MENU_CLASS}`)
+}
+
+function applyTransaction(tr: Transaction, value: PastedLinkState | null, oldState: EditorState): PastedLinkState | null {
+  if (tr.getMeta('paste') || tr.getMeta('uiEvent') === 'paste') {
+    return trackPaste(tr, oldState)
+  }
+
+  if (!value || tr.getMeta(linkCardPasteKey)?.dismiss) {
+    return null
+  }
+
+  // What the paste brought along: the link mark of the paste rules
+  if (tr.getMeta('appendedTransaction')) {
+    return { ...value, pos: tr.mapping.map(value.pos) }
+  }
+
+  // Typing, a moved selection or the editor left for anything but the menu
+  if (tr.docChanged || !tr.selection.eq(oldState.selection) || (tr.getMeta('blur') && !blurredToMenu(tr.getMeta('blur')))) {
+    return null
+  }
+
+  return value
+}
+
+/**
+ * The pasted link with its ranges, while it is still the whole text of its paragraph.
+ */
+export function pastedLink(state: EditorState): PastedLink | null {
+  const tracked = linkCardPasteKey.getState(state)
+  const node = tracked ? state.doc.nodeAt(tracked.pos) : null
+
+  if (!tracked || !node || node.type.name !== 'paragraph' || pastedLinkUrl(node.textContent) !== tracked.url) {
+    return null
+  }
+
+  const paragraphTo = tracked.pos + node.nodeSize
+
+  return { url: tracked.url, from: tracked.pos + 1, to: paragraphTo - 1, paragraphFrom: tracked.pos, paragraphTo }
+}
+
+export function dismissPastedLink(editor: Editor): void {
+  if (linkCardPasteKey.getState(editor.state)) {
+    editor.view.dispatch(editor.state.tr.setMeta(linkCardPasteKey, { dismiss: true }).setMeta('addToHistory', false))
+  }
+}
+
+/**
+ * The paragraph of the pasted link replaced with the card of that link; false when the link is gone
+ * (the author typed or moved on meanwhile).
+ */
+export function replacePastedLink(editor: Editor, attrs: LinkCardAttrs): boolean {
+  const link = pastedLink(editor.state)
+
+  if (!link || link.url !== attrs.href) {
+    return false
+  }
+
+  return editor.chain()
+    .focus()
+    .insertContentAt({ from: link.paragraphFrom, to: link.paragraphTo }, { type: 'linkCard', attrs })
+    .setMeta(linkCardPasteKey, { dismiss: true })
+    .run()
+}
+
+/**
+ * Remembers a link pasted alone into an empty paragraph, so the paste menu can offer it as a card. The
+ * paste itself is left as it is (a link); nothing is replaced unless the author picks the card. Any
+ * typing, a moved selection, leaving the editor or Esc forgets it.
+ */
+export const LinkCardPaste = Extension.create({
+  name: 'linkCardPaste',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<PastedLinkState | null>({
+        key: linkCardPasteKey,
+        state: {
+          init: () => null,
+          apply: (tr, value, oldState) => applyTransaction(tr, value, oldState),
+        },
+        props: {
+          handleKeyDown: (view, event) => {
+            if (event.key !== 'Escape' || !linkCardPasteKey.getState(view.state)) {
+              return false
+            }
+
+            view.dispatch(view.state.tr.setMeta(linkCardPasteKey, { dismiss: true }).setMeta('addToHistory', false))
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})

package/src/extensions/components/media/video/Button.vue

@@ -4,6 +4,7 @@ import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
 import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import VideoDialog from '@tiptapify/extensions/components/media/video/VideoDialog.vue'
+import { selectedVideoNode } from '@tiptapify/extensions/components/media/video'
 import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { inject, Ref } from 'vue'
 
@@ -20,7 +21,7 @@ const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" vie
 
 <template>
   <VBtn
-    :color="editor.isActive('video') ? 'primary' : ''"
+    :color="selectedVideoNode(editor) ? 'primary' : ''"
     :variant="variantBtn"
     size="32"
     @click="editor.commands.showTiptapifyVideo()"

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

@@ -0,0 +1,233 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { App, createApp, h, nextTick, provide, ref, shallowRef } from 'vue'
+import { createVuetify } from 'vuetify'
+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 { Youtube } from '@tiptap/extension-youtube'
+import Iframe from '@tiptapify/extensions/components/media/iframe'
+import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
+import VideoDialog from '@tiptapify/extensions/components/media/video/VideoDialog.vue'
+import { VideoFile } from '@tiptapify/extensions/components/media/video/videoFile'
+import { fakeUploadEndpoint } from '@tiptapify/composables/fakeUploadEndpoint'
+import { TIPTAPIFY_UPLOAD_KEY } from '@tiptapify/composables/useTiptapifyUpload'
+import { TiptapifyUploadOptions } from '@tiptapify/types/editor'
+
+// 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: () => {},
+  }
+}
+
+let app: App | null = null
+let editor: Editor | null = null
+
+async function flush() {
+  for (let i = 0; i < 5; i++) {
+    await nextTick()
+  }
+}
+
+async function openDialog(content: string, upload: TiptapifyUploadOptions | null = null, selectFirst = false): Promise<HTMLElement> {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Youtube.configure({ nocookie: true }), Iframe, VideoFile, TiptapifyVideo],
+  })
+
+  app = createApp({
+    setup() {
+      provide('tiptapifyEditor', shallowRef(editor))
+      provide('tiptapifyI18n', { t: (key: string) => key })
+      provide(TIPTAPIFY_UPLOAD_KEY, ref(upload))
+
+      return () => h(VideoDialog)
+    },
+  })
+  app.use(createVuetify())
+  app.mount(document.body.appendChild(document.createElement('div')))
+  await flush()
+
+  if (selectFirst) {
+    editor.commands.setNodeSelection(0)
+  }
+  editor.commands.showTiptapifyVideo()
+  await flush()
+
+  return document.querySelector<HTMLElement>('.tiptapify-dialog')!
+}
+
+async function type(input: HTMLInputElement, value: string) {
+  input.value = value
+  input.dispatchEvent(new Event('input'))
+  await flush()
+}
+
+async function submit(card: HTMLElement) {
+  card.querySelector('form')!.requestSubmit()
+  await flush()
+}
+
+function buttonWithText(card: HTMLElement, text: string): HTMLButtonElement {
+  return [...card.querySelectorAll('button')].find(button => button.textContent?.includes(text)) as HTMLButtonElement
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  app?.unmount()
+  editor?.destroy()
+  app = null
+  editor = null
+  document.body.innerHTML = ''
+})
+
+describe('video dialog', () => {
+  it('keeps the dialog open with an inline error for an unsupported link', async () => {
+    const card = await openDialog('<p></p>')
+
+    await type(card.querySelector('input')!, 'https://example.com/clip.html')
+    await submit(card)
+
+    expect(card.textContent).toContain('dialog.video.url_unsupported')
+    expect(document.querySelector('.tiptapify-dialog')).not.toBeNull()
+    expect(editor!.getHTML()).toBe('<p></p>')
+  })
+
+  it('inserts a responsive YouTube video starting at the link time', async () => {
+    const card = await openDialog('<p></p>')
+
+    await type(card.querySelector('input')!, 'https://youtu.be/dQw4w9WgXcQ?t=42')
+
+    expect(card.textContent).toContain('YouTube')
+    expect(card.querySelector<HTMLInputElement>('input[placeholder="0:00"]')!.value).toBe('0:42')
+
+    await submit(card)
+
+    const youtube = editor!.state.doc.firstChild!
+
+    expect(youtube.type.name).toBe('youtube')
+    expect(youtube.attrs).toMatchObject({ src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', start: 42, width: null, height: null })
+  })
+
+  it('keeps the custom size in its ratio until the lock is opened', async () => {
+    const card = await openDialog('<p></p>')
+    await type(card.querySelector('input')!, 'https://youtu.be/dQw4w9WgXcQ')
+    buttonWithText(card, 'dialog.video.size_custom').click()
+    await flush()
+
+    const [width, height] = card.querySelectorAll<HTMLInputElement>('input[type="number"]')
+    expect([width.value, height.value]).toEqual(['640', '360'])
+
+    await type(width, '1280')
+    expect(height.value).toBe('720')
+
+    card.querySelector<HTMLButtonElement>('[aria-label="dialog.video.keep_ratio"]')!.click()
+    await flush()
+    await type(width, '800')
+    expect(height.value).toBe('720')
+
+    await submit(card)
+    expect(editor!.getJSON().content!.find(node => node.type === 'youtube')!.attrs).toMatchObject({ width: 800, height: 720 })
+  })
+
+  it('inserts a link to a video file as a video node with the file options', async () => {
+    const card = await openDialog('<p></p>')
+    await type(card.querySelector('input')!, 'https://www.w3schools.com/tags/mov_bbb.mp4#t=5')
+
+    expect(card.querySelector('.tiptapify-video-dialog__preview video')!.getAttribute('src')).toBe('https://www.w3schools.com/tags/mov_bbb.mp4#t=5')
+    const loop = [...card.querySelectorAll('.v-checkbox')].find(box => box.textContent?.includes('dialog.video.loop'))!
+    loop.querySelector('input')!.click()
+    await flush()
+
+    await submit(card)
+
+    const video = editor!.getJSON().content!.find(node => node.type === 'video')!
+    expect(video.attrs).toMatchObject({ src: 'https://www.w3schools.com/tags/mov_bbb.mp4', start: 5, controls: true, loop: true })
+  })
+
+  it('opens a video linked by its file address on the link tab, even without the upload', async () => {
+    const card = await openDialog('<video src="https://www.w3schools.com/tags/mov_bbb.mp4#t=5" controls></video>', null, true)
+
+    expect(card.querySelector<HTMLInputElement>('input')!.value).toBe('https://www.w3schools.com/tags/mov_bbb.mp4')
+    expect(card.querySelector<HTMLInputElement>('input[placeholder="0:00"]')!.value).toBe('0:05')
+  })
+
+  it('offers the upload only when the editor has an upload endpoint', async () => {
+    const card = await openDialog('<p></p>')
+
+    expect(buttonWithText(card, 'dialog.video.source_upload')).toBeUndefined()
+  })
+
+  it('uploads a video file to the endpoint and inserts it as a video node', async () => {
+    const requests = fakeUploadEndpoint(() => ({ status: 201, body: { url: 'https://cdn.example.com/clip.mp4' } }))
+    const card = await openDialog('<p></p>', { endpoint: '/api/uploads' })
+
+    buttonWithText(card, 'dialog.video.source_upload').click()
+    await flush()
+
+    const input = card.querySelector<HTMLInputElement>('input[accept="video/*"]')!
+    Object.defineProperty(input, 'files', { value: [new File(['x'], 'clip.mp4', { type: 'video/mp4' })] })
+    input.dispatchEvent(new Event('change'))
+    await new Promise(resolve => setTimeout(resolve))
+    await flush()
+
+    expect(requests).toHaveLength(1)
+    expect(requests[0].body.get('kind')).toBe('video')
+    expect(card.textContent).toContain('clip.mp4')
+
+    await submit(card)
+
+    expect(editor!.state.doc.firstChild!.type.name).toBe('video')
+    expect(editor!.state.doc.firstChild!.attrs).toMatchObject({ src: 'https://cdn.example.com/clip.mp4', controls: true, width: null })
+  })
+
+  it('shows the error the upload endpoint answers and inserts nothing', async () => {
+    fakeUploadEndpoint(() => ({ status: 413, body: { error: 'The file is too large.' } }))
+    const card = await openDialog('<p></p>', { endpoint: '/api/uploads' })
+
+    buttonWithText(card, 'dialog.video.source_upload').click()
+    await flush()
+
+    const input = card.querySelector<HTMLInputElement>('input[accept="video/*"]')!
+    Object.defineProperty(input, 'files', { value: [new File(['x'], 'clip.mp4', { type: 'video/mp4' })] })
+    input.dispatchEvent(new Event('change'))
+    await new Promise(resolve => setTimeout(resolve))
+    await flush()
+
+    expect(card.querySelector('[role="alert"]')!.textContent).toContain('The file is too large.')
+
+    await submit(card)
+
+    expect(editor!.getHTML()).toBe('<p></p>')
+  })
+
+  it('edits the selected video in place, keeping the attributes it does not know', async () => {
+    const card = await openDialog('<video src="/a.mp4" controls></video>', null, true)
+
+    expect(card.textContent).toContain('dialog.video.title_edit')
+    expect(card.querySelector<HTMLInputElement>('input')!.value).toBe('/a.mp4')
+
+    const loop = [...card.querySelectorAll('.v-checkbox')].find(box => box.textContent?.includes('dialog.video.loop'))!
+    loop.querySelector('input')!.click()
+    await flush()
+    await submit(card)
+
+    expect(editor!.state.doc.childCount).toBe(1)
+    expect(editor!.state.doc.firstChild!.attrs).toMatchObject({ src: '/a.mp4', controls: true, loop: true })
+  })
+
+  it('removes the selected video', async () => {
+    const card = await openDialog('<video src="/a.mp4"></video><p>Text</p>', null, true)
+
+    buttonWithText(card, 'dialog.remove').click()
+    await flush()
+
+    expect(editor!.getHTML()).toBe('<p>Text</p>')
+  })
+})