TipTap Align-Text Example

index.vue

<!-- This file is mainly pseudo code with parts copied from a working project to illustrate how tiptap-aligntext.plugin.js can be implemented into your project -->

<template>
  <div>
    <editor-menu-bar :editor="editor" v-slot="{ commands }">
      <div class="menubar">
        <i class="fas fa-align-left" :class="{ 'is-active': editor.activeMarkAttrs.aligntext.align === 'left' }" @click="commands.aligntext({ align: 'left' })"></i>
        <i class="fas fa-align-center" :class="{ 'is-active': editor.activeMarkAttrs.aligntext.align === 'center' }" @click="commands.aligntext({ align: 'center' })"></i>
        <i class="fas fa-align-right" :class="{ 'is-active': editor.activeMarkAttrs.aligntext.align === 'right' }" @click="commands.aligntext({ align: 'right' })"></i>
        <i class="fas fa-align-justify" :class="{ 'is-active': editor.activeMarkAttrs.aligntext.align === 'justify' }" @click="commands.aligntext({ align: 'justify' })"></i>  
      </div>
    </editor-menu-bar>
    <editor-content :editor="editor" />
  </div>
</template>
<script>
  import { Editor, EditorContent, EditorMenuBar } from 'tiptap';
  import { Heading, Bold, Italic, Strike, Underline, History } from 'tiptap-extensions';  
  import AlignText from './path/tiptap-aligntext.plugin.js';  
  
  export default {
    name: 'example-tiptap-aligntext',
    components: { EditorContent, EditorMenuBar },
    mounted: function () {
      this.$nextTick(() => this.init());
    },    
    data: () => ({
      editor: null
    }),
    methods: {
      async init() {
        this.editor = new Editor({
          extensions: [
            new Heading({ levels: [1, 2, 3] }),
            new Bold(),
            new Italic(),
            new Strike(),
            new Underline(),
            new History(),
            new AlignText()
          ],
          content: "Type your text here"
        });      
      }
    }
  }
</script>

tiptap-aligntext.plugin.js

/* Working MARK example BASED ON: https://github.com/scrumpy/tiptap/issues/157 AND https://github.com/scrumpy/tiptap/issues/180 */
import { Mark } from 'tiptap';
import { updateMark, markInputRule } from 'tiptap-commands';

export default class AlignText extends Mark {
	get name() {
		return 'aligntext';
	}

	get schema() {
		return {
			attrs: {
				align: {
					default: 'left',
				},
			},
			parseDOM: [
				{
					style: 'text-align',
					getAttrs: value => ({ align: value }),
				},
			],
			toDOM: mark => ['span', { style: `text-align: ${mark.attrs.align}; display: block` }, 0],
		};
	}

	commands({ type }) {
		return attrs => updateMark(type, attrs);
	}

	inputRules({ type }) {
		return [
			markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
		];
	}
}

Thanks.
I needed multiple alignment options - took me some time to figure out, so here it is:

import { Mark } from 'tiptap';
import { toggleMark, markInputRule } from 'tiptap-commands';

export default class AlignText extends Mark {
    get name() {
        return 'aligntext';
    }

    get defaultOptions() {
        return {
            alignments: [
                'right',
                'center',
                'left',
                'justify'
            ],
        }
    }

    get schema() {
        return {
            attrs: {
                align: {
                    default: 'left',
                },
            },
            parseDOM: this.options.alignments
                .map(alignment => ({
                    style: 'text-align',
                    attrs: { align: alignment },
                })),
            toDOM: mark => ['span', { style: `text-align: ${mark.attrs.align}; display: block` }, 0],
        };
    }

    commands({ type, schema }) {
        return attrs => {
            console.log(type, schema, attrs);
            return toggleMark(type, attrs);
        }
    }

    inputRules({ type }) {
        return [
            markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
        ];
    }
}

我爱你，谢谢Thanks♪(･ω･)ﾉ

Thanks a lot! 🎉

@Yiddishe-Kop @waaronking These are great, do you know how I could continue the alignment from previous line when hitting enter?