ui: fix fileio pretest

packages/ui-default/components/scratchpad/DataInputComponent.jsx

@@ -13,20 +13,28 @@ export default function DataInputComponent(props) {
   const cn = classNames(className, 'flex-col flex-fill');
   return (
     <div {...rest} className={cn}>
-      {html // eslint-disable-next-line react/no-danger
-        ? <div className="scratchpad__data-input" wrap="off"><pre dangerouslySetInnerHTML={{ __html: value }} /></div>
-        : (
-          <textarea
-            className="scratchpad__data-input"
-            wrap="off"
-            value={value}
-            onChange={(ev) => {
-              ev.stopPropagation();
-              onChange(ev.target.value);
-            }}
-            placeholder={title}
-          />
-        )}
+      {html ? (
+        <div
+          className="scratchpad__data-input"
+          style={{ overflowY: 'scroll' }}
+          wrap="off"
+          contentEditable
+        >
+          {/* eslint-disable-next-line react/no-danger */}
+          <pre dangerouslySetInnerHTML={{ __html: value }} />
+        </div>
+      ) : (
+        <textarea
+          className="scratchpad__data-input"
+          wrap="off"
+          value={value}
+          onChange={(ev) => {
+            ev.stopPropagation();
+            onChange(ev.target.value);
+          }}
+          placeholder={title}
+        />
+      )}
     </div>
   );
 }

packages/ui-default/components/scratchpad/ScratchpadToolbarContainer.jsx

@@ -90,9 +90,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
     }
     const keys = Object.keys(LANGS);
     if (!keys.includes(this.props.editorLang)) this.props.setEditorLanguage(keys[0]);
+    const canUsePretest = ['default', 'fileio'].includes(UiContext.pdoc.config?.type);
     return (
       <Toolbar>
-        {UiContext.pdoc.config?.type === 'default' && (
+        {canUsePretest && (
           <ToolbarButton
             disabled={this.props.isPosting || this.props.isRunning}
             className="scratchpad__toolbar__pretest"
@@ -156,7 +157,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
           </select>
         </ToolbarItem>
         <ToolbarSplit />
-        {['default', 'fileio'].includes(UiContext.pdoc.config?.type) && (
+        {canUsePretest && (
           <ToolbarButton
             activated={this.props.pretestVisible}
             onClick={() => this.props.togglePanel('pretest')}