Thanks Kirill, I haven’t seen custom actions before, I’ll take a look.
Hi Chris!
Only one idea I have in mind is to use custom actions and open a modal window:
const urlRegExp = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*)/
async function previewLinkHandler({items}) {
const item = items[0];
const url = urlRegExp.exec(item.content)[0]
console.log(url)
await window.miro.board.ui.openModal({
url
});
}
window.miro.board.ui.on("custom:preview-link", previewLinkHandler);
window.miro.board.experimental.action.register({
"event": "preview-link",
"ui": {
"label": {
"en": "Preview link"
}
},
"scope": "local",
"predicate": {
"$and": [
{"type": "text"},
{"content": { "$regex": urlRegExp.source } }
]
},
"contexts": {
"item": {}
}
}
);
In the example I use the predicate to show the custom action only for items with type text and that has a URL in the content property. You can find the guidelines on how to use custom actions here: https://developers.miro.com/docs/add-custom-actions-to-your-app.