Header is not styling itself

[roncarino]

Hi everyone, first of all, thanks a lot for your hard work.

I have a Laravel project end I am integrating EditorJS and your header tool. This is my configuration so far:

const editor = new EditorJS( {
    /**
        * Id of Element that should contain Editor instance
        */
    holder: 'editorjs',
    /**
        * Tools list
        */
    tools: {
        header: {
            class: Header,
            inlineToolbar: [ 'link' ],
            config: {
                placeholder: 'Header'
            },
            shortcut: 'CMD+SHIFT+H'
        },
        /**
            * Or pass class directly without any configuration
            */
        image: {
            class: ImageTool,
            config: {
                uploader: {
                    /**
                        * Upload file to the server and return an uploaded image data
                        * @param {File} file - file selected from the device or pasted by drag-n-drop
                        * @return {Promise.<{success, file: {url}}>}
                        */
                    uploadByFile( file ) {
                        let formData = new FormData();
                        formData.append( 'file', file );

                        return new Promise( function ( resolve ) {
                            axios.post( '/admin/media', formData, {
                                headers: {
                                    'Content-Type': 'multipart/form-data'
                                }
                            } ).then( function ( response ) {
                                // The data from the request is available in a .then block
                                // We return the result using resolve.
                                resolve( response.data );
                            } ).catch( ( error ) => {
                                console.log( 'ERROR!!', error );
                            } ).then( () => {
                            } );
                        } )
                    },
                },
            },
        },
        list: {
            class: List,
            inlineToolbar: true,
            shortcut: 'CMD+SHIFT+L'
        },
        checklist: {
            class: Checklist,
            inlineToolbar: true,
        },
        quote: {
            class: Quote,
            inlineToolbar: true,
            config: {
                quotePlaceholder: 'Enter a quote',
                captionPlaceholder: 'Quote\'s author',
            },
            shortcut: 'CMD+SHIFT+O'
        },
        delimiter: Delimiter,
        embed: Embed,
        Marker: {
            class: Marker,
            shortcut: 'CMD+SHIFT+M',
        }
    },
} );

I am using Laravel mix (webpack) and extracting "@editorjs/editorjs" on my vendor.js file together with other libraries. Everything is looking good honestly. Only problem I am having is that the header is not "styling" itself when you choose it. Attached images:

Am I doing something wrong? I cannot really figure it out.

[roncarino]

I think I found the reason. I am using Bulma to build my project and somehow its css override your "ce-header" css. Not entirely sure how to make this work now but at least I know the problem. I think I can close the issue. Thanks

[AjeaSmith]

I'm having the same problem but I'm not using any css framework, just pure css

[roncarino]

I'm having the same problem but I'm not using any css framework, just pure css

Umm that sounds quite odd honestly. Anyway, in my case, I have solved extending Header class and overwriting render function to add and extra wrapper around "h" element. Not sure if this can help you.

class MyHeader extends Header {
    /**
     * Return Tool's view
     * @returns {HTMLHeadingElement}
     * @public
     */
    render() {
        const extrawrapper = document.createElement('div');
        extrawrapper.classList.add('content');
        extrawrapper.appendChild(this._element);

        return extrawrapper;
    }
}

[dbwodlf3]

It works. but. if style not applied. then you need to check h tags are okay. This tool use just pure css style. if you edit default h tag style, then applied that style. (css framework like bulma could edit h tags default style.)

[HonestCodeWasTaken]

Fixed in NextJS/ChakraUI by adding a global stylesheet inside in _app.tsx file, the css looked like in this pen https://codepen.io/adamlacombe/pen/LvpJqO

[stevie101]

Just experienced the same issue with Bulma. Found if you wrap the editorjs div with one that includes a content class it stopped overriding the heading tags.

<div class="content"><div id="editorjs"></div></div>

[MejanH]

in my case, tailwindcss removed the default browser heading styles. source: https://laracasts.com/discuss/channels/javascript/editorjs-inline-styles-overruled-by-tailwindcss

[PradhaID]

i need to add several styles on my css when using tailwindcss like :

h1.ce-header{
  @apply text-3xl font-bold
}
h2.ce-header{
  @apply text-2xl font-semibold
}
h3.ce-header{
  @apply text-xl font-semibold
}
h4.ce-header{
  @apply text-lg font-semibold
}
h5.ce-header{
  @apply text-base font-semibold
}
h6.ce-header{
  @apply text-base font-semibold
}

[trancethehuman]

Issue still exists with Tailwind 3.3.2 and editorjs 2.28

[saqibtanveer786]

Those who are using tailwind can solve this by adding the following code to their global.css: @layer base { h1 { @apply text-2xl; } h2 { @apply text-xl; } / ... / }

I found this from the below two links: https://tailwindcss.com/docs/preflight#headings-are-unstyled https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

[OFD16]

i need to add several styles on my css when using tailwindcss like :

h1.ce-header{
  @apply text-3xl font-bold
}
h2.ce-header{
  @apply text-2xl font-semibold
}
h3.ce-header{
  @apply text-xl font-semibold
}
h4.ce-header{
  @apply text-lg font-semibold
}
h5.ce-header{
  @apply text-base font-semibold
}
h6.ce-header{
  @apply text-base font-semibold
}

this solved my next.js tailwind website for editor.js problem thanks a lot

[code-march]

Reference

Thank you Brother (Solved)