From 7d2b928dfe9f67bb4f287ccf008c1d3d8044b11b Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 3 Nov 2025 15:16:05 +0100 Subject: [PATCH] test: add test case for exporting custom block --- .../custom-blocks/simpleCustomParagraph.html | 9 +++ .../custom-blocks/simpleCustomParagraph.html | 1 + .../custom-blocks/simpleCustomParagraph.md | 1 + .../custom-blocks/simpleCustomParagraph.json | 24 +++++++ .../export/exportTestInstances.ts | 12 ++++ .../core/schema/__snapshots__/blocks.json | 1 + tests/src/unit/core/testSchema.ts | 67 ++++++++++++------- 7 files changed, 92 insertions(+), 23 deletions(-) create mode 100644 tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/custom-blocks/simpleCustomParagraph.html create mode 100644 tests/src/unit/core/formatConversion/export/__snapshots__/html/custom-blocks/simpleCustomParagraph.html create mode 100644 tests/src/unit/core/formatConversion/export/__snapshots__/markdown/custom-blocks/simpleCustomParagraph.md create mode 100644 tests/src/unit/core/formatConversion/export/__snapshots__/nodes/custom-blocks/simpleCustomParagraph.json diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/custom-blocks/simpleCustomParagraph.html b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/custom-blocks/simpleCustomParagraph.html new file mode 100644 index 0000000000..a7eb9652a0 --- /dev/null +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/custom-blocks/simpleCustomParagraph.html @@ -0,0 +1,9 @@ +
+
+
+
+

Simple Custom Paragraph

+
+
+
+
\ No newline at end of file diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/html/custom-blocks/simpleCustomParagraph.html b/tests/src/unit/core/formatConversion/export/__snapshots__/html/custom-blocks/simpleCustomParagraph.html new file mode 100644 index 0000000000..a60fa74213 --- /dev/null +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/html/custom-blocks/simpleCustomParagraph.html @@ -0,0 +1 @@ +

Simple Custom Paragraph

\ No newline at end of file diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/custom-blocks/simpleCustomParagraph.md b/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/custom-blocks/simpleCustomParagraph.md new file mode 100644 index 0000000000..08cfea26b7 --- /dev/null +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/markdown/custom-blocks/simpleCustomParagraph.md @@ -0,0 +1 @@ +Simple Custom Paragraph diff --git a/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/custom-blocks/simpleCustomParagraph.json b/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/custom-blocks/simpleCustomParagraph.json new file mode 100644 index 0000000000..c63e9fad19 --- /dev/null +++ b/tests/src/unit/core/formatConversion/export/__snapshots__/nodes/custom-blocks/simpleCustomParagraph.json @@ -0,0 +1,24 @@ +[ + { + "attrs": { + "id": "1", + }, + "content": [ + { + "attrs": { + "backgroundColor": "default", + "textAlignment": "left", + "textColor": "default", + }, + "content": [ + { + "text": "Simple Custom Paragraph", + "type": "text", + }, + ], + "type": "simpleCustomParagraph", + }, + ], + "type": "blockContainer", + }, +] \ No newline at end of file diff --git a/tests/src/unit/core/formatConversion/export/exportTestInstances.ts b/tests/src/unit/core/formatConversion/export/exportTestInstances.ts index 298e361884..899331b55d 100644 --- a/tests/src/unit/core/formatConversion/export/exportTestInstances.ts +++ b/tests/src/unit/core/formatConversion/export/exportTestInstances.ts @@ -1717,6 +1717,18 @@ export const exportTestInstancesBlockNoteHTML: TestInstance< }, executeTest: testExportBlockNoteHTML, }, + { + testCase: { + name: "custom-blocks/simpleCustomParagraph", + content: [ + { + type: "simpleCustomParagraph", + content: "Simple Custom Paragraph", + }, + ], + }, + executeTest: testExportBlockNoteHTML, + }, ]; export const exportTestInstancesHTML: TestInstance< diff --git a/tests/src/unit/core/schema/__snapshots__/blocks.json b/tests/src/unit/core/schema/__snapshots__/blocks.json index bb7951894d..fe083f3e8b 100644 --- a/tests/src/unit/core/schema/__snapshots__/blocks.json +++ b/tests/src/unit/core/schema/__snapshots__/blocks.json @@ -242,6 +242,7 @@ "extensions": undefined, "implementation": { "node": null, + "parse": [Function], "render": [Function], "toExternalHTML": [Function], }, diff --git a/tests/src/unit/core/testSchema.ts b/tests/src/unit/core/testSchema.ts index 24a623aaf6..eca37363fa 100644 --- a/tests/src/unit/core/testSchema.ts +++ b/tests/src/unit/core/testSchema.ts @@ -1,12 +1,14 @@ import { BlockNoteSchema, - addNodeAndExtensionsToSpec, + createBlockConfig, + createBlockSpec, createImageBlockConfig, createImageBlockSpec, createInlineContentSpec, createPageBreakBlockSpec, createStyleSpec, defaultProps, + parseDefaultProps, } from "@blocknote/core"; // BLOCKS ---------------------------------------------------------------------- @@ -14,12 +16,15 @@ import { // This is a modified version of the default image block that does not implement // a `toExternalHTML` function. It's used to test if the custom serializer by // default serializes custom blocks using their `render` function. -const SimpleImage = addNodeAndExtensionsToSpec( - { - type: "simpleImage", - propSchema: createImageBlockConfig({}).propSchema, - content: "none", - }, +const SimpleImage = createBlockSpec( + createBlockConfig( + () => + ({ + type: "simpleImage", + propSchema: createImageBlockConfig({}).propSchema, + content: "none", + }) as const, + ), { render(block, editor) { return createImageBlockSpec().implementation.render.call( @@ -31,13 +36,27 @@ const SimpleImage = addNodeAndExtensionsToSpec( }, ); -const CustomParagraph = addNodeAndExtensionsToSpec( - { - type: "customParagraph", - propSchema: defaultProps, - content: "inline", - }, +const CustomParagraph = createBlockSpec( + createBlockConfig( + () => + ({ + type: "customParagraph", + propSchema: defaultProps, + content: "inline", + }) as const, + ), { + parse: (e) => { + if (e.tagName !== "P") { + return undefined; + } + + if (e.classList.contains("custom-paragraph")) { + return parseDefaultProps(e); + } + + return undefined; + }, render: () => { const paragraph = document.createElement("p"); paragraph.className = "custom-paragraph"; @@ -50,7 +69,6 @@ const CustomParagraph = addNodeAndExtensionsToSpec( toExternalHTML: () => { const paragraph = document.createElement("p"); paragraph.className = "custom-paragraph"; - paragraph.innerHTML = "Hello World"; return { dom: paragraph, @@ -59,12 +77,15 @@ const CustomParagraph = addNodeAndExtensionsToSpec( }, ); -const SimpleCustomParagraph = addNodeAndExtensionsToSpec( - { - type: "simpleCustomParagraph", - propSchema: defaultProps, - content: "inline", - }, +const SimpleCustomParagraph = createBlockSpec( + createBlockConfig( + () => + ({ + type: "simpleCustomParagraph", + propSchema: defaultProps, + content: "inline", + }) as const, + ), { render: () => { const paragraph = document.createElement("p"); @@ -198,9 +219,9 @@ const FontSize = createStyleSpec( export const testSchema = BlockNoteSchema.create().extend({ blockSpecs: { pageBreak: createPageBreakBlockSpec(), - customParagraph: CustomParagraph, - simpleCustomParagraph: SimpleCustomParagraph, - simpleImage: SimpleImage, + customParagraph: CustomParagraph(), + simpleCustomParagraph: SimpleCustomParagraph(), + simpleImage: SimpleImage(), }, inlineContentSpecs: { mention: Mention,