Gutenberg: Additional backtick added when writing code

[swissspidy]

Issue Overview

When adding backticks, text between them will be in a <code> tag. When I try to close the code tag by typing the second backtick, the code tag is closed, _but_ the backtick is written as well.

Steps to Reproduce (for bugs)

1. Type a backtick
2. Press space (otherwise the backtick will be added to the next letter, e.g. à)
3. Write some code
4. Type another backtick
5. Press space.
6. Notice that the code block is closed but the backtick is appended to it.

I'm using Chrome 63 (stable) on macOS, with WordPress trunk.

Expected Behavior

1. The code tag should preferably be added right away, not just when typing the second backtick.
2. Typing the second backtick should just close

Current Behavior

The code tag is added too late and the backtick is appended erroneously

Screenshots / Video

Here's a demo video: https://cloudup.com/cdRaWfzWJL1

Related Issues and/or PRs

703, #4290

Todos

• [ ] Tests
• [ ] Documentation

[noisysocks]

I'm struggling to reproduce this issue. What keyboard layout are you using, @swissspidy?

[swissspidy]

Ah, right. I‘m using a (Swiss) German keyboard layout.

[Rahmon]

I couldn't reproduce this issue too. I'm using a pt_BR keyboard layout.

[swissspidy]

I guess the big difference is that we use a QWERTZ keyboard layout, not QWERTY.

You'll find lots of examples (including the Swiss and the German keyboard layout) on Wikipedia: https://en.wikipedia.org/wiki/QWERTZ

It's important to note that we need to press two keys (shift + caret) to get a backtick and that the backtick will be added to the succeeding letter (example: à) unless you "cancel" by hitting space (example: `a).

[jasmussen]

Some GIFs:

There's an issue with a trailing backtick that gets added, though. Steps to reproduce:

• Write some text. Place the caret before a word. Write a backtick.
• Place the caret after the word. Write a backtick and note how the word is converted into a code element.
• Move the caret with the arrow keys, notice how a trailing ` shows up.

A smaller issue that is perhaps related, you can't convert a word to code if you add the backticks from right to left:

[bobbingwide]

I've got this problem with a UK English keyboard in 2.6.0
Additionally, there's no easy mechanism to clear the formatting if something goes wrong at the end of a paragraph.

You have to use Edit as HTML to fiddle about with the </code></p> tags. Typing something other than a space before the end p tag should fix it.

[designsimply]

Tested and confirmed that when using backticks to convert text to code, with the Swiss German keyboard layout active, an extra backtick appears in Chrome after typing a closing backtick. In Firefox, an extra backtick does not appear but the space gets eaten. In Safari 😆

My testing steps:

1. On macOS, go to System Preferences > Keyboard > Input Sources and add Swiss German.
2. Switch to the Swiss German keyboard layout.
3. Go to Posts > Add New and start typing into the body text.
4. Type a backtick (note: press shift + caret).
5. Type any text.
6. Type another backtick.

Video: 1m13s
^{Seen at http://alittletestblog.com/wp-admin/post-new.php running WordPress 4.9.6 and Gutenberg 3.1.0 using Chrome 67.0.3396.87 and Firefox 60.0.2 on macOS 10.13.5. Also tested with Safari 11.1.1 on macOS 10.13.5 (not pictured).}

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13833&action=edit running WordPress 4.9.6 and Gutenberg 3.1.0 using Firefox 60.0.2 on macOS 10.13.5.}

[mtias]

This has stopped happening for me for some reason. @designsimply can you recheck the above test?

[ellatrix]

@mtias That's because of the new rich text value. @swissspidy Could you confirm this works now? Closing as I can also not reproduce.

[swissspidy]

I don't see any duplicate back ticks now, but I'd expect the cursor to be _outside_ the code block after closing it.

Instead it stays inside the code tag and somehow the cursor is right in front of a character instead of after it:

[ellatrix]

@swissspidy There's an issue for that: #11276.