9afadeb7fe
* add new addOptions option * replace defaultOptions with addOptions for all extensions * replace defaultOptions with addOptions for all demos * replace defaultOptions with addOptions in docs * refactoring * refactoring * drop object support for addOptions * fix optional options * fix tests
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { Extension } from '@tiptap/core'
|
|
|
|
export interface TextAlignOptions {
|
|
types: string[],
|
|
alignments: string[],
|
|
defaultAlignment: string,
|
|
}
|
|
|
|
declare module '@tiptap/core' {
|
|
interface Commands<ReturnType> {
|
|
textAlign: {
|
|
/**
|
|
* Set the text align attribute
|
|
*/
|
|
setTextAlign: (alignment: string) => ReturnType,
|
|
/**
|
|
* Unset the text align attribute
|
|
*/
|
|
unsetTextAlign: () => ReturnType,
|
|
}
|
|
}
|
|
}
|
|
|
|
export const TextAlign = Extension.create<TextAlignOptions>({
|
|
name: 'textAlign',
|
|
|
|
addOptions() {
|
|
return {
|
|
types: [],
|
|
alignments: ['left', 'center', 'right', 'justify'],
|
|
defaultAlignment: 'left',
|
|
}
|
|
},
|
|
|
|
addGlobalAttributes() {
|
|
return [
|
|
{
|
|
types: this.options.types,
|
|
attributes: {
|
|
textAlign: {
|
|
default: this.options.defaultAlignment,
|
|
parseHTML: element => element.style.textAlign || this.options.defaultAlignment,
|
|
renderHTML: attributes => {
|
|
if (attributes.textAlign === this.options.defaultAlignment) {
|
|
return {}
|
|
}
|
|
|
|
return { style: `text-align: ${attributes.textAlign}` }
|
|
},
|
|
},
|
|
},
|
|
},
|
|
]
|
|
},
|
|
|
|
addCommands() {
|
|
return {
|
|
setTextAlign: (alignment: string) => ({ commands }) => {
|
|
if (!this.options.alignments.includes(alignment)) {
|
|
return false
|
|
}
|
|
|
|
return this.options.types.every(type => commands.updateAttributes(type, { textAlign: alignment }))
|
|
},
|
|
unsetTextAlign: () => ({ commands }) => {
|
|
return this.options.types.every(type => commands.resetAttributes(type, 'textAlign'))
|
|
},
|
|
}
|
|
},
|
|
|
|
addKeyboardShortcuts() {
|
|
return {
|
|
'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'),
|
|
}
|
|
},
|
|
})
|