Dr-Panel/resources/js/highlight-colors.js

45 lines
1.1 KiB
JavaScript

import { Mark } from '@tiptap/core'
export default function () {
return Mark.create({
name: 'highlightColor',
priority: 1001,
parseHTML() {
return [
{
tag: 'span[data-hbg]',
getAttrs: (el) => ({ 'data-hbg': el.getAttribute('data-hbg') }),
},
]
},
renderHTML({ HTMLAttributes }) {
const color = HTMLAttributes['data-hbg']
return [
'span',
{
'data-hbg': color,
style: `background-color: ${color};`,
},
0,
]
},
addAttributes() {
return {
'data-hbg': {
default: null,
parseHTML: (el) => el.getAttribute('data-hbg'),
renderHTML: (attrs) => {
if (!attrs['data-hbg']) return {}
return { 'data-hbg': attrs['data-hbg'] }
},
},
}
},
})
}