[Bug]: Inline style tags, or marks, like bold & italic do not work with the CodeBlock node

[philiprenich]

Which packages did you experience the bug in?

extension-code-block

What Tiptap version are you using?

2.0

What’s the bug you are facing?

A CodeBlock is currently not allowed to have marks like bold or italic applied to text inside of it. However, it should. A code block is simply a pre tag wrapping a code tag, and both of those are allowed to contain Phrasing Content. strong and em are two such tags in that category.

References:

• Pre tag on MDN
• Code tag on MDN
• Phrasing content on MDN

What browser are you using?

Firefox

Code example

https://tiptap.dev/api/nodes/code-block#usage

What did you expect to happen?

Phrasing content tags/marks like bold and italic to be allowed and render in the editor.

Anything to add? (optional)

No response Y'all rock! 😄

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[ashu12chi]

marks property of a node tells what all marks are allowed inside a node. Tiptap here explicitly set that no marks should be allowed inside a CodeBlock. You can modify this to have all / whatever marks you want.

To allow all marks:

const CustomCodeBlock = CodeBlock.extend({
  marks: "_"
});

To allow subset of marks:

const CustomCodeBlock = CodeBlock.extend({
  marks: "Bold Italic"
});

[philiprenich]

Thanks @ashu12chi for a solution by extension! Though I'm curious though why it is explicitly set to no marks when regular ol' HTML would allow them.

Devs - if this is a case of "this is TipTap's opinionated choice" I'm happy for the issue to be closed :)

[ashu12chi]

Someone from tiptap team can comment better, but as per my opinion, code-block should have it's own formatting like syntax highlighting and we don't need marks like bold and italic here. Even, in our application we have everything disabled inside a code-block. I am not aware of your use case, may be there it is making sense. (Short answer: This looks like opinionated choice)

[philiprenich]

I think the code-block-lowlight extension could be used for when you want an opinionated and pre-configured set of formatting. That's more explicitly a case where the one is saying "This is for programming code" and bold/italic doesn't make as much sense. But code-block is a simpler tag with more varied use cases because of that. I'm using it as a sort of "notes" section in my app, and that still wants basic text formatting.

It may be that a solution here is just an update in the docs to mention that TipTap's default config is to disallow any marks, but they can be configured as you mention.