feature: Heading.configure functional syntax

[VividLemon]

This may be something that could be extended to other extensions, but I find myself with this issue:

There are classes that conflict in my app, causing heading elements to display incorrectly (font-weight: inherit). The simplest way to fix this imo was to simply add some tailwind classes to specific values. Okay, great.

However, there isn't really any way to modify specific elements in heading. For example, text-6xl for an h1 element, but text-1xl for a h6 element. There is no way to dynamically have this added using the extension itself.

My fix was to simply use

const interceptor = computed({
  get: () => modelVal.value,
  set: (v) => {
    // Heading elements need to have specific classes for each variation
    modelVal.value = v?.replace(
      /(<h([1-6])\s[^>]*class=")([^"]*)(")/g,
      (_, p1, p2, p3, p4) => `${p1}${p3} text-${7 - p2}xl${p4}`,
    )
  },
})

But this has the drawback of not displaying correctly in the editor, only when it's updated.

So, the proposal is to create a functional syntax in the extensions, where specific additions could be added under specific circumstances.

For example

Heading.configure((e) => ({ divider: true, HTMLAttributes: { class: `font-bold text-${7 - e.level}xl` } })),

What exactly "e" will look like is up for debate. It should likely be an object for future proofing, and other extensions could make use of it

[yikoyu]

You can use custom styles to customize the heading styles.

Create styles/markdown.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

.vuetify-pro-tiptap-editor__content.markdown-theme-default {
  // your custom styles
  &.__dark {
    // your dark mode custom styles
  }

  h1 {
    // https://tailwindcss.com/docs/functions-and-directives#apply
    @apply text-6xl;
  }

  h2 {
    // your heading styles
  }
}

Import markdown.scss in main.ts

// import 'vuetify-pro-tiptap/style.css' // import all(editor and markdown) styles
import 'vuetify-pro-tiptap/styles/editor.css' // only use editor style, not using markdown style
import './styles/markdown.scss'  // your created markdown.scss