From 4bd9b166cfe91c262c2d7fceca9e1b3059ba5dfe Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 26 Apr 2018 12:22:08 -0400
Subject: [PATCH] Change nunjucks preview box to <textarea> (Closes #904)

---
 package-lock.json                                   |  2 +-
 .../app/ui/components/templating/tag-editor.js      | 13 +++----------
 .../app/ui/components/templating/variable-editor.js |  4 ++--
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 90b54309ec..55a2666b58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1703,7 +1703,7 @@
           "bundled": true,
           "dev": true
         },
-        "cryptiles": {
+        "cryptile": {
           "version": "2.0.5",
           "bundled": true,
           "dev": true,
diff --git a/packages/insomnia-app/app/ui/components/templating/tag-editor.js b/packages/insomnia-app/app/ui/components/templating/tag-editor.js
index 567e8232bf..f408aa6c49 100644
--- a/packages/insomnia-app/app/ui/components/templating/tag-editor.js
+++ b/packages/insomnia-app/app/ui/components/templating/tag-editor.js
@@ -564,22 +564,15 @@ class TagEditor extends React.PureComponent<Props, State> {
     let previewElement;
     if (error) {
       previewElement = (
-        <pre>
-          <code className="block danger selectable">{error || <span>&nbsp;</span>}</code>
-        </pre>
+        <textarea className="danger" value={error || 'Error'} readOnly/>
       );
     } else if (rendering) {
       previewElement = (
-        <pre>
-          <code className="block"><span className="faint italic">rendering...</span></code>
-        </pre>
+        <textarea value="rendering..." readOnly/>
       );
     } else {
       previewElement = (
-        <pre>
-          <code className="block selectable scrollable force-wrap">{preview ||
-          <span>&nbsp;</span>}</code>
-        </pre>
+        <textarea value={preview || 'error'} readOnly rows={5}/>
       );
     }
 
diff --git a/packages/insomnia-app/app/ui/components/templating/variable-editor.js b/packages/insomnia-app/app/ui/components/templating/variable-editor.js
index 1dbd98d8bc..5d8f49e729 100644
--- a/packages/insomnia-app/app/ui/components/templating/variable-editor.js
+++ b/packages/insomnia-app/app/ui/components/templating/variable-editor.js
@@ -93,8 +93,8 @@ class VariableEditor extends PureComponent {
         <div className="form-control form-control--outlined">
           <label>Live Preview
             {error
-              ? <code className="block danger selectable">{error || <span>&nbsp;</span>}</code>
-              : <code className="block selectable">{preview || <span>&nbsp;</span>}</code>
+              ? <textarea className="danger" value={error || 'Error'} readOnly/>
+              : <textarea value={preview || ''} readOnly/>
             }
           </label>
         </div>