From 156c299896834582678960b678f81c31f3c52513 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 14 Jun 2020 14:01:55 +0200
Subject: [PATCH] Updated Custom Widget (markdown)

---
 Custom-Widget.md | 51 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/Custom-Widget.md b/Custom-Widget.md
index a7b1b93..1dab1bf 100644
--- a/Custom-Widget.md
+++ b/Custom-Widget.md
@@ -2,41 +2,70 @@ It's possible to create custom widget in three possible locations where you can
 
 Positions are:
 
-* left-pane
-* center-pane
-* right-pane
+*   left-pane
+*   center-pane
+*   right-pane
 
-## Example
+## Example - word count widget
 
 Create a code note of type JS frontend and give it `widget` label.
 
 ```javascript
-const TPL = `<div></div`;
+const TPL = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color);">
+    <strong>Word count: </strong>
+    <span class="word-count"></span>
 
-class TestWidget extends api.TabAwareWidget {
-    get position() { return 15; }
+    &nbsp;
+
+    <strong>Character count: </strong>
+    <span class="character-count"></span>
+</div`;
+
+class WordCountWidget extends api.TabAwareWidget {
+    get position() { return 100; } // higher value means position towards the bottom/right
     
     get parentWidget() { return 'center-pane'; }
     
     doRender() {
         this.$widget = $(TPL);
+        this.$wordCount = this.$widget.find('.word-count');
+        this.$characterCount = this.$widget.find('.character-count');
         return this.$widget;
     }
     
     async refreshWithNote(note) {
-        if (!note.hasOwnedLabel('showTestWidget')) { // show widget only on notes with this label
+        if (note.type !== 'text') { // show widget only on text notes
             this.toggleInt(false); // hide
             
             return;
         }
         
         this.toggleInt(true); // display
+        
+        const {content} = await note.getNoteComplement();
+        
+        const text = $(content).text(); // get plain text only
+        
+        const words = text.split(/\s+/);
 
-        this.$widget.empty().append($("Hello world!"));
+        this.$wordCount.text(words.length);
+        this.$characterCount.text(words.join('').length);
+    }
+    
+    async entitiesReloadedEvent({loadResults}) {
+        if (loadResults.isNoteContentReloaded(this.noteId)) {
+            this.refresh();
+        }
     }
 }
 
-module.exports = new TestWidget();
+module.exports = new WordCountWidget();
 ```
 
-After you make changes it is necessary to restart Trilium so that the layout can be rebuilt.
\ No newline at end of file
+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)
\ No newline at end of file