CKEditor5 - 接收“model-nodelist-offset-out-of-bounds”。 出现此错误的可能原因是什么？

Question

I am receiving the following error ("model-nodelist-offset-out-of-bounds") after my attempt to create a custom plugin in CKEditor5. The plugin takes three user input values and creates a series of nested elements with three text nodes. My custom downcast function contains...

    const testimonial = data.item;

    // Retrieves attributes from custom 'testimonial' element
    let body = testimonial.getAttribute( 'testimonialBody' );
    let author = testimonial.getAttribute( 'testimonialAuthor' );
    let about = testimonial.getAttribute( 'testimonialAbout' );

    // Element creation
    const testWrapperElement = conversionApi.writer.createContainerElement( 'div', { class: 'callout__interbodyquote' } );
    const testBodyElement = conversionApi.writer.createContainerElement( 'p', { class: 'body_testimonial' } );
    const testSubBodyElement = conversionApi.writer.createContainerElement( 'div' );
    const testIconElement = conversionApi.writer.createContainerElement( 'image', { class: 'icon__testimonial', src: testimonialIcon } );
    const testFooterWrapperElement = conversionApi.writer.createContainerElement( 'div' );
    const testAuthorElement = conversionApi.writer.createContainerElement( 'p', { class: 'author_testimonial' } );
    const testAboutElement = conversionApi.writer.createContainerElement( 'p', { class: 'about_testimonial' } );

    // Text element creation
    const bodyText = conversionApi.writer.createText( body );
    const authorText = conversionApi.writer.createText( author );
    const aboutText = conversionApi.writer.createText( about );   

    // Combining/nesting elements
    let insertPosition = ViewPosition.createAt( testWrapperElement, 'end' );
    conversionApi.writer.insert( insertPosition, testBodyElement );
    insertPosition = ViewPosition.createAt( testWrapperElement, 'end' );
    conversionApi.writer.insert( insertPosition, testSubBodyElement );
    insertPosition = ViewPosition.createAt( testBodyElement, 'end' );
    conversionApi.writer.insert( insertPosition, bodyText );
    insertPosition = ViewPosition.createAt( testSubBodyElement, 'end' );
    conversionApi.writer.insert( insertPosition, testFooterWrapperElement );
    insertPosition = ViewPosition.createAt( testSubBodyElement, 'end' );
    conversionApi.writer.insert( insertPosition, testIconElement );
    insertPosition = ViewPosition.createAt( testFooterWrapperElement, 'end' );
    conversionApi.writer.insert( insertPosition, testAuthorElement );
    insertPosition = ViewPosition.createAt( testFooterWrapperElement, 'end' );
    conversionApi.writer.insert( insertPosition, testAboutElement );
    insertPosition = ViewPosition.createAt( testAboutElement, 'end' );
    conversionApi.writer.insert( insertPosition, aboutText );
    insertPosition = ViewPosition.createAt( testAuthorElement, 'end' );
    conversionApi.writer.insert( insertPosition, authorText );

    const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
    conversionApi.mapper.bindElements( testimonial, testWrapperElement );
    conversionApi.writer.insert( viewPosition, testWrapperElement );

My command is as follows...

    export default class TestimonialCommand extends Command {
        refresh() {
            const model = this.editor.model;
            const selection = model.document.selection;
            const schema = model.schema;

            const validParent = getInsertTestimonialParent( selection.getFirstPosition() );

            // Check if custom testimonial element is allowed within the current parent (based on cursor location)
            this.isEnabled = schema.checkChild( validParent, 'testimonial' );
        }

        execute(body, author, about) {
            const model = this.editor.model;
            const selection = model.document.selection;

            model.change(writer => {
                const firstPosition = selection.getFirstPosition();
                const isRoot = firstPosition.parent === firstPosition.root;
                const insertPosition = isRoot ? Position.createAt( firstPosition ) : Position.createAfter( firstPosition.parent );

                // Creates custom testimonial element with user input as custom attributes.
                // These attributes will be pulled off the element during the downcasting and converted into 
                // text within a testimonial block of HTML. 
                const testimonial = writer.createElement( 'testimonial', { 'testimonialBody': body, 'testimonialAuthor': author, 'testimonialAbout': about } );

                writer.insert( testimonial, insertPosition );
            })
        }
    }

    // Retrieves parent element 
    function getInsertTestimonialParent( position ) {
        const parent = position.parent;

        return parent === parent.root ? parent : parent.parent;
    }

The error that I'm receiving in full reads...

Uncaught CKEditorError: model-nodelist-offset-out-of-bounds: Given offset cannot be found in the node list.

What are possible causes of an error such as this?

Thank you in advance for your help!

Answer 1

I got the same error while developed own widget, and solved that with viewToModelPositionOutsideModelElement utility.

This error is thrown because there is a difference in text node mapping between the model and the view due to the different structures

You can read about it in CKEditor documentation right here: Fixing position mapping