I'm using tiptap as an editor in my react application, the problem is that I haven't found how to modify the font size inside my editor, I have searched for an external package but I have not found any. could someone tell me is there is a package for font-size for tiptap with react ?
4 Answers
To handle font size in tiptap, you can create custom extension eg:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>import { Extension } from '@tiptap/react';
/**
* FontSize - Custom Extension
* editor.commands.setFontSize(e.target.value) :set the font-size.
*/
export 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: fontSize + "px" })
.run();
},
unsetFontSize: () => ({ chain }) => {
return chain()
.setMark('textStyle', { fontSize: null })
.removeEmptyTextStyle()
.run();
},
};
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Note the answer by @Raed BAHRI results in TypeScript errors. To fix, you need to extend the Commands interface as below:
import { Extension } from '@tiptap/react';
/**
* FontSize - Custom Extension
* editor.commands.setFontSize(e.target.value) :set the font-size.
*/
// --------- add this block ---- vvvvvv ----------
declare module '@tiptap/core' {
interface Commands<ReturnType> {
fontSize: {
/**
* Set the font size
*/
setFontSize: (size: string) => ReturnType;
/**
* Unset the font size
*/
unsetFontSize: () => ReturnType;
};
}
}
// ---------------- add this block ----- ^^^^ --------------
export 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: fontSize + "px" })
.run();
},
unsetFontSize: () => ({ chain }) => {
return chain()
.setMark('textStyle', { fontSize: null })
.removeEmptyTextStyle()
.run();
},
};
},
});
I think the most appropriate solution is to extend the TextStyle extension as below :
import TextStyle from '@tiptap/extension-text-style';
declare module '@tiptap/core' {
interface Commands<ReturnType> {
fontSize: {
/**
* Set the font size
*/
setFontSize: (size: string) => ReturnType;
/**
* Unset the font size
*/
unsetFontSize: () => ReturnType;
};
}
}
export const TextStyleExtended = TextStyle.extend({
addAttributes() {
return {
...this.parent?.(),
fontSize: {
default: null,
parseHTML: (element) => element.style.fontSize.replace('px', ''),
renderHTML: (attributes) => {
if (!attributes['fontSize']) {
return {};
}
return {
style: `font-size: ${attributes['fontSize']}px`
};
}
}
};
},
addCommands() {
return {
...this.parent?.(),
setFontSize:
(fontSize) =>
({ commands }) => {
return commands.setMark(this.name, { fontSize: fontSize });
},
unsetFontSize:
() =>
({ chain }) => {
return chain()
.setMark(this.name, { fontSize: null })
.removeEmptyTextStyle()
.run();
}
};
}
});
And after you can use it :
editor.commands.setFontSize(14);
editor.commands.unsetFontSize();
the answer for how to handle font size in tiptap is to use setMark from the "@tiptap/extension-text-style" extension. e.g :
<button
onClick={() => {
editor
.chain()
.focus()
.setMark("textStyle", {
fontSize: "100px"
})
.run();
}}
>
Related