Hello,
I’ve developed a Confluence plugin that adds a new tab to the “Insert Link” dialog box. My goal is to replicate the behavior of the “Advanced” tab in terms of how the link insertion works. Specifically,
The tab I created has a button that opens an external URL that provides Confluence with the document name and URL link of the document selected by the user. The document name is currently inserted into the Link box and I want the document name to also be stored in the “Link Text” box of the dialog box.
I am currently encountering an issue where after the document name is inserted into the Link box then the content is not copied to the link text box and the Insert button is inactive and cannot be clicked.
Here is a snippet of my JavaScript code:
AJS.bind(“dialog-created.link-browser”, function (e, linkBrowser) {
var key = ‘my-custom-tab’;
var thisPanel;
var tab;
tab = linkBrowser.tabs[key] = {
createPanel: function (context) {
thisPanel = context.baseElement;
thisPanel.html(Confluence.Templates.LinkBrowser.myCustomPanel());
var loadMyContentButton = thisPanel.find("#load-my-content-button");
var linkNameField = thisPanel.find("#link-name");
var linkTextField = thisPanel.find("#alias");
tab.linkBrowser = linkBrowser;
tab.linkNameField = linkNameField;
tab.linkTextField = linkTextField;
if (!window._isMyEventExist) {
window.addEventListener("message", function (event) {
try {
let data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
var itemName = data.itemName;
var itemUrl = data.itemUrl;
itemName = decodeURIComponent(itemName);
if (tab.linkNameField.length) {
tab.linkNameField.val(itemName).trigger('input').trigger('change');
console.log('Item name inserted into link: ', itemName);
}
if (tab.linkTextField.length) {
tab.linkTextField.val(itemName).trigger('input').trigger('change');
console.log('Item name inserted into alias: ', itemName);
}
var insertButton = linkBrowser.dialog.find(".button-panel-submit-button");
if (tab.linkNameField.val() && itemUrl) {
insertButton.prop('disabled', false).removeClass('disabled');
console.log('Insert button enabled');
} else {
insertButton.prop('disabled', true).addClass('disabled');
}
if (linkBrowser) {
const linkObj = {
url: itemUrl,
text: itemName,
};
linkBrowser.setLink(linkObj);
}
} catch (error) {
console.log('Error handling data:', error, event.data);
}
});
window._isMyEventExist = true;
}
loadMyContentButton.click(function (e) {
e.preventDefault();
window._myContentWindowRef = window.open(
"http://localhost:8000/my-content-provider.html?origin=",
"_blank",
"width=805,height=605"
);
});
},
onSelect: function () {
this.linkNameField = AJS.$("#link-name");
this.linkTextField = AJS.$("#alias");
},
onDeselect: function () { },
handlesLink: function (linkObj) {
return false;
}
};
});