Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: When there is only an inline DecoratorNode as a child of a ParagraphNode, a <br> is added at the end. #7261

Closed
dineug2 opened this issue Feb 28, 2025 · 1 comment · May be fixed by #7318

Comments

@dineug2
Copy link

dineug2 commented Feb 28, 2025

When there is only an inline DecoratorNode as a child of a ParagraphNode, an unnecessary <br> tag is added at the end. This issue persists even in the latest version of the Lexical package.

There is a mismatch case related to isLineBreakNode in the logic of $convertTableCellNodeElement.

    forChild: (lexicalNode, parentLexicalNode) => {
      if ($isTableCellNode(parentLexicalNode) && !$isElementNode(lexicalNode)) {
        const paragraphNode = $createParagraphNode();
        if (
          $isLineBreakNode(lexicalNode) &&
          lexicalNode.getTextContent() === '\n'
        ) {
          return null;
        }
        if ($isTextNode(lexicalNode)) {
          if (hasBoldFontWeight) {
            lexicalNode.toggleFormat('bold');
          }
          if (hasLinethroughTextDecoration) {
            lexicalNode.toggleFormat('strikethrough');
          }
          if (hasItalicFontStyle) {
            lexicalNode.toggleFormat('italic');
          }
          if (hasUnderlineTextDecoration) {
            lexicalNode.toggleFormat('underline');
          }
        }
        paragraphNode.append(lexicalNode);
        return paragraphNode;
      }

      return lexicalNode;
    }

Lexical version: 0.25.0, 0.24.0

Steps To Reproduce

  1. Create a ParagraphNode.
  2. Add only an inline DecoratorNode as a child of the ParagraphNode.
  3. Check the result to see that an unnecessary
    tag is added at the end.

Link to code example: https://playground.lexical.dev/ - inline Equation

Image

The current behavior

When there is only an inline DecoratorNode as a child of a ParagraphNode, an unnecessary
tag is added at the end.

The expected behavior

When there is only an inline DecoratorNode as a child of a ParagraphNode, no
tag should be added.

Impact of fix

This bug can cause unnecessary line breaks in the user interface, affecting user experience.

@etrepum
Copy link
Collaborator

etrepum commented Feb 28, 2025

These line breaks are required to work around issues with the native platform’s handling of contentEditable=false. They are only in the rendered HTML, not in the lexical document. You can search the code for managedLineBreak for more implementation details.

If you can report a specific problem caused by the presence of these line breaks, please open a new issue with details about that. They shouldn’t be present in exportDOM so I don’t see how they’re relevant to the partial table cell code you’ve pasted here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants