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 ?