How to make separate each element

Question

How can I make each of this element separated. Currently, each elements is merged into one <span> element

<span style="font-family:wingdings;">.4=??????</span>
<span style="font-family:symbol;">QPGH</span>

this is generated by code below

import Command from '@ckeditor/ckeditor5-core/src/command';

export default class SymbolsCommand extends Command {
  execute({ charButtons }) {
    const { model } = this.editor;

    model.change((writer) => {
      const { selection } = model.document;
      const position = writer.createPositionAt(selection.getFirstPosition());
      console.log(charButtons, 'charButtons');

      const renderChars = () => charButtons.map(({ fontFamily, char }) => {
        writer.insertText(char, { fontFamily }, position);
      });
      return renderChars();
    });
  }

  refresh() {
    this.isEnabled = true;
  }
}

I expect the output like

<span style="font-family:wingdings;">=</span>
<span style="font-family:wingdings;">?</span>
<span style="font-family:wingdings;">4</span>
<span style="font-family:symbol;">4</span>
<span style="font-family:symbol;">4</span>
...

Answer 1

Joining similar <span> s is a default CKEditor 5 behavior. One of the reasons is that those characters are also joined in the data model and represented by a one text node. It doesn't matter if you insert those characters one by one or all at once, if they have the same attributes they are grouped together.

One of the ways to prevent that from happening is to specify view.AttributeElement#id . This is unfortunately a more advanced subject. Among other, you will have to provide converters that will create attribute elements in the view.

I think there are two ways to achieve your goal, both will require you to add a converter instead of relying on fontFamily converter from font family plugin (I assume this happens here).

Using attribute on text with unique AttributeElement#id to prevent joining <span> s

The first solution is to introduce a new attribute for text (remember about extending schema ) and provide converter for it. Let's call the attribute key symbol .

The converter would have to convert given text node character-by-character and set unique id for each created attribute span.

This is a more complicated solution, although probably a better one.

editor.model.conversion.for( 'downcast' ).add( dispatcher => {
    dispatcher.on( 'attribute:symbol', ( evt, data, conversionApi ) => {
        // Provide your converter here. It should take `data.item`, iterate
        // through it's text content (`data.item.data`), use
        // `conversionApi.writer` to create attribute elements with unique ids
        // and use the writer and `conversionApi.mapper` to place them in the view.
    } );
} );

You could base the converter on function wrap from downcasthelpers.js in the engine: https://github.com/ckeditor/ckeditor5-engine/blob/master/src/conversion/downcasthelpers.js .

Insert symbols as inline elements

Another solution would be to insert elements with characters instead of simply text nodes.

In this case, again, you have to specify the new model element in the schema. Maybe extending the '$text' item.

For conversion, you could probably use elementToElement helpers from editor.conversion.for() . For downcast you would have to specify view as a callback and set unique id there (unique ids could be simply a counter, incremented by one each time). If elementToElement won't work for downcasting (it should work for upcast) you will need to provide a custom converter through .for( 'downcast' ).add( ... ) .

This solution is easier but I am not sure it will work. It's hard to say which one is better because it depends also on what exactly you want to achieve. I'd probably try both but I'd focus on trying to do it using the first approach.

I wish there was an easier way to achieve this at the moment but this use case is quite rare, so the architecture was focused in another direction.