import { Command, createNode } from '@tiptap/core' import { textblockTypeInputRule } from 'prosemirror-inputrules' type Level = 1 | 2 | 3 | 4 | 5 | 6 export interface HeadingOptions { levels: Level[], } const Heading = createNode({ name: 'heading', defaultOptions: { levels: [1, 2, 3, 4, 5, 6], }, content: 'inline*', group: 'block', defining: true, addAttributes() { return { level: { default: 1, rendered: false, }, } }, parseHTML() { return this.options.levels .map((level: Level) => ({ tag: `h${level}`, attrs: { level }, })) }, renderHTML({ node, attributes }) { return [`h${node.attrs.level}`, attributes, 0] }, addCommands() { return { /** * heading command */ heading: (options: { level: Level }): Command => ({ commands }) => { return commands.toggleBlockType('heading', 'paragraph', options) }, } }, addKeyboardShortcuts() { return this.options.levels.reduce((items, level) => ({ ...items, ...{ [`Mod-Alt-${level}`]: () => this.editor.setBlockType('heading', { level }), }, }), {}) }, addInputRules() { return this.options.levels.map(level => { return textblockTypeInputRule(new RegExp(`^(#{1,${level}})\\s$`), this.type, { level }) }) }, }) export default Heading declare module '@tiptap/core/src/Editor' { interface AllExtensions { Heading: typeof Heading, } }