Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Preformatted" block autocompleting type declarations in pasted code #14092

Closed
koskila opened this Issue Feb 25, 2019 · 11 comments

Comments

Projects
None yet
3 participants
@koskila
Copy link

commented Feb 25, 2019

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
image
(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 talldan added the [Type] Bug label Mar 13, 2019

@talldan

This comment has been minimized.

Copy link
Contributor

commented Mar 13, 2019

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

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

@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:
image

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

@koskila

This comment has been minimized.

Copy link
Author

commented Mar 19, 2019

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

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

Produces this:
image

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

This comment has been minimized.

Copy link
Author

commented Mar 22, 2019

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 koskila closed this Mar 22, 2019

@koskila koskila reopened this Mar 22, 2019

@koskila

This comment has been minimized.

Copy link
Author

commented Mar 22, 2019

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.

image

@ellatrix

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

@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.

@ellatrix ellatrix closed this Apr 4, 2019

@koskila

This comment has been minimized.

Copy link
Author

commented Apr 4, 2019

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

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

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

@koskila

This comment has been minimized.

Copy link
Author

commented Apr 5, 2019

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

This comment has been minimized.

Copy link
Author

commented Apr 5, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Apr 10, 2019

@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.

@talldan talldan closed this Apr 10, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.