How to set line height for a paragraph or a list

[sakhmedbayev]

Not sure if I am missing something. Does Lexical support the line height for paragraph or list entities?

[moy2010]

You might be looking for the concept of theming: https://lexical.dev/docs/getting-started/theming

[sakhmedbayev]

Thanks! I should have been more clear. I am looking for more dynamic support of the line height parameter for the text entries.

[witcherhunter]

I have a similar problem, does Lexical support Line Height, please help??!!

[ashiq-prospero]

Is there any way to add custom styles in nodes, like line-height for example?

[ashiq-prospero]

This is what I am using to set dynamic line height as style

LineHeightNode.js (Register this node)

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;
          }

          targetNode.setStyle(`line-height:${selectedLineHeight}`);
        }
      });
    });
  };