Commit file using custom editor

[Glib]

Hi, 

I'm developing connect plugin for Bitbucket Cloud which adds a custom file viewer and editor. 

Its pretty straightforward to add those 2 but I'm stuck now with committing the file once edited in custom editor as I'm not able to access resources outside editor iframe. 

In the connect Json I'm adding editor module

"fileEditors": [{
    "key": "custom-editor",
    "name": {
    "value": "Custom view"
    }, 
    "url": "/custom-editor.html?repo={repo_uuid}&cset={file_cset}&path={file_path}&name={file_name}",
    "file_matches" : {
    "extensions" : [ "custom-extension" ]
   }
}]

Is the any sort of event I can trigger when the editor content has changed in order to commit the file? 

Thanks,

Glib

[seanaty · Accepted solution]

Hi Glib,

Here is a example of the events that your app can emit and listen for. In this example there is a <textarea id=source> on the page.

You can use `editor.getSourceFRomHost` to get the file contents. and `editor.emit('change', 'new source')` to trigger a change.

AP.require(['editor'], function (editor) {
  $(function () {
    var $source = $('#source');

    editor.getSourceFromHost(function (source) {
      $source.val(source);
    });

    var change = function () {
      editor.emit('change', $source.val());
    };

    $source.change(change);
    $source.keyup(change);

    editor.addListener('reset', function (source) {
      $source.val(source);
    });

    editor.addListener('focus', function () {
      console.log('focus')
    });
    editor.addListener('refresh', function () {
      console.log('refresh')
    });
    editor.addListener('disable', function () {
      console.log('disable')
    });
    editor.addListener('enabled', function () {
      console.log('enable')
    });

    editor.emit('load');
  });
});

[Glib]

Hi @seanaty ,

Cant be more grateful for your help! That is exactly what I was looking for!

Regards,

Glib