feat(obsidian/template): support text color and background color in c…

…olored template previous version only accept backgound color
PKM-er · Sep 25, 2023 · f193999 · f193999
1 parent 7041ecf
commit f193999
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 11 deletions.
diff --git a/app/obsidian/src/note-feature/template-preview/preview.ts b/app/obsidian/src/note-feature/template-preview/preview.ts
@@ -129,8 +129,10 @@ export class TemplatePreview extends TemplatePreviewBase {
       case "colored":
         markdown = renderer.renderColored({
           content: "I'm Highlight",
-          color: "#FF0000",
+          color: "#FF000080",
           colorName: "red",
+          bgColor: "#FF000080",
+          bgColorName: "red",
         });
         break;
       default:

diff --git a/app/obsidian/src/services/note-parser/service.ts b/app/obsidian/src/services/note-parser/service.ts
@@ -42,27 +42,88 @@ class Note {
   }
 }
 
+function cssColorToHexName(code: string) {
+  if (!code)
+    return {
+      colorName: null,
+      color: null,
+    };
+  const hex = colord(code).toHex().toUpperCase();
+  const name = colors[hex.substring(0, 7) as keyof typeof colors];
+  return {
+    colorName: name ?? hex,
+    color: hex,
+  };
+}
+
 export class NoteParser extends Service {
   plugin = this.use(ZoteroPlugin);
 
   private citations = new Map<string, { text: string; itemKeys: string[] }>();
   tdService = new globalThis.TurndownService()
     .addRule("color", {
       filter: (node, _opts) => {
-        return node.nodeName === "SPAN" && !!node.style.backgroundColor;
+        return node.nodeName === "SPAN" && Boolean(node.style.color);
+      },
+      replacement: (content, node, _opts) => {
+        if (!(node instanceof HTMLElement)) {
+          throw new Error("Unexpected node");
+        }
+        const { color, colorName } = cssColorToHexName(node.style.color);
+
+        const child = node.firstChild as HTMLSpanElement | null;
+        if (
+          child === node.lastChild &&
+          child?.nodeName === "SPAN" &&
+          Boolean(child.style.backgroundColor)
+        ) {
+          const { color: bgColor, colorName: bgColorName } = cssColorToHexName(
+            child.style.backgroundColor,
+          );
+          return this.plugin.templateRenderer.renderColored({
+            content,
+            color,
+            colorName,
+            bgColor,
+            bgColorName,
+          });
+        } else {
+          return this.plugin.templateRenderer.renderColored({
+            content,
+            color,
+            colorName,
+            bgColor: null,
+            bgColorName: null,
+          });
+        }
+      },
+    })
+    .addRule("bg-color", {
+      filter: (node, _opts) => {
+        return node.nodeName === "SPAN" && Boolean(node.style.backgroundColor);
       },
       replacement: (content, node, _opts) => {
         if (!(node instanceof HTMLElement)) {
           throw new Error("Unexpected node");
         }
-        const colorCode = node.style.backgroundColor;
-        const hex = colord(colorCode).toHex();
+        const { color: bgColor, colorName: bgColorName } = cssColorToHexName(
+          node.style.backgroundColor,
+        );
+        const parent = node.parentElement as HTMLSpanElement | null;
+        if (
+          parent?.nodeName === "SPAN" &&
+          Boolean(parent.style.color) &&
+          !node.nextSibling
+        ) {
+          // nested color are handled by color rule
+          return content;
+        }
         return this.plugin.templateRenderer.renderColored({
-          color: hex,
           content,
-          colorName:
-            colors[hex.substring(0, 7).toUpperCase() as keyof typeof colors] ??
-            hex,
+          color: null,
+          colorName: null,
+          bgColor,
+          bgColorName,
         });
       },
     })

diff --git a/app/obsidian/src/services/template/defaults/zt-colored.ejs b/app/obsidian/src/services/template/defaults/zt-colored.ejs
@@ -1 +1,4 @@
-<mark style="background: <%= it.color %>"><%= it.content %></mark>
+<mark style="
+<%- if (it.color) { _%> color: <%= it.color %>; <%_ } -%>
+<%- if (it.bgColor) { _%> background-color: <%= it.bgColor %>; <%_ } -%>
+"><%= it.content %></mark>
diff --git a/app/obsidian/src/services/template/render.ts b/app/obsidian/src/services/template/render.ts
@@ -21,9 +21,11 @@ import { toHelper } from "./helper/to-helper";
 import { TemplateSettings } from "./settings";
 
 interface ColoredText {
-  color: string;
   content: string;
-  colorName: string;
+  color: string | null;
+  colorName: string | null;
+  bgColor: string | null;
+  bgColorName: string | null;
 }
 export interface TemplateDataMap {
   note: DocItemHelper;