CKEDITOR 5 plugins editing inline widget attributes

Question

I am migrating/rewriting a custom plugin which was originally in ckeditor 4. The plugin is very similar to the "implementing an inline widget example".
I need the user to be able to amend attributes on the widget, which are then parsed server side.

This was achieved in ckeditor 4 using an external jquery dialog accessed from clicking a toolbar button when the widget is selected and/or double clicking the widget when the widget is selected. Also hitting enter on the selected widget opened the dialog.ckeditor4

plugin.js code

CKEDITOR.plugins.add( 'myfield', {
   requires: 'widget',
  
  // Register the icon used for the toolbar button.
  icons: 'myfield',
  
  // The plugin initialization logic goes inside this method.
  init: function( editor ){

    // create a command
    editor.addCommand( 'commandio', {
      exec: function( editor ) {
        myFunction(editor, "editor", editor) // call out to our function
      }
    });
    editor.widgets.add( 'myfield', { 
       edit: function(widget){ 
         myFunction(widget, "widget", editor)}, // call out to our function     
etc.....

my function :

function myFunction(widget, type, theEditor){
  var theElement = "" ;
  if ( type === "editor" ){
    theElement = widget.widgets.selected[0] ;
  }else{
    theElement   = widget.sender;}

......
// later on apply any change

theElement.setData("format", val);
theElement.element.setAttribute("data-format", val);

How is this achievable in ckeditor 5? Ive used a double click listener event to catch the click, im not sure how to update the widget, im currently just rebuilidng the HTML and inserting it into the editor removing the original widget and adding a new one. Is there a more elegant way to do this?Can i make the enter key fire myFunction, currently it inserts a carriage return and removes the hilighted widget, as it does in the implementing inline widget example.
Thanks

Answer 1

Ok i figured part of it out. This is the code in the init of my plugin which captures the click event.

  this.editor.listenTo( viewDocument, 'dblclick', (evt, data) => { 
    const modelElement = this.editor.editing.mapper.toModelElement(data.target);    
    if ( modelElement.name == 'myfield' ) {   
      console.log("double clicked");
      pluginClick(evt, data);
    }
  });

  

and then this code in the function

function pluginClick(event, data){
 //myEditors is the ckeditor instance
  const viewElement = data.target; 
  const modelItem = myEditors.editing.mapper.toModelElement(viewElement);
  modelItem._setAttribute( 'name', 'newName' );
  modelItem._setAttribute( 'data-label', 'newLabel' );
  myEditors.editing.reconvertItem(modelItem);

}

This updates the attributes and the upcasts/downcasts it so the model and view are updated.

I think the 'pressing enter deletes the item' is because the element is $inline rather than $block. Not sure if there is a solution.