How to add text-align to tiptap editor?

Question

I use tiptap vuetify editor in nuxt js.

But it has no text-align properties!

My component editor:

<template>
    <tiptap-vuetify
      :value="value"
      :extensions="extensions"
      class="Editor"
      min-height="350"
      @input="$emit('input', arguments[0])"
    >
    </tiptap-vuetify>
</template>

<script>
    import {
      TiptapVuetify,
      Heading,
      Bold,
      Italic,
      Strike,
      Underline,
      Code,
      Image,
      Paragraph,
      BulletList,
      OrderedList,
      ListItem,
      Link,
      Blockquote,
      HardBreak,
      HorizontalRule,
      History,
      Table,
      TableCell,
      TableHeader,
      TableRow,
    } from "tiptap-vuetify";
    import FileSelector from "~/Components/FileSelector";
    import { Extension }  from "tiptap";
    
    export default {
      name: "editor",
      components: { TiptapVuetify, FileSelector },
      props: {
        value: {
          type: String,
          default: "<p>description...</p>",
        },
      },
      data: () => ({
        extensions: [
          History,
          Blockquote,
          Link,
          Underline,
          Strike,
          Italic,
          ListItem,
          BulletList,
          [
            Image,
            {
              options: {
                imageSourcesOverride: true,
                imageSources: [{ component: FileSelector, name: "upload image" }],
              },
            },
          ],
          OrderedList,
          [
            Heading,
            {
              options: {
                levels: [1, 2, 3],
              },
            },
          ],
          Bold,
          Code,
          HorizontalRule,
          [
            Table,
            {
              options: {
                resizable: true,
              },
            },
          ],
          TableCell,
          TableHeader,
          TableRow,
          Paragraph,
          HardBreak,
        ],
      }),
    };
</script>

How to add text alignment for the editor? Add manually, or as an extension, or by JavaScript? I only want to textalign. Or should I use another editor?

Answer 1

Have you tried installing and importing the TextAlign extension from tiptap: https://tiptap.dev/api/extensions/text-align ?

npm install '@tiptap/extension-text-align'