Custom classes on code blocks for exported HTML

[Hendrixer]

This is an awesome project!

The syntax highlighting is legit and works great in the editor. However, unlike with markdown, I have no ability to hint at what language a code block may be. In all the examples, you're relying on hl.js to do the auto detecting. When parsing the HTML output in some app or anywhere, it would be helpful to have language classes on the pre / code blocks so the application knows what styles to apply. Also because that is part of the HTML spec now.

More than happy to build the Node / Mark / Extension myself, just need something to start with as the docs don't really show enough to work with.

Again, looking to be able to associate an attr, most likely a class with a specific code block and have it there on HTML export.

[erickwilder]

@Hendrixer this is actually a great idea. Just to get it clarified, is something like this enough for what you're thinking?

The location of a dropdown could be different but if we could add a list of supported syntaxes would be indeed a great addition.

[erickwilder]

As a side note: the docs are in a way to get revamped. If you feel like contributing to it before it would help a lot:

https://tiptap.scrumpy.io/docs

It's repo is https://github.com/scrumpy/tiptap-docs

[Hendrixer]

@erickwilder yes, something like that would work. Also like Github Markdown, just adding the lang name after the 3 ticks like:

```javascript

I'm down to contribute to docs. Would love to get this feature going as well. Any leads or examples on how I can implement this?

[Alecyrus]

@Hendrixer Vue component node could do this job, which implements node view use Vue. node view enables you to do anything about the appearance of nodes.

Way 1

Use regex in inputRule, pasteRule or any Plugins you implemented, to catch the javascript and make it be a property of the custom codeblock node. and highlight it in its node view (get view()) with computed property.

Way 2

Just like @erickwilder shows in the image:

You can implement some buttons or dropmenus in get view() with Vue, to allow your users to change the highlight modes, like language, theme or something else.

[Hendrixer]

Thanks for the help. Much closer to making this a reality but still very much struggling with doing this. I understand setting a vue component in get view(), but doing that with the highlight plugin does not seem to highlight the code. As typing in the contenteditable <code> won't get processed.

[Hendrixer]

Ok, figured it out. The issue was with the HighlightPlugin. I created my own Node that is exactly the same as the CodeHighlightBlock node except mine has a custom vue component on get view(). My node uses the same HighlightPlugin that CodeHighLightBlock does. Even though I did not register the CodeHighLightBlock plugin, there seem to be a issue with using the HighlightPlugin in my node.

To fix, I literally just created my own HighlightPlugin that is exactly the same code and used that. Not sure what that works.

[philippkuehn]

For Scrumpy we created a custom Highlight extension too. You can select from a defined list of languages or use auto detection. I also had to make some changed to the highlight plugin. But this won't land in the core because it will need some interface elements and that conflicts with the renderless approach of tiptap.

[Hendrixer]

If there's anyway you can share that with me is be forever thankful. A gist or anything. Really struggling here with my lack of prosemirror knowledge. No doubt I'll figure it out eventually, but I have dead lines

…

On Wed, May 22, 2019, 01:54 Philipp Kühn ***@***.***> wrote: For Scrumpy we created a custom Highlight extension too. You can select from a defined list of languages or use auto detection. I also had to make some changed to the highlight plugin. But this won't land in the core because it will need some interface elements and that conflicts with the renderless approach of tiptap. [image: May-22-2019 10-13-51] <https://user-images.githubusercontent.com/2500670/58160797-70670000-7c7f-11e9-9329-5efaa3212176.gif> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/scrumpy/tiptap/issues/245?email_source=notifications&email_token=AAVVPOFNYX7AO4BLNVTGN5DPWUC4BA5CNFSM4HBJ65RKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV6MCBI#issuecomment-494715141>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAVVPOB2U4ATWO4UETAOBQLPWUC4BANCNFSM4HBJ65RA> .

[Hendrixer]

That is literally the exact plugin I am trying to build.

[Hendrixer]

Also, appreciate your work on this. I know you're busy running a startup, I can relate. I'm will to sponsor and support tiptap if this would be helpful. I didn't find a page to add my support though.

[philippkuehn]

@Hendrixer I created a gist with all files related to this component. There are some other components and packages used there but hopefully this will help you.

I've also added a section to the readme to support the development of tiptap. thanks for that hint!

[Hendrixer]

thank you!

[Hendrixer]

That's gotten me much closer. I am, however, struggling with an issue that I was hoping your gist would fix. Whenever I remove the last character from the code block, prose mirror throws an error
Uncaught TypeError: Cannot read property 'nodeType' of null

After looking into it, I saw there is an issue on prosemirror for this error that was recently opened, but it only describes this issue for IE. I am in the latest version of Chrome. I don't think its prosemirror either, because if I create a Node without a custom view, this issue does not happen. As soon as I add custom Vue component to a Node's get view() then the error shows up. Even the code in your gist is having this issue. If I use the CodeBlockHighlight plugin this issue does not happen because that Node does not use a custom get view(). This is the only hurdle I have, any ideas?

[philippkuehn]

@Hendrixer I don't get this error with the attached component. And I'm using the latest tiptap versions at Scrumpy. Is there any way you could share a codesandbox?

[arttemiuss43]

@Hendrixer I have exactly the same behavior as you described when I use a Vue component in a Custom Node. Were you able to fix this error? I've noticed that when you remove the last character the entire code tag with ref="content" is removed which I guess causes the error.

[dokudoki]

@arttemiuss43 Same here! It seems like I only get the error if I set the CSS display: inline or display: inline-block for the div.