tiptap/packages/extension-text-align/src/text-align.ts

81 lines
2.2 KiB
TypeScript
Raw Normal View History

2020-11-16 06:25:25 +08:00
import { Command, Extension } from '@tiptap/core'
2020-10-23 21:23:40 +08:00
2020-10-23 23:19:12 +08:00
type TextAlignOptions = {
types: string[],
2020-10-23 23:50:28 +08:00
alignments: string[],
defaultAlignment: string,
2020-10-23 23:19:12 +08:00
}
2020-11-16 06:25:25 +08:00
const TextAlign = Extension.create({
2020-12-02 16:44:46 +08:00
name: 'textAlign',
2020-10-23 23:19:12 +08:00
defaultOptions: <TextAlignOptions>{
types: ['heading', 'paragraph'],
2020-11-03 23:13:13 +08:00
alignments: ['left', 'center', 'right', 'justify'],
defaultAlignment: 'left',
2020-10-23 23:19:12 +08:00
},
2020-10-23 21:23:40 +08:00
addGlobalAttributes() {
return [
{
2020-10-23 23:19:12 +08:00
types: this.options.types,
2020-10-23 21:23:40 +08:00
attributes: {
2020-10-23 23:19:12 +08:00
textAlign: {
default: this.options.defaultAlignment,
2020-10-23 21:23:40 +08:00
renderHTML: attributes => ({
2020-10-23 23:19:12 +08:00
style: `text-align: ${attributes.textAlign}`,
2020-10-23 21:23:40 +08:00
}),
parseHTML: element => ({
textAlign: element.style.textAlign || this.options.defaultAlignment,
}),
2020-10-23 21:23:40 +08:00
},
},
},
]
},
2020-10-23 23:50:28 +08:00
addCommands() {
return {
2020-11-13 22:08:30 +08:00
/**
2020-11-18 19:34:06 +08:00
* Set the text align attribute
2020-11-13 22:08:30 +08:00
*/
2020-11-18 19:34:06 +08:00
setTextAlign: (alignment: string): Command => ({ commands }) => {
2020-10-23 23:50:28 +08:00
if (!this.options.alignments.includes(alignment)) {
return false
}
return this.options.types.every(type => commands.updateNodeAttributes(type, { textAlign: alignment }))
2020-10-23 23:50:28 +08:00
},
2020-11-18 19:34:06 +08:00
/**
* Unset the text align attribute
*/
unsetTextAlign: (): Command => ({ commands }) => {
2020-11-18 22:18:30 +08:00
return this.options.types.every(type => commands.resetNodeAttributes(type, 'textAlign'))
2020-11-18 19:34:06 +08:00
},
2020-10-23 23:50:28 +08:00
}
},
addKeyboardShortcuts() {
return {
2020-10-27 19:38:07 +08:00
// TODO: re-use only 'textAlign' attribute
// TODO: use custom splitBlock only for `this.options.types`
// TODO: use complete default enter handler (chainCommand) with custom splitBlock
Enter: () => this.editor.commands.splitBlock({
withAttributes: true,
}),
2020-11-19 08:16:10 +08:00
'Mod-Shift-l': () => this.editor.commands.setTextAlign('left'),
'Mod-Shift-e': () => this.editor.commands.setTextAlign('center'),
'Mod-Shift-r': () => this.editor.commands.setTextAlign('right'),
'Mod-Shift-j': () => this.editor.commands.setTextAlign('justify'),
}
},
2020-10-23 21:23:40 +08:00
})
export default TextAlign
declare module '@tiptap/core' {
interface AllExtensions {
TextAlign: typeof TextAlign,
2020-10-23 21:23:40 +08:00
}
}