Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

Commit file using custom editor

Glib September 11, 2019 edited

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

1 answer

1 accepted

1 vote
Answer accepted
seanaty
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
September 11, 2019

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 September 12, 2019

Hi @seanaty ,

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

Regards,

Glib

Suggest an answer

Log in or Sign up to answer
TAGS
atlassian, forge, forge learning path, atlassian learning, cloud app development, forge app development, build forge apps, atlassian certification, developer training, jira app development, confluence app development, automation, ui frameworks

Turn Ideas into Atlassian Apps 📱

From setup to deployment—this learning path shows you how to build your first app using Forge. Learn the essentials, streamline workflows, and bring custom solutions to life across Jira, Confluence, and more.

Start Learning
AUG Leaders

Atlassian Community Events