gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-04 22:44:25 +01:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Updated Custom widget (markdown)

Elian Doran 2025-10-30 09:28:06 +02:00
parent 790611d9c4
commit 6c1f30243e
1 changed files with 1 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
Custom-widget.md

@ -1,95 +1 @@
It's possible to create custom widget in three possible locations where you can display your custom content. See https://github.com/TriliumNext/Trilium/wiki/Custom-widget.
Positions are:
* `left-pane`
* `center-pane`
* `note-detail-pane` - located within `center-pane`, but specific to note (split)
* `right-pane`
## Example - word count widget
Create a code note of type JS frontend and **give it a `#widget` label**.
```javascript
/*
* This defines a custom widget which displays number of words and characters in a current text note.
* To be activated for a given note, add label 'wordCount' to the note, you can also make it inheritable and thus activate it for the whole subtree.
*
* See it in action in "Books" and its subtree.
*/
const TPL = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;">
<strong>Word count: </strong>
<span class="word-count"></span>
&nbsp;
<strong>Character count: </strong>
<span class="character-count"></span>
</div>`;
class WordCountWidget extends api.NoteContextAwareWidget {
static get parentWidget() { return 'center-pane'; }
get position() { return 100; } // higher value means position towards the bottom/right
isEnabled() {
return super.isEnabled()
&& this.note.type === 'text'
&& this.note.hasLabel('wordCount');
}
doRender() {
this.$widget = $(TPL);
this.$wordCount = this.$widget.find('.word-count');
this.$characterCount = this.$widget.find('.character-count');
return this.$widget;
}
async refreshWithNote(note) {
const {content} = await note.getNoteComplement();
const text = $(content).text(); // get plain text only
const counts = this.getCounts(text);
this.$wordCount.text(counts.words);
this.$characterCount.text(counts.characters);
}
getCounts(text) {
const chunks = text
.split(/[\s-+:,/\\]+/)
.filter(chunk => chunk !== '');
let words;
if (chunks.length === 1 && chunks[0] === '') {
words = 0;
}
else {
words = chunks.length;
}
const characters = chunks.join('').length;
return {words, characters};
}
async entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteContentReloaded(this.noteId)) {
this.refresh();
}
}
}
module.exports = WordCountWidget;
```
After you make changes it is necessary to restart Trilium so that the layout can be rebuilt.
### Example screenshot
On the bottom you can see the resulting widget:
![](https://user-images.githubusercontent.com/617641/84592613-4a426e00-ae47-11ea-9d9f-fbe59ac976a1.png)