Skip to content

Single line <pre></pre> causes loss of indentation on subsequent lines in source mode #18360

@quicksketch

Description

@quicksketch

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)

  1. Use the demo at https://ckeditor.com/ckeditor-5/demo/html-support/
  2. 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:
    Image
  3. 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.

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    domain:ui/uxThis issue reports a problem related to UI or UX.package:source-editingtype:bugThis issue reports a buggy (incorrect) behavior.

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions