From 2690798dc88d272d059749a3b3030994b7151596 Mon Sep 17 00:00:00 2001 From: NellowTCS Date: Thu, 30 Apr 2026 21:02:04 +0000 Subject: [PATCH] That... wasn't as bad as I thought!! --- eslint.config.mjs | 48 ++++++++++++++-------------- src/editor/editorExtension.ts | 6 ++-- src/main.ts | 2 +- src/reading/readingViewProcessor.ts | 49 ++++++++++++++++++----------- src/ui/settingsTab.ts | 4 +-- src/utils/colorParser.ts | 5 +-- 6 files changed, 63 insertions(+), 51 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index 69aeff1..cf68f33 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -3,28 +3,28 @@ import tseslint from "typescript-eslint"; import obsidianmd from "eslint-plugin-obsidianmd"; export default tseslint.config( - js.configs.recommended, - ...tseslint.configs.recommended, - ...obsidianmd.configs.recommended, - { - languageOptions: { - parserOptions: { - projectService: true, - tsconfigRootDir: import.meta.dirname, - }, - }, - }, - { - rules: { - "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }], - "@typescript-eslint/ban-ts-comment": "off", - "no-prototype-builtins": "off", - "@typescript-eslint/no-empty-function": "off", - "no-console": ["error", { "allow": ["warn", "error", "debug"] }], - }, - }, - { - ignores: ["dist/**/*", "node_modules/**/*", "main.js"] - } + js.configs.recommended, + ...tseslint.configs.recommended, + ...obsidianmd.configs.recommended, + { + languageOptions: { + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + }, + { + rules: { + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": ["error", { args: "none" }], + "@typescript-eslint/ban-ts-comment": "off", + "no-prototype-builtins": "off", + "@typescript-eslint/no-empty-function": "off", + "no-console": ["error", { allow: ["warn", "error", "debug"] }], + }, + }, + { + ignores: ["dist/**/*", "node_modules/**/*", "main.js"], + }, ); diff --git a/src/editor/editorExtension.ts b/src/editor/editorExtension.ts index 100be77..88daf4c 100644 --- a/src/editor/editorExtension.ts +++ b/src/editor/editorExtension.ts @@ -41,18 +41,18 @@ class ColorWidget extends WidgetType { } toDOM(): HTMLElement { - const wrapper = document.createElement("span"); + const wrapper = window.activeDocument.createSpan(); wrapper.className = "cp-color-inline"; wrapper.setAttribute("aria-label", `Color: ${this.color}`); if (this.showSwatch) { - const swatch = document.createElement("span"); + const swatch = window.activeDocument.createSpan(); swatch.className = "cp-color-swatch"; swatch.setCssProps({ "--cp-swatch-color": this.color }); wrapper.appendChild(swatch); } - const label = document.createElement("span"); + const label = window.activeDocument.createSpan(); label.textContent = this.originalText; if (this.colorizeText && hasGoodContrast(this.color)) { diff --git a/src/main.ts b/src/main.ts index 821bfbd..f4cd63e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -30,7 +30,7 @@ export default class ColorPreviewPlugin extends Plugin { this.settings = Object.assign( {}, DEFAULT_SETTINGS, - await this.loadData(), + (await this.loadData()) as Partial, ); } diff --git a/src/reading/readingViewProcessor.ts b/src/reading/readingViewProcessor.ts index a469510..9cf78b8 100644 --- a/src/reading/readingViewProcessor.ts +++ b/src/reading/readingViewProcessor.ts @@ -23,7 +23,9 @@ class ColorSpanChild extends MarkdownRenderChild { .querySelectorAll(".cp-color-wrapper") .forEach((wrapper) => { wrapper.replaceWith( - document.createTextNode(wrapper.textContent ?? ""), + window.activeDocument.createTextNode( + wrapper.textContent ?? "", + ), ); }); this.containerEl.normalize(); @@ -31,20 +33,25 @@ class ColorSpanChild extends MarkdownRenderChild { private collectTextNodes(root: HTMLElement): Text[] { const nodes: Text[] = []; - const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, { - acceptNode: (node) => { - if (!node.nodeValue?.trim()) return NodeFilter.FILTER_REJECT; - if ((node as Text).parentElement?.closest("code, pre")) - return NodeFilter.FILTER_REJECT; - if ( - (node as Text).parentElement?.classList.contains( - "cp-color-wrapper", + const walker = window.activeDocument.createTreeWalker( + root, + NodeFilter.SHOW_TEXT, + { + acceptNode: (node) => { + if (!node.nodeValue?.trim()) + return NodeFilter.FILTER_REJECT; + if ((node as Text).parentElement?.closest("code, pre")) + return NodeFilter.FILTER_REJECT; + if ( + (node as Text).parentElement?.classList.contains( + "cp-color-wrapper", + ) ) - ) - return NodeFilter.FILTER_REJECT; - return NodeFilter.FILTER_ACCEPT; + return NodeFilter.FILTER_REJECT; + return NodeFilter.FILTER_ACCEPT; + }, }, - }); + ); let n: Node | null; while ((n = walker.nextNode())) nodes.push(n as Text); return nodes; @@ -55,38 +62,42 @@ class ColorSpanChild extends MarkdownRenderChild { const matches = findColorsInText(text); if (matches.length === 0) return; - const fragment = document.createDocumentFragment(); + const fragment = window.activeDocument.createDocumentFragment(); let cursor = 0; for (const match of matches) { if (match.from > cursor) { fragment.appendChild( - document.createTextNode(text.slice(cursor, match.from)), + window.activeDocument.createTextNode( + text.slice(cursor, match.from), + ), ); } fragment.appendChild(this.createColorElement(match.color)); cursor = match.to; } if (cursor < text.length) { - fragment.appendChild(document.createTextNode(text.slice(cursor))); + fragment.appendChild( + window.activeDocument.createTextNode(text.slice(cursor)), + ); } node.parentNode?.replaceChild(fragment, node); } private createColorElement(color: string): HTMLElement { - const wrapper = document.createElement("span"); + const wrapper = window.activeDocument.createSpan(); wrapper.className = "cp-color-wrapper"; if (this.settings.showSwatchInEditor) { - const swatch = document.createElement("span"); + const swatch = window.activeDocument.createSpan(); swatch.className = "cp-color-swatch"; swatch.setAttribute("aria-label", `Color: ${color}`); swatch.setCssProps({ "--cp-swatch-color": color }); wrapper.appendChild(swatch); } - const label = document.createElement("span"); + const label = window.activeDocument.createSpan(); label.textContent = color; if (this.settings.colorizeTextInEditor && hasGoodContrast(color)) { diff --git a/src/ui/settingsTab.ts b/src/ui/settingsTab.ts index 31f8235..49c371b 100644 --- a/src/ui/settingsTab.ts +++ b/src/ui/settingsTab.ts @@ -44,7 +44,7 @@ export class ColorPreviewSettingTab extends PluginSettingTab { new Setting(containerEl) .setName("Enable in reading view") - .setDesc("Show color previews when viewing rendered markdown") + .setDesc("Show color previews when viewing rendered Markdown") .addToggle((toggle) => toggle .setValue(this.plugin.settings.enableInReadingView) @@ -59,7 +59,7 @@ export class ColorPreviewSettingTab extends PluginSettingTab { .setHeading(); new Setting(containerEl).setDesc( - "HEX: #RGB, #RRGGBB, #RGBA, #RRGGBBAA · RGB/RGBA: rgb(255, 0, 0) · HSL/HSLA: hsl(120, 100%, 50%)", + "Hex: #RGB, #rrggbb, #rgba, #rrggbbaa · rgb/rgba: rgb(255, 0, 0) · hsl/hsla: hsl(120, 100%, 50%)", ); } } diff --git a/src/utils/colorParser.ts b/src/utils/colorParser.ts index 392d33b..3ecd5fe 100644 --- a/src/utils/colorParser.ts +++ b/src/utils/colorParser.ts @@ -113,7 +113,7 @@ function invalidateBgCache() { function getThemeBackground(): [number, number, number] { if (cachedBg) return cachedBg; - const raw = getComputedStyle(document.body) + const raw = getComputedStyle(window.activeDocument.body) .getPropertyValue("--background-primary") .trim(); @@ -124,7 +124,8 @@ function getThemeBackground(): [number, number, number] { } else { // --background-primary uses a format we can't parse (oklch, color-mix, etc.) // Fall back to theme class detection. - const isDark = document.body.classList.contains("theme-dark"); + const isDark = + window.activeDocument.body.classList.contains("theme-dark"); cachedBg = isDark ? [30, 30, 30] : [255, 255, 255]; }