Hello world
", + "Paragraph
", + "Bold and italic
", + 'Nested paragraph
A quote", + "
First
Second
Third
", + ]; + + for (const html of testCases) { + const blocks = editor.tryParseHTMLToBlocks(html); + + // Verify no block has a type starting with "suggestion-" + const hasSuggestion = JSON.stringify(blocks).includes('"suggestion-'); + expect( + hasSuggestion, + `Parsing "${html}" should not produce suggestion blocks in block JSON`, + ).toBe(false); + + // Verify all blocks have expected types + for (const block of blocks) { + expect(block.type).not.toMatch(/^suggestion-/); + } + } + + editor._tiptapEditor.destroy(); + }); + + it("tryParseHTMLToBlocks should not create suggestion blocks from divs that look like suggestion markup", () => { + const editor = BlockNoteEditor.create(); + const div = document.createElement("div"); + editor.mount(div); + + // Try HTML that superficially resembles suggestion node DOM structure + const trickyCases = [ + 'Content
Content
Some text with bold
Hello
World
"; + + const result = parser.parse(domNode, { + topNode: editor.pmSchema.nodes.blockGroup.create(), + }); + + // Walk the resulting PM tree and verify no suggestion node exists + let foundSuggestion = false; + result.descendants((node) => { + if (node.type.name.startsWith("suggestion-")) { + foundSuggestion = true; + } + }); + + expect(foundSuggestion).toBe(false); + + destroy(); + }); +}); + +// ============================================================================= +// 7. getBlockInfoWithManualOffset interaction +// ============================================================================= +describe("SuggestionNode - getBlockInfo interaction", () => { + it("getBlockInfoWithManualOffset should find blockContent in a blockContainer with suggestion node", () => { + const { editor, destroy } = createMountedEditor(); + injectSuggestionBefore(editor, "Suggestion", "Main"); + + const doc = editor.prosemirrorState.doc; + const blockContainerNode = doc.firstChild!.firstChild!; + + const blockInfo = getBlockInfoWithManualOffset(blockContainerNode, 0); + + expect(blockInfo.isBlockContainer).toBe(true); + if (blockInfo.isBlockContainer) { + expect(blockInfo.blockContent.node.type.name).toBe("paragraph"); + // The blockNoteType should be derived from the blockContent, not the suggestion + expect(blockInfo.blockNoteType).toBe("paragraph"); + } + + destroy(); + }); + + it("getBlockInfoWithManualOffset should find blockGroup even when suggestion node is present", () => { + const { editor, destroy } = createMountedEditor(); + + // Create blockContainer with suggestion-paragraph, paragraph, and blockGroup (children) + editor.transact((tr) => { + const { nodes } = editor.pmSchema; + + const suggestionParagraph = nodes["suggestion-paragraph"].create( + SUGGESTION_PARA_ATTRS, + [editor.pmSchema.text("Suggestion")], + ); + const mainParagraph = nodes.paragraph.create(PARA_ATTRS, [ + editor.pmSchema.text("Main"), + ]); + const childParagraph = nodes.paragraph.create(PARA_ATTRS, [ + editor.pmSchema.text("Child block"), + ]); + const childContainer = nodes.blockContainer.create({ id: "child-1" }, [ + childParagraph, + ]); + const blockGroup = nodes.blockGroup.create(null, [childContainer]); + const blockContainer = nodes.blockContainer.create({ id: "block-1" }, [ + suggestionParagraph, + mainParagraph, + blockGroup, + ]); + + const outerGroup = nodes.blockGroup.create(null, [blockContainer]); + const newDoc = nodes.doc.create(null, [outerGroup]); + tr.replaceWith(0, tr.doc.content.size, newDoc.content); + }); + + const doc = editor.prosemirrorState.doc; + const blockContainerNode = doc.firstChild!.firstChild!; + + const blockInfo = getBlockInfoWithManualOffset(blockContainerNode, 0); + + expect(blockInfo.isBlockContainer).toBe(true); + if (blockInfo.isBlockContainer) { + expect(blockInfo.blockContent.node.type.name).toBe("paragraph"); + expect(blockInfo.blockNoteType).toBe("paragraph"); + // childContainer should be found (the blockGroup with children) + expect(blockInfo.childContainer).toBeDefined(); + expect(blockInfo.childContainer!.node.type.name).toBe("blockGroup"); + } + + destroy(); + }); +}); + +// ============================================================================= +// 8. Comparison test: same parse results with suggestion nodes in schema +// ============================================================================= +describe("SuggestionNode - schema transparency comparison", () => { + it("tryParseHTMLToBlocks should produce expected block types for common HTML patterns", () => { + const editor = BlockNoteEditor.create(); + const div = document.createElement("div"); + editor.mount(div); + + const testCases: Array<{ + html: string; + expectedFirstType: string; + description: string; + }> = [ + { + html: "Simple paragraph
", + expectedFirstType: "paragraph", + description: "single paragraph", + }, + { + html: "First
Second
", + expectedFirstType: "paragraph", + description: "multiple paragraphs", + }, + { + html: "Quoted text", + expectedFirstType: "quote", + description: "blockquote", + }, + ]; + + for (const { html, expectedFirstType, description } of testCases) { + const blocks = editor.tryParseHTMLToBlocks(html); + expect(blocks.length).toBeGreaterThan(0); + expect(blocks[0].type).toBe(expectedFirstType); + + // No block should ever be a suggestion node + for (const block of blocks) { + expect( + block.type, + `${description}: block should not be a suggestion node`, + ).not.toMatch(/^suggestion-/); + } + } + + editor._tiptapEditor.destroy(); + }); +}); + +// ============================================================================= +// 9. PM-level HTML round-trip: suggestion nodes survive serialization + parsing +// ============================================================================= +describe("SuggestionNode - PM-level HTML round-trip", () => { + it("ProseMirror DOMParser should recreate suggestion nodes from suggestion HTML", () => { + const { editor, destroy } = createMountedEditor(); + injectSuggestionBefore(editor, "Suggestion text", "Main text"); + + // Serialize the blockContainer to HTML using ProseMirror's serializer + const serializer = + DOMSerializer.fromSchema(editor.pmSchema); + const blockContainer = + editor.prosemirrorState.doc.firstChild!.firstChild!; + const fragment = serializer.serializeFragment( + blockContainer.content, + ); + + // Create a temporary DOM container and serialize into it + const tempDiv = document.createElement("div"); + tempDiv.appendChild(fragment); + + // Verify the serialized HTML contains data-suggestion="true" + const suggestionEl = tempDiv.querySelector('[data-suggestion="true"]'); + expect(suggestionEl).not.toBeNull(); + expect(suggestionEl!.getAttribute("data-content-type")).toBe("paragraph"); + + // Now parse this HTML back using ProseMirror's DOMParser + const parser = PMDOMParser.fromSchema(editor.pmSchema); + const parsed = parser.parse(tempDiv, { + topNode: editor.pmSchema.nodes.blockContainer.create({ id: "test-1" }), + }); + + // The parsed node should contain a suggestion node + let foundSuggestion = false; + let foundBlockContent = false; + parsed.forEach((child) => { + if (child.type.name === "suggestion-paragraph") { + foundSuggestion = true; + expect(child.textContent).toBe("Suggestion text"); + expect(child.attrs.__suggestionData).toBe("true"); + } + if (child.type.spec.group === "blockContent") { + foundBlockContent = true; + expect(child.textContent).toBe("Main text"); + } + }); + expect(foundSuggestion).toBe(true); + expect(foundBlockContent).toBe(true); + + destroy(); + }); + + it("ProseMirror serializeForClipboard should preserve suggestion nodes in clipboard HTML", () => { + const { editor, destroy } = createMountedEditor(); + injectSuggestionBefore(editor, "Suggestion text", "Main text"); + + // Select the entire block (NodeSelection on the blockContainer) + const view = editor._tiptapEditor.view; + const blockContainerPos = 1; // position of blockContainer in doc > blockGroup + const nodeSelection = NodeSelection.create(view.state.doc, blockContainerPos); + view.dispatch(view.state.tr.setSelection(nodeSelection)); + + // Serialize using ProseMirror's clipboard serializer + const slice = view.state.selection.content(); + const { dom } = view.serializeForClipboard(slice); + const html = (dom as HTMLElement).innerHTML; + + // The clipboard HTML should contain data-suggestion="true" + expect(html).toContain('data-suggestion="true"'); + expect(html).toContain('data-content-type="paragraph"'); + + destroy(); + }); + + it("plain HTML without data-suggestion should NOT create suggestion nodes", () => { + const { editor, destroy } = createMountedEditor(); + + // Parse HTML that has data-content-type but NOT data-suggestion + const html = '
Hello world
Hello world!
Hello world
Hello world!
Hello world
Hello world!
Hello world
Hello world!