From 4fcf3619d05dcdf5d0a11e1bab19daa6f71658db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 17 Sep 2024 17:50:01 +0200
Subject: [PATCH] Add InlineTitle component and use it in Issue/Patch lists

---
 package-lock.json                 | 23 +++++++++++++++++++++++
 package.json                      |  2 ++
 src/components/InlineTitle.svelte | 30 ++++++++++++++++++++++++++++++
 src/components/IssueTeaser.svelte |  3 ++-
 src/components/PatchTeaser.svelte |  3 ++-
 5 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/components/InlineTitle.svelte

diff --git a/package-lock.json b/package-lock.json
index 23a0bf9..bdd1e63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,10 +19,12 @@
         "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
         "@tauri-apps/cli": "^2.0.0-rc.1",
         "@tsconfig/svelte": "^5.0.4",
+        "@types/dompurify": "^3.0.5",
         "@types/lodash": "^4.17.7",
         "@types/node": "^20.9.0",
         "baconjs": "^3.0.19",
         "bs58": "^6.0.0",
+        "dompurify": "^3.1.6",
         "eslint": "^9.10.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.44.0",
@@ -1107,6 +1109,15 @@
       "integrity": "sha512-BV9NplVgLmSi4mwKzD8BD/NQ8erOY/nUE/GpgWe2ckx+wIQF5RyRirn/QsSSCPeulVpc3RA/iJt6DpfTIZps0Q==",
       "dev": true
     },
+    "node_modules/@types/dompurify": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
+      "integrity": "sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1128,6 +1139,12 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.6.0.tgz",
@@ -1669,6 +1686,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==",
+      "dev": true
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
diff --git a/package.json b/package.json
index 7662e5b..c09555f 100644
--- a/package.json
+++ b/package.json
@@ -29,10 +29,12 @@
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@tauri-apps/cli": "^2.0.0-rc.1",
     "@tsconfig/svelte": "^5.0.4",
+    "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.7",
     "@types/node": "^20.9.0",
     "baconjs": "^3.0.19",
     "bs58": "^6.0.0",
+    "dompurify": "^3.1.6",
     "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.44.0",
diff --git a/src/components/InlineTitle.svelte b/src/components/InlineTitle.svelte
new file mode 100644
index 0000000..ad6b5c4
--- /dev/null
+++ b/src/components/InlineTitle.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import dompurify from "dompurify";
+  import escape from "lodash/escape";
+
+  export let content: string;
+  export let fontSize: "tiny" | "small" | "regular" | "medium" | "large" =
+    "small";
+
+  function formatInlineTitle(input: string): string {
+    return input.replaceAll(/`([^`]+)`/g, "<code>$1</code>");
+  }
+</script>
+
+<style>
+  .content :global(code) {
+    font-family: var(--font-family-monospace);
+    padding: 0.125rem 0.25rem;
+    background-color: var(--color-fill-ghost);
+  }
+</style>
+
+<span
+  class="content"
+  class:txt-large={fontSize === "large"}
+  class:txt-medium={fontSize === "medium"}
+  class:txt-regular={fontSize === "regular"}
+  class:txt-small={fontSize === "small"}
+  class:txt-tiny={fontSize === "tiny"}>
+  {@html dompurify.sanitize(formatInlineTitle(escape(content)))}
+</span>
diff --git a/src/components/IssueTeaser.svelte b/src/components/IssueTeaser.svelte
index 2f3c387..6585170 100644
--- a/src/components/IssueTeaser.svelte
+++ b/src/components/IssueTeaser.svelte
@@ -4,6 +4,7 @@
   import { formatOid } from "@app/lib/utils";
 
   import Icon from "./Icon.svelte";
+  import InlineTitle from "./InlineTitle.svelte";
   import NodeId from "./NodeId.svelte";
 
   export let issue: Issue;
@@ -60,7 +61,7 @@
       class="global-flex"
       style:flex-direction="column"
       style:align-items="flex-start">
-      {issue.title}
+      <InlineTitle content={issue.title} />
       <div class="global-flex txt-small">
         <NodeId
           nodeId={issue.author.did.replace("did:key:", "")}
diff --git a/src/components/PatchTeaser.svelte b/src/components/PatchTeaser.svelte
index 84e8a4c..42c7d4a 100644
--- a/src/components/PatchTeaser.svelte
+++ b/src/components/PatchTeaser.svelte
@@ -4,6 +4,7 @@
   import { formatOid } from "@app/lib/utils";
 
   import Icon from "./Icon.svelte";
+  import InlineTitle from "./InlineTitle.svelte";
   import NodeId from "./NodeId.svelte";
 
   export let patch: Patch;
@@ -65,7 +66,7 @@
       class="global-flex"
       style:flex-direction="column"
       style:align-items="flex-start">
-      {patch.title}
+      <InlineTitle content={patch.title} />
       <div class="global-flex txt-small">
         <NodeId
           nodeId={patch.author.did.replace("did:key:", "")}