How do you change the font size of headings and parameters?

To change the font size of headings and parameters, I want to change from nodes to marks, paragrams to 3 sizes (13px, 15px, 19px), and heads to 2 sizes (h2: 22px, h3: 26px). Assuming that a class is defined in the classNames.js file, how do I modify the schema and related code? The changed font size is not applied in the current state. The deadline is until this Thursday, so we need a quick solution

index.js

  const headingDOM = [
    'h2',
    'h3',
    { class: headings.marks.heading },
    0
  ];
 paragraph: {
    toDOM() {
      return paragraphDOM;
    },
    getAttrs: (dom) => {
      const style = dom.getAttribute('style');
      let fontSize = '';
    
      if (style) {
        if (style.includes('fontsize-13px')) {
          fontSize = '13px';
        } else if (style.includes('fontsize-15px')) {
          fontSize = '15px';
        } else if (style.includes('fontsize-19px')) {
          fontSize = '19px';
        }
      }
    
      return {
        fontSize: fontSize,
      };
    },
    parseDOM: [{ tag: 'p' }],
  },
  
  heading: {
    toDOM: () => headingDOM,
    parseDOM: [
      { tag: 'h2', style: 'fontSize-22px' },
      { tag: 'h3', style: 'fontSize-26px' }
    ]
  }
}

paragraph.js

import { MarkSpec } from 'prosemirror-model';


const ALIGN_PATTERN = /(left|right|center|justify)/;

function getMarkAttrs(dom) {
  const { textAlign } = dom.style;
  let align = dom.getAttribute('align') || textAlign || '';
  align = ALIGN_PATTERN.test(align) ? align : null;
  return { align };
}

export const ParagraphMarkSpec = {
  attrs: {
    align: { default: null },
  },
  parseDOM: [{ tag: 'p', getAttrs: getMarkAttrs }],
  toDOM(mark) {
    const { align } = mark.attrs;
    const attrs = {
      class: `${paragraph.marks.paragraph}
              ${paragraph.marks.paragraph2}
              ${paragraph.marks.paragraph3}`,
    };

    let style = '';

    if (align && align !== 'left') {
      style += `text-align: ${align};`;
    }

    style && (attrs.style = style);

    return ['p', attrs, 0];
  },
};

heading.js

import { MarkSpec } from 'prosemirror-model';
import { getParagraphNodeAttrs, ParagraphMarkSpec } from './paragraph';

const TAG_NAME_TO_LEVEL = {
  H1: 1,
  H2: 2,
  H3: 3,
  H4: 4,
  H5: 5,
  H6: 6,
};

const HeadingMarkSpec = {
  ...ParagraphMarkSpec,

  attrs: {
    ...ParagraphMarkSpec.attrs,

    level: { default: 1 },
  },
  defining: true,
  parseDOM: [
    { tag: 'h1', getAttrs },
    { tag: 'h2', getAttrs },
    { tag: 'h3', getAttrs },
    { tag: 'h4', getAttrs },
    { tag: 'h5', getAttrs },
    { tag: 'h6', getAttrs },
  ],
  toDOM,
};

/**
 *
 * @param {HTMLElement} dom
 * @returns {Object}
 */
function toDOM(mark) {
  const { align } = mark.attrs;
  const level = mark.attrs.level || 1;
  const attrs = {
    class: `${heading.marks.heading}
            ${heading.marks.heading2}`,
  };

  let style = '';

  if (align && align !== 'left') {
    style += `text-align: ${align};`;
  }

  style && (attrs.style = style);

  return [`h${level}`, attrs, 0];
}

/**
 *
 * @param {HTMLElement} dom
 * @returns {Object}
 */
function getAttrs(dom) {
  const attrs = getParagraphNodeAttrs(dom);
  const level = TAG_NAME_TO_LEVEL[dom.nodeName.toUpperCase()] || 1;
  attrs.level = level;
  return attrs;
}

export { HeadingMarkSpec };

As of the time I encountered this problem, I was able to solve it using CSS