Body copy
'), + ); + + expect(slides).toHaveLength(1); + expect(slideText(slides[0])).toBe('Title Body copy'); + }); + + it('starts a new slide at a heading', () => { + const slides = splitDocIntoSlides( + docFrom('Trailing text
Body copy
'), + ); + + expect(slides).toHaveLength(2); + expect(slideText(slides[0])).toBe('Trailing text'); + expect(slideText(slides[1])).toBe('Title Body copy'); + }); + + it('leaves splitting to measurement when overflow limits are disabled', () => { + const paragraphs = Array.from( + { length: 30 }, + (_, i) => `Paragraph number ${i}
`, + ).join(''); + + const slides = splitDocIntoSlides(docFrom(paragraphs), { + applyOverflowLimits: false, + }); + + // No structural breaks in the document, so it stays a single slide for + // the measurement pass to divide against the real stage. + expect(slides).toHaveLength(1); + }); + + it('starts a new slide at each H2 and keeps the heading on it', () => { + const slides = splitDocIntoSlides( + docFrom('First
Second
'), + ); + + expect(slides).toHaveLength(2); + expect(slideText(slides[0])).toBe('One First'); + expect(slideText(slides[1])).toBe('Two Second'); + }); + + it('breaks on an explicit page break without rendering the break itself', () => { + const slides = splitDocIntoSlides( + docFrom( + 'Before
After
', + ), + ); + + expect(slides).toHaveLength(2); + expect(slideText(slides[0])).toBe('Before'); + expect(slideText(slides[1])).toBe('After'); + expect(slides.some((slide) => hasNodeType(slide, 'pageBreak'))).toBe(false); + }); + + it('breaks a long run of paragraphs once it overflows the slide', () => { + const paragraphs = Array.from( + { length: 12 }, + (_, i) => `Paragraph number ${i}
`, + ).join(''); + + const slides = splitDocIntoSlides(docFrom(paragraphs), { + maxLinesPerSlide: 4, + }); + + expect(slides.length).toBeGreaterThan(1); + // Nothing may be dropped on the way to the stage. + const allText = slides.map(slideText).join(' '); + for (let i = 0; i < 12; i++) { + expect(allText).toContain(`Paragraph number ${i}`); + } + }); + + it('never emits an empty slide', () => { + const slides = splitDocIntoSlides( + docFrom( + 'Only
', + ), + ); + + expect(slides).toHaveLength(1); + expect(slideText(slides[0])).toBe('Only'); + }); + + // The reason this module exists: the Markdown pipeline flattens a columns + // block into sequential paragraphs, which is what makes "image left, text + // right" impossible on a slide today. + it('preserves a multi-column block instead of flattening it', () => { + const doc = docFrom({ + type: 'doc', + content: [ + { + type: 'dBlock', + content: [ + { + type: 'columns', + content: [ + { + type: 'column', + content: [ + { + type: 'dBlock', + content: [ + { + type: 'paragraph', + content: [{ type: 'text', text: 'Left side' }], + }, + ], + }, + ], + }, + { + type: 'column', + content: [ + { + type: 'dBlock', + content: [ + { + type: 'paragraph', + content: [{ type: 'text', text: 'Right side' }], + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }); + + // Guard: if the schema rejected the structure the assertion below would + // pass vacuously, so confirm the source document really has columns. + expect(hasNodeType(doc, 'columns')).toBe(true); + + const slides = splitDocIntoSlides(doc); + + expect(slides).toHaveLength(1); + expect(hasNodeType(slides[0], 'columns')).toBe(true); + expect(hasNodeType(slides[0], 'column')).toBe(true); + expect(slideText(slides[0])).toContain('Left side'); + expect(slideText(slides[0])).toContain('Right side'); + }); + + it('measures a columns block by its tallest column, not the sum', () => { + const column = (lines: number) => ({ + type: 'column', + content: Array.from({ length: lines }, (_, i) => ({ + type: 'dBlock', + content: [ + { + type: 'paragraph', + content: [{ type: 'text', text: `line ${i}` }], + }, + ], + })), + }); + + const doc = docFrom({ + type: 'doc', + content: [ + { + type: 'dBlock', + content: [{ type: 'columns', content: [column(3), column(3)] }], + }, + ], + }); + + // Six paragraphs total but only three lines tall, so it fits a 4-line + // slide. Summing the columns would wrongly split it. + const slides = splitDocIntoSlides(doc, { maxLinesPerSlide: 4 }); + expect(slides).toHaveLength(1); + }); +}); + +describe('matchListMarkersToText', () => { + const listItem = (text: JSONContent): JSONContent => ({ + type: 'listItem', + content: [{ type: 'paragraph', content: [text] }], + }); + + // A native marker is sized by itsbig
')).toBe( + 'big
', + ); + }); + + it.each(['px', 'rem', 'em', 'pt'])('handles %s units', (unit) => { + expect( + scaleInlineFontSizes(`x`), + ).toBe( + `x`, + ); + }); + + it('scales every occurrence, not just the first', () => { + const scaled = scaleInlineFontSizes( + 'a
b
', + ); + + expect(scaled).toContain('* 12px)'); + expect(scaled).toContain('* 30px)'); + }); + + // Running twice must not nest calc() inside calc(). + it('is idempotent', () => { + const once = scaleInlineFontSizes('x
'); + expect(scaleInlineFontSizes(once)).toBe(once); + }); + + it('leaves markup without an inline size untouched', () => { + const html = 'plain
probe
'; + document.body.appendChild(probe); + + const measurable = probe.scrollHeight > 0; + probe.remove(); + + return measurable; +}; + +/** + * Hidden stand-in for the slide stage, styled identically so measurements + * reflect what the presentation will actually render. + */ +const createStageMeasurementHost = (fontScale: number) => { + const host = document.createElement('div'); + host.className = 'presentation-mode'; + host.setAttribute('aria-hidden', 'true'); + host.style.cssText = ` + position: absolute; + left: -99999px; + top: 0; + width: ${STAGE_WIDTH_PX}px; + visibility: hidden; + pointer-events: none; + `; + host.style.setProperty('--slide-font-scale', String(fontScale)); + + const content = document.createElement('div'); + content.className = 'ProseMirror'; + host.appendChild(content); + document.body.appendChild(host); + + return { host, content }; +}; + +/** + * Descends through single-child wrappers to the element whose children can + * actually be divided. A slide holding one list arrives as + * `div > ul > li…`, so the list items are the only useful break points. + */ +/** + * Breaking these apart would destroy the layout rather than paginate it: the + * two halves of a side-by-side block belong on the same slide, and a table + * split mid-way loses its header row. + */ +const NEVER_DIVIDE_SELECTOR = + '[data-type="columns"], [data-type="column"], table'; + +/** Only list items are safe to paginate between. */ +const DIVISIBLE_TAGS = new Set(['UL', 'OL']); + +const findDivisibleElement = (root: Element): Element | null => { + let node: Element | null = root; + + while (node) { + if (node.matches(NEVER_DIVIDE_SELECTOR)) return null; + + if (DIVISIBLE_TAGS.has(node.tagName) && node.children.length > 1) { + return node; + } + + if (node.children.length !== 1) return null; + + node = node.firstElementChild; + } + + return null; +}; + +/** A block whose only real content is a heading. */ +const isHeadingBlock = (element: Element): boolean => + /^H[1-6]$/.test(element.tagName) || + !!element.querySelector('h1, h2, h3, h4, h5, h6'); + +/** Rebuilds a block keeping only children in `[from, to)`. */ +const withChildRange = (html: string, from: number, to: number): string => { + const wrapper = document.createElement('div'); + wrapper.innerHTML = html; + + const root = wrapper.firstElementChild; + if (!root) return html; + + const target = findDivisibleElement(root); + if (!target) return html; + + Array.from(target.children).forEach((child, index) => { + if (index < from || index >= to) child.remove(); + }); + + // Keep numbering continuous when an ordered list spans slides. + if (target.tagName === 'OL' && from > 0) { + const start = Number(target.getAttribute('start') ?? '1'); + target.setAttribute('start', String(start + from)); + } + + return wrapper.innerHTML; +}; + +/** + * Divides one oversized block — typically a long list — by breaking between + * its children rather than letting it run off the slide. + * + * `precedingHtml` is whatever already sits on the slide, so the split accounts + * for the space a heading above it has already used. + */ +const divideToFit = ( + html: string, + precedingHtml: string, + heightOf: (html: string) => number, +): { head: string; tail: string } | null => { + const wrapper = document.createElement('div'); + wrapper.innerHTML = html; + + const root = wrapper.firstElementChild; + if (!root) return null; + + const target = findDivisibleElement(root); + if (!target) return null; + + const total = target.children.length; + if (total <= 1) return null; + + let take = total - 1; + while ( + take >= 1 && + heightOf(precedingHtml + withChildRange(html, 0, take)) > + STAGE_CONTENT_HEIGHT_PX + ) { + take--; + } + + // Not even one child fits alongside what is already there. + if (take < 1) return null; + + return { + head: withChildRange(html, 0, take), + tail: withChildRange(html, take, total), + }; +}; + +/** + * Breaks slides that genuinely overflow the stage, and only those. + * + * Character and line counts are a poor proxy for height: they split slides + * that plainly had room left. Measuring the rendered result means a title and + * its content stay on one slide whenever they actually fit. + */ +export const fitSlidesToStage = ( + slides: string[], + fontScale: number = 1, +): string[] => { + if (slides.length === 0 || !canMeasureLayout()) return slides; + + const { host, content } = createStageMeasurementHost(fontScale); + + const heightOf = (html: string): number => { + content.innerHTML = html; + return content.scrollHeight; + }; + + const htmlOf = (elements: Element[]): string => + elements.map((element) => element.outerHTML).join(''); + + try { + const fitted: string[] = []; + const pending = [...slides]; + + while (pending.length > 0) { + const slide = pending.shift() as string; + + const measuredHeight = heightOf(slide); + + if (measuredHeight <= STAGE_CONTENT_HEIGHT_PX) { + fitted.push(slide); + continue; + } + + const container = document.createElement('div'); + container.innerHTML = slide; + const blocks = Array.from(container.children); + + // One oversized block, typically a long list: break between its + // children instead of letting it run off the slide. + if (blocks.length <= 1) { + const divided = divideToFit(slide, '', heightOf); + + if (divided) { + fitted.push(divided.head); + pending.unshift(divided.tail); + } else { + // Genuinely indivisible — a single paragraph or image that is + // simply taller than the stage. + fitted.push(slide); + } + + continue; + } + + // Largest run of whole blocks that still fits. + let fitCount = blocks.length - 1; + while ( + fitCount > 0 && + heightOf(htmlOf(blocks.slice(0, fitCount))) > STAGE_CONTENT_HEIGHT_PX + ) { + fitCount--; + } + + const headHtml = htmlOf(blocks.slice(0, fitCount)); + const nextBlock = blocks[fitCount]; + + // Whole blocks alone would strand a heading on a slide of its own with + // its content pushed to the next one. Carry as much of the following + // block as the remaining space allows. + const carried = nextBlock + ? divideToFit(nextBlock.outerHTML, headHtml, heightOf) + : null; + + if (carried) { + fitted.push(headHtml + carried.head); + pending.unshift(carried.tail + htmlOf(blocks.slice(fitCount + 1))); + continue; + } + + // The next block cannot be divided — a columns layout, a table, an + // image. If everything that fits so far is just headings, keep them with + // that block and accept the overflow: a title alone on a slide with its + // content on the next one is a worse outcome than a slide that runs a + // little long. + if (nextBlock && blocks.slice(0, fitCount).every(isHeadingBlock)) { + fitted.push(htmlOf(blocks.slice(0, fitCount + 1))); + pending.unshift(htmlOf(blocks.slice(fitCount + 1))); + continue; + } + + // Otherwise emit at least one whole block so the remainder always + // shrinks and the loop terminates. + const emitCount = Math.max(fitCount, 1); + fitted.push(htmlOf(blocks.slice(0, emitCount))); + pending.unshift(htmlOf(blocks.slice(emitCount))); + } + + return fitted; + } finally { + host.remove(); + } +}; + +export interface BuildSlidesOptions extends DocToSlidesOptions { + /** Current presenter font scale, so measurement matches what is on screen. */ + fontScale?: number; + ipfsImageFetchFn?: ( + _data: IpfsImageFetchPayload, + ) => Promise<{ url: string; file: File }>; + fetchV1ImageFn?: (url: string) => Promise