@explita/editor/dist/extensions/line-height.js

`@explita/editor` is a versatile, modern rich-text editor built on TipTap for seamless integration into React applications. It provides extensive customization options and advanced features to cater to diverse content creation needs.

import { Extension } from "@tiptap/react";
export const LineHeight = Extension.create({
    name: "lineHeight",
    addOptions() {
        return {
            types: ["paragraph", "heading"],
            defaultlineHeight: "normal",
        };
    },
    addGlobalAttributes() {
        return [
            {
                types: this.options.types,
                attributes: {
                    lineHeight: {
                        default: this.options.defaultlineHeight,
                        renderHTML: (attributes) => {
                            if (!attributes.lineHeight) {
                                return {};
                            }
                            return {
                                style: `line-height: ${attributes.lineHeight}`,
                            };
                        },
                        parseHTML: (element) => element.style.lineHeight || this.options.defaultlineHeight,
                    },
                },
            },
        ];
    },
    addCommands() {
        return {
            setLineHeight: (lineHeight) => ({ tr, state, dispatch }) => {
                const { selection } = state;
                tr = tr.setSelection(selection);
                const { from, to } = selection;
                state.doc.nodesBetween(from, to, (node, pos) => {
                    if (this.options.types.includes(node.type.name)) {
                        tr = tr.setNodeMarkup(pos, undefined, {
                            ...node.attrs,
                            lineHeight,
                        });
                    }
                });
                if (dispatch) {
                    dispatch(tr);
                }
                return true;
            },
            unsetLineHeight: () => ({ tr, state, dispatch }) => {
                const { selection } = state;
                tr = tr.setSelection(selection);
                const { from, to } = selection;
                state.doc.nodesBetween(from, to, (node, pos) => {
                    if (this.options.types.includes(node.type.name)) {
                        tr = tr.setNodeMarkup(pos, undefined, {
                            ...node.attrs,
                            lineHeight: this.options.defaultlineHeight,
                        });
                    }
                });
                if (dispatch) {
                    dispatch(tr);
                }
                return true;
            },
        };
    },
});