Is there a way to decorate the appearance of (Custom)LineBreakNode?

[YusukeSuzuki]

I am creating a CustomLineBreakNode class that inherits from LineBreakNode because I need to convert the
tag into another unique tag eventually. At the same time, I want to display a RETURN emoji at the line break position, so I want to make some effort in createDOM (as is well known, CSS does not provide visual decoration for the
tag). The code is as follows.

  createDOM() {
    let fragment = document.createDocumentFragment()
    let span = document.createElement('span')
    span.innerHTML= '⏎'
    fragment.appendChild(span)
    fragment.appendChild(document.createElement('br'))
    return fragment
  }

If I make this work, I seem to lose control of the cursor in the text editor. The cursor is lost when I make a line break, and even if I click again to bring the cursor out, the cursor is lost again when I move across the
position.

Is it legal to return DocumentFragment in createDOM? Or is there a correct way to decorate
in Lexical?

[yf-yang]

No, createDOM returns an HTMLElement, which is not compatible with DocumentFragment

Type '() => DocumentFragment' is not assignable to type '() => HTMLElement'.
Type 'DocumentFragment' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 231 more.

Fortunately you can insert <br/> in <span/>

createDOM() {
    const span = document.createElement('span');
    span.innerHTML = '⏎';
    span.appendChild(document.createElement('br'));
    return span;
}

Screen.Recording.2023-12-05.at.17.05.20.mov

I am not so sure because an additional issue appear: you can see the custom-linebreak becomes linebreak again after typing one more character, the node replacement does not work any more. Maybe that's another bug.

[yf-yang]

After debugging the code, I find the node get replaced to linebreak because I do not implement the clone method. However, the delete key still not work because the dom selection cannot correctly map to the CustomLineBreakNode here.

I can come up with an alternative with pseudo CSS.

class CustomLineBreakNode extends LineBreakNode {
  static getType(): string {
    return 'custom-linebreak';
  }

  static clone(node) {
    return new CustomLineBreakNode(node.__key);
  }

  createDOM() {
    const dom = document.createElement('br');
    dom.className = 'custom-linebreak';
    return dom;
  }
}

However, it seems there is some issue with <br/> tag and the psuedo CSS. Check this SO question for more details. If you find a way out, I am also interested.

[yf-yang]

Well, I don't think it is a good idea to custom br in content editable. The closest solution is https://stackoverflow.com/a/28342884, but in the content editable, the anchor position is still wrong. Not sure if you can find a better solution.

.custom-linebreak {
  content: ''
}

.custom-linebreak:before {
  content: '↩\A'
}

[YusukeSuzuki]

Thanks for the analysis. But it seems that the approach described in the SO often doesn't work well with modern browsers.

Your use of span gave me an idea of how to do it without the br tag, and I think that's how it would work in HTML. I think it is possible to use exportDOM to replace the span tag with a br tag.

https://jsfiddle.net/uy30x2tg/1/

:has(+ span.pseudo-br):after {
  content: '\23ce';
}

span.pseudo-br {
  display: block;
  clear: inline-start;
}

<div>
  <span>this is text</span><span class="pseudo-br"></span>
  <span class="pseudo-br"></span>
  <span>this is text</span><span class="pseudo-br"></span>
  <span class="pseudo-br"></span>
  <span class="pseudo-br"></span>
  <span>this is text</span><span class="pseudo-br"></span>
  <span>this is text</span><span class="pseudo-br"></span>
  <span>this is text</span>
</div> 

I was concerned about the strange cursor behavior when LineBreakNode is inherited, but I thought it was a DocumentFragment issue. I will try to create a CustomLineBreakNode using the HTML/CSS approach above, but if the behavior is still strange, I will try to use DecoratorNode as a base. Then rewrite the key events to insert a Decorator instead of a LineBreak.

[YusukeSuzuki]

Okay. Finally, by returning an empty <span> in CustomLineBreakNode's createDOM and applying the CSS I wrote above, I was able to display the RETURN mark while simulating the behavior of the <br> tag. Thanks a lot for your advice.