obsidian-plugin/nellowtcs_Obsidian-IroView
1
0
Fork 0
mirror of https://github.com/nellowtcs/Obsidian-IroView.git synced 2026-07-22 06:56:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

That... wasn't as bad as I thought!!

Browse source
This commit is contained in:
NellowTCS 2026-04-30 21:02:04 +00:00 committed by GitHub
parent 726bcefe89
commit 2690798dc8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 63 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
eslint.config.mjs
View file

@ -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"],
},
);

6
src/editor/editorExtension.ts
View file

@ -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)) {

2
src/main.ts
View file

@ -30,7 +30,7 @@ export default class ColorPreviewPlugin extends Plugin {
this.settings = Object.assign(
{},
DEFAULT_SETTINGS,
await this.loadData(),
(await this.loadData()) as Partial<ColorPreviewSettings>,
);
}

49
src/reading/readingViewProcessor.ts
View file

@ -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)) {

4
src/ui/settingsTab.ts
View file

@ -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%)",
);
}
}

5
src/utils/colorParser.ts
View file

@ -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];
}