add rich-foot rendering to editing / live preview modes

jparkerweb · Oct 9, 2024 · 3c5ddc4 · 3c5ddc4
1 parent e705c7e
commit 3c5ddc4
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 85 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "id": "rich-foot",
     "name": "Rich Foot",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "minAppVersion": "0.12.0",
     "description": "Adds backlink tags and created/modified dates to the footer of your notes.",
     "author": "Justin Parker",

diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,4 @@
-const { Plugin, MarkdownView, debounce, Setting, PluginSettingTab } = require('obsidian');
+const { Plugin, MarkdownView, debounce, Setting, PluginSettingTab, EditorView } = require('obsidian');
 
 class RichFootSettings {
     constructor() {
@@ -26,6 +26,10 @@ class RichFootPlugin extends Plugin {
             this.app.workspace.on('file-open', this.updateRichFoot)
         );
 
+        this.registerEvent(
+            this.app.workspace.on('editor-change', this.updateRichFoot)
+        );
+
         this.contentObserver = new MutationObserver(this.updateRichFoot);
     }
 
@@ -45,31 +49,50 @@ class RichFootPlugin extends Plugin {
     }
 
     addRichFoot(view) {
-        if (view.getMode() !== 'preview') {
-            return;
-        }
-
         const file = view.file;
         if (!file || !file.path) {
             return;
         }
 
         const content = view.contentEl;
-        const markdownPreviewSection = content.querySelector('.markdown-preview-section');
+        let container;
+
+        if (view.getMode() === 'preview') {
+            container = content.querySelector('.markdown-preview-section');
+        } else if (view.getMode() === 'source' || view.getMode() === 'live') {
+            const cmSizer = content.querySelector('.cm-sizer');
+            if (cmSizer) {
+                // Remove any existing Rich Foot
+                this.removeExistingRichFoot(cmSizer);
+
+                // Create the Rich Foot
+                const richFoot = this.createRichFoot(file);
+
+                // Append the Rich Foot as the last child of cm-sizer
+                cmSizer.appendChild(richFoot);
+
+                // Observe the cm-sizer for changes
+                this.contentObserver.disconnect();
+                this.contentObserver.observe(cmSizer, { childList: true, subtree: true });
+
+                return; // Exit the method early as we've already added the Rich Foot
+            }
+        }
 
-        if (!markdownPreviewSection) {
+        if (!container) {
             return;
         }
 
         // Remove any existing Rich Foot
-        this.removeExistingRichFoot(markdownPreviewSection);
+        this.removeExistingRichFoot(container);
 
         // Create and add the Rich Foot
-        this.createRichFoot(file, markdownPreviewSection);
+        const richFoot = this.createRichFoot(file);
+        container.appendChild(richFoot);
 
-        // Observe the markdown preview section for changes
+        // Observe the container for changes
         this.contentObserver.disconnect();
-        this.contentObserver.observe(markdownPreviewSection, { childList: true, subtree: true });
+        this.contentObserver.observe(container, { childList: true, subtree: true });
     }
 
     removeExistingRichFoot(container) {
@@ -79,7 +102,7 @@ class RichFootPlugin extends Plugin {
         }
     }
 
-    createRichFoot(file, container) {
+    createRichFoot(file) {
         const richFoot = createDiv({ cls: 'rich-foot' });
 
         // Backlinks
@@ -123,7 +146,7 @@ class RichFootPlugin extends Plugin {
             text: `${created}`
         });
 
-        container.appendChild(richFoot);
+        return richFoot;
     }
 
     shouldIncludeBacklink(linkPath) {

diff --git a/styles.css b/styles.css
@@ -2,111 +2,174 @@
 /* == Obsidian: Rich Foot == */
 /* ========================= */
 
-/* -----------------------*/
-/* -- footer backlinks -- */
-/* -----------------------*/
+/* ------------------------------ */
+/* -- General Rich Foot Styles -- */
+/* ------------------------------ */
+.rich-foot {
+    border-top: 1px solid var(--background-modifier-border);
+    margin-top: 30px;
+    padding-top: 10px;
+}
+
+.rich-foot > div:not(:last-child) {
+    margin-bottom: 10px;
+}
+
+/* ---------------------- */
+/* -- Backlinks Styles -- */
+/* ---------------------- */
 .rich-foot--backlinks {
-	margin-top: 100px;
-	border-top: 1px dashed var(--text-accent);
+    margin-top: 100px;
+    border-top: 1px dashed var(--text-accent);
 }
 
 .rich-foot--backlinks::before {
-	content: 'Backlinks';
-	text-transform: uppercase;
-	filter: brightness(150%);
-	position: relative;
-	bottom: 0;
-	font-size: 0.7em;
-	color: var(--text-accent);
-}
-body.theme-light .rich-foot--backlinks::before {
-	filter: brightness(80%);
+    content: 'Backlinks';
+    text-transform: uppercase;
+    filter: brightness(150%);
+    position: relative;
+    bottom: 0;
+    font-size: 0.7em;
+    color: var(--text-accent);
 }
 
 .rich-foot--backlinks ul {
-	list-style: none;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     margin: 0 !important;
 }
 
 .rich-foot--backlinks ul li {
-	margin-inline-start: 0 !important;
-}
-
-.rich-foot--backlinks ul li a::before {
-	content: "← ";
-	opacity: .5;
+    margin-inline-start: 0 !important;
 }
 
 .rich-foot--backlinks ul li a {
-	filter: brightness(120%);
-	text-decoration: none !important;
-	font-size: 12px;
-	padding: 0px 8px;
-	text-transform: lowercase;
-	text-align: center;
-	text-decoration: none;
-	display: inline-block;
-	margin: 0px 4px;
-	cursor: pointer;
-	border-radius: 14px;
-	border: 1px solid rgba(255, 255, 255, 0.204);
-	background-color: var(--tag-background);
-	transition: 150ms ease-in-out all;
+    filter: brightness(120%);
+    text-decoration: none !important;
+    font-size: 12px;
+    padding: 0px 8px;
+    text-transform: lowercase;
+    text-align: center;
+    display: inline-block;
+    margin: 0px 4px;
+    cursor: pointer;
+    border-radius: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.204);
+    background-color: var(--tag-background);
+    transition: 150ms ease-in-out all;
 }
-body.theme-light .rich-foot--backlinks ul li a {
-	filter: brightness(80%);
+
+.rich-foot--backlinks ul li a::before {
+    content: "← ";
+    opacity: .5;
 }
 
 .rich-foot--backlinks ul li a:hover {
-	filter: brightness(170%);
-	border: 1px solid transparent !important;
-	text-decoration: none;
+    filter: brightness(170%);
+    border: 1px solid transparent !important;
+    text-decoration: none;
 }
 
-/* ----------------------------------- */
-/* -- created / modified note dates -- */
-/* ----------------------------------- */
+/* ----------------- */
+/* -- Date Styles -- */
+/* ----------------- */
 .rich-foot--created-date,
 .rich-foot--modified-date {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	list-style: none;
-	margin-top: 10px;
-	padding-left: 0;
-	font-size: .8em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    list-style: none;
+    margin-top: 10px;
+    padding-left: 0;
+    font-size: .8em;
 }
 
 .rich-foot--created-date {
-	float: right;
-	margin-right: 20px;
-	margin-left: 20px;
-	filter: brightness(85%);
-	color: var(--text-accent);
+    float: right;
+    margin-right: 20px;
+    margin-left: 20px;
+    filter: brightness(85%);
+    color: var(--text-accent);
 }
+
 .rich-foot--created-date::before {
-	content: "created date";
-	font-size: .7em;
-	text-transform: uppercase;
-	padding: 2px 8px 0 0;
+    content: "created date";
+    font-size: .7em;
+    text-transform: uppercase;
+    padding: 2px 8px 0 0;
 }
 
 .rich-foot--modified-date {
-	float: right;
-	filter: brightness(85%);
-	color: var(--text-accent);
+    float: right;
+    filter: brightness(85%);
+    color: var(--text-accent);
 }
+
 .rich-foot--modified-date::before {
-	content: "modified date";
-	font-size: .7em;
-	text-transform: uppercase;
-	padding: 2px 8px 0 0;
+    content: "modified date";
+    font-size: .7em;
+    text-transform: uppercase;
+    padding: 2px 8px 0 0;
+}
+
+/* --------------------------- */
+/* -- Theme-specific Styles -- */
+/* --------------------------- */
+body.theme-light .rich-foot--backlinks::before {
+    filter: brightness(80%);
+}
+
+body.theme-light .rich-foot--backlinks ul li a {
+    filter: brightness(80%);
+}
+
+/* ---------------------------- */
+/* -- Editor-specific Styles -- */
+/* ---------------------------- */
+.cm-scroller .rich-foot,
+.markdown-source-view .rich-foot {
+    margin-bottom: 30px;
+}
+
+.cm-scroller .cm-contentContainer > .cm-content,
+.markdown-source-view .cm-contentContainer > .cm-content {
+    padding-bottom: 30px !important;
+}
+
+.cm-scroller .rich-foot--backlinks,
+.markdown-source-view .rich-foot--backlinks {
+    margin-top: 20px;
+}
+
+.cm-scroller .rich-foot--created-date,
+.cm-scroller .rich-foot--modified-date,
+.markdown-source-view .rich-foot--created-date,
+.markdown-source-view .rich-foot--modified-date {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+.cm-sizer .rich-foot {
+    margin-top: 30px;
+    padding-top: 10px;
+    border-top: 1px solid var(--background-modifier-border);
+}
+
+.cm-sizer .rich-foot--backlinks {
+    margin-top: 20px;
+}
+
+.cm-sizer .rich-foot--created-date,
+.cm-sizer .rich-foot--modified-date {
+    display: inline-block;
+    margin-right: 20px;
 }
 
-/* Settings styles */
+/* --------------------- */
+/* -- Settings Styles -- */
+/* --------------------- */
 .rich-foot-settings .rich-foot-info {
     margin-bottom: 20px;
     padding: 15px;