[nextgen-editor] Update shortcode content using jQuery

[danielkoptak]

Hello,
is it possible to update the content (shotcode) of the editor through jQuery?
example:

window.nextgenEditor.addHook('hookInit', () => {
    window.nextgenEditor.addButtonGroup('shortcode-core-menu', {
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15"><path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/><path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/><path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/></svg>',
      label: 'Menu',
    });
  });

  function addItem(item) {
    var ul='<div>test</div>';
    return $(item).css('background','red').append(ul);
  }

window.nextgenEditor.addShortcode('menu', {
    type: 'block',
    plugin: 'shortcode-core-menu',
    title: 'Menu',
    button: {
      group: 'shortcode-core-menu',
      label: 'Menu',
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15"><path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/><path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/><path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/></svg>',
    },
    attributes: {
        class: {
            type: String,
            title: 'Class',
            widget: 'input-text',
            default: '',
        },
        style: {
            type: String,
            title: 'Style',
            widget: 'input-text',
            default: '',
        },
    },
    content({ attributes }) {
      var result = $.trim(`
      <menu>
      <div class="menu">
      <ul><li><span class="circle plus" onclick="addItem(this)"></span></li></ul>    
      </div></menu>`);
      return result;
    },
  });

when I click on span, the "addItem()" function is called, the color changes but a new div is not added. Probably it is necessary to force nextgenEditor to redraw the content, but I don't know how to do it, in case the documentation is available somewhere?
Thank you very much for any advice

[w00fz]

You really can't manipulate the content like that via jQuery. As this uses CKEditor which uses a Virtual DOM. To do that kind of manipulation of the content you have to use CK5 API, we expose full access to the editor api via window.nextgenEditor.editor, which gives you access to everything offered by CK5. The Model and Writer are the main bits you will need to interact with the editor:

• https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_model-Model.html
• https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_writer-Writer.html

I am not entirely sure how to do what you are trying to do but here is a quick example on how you can add a div with content test after the current selection:

nextgenEditor.editor.model.change(writer => {
  const insertPosition = nextgenEditor.editor.model.document.selection.getLastPosition();
  writer.insertText('div', {content: 'test'}, insertPosition);
});

I hope this helps!

[danielkoptak]

Thank you so much for the advice. I understand a little better how to work with the editor. Now I still need advice on how to get a shortcode position.
nextgenEditor.editor.model.document.selection.getFirstPosition() - is before the shortcode
nextgenEditor.editor.model.document.selection.getLastPosition() - is after the shortcode
but I couldn't figure out how to get a position inside shortcode block...

[danielkoptak]

So I have already solved the position but now I have a problem with inserting the shortcode in the specified place (element).
However, when I try to select an element to insert code from execute writer.setSelection(test,'in');, an error is displayed in the console:

ckeditorerror.js:64 Uncaught TypeError: Cannot read property 'parent' of undefined
    at Function._createBefore (position.js:986)
    at ei.createPositionBefore (model.js:661)
    at bn.createPositionBefore (writer.js:627)
    at command.js:94
    at ei.change (model.js:178)
    at r.value (command.js:13)
    at r.<anonymous> (observablemixin.js:255)
    at r.fire (emittermixin.js:221)
    at r.<computed> [as execute] (observablemixin.js:259)
    at jt.execute (commandcollection.js:69)

My code:

class MenuClass {
  constructor(divClass) {
      this._divClass = divClass;
      this._allChildren = [];
  }
  
   addItem() {
    const root = nextgenEditor.editor.model.document.getRoot();
    nextgenEditor.editor.model.change(writer => {
      var element = this.#searchChildByKey('name','shortcode-block-editable',false);

      var ul = writer.createElement( 'ul',{ class: 'navbar-nav mr-auto mb-2 mb-lg-0', id: 'menu-left' } );
      var li = writer.createElement( 'li',{ class: 'nav-item' } );
      writer.append(li,ul);
      writer.insert( ul, element );

      this._allChildren = [];
      var test = this.#searchChildByKey('class','nav-item');
      console.log(test);
      writer.setSelection(test,'in');

      nextgenEditor.editor.execute( 'shortcode_menuitem');
    });
  }

  removeItem(myValue) {
    console.log(myValue);
  }

  #searchChildByKey(key,value,attr = true){
    var result;
    if (this._allChildren .length === 0) this.#getAllChildren();
    for ( var child of this._allChildren ){
      if(attr){
        result = this.#childAttrsSearch(result,key,value,child);
      }else{
        result = this.#childRootSearch(result,key,value,child);
      }
      if (result) return result;
    }
  }

  #childAttrsSearch(result,key,value,child){
    child._attrs.forEach(function(sValue, sKey) {
      if(sKey == key && sValue == value ){ 
        result = child;
        return false;
      }
    });
    return result;
  }

  #childRootSearch(result,key,value,child){
    if(child[key] == value){
      result = child;
    }
    return result;
  }
opéé
  #getAllChildren(item = nextgenEditor.editor.model.document.selection.getSelectedElement()){
    var children = [];
    if (item._children){ 
      children = item.getChildren();
    }
    for ( var child of children ){
      this._allChildren.push(child);
      this.#getAllChildren(child);
    }
  }
  
} 

inside method addItem: I just want to insert into the added elements (ul li) the code from the execute function... thank you very much for any advice

[w00fz]

This is definitely in the super advanced zone :)

Happy to see you are making good progress with it, unfortunately it really all comes down to the CK5 API which needs some digging and investigating.

I will try and have a look to see If there's anything outstanding I can figure out to help you.

[w00fz]

hey @danielkoptak , I'm unable to test your code because I'm missing some bits, however while I was looking at your code, I noticed you are trying to search for the element in the dom (test) for the call writer.setSelection(test,'in');.

Shouldn't that be writer.setSelection(li, 'in');, as that's your target element?

[danielkoptak]

hey @w00fz, the previous code turned out to be a bad choice. I currently chose access using the html snippet plugin. When I'm done I'll send the code of my solution, but now I'm working on how to use setData function without modifying the ckeditor code in any way...:

var result=` 
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
</ul>`;
    nextgenEditor.editor.setData(result);

after inserting the content, the result in the editor changes to:

<ul class="navbar-nav mr-auto mb-2 mb-lg-0"><a class="nav-link active" href="#" aria-current="page"><p><a href="#" class="ck-link_selected">Home</a></p></a></ul>

Is it possible to prevent this behavior?

[danielkoptak]

and another question ... how can I customize decorators in nextgenEditor?
example: decorators

[danielkoptak]

hey @w00fz, the previous code turned out to be a bad choice. I currently chose access using the html snippet plugin. When I'm done I'll send the code of my solution, but now I'm working on how to use setData function without modifying the ckeditor code in any way...:

var result=` 
<ul class="navbar-nav mr-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
</ul>`;
    nextgenEditor.editor.setData(result);

after inserting the content, the result in the editor changes to:

<ul class="navbar-nav mr-auto mb-2 mb-lg-0"><a class="nav-link active" href="#" aria-current="page"><p><a href="#" class="ck-link_selected">Home</a></p></a></ul>

Is it possible to prevent this behavior?

Isn't there really an easy solution to force ckeditor to insert html without any changes? function: nextgenEditor.editor.setData();

I want the user to be able to edit a real preview of the page. But this is not possible when the editor is editing my code ...

[w00fz]

This is a little beyond NextGen Editor, what you are trying to do is purely dependent on the CK5 editor API, and being so specific to your needs, it's hard for me to provide a fully working example for what you are trying to achieve.
NextGen does a lot on top of CK5 but the underlying API is left untouched and is exposed for these type of customizations.

One thing I tried that might work for you is to create a view and model fragment out of your HTML snippet, and then insert it into the editor. Something like this:

const viewFragment = nextgenEditor.editor.data.processor.toView(result);
const modelFragment = nextgenEditor.editor.data.toModel(viewFragment);
nextgenEditor.editor.model.insertContent(modelFragment);

If this still does not help, maybe you could try inserting the snippet as HTML snippet, exactly like in your screenshot (second example), that way the user can edit and preview, and it will save as raw HTML. This will require you enable the HTML Snippets preview option, but it looks like you already have it that way:

nextgenEditor.editor.execute('insertHtmlEmbed');
nextgenEditor.editor.execute('updateHtmlEmbed', result);

If this does not help either, I would suggest trying the CK5 forums/chat where I'm sure more experienced people will be able to provide this level of support.

Be aware that the next release of NextGen Editor (v1.1.0) is going to support multiple instances of the editor and so the API nextgenEditor.editor will become obsolete (although I am going to keep it around for backward compatibility. It will reference the first editor found).

The new API exposed is going to be nextgenEditor.editors (note the plural), which will be an array of all the available instances.

Note: I have transferred this issue into a more pertinent discussion and it might also be more useful for people looking for some similar solution