line-heights for tiptap 2

line-height.ts

import { Extension } from "@tiptap/core";

export interface LineHeightOptions {
  types: string[];
  heights: string[];
  defaultHeight: string;
}

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    lineHeight: {
      /**
       * Set the line height attribute
       */
      setLineHeight: (height: string) => ReturnType;
      /**
       * Unset the text align attribute
       */
      unsetLineHeight: () => ReturnType;
    };
  }
}

export const LineHeight = Extension.create<LineHeightOptions>({
  name: "lineHeight",

  addOptions() {
    return {
      types: ["heading", "paragraph"],
      heights: ["100%", "115%", "150%", "200%", "250%", "300%"],
      defaultHeight: "100%",
    };
  },

  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          lineHeight: {
            default: this.options.defaultHeight,
            parseHTML: (element) =>
              element.style.lineHeight || this.options.defaultHeight,
            renderHTML: (attributes) => {
              if (attributes.lineHeight === this.options.defaultHeight) {
                return {};
              }

              return { style: `line-height: ${attributes.lineHeight}` };
            },
          },
        },
      },
    ];
  },

  addCommands() {
    return {
      setLineHeight:
        (height: string) =>
        ({ commands }) => {
          if (!this.options.heights.includes(height)) {
            return false;
          }

          return this.options.types.every((type) =>
            commands.updateAttributes(type, { lineHeight: height })
          );
        },

      unsetLineHeight:
        () =>
        ({ commands }) => {
          return this.options.types.every((type) =>
            commands.resetAttributes(type, "lineHeight")
          );
        },
    };
  },
});

This is an extension for setting the line-height attribut of a paragraph or header in a tiptap 2 editor.
The original code for this was taken from tiptap's textAlign extension.

The docs for using the extension are exactly the same as the textAlign docs.
Unlike TextAlign, I have specified a set of default values for types. This defaults to what the TextAlign docs suggest: ["heading", "paragraph"].
I also provide a set of default hieghts specified as a %. If you want to specify a different set of line-heights, then just configure them when adding the extension to the editor:

LineHeight..configure({
  heights: ['1.5rem', '1.8rem', '2rem']
})

The other option is defaultHeight. It should be one of the elements of the heights array and is a string.

I am hoping that once the authors of tiptap get to a point where they have less to do on tiptap, that they create their own version of line-height.

canya do a reactjs nextjs / .js version, simplified, tiptap.dev - tks for the consideration

onClick={() =>
editor.chain().focus().setLineHeight("1.7rem").run()
}
 className={
editor.isActive("textStyle", {
lineHeight: "1.7rem",
})
? "is-active"
: ""
}


onClick={() => editor.chain().focus().unsetLineHeight().run()}
disabled={!editor.isActive("textStyle")}