mui-tiptap
Version:
A Material-UI (MUI) styled WYSIWYG rich text editor, using Tiptap
50 lines (49 loc) • 1.58 kB
JavaScript
/// <reference types="@tiptap/extension-text-style" />
import { Extension } from "@tiptap/core";
/**
* Allow for setting the font size of text. Requires the TextStyle extension
* https://tiptap.dev/api/marks/text-style, as Tiptap suggests.
*/
const FontSize = Extension.create({
name: "fontSize",
addOptions() {
return {
types: ["textStyle"],
};
},
addGlobalAttributes() {
return [
{
types: this.options.types,
attributes: {
fontSize: {
default: null,
parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ""),
renderHTML: (attributes) => {
if (!attributes.fontSize) {
return {};
}
return {
style: `font-size: ${attributes.fontSize}`,
};
},
},
},
},
];
},
addCommands() {
return {
setFontSize: (fontSize) => ({ chain }) => {
return chain().setMark("textStyle", { fontSize }).run();
},
unsetFontSize: () => ({ chain }) => {
return chain()
.setMark("textStyle", { fontSize: null })
.removeEmptyTextStyle()
.run();
},
};
},
});
export default FontSize;