Update Widget on update Heading

[AroundtheGlobe]

Provide a description of the task

I would like to update my widget code so that once you add or update an heading the widget will be regenerated and updated with the latest values. When no widget exists nothing will happen. The widget is mostly the code from the tutorial on the website.

📃 Other details

I've tried various ways to get this to work for example update the command on refresh to remove the widget and to add the new one again, but without succes.

refresh() {
		const model = this.editor.model;
model.change( writer => {
			const simpleBox = Array.from( writer.createRangeIn( this.editor.model.document.getRoot() ) ).filter( ( { type, item } ) => type === 'elementStart' && item.name == 'simpleBox' ).map( value => value.item );
			for ( const sb of simpleBox ) {
				const range = writer.createRangeOn(sb);
				const insertNewSimpleBox = range.start;
				this.editor.model.deleteContent(writer.createSelection(range));
				this.editor.execute('insertSimpleBox', insertNewSimpleBox)
			}


			//
		});
const selection = model.document.selection;
		const allowedIn = model.schema.findAllowedParent( selection.getFirstPosition(), 'simpleBox' );

		this.isEnabled = allowedIn !== null;
	}

I tried to use this example on stackoverflow and adapt it (because I'm not using an external event), but the biggest challenge here was to catch the event on the heading and then find the simpleBox widget to regenerate it and replace the existing widget.

How would you find the right element after a dispatcher is fired on a heading to remove it and then replace it with the new updated code? I was able to remove the widget and replace it at the position of the cursor but never on the old position.

Are there any examples I can use or could anyone provide a code sample how to get this to work?

• CKEditor version: 34.2.0