74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
import {mergeAttributes, Node} from '@tiptap/core'
|
|
|
|
|
|
export const Box = Node.create({
|
|
name: 'box',
|
|
|
|
addOptions() {
|
|
return {
|
|
types: ['info', 'warning', 'danger', 'success', 'bug'],
|
|
HTMLAttributes: {
|
|
class: 'box',
|
|
},
|
|
}
|
|
},
|
|
|
|
addAttributes() {
|
|
return {
|
|
type: {
|
|
default: 'info',
|
|
rendered: false,
|
|
},
|
|
}
|
|
},
|
|
|
|
group: 'block',
|
|
|
|
content: 'inline*',
|
|
|
|
defining: true,
|
|
|
|
parseHTML() {
|
|
return this.options.types.map((/* type */) => ({
|
|
tag: 'div',
|
|
getAttrs: (node) => {
|
|
// Extract the class attribute and find the type based on the class
|
|
const classList = node.getAttribute('class')?.split(' ') || [];
|
|
const boxType = classList.find(cls => this.options.types.includes(cls));
|
|
return {
|
|
type: boxType || this.options.types[0], // Default to 'info' if no matching type is found
|
|
};
|
|
},
|
|
}));
|
|
},
|
|
|
|
renderHTML({ node, HTMLAttributes }) {
|
|
const hasType = this.options.types.includes(node.attrs.type);
|
|
const type = hasType
|
|
? node.attrs.type
|
|
: this.options.types[0]
|
|
|
|
let classes = 'box ' + type;
|
|
return ['div', mergeAttributes({ class: classes }, HTMLAttributes), 0]
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
setBox: attributes => ({ commands }) => {
|
|
if (!this.options.types.includes(attributes.type)) {
|
|
return false
|
|
}
|
|
|
|
return commands.setNode(this.name, attributes)
|
|
},
|
|
toggleBox: attributes => ({ commands }) => {
|
|
if (!this.options.types.includes(attributes.type)) {
|
|
return false
|
|
}
|
|
|
|
return commands.toggleNode(this.name, 'paragraph', attributes)
|
|
},
|
|
}
|
|
},
|
|
})
|