Milestone/3.2

index.html

@@ -143,7 +143,9 @@ <h3>Project Files</h3>
       </div>
 
       <footer class="footer">
-        <div class="footer-left"></div>
+        <div class="footer-left">
+          <span id="metricStats" class="metrics"></span>
+        </div>
         <div class="footer-center">
           <span id="versionTag" class="version"></span>
         </div>

main.js

@@ -53,6 +53,7 @@ function createWindow() {
       contextIsolation: true,
       nodeIntegration: false,
       sandbox: false,
+      spellcheck: true, // enables right click window
     },
     // Use a frameless window so we can render a custom SnapDock titlebar
     frame: false,
@@ -74,6 +75,26 @@ function createWindow() {
       event.preventDefault();
     }
   });
+  // NEW: right click window
+  const { Menu } = require("electron");
+
+  mainWindow.webContents.on("context-menu", (_event, params) => {
+    // Only show menu for editable elements (textarea, input)
+    if (!params.isEditable) return;
+
+    const menu = Menu.buildFromTemplate([
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      { type: "separator" },
+      { role: "selectAll" },
+    ]);
+
+    menu.popup({ window: mainWindow });
+  });
 
   // Unsaved changes / workspace dirty failsafe
   mainWindow.on("close", (event) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "snapdock",
-  "version": "3.1.2",
+  "version": "3.2.2",
   "description": "A Minimal, Modern Markdown Editor",
   "synopsis": "Fast, clean Markdown editor",
   "homepage": "https://snapdock.app",

src/modules/file/tabs.js

@@ -1,5 +1,6 @@
 // src/modules/file/tabs.js
 import { saveCurrentFile } from "./operations.js";
+import { updateMetrics } from "../ui/metrics.js";
 
 let tabs = [];
 let activeTabId = null;
@@ -104,6 +105,8 @@ export function switchToTab(tabId) {
   if (!next || !editor) return;
 
   editor.value = next.content;
+  // update metrics call
+  updateMetrics();
 
   const filenameEl = document.getElementById("filenameDisplay");
   if (filenameEl) filenameEl.textContent = next.title;

src/modules/markdown.js

@@ -8,6 +8,7 @@ import sub from "markdown-it-sub";
 import sup from "markdown-it-sup";
 import container from "markdown-it-container";
 import hljs from "highlight.js";
+import { full as emoji } from "markdown-it-emoji";
 
 // MarkdownIt Instance
 
@@ -32,6 +33,7 @@ md.use(taskLists, { enabled: true });
 md.use(mark);
 md.use(sub);
 md.use(sup);
+md.use(emoji);
 
 md.use(anchor, {
   level: [1, 2, 3, 4]
@@ -44,7 +46,6 @@ md.use(mila, {
   }
 });
 
-// Custom containers (:::note, :::warning, :::tip)
 ["note", "warning", "tip"].forEach(type => {
   md.use(container, type, {
     render(tokens, idx) {
@@ -58,6 +59,21 @@ md.use(mila, {
   });
 });
 
+// Special handling for "info"
+md.use(container, "info", {
+  validate: function(params) {
+    return params.trim().match(/^info$/);
+  },
+  render: function(tokens, idx) {
+    const token = tokens[idx];
+    if (token.nesting === 1) {
+      return `<div class="md-info">`;
+    } else {
+      return `</div>`;
+    }
+  }
+});
+
 // Exported Renderer
 
 export function renderMarkdown(text) {

src/modules/ui/metrics.js

@@ -0,0 +1,35 @@
+// src/modules/ui/metrics.js
+
+let editorRef = null;
+let elRef = null;
+
+export function initMetrics(editor) {
+  editorRef = editor;
+  elRef = document.getElementById("metricStats");
+
+  if (!editorRef || !elRef) return;
+
+  // Attach listeners
+  editorRef.addEventListener("input", updateMetrics);
+  editorRef.addEventListener("click", updateMetrics);
+  editorRef.addEventListener("keyup", updateMetrics);
+
+  updateMetrics(); // initial render
+}
+
+export function updateMetrics() {
+  if (!editorRef || !elRef) return;
+
+  const value = editorRef.value;
+
+  const totalChars = value.length;
+  const totalWords = value.trim().split(/\s+/).filter(Boolean).length;
+
+  const cursorPos = editorRef.selectionStart;
+  const textBeforeCursor = value.slice(0, cursorPos);
+
+  const line = textBeforeCursor.split("\n").length;
+  const column = cursorPos - textBeforeCursor.lastIndexOf("\n");
+
+  elRef.textContent = `Ln ${line}, Col ${column} • ${totalWords} words • ${totalChars} chars`;
+}

src/scripts.js

@@ -8,6 +8,7 @@ import { openFileDialog } from "./modules/file/open.js";
 import { respondToDirtyStateRequest } from "./modules/system/dirtyState.js";
 import { save_all_tabs } from "./modules/file/tabs.js";
 import { initDropdownToggles, initToolsDropdown } from "./modules/ui/dropdownMenus.js";
+import { initMetrics } from "./modules/ui/metrics.js";
 
 // Helper
 function byId(id) {
@@ -57,4 +58,8 @@ window.addEventListener("DOMContentLoaded", () => {
   // File Open Button (inside the Open dropdown — same ID)
   byId("openFileBtnTop")?.addEventListener("click", openFileDialog);
 
+  // metrics for footer
+  const editor = document.getElementById("markdownInputMain");
+  initMetrics(editor);
+
 });

src/styles/components/footer.css

@@ -17,17 +17,27 @@
   align-items: center;
   padding: 0 12px;
   z-index: 9999; /* Ensure it stays above the scrolling workspace */
+  position: relative;
 }
 
 .footer-left,
-.footer-center,
 .footer-right {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
+.footer-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 /* Version & Status Text */
+.metrics,
 .version {
   opacity: 0.6;
   font-family: var(--font-mono); /* Monospace looks great in status bars */