|
| 1 | +import { DOMParser, Fragment, Schema } from "prosemirror-model"; |
| 2 | +import { mergeParagraphs } from "./defaultBlockHelpers.js"; |
| 3 | + |
| 4 | +/** |
| 5 | + * Parses a `<details>` element into a block's inline content + nested children. |
| 6 | + * |
| 7 | + * Given: |
| 8 | + * <details> |
| 9 | + * <summary>inline content here</summary> |
| 10 | + * <p>child block 1</p> |
| 11 | + * <p>child block 2</p> |
| 12 | + * </details> |
| 13 | + * |
| 14 | + * Returns a Fragment shaped like: |
| 15 | + * [inline content, blockGroup<blockContainer<child1>, blockContainer<child2>>] |
| 16 | + * |
| 17 | + * ProseMirror's "fitting" algorithm will place the inline content into the |
| 18 | + * block node, and lift the blockGroup into the parent blockContainer as |
| 19 | + * nested children. This is the same mechanism used by `getListItemContent`. |
| 20 | + */ |
| 21 | +export function getDetailsContent( |
| 22 | + details: HTMLElement, |
| 23 | + schema: Schema, |
| 24 | + nodeName: string, |
| 25 | +): Fragment { |
| 26 | + const parser = DOMParser.fromSchema(schema); |
| 27 | + const summary = details.querySelector(":scope > summary"); |
| 28 | + |
| 29 | + // Parse inline content from <summary>. mergeParagraphs collapses multiple |
| 30 | + // <p> tags into one with <br> separators so it fits a single inline node. |
| 31 | + let inlineContent: Fragment; |
| 32 | + if (summary) { |
| 33 | + const clone = summary.cloneNode(true) as HTMLElement; |
| 34 | + mergeParagraphs(clone); |
| 35 | + inlineContent = parser.parse(clone, { |
| 36 | + topNode: schema.nodes.paragraph.create(), |
| 37 | + preserveWhitespace: true, |
| 38 | + }).content; |
| 39 | + } else { |
| 40 | + inlineContent = Fragment.empty; |
| 41 | + } |
| 42 | + |
| 43 | + // Collect everything after <summary> as nested block children. |
| 44 | + const childrenContainer = document.createElement("div"); |
| 45 | + childrenContainer.setAttribute("data-node-type", "blockGroup"); |
| 46 | + let hasChildren = false; |
| 47 | + |
| 48 | + for (const child of Array.from(details.childNodes)) { |
| 49 | + if ((child as HTMLElement).tagName === "SUMMARY") { |
| 50 | + continue; |
| 51 | + } |
| 52 | + // Skip whitespace-only text nodes (from HTML formatting) — ProseMirror |
| 53 | + // would otherwise create empty paragraph blocks from them. |
| 54 | + if (child.nodeType === 3 && !child.textContent?.trim()) { |
| 55 | + continue; |
| 56 | + } |
| 57 | + hasChildren = true; |
| 58 | + childrenContainer.appendChild(child.cloneNode(true)); |
| 59 | + } |
| 60 | + |
| 61 | + const contentNode = schema.nodes[nodeName].create({}, inlineContent); |
| 62 | + |
| 63 | + if (!hasChildren) { |
| 64 | + return contentNode.content; |
| 65 | + } |
| 66 | + |
| 67 | + // Parse children as a blockGroup. ProseMirror's fitting algorithm will |
| 68 | + // lift this out of the inline content node and into the parent |
| 69 | + // blockContainer as nested children. |
| 70 | + const blockGroup = parser.parse(childrenContainer, { |
| 71 | + topNode: schema.nodes.blockGroup.create(), |
| 72 | + }); |
| 73 | + |
| 74 | + return blockGroup.content.size > 0 |
| 75 | + ? contentNode.content.addToEnd(blockGroup) |
| 76 | + : contentNode.content; |
| 77 | +} |
0 commit comments