From b249d1105a29efd5bd1ddfa98c98e5e76d277f10 Mon Sep 17 00:00:00 2001
From: Jacob Mischka <jacob@mischka.me>
Date: Wed, 5 Jul 2023 15:33:59 -0500
Subject: [PATCH] Add io.display.html to display rendered HTML inline

Closes T-1070
---
 src/classes/IOClient.ts     | 12 ++++++++++++
 src/examples/basic/index.ts | 32 ++++++++++++++++++++++++++++++++
 src/ioSchema.ts             |  7 +++++++
 3 files changed, 51 insertions(+)

diff --git a/src/classes/IOClient.ts b/src/classes/IOClient.ts
index 9002b4b..ae05a83 100644
--- a/src/classes/IOClient.ts
+++ b/src/classes/IOClient.ts
@@ -1007,6 +1007,18 @@ export class IOClient {
          * ```
          */
         markdown: this.createIOMethod('DISPLAY_MARKDOWN'),
+        /**
+         * Displays rendered HTML to the action user.
+         *
+         * **Usage:**
+         *
+         * ```typescript
+         * await io.display.html("Message body", {
+         *   html: `<p>Hello, <b>world</b>!<p>`
+         * });
+         * ```
+         */
+        html: this.createIOMethod('DISPLAY_HTML'),
         /**
          * Displays an image to the action user.
          *
diff --git a/src/examples/basic/index.ts b/src/examples/basic/index.ts
index 51e8190..710a872 100644
--- a/src/examples/basic/index.ts
+++ b/src/examples/basic/index.ts
@@ -550,6 +550,38 @@ const interval = new Interval({
         return 'Pong!'
       },
     }),
+    html: async () => {
+      await io.display.markdown('Done!')
+
+      await io.display.html('HTML', {
+        html: '<p>Hello, world!</p>',
+      })
+
+      const richText = await io.input.richText('Text', {})
+
+      await io.display.html('What you entered', {
+        html: richText,
+      })
+
+      await io.display.html('Restricted', {
+        html: `
+        <h2>Heading 2</h2>
+          <script>alert('hello, world!');</script>
+          <noscript>No script.</noscript>
+          <style>html { color: red; }</style>
+
+          <form method="POST">
+            <button onclick="window.alert">Button</button>
+          </form>
+
+          <iframe src="https://interval.com"></iframe>
+
+          <p class="text-xl" style="color: red;">Hello, in red!</p>
+          <p class="text-lg">
+          </html>drop table users;
+        `,
+      })
+    },
     inputRightAfterDisplay: async () => {
       await io.display.link('Display', {
         url: '',
diff --git a/src/ioSchema.ts b/src/ioSchema.ts
index db0e25a..9b7058c 100644
--- a/src/ioSchema.ts
+++ b/src/ioSchema.ts
@@ -476,6 +476,13 @@ const DISPLAY_SCHEMA = {
     state: z.null(),
     returns: z.null(),
   },
+  DISPLAY_HTML: {
+    props: z.object({
+      html: z.string(),
+    }),
+    state: z.null(),
+    returns: z.null(),
+  },
   DISPLAY_IMAGE: {
     props: imageSchema,
     state: z.null(),