Add selection size to status bar when there are selections

src/components/App.vue

@@ -16,6 +16,7 @@
             return {
                 line: 1,
                 column: 1,
+                selectionSize: 0,
                 language: "plaintext",
                 languageAuto: true,
                 theme: window.darkMode.initial,
@@ -71,9 +72,9 @@
             },
 
             onCursorChange(e) {
-                //console.log("onCursorChange:", e)
                 this.line = e.cursorLine.line
                 this.column = e.cursorLine.col
+                this.selectionSize = e.selectionSize
                 this.language = e.language
                 this.languageAuto = e.languageAuto
             },
@@ -117,6 +118,7 @@
         <StatusBar 
             :line="line" 
             :column="column" 
+            :selectionSize="selectionSize"
             :language="language" 
             :languageAuto="languageAuto"
             :theme="theme"

src/components/Editor.vue

@@ -32,6 +32,7 @@
                 //console.log("selectionChange:", e)
                 this.$emit("cursorChange", {
                     cursorLine: e.cursorLine,
+                    selectionSize: e.selectionSize,
                     language: e.language,
                     languageAuto: e.languageAuto,
                 })

src/components/StatusBar.vue

@@ -9,6 +9,7 @@
         props: [
             "line", 
             "column", 
+            "selectionSize",
             "language", 
             "languageAuto",
             "theme",
@@ -46,6 +47,9 @@
         <div class="status-block line-number">
             Ln <span class="num">{{ line }}</span>
             Col <span class="num">{{ column }}</span>
+            <template v-if="selectionSize > 0">
+                Sel <span class="num">{{ selectionSize }}</span>
+            </template>
         </div>
         <div class="spacer"></div>
         <div 

src/editor/block/block.js

@@ -295,6 +295,20 @@ export const blockLineNumbers = lineNumbers({
     }
 })
 
+
+function getSelectionSize(state, sel) {
+    let count = 0
+    let numBlocks = 0
+    for (const block of state.facet(blockState)) {
+        if (sel.from <= block.range.to && sel.to > block.range.from) {
+            count += Math.min(sel.to, block.content.to) - Math.max(sel.from, block.content.from)
+            numBlocks++
+        }
+    }
+    count += (numBlocks - 1) * 2 // add 2 for each block separator
+    return count
+}
+
 const emitCursorChange = (editor) => ViewPlugin.fromClass(
     class {
         update(update) {
@@ -303,10 +317,16 @@ const emitCursorChange = (editor) => ViewPlugin.fromClass(
             const langChange = update.transactions.some(tr => tr.annotations.some(a => a.value == LANGUAGE_CHANGE))
             if (update.selectionSet || langChange) {
                 const cursorLine = getBlockLineFromPos(update.state, update.state.selection.main.head)
+                
+                const selectionSize = update.state.selection.ranges.map(
+                    (sel) => getSelectionSize(update.state, sel)
+                ).reduce((a, b) => a + b, 0)
+
                 const block = getActiveNoteBlock(update.state)
                 if (block && cursorLine) {
                     editor.element.dispatchEvent(new SelectionChangeEvent({
                         cursorLine,
+                        selectionSize,
                         language: block.language.name,
                         languageAuto: block.language.auto,
                     }))

src/editor/event.js

@@ -1,7 +1,8 @@
 export class SelectionChangeEvent extends Event {
-    constructor({cursorLine, language, languageAuto}) {
+    constructor({cursorLine, language, languageAuto, selectionSize}) {
         super("selectionChange")
         this.cursorLine = cursorLine
+        this.selectionSize = selectionSize
         this.language = language
         this.languageAuto = languageAuto
     }