Merge pull request #1316 from interval/display-html

Add io.display.html to display rendered HTML inline

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.
          *

src/examples/basic/index.ts

@@ -573,6 +573,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: '',

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(),