Headings plugins
Headings include three plugins for Yoopta-Editor:
- HeadingOne
- HeadingTwo
- HeadingThree
Installation
yarn add @yoopta/headings
Usage
import { HeadingOne, HeadingTwo, HeadingThree } from '@yoopta/headings';
const plugins = [HeadingOne, HeadingTwo, HeadingThree];
const Editor = () => {
return <YooptaEditor plugins={plugins} />;
};
HeadingOne
Default classnames
Default options
const HeadingOne = new YooptaPlugin({
options: {
display: {
title: 'Heading 1',
description: 'Big section heading',
},
shortcuts: ['h1', '#', '*'],
},
});
How to extend
const plugins = [
HeadingOne.extend({
renders: {
heading-one: (props) => <YourCustomComponent {...props} />
},
options: {
shortcuts: [`<your custom shortcuts>`],
display: {
title: `<your custom title>`,
description: `<your custom description>`,
},
HTMLAttributes: {
className: '<your classname>',
// ...other HTML attributes
},
},
});
];
HeadingTwo
Default classnames
Default options
const HeadingTwo = new YooptaPlugin({
options: {
display: {
title: 'Heading 2',
description: 'Medium section heading',
},
shortcuts: ['h2', '##'],
},
});
How to extend
const plugins = [
HeadingTwo.extend({
renders: {
heading-two: (props) => <YourCustomComponent {...props} />
},
options: {
shortcuts: [`<your custom shortcuts>`],
display: {
title: `<your custom title>`,
description: `<your custom description>`,
},
HTMLAttributes: {
className: '<your classname>',
// ...other HTML attributes
},
},
});
];
HeadingThree
Default classnames
Default options
const HeadingThree = new YooptaPlugin({
options: {
display: {
title: 'Heading 3',
description: 'Small section heading',
},
shortcuts: ['h3', '###'],
},
});
How to extend
const plugins = [
HeadingThree.extend({
renders: {
heading-three: (props) => <YourCustomComponent {...props} />
},
options: {
shortcuts: [`<your custom shortcuts>`],
display: {
title: `<your custom title>`,
description: `<your custom description>`,
},
HTMLAttributes: {
className: '<your classname>',
// ...other HTML attributes
},
},
});
];
