webapp/src/components/Editor/extensions/Article.ts
Ilya Y 784bb435c3
Feature/lint (#317)
* prettier

---------

Co-authored-by: Igor Lobanov <igor.lobanov@onetwotrip.com>
2023-11-14 18:10:00 +03:00

67 lines
1.4 KiB
TypeScript

import { Node, mergeAttributes } from '@tiptap/core'
declare module '@tiptap/core' {
interface Commands<ReturnType> {
Article: {
toggleArticle: () => ReturnType
setArticleFloat: (float: null | 'half-left' | 'half-right') => ReturnType
setArticleBg: (bg: null | string) => ReturnType
}
}
}
export default Node.create({
name: 'article',
defaultOptions: {
HTMLAttributes: {
'data-type': 'incut',
},
},
group: 'block',
content: 'block+',
parseHTML() {
return [
{
tag: 'article',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['article', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
},
addAttributes() {
return {
'data-float': {
default: null,
},
'data-bg': {
default: null,
},
}
},
addCommands() {
return {
toggleArticle:
() =>
// eslint-disable-next-line unicorn/consistent-function-scoping
({ commands }) => {
return commands.toggleWrap('article')
},
setArticleFloat:
(value) =>
({ commands }) => {
return commands.updateAttributes(this.name, { 'data-float': value })
},
setArticleBg:
(value) =>
({ commands }) => {
return commands.updateAttributes(this.name, { 'data-bg': value })
},
}
},
})