From 49e3805099631bae93d1eb91f032447d5c62c7cd Mon Sep 17 00:00:00 2001
From: x1unix <denis0051@gmail.com>
Date: Fri, 11 Mar 2022 23:34:21 +0100
Subject: [PATCH 1/3] web: add image output support

---
 web/src/components/preview/EvalEventView.tsx | 21 ++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/components/preview/EvalEventView.tsx b/web/src/components/preview/EvalEventView.tsx
index 70d2b8c6..b960e9b8 100644
--- a/web/src/components/preview/EvalEventView.tsx
+++ b/web/src/components/preview/EvalEventView.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import './EvalEventView.css';
 
+const imageSectionPrefix = 'IMAGE:';
+const base64RegEx = /^[A-Za-z0-9+/]+[=]{0,2}$/;
 const nanosec = 1000000;
 
 interface ViewData {
@@ -12,6 +14,15 @@ interface ViewData {
 
 const pad = (num: number, size: number) => ('000000000' + num).substr(-size);
 
+const isImageLine = (message: string) => {
+  if (!message?.startsWith(imageSectionPrefix)) {
+    return [false, null];
+  }
+
+  const payload = message.substring(imageSectionPrefix.length).trim();
+  return [base64RegEx.test(payload), payload];
+};
+
 export default class EvalEventView extends React.Component<ViewData> {
   get delay() {
     const msec = this.props.delay / nanosec;
@@ -23,9 +34,15 @@ export default class EvalEventView extends React.Component<ViewData> {
   }
 
   render() {
+    const { message, showDelay } = this.props;
+    const [isImage, payload] = isImageLine(message);
     return <div className="evalEvent">
-      <pre className={this.domClassName}>{this.props.message}</pre>
-      <span className="evalEvent__delay">{this.props.showDelay ? `[${this.delay}]` : ''}</span>
+      { isImage ? (
+        <img src={`data:image;base64,${payload}`} alt=""/>
+      ) : (
+        <pre className={this.domClassName}>{message}</pre>
+      )}
+      <span className="evalEvent__delay">{showDelay ? `[${this.delay}]` : ''}</span>
     </div>
   }
 }

From ceaf528168f725a43852b902936eeaffd2f7dcfe Mon Sep 17 00:00:00 2001
From: x1unix <denis0051@gmail.com>
Date: Sat, 12 Mar 2022 02:06:06 +0100
Subject: [PATCH 2/3] web: add custom icon support for snippets

---
 web/src/services/go/snippets.ts | 5 +++++
 web/src/utils/headerutils.ts    | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/services/go/snippets.ts b/web/src/services/go/snippets.ts
index 28382e73..b43ab21e 100644
--- a/web/src/services/go/snippets.ts
+++ b/web/src/services/go/snippets.ts
@@ -16,6 +16,11 @@ export interface Snippet {
    */
   type?: SnippetType
 
+  /**
+   * Custom icon for snippet. Overrides snippet type.
+   */
+  icon?: string
+
   /**
    * Snippet is snipped ID to be loaded
    *
diff --git a/web/src/utils/headerutils.ts b/web/src/utils/headerutils.ts
index ffbbd9e7..c49828d9 100644
--- a/web/src/utils/headerutils.ts
+++ b/web/src/utils/headerutils.ts
@@ -34,7 +34,7 @@ export const getSnippetsMenuItems = (handler: (s: SnippetMenuItem) => void) => {
       return {
         key: `${i}-${ii}`,
         text: item.label,
-        iconProps: getSnippetIconProps(item.type),
+        iconProps: item.icon ? { iconName: item.icon } : getSnippetIconProps(item.type),
         onClick: () => handler(item)
       } as IContextualMenuItem;
     })

From 40089a02ebc674d313ec84b023cec452192998ce Mon Sep 17 00:00:00 2001
From: x1unix <denis0051@gmail.com>
Date: Sat, 12 Mar 2022 02:16:51 +0100
Subject: [PATCH 3/3] web: add image output snippets

---
 web/src/services/go/snippets.json | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/src/services/go/snippets.json b/web/src/services/go/snippets.json
index d08acff5..3d806018 100644
--- a/web/src/services/go/snippets.json
+++ b/web/src/services/go/snippets.json
@@ -126,6 +126,13 @@
         "snippet": "0_bu1o8rIBO"
       }
   ],
+  "Playground features": [
+    {
+      "label": "Display image",
+      "snippet": "XN6x3L23Vok",
+      "icon": "FileImage"
+    }
+  ],
   "Other examples": [
     {
       "label": "Random number",