Fix tab in textareas

Author: javalikescript

extensions/web-base/www/app.html

@@ -334,7 +334,8 @@
       <option v-for="ev in enumValues" :value="ev.const">{{ev.title}}</option>
     </select>
     <template v-else-if="schema.type === 'string'">
-      <textarea v-if="schema.contentMediaType && schema.contentMediaType.startsWith('text/')" v-model="value" spellcheck="false" wrap="off" placeholder="Text Value" :readonly="schema.readOnly"></textarea>
+      <textarea v-if="schema.contentMediaType && schema.contentMediaType.startsWith('text/')" v-model="value" v-on:keydown.tab.prevent="insertTab"
+        spellcheck="false" wrap="off" placeholder="Text Value" :readonly="schema.readOnly"></textarea>
       <input v-else v-model="value" :readonly="schema.readOnly" :type="schema.writeOnly ? 'password' : 'text'" placeholder="String Value">
     </template>
     <input v-else-if="schema.type === 'number' || schema.type === 'integer'" v-model="value" :readonly="schema.readOnly" type="number" placeholder="Number Value">

extensions/web-base/www/app/utils.js

@@ -234,6 +234,13 @@ function rejectIfNotOk(response) {
   return Promise.reject(response.statusText);
 }
 
+function insertTab(e) {
+  var t = e && e.target;
+  if (t && t.setRangeText) {
+    t.setRangeText('\t', t.selectionStart, t.selectionStart, 'end');
+  }
+}
+
 function findAncestor(el, selector) {
   if (el) {
     while (true) {

extensions/web-notes/web-note.xml

@@ -15,6 +15,7 @@
     <button v-on:click="app.back()" title="Close"><i class="fa fa-window-close"></i></button>
   </template>
   <article class="content">
-    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" spellcheck="false" wrap="off" class="full" style="font-size: 2rem" placeholder="Enter your note here"></textarea>
+    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" v-on:keydown.tab.prevent="insertTab"
+      spellcheck="false" wrap="off" class="full" style="font-size: 2rem" placeholder="Enter your note here"></textarea>
   </article>
 </app-page>

extensions/web-scripts/script-editor.xml

@@ -13,6 +13,7 @@
     <button v-on:click="onSave" title="Save"><i class="far fa-save"></i></button>
   </template>
   <article class="content">
-    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" spellcheck="false" wrap="off" class="full" placeholder="Enter your Lua script here"></textarea>
+    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" v-on:keydown.tab.prevent="insertTab"
+      spellcheck="false" wrap="off" class="full" placeholder="Enter your Lua script here"></textarea>
   </article>
 </app-page>

extensions/web-scripts/script-view.xml

@@ -14,6 +14,6 @@
     <button v-on:click="onSave" title="Save"><i class="far fa-save"></i></button>
   </template>
   <article class="content">
-    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" spellcheck="false" wrap="off" class="full"></textarea>
+    <textarea v-model="text" v-on:keydown.ctrl.s.exact.prevent.stop="onSave()" v-on:keydown.tab.prevent="insertTab" spellcheck="false" wrap="off" class="full"></textarea>
   </article>
 </app-page>

extensions/web-scripts/view-schema.json

@@ -15,7 +15,7 @@
     },
     "icon": {
       "title": "Icon",
-      "description": "The fontawesome icon to use for the view tile and menu entry, such as 'house'",
+      "description": "The fontawesome icon to use for the view tile and menu entry, such as 'home'",
       "type": "string"
     },
     "properties": {

extensions/web-tools/web-tools.xml

@@ -27,12 +27,12 @@
     <button v-on:click="saveConfig"><i class="far fa-save"></i>&nbsp;Save Configuration</button>
     <button v-on:click="saveData"><i class="far fa-save"></i>&nbsp;Save Data</button>
     <p>Lua</p>
-    <textarea ref="lua" v-model="lua" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Enter your Lua code here"></textarea>
+    <textarea ref="lua" v-model="lua" v-on:keydown.tab.prevent="insertTab" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Enter your Lua code here"></textarea>
     <button v-on:click="run"><i class="fas fa-redo"></i>&nbsp;Run</button>
-    <textarea v-model="luaOut" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Output" readonly></textarea>
+    <textarea v-model="luaOut" v-on:keydown.tab.prevent="insertTab" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Output" readonly></textarea>
     <p>System</p>
-    <textarea ref="cmd" v-model="cmd" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Enter your command here"></textarea>
+    <textarea ref="cmd" v-model="cmd" v-on:keydown.tab.prevent="insertTab" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Enter your command here"></textarea>
     <button v-on:click="execute"><i class="fas fa-redo"></i>&nbsp;Execute</button>
-    <textarea v-model="cmdOut" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Output" readonly></textarea>
+    <textarea v-model="cmdOut" v-on:keydown.tab.prevent="insertTab" spellcheck="false" rows="12" wrap="off" style="width: 100%; resize: none;" placeholder="Output" readonly></textarea>
   </page-article>
 </app-page>