Change nunjucks preview box to <textarea> (Closes #904)

package-lock.json

@@ -1703,7 +1703,7 @@
           "bundled": true,
           "dev": true
         },
-        "cryptiles": {
+        "cryptile": {
           "version": "2.0.5",
           "bundled": true,
           "dev": true,

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>
+        <textarea className="danger" value={error || 'Error'} readOnly/>
-          <code className="block danger selectable">{error || <span>&nbsp;</span>}</code>
-        </pre>
       );
     } else if (rendering) {
       previewElement = (
-        <pre>
+        <textarea value="rendering..." readOnly/>
-          <code className="block"><span className="faint italic">rendering...</span></code>
-        </pre>
       );
     } else {
       previewElement = (
-        <pre>
+        <textarea value={preview || 'error'} readOnly rows={5}/>
-          <code className="block selectable scrollable force-wrap">{preview ||
-          <span>&nbsp;</span>}</code>
-        </pre>
       );
     }
 

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>
+              ? <textarea className="danger" value={error || 'Error'} readOnly/>
-              : <code className="block selectable">{preview || <span>&nbsp;</span>}</code>
+              : <textarea value={preview || ''} readOnly/>
             }
           </label>
         </div>