The old <br> <p> and <li> issue.

[MaSieber]

📝 Provide detailed reproduction steps (if any)

#1727

Its the linked Issue.
The <br> is not getting converting to <p> in my instance BUT this actually not the issue. Thats cool, i would write a bug if it would convert these.

We just updated from CK4 to CK5, i found this linked issue not with Google but with my coworker Chat GPT and i asked it about solution and it said "nope there is no real way but here is a custom plugin about writing your own behavior" and i could not find anything in the configs and docs. Maybe someone can point out something.

❓ Possible solution

Someone wrote there (the issue) about the "WHY" but i think currently its worse, it should transform x<br>y<br>z<br> and <p>x</p> <p>y</p> <p>z</p> to a <ul><li>x</li><li>y</li><li>z</li></ul>

And a undo or a second press on list could be look like: <p>x<br>y<br>z<br></p>

Ignoring all the complex lists with images and more for a moment here. Lets be honest we are talking about lists not about space craft if there is a break by text layout for undoing lists, then it can be adjusted anytime. While creating lists manually (break -> paragraphs) would take longer. I'm against automatism of newline->paragraph this could corrupt and kill more text layout. It should work with "enter" as well as "shift+enter" written content.

Maybe this could be done by settings and different strategies how to approach this issue, people can use whatever they want.

Well i tested your ... examples and there is the same issue, don't be like "but google ... does it too". Reason to this: Its better to have a working feature than a non working feature and saving my time by adding a custom plugin.

📃 Other details

• Browser: Firefox
• OS: Linux - Ubuntu
• First affected CKEditor version: Ck Editor 5
• Installed CKEditor plugins: Typo3 12.4 Default Plugins (not know)

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Witoso]

Hi! Thanks for feedback. It's very unlikely we will change this behavior, but we can keep this ticket open to gather feedback. As for the docs, Clipboard pipeline should be the starting point for tweaking this behavior.

[MaSieber]

well i did the Plugin solution for now. its not polished, parts of it from gpt and could be improved. but its basically does transform the <br> lines to <p> and then creates a list. it was confusing and it is still confusing.

maybe this could be the solution for this list button... put a conversion to

before list creation of all <br> lines. there is the "shift+enter" and for some copy-paste cases some auto transformation are not a solution. but with this strategy you could keep the concept.

for me its solved for now.

import * as Core from '@ckeditor/ckeditor5-core';
import * as UI from '@ckeditor/ckeditor5-ui';

export default class BrToListPlugin extends Core.Plugin {
  static get pluginName() {
      return 'BrToListPlugin';
  }

  init() {
      const editor = this.editor;

      // Add button to the toolbar
      editor.ui.componentFactory.add(BrToListPlugin.pluginName, () => {
          const button = new UI.ButtonView();
          button.set({
              label: 'Liste',
              withText: true,
              tooltip: true
          });

          button.on('execute', () => {
            editor.model.change(writer => {
                const items = [];
                const selection = editor.model.document.selection;
                const range = selection.getFirstRange();
                let position = selection.getFirstPosition();
        
                // Store the positions of the newly inserted paragraphs
                
                if (range) {
                    const paragraphElements = [];
                    const walker = range.getWalker();
        
                    // Collect text from the selection walker
                    for (const item of range.getItems()) {
                      console.log(item);
                      if (item.textNode)  {
                        items.push(item.textNode._data);
                      }
                    }
                    
    
                    // Remove the selected content
                    writer.remove(range);

                  console.log(items);
                  // Insert each item as a paragraph first
                  items.forEach(itemText => {
                      const paragraph = writer.createElement('paragraph');
                      writer.insert(paragraph, position);
                      writer.insertText(itemText, paragraph);
                      paragraphElements.push(paragraph);
                      position = writer.createPositionAfter(paragraph); // Move position forward
                  });
        
                  // Check if paragraphElements array is filled properly
                  if (paragraphElements.length > 0) {
                        // Create a new range covering the newly inserted paragraphs
                        const start = writer.createPositionBefore(paragraphElements[0]);
                        const end = writer.createPositionAfter(paragraphElements[paragraphElements.length - 1]);
                        const newRange = writer.createRange(start, end);

                        // Set the selection to the new range
                        writer.setSelection(newRange);

                        // Apply the bulleted list command to the selected paragraphs
                        editor.execute('bulletedList');
                      }

                  // Now, move child paragraphs up and remove empty paragraphs
                  paragraphElements.forEach(paragraph => {
                    const parent = paragraph.parent;

                      // Remove empty paragraphs
                      if (paragraph.isEmpty) {
                          writer.remove(paragraph);
                      } else {
                          // Move the content to the parent level
                          const rangeOnParagraph = writer.createRangeOn(paragraph);
                          writer.move(rangeOnParagraph, writer.createPositionAfter(parent));
                      }
                  });

                
                  // Remove any remaining empty parent paragraphs
                  if (position.parent.is('paragraph') && position.parent.isEmpty) {
                      writer.remove(position.parent);
                  }

                  writer.setSelection(null);
                }
            });
        });

        return button;
    });
  }
}