Rendering prose (Tailwind) for all headings and paragraphs

[notflip]

At the moment I'm using the WYSIWYG field, this content I then render using a Prose component, which basically gives the h1, h2, h3 etc their tailwind prose styles

<script setup lang="ts">
interface ProseProps {
  content: string
  classes?: Array<string>
}

const props = defineProps<ProseProps>()

const proseClasses = [
  ...props.classes ?? [],
  "prose lg:max-w-[1000px]",
  "prose-blockquote:text-lg prose-blockquote:border-l-2 prose-blockquote:pl-4",
  "prose-h2:text-3xl prose-h2:text-blueribbon-950",
  'prose-h3:mt-8 prose-h3:mb-4 prose-h3:md:text-2xl prose-h3:font-semibold prose-h3:text-blueribbon-950',
  "prose-h4:text-xl prose-h4:mt-8 prose-h4:mb-4",
  "prose-h6:mb-2 prose-h6:uppercase prose-h6:text-fiord-700",
  "prose-p:lg:max-w-[90%] prose-p:text-grayblue",
  "prose-ul:lg:max-w-[80%] prose-ul :text-grayblue",
  "prose-ul:list-disc prose-ul:pl-4",
]
</script>

<template>
  <div ref="contentEl" :class="proseClasses" v-html="content"/>
</template>

Now I'm wondering how I can achieve this using the tiptap editor? I copied over the headings, paragraphs. Do I need to create a custom block? In the example I can see this

// Define other components to render any editor content node
    const componentSerializers: VueComponentSerializers = [
        // marks with `type: 'mark'`
        { name: "italic", type: "mark", component: Textfield },
        {
            name: "bold",
            type: "mark",
            render: (attrs) => [
                Textfield,
                { ...attrs, style: "background:lightgreen" },
            ],
        },
        // blocks
        { name: "heading", render: (attrs) => ["textarea", attrs] },
    ];

But I'm not sure how to combine this with my Prose class.
Thanks!

[formfcw]

Thank you for your question!

There are two ways:

1. Add your Tailwind classes directly to the FlexibleEditorContent Vue component (https://github.com/formfcw/directus-extension-flexible-editor/tree/main/content#vue):

   <template>
       <FlexibleEditorContent
           :content="data.description"
           :componentSerializers="componentSerializers"
           :relationBlocks="relationBlocks"
           class="[&>*~*]:mt-1 [&_ul]:pl-1 [&_ul]:list-['-_'] [&_strong]:font-bold [&_a]:link whitespace-pre-line"
       />
   </template>

2. By using a component-serializer:

   <script setup lang="ts">
       import FlexibleEditorContent, { VueComponentSerializers } from "directus-extension-flexible-editor/content/vue";
   
       // …
   
       // Define other components to render any editor content node
       const componentSerializers: VueComponentSerializers = [
           {
               name: "heading",
               render: (attrs) => [
                   `h${attrs.level}`,
                   { ...attrs, class: attrs.level == 2 ? 'text-3xl text-blueribbon-950' : '' },
               ],
           },
       ];
   </script>

I personally prefer option 1!
Note that I have not tested the code.

[notflip]

Perfect thanks! Adding the prose classes fixes everything

          <FlexibleEditorContent
            :content="page.editor"
            :relationBlocks="relationBlocks"
            class="prose prose-lg"
          />

[notflip]

@formfcw The only issue I'm seeing with this, is that these classes get passed on to every component that is rendered inside the nodes. So my gallery component is also inheriting these classes.

[formfcw]

This is a problem related to Tailwind. But if you follow their documentation, there is a class .not-prose for this, which will be the easiest solution: https://tailwindcss.com/docs/typography-plugin#undoing-typography-styles

So just add it to your gallery component and other Relation Blocks …

[notflip]

Great! And between you and me @formfcw this plugin is one of the best I've seen! Works like a charm and solves so much issues! So thank you.

[formfcw]

Thanks, that is nice to hear. Would be nice if you could upvote my comment on the related feature request: directus/directus#19215 (comment)