How to apply CKEditor 5 Bold Plugin to my own inline elements?

[mike-hogan]

I followed the Implementing an inline widget tutorial at https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html.

I want to extend it to enable bolding of placeholders.

I added this.editor.model.schema.extend( 'placeholder', { allowAttributes: 'bold' } ); to PlaceholderEditing.init(), so it now looks like this:

    init() {
        this._defineSchema();
        this._defineConverters();

        this.editor.commands.add('placeholder', new PlaceholderCommand(this.editor));

        this.editor.editing.mapper.on(
            'viewToModelPosition',
            viewToModelPositionOutsideModelElement(this.editor.model, viewElement => viewElement.hasClass('placeholder'))
        );
        this.editor.config.define( 'placeholderConfig', {
            types: [ 'date', 'first name', 'surname' ]
        } );
        this.editor.model.schema.extend( 'placeholder', { allowAttributes: 'bold' } ); //ADDED
    }

Then I wrapped my placeholder in <strong></strong>, like so:

<strong><span class="placeholder" >{mike}</span></strong>

The inspector shows me the attribute gets added to placeholder in the model, like so:

https://i.stack.imgur.com/zDVNm.png

But, the rendered html in the editor does not have <strong></strong> downcast on it

https://i.stack.imgur.com/sHsYP.png

How can I make this work?

Thanks.

[Mgsy]

Hi! Unfortunately, styling inline widgets isn't supported and introducing it will require some bigger changes. Please, read the discussion in the proper ticket - #1633.