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

75 lines
1.9 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-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
/**
* Update the text align attribute
*/
2020-10-23 23:50:28 +08:00
textAlign: (alignment: string): Command => ({ commands }) => {
if (!this.options.alignments.includes(alignment)) {
return false
}
return commands.updateNodeAttributes({ textAlign: alignment })
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,
}),
'Ctrl-Shift-l': () => this.editor.commands.textAlign('left'),
'Ctrl-Shift-e': () => this.editor.commands.textAlign('center'),
'Ctrl-Shift-r': () => this.editor.commands.textAlign('right'),
'Ctrl-Shift-j': () => this.editor.commands.textAlign('justify'),
}
},
2020-10-23 21:23:40 +08:00
})
export default TextAlign
2020-11-16 22:40:05 +08:00
declare global {
namespace Tiptap {
interface AllExtensions {
TextAlign: typeof TextAlign,
}
2020-10-23 21:23:40 +08:00
}
}