Difference between editor and export

[AntoLC]

Describe the bug
While working on this PR about export testing (suitenumerique/docs#1762) I noticed a few differences between what is render by the editor and what is in the PDF.

---

• Code block in the editor:

• Code block in the PDF:

---

Toggle heading does not have the arrow:

Misc

• Node version:
• Package manager:
• Browser:
• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[nperez0111]

@AntoLC, I think that the toggle for the heading is intentional, I'm not sure that it really adds anything, the toggle is meant to be interacted with.

The code block not having syntax highlighting is also a bit hard to. get working since that would require highlighting it for the PDF. imo, it should be treated as a printable version of the document, so it should not even be in black like that, more like a bordered box with the code in a monospace font.

[AntoLC]

For the toggle heading, yes fair enough, does not seem to be very impacting anyway.
But for the code block, I think there is an issue here:

BlockNote/packages/xl-pdf-exporter/src/pdf/defaultSchema/blocks.tsx

Line 117 in 575b81c

const textContent = (block.content as StyledText<any>[])[0]?.text || "";

Only the first element of the array is used, but const a = 10; is split in different part, here my console log:

block.content:

[
    {
        "type": "text",
        "text": "const",
        "styles": {
            "textColor": "rgb(249, 117, 131)"
        }
    },
    {
        "type": "text",
        "text": " ",
        "styles": {
            "textColor": "rgb(225, 228, 232)"
        }
    },
    {
        "type": "text",
        "text": "a",
        "styles": {
            "textColor": "rgb(121, 184, 255)"
        }
    },
    {
        "type": "text",
        "text": " ",
        "styles": {
            "textColor": "rgb(225, 228, 232)"
        }
    },
    {
        "type": "text",
        "text": "=",
        "styles": {
            "textColor": "rgb(249, 117, 131)"
        }
    },
    {
        "type": "text",
        "text": " ",
        "styles": {
            "textColor": "rgb(225, 228, 232)"
        }
    },
    {
        "type": "text",
        "text": "10",
        "styles": {
            "textColor": "rgb(121, 184, 255)"
        }
    },
    {
        "type": "text",
        "text": ";",
        "styles": {
            "textColor": "rgb(225, 228, 232)"
        }
    }
]

Actually we get the color on each part of the code, maybe it is not so complicated to get it display in the PDF, wdyt ?

[nperez0111]

@AntoLC, I took a look at our PDF exports, and it looks like we don't have the same problem? Are you maybe doing something different with code-blocks?

Code-blocks should be rendered as plain text on a single line (like the example below):

So, it is unexpected to me that your code-block would be exporting colors as well (since ours should only colorize via decorations when rendering in the browser)

[AntoLC]

It is because in your example on Blocknote, you don't integrate fully codeBlock, per default it is in javascript language in your demo, but as you can see it does not render on the demo as it should:

BlockNote/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx

Lines 325 to 333 in 410db8b

	{
	type: "codeBlock",
	props: {
	language: "javascript",
	},
	content: `const helloWorld = (message) => {
	console.log("Hello World", message);
	};`,
	},

If I copy the code block from your demo to Docs, I get the coloration:

Here how we integrate it: https://github.com/suitenumerique/docs/blob/fdd3557c1c4067f77dfc4e353fcafd649d367959/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx#L62