feature: enable html

README.md

@@ -4,6 +4,7 @@ This plguin for [Obsidian](https://obsidian.md/) creates a simple month view for
 
 ![](./screemshot.png)
 
+## How To
 To show the view above, just create a code block and type:
 
 ~~~
@@ -17,6 +18,32 @@ To show the view above, just create a code block and type:
 * `(date_num, tag)`: The day (`date_num`) you want to punch in, with a `tag` in it. If `tag` is missing, such as `(12)`, a default tag `✔️` is given to that day.
 * `[width: css_width]`: Restrict the Month-view table to `css_width`, such as `[width: 50%]`, `[width: 500px]`
 
+### Rich Text
+Some people like to insert rich text (e.g. links or images). Since v1.0.4, Habit Tracker plugin adds a new configuration `Enable HTML` to activate HTML parsing. **For some security reasons, this config is "off" as default.**
+
+To insert Web URL:
+~~~
+```habitt
+(1, <a href="https://www.google.com">Google</a>)
+```
+~~~
+
+To insert other note in the Vault (Using Obsidian url):
+~~~
+```habitt
+(1, <a href="obsidian://open?vault=my-notes&file=xxx">Google</a>)
+```
+~~~
+Learn more about [Obsidian url](https://help.obsidian.md/Advanced+topics/Using+obsidian+URI).
+
+To insert a image (from web):
+~~~
+```habitt
+(1, <img src="https://www.xyz.com/img.jpg" />)
+```
+~~~
+Since now, in Obsidian, we are not able to link the local image using `<img />` tag. See [Does ANY HTML work in Obsidian w/local files? - Resolved help - Obsidian Forum](https://forum.obsidian.md/t/does-any-html-work-in-obsidian-w-local-files/8000).
+
 ## Installation
 
 You can install the plugin via the Community Plugins tab within Obsidian. Just search for "Habit Tracker"

main.ts

@@ -4,6 +4,7 @@ interface HabitTrackerPluginSettings {
   startOfWeek: string;
   monthFormat: string;
   displayHead: boolean;
+  enableHTML: boolean;
   Sunday: string;
   Monday: string;
   Tuesday: string;
@@ -17,6 +18,7 @@ const DEFAULT_SETTINGS: HabitTrackerPluginSettings = {
   startOfWeek: '0',
   monthFormat: 'YYYY-MM',
   displayHead: true,
+  enableHTML: false,
   Sunday: 'SUN',
   Monday: 'MON',
   Tuesday: 'TUE',
@@ -69,7 +71,6 @@ function renderTable (source: string, plugin: HabitTrackerPlugin) {
 
   const styles = ctx.tableWidth ? `width: ${ctx.tableWidth};` : '';
   const table = createEl('table', { cls: 'habitt', attr: { style: styles }})
-  console.log('table', table)
   table.appendChild(renderHead(ctx))
   table.appendChild(renderBody(ctx))
   return table
@@ -141,7 +142,6 @@ function renderHead (ctx: HabitTrackerContext): HTMLElement {
   for (let i = 0; i < 7; i++) {
     tr.createEl('th', { cls: `habitt-th habitt-th-${i}`, text: WEEK[(i + ctx.startOfWeek) % 7] });
   }
-  console.log('thead', thead)
   return thead;
 }
 
@@ -172,6 +172,7 @@ function renderBody (ctx: HabitTrackerContext): HTMLElement {
   }
 
   const tbody = createEl('tbody');
+  const { enableHTML } = ctx.settings
   for (let i = 0; i < weeks.length; i++) {
     const tr = tbody.createEl('tr');
     for (let j = 0; j < weeks[i].length; j++) {
@@ -182,11 +183,16 @@ function renderBody (ctx: HabitTrackerContext): HTMLElement {
       div.createDiv({ cls: 'habitt-date', text: `${d || ''}` });
       const dots = div.createDiv({ cls: 'habitt-dots' });
       if (hasOwn) {
-        dots.createDiv({ text: ctx.marks.get(d) || '✔️' });
+        const input = ctx.marks.get(d) || '✔️'
+        // treat as HTML
+        if (enableHTML) {
+          dots.innerHTML = `<div>${input}</div>`
+        } else {
+          dots.createDiv({ text: input });
+        }
       }
     }
   }
-  console.log('body', tbody)
   return tbody;
 }
 
@@ -237,6 +243,18 @@ class HabitTrackerSettingTab extends PluginSettingTab {
           })
       );
 
+    new Setting(containerEl)
+      .setName('Enable HTML')
+      .setDesc('Treat your input text as HTML. Be careful, it may cause DOM injection attacks')
+      .addToggle(
+        dropdown => dropdown
+          .setValue(this.plugin.settings.enableHTML)
+          .onChange(async (value) => {
+            this.plugin.settings.enableHTML = value;
+            await this.plugin.saveSettings();
+          })
+      );
+
     new Setting(containerEl)
       .setName('Month Format')
       .setDesc('To format the month text which displays in the header')

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-habit-tracker",
 	"name": "Habit Tracker",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"minAppVersion": "0.9.12",
 	"description": "This plguin creates a simple Month view for visualizing your punch records.",
 	"author": "Duo",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-habit-tracker",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "This is A sample plugin for habit tracking.",
   "main": "main.js",
   "scripts": {