Keep Shift+Enter line breaks in list items across save and reload

src/editor/contents/pasted_content_formatter.js

@@ -13,6 +13,7 @@ export default class PastedContentFormatter {
     this.#unwrapWrappedListChildren()
     this.#nestStrayListChildren()
     this.#stripStrayListChildren()
+    this.#stripFillerListItemLineBreaks()
     return this.doc
   }
 
@@ -110,6 +111,16 @@ export default class PastedContentFormatter {
     }
   }
 
+  // Browsers pad copied list items with a filler <br> at the end of each <li>.
+  // The editor preserves trailing list item line breaks on import — in saved
+  // documents they are real Shift+Enter content — so pasted filler has to be
+  // dropped here before it reaches the importer.
+  #stripFillerListItemLineBreaks() {
+    for (const lineBreak of this.doc.querySelectorAll("li > br:last-child")) {
+      lineBreak.remove()
+    }
+  }
+
   #firstStrayListChild(list) {
     for (const child of list.childNodes) {
       if (child.nodeType !== Node.ELEMENT_NODE || child.tagName !== "LI") {

src/elements/editor.js

@@ -19,7 +19,7 @@ import { UploadRequests } from "../editor/attachments/upload_requests"
 import { CommandDispatcher } from "../editor/command_dispatcher"
 import Selection from "../editor/selection"
 import { createElement, dispatch, generateDomId, parseHtml } from "../helpers/html_helper"
-import { isAttachmentSpacerTextNode, isEditorFocused } from "../helpers/lexical_helper"
+import { importListItemTrailingLineBreak, isAttachmentSpacerTextNode, isEditorFocused } from "../helpers/lexical_helper"
 import { sanitize, setSanitizerConfig } from "../helpers/sanitization_helper"
 import { ListenerBin, registerEventListener } from "../helpers/listener_helper"
 import LexicalToolbar from "./toolbar"
@@ -426,7 +426,8 @@ export class LexicalEditorElement extends HTMLElement {
       theme: theme,
       nodes: this.#lexicalNodes,
       html: {
-        export: new Map([ [ TextNode, exportTextNodeDOM ], [ CodeHighlightNode, exportTextNodeDOM ] ])
+        export: new Map([ [ TextNode, exportTextNodeDOM ], [ CodeHighlightNode, exportTextNodeDOM ] ]),
+        import: { br: importListItemTrailingLineBreak }
       },
       $initialEditorState: (editor) => {
         this.#configureSanitizer(editor)

src/helpers/lexical_helper.js

@@ -1,4 +1,4 @@
-import { $caretFromPoint, $createNodeSelection, $createParagraphNode, $findMatchingParent, $getCaretInDirection, $getCaretRange, $getChildCaret, $getCommonAncestor, $getRoot, $getSelection, $getSiblingCaret, $isChildCaret, $isDecoratorNode, $isElementNode, $isExtendableTextPointCaret, $isLineBreakNode, $isParagraphNode, $isRangeSelection, $isRootNode, $isRootOrShadowRoot, $isSiblingCaret, $isTextNode, $isTextPointCaret, $normalizeCaret, $normalizeSelection__EXPERIMENTAL as $normalizeSelection, $rewindSiblingCaret, $setSelectionFromCaretRange, $splitAtPointCaretNext, TextNode } from "lexical"
+import { $caretFromPoint, $createLineBreakNode, $createNodeSelection, $createParagraphNode, $findMatchingParent, $getCaretInDirection, $getCaretRange, $getChildCaret, $getCommonAncestor, $getRoot, $getSelection, $getSiblingCaret, $isChildCaret, $isDecoratorNode, $isElementNode, $isExtendableTextPointCaret, $isLineBreakNode, $isParagraphNode, $isRangeSelection, $isRootNode, $isRootOrShadowRoot, $isSiblingCaret, $isTextNode, $isTextPointCaret, $normalizeCaret, $normalizeSelection__EXPERIMENTAL as $normalizeSelection, $rewindSiblingCaret, $setSelectionFromCaretRange, $splitAtPointCaretNext, TextNode } from "lexical"
 import { ListNode } from "@lexical/list"
 import { $getNearestNodeOfType, $lastToFirstIterator } from "@lexical/utils"
 import { $wrapNodeInElement } from "@lexical/utils"
@@ -94,6 +94,45 @@ export function extendConversion(nodeKlass, conversionName, callback = (output =
   }
 }
 
+// Lexical drops a <br> that ends a block element on import, treating it as
+// contenteditable filler. A line break at the end of a list item is real content
+// the user added with Shift+Enter, so keep it. A <br> that is a list item's only
+// child stays subject to the default filler rules.
+export function importListItemTrailingLineBreak(domNode) {
+  if (isTrailingLineBreakAfterListItemContent(domNode)) {
+    return { conversion: () => ({ node: $createLineBreakNode() }), priority: 1 }
+  }
+
+  return null
+}
+
+function isTrailingLineBreakAfterListItemContent(domNode) {
+  const parent = domNode.parentElement
+  if (parent === null || parent.tagName !== "LI" || domNode.nextSibling !== null) {
+    return false
+  }
+
+  return hasListItemContentBefore(domNode)
+}
+
+function hasListItemContentBefore(domNode) {
+  let sibling = domNode.previousSibling
+  while (sibling !== null) {
+    if (isListItemContent(sibling)) {
+      return true
+    }
+    sibling = sibling.previousSibling
+  }
+  return false
+}
+
+function isListItemContent(node) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent.trim() !== ""
+  }
+  return node.nodeType === Node.ELEMENT_NODE && node.tagName !== "BR"
+}
+
 export function $isCursorOnLastLine(selection) {
   const anchorNode = selection.anchor.getNode()
   const elementNode = $isElementNode(anchorNode) ? anchorNode : anchorNode.getParentOrThrow()

test/browser/tests/formatting/list_item_line_breaks.test.js

@@ -0,0 +1,54 @@
+import { test } from "../../test_helper.js"
+import { expect } from "@playwright/test"
+import { assertEditorHtml } from "../../helpers/assertions.js"
+
+test.describe("Line breaks inside list items", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/")
+    await page.waitForSelector("lexxy-editor[connected]")
+  })
+
+  test("a Shift+Enter line break at the end of a list item survives a value round-trip", async ({ editor }) => {
+    await editor.setValue("<ul><li value=\"1\">First</li><li value=\"2\">Second</li><li value=\"3\">Third</li></ul>")
+    await editor.flush()
+
+    await editor.placeCaretInside("First", "First".length)
+    await editor.send("Shift+Enter")
+
+    const saved = await editor.value()
+    expect(saved).toContain("<br>")
+
+    await editor.setValue(saved)
+    await editor.flush()
+
+    await assertEditorHtml(editor, saved)
+  })
+
+  test("importing a list item with a trailing line break keeps it", async ({ editor }) => {
+    await editor.setValue("<ul><li value=\"1\">First<br></li><li value=\"2\">Second</li></ul>")
+    await editor.flush()
+
+    await assertEditorHtml(editor, "<ul><li value=\"1\">First<br></li><li value=\"2\">Second</li></ul>")
+  })
+
+  test("importing a list item with a blank line keeps it", async ({ editor }) => {
+    await editor.setValue("<ul><li value=\"1\">First<br><br></li><li value=\"2\">Second</li></ul>")
+    await editor.flush()
+
+    await assertEditorHtml(editor, "<ul><li value=\"1\">First<br><br></li><li value=\"2\">Second</li></ul>")
+  })
+
+  test("a filler line break preceded only by whitespace is still dropped", async ({ editor }) => {
+    await editor.setValue("<ul><li value=\"1\">\n    <br></li><li value=\"2\">Second</li></ul>")
+    await editor.flush()
+
+    await assertEditorHtml(editor, "<ul><li value=\"1\"></li><li value=\"2\">Second</li></ul>")
+  })
+
+  test("a filler line break in an empty list item is still dropped", async ({ editor }) => {
+    await editor.setValue("<ul><li value=\"1\"><br></li><li value=\"2\">Second</li></ul>")
+    await editor.flush()
+
+    await assertEditorHtml(editor, "<ul><li value=\"1\"></li><li value=\"2\">Second</li></ul>")
+  })
+})