Ckeditor5: Trying to create a command to restrict all the cells in a table with RestrictedEditor

[cocapasteque]

Hello there,
I'm currently trying to create a command that will automatically mark all the cells in a table with the restrictedEditingException to allow the user to edit the content of a table, but not the rest.

Here's the current command code :

export default class RestrictTableCommand extends Command {
    execute(options = {}) {
        const root = this.editor.model.document.getRoot();
        const model = this.editor.model;
        const document = model.document;

        this.editor.model.change(writer => {
            writer.setSelection(root, 'in');
            const selection = document.selection;

            for (const range of selection.getRanges()) {
                const items = range.getItems();
                let item = items.next();
                while (!item.done) {
                    if (item.value.is('element')) {
                        let children = item.value.getChildren();
                        let child = children.next();
                        while (!child.done) {
                            if (child.value.is('text')) {
                                const start = this.editor.model.createPositionBefore(child.value);
                                const end = this.editor.model.createPositionAfter(child.value);
                                const range = this.editor.model.createRange(start, end);

                                writer.setAttribute('restrictedEditingException', true, range);
                            }
                            child = children.next();
                        }
                    }

                    item = items.next();
                }
            }
        });

        this.editor.model.schema.extend('$text', {allowAttributes: ['restrictedEditingException']});

        this.editor.conversion.for('upcast').elementToAttribute({
            model: 'restrictedEditingException',
            view: {
                name: 'span',
                classes: 'restricted-editing-exception'
            }
        });

        this.editor.conversion.for('downcast').attributeToElement({
            model: 'restrictedEditingException',
            view: (modelAttributeValue, viewWriter) => {
                if (modelAttributeValue) {
                    // Make the restricted editing <span> outer-most in the view.
                    return viewWriter.createAttributeElement('span', {class: 'restricted-editing-exception'}, {priority: -10});
                }
            }
        });
    }
}

And the editor is initialized with this table :

<table>
    <tbody>
        <tr><td>Lorem</td><td>Ipsum</td></tr>
        <tr><td>Ipsum</td><td>Lorem</td></tr>
    </tbody>
</table>

I would say I'm close to achieve what I want but it seems that I'm not marking the correct spots in the table, when I execute the command I get the orange editable zone in between every characters but I cannot write anything in the table.

Not sure I posted this in the correct spot, but I cannot find any resources online on how to do this kind of thing and the documentation on the website doesn't really help me :)
Thanks !

[Mgsy]

@jodator, can you take a look at it?

[jodator]

I'll take a better look into it in some time but to guide you ATM.

1. The Command.execute() should have only the code which modifies model's document structure or selection.
2. The conversion and schema definitions should be loaded by a plugin. Compare this block widget tutorial where this code lands.
3. If you wish to add an editing exception on a run time it should be doable by creating Markers on the ranges you're interested in.
4. This can be done as a model post-fixer - it will create such ranges only for inserted table cells (you can enable insert table command as here: https://github.com/ckeditor/ckeditor5/issues/5953#issuecomment-616971396).

A simple post-fixer should look like this:

editor.model.document.registerPostFixer( writer => {
    let changeApplied = false;

    for ( const change of editor.model.document.differ.getChanges() ) {
        if ( change.type == 'insert' && change.name == 'table' ) {

            // TODO: Insert marker on table cells inside table.
            writer.addMarker( 'restrictedEditingException:UNIQUE_NAME', { range } );

            wasChangeApplied = true;
        }
    }

    return wasChangeApplied;
} );

[cocapasteque]

Thanks, I'll try that next time I get to work on this table stuff, but I think you answered my question. I was not sure what to do and where :)

[FilipTokarski]

I'm closing this due to lack of activity.