From 42994c447467f9cc79b2c55df99bf3c9e3f3ca70 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Mon, 7 Dec 2020 14:35:08 +0100
Subject: [PATCH] allow markup in instructions

---
 src/open/ClientView.js      | 17 ++++++++++++++---
 src/open/ClientViewModel.js |  6 +++++-
 src/open/clients/Nheko.js   |  6 +++---
 src/open/types.js           |  6 ++++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/open/ClientView.js b/src/open/ClientView.js
index 17721c7..3cf76e5 100644
--- a/src/open/ClientView.js
+++ b/src/open/ClientView.js
@@ -16,7 +16,7 @@ limitations under the License.
 
 import {TemplateView} from "../utils/TemplateView.js";
 import {copy} from "../utils/copy.js";
-import {text} from "../utils/html.js";
+import {text, tag} from "../utils/html.js";
 
 function formatPlatforms(platforms) {
 	return platforms.reduce((str, p, i, all) => {
@@ -26,6 +26,16 @@ function formatPlatforms(platforms) {
 	}, "");
 }
 
+function renderInstructions(parts) {
+    return parts.map(p => {
+        if (p.type === "code") {
+            return tag.code(p.text);
+        } else {
+            return text(p);
+        }
+    });
+}
+
 export class ClientView extends TemplateView {
 
 	render(t, vm) {
@@ -66,7 +76,8 @@ class InstallClientView extends TemplateView {
 	render(t, vm) {
 		const children = [];
 
-		if (vm.textInstructions) {
+        const textInstructions = vm.textInstructions;
+		if (textInstructions) {
             const copyButton = t.button({
                 className: "copy",
                 onClick: evt => {
@@ -78,7 +89,7 @@ class InstallClientView extends TemplateView {
                     }
                 }
             });
-			children.push(t.p({className: "instructions"}, [t.code(vm.textInstructions), copyButton]));
+			children.push(t.p({className: "instructions"}, renderInstructions(textInstructions).concat(copyButton)));
 		}
 
 		const actions = t.div({className: "actions"}, vm.actions.map(a => {
diff --git a/src/open/ClientViewModel.js b/src/open/ClientViewModel.js
index dd2fb43..9e4d6f1 100644
--- a/src/open/ClientViewModel.js
+++ b/src/open/ClientViewModel.js
@@ -110,7 +110,11 @@ export class ClientViewModel extends ViewModel {
 	}
 
 	get textInstructions() {
-		return this._client.getLinkInstructions(this._proposedPlatform, this._link);
+        let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link);
+        if (!Array.isArray(instructions)) {
+            instructions = [instructions];
+        }
+		return instructions;
 	}
 
     get copyString() {
diff --git a/src/open/clients/Nheko.js b/src/open/clients/Nheko.js
index 2f860ee..0aa35ad 100644
--- a/src/open/clients/Nheko.js
+++ b/src/open/clients/Nheko.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Maturity, Platform, LinkKind, FlathubLink} from "../types.js";
+import {Maturity, Platform, LinkKind, FlathubLink, style} from "../types.js";
 
 /**
  * Information on how to deep link to a given matrix client.
@@ -33,8 +33,8 @@ export class Nheko {
 
 	getLinkInstructions(platform, link) {
 		switch (link.kind) {
-			case LinkKind.User: return `Type /invite ${link.identifier}`;
-			case LinkKind.Room: return `Type /join ${link.identifier}`;
+			case LinkKind.User: return [`Type `, style.code(`/invite ${link.identifier}`)];
+			case LinkKind.Room: return [`Type `, style.code(`/join ${link.identifier}`)];
 		}
 	}
 
diff --git a/src/open/types.js b/src/open/types.js
index 52472d6..26c3e48 100644
--- a/src/open/types.js
+++ b/src/open/types.js
@@ -109,3 +109,9 @@ export class WebsiteLink {
         return `Download from ${new URL(this._url).hostname}`;
     }
 }
+
+export const style = {
+    code(text) {
+        return {type: "code", text};
+    }
+}