Heading style does not autoformat

[qweyrt]

I'm using a custom build of ckeditor 5 and whenever I try to change the heading style the text doesn't change even though the console still show the data text with heading tag:

There's no errors shown.

Here's my ckeditor element:

        <CKEditor
            editor={Editor}
            config={editorConfiguration}
            data={null}
            onChange={(event, editor) => {
                const data = editor.getData();
                console.log({ event, editor, data });
            }}
            onReady={(editor) =>{
                editor.conversion.for( 'upcast' ).elementToAttribute( {
                    view: {
                        name: 'a',
                        key: 'data-mention',
                        classes: 'mention',
                        attributes: {
                            href: true,
                            'data-user-id': true
                        }
                    },
                    model: {
                        key: 'mention',
                        value: viewItem => {
                            const mentionAttribute = editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem, {
                                link: viewItem.getAttribute( 'href' ),
                                userId: viewItem.getAttribute( 'data-user-id' )
                            } );
            
                            return mentionAttribute;
                        }
                    },
                    converterPriority: 'high'
                } );                
                editor.conversion.for( 'downcast' ).attributeToElement( {
                    model: 'mention',
                    view: ( modelAttributeValue, { writer } ) => {
                        if ( !modelAttributeValue ) {
                            return;
                        }
                        return writer.createAttributeElement( 'span', {
                        }, {
                            priority: 20,
                        } );
                    },
                    converterPriority: 'high'
                } );
            }}
        />

Here's my custom ckeditor file (Which I use to build my custom editor):

class Editor extends ClassicEditor {
	public static override builtinPlugins = [
		Alignment,
		Autoformat,
		BlockQuote,
		Bold,
		CKBox,
		CloudServices,
		Code,
		CodeBlock,
		DataFilter,
		DataSchema,
		Essentials,
		FindAndReplace,
		FontFamily,
		FontSize,
		GeneralHtmlSupport,
		Heading,
		HorizontalLine,
		Image,
		ImageCaption,
		ImageStyle,
		ImageToolbar,
		ImageUpload,
		Indent,
		Italic,
		Link,
		List,
		MediaEmbed,
		Mention,
		PageBreak,
		Paragraph,
		PasteFromOffice,
		PictureEditing,
		SelectAll,
		Table,
		TableToolbar,
		TextTransformation,
		Underline,
		Undo
	];

	public static override defaultConfig: EditorConfig = {
		toolbar: {
			items: [
				'heading',
				'|',
				'bold',
				'italic',
				'underline',
				'link',
				'bulletedList',
				'numberedList',
				'fontFamily',
				'fontSize',
				'|',
				'outdent',
				'indent',
				'alignment',
				'-',
				'undo',
				'redo',
				'imageUpload',
				'insertTable',
				'blockQuote',
				'mediaEmbed',
				'code',
				'codeBlock',
				'findAndReplace',
				'pageBreak',
				'horizontalLine',
				'selectAll'
			],
			shouldNotGroupWhenFull: true
		},
		language: 'en',
		image: {
			toolbar: [
				'imageTextAlternative',
				'toggleImageCaption',
				'imageStyle:inline',
				'imageStyle:block',
				'imageStyle:side'
			]
		},
		table: {
			contentToolbar: [
				'tableColumn',
				'tableRow',
				'mergeTableCells'
			]
		},
		heading: {
			options: [
				{ class: 'ck-heading_paragraph',model: 'paragraph', title: 'Paragraph' },
				{ class: 'ck-heading_heading1',model: 'heading1', view: 'h1', title: 'Heading 1' },
				{ class: 'ck-heading_heading2',model: 'heading2', view: 'h2', title: 'Heading 2' },
				{ class: 'ck-heading_heading3',model: 'heading3', view: 'h3', title: 'Heading 3' }
	
			]
		},	
		mention: {
            feeds: [
                {
                    marker: '',
					feed: ['[[Barney]]', '[[Lily]]', '[[Marry Ann]]', '[[Marshall]]', '[[Robin]]', '[[Ted]]'],
                    minimumCharacters: 1
                }
            ]
        }
	};
}

So what should I do?

[Witoso]

Hi!

I try to change the heading style (...)

Could you explain a bit more? I'm not sure if I fully understand. If you want to apply some specific classes to headings, the configuration would look more or less like this:

heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                {
                    model: 'headingFancy',
                    view: {
                        name: 'h2',
                        classes: 'fancy' // Class in the content.
                    },
                    title: 'Heading 2 (fancy)',
                    class: 'ck-heading_heading2_fancy', // <- Dropdown's class.

                    // It needs to be converted before the standard 'heading2'.
                    converterPriority: 'high'
                }
            ]
        }

The top-level class is applied to the button in the headings' dropdown, the class in the content.

[Witoso]

If the default content styles don't work, make sure there are no clashes with some other stylesheets.

[qweyrt]

Could you explain a bit more?

Usually when you pick a heading style, the text will automatically format to the style you pick, like this:

In my case, whenever I pick any type of heading the text doesn't change at all and it still stuck in the paragraph style

[Witoso]

It looks like something may be overriding the styles of the editor with a higher precedence. Please investigate your stylsheets. This is not reproducible in the demos we have.