Merge pull request #2382 from obsidian-tasks-group/encode-entities-in…

…-mermaid

fix: Correct (unreleased) display of special chars in Mermaid status diagrams

docs/Getting Started/Statuses/Example Statuses.md

@@ -19,9 +19,9 @@ This might be useful if you have a few slightly more time-consuming tasks to kee
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1[Todo]
-2[In Progress]
-3[Done]
+1["Todo"]
+2["In Progress"]
+3["Done"]
 1 --> 2
 2 --> 3
 3 --> 1
@@ -47,9 +47,9 @@ By using non-standard symbols for the `IN_PROGRESS` and `DONE` statuses, if I de
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_important-cycle.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1[Important]
-2[Doing - Important]
-3[Done - Important]
+1["Important"]
+2["Doing - Important"]
+3["Done - Important"]
 1 --> 2
 2 --> 3
 3 --> 1
@@ -77,8 +77,8 @@ Either way, I can make them toggle to each other, and by giving them the type `N
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1[Pro]
-2[Con]
+1["Pro"]
+2["Con"]
 1 --> 2
 2 --> 1
 ```
@@ -104,11 +104,11 @@ Here are some statuses from the ITS Theme where this behaviour might be useful.
 <!-- include: DocsSamplesForStatuses.test.DefaultStatuses_toggle-does-nothing.approved.mermaid.md -->
 ```mermaid
 flowchart LR
-1[Bookmark]
-2[Example]
-3[Information]
-4[Paraphrase]
-5[Quote]
+1["Bookmark"]
+2["Example"]
+3["Information"]
+4["Paraphrase"]
+5["Quote"]
 1 --> 1
 2 --> 2
 3 --> 3

src/StatusRegistry.ts

@@ -1,5 +1,6 @@
 import { Status } from './Status';
 import { StatusConfiguration, StatusType } from './StatusConfiguration';
+import { htmlEncodeCharacter, htmlEncodeString } from './lib/HTMLCharacterEntities';
 
 /**
  * Tracks all the registered statuses a task can have.
@@ -305,14 +306,20 @@ export class StatusRegistry {
         const nodes: string[] = [];
         const edges: string[] = [];
         uniqueStatuses.forEach((status, index) => {
+            const statusName = htmlEncodeString(status.name);
             if (includeDetails) {
-                const transition = `[${status.symbol}] -> [${status.nextStatusSymbol}]`;
-                const statusName = `'${status.name}'`;
-                const statusType = `(${status.type})`;
-                const text = `${index + 1}["${statusName}<br>${transition}<br>${statusType}"]`;
+                const statusSymbol = htmlEncodeCharacter(status.symbol);
+                const statusNextStatusSymbol = htmlEncodeCharacter(status.nextStatusSymbol);
+                const statusType = status.type;
+
+                const transitionText = `[${statusSymbol}] -> [${statusNextStatusSymbol}]`;
+                const statusNameText = `'${statusName}'`;
+                const statusTypeText = `(${statusType})`;
+
+                const text = `${index + 1}["${statusNameText}<br>${transitionText}<br>${statusTypeText}"]`;
                 nodes.push(text);
             } else {
-                nodes.push(`${index + 1}[${status.name}]`);
+                nodes.push(`${index + 1}["${statusName}"]`);
             }
 
             // Check the next status:

src/lib/HTMLCharacterEntities.ts

@@ -0,0 +1,37 @@
+/**
+ * Convert any single reserved HTML character to its entity name.
+ * @param character
+ *
+ * @see htmlEncodeString
+ */
+export function htmlEncodeCharacter(character: string) {
+    const charactersToEntityNames: { [index: string]: string } = {
+        '<': '&lt;',
+        '>': '&gt;',
+        '&': '&amp;',
+        '"': '&quot;',
+    };
+
+    const candidateEntityName = charactersToEntityNames[character];
+    if (candidateEntityName !== undefined) {
+        return candidateEntityName;
+    }
+
+    return character;
+}
+
+/**
+ * Convert reserved HTML characters to their entity names.
+ * @param characters
+ *
+ * @see htmlEncodeCharacter
+ */
+export function htmlEncodeString(characters: string) {
+    const chars = [...characters];
+    let result = '';
+    chars.forEach((c) => {
+        result += htmlEncodeCharacter(c);
+    });
+
+    return result;
+}

tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_core-statuses.approved.mermaid.md

@@ -1,8 +1,8 @@
 
 ```mermaid
 flowchart LR
-1[Todo]
-2[Done]
+1["Todo"]
+2["Done"]
 1 --> 2
 2 --> 1
 ```

tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_custom-statuses.approved.mermaid.md

@@ -1,7 +1,7 @@
 
 ```mermaid
 flowchart LR
-1[In Progress]
-2[Cancelled]
+1["In Progress"]
+2["Cancelled"]
 
 ```

tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_important-cycle.approved.mermaid.md

@@ -1,9 +1,9 @@
 
 ```mermaid
 flowchart LR
-1[Important]
-2[Doing - Important]
-3[Done - Important]
+1["Important"]
+2["Doing - Important"]
+3["Done - Important"]
 1 --> 2
 2 --> 3
 3 --> 1

tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_pro-con-cycle.approved.mermaid.md

@@ -1,8 +1,8 @@
 
 ```mermaid
 flowchart LR
-1[Pro]
-2[Con]
+1["Pro"]
+2["Con"]
 1 --> 2
 2 --> 1
 ```

tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_todo-in_progress-done.approved.mermaid.md

@@ -1,9 +1,9 @@
 
 ```mermaid
 flowchart LR
-1[Todo]
-2[In Progress]
-3[Done]
+1["Todo"]
+2["In Progress"]
+3["Done"]
 1 --> 2
 2 --> 3
 3 --> 1

tests/DocumentationSamples/DocsSamplesForStatuses.test.DefaultStatuses_toggle-does-nothing.approved.mermaid.md

@@ -1,11 +1,11 @@
 
 ```mermaid
 flowchart LR
-1[Bookmark]
-2[Example]
-3[Information]
-4[Paraphrase]
-5[Quote]
+1["Bookmark"]
+2["Example"]
+3["Information"]
+4["Paraphrase"]
+5["Quote"]
 1 --> 1
 2 --> 2
 3 --> 3

tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_AnuPpuccin_Table.approved.mermaid.md

@@ -1,34 +1,34 @@
 
 ```mermaid
 flowchart LR
-1[Unchecked]
-2[Checked]
-3[Rescheduled]
-4[Scheduled]
-5[Important]
-6[Cancelled]
-7[In Progress]
-8[Question]
-9[Star]
-10[Note]
-11[Location]
-12[Information]
-13[Idea]
-14[Amount]
-15[Pro]
-16[Con]
-17[Bookmark]
-18[Quote]
-19[Speech bubble 0]
-20[Speech bubble 1]
-21[Speech bubble 2]
-22[Speech bubble 3]
-23[Speech bubble 4]
-24[Speech bubble 5]
-25[Speech bubble 6]
-26[Speech bubble 7]
-27[Speech bubble 8]
-28[Speech bubble 9]
+1["Unchecked"]
+2["Checked"]
+3["Rescheduled"]
+4["Scheduled"]
+5["Important"]
+6["Cancelled"]
+7["In Progress"]
+8["Question"]
+9["Star"]
+10["Note"]
+11["Location"]
+12["Information"]
+13["Idea"]
+14["Amount"]
+15["Pro"]
+16["Con"]
+17["Bookmark"]
+18["Quote"]
+19["Speech bubble 0"]
+20["Speech bubble 1"]
+21["Speech bubble 2"]
+22["Speech bubble 3"]
+23["Speech bubble 4"]
+24["Speech bubble 5"]
+25["Speech bubble 6"]
+26["Speech bubble 7"]
+27["Speech bubble 8"]
+28["Speech bubble 9"]
 1 --> 2
 2 --> 1
 3 --> 2

tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Aura_Table.approved.mermaid.md

@@ -1,25 +1,25 @@
 
 ```mermaid
 flowchart LR
-1[incomplete]
-2[complete / done]
-3[cancelled]
-4[deferred]
-5[in progress, or half-done]
-6[Important]
-7[question]
-8[review]
-9[Inbox / task that should be processed later]
-10[bookmark]
-11[brainstorm]
-12[deferred or scheduled]
-13[Info]
-14[idea]
-15[note]
-16[quote]
-17[win / success / reward]
-18[pro]
-19[con]
+1["incomplete"]
+2["complete / done"]
+3["cancelled"]
+4["deferred"]
+5["in progress, or half-done"]
+6["Important"]
+7["question"]
+8["review"]
+9["Inbox / task that should be processed later"]
+10["bookmark"]
+11["brainstorm"]
+12["deferred or scheduled"]
+13["Info"]
+14["idea"]
+15["note"]
+16["quote"]
+17["win / success / reward"]
+18["pro"]
+19["con"]
 1 --> 2
 2 --> 1
 3 --> 1

tests/DocumentationSamples/DocsSamplesForStatuses.test.Theme_Ebullientworks_Table.approved.mermaid.md

@@ -1,14 +1,14 @@
 
 ```mermaid
 flowchart LR
-1[Unchecked]
-2[Checked]
-3[Cancelled]
-4[In Progress]
-5[Deferred]
-6[Important]
-7[Question]
-8[Review]
+1["Unchecked"]
+2["Checked"]
+3["Cancelled"]
+4["In Progress"]
+5["Deferred"]
+6["Important"]
+7["Question"]
+8["Review"]
 1 --> 2
 2 --> 1
 3 --> 1