tiptapify 0.3.4 → 0.4.0

package/src/extensions/components/ai/result.test.ts

@@ -0,0 +1,144 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { Bold } from '@tiptap/extension-bold'
+import { Document } from '@tiptap/extension-document'
+import { Link } from '@tiptap/extension-link'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { exceedsLimit } from './charLimit'
+import {
+  aiActions,
+  AiApplyAction,
+  applyAiResult,
+  countedText,
+  parseAiResult,
+  plainText,
+  positionBelow,
+  projectedCharacters,
+  renderAiResult,
+} from './result'
+
+let editor: Editor | null = null
+
+function createEditor(content: string) {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Bold, Link],
+  })
+
+  return editor
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+describe('aiActions', () => {
+  it('replaces or goes below a selection, inserts or appends without one', () => {
+    expect(aiActions(true)).toEqual(['replace', 'below'])
+    expect(aiActions(false)).toEqual(['insert', 'append'])
+    expect(aiActions(true, 'insert')).toEqual(['replace', 'below'])
+  })
+
+  it('keeps a configured append mode as the primary action', () => {
+    expect(aiActions(false, 'append')).toEqual(['append', 'insert'])
+    expect(aiActions(true, 'append')).toEqual(['append', 'replace'])
+  })
+})
+
+describe('parseAiResult and renderAiResult', () => {
+  it('renders HTML through the schema, without scripts, handlers or unsafe links', () => {
+    const { schema } = createEditor('<p></p>')
+    const fragment = parseAiResult('<p onclick="x()">Hi <b>there</b><script>alert(1)</script> <a href="javascript:alert(1)">link</a></p>', schema)
+    const target = document.createElement('div')
+
+    renderAiResult(fragment, schema, target)
+
+    expect(target.innerHTML).toBe('<p>Hi <strong>there</strong> link</p>')
+  })
+
+  it('keeps plain text and its line breaks as they will be inserted', () => {
+    const { schema } = createEditor('<p></p>')
+    const fragment = parseAiResult('First line\n\nSecond', schema)
+
+    expect(plainText(fragment)).toBe('First line\n\nSecond')
+    expect(countedText(fragment)).toBe('First line\n\nSecond')
+  })
+
+  it('counts paragraphs of a result without separators, like the CharacterCount extension', () => {
+    const { schema } = createEditor('<p></p>')
+    const fragment = parseAiResult('<p>ab</p><p>cd</p>', schema)
+
+    expect(countedText(fragment)).toBe('abcd')
+    expect(plainText(fragment)).toBe('ab\ncd')
+  })
+
+  it('is empty for an empty result', () => {
+    const { schema } = createEditor('<p></p>')
+
+    expect(parseAiResult('', schema).size).toBe(0)
+  })
+})
+
+describe('projectedCharacters', () => {
+  it('agrees with the limit check of the dialog', () => {
+    const { state } = createEditor('<p>Hello world</p>')
+    const range = { from: 1, to: 6 }
+    const cases: Array<[AiApplyAction, number]> = [['replace', 15], ['insert', 10], ['below', 10], ['append', 10]]
+
+    for (const [action, length] of cases) {
+      const text = 'x'.repeat(length)
+      const projected = projectedCharacters(state.doc, text, action, range)
+      const mode = action === 'replace' ? 'replace' : 'insert'
+
+      expect(projected > 20).toBe(exceedsLimit(text, { doc: state.doc, limit: 20, mode, range }))
+      expect(projected > 21).toBe(exceedsLimit(text, { doc: state.doc, limit: 21, mode, range }))
+    }
+  })
+})
+
+describe('applyAiResult', () => {
+  it('replaces the selected range', () => {
+    const instance = createEditor('<p>Hello world</p>')
+    instance.commands.setTextSelection({ from: 7, to: 12 })
+
+    applyAiResult(instance, 'replace', 'there', { from: 7, to: 12 })
+
+    expect(instance.getHTML()).toBe('<p>Hello there</p>')
+  })
+
+  it('inserts below the block of the selection, keeping it', () => {
+    const instance = createEditor('<p>Hello world</p><p>Last</p>')
+
+    applyAiResult(instance, 'below', 'New text', { from: 7, to: 12 })
+
+    expect(instance.getHTML()).toBe('<p>Hello world</p><p>New text</p><p>Last</p>')
+  })
+
+  it('inserts HTML below the selection', () => {
+    const instance = createEditor('<p>Hello</p>')
+
+    applyAiResult(instance, 'below', '<p><b>Bold</b></p>', { from: 1, to: 6 })
+
+    expect(instance.getHTML()).toBe('<p>Hello</p><p><strong>Bold</strong></p>')
+  })
+
+  it('inserts at the cursor and appends to the end', () => {
+    const instance = createEditor('<p>Hello</p><p>World</p>')
+    instance.commands.setTextSelection(6)
+
+    applyAiResult(instance, 'insert', '!', null)
+    applyAiResult(instance, 'append', '<p>End</p>', null)
+
+    expect(instance.getHTML()).toBe('<p>Hello!</p><p>World</p><p>End</p>')
+  })
+
+  it('finds the position below a nested block at the top level', () => {
+    const { state } = createEditor('<p>One</p><p>Two</p>')
+
+    expect(positionBelow(state.doc, 2)).toBe(5)
+    expect(positionBelow(state.doc, state.doc.content.size)).toBe(state.doc.content.size)
+  })
+})

package/src/extensions/components/ai/result.ts

@@ -0,0 +1,101 @@
+import { createNodeFromContent } from '@tiptap/core'
+import type { Editor } from '@tiptap/core'
+import { DOMSerializer, Fragment } from '@tiptap/pm/model'
+import type { Node, Schema } from '@tiptap/pm/model'
+import type { TiptapifyAiMode } from '@tiptapify/types/editor'
+
+/**
+ * Where a result goes: `replace` the selection, `below` it (after its block), `insert`
+ * at the cursor or `append` to the end of the document
+ */
+export type AiApplyAction = 'replace' | 'below' | 'insert' | 'append'
+
+export type AiRange = { from: number, to: number }
+
+/**
+ * The primary and the secondary action of the dialog. With a selection the result
+ * replaces it or goes below it; without one it goes to the cursor or the end. A
+ * configured `append` mode keeps appending as the primary action.
+ */
+export function aiActions(hasSelection: boolean, configuredMode?: TiptapifyAiMode): [AiApplyAction, AiApplyAction] {
+  if (configuredMode === 'append') {
+    return ['append', hasSelection ? 'replace' : 'insert']
+  }
+
+  return hasSelection ? ['replace', 'below'] : ['insert', 'append']
+}
+
+/**
+ * The result as the editor will insert it: `insertContent` parses the string as HTML
+ * (plain text stays text, whitespace kept), so parsing it with the editor schema
+ * gives the exact content, without anything the schema does not know (scripts, event
+ * attributes, unsafe links)
+ */
+export function parseAiResult(content: string, schema: Schema): Fragment {
+  if (!content) {
+    return Fragment.empty
+  }
+
+  try {
+    const parsed = createNodeFromContent(content, schema, { parseOptions: { preserveWhitespace: 'full' } })
+
+    return parsed instanceof Fragment ? parsed : Fragment.from(parsed)
+  } catch {
+    return Fragment.from(schema.text(content))
+  }
+}
+
+/** The text of the result counted like the CharacterCount extension counts the document */
+export function countedText(fragment: Fragment): string {
+  return fragment.textBetween(0, fragment.size, undefined, ' ')
+}
+
+/** The text of the result with block boundaries as new lines, to compare it with the selected text */
+export function plainText(fragment: Fragment): string {
+  return fragment.textBetween(0, fragment.size, '\n')
+}
+
+/** DOM of the parsed result for the preview, built by the schema's own `renderHTML` */
+export function renderAiResult(fragment: Fragment, schema: Schema, target: HTMLElement) {
+  try {
+    target.replaceChildren(DOMSerializer.fromSchema(schema).serializeFragment(fragment, { document: target.ownerDocument }))
+  } catch {
+    target.textContent = plainText(fragment)
+  }
+}
+
+/**
+ * The document length after the action, counted like the CharacterCount extension:
+ * replacing frees the characters of the selected range
+ */
+export function projectedCharacters(doc: Node, resultText: string, action: AiApplyAction, range: AiRange | null): number {
+  const current = doc.textBetween(0, doc.content.size, undefined, ' ').length
+  const removed = action === 'replace' && range ? doc.textBetween(range.from, range.to, undefined, ' ').length : 0
+
+  return current - removed + resultText.length
+}
+
+/** Right after the top-level block that holds `pos` (a position between blocks stays as is) */
+export function positionBelow(doc: Node, pos: number): number {
+  const $pos = doc.resolve(pos)
+
+  return $pos.depth > 0 ? $pos.after(1) : pos
+}
+
+export function applyAiResult(editor: Editor, action: AiApplyAction, content: string, range: AiRange | null) {
+  const chain = editor.chain().focus()
+
+  if (action === 'replace' && range) {
+    chain.deleteRange(range)
+  }
+
+  if (action === 'append') {
+    chain.insertContentAt(editor.state.doc.content.size, content)
+  } else if (action === 'below') {
+    chain.insertContentAt(positionBelow(editor.state.doc, range?.to ?? editor.state.selection.to), content)
+  } else {
+    chain.insertContent(content)
+  }
+
+  return chain.run()
+}

package/src/extensions/components/ai/thinking.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { TiptapifyAiReasoningEffort, TiptapifyAiRequest } from '@tiptapify/types/editor'
+import { applyThinking, initialThinkingChoice, thinkingChoices } from './thinking'
+
+function request(extra: Partial<TiptapifyAiRequest> = {}): TiptapifyAiRequest {
+  return { messages: [], ...extra }
+}
+
+describe('thinking choices', () => {
+  it('offers nothing when thinking is not configured, even with effort options', () => {
+    expect(thinkingChoices({ reasoningEffort: { options: ['low'] } })).toEqual([])
+    expect(initialThinkingChoice({})).toBeNull()
+  })
+
+  it('offers off and on for plain thinking', () => {
+    expect(thinkingChoices({ thinking: true })).toEqual(['off', 'on'])
+    expect(initialThinkingChoice({ thinking: true })).toBe('on')
+  })
+
+  it('adds the effort options without the "default" entry', () => {
+    const config = { thinking: true, reasoningEffort: { options: ['default', 'low', 'high'] as TiptapifyAiReasoningEffort[] } }
+
+    expect(thinkingChoices(config)).toEqual(['off', 'on', 'low', 'high'])
+  })
+
+  it('starts at the configured default effort only when it is an option', () => {
+    expect(initialThinkingChoice({ thinking: true, reasoningEffort: { options: ['low', 'high'], default: 'high' } })).toBe('high')
+    expect(initialThinkingChoice({ thinking: true, reasoningEffort: { options: ['low'], default: 'high' } })).toBe('on')
+  })
+})
+
+describe('applyThinking', () => {
+  it('sends an explicit effort instead of enable_thinking', () => {
+    expect(applyThinking(request({ enable_thinking: true }), 'medium')).toEqual({ messages: [], reasoning_effort: 'medium' })
+  })
+
+  it('sends enable_thinking for on and off, dropping a configured effort', () => {
+    expect(applyThinking(request({ reasoning_effort: 'low' }), 'on')).toEqual({ messages: [], enable_thinking: true })
+    expect(applyThinking(request(), 'off')).toEqual({ messages: [], enable_thinking: false })
+  })
+
+  it('turns thinking off when it is not supported', () => {
+    expect(applyThinking(request({ enable_thinking: true }), null)).toEqual({ messages: [], enable_thinking: false })
+  })
+})

package/src/extensions/components/ai/thinking.ts

@@ -0,0 +1,58 @@
+import type {
+  TiptapifyAiReasoningEffort,
+  TiptapifyAiReasoningEffortOptions,
+  TiptapifyAiRequest,
+} from '@tiptapify/types/editor'
+
+/**
+ * The one thinking control of the dialog: thinking off, on (the provider's default
+ * effort), or on with an explicit reasoning effort
+ */
+export type AiThinkingChoice = 'off' | 'on' | TiptapifyAiReasoningEffort
+
+export type AiThinkingConfig = {
+  thinking?: boolean,
+  reasoningEffort?: TiptapifyAiReasoningEffortOptions,
+}
+
+export function effortOptions(config: AiThinkingConfig): TiptapifyAiReasoningEffort[] {
+  const options = config.reasoningEffort?.options
+
+  return Array.isArray(options) ? options.filter(option => (option as string) !== 'default') : []
+}
+
+/** No choices when thinking is not configured: the effort applies only with thinking on */
+export function thinkingChoices(config: AiThinkingConfig): AiThinkingChoice[] {
+  return config.thinking === true ? ['off', 'on', ...effortOptions(config)] : []
+}
+
+/** Thinking starts on, at the configured default effort when it is one of the options */
+export function initialThinkingChoice(config: AiThinkingConfig): AiThinkingChoice | null {
+  if (config.thinking !== true) {
+    return null
+  }
+
+  const preferred = config.reasoningEffort?.default
+
+  return preferred && effortOptions(config).includes(preferred) ? preferred : 'on'
+}
+
+export function isEffort(choice: AiThinkingChoice | null): choice is TiptapifyAiReasoningEffort {
+  return choice !== null && choice !== 'off' && choice !== 'on'
+}
+
+/**
+ * Sets the thinking fields of the request: an explicit effort goes as `reasoning_effort`
+ * (and `enable_thinking` is dropped), otherwise `enable_thinking` says whether thinking is on
+ */
+export function applyThinking(request: TiptapifyAiRequest, choice: AiThinkingChoice | null): TiptapifyAiRequest {
+  if (isEffort(choice)) {
+    delete request.enable_thinking
+    request.reasoning_effort = choice
+  } else {
+    delete request.reasoning_effort
+    request.enable_thinking = choice === 'on'
+  }
+
+  return request
+}

package/src/extensions/components/formatExtra/sub/Button.vue

@@ -19,7 +19,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 <template>
   <VBtn
-    :color="editor.isActive('sub') ? 'primary' : ''"
+    :color="editor.isActive('subscript') ? 'primary' : ''"
     :disabled="!editor.can().chain().focus().toggleSubscript().run()"
     :variant="variantBtn"
     size="32"

package/src/extensions/components/formatExtra/sup/Button.vue

@@ -19,7 +19,7 @@ const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
 <template>
   <VBtn
-    :color="editor.isActive('sup') ? 'primary' : ''"
+    :color="editor.isActive('superscript') ? 'primary' : ''"
     :disabled="!editor.can().chain().focus().toggleSuperscript().run()"
     :variant="variantBtn"
     size="32"

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

@@ -4,8 +4,9 @@ import { Editor } from '@tiptap/vue-3'
 import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
 import Tooltip from '@tiptapify/components/UI/Tooltip.vue'
 import IframeDialog from '@tiptapify/extensions/components/media/iframe/IframeDialog.vue'
+import { selectedIframe } from '@tiptapify/extensions/components/media/iframe'
 import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
-import { inject, ref, Ref, useTemplateRef } from 'vue'
+import { inject, Ref } from 'vue'
 
 import { ComposerTranslation } from 'vue-i18n'
 
@@ -15,25 +16,23 @@ const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
 
-const dialog = useTemplateRef('dialog')
-
 const icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M1 12h9.8L8.3 9.5l1.4-1.4l4.9 4.9l-4.9 4.9l-1.4-1.4l2.5-2.5H1zM21 2H3c-1.1 0-2 .9-2 2v6.1h2V6h18v14H3v-4H1v4c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2"/></svg>'
 </script>
 
 <template>
   <VBtn
-    :color="editor.isActive('iframe') ? 'primary' : ''"
+    :color="selectedIframe(editor) ? 'primary' : ''"
     :variant="variantBtn"
     size="32"
-    @click="dialog?.open()"
+    @click="editor.commands.showIframe()"
   >
     <Tooltip :label="t('media.iframe')" />
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <IframeDialog ref="dialog" />
+  <IframeDialog />
 </template>
 
 <style lang="scss" scoped>
 
-</style>
+</style>

package/src/extensions/components/media/iframe/IframeDialog.test.ts

@@ -0,0 +1,177 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { App, createApp, h, nextTick, provide, 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 Iframe from '@tiptapify/extensions/components/media/iframe'
+import IframeDialog from '@tiptapify/extensions/components/media/iframe/IframeDialog.vue'
+
+// 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()
+  }
+}
+
+// The translation shows the key and its params, for the assertions
+function t(key: string, params?: Record<string, unknown>) {
+  return params && Object.keys(params).length ? `${key} ${JSON.stringify(params)}` : key
+}
+
+async function openDialog(content: string, selectFirst = false): Promise<HTMLElement> {
+  editor = new Editor({
+    element: document.createElement('div'),
+    content,
+    extensions: [Document, Paragraph, Text, Iframe],
+  })
+
+  app = createApp({
+    setup() {
+      provide('tiptapifyEditor', shallowRef(editor))
+      provide('tiptapifyI18n', { t })
+
+      return () => h(IframeDialog)
+    },
+  })
+  app.use(createVuetify())
+  app.mount(document.body.appendChild(document.createElement('div')))
+  await flush()
+
+  if (selectFirst) {
+    editor.commands.setNodeSelection(0)
+  }
+  editor.commands.showIframe()
+  await flush()
+
+  return document.querySelector<HTMLElement>('.tiptapify-dialog')!
+}
+
+async function type(input: HTMLInputElement | HTMLTextAreaElement, 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?.trim() === text) as HTMLButtonElement
+}
+
+afterEach(() => {
+  app?.unmount()
+  editor?.destroy()
+  app = null
+  editor = null
+  document.body.innerHTML = ''
+})
+
+describe('embed dialog', () => {
+  it('reads a pasted code, previews it and inserts a responsive lazy embed', async () => {
+    const card = await openDialog('<p></p>')
+
+    await type(
+      card.querySelector('textarea')!,
+      '<iframe src="https://maps.example.com/embed?pb=1" width="600" height="450" title="Office" allowfullscreen></iframe>',
+    )
+
+    expect(card.textContent).toContain('dialog.iframe.code_parsed')
+    expect(card.textContent).toContain('dialog.iframe.parsed_size')
+    expect(card.textContent).toContain('dialog.iframe.size_responsive_hint {"ratio":"600 × 450"}')
+    expect(card.querySelector<HTMLInputElement>('input[type="text"]')!.value).toBe('Office')
+
+    const preview = card.querySelector('.tiptapify-iframe-dialog__preview iframe')!
+    expect(preview.getAttribute('src')).toBe('https://maps.example.com/embed?pb=1')
+    expect(preview.getAttribute('sandbox')).toContain('allow-scripts')
+
+    await submit(card)
+
+    expect(editor!.state.doc.firstChild!.attrs).toMatchObject({
+      src: 'https://maps.example.com/embed?pb=1',
+      title: 'Office',
+      ratio: 'auto',
+      width: 600,
+      height: 450,
+      loading: 'lazy',
+      allowfullscreen: true,
+      border: false,
+    })
+  })
+
+  it('asks for the protocol and keeps the dialog open', async () => {
+    const card = await openDialog('<p></p>')
+
+    await type(card.querySelector('textarea')!, 'maps.example.com/embed')
+    expect(card.querySelector('.tiptapify-iframe-dialog__preview iframe')).toBeNull()
+
+    await submit(card)
+
+    expect(card.textContent).toContain('dialog.iframe.src_protocol')
+    expect(document.querySelector('.tiptapify-dialog')).not.toBeNull()
+    expect(editor!.getHTML()).toBe('<p></p>')
+  })
+
+  it('rejects a code that is not a single iframe at once', async () => {
+    const card = await openDialog('<p></p>')
+
+    await type(card.querySelector('textarea')!, '<blockquote class="twitter-tweet"></blockquote><script src="https://x.example/w.js"></script>')
+
+    expect(card.textContent).toContain('dialog.iframe.code_invalid')
+  })
+
+  it('inserts a ratio preset without a size', async () => {
+    const card = await openDialog('<p></p>')
+
+    await type(card.querySelector('textarea')!, 'https://a.example/embed')
+    buttonWithText(card, '4:3').click()
+    await flush()
+    await submit(card)
+
+    expect(editor!.state.doc.firstChild!.attrs).toMatchObject({ ratio: '4:3', width: null, height: null })
+  })
+
+  it('edits old content with a size as custom, in place', async () => {
+    const card = await openDialog('<iframe src="https://a.example/embed" width="640" height="360" frameborder="0"></iframe>', true)
+
+    expect(card.textContent).toContain('dialog.iframe.title_edit')
+    expect(card.querySelector('textarea')!.value).toBe('https://a.example/embed')
+
+    const [width, height] = card.querySelectorAll<HTMLInputElement>('input[type="number"]')
+    expect([width.value, height.value]).toEqual(['640', '360'])
+
+    await type(width, '800')
+    expect(height.value).toBe('450')
+
+    await submit(card)
+
+    expect(editor!.state.doc.childCount).toBe(1)
+    expect(editor!.state.doc.firstChild!.attrs).toMatchObject({ src: 'https://a.example/embed', ratio: null, width: 800, height: 450, loading: null })
+  })
+
+  it('removes the edited embed', async () => {
+    const card = await openDialog('<iframe src="https://a.example/embed"></iframe><p>Text</p>', true)
+
+    buttonWithText(card, 'dialog.remove').click()
+    await flush()
+
+    expect(editor!.getHTML()).not.toContain('iframe')
+  })
+})