How can I set the style in a ParagraphNode?

[elco45]

I've been reading the documentation and other Q&A and issues and haven't really found out a way to set the style for ParagraphNode, is there a mechanism or approach I can take to force a specific style on the ParagraphNode without having to create a new CustomParagraphNode?

E.g. If I have a ParagraphNode with a TextNode:

<p class="rtc"><span>hello world</span></p>

Is there a way for me to insert a dynamic line-height to the Paragraph tag and have something like:

<p class="rtc" style="line-height: 5px"><span>hello world</span></p>

Is there a function like setFormat or setIndent that could help me update the lineHeight of the entire parent node?

[DDKoch]

I have been wondering the same thing. One way that I saw would be to assign a class name to the paragraph type in the EditorConfig theme property . Then you can use that class name in CSS to apply styles.

[rathod-mehul-1011]

may be it should work ?
For ParagraphNode, you can set style same.
but in my try that's not work.
So, You can try below code at once

import { useEffect } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $getRoot, $isParagraphNode } from 'lexical';

function ApplyStyles() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    editor.update(() => {
      const root = $getRoot();
      const nodes = root.getChildren();

      nodes.forEach((node) => {
        if ($isParagraphNode(node)) {
          node.getChildren().forEach((textNode) => {
                 // Apply styles as a string
                 if ($isTextNode(textNode)) 
                      textNode.setStyle("color: #22f3bc;"); // Apply your desired styles
          }
        }
      });
    });
  }, [editor]);

  return null;
}

export default ApplyStyles;

[ashiq-prospero]

This is what I am using to set line height as style, You can implement the same for other styles

LineHeightNode.js

import { ParagraphNode } from 'lexical';

export class LineHeightNode extends ParagraphNode {
  static getType() {
    return 'styled-paragraph';
  }

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

  createDOM(config) {
    const dom = super.createDOM(config);
    const style = this.getStyle();
    if (style) dom.style.cssText = style;
    return dom;
  }

  updateDOM(prevNode, dom) {
    const didUpdate = super.updateDOM(prevNode, dom);
    if (this.__style !== prevNode.__style) {
      dom.style.cssText = this.__style || '';
    }
    return didUpdate;
  }

  static importJSON(serializedNode) {
    const node = new LineHeightNode();
    node.setFormat(serializedNode.format);
    node.setIndent(serializedNode.indent);
    node.setStyle(serializedNode.style || '');
    return node;
  }

  exportJSON() {
    return {
      ...super.exportJSON(),
      type: 'styled-paragraph',
      version: 1,
      style: this.getStyle() || '',
    };
  }
}

Trigger applyLineHeight() on button click

const applyLineHeight = (selectedLineHeight) => {

    activeEditor.update(() => {
      const selection = $getSelection();
      const selectedNodes = selection.getNodes();
      selectedNodes.forEach((node) => {
        if ($isParagraphNode(node)) {
          let targetNode = node;
          if (!(node instanceof LineHeightNode)) {
            const newNode = new LineHeightNode();
            newNode.append(...node.getChildren());
            node.replace(newNode);
            targetNode = newNode;
          }

          const currentStyle = targetNode.getStyle();
          const newStyle = [
            currentStyle.replace(/line-height:[^;]+;?/g, ""),
            `line-height:${selectedLineHeight}`,
          ]
            .filter(Boolean)
            .join(";");

          targetNode.setStyle(newStyle);
        }
      });
    });
  };