Block elements are not combined into one block

[catthecreator]

Describe the bug
The block elements of code / quote must merge into one block

They have common styles, separating them into lines violates the markup

The delta code which generates the Problem

Example:

{ "ops": [ { "insert": "Just text\n" }, { "attributes": { "bold": true }, "insert": "Quo" }, { "insert": "te" }, { "attributes": { "blockquote": true }, "insert": "\n" }, { "insert": "Quote2" }, { "attributes": { "blockquote": true }, "insert": "\n" }, { "insert": "\nThis is" }, { "attributes": { "code-block": true }, "insert": "\n" }, { "insert": "Code" }, { "attributes": { "code-block": true }, "insert": "\n" }, { "insert": "sdfsdfds" }, { "attributes": { "blockquote": true }, "insert": "\n" } ] }

The expected html output the delta should produce

Example:

<p>Just text</p> 
<blockquote><strong>Quo</strong>te</blockquote> 
<blockquote>Quote2</blockquote> 
<p><br></p> 
<pre><code>This is</code></pre> 
<pre><code>Code</code></pre> 
<blockquote>sdfsdfds</blockquote>

Expected behavior
I expect the entire block of code to be in one tag:

<p>Just text</p> 
<blockquote><strong>Quo</strong>te<br>
Quote2</blockquote> 
<p><br></p> 
<pre><code>This is<br>
Code</code></pre> 
<blockquote>sdfsdfds</blockquote>

[nadar]

Currently i can not take a deeper look into this, maybe you like to send a PR, maybe its also by the bad design of quill json.

[catthecreator]

Hi!

quill json works well with this

If I understand correctly, this is very similar to the logic of working with ul/li tags

[Lustmored]

I can share what I'm using to mitigate the problem. I use it and it works in my project, but I'm not confident in code quality of this to send a PR. If anyone wants to build up on this you are welcome to do so:

class CodeBlockFixed extends BlockListener
{
    public const string ATTRIBUTE_CODE = 'code-block';

    public function process(Line $line): void
    {
        $heading = $line->getAttribute(self::ATTRIBUTE_CODE);
        if ($heading) {
            $this->pick($line, ['type' => $heading]);
            $line->setDone();
        }
    }

    /**
     * The logic is copied and adapted from Lists as they
     * seem to work flawlessly, while CodeBlock generates incorrect HTML.
     * Comments in the code might still refer lists.
     */
    public function render(Lexer $lexer): void
    {
        $isOpen = false;
        foreach ($this->picks() as $pick) {
            $first = $this->getFirstLine($pick);

            // defines whether this attribute list element is the last one of a list serie.
            $isLast = false;
            $isEmpty = false;

            // if this is an empty line .... the first attribute contains the list information, otherwise
            // the first line contains content.
            if ($first->getAttribute(self::ATTRIBUTE_CODE)) {
                $isEmpty = true;
            }

            // while from first to the pick line and store content in buffer
            $buffer = null;
            if (!$isEmpty) {
                $first->while(static function (&$index, Line $line) use (&$buffer, $pick) {
                    ++$index;
                    $buffer .= $line->getInput();
                    $line->setDone();
                    if ($index == $pick->line->getIndex()) {
                        return false;
                    }

                    return true;
                });
            }

            // go to the next element with endlinew and check if it contains a list type until then
            $hasNextInside = false;
            $pick->line->whileNext(static function (Line $line) use (&$hasNextInside) {
                // we found the next list elemnt, stop thie while loop
                if ($line->getAttribute(self::ATTRIBUTE_CODE)) {
                    return false;
                }

                // if one of those new lines contains an endnew line or newline or is block level store this information
                if ($line->hasEndNewline() || $line->hasNewline() || ($line->isJsonInsert() && !$line->isInline())) {
                    $hasNextInside = true;
                }

                return true;
            });

            // There was a newline element until next list element, so end of list has reached.
            if ($hasNextInside) {
                $isLast = true;
            }

            $output = null;

            if (!$isOpen) {
                $output .= '<pre><code data-controller="highlight" class="code_highlight" data-language="' . $pick->optionValue('type') . '">';
                $isOpen = true;
            }

            if ($isEmpty) {
                $output .= \PHP_EOL;
            } else {
                $output .= $buffer . \PHP_EOL;
            }

            if ($isLast || $pick->isLast()) {
                $output .= '</code></pre>' . \PHP_EOL;
                $isOpen = false;
            }

            $pick->line->output = $output;
            $pick->line->setDone();
        }
    }
}

To use it: $lexer->overwriteListener(new CodeBlock(), new CodeBlockFixed());

[nadar]

👍 amazin. You can just create a PR, if then it passes everything, this will work perfectly and is safe to migrate.

[Lustmored]

I'd prefer not to as I don't really have time to mess with it right now or in close future (just saw an issue and though I'd share what I came up months ago). It definitely needs a bit of work to be more universal. For starter the comments are out of place and there also is:

data-controller="highlight" class="code_highlight"

which is tightly coupled with my project logic (required for code highlighting). The highlight Stimulus controller is simple, I can share it easily too:

import {Controller} from '@hotwired/stimulus'
import hljs from 'highlight.js'

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    connect() {
        const lang = this.element.dataset.language
        if (lang) {
            this.element.innerHTML = hljs.highlight(
                this.element.textContent,
                { language: lang }
            ).value
        }
    }
}

[nadar]

Thanks for the work and the help for others