'); + }); + + it('does not throw on updates when no onChange handler is provided', async () => { + let ed: Editor | undefined; + render( + { + ed = e; + }} + />, + ); + await waitFor(() => expect(ed).toBeTruthy()); + ed!.chain().focus().insertContent(' more').run(); + expect(ed!.getHTML()).toContain('more'); + }); +}); + +describe('CwlEditor controlled value sync', () => { + it('pushes new external values into the document', async () => { + const { rerender } = render(); + await waitFor(() => + expect( + document.querySelector('.cwl-editor__content h1'), + ).toHaveTextContent('One'), + ); + rerender(); + await waitFor(() => + expect( + document.querySelector('.cwl-editor__content h1'), + ).toHaveTextContent('Two'), + ); + }); + + it('leaves the document untouched when the value already matches', async () => { + const { rerender } = render(); + await waitFor(() => + expect(document.querySelector('.cwl-editor__content')).toHaveTextContent( + 'stable', + ), + ); + // Re-render with the same value but a different unrelated prop. + rerender(); + await waitFor(() => + expect(document.querySelector('.cwl-editor')).toHaveClass('tweak'), + ); + expect(document.querySelector('.cwl-editor__content')).toHaveTextContent( + 'stable', + ); + }); +}); + +describe('CwlEditor Ctrl/Cmd+K link shortcut', () => { + function surface(): HTMLElement { + return document.querySelector('.cwl-editor__surface') as HTMLElement; + } + + it('creates a link from the prompt URL', async () => { + let ed: Editor | undefined; + vi.spyOn(window, 'prompt').mockReturnValue('https://ex.com'); + render( + { + ed = e; + }} + />, + ); + await waitFor(() => expect(ed).toBeTruthy()); + ed!.chain().focus().selectAll().run(); + fireEvent.keyDown(surface(), { key: 'K', metaKey: true }); + await waitFor(() => + expect(ed!.getHTML()).toContain('href="https://ex.com"'), + ); + }); + + it('reuses the existing link href as the prompt default', async () => { + let ed: Editor | undefined; + const prompt = vi + .spyOn(window, 'prompt') + .mockReturnValue('https://second.com'); + render( + { + ed = e; + }} + />, + ); + await waitFor(() => expect(ed).toBeTruthy()); + ed!.chain().focus().selectAll().setLink({ href: 'https://first.com' }).run(); + fireEvent.keyDown(surface(), { key: 'k', ctrlKey: true }); + await waitFor(() => + expect(ed!.getHTML()).toContain('href="https://second.com"'), + ); + expect(prompt).toHaveBeenLastCalledWith('Link URL', 'https://first.com'); + }); + + it('removes the link when the prompt is cleared to empty', async () => { + let ed: Editor | undefined; + vi.spyOn(window, 'prompt').mockReturnValue(''); + render( + { + ed = e; + }} + />, + ); + await waitFor(() => expect(ed).toBeTruthy()); + ed!.chain().focus().selectAll().setLink({ href: 'https://x.com' }).run(); + fireEvent.keyDown(surface(), { key: 'k', metaKey: true }); + await waitFor(() => expect(ed!.getHTML()).not.toContain('href=')); + }); + + it('does nothing when the link prompt is cancelled', async () => { + let ed: Editor | undefined; + vi.spyOn(window, 'prompt').mockReturnValue(null); + render( + { + ed = e; + }} + />, + ); + await waitFor(() => expect(ed).toBeTruthy()); + fireEvent.keyDown(surface(), { key: 'k', metaKey: true }); + expect(ed!.getHTML()).not.toContain('href='); + }); + + it('ignores k without a modifier and modified non-k keys', async () => { + render(); + await waitFor(() => + expect(document.querySelector('.cwl-editor__surface')).toBeTruthy(), + ); + fireEvent.keyDown(surface(), { key: 'k' }); + fireEvent.keyDown(surface(), { key: 'b', metaKey: true }); + expect(document.querySelector('.cwl-editor__content')).toBeTruthy(); + }); +}); diff --git a/src/components/CwlEditor.tsx b/src/components/CwlEditor.tsx index 63ba9105..eff7bdfd 100644 --- a/src/components/CwlEditor.tsx +++ b/src/components/CwlEditor.tsx @@ -83,12 +83,18 @@ export function CwlEditor({ if (!editor || !isControlled || emittingRef.current) return; const current = fromHtml(editor.getHTML(), mode); if (current !== value) { - editor.commands.setContent(toHtml(value ?? '', mode), false); + // `value` is always a string here (isControlled === value !== undefined), + // so the `?? ''` fallback is a type guard that never runs. + /* v8 ignore next */ + const next = toHtml(value ?? '', mode); + editor.commands.setContent(next, false); } }, [editor, isControlled, value, mode]); const onKeyDown = useCallback( (e: React.KeyboardEvent) => { + // Defensive: key events can only reach the surface once the editor exists. + /* v8 ignore next */ if (!editor) return; const mod = e.metaKey || e.ctrlKey; if (mod && e.key.toLowerCase() === 'k') { diff --git a/src/components/Toolbar.test.tsx b/src/components/Toolbar.test.tsx new file mode 100644 index 00000000..ef88f66b --- /dev/null +++ b/src/components/Toolbar.test.tsx @@ -0,0 +1,160 @@ +import { describe, it, expect, vi, afterEach } from 'vitest'; +import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react'; +import { Editor } from '@tiptap/react'; +import { Toolbar } from './Toolbar.js'; +import { buildExtensions } from '../extensions/kit.js'; + +const PNG_BYTES = new Uint8Array([ + 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, + 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, 0x08, 0x06, + 0x00, 0x00, 0x00, 0x1f, 0x15, 0xc4, 0x89, +]); + +const openEditors: Editor[] = []; +function makeEditor(content = 'hello world'): Editor { + const element = document.createElement('div'); + document.body.appendChild(element); + const editor = new Editor({ + element, + extensions: buildExtensions({ image: { maxDimension: 0 } }), + content, + }); + openEditors.push(editor); + return editor; +} + +afterEach(() => { + cleanup(); + for (const editor of openEditors.splice(0)) { + if (!editor.isDestroyed) editor.destroy(); + } + vi.restoreAllMocks(); + vi.unstubAllGlobals(); +}); + +/** A decodable Image stand-in that always reports a within-bounds size. */ +class FitImage { + onload: (() => void) | null = null; + onerror: (() => void) | null = null; + width = 10; + height = 10; + set src(_value: string) { + queueMicrotask(() => this.onload?.()); + } +} + +function fileInput(): HTMLInputElement { + return document.querySelector('input[type="file"]') as HTMLInputElement; +} + +describe('Toolbar', () => { + it('renders every affordance and invokes each button command', () => { + const editor = makeEditor(); + // Make undo available and one mark active so both the active and disabled + // ToolbarButton branches render. + editor.chain().focus().selectAll().toggleBold().run(); + vi.spyOn(window, 'prompt').mockReturnValue(null); + + render(); + + const bold = screen.getByRole('button', { name: /Bold/ }); + expect(bold).toHaveClass('is-active'); + expect(bold).toHaveAttribute('aria-pressed', 'true'); + + const buttons = screen.getAllByRole('button'); + // All 16 affordances (marks, headings, lists, link, table, image, history). + expect(buttons.length).toBe(16); + // Cover onMouseDown preventDefault + every onClick handler. + for (const button of buttons) { + fireEvent.mouseDown(button); + if (!(button as HTMLButtonElement).disabled) fireEvent.click(button); + } + }); + + it('enables and fires the redo command after an undo', () => { + const editor = makeEditor(); + editor.chain().focus().insertContent(' more').run(); + editor.commands.undo(); // now redo is available + render(); + const redo = screen.getByRole('button', { name: /Redo/ }); + expect(redo).not.toBeDisabled(); + fireEvent.click(redo); + expect(editor.getHTML()).toContain('more'); + }); + + describe('link button', () => { + it('sets a link when a URL is entered', () => { + const editor = makeEditor(); + editor.chain().focus().selectAll().run(); + vi.spyOn(window, 'prompt').mockReturnValue('https://example.com'); + render(); + fireEvent.click(screen.getByRole('button', { name: /Insert\/edit link/ })); + expect(editor.getHTML()).toContain('href="https://example.com"'); + }); + + it('unsets the link when the URL is cleared to empty', () => { + const editor = makeEditor('linked'); + editor.chain().focus().selectAll().run(); + vi.spyOn(window, 'prompt').mockReturnValue(''); + render(); + fireEvent.click(screen.getByRole('button', { name: /Insert\/edit link/ })); + expect(editor.getHTML()).not.toContain('href='); + }); + + it('does nothing when the prompt is cancelled', () => { + const editor = makeEditor(); + editor.chain().focus().selectAll().run(); + vi.spyOn(window, 'prompt').mockReturnValue(null); + render(); + const before = editor.getHTML(); + fireEvent.click(screen.getByRole('button', { name: /Insert\/edit link/ })); + expect(editor.getHTML()).toBe(before); + }); + }); + + describe('inline image upload', () => { + it('embeds a chosen image using the provided image config', async () => { + const editor = makeEditor(); + render( + , + ); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + fireEvent.change(fileInput(), { target: { files: [file] } }); + await waitFor(() => + expect(editor.getHTML()).toContain('data:image/png;base64'), + ); + }); + + it('embeds a chosen image using default config when no image prop is set', async () => { + const editor = makeEditor(); + // With no image prop, maxDimension defaults to 1600, which routes through + // the downscale path; stub a decodable Image so it resolves in jsdom. + vi.stubGlobal('Image', FitImage); + render(); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + fireEvent.change(fileInput(), { target: { files: [file] } }); + await waitFor(() => + expect(editor.getHTML()).toContain('data:image/png;base64'), + ); + }); + + it('ignores a change event with no file', () => { + const editor = makeEditor(); + render(); + fireEvent.change(fileInput(), { target: { files: [] } }); + expect(editor.getHTML()).not.toContain('data:image'); + }); + + it('swallows conversion errors (e.g. oversized files)', async () => { + const editor = makeEditor(); + render(); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + fireEvent.change(fileInput(), { target: { files: [file] } }); + await new Promise((resolve) => setTimeout(resolve, 15)); + expect(editor.getHTML()).not.toContain('data:image'); + }); + }); +}); diff --git a/src/converter/base64.fallbacks.test.ts b/src/converter/base64.fallbacks.test.ts new file mode 100644 index 00000000..13586cb2 --- /dev/null +++ b/src/converter/base64.fallbacks.test.ts @@ -0,0 +1,98 @@ +import { describe, it, expect, afterEach, vi } from 'vitest'; +import { toUint8Array, blobToDataUri } from './base64.js'; + +afterEach(() => { + vi.unstubAllGlobals(); + vi.resetModules(); +}); + +describe('toUint8Array with a non-Uint8Array view', () => { + it('wraps an ArrayBufferView via buffer/offset/length', () => { + const src = new Uint8Array([9, 8, 7, 6, 5]); + // Int8Array is an ArrayBufferView but not a Uint8Array, so it exercises the + // `ArrayBuffer.isView` branch rather than the fast identity return. + const view = new Int8Array(src.buffer, 1, 3); + const out = toUint8Array(view); + expect(out).toBeInstanceOf(Uint8Array); + expect(Array.from(out)).toEqual([8, 7, 6]); + }); +}); + +// Note: the `btoa`/`atob` fallback in bytesToBase64/base64ToBytes only runs in +// a browser without a global `Buffer`. It cannot be exercised here without +// deleting `globalThis.Buffer`, which breaks vitest/jsdom/coverage internals, +// so that browser-only branch is annotated with `v8 ignore` in the source. + +describe('readBlobBytes environment fallbacks', () => { + const BYTES = new Uint8Array([1, 2, 3, 4]); + const PNG = new Uint8Array([ + 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, + ]); + + it('uses Blob.arrayBuffer when the blob implements it', async () => { + const fakeBlob = { + type: 'application/octet-stream', + arrayBuffer: () => Promise.resolve(BYTES.buffer.slice(0)), + } as unknown as Blob; + const uri = await blobToDataUri(fakeBlob); + expect(uri.startsWith('data:application/octet-stream;base64,')).toBe(true); + }); + + it('falls back to application/octet-stream for a typeless, unsniffable blob', async () => { + const fakeBlob = { + type: '', + arrayBuffer: () => Promise.resolve(new Uint8Array([0, 1, 2, 3]).buffer.slice(0)), + } as unknown as Blob; + const uri = await blobToDataUri(fakeBlob); + expect(uri.startsWith('data:application/octet-stream;base64,')).toBe(true); + }); + + it('rejects when FileReader errors and exposes its own error', async () => { + class FailingReader { + onload: (() => void) | null = null; + onerror: (() => void) | null = null; + error: unknown = new Error('reader boom'); + result: ArrayBuffer | null = null; + readAsArrayBuffer(): void { + queueMicrotask(() => this.onerror?.()); + } + } + vi.stubGlobal('FileReader', FailingReader); + // No `arrayBuffer` method -> the FileReader branch is taken. + const fakeBlob = { type: 'image/png' } as unknown as Blob; + await expect(blobToDataUri(fakeBlob)).rejects.toThrow('reader boom'); + }); + + it('rejects with a synthesized error when FileReader has no error object', async () => { + class NullErrorReader { + onload: (() => void) | null = null; + onerror: (() => void) | null = null; + error: unknown = null; + result: ArrayBuffer | null = null; + readAsArrayBuffer(): void { + queueMicrotask(() => this.onerror?.()); + } + } + vi.stubGlobal('FileReader', NullErrorReader); + const fakeBlob = { type: 'image/png' } as unknown as Blob; + await expect(blobToDataUri(fakeBlob)).rejects.toThrow( + /FileReader failed to read Blob/, + ); + }); + + it('reads through Response when neither arrayBuffer nor FileReader exist', async () => { + vi.stubGlobal('FileReader', undefined); + vi.stubGlobal( + 'Response', + class FakeResponse { + constructor(_blob: unknown) {} + arrayBuffer(): Promise { + return Promise.resolve(PNG.buffer.slice(0)); + } + }, + ); + const fakeBlob = { type: 'image/png' } as unknown as Blob; + const uri = await blobToDataUri(fakeBlob); + expect(uri.startsWith('data:image/png;base64,')).toBe(true); + }); +}); diff --git a/src/converter/base64.test.ts b/src/converter/base64.test.ts index ff978448..c816f7ed 100644 --- a/src/converter/base64.test.ts +++ b/src/converter/base64.test.ts @@ -89,6 +89,16 @@ describe('MIME sniffing', () => { 'image/svg+xml', ); }); + it('detects SVG wrapped in an XML prolog', () => { + expect( + sniffMimeType(new TextEncoder().encode('')), + ).toBe('image/svg+xml'); + }); + it('does not treat a non-SVG XML document as an image', () => { + expect( + sniffMimeType(new TextEncoder().encode('')), + ).toBeUndefined(); + }); it('returns undefined for unknown bytes', () => { expect(sniffMimeType(new Uint8Array([0x00, 0x01, 0x02]))).toBeUndefined(); }); diff --git a/src/converter/base64.ts b/src/converter/base64.ts index c9c1eb8e..38173f54 100644 --- a/src/converter/base64.ts +++ b/src/converter/base64.ts @@ -64,36 +64,40 @@ const hasBuffer = typeof globalThis.Buffer !== 'undefined'; /** Encode raw bytes to a base64 string. Works in Node and the browser. */ export function bytesToBase64(bytes: Uint8Array): string { - if (hasBuffer) { - return globalThis.Buffer.from( - bytes.buffer, - bytes.byteOffset, - bytes.byteLength, - ).toString('base64'); - } - let binary = ''; - const chunkSize = 0x8000; - for (let i = 0; i < bytes.length; i += chunkSize) { - const chunk = bytes.subarray(i, i + chunkSize); - binary += String.fromCharCode(...chunk); + /* v8 ignore start -- browser-only fallback: Node and jsdom always provide Buffer */ + if (!hasBuffer) { + let binary = ''; + const chunkSize = 0x8000; + for (let i = 0; i < bytes.length; i += chunkSize) { + const chunk = bytes.subarray(i, i + chunkSize); + binary += String.fromCharCode(...chunk); + } + // eslint-disable-next-line no-undef + return btoa(binary); } - // eslint-disable-next-line no-undef - return btoa(binary); + /* v8 ignore stop */ + return globalThis.Buffer.from( + bytes.buffer, + bytes.byteOffset, + bytes.byteLength, + ).toString('base64'); } /** Decode a base64 string to raw bytes. Works in Node and the browser. */ export function base64ToBytes(base64: string): Uint8Array { const normalized = base64.replace(/\s+/g, ''); - if (hasBuffer) { - return new Uint8Array(globalThis.Buffer.from(normalized, 'base64')); - } - // eslint-disable-next-line no-undef - const binary = atob(normalized); - const out = new Uint8Array(binary.length); - for (let i = 0; i < binary.length; i++) { - out[i] = binary.charCodeAt(i); + /* v8 ignore start -- browser-only fallback: Node and jsdom always provide Buffer */ + if (!hasBuffer) { + // eslint-disable-next-line no-undef + const binary = atob(normalized); + const out = new Uint8Array(binary.length); + for (let i = 0; i < binary.length; i++) { + out[i] = binary.charCodeAt(i); + } + return out; } - return out; + /* v8 ignore stop */ + return new Uint8Array(globalThis.Buffer.from(normalized, 'base64')); } /** Coerce any binary-ish input to a `Uint8Array` view without copying twice. */ @@ -267,7 +271,10 @@ export function parseDataUri(dataUri: string): ParsedDataUri { const mimeType = match[1] && match[1].length > 0 ? match[1] : 'text/plain'; const params = match[2] ?? ''; const isBase64 = /;base64/i.test(params); - return { mimeType, isBase64, payload: match[3] ?? '' }; + // Capture group 3 always matches (possibly empty), so `?? ''` is defensive. + /* v8 ignore next */ + const payload = match[3] ?? ''; + return { mimeType, isBase64, payload }; } /** `true` when the string is a syntactically valid data URI. */ diff --git a/src/extensions/Base64Image.test.ts b/src/extensions/Base64Image.test.ts new file mode 100644 index 00000000..61a9e07d --- /dev/null +++ b/src/extensions/Base64Image.test.ts @@ -0,0 +1,314 @@ +import { describe, it, expect, vi, afterEach } from 'vitest'; +import { waitFor } from '@testing-library/react'; +import { Editor } from '@tiptap/react'; +import StarterKit from '@tiptap/starter-kit'; +import { + downscaleDataUri, + imageFileToInlineDataUri, + Base64Image, + base64ImagePluginKey, +} from './Base64Image.js'; +import { buildExtensions } from './kit.js'; + +const PNG_BYTES = new Uint8Array([ + 0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, + 0x48, 0x44, 0x52, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01, 0x08, 0x06, + 0x00, 0x00, 0x00, 0x1f, 0x15, 0xc4, 0x89, +]); + +/** A controllable stand-in for the browser's `Image`, which jsdom cannot decode. */ +class MockImage { + onload: (() => void) | null = null; + onerror: (() => void) | null = null; + width = 0; + height = 0; + private _src = ''; + set src(value: string) { + this._src = value; + queueMicrotask(() => { + if (MockImage.mode === 'error') { + this.onerror?.(); + return; + } + this.width = MockImage.width; + this.height = MockImage.height; + this.onload?.(); + }); + } + get src(): string { + return this._src; + } + static mode: 'load' | 'error' = 'load'; + static width = 100; + static height = 100; +} + +const openEditors: Editor[] = []; +function track(editor: Editor): Editor { + openEditors.push(editor); + return editor; +} + +afterEach(() => { + for (const editor of openEditors.splice(0)) { + if (!editor.isDestroyed) editor.destroy(); + } + vi.restoreAllMocks(); + vi.unstubAllGlobals(); + MockImage.mode = 'load'; + MockImage.width = 100; + MockImage.height = 100; +}); + +describe('downscaleDataUri', () => { + it('returns the original URI when downscaling is disabled (maxDimension 0)', async () => { + const uri = 'data:image/png;base64,AAAA'; + expect(await downscaleDataUri(uri, 0, 0.85)).toBe(uri); + }); + + it('returns the original URI when no Image constructor is available', async () => { + vi.stubGlobal('Image', undefined); + const uri = 'data:image/png;base64,AAAA'; + expect(await downscaleDataUri(uri, 100, 0.85)).toBe(uri); + }); + + it('returns the original URI when the image fails to load', async () => { + vi.stubGlobal('Image', MockImage); + MockImage.mode = 'error'; + const uri = 'data:image/png;base64,AAAA'; + expect(await downscaleDataUri(uri, 100, 0.85)).toBe(uri); + }); + + it('returns the original URI when the image already fits', async () => { + vi.stubGlobal('Image', MockImage); + MockImage.width = 50; + MockImage.height = 40; + const uri = 'data:image/png;base64,AAAA'; + expect(await downscaleDataUri(uri, 100, 0.85)).toBe(uri); + }); + + it('returns the original URI when a 2D context cannot be obtained', async () => { + vi.stubGlobal('Image', MockImage); + MockImage.width = 400; + MockImage.height = 200; + vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null); + const uri = 'data:image/png;base64,AAAA'; + expect(await downscaleDataUri(uri, 100, 0.85)).toBe(uri); + }); + + it('re-encodes an oversized PNG through the canvas', async () => { + vi.stubGlobal('Image', MockImage); + MockImage.width = 400; + MockImage.height = 200; + const ctx = { drawImage: vi.fn() }; + vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue( + ctx as unknown as CanvasRenderingContext2D, + ); + const toDataURL = vi + .spyOn(HTMLCanvasElement.prototype, 'toDataURL') + .mockReturnValue('data:image/png;base64,SCALED'); + const out = await downscaleDataUri('data:image/png;base64,AAAA', 100, 0.85); + expect(out).toBe('data:image/png;base64,SCALED'); + expect(ctx.drawImage).toHaveBeenCalledOnce(); + expect(toDataURL).toHaveBeenCalledWith('image/png', 0.85); + }); + + it('re-encodes a non-PNG image as jpeg', async () => { + vi.stubGlobal('Image', MockImage); + MockImage.width = 400; + MockImage.height = 400; + vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue( + { drawImage: vi.fn() } as unknown as CanvasRenderingContext2D, + ); + const toDataURL = vi + .spyOn(HTMLCanvasElement.prototype, 'toDataURL') + .mockReturnValue('data:image/jpeg;base64,SCALED'); + const out = await downscaleDataUri('data:image/webp;base64,AAAA', 100, 0.85); + expect(out).toBe('data:image/jpeg;base64,SCALED'); + expect(toDataURL).toHaveBeenCalledWith('image/jpeg', 0.85); + }); +}); + +describe('imageFileToInlineDataUri downscale branch', () => { + it('invokes the downscaler when maxDimension is positive', async () => { + vi.stubGlobal('Image', MockImage); + MockImage.width = 50; + MockImage.height = 50; // fits, so the URI comes back unchanged + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + const uri = await imageFileToInlineDataUri(file, { + maxSizeBytes: 1024 * 1024, + maxDimension: 100, + quality: 0.85, + }); + expect(uri.startsWith('data:image/png;base64,')).toBe(true); + }); + + it('disables the size guard when maxSizeBytes is 0', async () => { + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + const uri = await imageFileToInlineDataUri(file, { + maxSizeBytes: 0, + maxDimension: 0, + quality: 0.85, + }); + expect(uri.startsWith('data:image/png;base64,')).toBe(true); + }); +}); + +function makeEditor(opts?: { + image?: Record; + onError?: (error: Error) => void; +}): Editor { + const element = document.createElement('div'); + document.body.appendChild(element); + const extensions = opts?.onError + ? [ + StarterKit, + Base64Image.configure({ + maxSizeBytes: 4, + maxDimension: 0, + quality: 0.85, + onError: opts.onError, + }), + ] + : buildExtensions({ image: { maxDimension: 0, ...(opts?.image ?? {}) } }); + return new Editor({ element, extensions, content: 'hello' }); +} + +function paste(editor: Editor, event: unknown): boolean { + const plugin = base64ImagePluginKey.get(editor.state)!; + return (plugin.props.handlePaste as (v: unknown, e: unknown) => boolean)( + editor.view, + event, + ); +} + +function drop(editor: Editor, event: unknown): boolean { + const plugin = base64ImagePluginKey.get(editor.state)!; + return (plugin.props.handleDrop as (v: unknown, e: unknown) => boolean)( + editor.view, + event, + ); +} + +describe('Base64Image paste handler', () => { + it('ignores paste events without clipboard items', () => { + const editor = track(makeEditor()); + expect(paste(editor, { clipboardData: undefined })).toBe(false); + }); + + it('ignores clipboards that carry no files', () => { + const editor = track(makeEditor()); + const items = [{ kind: 'string', getAsFile: () => null }]; + expect(paste(editor, { clipboardData: { items } })).toBe(false); + }); + + it('ignores pasted non-image files without preventing default', () => { + const editor = track(makeEditor()); + const file = new File(['plain'], 'a.txt', { type: 'text/plain' }); + const items = [{ kind: 'file', getAsFile: () => file }]; + const preventDefault = vi.fn(); + expect(paste(editor, { clipboardData: { items }, preventDefault })).toBe( + false, + ); + expect(preventDefault).not.toHaveBeenCalled(); + }); + + it('embeds a pasted image file as inline base64', async () => { + const editor = track(makeEditor()); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + const items = [ + { kind: 'file', getAsFile: () => null }, // exercises the `if (file)` guard + { kind: 'file', getAsFile: () => file }, + ]; + const preventDefault = vi.fn(); + expect(paste(editor, { clipboardData: { items }, preventDefault })).toBe( + true, + ); + expect(preventDefault).toHaveBeenCalledOnce(); + await waitFor(() => + expect(editor.getHTML()).toContain('data:image/png;base64'), + ); + }); +}); + +describe('Base64Image drop handler', () => { + it('ignores drops without files', () => { + const editor = track(makeEditor()); + expect(drop(editor, { dataTransfer: undefined })).toBe(false); + }); + + it('embeds a dropped image at the resolved drop coordinates', async () => { + const editor = track(makeEditor()); + vi.spyOn(editor.view, 'posAtCoords').mockReturnValue({ + pos: 1, + inside: -1, + }); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + const preventDefault = vi.fn(); + expect( + drop(editor, { + dataTransfer: { files: [file] }, + clientX: 5, + clientY: 5, + preventDefault, + }), + ).toBe(true); + expect(preventDefault).toHaveBeenCalledOnce(); + await waitFor(() => + expect(editor.getHTML()).toContain('data:image/png;base64'), + ); + }); + + it('falls back to the current selection when coords resolve to nothing', async () => { + const editor = track(makeEditor()); + vi.spyOn(editor.view, 'posAtCoords').mockReturnValue(null); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + expect( + drop(editor, { + dataTransfer: { files: [file] }, + clientX: 0, + clientY: 0, + preventDefault: vi.fn(), + }), + ).toBe(true); + await waitFor(() => + expect(editor.getHTML()).toContain('data:image/png;base64'), + ); + }); +}); + +describe('Base64Image conversion error handling', () => { + it('routes conversion failures to the configured onError handler', async () => { + const onError = vi.fn(); + const editor = track(makeEditor({ onError })); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); // > 4 bytes + const items = [{ kind: 'file', getAsFile: () => file }]; + expect( + paste(editor, { clipboardData: { items }, preventDefault: vi.fn() }), + ).toBe(true); + await waitFor(() => expect(onError).toHaveBeenCalled()); + expect(onError.mock.calls[0][0]).toBeInstanceOf(Error); + expect(editor.getHTML()).not.toContain('data:image'); + }); + + it('swallows conversion failures when no onError handler is configured', async () => { + const editor = track(makeEditor({ image: { maxSizeBytes: 4 } })); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + const items = [{ kind: 'file', getAsFile: () => file }]; + expect( + paste(editor, { clipboardData: { items }, preventDefault: vi.fn() }), + ).toBe(true); + await new Promise((resolve) => setTimeout(resolve, 15)); + expect(editor.getHTML()).not.toContain('data:image'); + }); + + it('skips insertion when the editor is destroyed mid-conversion', async () => { + const editor = makeEditor(); + const file = new File([PNG_BYTES], 'p.png', { type: 'image/png' }); + const items = [{ kind: 'file', getAsFile: () => file }]; + paste(editor, { clipboardData: { items }, preventDefault: vi.fn() }); + editor.destroy(); // tear down before the async conversion resolves + await new Promise((resolve) => setTimeout(resolve, 20)); + expect(editor.isDestroyed).toBe(true); + }); +}); diff --git a/src/extensions/Base64Image.ts b/src/extensions/Base64Image.ts index 520e8426..e63c7f29 100644 --- a/src/extensions/Base64Image.ts +++ b/src/extensions/Base64Image.ts @@ -135,6 +135,9 @@ export const Base64Image = Image.extend({ }) .catch((err: unknown) => { options.onError?.( + // Conversion only ever rejects with an Error; the String() branch + // is a defensive normalization that does not run in practice. + /* v8 ignore next */ err instanceof Error ? err : new Error(String(err)), ); }); diff --git a/src/extensions/kit.test.ts b/src/extensions/kit.test.ts new file mode 100644 index 00000000..a6d9c8aa --- /dev/null +++ b/src/extensions/kit.test.ts @@ -0,0 +1,39 @@ +import { describe, it, expect } from 'vitest'; +import { buildExtensions } from './kit.js'; + +/** Names present in every kit regardless of options. */ +function names(exts: ReturnType): string[] { + return exts.map((e) => e.name); +} + +describe('buildExtensions', () => { + it('builds the default set when called with no options', () => { + const exts = buildExtensions(); + expect(Array.isArray(exts)).toBe(true); + // StarterKit + Link + Placeholder + Table(+row/header/cell) + image. + expect(names(exts)).toContain('image'); + expect(names(exts)).toContain('link'); + expect(names(exts)).toContain('table'); + }); + + it('applies image defaults when the image config is an empty object', () => { + const exts = buildExtensions({ image: {} }); + const image = exts.find((e) => e.name === 'image'); + expect(image?.options.maxSizeBytes).toBe(10 * 1024 * 1024); + expect(image?.options.maxDimension).toBe(1600); + expect(image?.options.quality).toBe(0.85); + }); + + it('honors an explicit image config and placeholder', () => { + const exts = buildExtensions({ + placeholder: 'Type here…', + image: { maxSizeBytes: 123, maxDimension: 42, quality: 0.5 }, + }); + const image = exts.find((e) => e.name === 'image'); + expect(image?.options.maxSizeBytes).toBe(123); + expect(image?.options.maxDimension).toBe(42); + expect(image?.options.quality).toBe(0.5); + const placeholder = exts.find((e) => e.name === 'placeholder'); + expect(placeholder?.options.placeholder).toBe('Type here…'); + }); +}); diff --git a/src/index.test.ts b/src/index.test.ts new file mode 100644 index 00000000..502a1d3c --- /dev/null +++ b/src/index.test.ts @@ -0,0 +1,39 @@ +import { describe, it, expect } from 'vitest'; +import * as api from './index.js'; + +/** + * The public entry point is a barrel of re-exports. Importing it executes every + * `export … from …` statement, which is both a smoke test that the surface is + * wired up and the coverage for the barrel itself. + */ +describe('package entry point', () => { + it('re-exports the React component surface', () => { + expect(typeof api.CwlEditor).toBe('function'); + // `default as Editor` alias resolves to the CwlEditor component. + expect(api.Editor).toBe(api.CwlEditor); + expect(typeof api.Toolbar).toBe('function'); + }); + + it('re-exports the headless extensions', () => { + expect(api.Base64Image).toBeTruthy(); + expect(api.base64ImagePluginKey).toBeTruthy(); + expect(typeof api.downscaleDataUri).toBe('function'); + expect(typeof api.imageFileToInlineDataUri).toBe('function'); + expect(typeof api.buildExtensions).toBe('function'); + }); + + it('re-exports the markdown/html serializer', () => { + expect(typeof api.markdownToHtml).toBe('function'); + expect(typeof api.htmlToMarkdown).toBe('function'); + expect(typeof api.normalizeMarkdown).toBe('function'); + }); + + it('re-exports the standalone base64 converter', () => { + expect(typeof api.bytesToBase64).toBe('function'); + expect(typeof api.base64ToBytes).toBe('function'); + expect(typeof api.fileToDataUri).toBe('function'); + expect(typeof api.dataUriToBytes).toBe('function'); + expect(typeof api.Base64SizeError).toBe('function'); + expect(typeof api.DataUriParseError).toBe('function'); + }); +}); diff --git a/src/markdown/serializer.test.ts b/src/markdown/serializer.test.ts index a68ee062..a8c21479 100644 --- a/src/markdown/serializer.test.ts +++ b/src/markdown/serializer.test.ts @@ -78,3 +78,22 @@ describe('base64 image round-trip', () => { expect(Array.from(recovered.bytes)).toEqual(Array.from(PNG_BYTES)); }); }); + +describe('inline image turndown rule branches', () => { + it('drops an that has no src', () => { + const md = htmlToMarkdown('beforeafter'); + expect(md).not.toContain('`); + }); + + it('defaults alt to empty when the attribute is missing', () => { + const md = htmlToMarkdown(``); + expect(md).toBe(``); + }); +});
hello world
linked
hello
beforeafter