I'm trying to write a plugin that will show all incoming links to a Note. The excellent existing search function makes this very easy. My code as adapted from the TOC example:
import joplin from 'api';
function formatLink(note: any) {
return `<li>
<a class="incoming-item-link" href="#" data-slug="${note.id}">${note.title}</a>
</li>
`
}
joplin.plugins.register({
onStart: async function () {
// Create the panel object
const panel = await joplin.views.panels.create();
await joplin.views.panels.addScript(panel, './webview.js'); // Add the JS file
await joplin.views.panels.setHtml(panel, 'Loading...');
async function updateIncomingLinks() {
const note = await joplin.workspace.selectedNote();
if (note) {
const searchResults = await joplin.data.get(['search'], { query: `/${note.id}`, type: "note", fields: ["title", "id"] });
var incomingListHTML = [];
for (const note of searchResults) {
incomingListHTML.push(formatLink(note))
}
await joplin.views.panels.setHtml(panel, `
<div class="container">
Incoming links for note id ${note.id}
<br>
Incoming:
<ul>
${incomingListHTML.join('\n')}
</ul>
with length ${incomingListHTML.length}.
</div>
`);
} else {
await joplin.views.panels.setHtml(panel, 'Please select a note to view the incoming links.');
}
}
await joplin.workspace.onNoteSelectionChange(() => {
updateIncomingLinks();
});
await joplin.views.panels.onMessage(panel, (message) => {
if (message.name === 'scrolltoNote') {
// STUCK HERE
joplin.commands.execute('scrollToHash', message.hash)
}
});
// Also update the TOC when the plugin starts
updateIncomingLinks();
},
});
And in webview.js
document.addEventListener('click', event => {
const element = event.target;
if (element.className === 'incoming-item-link') {
// Post the message and slug info back to the plugin:
webviewApi.postMessage({
name: 'scrolltoNote',
hash: element.dataset.slug,
});
}
});
Looking through the Joplin Commands I can't seem to find the relevant command to trigger. Does that command exist? Can I somehow dispatch the NAV_GO
property from within the message handler?
Apologies if this is a very noob React/Electron/Node thing that I missed. Don't usually develop in this language but want to help extend Joplin with useful plugins for myself and too share with the community.