self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Doc: Update TOC plugin (#4708)

Browse Source
This commit is contained in:
iamtalwinder 2021-03-26 14:40:06 +05:30 committed by GitHub
parent 49e6b5cf62
commit 99b55129f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app-cli/tests/support/plugins/toc/src/index.ts
View File

@ -42,13 +42,13 @@ joplin.plugins.register({
onStart: async function() { onStart: async function() {
const panels = joplin.views.panels; const panels = joplin.views.panels;
const view = await (panels as any).create(); const view = await panels.create("panel_1");
await panels.setHtml(view, 'Loading...'); await panels.setHtml(view, 'Loading...');
await panels.addScript(view, './webview.js'); await panels.addScript(view, './webview.js');
await panels.addScript(view, './webview.css'); await panels.addScript(view, './webview.css');
panels.onMessage(view, (message:any) => { await panels.onMessage(view, (message:any) => {
if (message.name === 'scrollToHash') { if (message.name === 'scrollToHash') {
joplin.commands.execute('scrollToHash', message.hash) joplin.commands.execute('scrollToHash', message.hash)
} }
@ -88,7 +88,7 @@ joplin.plugins.register({
updateTocView(); updateTocView();
}); });
joplin.workspace.onNoteContentChange(() => { joplin.workspace.onNoteChange(() => {
updateTocView(); updateTocView();
}); });
@ -97,8 +97,8 @@ joplin.plugins.register({
label: 'Toggle TOC', label: 'Toggle TOC',
iconName: 'fas fa-drum', iconName: 'fas fa-drum',
execute: async () => { execute: async () => {
const isVisible = await (panels as any).visible(view); const isVisible = await panels.visible(view);
(panels as any).show(view, !isVisible); await panels.show(view, !isVisible);
}, },
}); });

11
readme/api/tutorials/toc_plugin.md
View File

@ -66,7 +66,7 @@ joplin.plugins.register({
// This event will be triggered when the content of the note changes // This event will be triggered when the content of the note changes
// as you also want to update the TOC in this case. // as you also want to update the TOC in this case.
await joplin.workspace.onNoteContentChange(() => { await joplin.workspace.onNoteChange(() => {
updateTocView(); updateTocView();
}); });
@ -171,7 +171,7 @@ joplin.plugins.register({
onStart: async function() { onStart: async function() {
// Create the panel object // Create the panel object
const panel = await joplin.views.panels.create(); const panel = await joplin.views.panels.create('panel_1');
// Set some initial content while the TOC is being created // Set some initial content while the TOC is being created
await joplin.views.panels.setHtml(panel, 'Loading...'); await joplin.views.panels.setHtml(panel, 'Loading...');
@ -228,7 +228,7 @@ Now run the plugin again and you should see the TOC dynamically updating as you
In order to better integrate the TOC to Joplin, you might want to style it using CSS. To do so, first add a `webview.css` file next to `index.ts`, then you will need to let Joplin know about this file. This is done using the `addScript()` function (which is also used to add JavaScript files as we'll see later), like so: In order to better integrate the TOC to Joplin, you might want to style it using CSS. To do so, first add a `webview.css` file next to `index.ts`, then you will need to let Joplin know about this file. This is done using the `addScript()` function (which is also used to add JavaScript files as we'll see later), like so:
```typescript ```typescript
const panel = await joplin.views.panels.create(); const panel = await joplin.views.panels.create('panel_1');
// Add the CSS file to the view, right after it has been created: // Add the CSS file to the view, right after it has been created:
await joplin.views.panels.addScript(panel, './webview.css'); await joplin.views.panels.addScript(panel, './webview.css');
``` ```
@ -261,8 +261,7 @@ The next step is to make the TOC interactive so that when the user clicks on a l
```typescript ```typescript
// In index.ts // In index.ts
const panel = await joplin.views.panels.create('panel_1');
const panel = joplin.views.createWebviewPanel();
await joplin.views.panels.addScript(panel, './webview.css'); await joplin.views.panels.addScript(panel, './webview.css');
await joplin.views.panels.addScript(panel, './webview.js'); // Add the JS file await joplin.views.panels.addScript(panel, './webview.js'); // Add the JS file
``` ```
@ -314,7 +313,7 @@ Then from the plugin, in `src/index.ts`, you can listen to this message using th
```typescript ```typescript
joplin.plugins.register({ joplin.plugins.register({
onStart: async function() { onStart: async function() {
const panel = await joplin.views.panels.create(); const panel = await joplin.views.panels.create('panel_1');
// ... // ...