joplin-plugin-minimap 1.1.1 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-minimap",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "A hover-to-expand table of contents minimap for the Joplin note viewer",
   "author": "lim0513",
   "homepage": "https://github.com/lim0513/joplin-minimap",

package/publish/manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 1,
 	"id": "com.github.joplin-minimap",
 	"app_min_version": "2.8",
-	"version": "1.1.1",
+	"version": "1.1.4",
 	"name": "Joplin Minimap",
 	"description": "A hover-to-expand table of contents minimap for the note viewer. Shows heading tick marks on the right edge; hover to expand into a full ToC, click to jump.",
 	"author": "lim0513",

package/publish/minimap-view.js

@@ -25,8 +25,66 @@
 
 	var cleanup = null; // removes listeners belonging to the current build
 
+	// The stylesheet is injected BY THIS SCRIPT and re-checked on every build.
+	// Rationale: Joplin can re-render the document in ways that drop injected
+	// asset stylesheets while this script's watcher survives - the rebuilt nav
+	// then renders UNSTYLED as flow content below the note (looks like a
+	// duplicated outline under the document). Keeping the CSS inline and
+	// re-injecting guarantees the nav and its styling live and die together.
+	var MINIMAP_CSS = "/* Joplin Minimap \u2014 collapsed tick bars, hover-expanded ToC panel.\n * Colors use currentColor / rgba so it follows both light and dark themes.\n */\n\n#jp-minimap {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tcaret-color: transparent;\n\tcursor: default;\n\tposition: fixed;\n\ttop: 50%;\n\tright: 6px;\n\ttransform: translateY(-50%);\n\tz-index: 9999;\n\tfont-size: 12.5px;\n\tline-height: 1.35;\n\tcolor: inherit;\n}\n\n.jp-mm-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\tpadding: 8px 6px;\n\tmax-height: 84vh;\n\toverflow: hidden;\n\tborder-radius: 10px;\n\ttransition: background 0.15s ease, box-shadow 0.15s ease;\n}\n\n.jp-mm-item {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\tpadding: 3px 4px;\n\tborder-radius: 6px;\n\ttext-decoration: none;\n\tcolor: inherit;\n\topacity: 0.5;\n\tcursor: pointer;\n\toutline: none;\n}\n\n/* ---- collapsed state: tick bars, width by heading level ---- */\n\n.jp-mm-bar {\n\tdisplay: block;\n\theight: 2px;\n\tborder-radius: 1px;\n\tbackground: currentColor;\n}\n\n.jp-mm-l1 .jp-mm-bar { width: 18px; }\n.jp-mm-l2 .jp-mm-bar { width: 13px; }\n.jp-mm-l3 .jp-mm-bar { width: 9px; }\n.jp-mm-l4 .jp-mm-bar { width: 7px; }\n.jp-mm-l5 .jp-mm-bar { width: 5px; }\n.jp-mm-l6 .jp-mm-bar { width: 5px; }\n\n.jp-mm-label { display: none; }\n\n/* ---- expanded state (hover) ---- */\n\n#jp-minimap:hover .jp-mm-list {\n\talign-items: stretch;\n\toverflow-y: auto;\n\toverscroll-behavior: contain;\n\tbackground: rgba(127, 127, 127, 0.16);\n\tbackdrop-filter: blur(10px);\n\t-webkit-backdrop-filter: blur(10px);\n\tbox-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);\n}\n\n#jp-minimap:hover .jp-mm-bar { display: none; }\n\n#jp-minimap:hover .jp-mm-item { justify-content: flex-start; }\n\n#jp-minimap:hover .jp-mm-label {\n\tdisplay: block;\n\tmax-width: var(--jp-mm-width, 240px);\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n/* indent by heading level when expanded */\n#jp-minimap:hover .jp-mm-l2 { padding-left: 16px; }\n#jp-minimap:hover .jp-mm-l3 { padding-left: 28px; }\n#jp-minimap:hover .jp-mm-l4 { padding-left: 40px; }\n#jp-minimap:hover .jp-mm-l5 { padding-left: 52px; }\n#jp-minimap:hover .jp-mm-l6 { padding-left: 52px; }\n\n/* ---- shared states ---- */\n\n.jp-mm-item:hover {\n\topacity: 1;\n\tbackground: rgba(127, 127, 127, 0.22);\n}\n\n.jp-mm-active { opacity: 1; }\n\n#jp-minimap:hover .jp-mm-active {\n\tbackground: rgba(127, 127, 127, 0.18);\n}\n\n/* No scrollbar in the expanded panel: the wheel handler owns scrolling,\n * and a visible scrollbar at the panel edge invites overlay-scrollbar\n * style hover/click interference. */\n.jp-mm-list::-webkit-scrollbar { display: none; }\n.jp-mm-list { scrollbar-width: none; }\n\n/* don't show over printed/exported output */\n@media print {\n\t#jp-minimap { display: none; }\n}\n";
+
+	function ensureStyle() {
+		if (document.getElementById('jp-minimap-style')) return;
+		var styleEl = document.createElement('style');
+		styleEl.id = 'jp-minimap-style';
+		styleEl.textContent = MINIMAP_CSS;
+		(document.head || document.documentElement).appendChild(styleEl);
+	}
+
+	// Clicking the minimap gives the webview focus, which can make Joplin
+	// re-render the whole note. That detaches every heading element we hold,
+	// and scrollIntoView on a detached node is a silent no-op. So jumps are
+	// index/text-based against the LIVE DOM, and if a rebuild happens right
+	// after a click (the re-render case), the jump is re-applied afterwards.
+	var pendingJump = null; // { index, text, until }
+
+	function liveHeadings() {
+		var root = document.getElementById('rendered-md') || document.body;
+		return Array.prototype.slice.call(root.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+	}
+
+	function jumpTo(index, text) {
+		var hs = liveHeadings();
+		var h = hs[index];
+		if (!h || (text && (h.textContent || '').trim() !== text)) {
+			for (var i = 0; i < hs.length; i++) {
+				if ((hs[i].textContent || '').trim() === text) { h = hs[i]; break; }
+			}
+		}
+		if (h && h.isConnected) h.scrollIntoView({ behavior: 'smooth', block: 'start' });
+	}
+
+	// Width of the note viewer's right-edge scrollbar zone. Overlay scrollbars
+	// (e.g. Windows 11) reserve no layout space but still intercept clicks with
+	// priority over page content, so when nothing is measurable we keep a safety
+	// gap anyway. The minimap must stay clear of that zone or clicks on the
+	// rightmost part of the panel silently hit the scrollbar instead.
+	function scrollbarGap(root) {
+		var gap = 0;
+		var node = root;
+		while (node && node !== document.documentElement) {
+			if (node.scrollHeight > node.clientHeight + 1) {
+				var w = node.offsetWidth - node.clientWidth;
+				if (w > gap) gap = w;
+			}
+			node = node.parentElement;
+		}
+		return gap > 0 ? gap : 14;
+	}
+
 	function build() {
 		if (cleanup) { cleanup(); cleanup = null; }
+		ensureStyle();
 
 		var old = document.getElementById('jp-minimap');
 		if (old) old.remove();
@@ -39,12 +97,18 @@
 
 		var nav = document.createElement('nav');
 		nav.id = 'jp-minimap';
-		nav.style.right = settings.rightOffset + 'px';
+		// Applied in BOTH collapsed and expanded states: shifting only on hover
+		// would move the panel out from under the cursor and cause a
+		// hover/unhover flicker loop.
+		nav.style.right = (settings.rightOffset + scrollbarGap(root)) + 'px';
 		nav.style.setProperty('--jp-mm-width', settings.panelWidth + 'px');
 		// The viewer DOM can be editable in some contexts; make sure the
 		// minimap never shows a caret or accepts keyboard input.
+		// NOTE: no preventDefault on mousedown! Blocking the default mouse-focus
+		// path makes Joplin's later programmatic focus count as keyboard-like,
+		// and the browser then draws a :focus-visible ring on the scroll
+		// container. Natural mouse focus never shows a ring.
 		nav.setAttribute('contenteditable', 'false');
-		nav.addEventListener('mousedown', function (e) { e.preventDefault(); });
 		// Own the wheel entirely while the cursor is over the minimap:
 		// scroll the ToC list ourselves and never let the event chain
 		// through to the note underneath (scroll chaining feels erratic).
@@ -56,7 +120,7 @@
 		var list = document.createElement('div');
 		list.className = 'jp-mm-list';
 
-		var items = headings.map(function (h) {
+		var items = headings.map(function (h, index) {
 			var level = Number(h.tagName.charAt(1));
 
 			// NOT an <a>: Joplin's viewer shows a "Ctrl+click to open" tooltip
@@ -74,8 +138,17 @@
 			item.appendChild(bar);
 			item.appendChild(label);
 
-			item.addEventListener('click', function () {
-				h.scrollIntoView({ behavior: 'smooth', block: 'start' });
+			// MOUSEDOWN, not click: the press gives the webview focus, Joplin may
+			// re-render the note, and our panel gets rebuilt BETWEEN mousedown and
+			// mouseup - so the click event (which needs the same target for both)
+			// never fires. mousedown runs before any of that can happen.
+			item.addEventListener('mousedown', function (e) {
+				if (e.button !== 0) return;
+				var text = (label.textContent || '').trim();
+				// If the press triggers a note re-render, the rebuild will
+				// re-apply this jump against the fresh DOM.
+				pendingJump = { index: index, text: text, until: Date.now() + 1200 };
+				jumpTo(index, text);
 			});
 
 			list.appendChild(item);
@@ -98,6 +171,13 @@
 		document.addEventListener('scroll', updateActive, { passive: true, capture: true });
 		updateActive();
 
+		// A rebuild arriving right after a click means the note was re-rendered
+		// and the original scrollIntoView hit a detached node - redo the jump.
+		if (pendingJump && Date.now() < pendingJump.until) {
+			jumpTo(pendingJump.index, pendingJump.text);
+			pendingJump = null;
+		}
+
 		cleanup = function () {
 			document.removeEventListener('scroll', updateActive, { capture: true });
 		};

package/publish/minimapContentScript.js

@@ -10,8 +10,10 @@ module.exports = {
 				// intentionally empty — rendering is untouched
 			},
 			assets: function () {
+				// CSS is injected by minimap-view.js itself (see ensureStyle) so
+				// that a re-render which drops asset stylesheets cannot leave an
+				// unstyled nav in the document flow.
 				return [
-					{ name: 'minimap.css' },
 					{ name: 'minimap-view.js' },
 				];
 			},

package/publish/minimap.css

@@ -1,116 +0,0 @@
-/* Joplin Minimap — collapsed tick bars, hover-expanded ToC panel.
- * Colors use currentColor / rgba so it follows both light and dark themes.
- */
-
-#jp-minimap {
-	user-select: none;
-	-webkit-user-select: none;
-	caret-color: transparent;
-	cursor: default;
-	position: fixed;
-	top: 50%;
-	right: 6px;
-	transform: translateY(-50%);
-	z-index: 9999;
-	font-size: 12.5px;
-	line-height: 1.35;
-	color: inherit;
-}
-
-.jp-mm-list {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
-	padding: 8px 6px;
-	max-height: 84vh;
-	overflow: hidden;
-	border-radius: 10px;
-	transition: background 0.15s ease, box-shadow 0.15s ease;
-}
-
-.jp-mm-item {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	padding: 3px 4px;
-	border-radius: 6px;
-	text-decoration: none;
-	color: inherit;
-	opacity: 0.5;
-	cursor: pointer;
-	outline: none;
-}
-
-/* ---- collapsed state: tick bars, width by heading level ---- */
-
-.jp-mm-bar {
-	display: block;
-	height: 2px;
-	border-radius: 1px;
-	background: currentColor;
-}
-
-.jp-mm-l1 .jp-mm-bar { width: 18px; }
-.jp-mm-l2 .jp-mm-bar { width: 13px; }
-.jp-mm-l3 .jp-mm-bar { width: 9px; }
-.jp-mm-l4 .jp-mm-bar { width: 7px; }
-.jp-mm-l5 .jp-mm-bar { width: 5px; }
-.jp-mm-l6 .jp-mm-bar { width: 5px; }
-
-.jp-mm-label { display: none; }
-
-/* ---- expanded state (hover) ---- */
-
-#jp-minimap:hover .jp-mm-list {
-	align-items: stretch;
-	overflow-y: auto;
-	overscroll-behavior: contain;
-	background: rgba(127, 127, 127, 0.16);
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
-	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);
-}
-
-#jp-minimap:hover .jp-mm-bar { display: none; }
-
-#jp-minimap:hover .jp-mm-item { justify-content: flex-start; }
-
-#jp-minimap:hover .jp-mm-label {
-	display: block;
-	max-width: var(--jp-mm-width, 240px);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-/* indent by heading level when expanded */
-#jp-minimap:hover .jp-mm-l2 { padding-left: 16px; }
-#jp-minimap:hover .jp-mm-l3 { padding-left: 28px; }
-#jp-minimap:hover .jp-mm-l4 { padding-left: 40px; }
-#jp-minimap:hover .jp-mm-l5 { padding-left: 52px; }
-#jp-minimap:hover .jp-mm-l6 { padding-left: 52px; }
-
-/* ---- shared states ---- */
-
-.jp-mm-item:hover {
-	opacity: 1;
-	background: rgba(127, 127, 127, 0.22);
-}
-
-.jp-mm-active { opacity: 1; }
-
-#jp-minimap:hover .jp-mm-active {
-	background: rgba(127, 127, 127, 0.18);
-}
-
-/* slim scrollbar in the expanded panel */
-.jp-mm-list::-webkit-scrollbar { width: 4px; }
-.jp-mm-list::-webkit-scrollbar-thumb {
-	background: rgba(127, 127, 127, 0.4);
-	border-radius: 2px;
-}
-
-/* don't show over printed/exported output */
-@media print {
-	#jp-minimap { display: none; }
-}