Heading H1 to H6 having no effect on text.

[this-is-id]

Hi, I've used this text editor in my Next js blog app, while everything else is working as intended. The heading from H1 to H6 are having no effect on text. Here is what it looks like when I apply heading. (Nothing happens)

Here is the main code of text editor.

const onEditorStateChange = (editorState) => {
        setEditorState(editorState);
    };

<Editor 
            editorState={editorState}
            onEditorStateChange={onEditorStateChange}

            toolbarClassName='flex sticky top-0 z-50 !bg-[#e6f4f885] 
            !justify-center mx-auto '
            editorClassName="bg-[#ffffffe5] mt-6 shadow-lg max-w-5xl mx-auto mb-12 border p-10"
            />

Can anybody guide why is heading not working?

[bamichoi]

I have the same issue now.

[theGateway1]

In my case this issue was due to tailwind CSS. If you're facing similar issue due to tailwind consider integrating slate js rich text editor instead of this one.

[bamichoi]

@codedog001 Thank you, exactly I use tailwindCSS. But is it a unique solution integrating slate js or other editors at this moment?

[theGateway1]

I'm not sure whether switching to slate js is the only solution or not, but it worked for me. Actually what you'll need to do is add classname="text-2xl" or maybe text-xl, basically the tailwind style classname in h1, h2 ... h6, to make it work. Now, as far as I know, I found no such place in this editor to configure this, while in slate js editor, this was configurable. If you switch to slate js, let me know, I'll share the code on how to make headings work in it. But, keep in mind, in slate js, I am still not able to make unordered and ordered lists work, they are still TODO.

[santhosh-umapathi-appymango]

Same issue here, h1 to h6 not working while using Tailwind Css. On debugging the browser, it sets the options font-size:inherit; font-weight:inherit

Once you uncheck those boxes, you will see the h tags works. But unfortunately did not find any place to override it

[santhosh-umapathi-appymango]

Good News Tailwind Users,

I have found a workaround for this issue,

Override the globals.css file where you integrate all the tailwind base components.

Paste the below and you are good to go:

@layer base {
  h1 {
    @apply text-4xl;
    @apply font-bold;
  }
  h2 {
    @apply text-3xl;
    @apply font-bold;
  }
  h3 {
    @apply text-2xl;
    @apply font-bold;
  }
  h4 {
    @apply text-xl;
    @apply font-semibold;
  }
  h5 {
    @apply text-md; /*or text-lg */
    @apply font-semibold;
  }
  h6 {
    @apply text-sm;
    @apply font-semibold;
  }
}

Reference: https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

[Mikhail1Demianenko]

Good News Tailwind Users,

I have found a workaround for this issue,

Override the globals.css file where you integrate all the tailwind base components.

Paste the below and you are good to go:

@layer base {
  h1 {
    @apply text-4xl;
    @apply font-bold;
  }
  h2 {
    @apply text-3xl;
    @apply font-bold;
  }
  h3 {
    @apply text-2xl;
    @apply font-bold;
  }
  h4 {
    @apply text-xl;
    @apply font-semibold;
  }
  h5 {
    @apply text-md;
    @apply font-semibold;
  }
  h6 {
    @apply text-sm;
    @apply font-semibold;
  }
}

Reference: https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

Hey! Im facing the same issue here I was thinking about the same solution you posted. It does not seem right to me to change the whole design system for the sake of one component I've been trying to find a way to override base styles for one component only, but I found nothing

[bamichoi]

@santhosh-umapathi-appymango Thank you, It works! I had to change "text-md " to "text-lg". the tailwindcss complained it does not exist in the base style that it offers. But like @Mikhail1Demianenko said, it is appied to whole heading tags. so, using this solution, we have to change other h tags we used if we don't want to apply this style. Fortunately, For me, this is not huge problem at this moment

[santhosh-umapathi-appymango]

@santhosh-umapathi-appymango Thank you, It works! I had to change "text-md " to "text-lg". the tailwindcss complained it does not exist in the base style that it offers. But like @Mikhail1Demianenko said, it is apply whole heading tags. so, using this solution, we have to change other h tags we used if we don't want to apply this style.

Yeah, i totally forgot, i added a custom font size by extending the config on the tailwind configs: tailwind.config.js

fontSize: {
       md: ["18px", "24px"],
       "8.5xl": ["7.5rem", "1"],
       "10xl": ["9rem", "1"],
     }

[santhosh-umapathi-appymango]

Good News Tailwind Users, I have found a workaround for this issue, Override the globals.css file where you integrate all the tailwind base components. Paste the below and you are good to go:

@layer base {
  h1 {
    @apply text-4xl;
    @apply font-bold;
  }
  h2 {
    @apply text-3xl;
    @apply font-bold;
  }
  h3 {
    @apply text-2xl;
    @apply font-bold;
  }
  h4 {
    @apply text-xl;
    @apply font-semibold;
  }
  h5 {
    @apply text-md;
    @apply font-semibold;
  }
  h6 {
    @apply text-sm;
    @apply font-semibold;
  }
}

Reference: https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

Hey! Im facing the same issue here I was thinking about the same solution you posted. It does not seem right to me to change the whole design system for the sake of one component I've been trying to find a way to override base styles for one component only, but I found nothing

Agreed ! this solution can be applied when you are free to customize the Tailwind Design System on h tags. In my case, it was not much of breaking change on my project.

[afrilabs-capacity]

Add the following to your stylesheet. Worked for me.

.DraftEditor-editorContainer .public-DraftEditor-content h1{ font-size: 2em!important; font-weight: bolder!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h2{ font-weight: bolder!important; font-size: 1.5em!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h3{ font-weight: bolder!important; font-size: 1.7em!important;

}

.DraftEditor-editorContainer .public-DraftEditor-content h4{ font-size: 1em!important; font-weight: bolder!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h5{ font-size: .83em!important; font-weight: bolder!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h6{ font-size: .67em!important; font-weight: bolder!important; }

[Irfanwani]

I realised that any other ui library messes with the html tags,

[Amandeep4567]

<h1 className="font-semibold text-5xl"> Hello User </h1> simply we can use this.

[Karthi981]

@santhosh-umapathi-appymango Thank you, It works! I had to change "text-md " to "text-lg". the tailwindcss complained it does not exist in the base style that it offers. But like @Mikhail1Demianenko said, it is appied to whole heading tags. so, using this solution, we have to change other h tags we used if we don't want to apply this style. Fortunately, For me, this is not huge problem at this moment

Good News Tailwind Users, I have found a workaround for this issue, Override the globals.css file where you integrate all the tailwind base components. Paste the below and you are good to go:

@layer base {
  h1 {
    @apply text-4xl;
    @apply font-bold;
  }
  h2 {
    @apply text-3xl;
    @apply font-bold;
  }
  h3 {
    @apply text-2xl;
    @apply font-bold;
  }
  h4 {
    @apply text-xl;
    @apply font-semibold;
  }
  h5 {
    @apply text-md;
    @apply font-semibold;
  }
  h6 {
    @apply text-sm;
    @apply font-semibold;
  }
}

Reference: https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

Hey! Im facing the same issue here I was thinking about the same solution you posted. It does not seem right to me to change the whole design system for the sake of one component I've been trying to find a way to override base styles for one component only, but I found nothing

Hey it seems you have to apply to a particular component here's the workaround,

@layer components {
  .editorJs h1 {
    @apply text-4xl;
    @apply font-bold;
  }
  .editorJs h2 {
    @apply text-3xl;
    @apply font-bold;
  }
  .editorJs h3 {
    @apply text-2xl;
    @apply font-bold;
  }
  .editorJs h4 {
    @apply text-xl;
    @apply font-semibold;
  }
  .editorJs h5 {
    @apply text-lg;
    @apply font-semibold;
  }
  .editorJs h6 {
    @apply text-sm;
    @apply font-semibold;
  }
  .editorJs a {
    @apply text-blue-600 underline;
  }
}

just use this to apply the above class in your div component so that particular component inherits these styles.

<div className="editorJs">
  <Editor data={parsedObject!} />
 </div>

[Karthi981]

https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes Here you go just apply those h1,h2 styles for particular components.

[yourcasualdev]

Add the following to your stylesheet. Worked for me.

.DraftEditor-editorContainer .public-DraftEditor-content h1{ font-size: 2em!important; font-weight: bolder!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h2{ font-weight: bolder!important; font-size: 1.5em!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h3{ font-weight: bolder!important; font-size: 1.7em!important;

}

.DraftEditor-editorContainer .public-DraftEditor-content h4{ font-size: 1em!important; font-weight: bolder!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h5{ font-size: .83em!important; font-weight: bolder!important; }

.DraftEditor-editorContainer .public-DraftEditor-content h6{ font-size: .67em!important; font-weight: bolder!important; }

This worked like charm for me. Thanks!