yikoyu / vuetify-pro-tiptap

A Rich Text Editor (WYSIWYG) for Vue3 with tiptap & Vuetify.
https://yikoyu.github.io/vuetify-pro-tiptap/
MIT License
159 stars 23 forks source link

TextAlign disabled #285

Closed jcbertoli closed 6 months ago

jcbertoli commented 6 months ago

Hey everyone, I'm really impressed with this package! However, I could use some help with the 'TextAlign' extension. Unfortunately, its button is always disabled, preventing me from aligning the text properly.

image image

Here is my tiptap.js file:

import { VuetifyTiptap, VuetifyViewer, createVuetifyProTipTap } from 'vuetify-pro-tiptap'
import { locale, BaseKit, Bold, Italic, Underline, Strike, Color, Highlight, Heading, TextAlign, FontFamily, FontSize, SubAndSuperScript, BulletList, OrderedList, TaskList, Indent, Link, Image, Video, Table, Blockquote, HorizontalRule, Code, CodeBlock, Clear, History } from 'vuetify-pro-tiptap'
import 'vuetify-pro-tiptap/style.css'

export default createVuetifyProTipTap({
  lang: 'pt_BR',
  components: {
    VuetifyTiptap,
    VuetifyViewer
  },
  extensions: [
    BaseKit.configure({
      placeholder: {
        placeholder: 'Insira o texto...'
      },
      bubble: {
        list: {
          text: ['bold', 'italic', 'underline', 'strike', 'divider', 'color', 'highlight', 'textAlign', 'divider', 'link',  'heading'],
        },
      }
    }),
    Bold,
    Italic,
    Underline,
    Strike,
    Code.configure({ divider: true }),
    Heading,
    TextAlign,
    FontFamily,
    FontSize,
    Color,
    Highlight.configure({ divider: true }),
    SubAndSuperScript.configure({ divider: true }),
    Clear.configure({ divider: true }),
    BulletList,
    OrderedList,
    Indent.configure({ divider: true }),
    Link,
    Video,
    Table.configure({ divider: true }),
    Blockquote,
    HorizontalRule,
    CodeBlock.configure({ divider: true }),
    History.configure({ divider: true }),
  ]
})

Thanks in advance!

yikoyu commented 6 months ago

@jcbertoli No image used

TextAlign.configure({
  // types: ['heading', 'paragraph', 'image'],  default
  types: ['heading', 'paragraph'],
  divider: true
}),
jcbertoli commented 6 months ago

That was it. Thank you so much!