diff --git a/manifest.json b/manifest.json index 23082ac..b793c94 100644 --- 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 index 19dd8b7..884cda9 100644 --- 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 index 30f314f..90d58bd 100644 --- 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;