joplin-plugin-minimap 1.1.3 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin-plugin-minimap",
-  "version": "1.1.3",
+  "version": "1.1.6",
   "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.3",
+	"version": "1.1.6",
 	"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

@@ -19,12 +19,44 @@
 		}).catch(function () { /* keep defaults (e.g. print/export context) */ });
 	}
 
+	// NEVER run inside an editable context (the Rich Text editor renders
+	// notes through the same pipeline and would execute this asset). If the
+	// nav lands in the RTE document, Joplin's HTML->markdown round-trip
+	// SERIALIZES it into the note body on save - the heading list becomes
+	// real note content and syncs to every device. This was the true root
+	// cause of the "outline below the document" reports.
+	function isEditableContext() {
+		var b = document.body;
+		if (!b) return false;
+		if (b.isContentEditable) return true;
+		if (b.id === 'tinymce') return true;
+		if (b.classList && b.classList.contains('mce-content-body')) return true;
+		return false;
+	}
+	if (isEditableContext()) return;
+
 	// Only ever install one instance of the watcher per webview session.
 	if (window.__jpMinimapInstalled) return;
 	window.__jpMinimapInstalled = true;
 
 	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
@@ -68,6 +100,12 @@
 
 	function build() {
 		if (cleanup) { cleanup(); cleanup = null; }
+		if (isEditableContext()) {
+			var stale = document.getElementById('jp-minimap');
+			if (stale) stale.remove();
+			return;
+		}
+		ensureStyle();
 
 		var old = document.getElementById('jp-minimap');
 		if (old) old.remove();
@@ -191,6 +229,16 @@
 		// Joplin fires this after each note render/update.
 		document.addEventListener('joplin-noteDidUpdate', scheduleBuild);
 
+		// Joplin's asset cleanup can remove our <style> from <head> AFTER the
+		// last body mutation - nothing rebuilds, and the nav sits unstyled in
+		// the page (the "outline below the document" bug, second incarnation:
+		// v1.1.4 only re-checked the style during rebuilds). Watch the head
+		// and re-inject immediately.
+		var headObserver = new MutationObserver(function () {
+			if (!document.getElementById('jp-minimap-style')) ensureStyle();
+		});
+		if (document.head) headObserver.observe(document.head, { childList: true });
+
 		// Fallback: watch for the rendered content being swapped out
 		// (note switch replaces the DOM without re-running this script).
 		var mo = new MutationObserver(function (mutations) {

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,115 +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);
-}
-
-/* No scrollbar in the expanded panel: the wheel handler owns scrolling,
- * and a visible scrollbar at the panel edge invites overlay-scrollbar
- * style hover/click interference. */
-.jp-mm-list::-webkit-scrollbar { display: none; }
-.jp-mm-list { scrollbar-width: none; }
-
-/* don't show over printed/exported output */
-@media print {
-	#jp-minimap { display: none; }
-}