Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/ckeditor/smartpicker/InsertItemCommand.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,11 @@ export default class InsertItemCommand extends Command {
const modelFragment = editor.data.toModel(viewFragment)
editor.model.insertContent(modelFragment)
} else {
const itemElement = writer.createElement('paragraph')
writer.insertText(item.content, itemElement)
editor.model.insertContent(itemElement)
const lines = item.content.split('\n')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain the logic behind this? I have created a test text block with both types of line breaks: a regular one and a paragraph. The database content is this: <p style="margin:0;">Paragraph 1 Line 1<br>Paragraph 1 Line 2</p><p style="margin:0;">Paragraph 2 Line 1</p>.

Copy link
Contributor Author

@hamza221 hamza221 Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text is created in Ckeditor intially in the text block config so it will look like

<p> line one </p> <p> line 2</p>
then on insert it will get converted to
line one\nline 2
which here will get reconverted to
<p> line one </p> <p> line 2</p>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test with this input in the text block:

  1. a
  2. Shift+Enter
  3. b
  4. Enter
  5. c

Then you will have two paragraphs. The first one has a line break. Do you still have this format after converting to line breaks and back?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes that works, because the intermediate to Plain conversion would have \nfor both paragraphs and <br>would look like this a\nb\nc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

visually it's the same, but it would only create <p> which is okay imo for plain text, because at the end of day the html wont be sent and visually it's exactly the same

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would expect \n for a <br> and \n\n for a <p>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair enough

const htmlContent = lines.map(line => `<p>${line}</p>`).join('')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm skeptical about the use of paragraphs for line breaks. <br> and </p><p> is not the same semantically and also often looks different visually. You will have a regular line height between line breaks and more space between paragraphs.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

that's how CkEditor creates line breaks internally, we can reconfigure it to <br> https://ckeditor.com/docs/ckeditor4/latest/features/enterkey.html

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't find docs for ckeditor5 but if you inspect composer and press enter you can see it live

const viewFragment = editor.data.processor.toView(htmlContent)
const modelFragment = editor.data.toModel(viewFragment)
editor.model.insertContent(modelFragment)
}
} else {
const itemElement = writer.createElement('paragraph')
Expand Down
Loading