import { Extension , MenuData , CommandGetter } from 'tiptap' ; import { CommandFunction } from 'tiptap-commands' ; import { MenuBtnView , MenuBtnComponentOptions } from '@/../types' ; import { setTextAlign , isTextAlignActive } from '@/utils/text_align' ; import { Alignment , ALIGN_PATTERN } from '@/constants' ; import CommandButton from '@/components/MenuCommands/CommandButton.vue' ; export default class TextAlign extends Extension implements MenuBtnView { get name ( ) { return 'text_align' ; } get defaultOptions ( ) { return { alignments : [ Alignment . left , Alignment . center , Alignment . right , Alignment . justify , ] , } ; } commands ( ) { return this . options . alignments . reduce ( ( commands , alignment ) => { if ( ! ALIGN_PATTERN . test ( alignment ) ) return commands ; return { ... commands , [ `align_${ alignment }` ] : ( ) : CommandFunction => ( state , dispatch ) => { const { selection } = state ; const tr = setTextAlign ( state . tr . setSelection ( selection ) , alignment === 'left' ? null : alignment ) ; if ( tr . docChanged ) { dispatch && dispatch ( tr ) ; return true ; } else { return false ; } } , } ; } , { } ) ; } menuBtnView ( { commands , editor , t } ) { return this . options . alignments . reduce ( ( views , alignment ) => { if ( ! ALIGN_PATTERN . test ( alignment ) ) return views ; const isActive = alignment === 'left' ? false : isTextAlignActive ( editor . state , alignment ) ; return views . concat ( { component : CommandButton , componentProps : { isActive , command : commands [ `align_${ alignment }` ] , icon : `align-${ alignment }` , tooltip : t ( `editor.extensions.TextAlign.buttons.align_${ alignment }.tooltip` ) , } , } ) ; } , [ ] ) ; } }