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

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');
  });
});