Add list<->text toggle for raw tag editor

css/80_app.css

@@ -259,10 +259,12 @@ table.tags, table.tags td, table.tags th {
 .ar { right: 0; }
 
 input.hide,
+textarea.hide,
 div.hide,
 form.hide,
 button.hide,
 a.hide,
+ul.hide,
 li.hide {
     display: none;
 }
@@ -2400,8 +2402,26 @@ div.combobox {
 
 /* Raw Tag Editor
 ------------------------------------------------------- */
+.raw-tag-options {
+    display: flex;
+    flex-flow: row nowrap;
+    flex-direction: row-reverse;
+    margin-top: -25px;
+}
+.raw-tag-option {
+    padding: 5px;
+}
+
+.tag-text {
+    width: 100%;
+    height: 100%;
+    font-family: monospace;
+    white-space: pre;
+}
+
+.tag-text,
 .tag-list {
-    padding-top: 10px;
+    margin-top: 10px;
 }
 .tag-row {
     width: 100%;

modules/ui/raw_tag_editor.js

@@ -75,6 +75,51 @@ export function uiRawTagEditor(context) {
             rowData.push({ index: _indexedKeys.length, key: '', value: '' });
         }
 
+        // --------- EXPERIMENT!
+        var options = wrap.selectAll('.raw-tag-options')
+            .data([0])
+
+        var optionsEnter = options.enter()
+            .append('div')
+            .attr('class', 'raw-tag-options');
+
+        var optionEnter = optionsEnter.selectAll('.raw-tag-option')
+            .data(['text', 'list'])
+            .enter();
+
+        optionEnter
+            .append('a')
+            .attr('class', 'raw-tag-option')
+            .attr('href', '#')
+            .text(function(d) { return d; })
+            .on('click', function(d) {
+                wrap.selectAll('.tag-text')
+                    .classed('hide', (d === 'list'));
+                wrap.selectAll('.tag-list, .add-row')
+                    .classed('hide', (d === 'text'));
+            });
+
+
+        var textarea = wrap.selectAll('.tag-text')
+            .data([0]);
+
+        textarea = textarea.enter()
+            .append('textarea')
+            .attr('class', 'tag-text hide')
+            .merge(textarea);
+
+        textarea
+            .attr('rows', rowData.length + 1)
+            .text(asText(rowData));
+
+        function asText(rows) {
+            return rows
+                .filter(function(row) { return row.key && row.key.trim() !== ''; })
+                .map(function(row) { return row.key + '=' + row.value; })
+                .join('\n') + '\n';
+        }
+        // --------- END
+
         // List of tags
         var list = wrap.selectAll('.tag-list')
             .data([0]);