Added new option to highlight text, not background. Fixed a minor TS issue

package.json

@@ -14,6 +14,7 @@
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.2.1",
+    "@types/color": "^3.0.3",
     "@types/node": "^14.14.37",
     "@types/sortablejs": "^1.10.7",
     "obsidian": "^0.12.6",
@@ -23,6 +24,7 @@
   },
   "dependencies": {
     "@simonwep/pickr": "^1.8.2",
+    "color": "^4.2.3",
     "copy": "^0.0.1",
     "dotenv": "^10.0.0",
     "react": "^17.0.2",

src/plugin/main.ts

@@ -8,7 +8,7 @@ import contextMenu from "src/plugin/contextMenu";
 import highlighterMenu from "src/ui/highlighterMenu";
 import { createHighlighterIcons } from "src/icons/customIcons";
 
-import { createStyles } from "src/utils/createStyles";
+import { createStyles, getStyles } from "src/utils/createStyles";
 export default class HighlightrPlugin extends Plugin {
   app: App;
   editor: Editor;
@@ -144,7 +144,7 @@ export default class HighlightrPlugin extends Plugin {
           prefix:
             this.settings.highlighterMethods === "css-classes"
               ? `<mark class="hltr-${highlighterKey.toLowerCase()}">`
-              : `<mark style="background: ${this.settings.highlighters[highlighterKey]};">`,
+              : `<mark style="${getStyles(this.settings, highlighterKey)}">`,
           suffix: "</mark>",
         },
       };

src/settings/settingsData.ts

@@ -7,6 +7,7 @@ export const HIGHLIGHTER_STYLES = [
 ];
 
 export const HIGHLIGHTER_METHODS = ["css-classes", "inline-styles"];
+export const HIGHLIGHTER_TARGETS = ["background", "text", "bold-text"];
 
 export interface Highlighters {
   [color: string]: string;
@@ -15,13 +16,15 @@ export interface Highlighters {
 export interface HighlightrSettings {
   highlighterStyle: string;
   highlighterMethods: string;
+  highlighterTarget: string;
   highlighters: Highlighters;
   highlighterOrder: string[];
 }
 
 const DEFAULT_SETTINGS: HighlightrSettings = {
   highlighterStyle: "none",
   highlighterMethods: "inline-styles",
+  highlighterTarget: "background",
   highlighters: {
     Pink: "#FFB8EBA6",
     Red: "#FF5582A6",

src/settings/settingsTab.ts

@@ -8,7 +8,7 @@ import {
 } from "obsidian";
 import Pickr from "@simonwep/pickr";
 import Sortable from "sortablejs";
-import { HIGHLIGHTER_METHODS, HIGHLIGHTER_STYLES } from "./settingsData";
+import { HIGHLIGHTER_METHODS, HIGHLIGHTER_STYLES, HIGHLIGHTER_TARGETS } from "./settingsData";
 import { setAttributes } from "src/utils/setAttributes";
 
 export class HighlightrSettingTab extends PluginSettingTab {
@@ -52,6 +52,28 @@ export class HighlightrSettingTab extends PluginSettingTab {
           });
       });
 
+      new Setting(containerEl)
+      .setName("Choose highlight target")
+      .setDesc(
+        `Select what should be hightlighted - text or background.`
+      )
+      .addDropdown((dropdown) => {
+        let targets: Record<string, string> = {};
+        HIGHLIGHTER_TARGETS.map((target) => (targets[target] = target));
+        dropdown.addOptions(targets);
+        dropdown
+          .setValue(this.plugin.settings.highlighterTarget)
+          .onChange((highlightrTarget) => {
+            this.plugin.settings.highlighterTarget = highlightrTarget;
+            setTimeout(() => {
+              dispatchEvent(new Event("Highlightr-NewCommand"));
+            }, 100);
+            this.plugin.saveSettings();
+            this.plugin.saveData(this.plugin.settings);
+            this.display();
+          });
+      });
+
     const stylesSetting = new Setting(containerEl);
 
     stylesSetting
@@ -77,9 +99,9 @@ export class HighlightrSettingTab extends PluginSettingTab {
       const d = createEl("p");
       d.setAttribute("style", "font-size: .925em; margin-top: 12px;");
       d.innerHTML = `
-      <span style="background:#FFB7EACC;padding: .125em .125em;--lowlight-background: var(--background-primary);border-radius: 0;background-image: linear-gradient(360deg,rgba(255, 255, 255, 0) 40%,var(--lowlight-background) 40%) !important;">Lowlight</span> 
-      <span style="background:#93C0FFCC;--floating-background: var(--background-primary);border-radius: 0;padding-bottom: 5px;background-image: linear-gradient(360deg,rgba(255, 255, 255, 0) 28%,var(--floating-background) 28%) !important;">Floating</span> 
-      <span style="background:#9CF09CCC;margin: 0 -0.05em;padding: 0.1em 0.4em;border-radius: 0.8em 0.3em;-webkit-box-decoration-break: clone;box-decoration-break: clone;text-shadow: 0 0 0.75em var(--background-primary-alt);">Realistic</span> 
+      <span style="background:#FFB7EACC;padding: .125em .125em;--lowlight-background: var(--background-primary);border-radius: 0;background-image: linear-gradient(360deg,rgba(255, 255, 255, 0) 40%,var(--lowlight-background) 40%) !important;">Lowlight</span>
+      <span style="background:#93C0FFCC;--floating-background: var(--background-primary);border-radius: 0;padding-bottom: 5px;background-image: linear-gradient(360deg,rgba(255, 255, 255, 0) 28%,var(--floating-background) 28%) !important;">Floating</span>
+      <span style="background:#9CF09CCC;margin: 0 -0.05em;padding: 0.1em 0.4em;border-radius: 0.8em 0.3em;-webkit-box-decoration-break: clone;box-decoration-break: clone;text-shadow: 0 0 0.75em var(--background-primary-alt);">Realistic</span>
       <span style="background:#CCA9FFCC;margin: 0 -0.05em;padding: 0.125em 0.15em;border-radius: 0.2em;-webkit-box-decoration-break: clone;box-decoration-break: clone;">Rounded</span>`;
       return d;
     };

src/ui/highlighterMenu.ts

@@ -8,7 +8,7 @@ const highlighterMenu = (
   plugin: HighlightrPlugin,
   settings: HighlightrSettings,
   editor: Editor,
-  event: MouseEvent
+  event?: MouseEvent
 ): void => {
   if (editor && editor.hasFocus()) {
     const cursor = editor.getCursor("from");

src/utils/createStyles.ts

@@ -1,5 +1,6 @@
 import { HighlightrSettings } from "src/settings/settingsData";
 import { setAttributes } from "./setAttributes";
+import Color from 'color';
 
 function addNewStyle(selector: any, style: any, sheet: HTMLElement) {
   sheet.textContent += selector + `{\n ${style}\n}\n\n`;
@@ -19,8 +20,15 @@ export function createStyles(settings: HighlightrSettings) {
     let colorLowercase = highlighter.toLowerCase();
     addNewStyle(
       `.hltr-${colorLowercase},\nmark.hltr-${colorLowercase},\n.markdown-preview-view mark.hltr-${colorLowercase}`,
-      `background: ${settings.highlighters[highlighter]};`,
+      getStyles(settings, highlighter),
       styleSheet
     );
   });
 }
+
+export function getStyles(settings: HighlightrSettings, highlighter: string) {
+  return settings.highlighterTarget === 'background' ?
+    `background: ${settings.highlighters[highlighter]};`
+    :
+    `color: ${Color(settings.highlighters[highlighter]).opaquer(1)}; ${settings.highlighterTarget === 'bold-text' ? 'font-weight: bold;' : ''} background: transparent;`
+}