Add images output support

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>
   }
 }

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",

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
    *

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;
     })