-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Description
The code formatter used when viewing Source mode does not correctly indent lines if a <pre>
tag is encountered that both opens and closes on a single line. Lines before the <pre>
tag will be indented correctly, lines after the <pre>
tag will lose indentation inside of the tag (though the lines with the tags themselves are still indented correctly).
📝 Provide detailed reproduction steps (if any)
- Use the demo at https://ckeditor.com/ckeditor-5/demo/html-support/
- Create 3 paragraphs of text. Select the middle paragraph and click "Insert code block" (forth button from right) to make it a
<pre>
tag. In the editor it should look like this:
- Click "Edit source" (second button from left).
✔️ Expected result
The code should be formatted as follows in source mode:
<p>
paragraph before
</p>
<pre><code class="language-plaintext">single line of code</code></pre>
<p>
paragraph before
</p>
❌ Actual result
The first paragraph is indented correctly, but the second paragraph's contents loose their indentation within the <p>
tags.
<p>
paragraph before
</p>
<pre><code class="language-plaintext">single line of code</code></pre>
<p>
paragraph before
</p>
Many subsequent tags are also missing their indentation when this occurs.
Below is an annotated screenshot of the incorrect markup.
This only occurs if there is a single line of code sample. If there are multiple lines, it works fine.
❓ Possible solution
The isPreformattedBlockLine() method in formathtml.ts
has the following code block:
if ( new RegExp( '<pre( .*?)?>' ).test( line ) ) {
return 'first';
} else if ( new RegExp( '</pre>' ).test( line ) ) {
return 'last';
} else if ( isPreviousLinePreFormatted === 'first' || isPreviousLinePreFormatted === 'middle' ) {
return 'middle';
} else {
return false;
}
What's happening here is that it is failing to identify the situation where both the opening <pre>
and closing </pre>
are the same line. Instead, it's returning first
. What then happens is the rest of the formatter code thinks it's permanently inside a <pre>
tag, because it will never find the closing </pre>
tag (since it was on the same line as the opening tag).
📃 Other details
- Browser: Firefox/Chrome
- OS: Ubuntu 24.04
- First affected CKEditor version: …
- Installed CKEditor plugins: …
If you'd like to see this fixed sooner, add a 👍 reaction to this post.