-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Heading H1 to H6 having no effect on text. #1240
Comments
I have the same issue now. |
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. |
@codedog001 Thank you, exactly I use tailwindCSS. But is it a unique solution integrating slate js or other editors at this moment? |
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. |
Same issue here, h1 to h6 not working while using Tailwind Css. On debugging the browser, it sets the options Once you uncheck those boxes, you will see the h tags works. But unfortunately did not find any place to override it |
Good News Tailwind Users, I have found a workaround for this issue, Override the 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 |
Hey! |
@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 |
Yeah, i totally forgot, i added a custom font size by extending the config on the tailwind configs: fontSize: {
md: ["18px", "24px"],
"8.5xl": ["7.5rem", "1"],
"10xl": ["9rem", "1"],
} |
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. |
Add the following to your stylesheet. .DraftEditor-editorContainer .public-DraftEditor-content h1{ .DraftEditor-editorContainer .public-DraftEditor-content h2{ .DraftEditor-editorContainer .public-DraftEditor-content h3{ } .DraftEditor-editorContainer .public-DraftEditor-content h4{ .DraftEditor-editorContainer .public-DraftEditor-content h5{ .DraftEditor-editorContainer .public-DraftEditor-content h6{ |
I realised that any other ui library messes with the html tags, |
|
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> |
https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes Here you go just apply those h1,h2 styles for particular components. |
This worked like charm for me. Thanks! |
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.
Can anybody guide why is heading not working?
The text was updated successfully, but these errors were encountered: