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