"Preformatted" block autocompleting type declarations in pasted code

[koskila]

Describe the bug
"Preformatted" block is "autocompleting" or "autoclosing" type declarations in pasted code, because it interprets them as html tags.

To Reproduce
Steps to reproduce the behavior:

1. Edit page
2. Add Preformatted block
3. Paste code, such as "DbContextOptions options"
4. Modify the code as html
5. Save
6. Observe the "preformatted" block now having at the end.

Expected behavior
Type declarations should not be autoclosed - they are independent, and not html.

Screenshots

(Example with being closed at the end of the file.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser: Chrome Version 72.0.3626.109 (Official Build) (64-bit), but I suspect this might be partially caused by mobile usage as that's when I usually see this
• WordPress 5.1

Smartphone (please complete the following information):

• Device: Galaxy S9+
• OS: Android 9 (4.9.112-15119402)
• Browser Chrome
• Version 72.0.3626.96

Let me know if you require any more information!

[talldan]

Hi @koskila, I had a quick test of this but wasn't able to reproduce the issue. Would be able to provide the snippet of code you're using to trigger the issue? Thanks.

I also wanted to check, when you mentioned 'Modify the code as html', were you using the option 'Edit as HTML' in the block menu? I was also wondering why you'd need to do that?

[koskila]

@talldan - I need to edit blocks as html to add a parameter lang="" for the preformatted blocks, as there's no out-of-the-box block providing syntax highlighting. Modifying the blocks selecting "Edit as HTML" brings this issue up - not always, but often:

Removing the "closing tags" from the end sometimes is saved, sometimes not - I have no idea why it's not consistent...

[koskila]

Okay, so I tried again. Adding this to a block using "Edit as HTML":

<pre lang="csharp">
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
</pre>

Produces this:

And if I then refresh the editor, this is what the block has changed into:

<pre lang="csharp">services.AddSingleton<ihttpcontextaccessor ,="" httpcontextaccessor="">();
</ihttpcontextaccessor></pre>

[koskila]

Alright, the reason is found: Gutenberg and WP-GeSHi-Highlight have some pretty bad compatibility issues it seems. Using the classic editor works, but also after disabling the highlighting plugin Gutenberg doesn't mess up.

I just wish it was easier to find a well-working code highlighting plugin on WordPress... :) I'll resolve the case, since I don't think this should be fixed on Gutenberg's end.

[koskila]

Actually, scratch that. After opening the page in edit mode in another browser with WP-GeSHi-Highlight disabled, the issue is there again. So it's probably not that plugin, but rather Gutenberg.

Sorry for the back-and-forth. What an infuriating case. If you want any more info, let me know - would love to see this fixed one way or another.

[ellatrix]

@koskila The preformatted block is not a code editor. You should use the Code block instead. In the future, the code block have an option to set the language and have syntax highlighting.

[koskila]

Thanks for the comments - it's not the preformatted block though, it's the custom html block (like shown in the screenshots). Even a way to disable the autocomplete (for custom html blocks) from messing up would be a perfectly valid solution.

[ellatrix]

Sorry, perhaps I'm having a hard time understanding the issue.

[koskila]

No worries - so am I! But my understanding is, that whenever I want to have something like this in a custom HTML block:

<pre>
var list = new List<string>();
</pre>

It'll get turned to this:

<pre>
var list = new List<string></string>();
</pre>

Or occasionally this:

<pre>
var list = new List<string>();
</string>
</pre>

And it gets even weirder with Dictionaries and such:

<pre>
var dict = new Dictionary<string,Object>();
</pre>

Will become:

<pre>
var dict = new Dictionary<string ='',object =''>();
</string></object>
</pre>

(Note: even casing changes!)

[koskila]

Oh, and as a side note - really looking forward to the changes to code-block you mentioned! Syntax highlighting is a very welcome new feature. Much appreciated :)

[talldan]

@koskila Right, I understand now. The issue is that the Custom HTML block does some HTML validation and automatic fixing when it sees invalid html. When it sees <string> it considers it an unterminated html tag and so adds a closing tag. It'll also change the casing as you mentioned.

The solution (if you want to use the Custom HTML block instead of the Code block) is to escape the code you're trying to add first. Basically turn this:

<pre>
var list = new List<string>();
</pre>

into this:

<pre>
var list = new List&lt;string&gt;();
</pre>

There are some online tools you can use to escape content, like this one: https://www.freeformatter.com/html-escape.html

This tool might also be useful - http://hilite.me/ - it converts code into syntax highlighted html snippet that you can insert into your post (and does the escaping as part of that).

I would just double-check to make sure there are no malicious scripts or anything like that are being added to the HTML! (not sure, but Gutenberg might strip those out anyway).

I'll close the issue now as I think there are some good solutions, and hopefully at some point syntax highlighting will appear in the code block.

[koskila]

@talldan, I appreciate the response, but encoding the html does not help. See - this:

Becomes this:

I'd love to see the syntax highlighting appear, as this renders Gutenberg really difficult to use for sharing code snippets. I could upload everything to GitHub as Gists and then embed them, but that's a really overengineered problem of pasting example code - sometimes just one line - to a blog entry.

I'd like for the issue to be reopened as there's no good workaround (apart from not using Gutenberg but embedding the scripts instead) available, please.

[talldan]

@koskila - please could you provide reproduction steps and let us know which version you're using? I'm unable to reproduce the issue. Here's an example of what I see with the custom HTML block:

Editor - Custom HTML block content

Editor - Custom HTML block preview

Post preview

[talldan]

As for reopening—if we can find a bug with the Custom HTML block, then I'm happy to open this as a bug. At the moment I'm unable to reproduce an issue. We'll need some reproduction steps in the latest version of Gutenberg (it could be that there was an issue in an older version of the editor that's since been fixed).

There's already a separate open issue for syntax highlighting in the code block that you can follow - #10423

There isn't a designated developer for the issue yet, but there's already been some discussion and a few proof of concepts.

[koskila]

Thanks for the reference to #10423, I subscribed to the notifications as I'd really love to see this functionality.

An example where this issue happens:

That html produces this after publishing:

The article is here, but I'll need to revert the changes as the output is confusing to readers:
https://www.koskila.net/help-my-asp-net-mvc-textbox-date-format-is-wrong/

[koskila]

I tested replacing all of the characters as well:

And the output:

I'm running 5.1.1, as I push the updates to the site during weekends when there's less traffic.

[talldan]

I still couldn't reproduce this using the same text in your post. I think there are two possibilities:

• This is a bug that's since been fixed (WordPress 5.2 was released yesterday, so there's a chance that might resolve the matter) 🤞
• The theme or a plugin are causing an issue

If it can be isolated to a theme or plugin issue, it would be worth following up with the developer. I'm happy to test with the theme you're using if it's freely available.