Fix "indent with tabs" being ignored

* Fixes it so pressing enter to go onto a new line, will make it
  so that it'll go underneith the previous code. Whether it's a tab
  or space.
* Fixes it so that when you press shift+tab, it'll remove it once
  rather than going back to the start.
* Fixes it so you can either ident by spaces or tabs again.

Downstream task: https://phabricator.wikimedia.org/T355816

Change-Id: I592fcc42d4c5271ea8207d4e291248f57c373c87
(cherry picked from commit 4e882088573fd3915f16fe685a78b2f40f944d51)

web/element/codemirror-element.ts

diff --git a/web/element/codemirror-element.ts b/web/element/codemirror-element.ts
index 98dd811..ac1c317 100644
--- a/web/element/codemirror-element.ts
+++ b/web/element/codemirror-element.ts
@@ -145,7 +145,7 @@
               // press ctrl+s/cmd+s after, it would trigger the
               // web browsers file browser rather then gr-editor-view
               // intercepting ctrl+s/cmd+s.
-              if ((e.metaKey || e.ctrlKey) && e.key == 'v') {
+              if ((e.metaKey || e.ctrlKey) && e.key === 'v') {
                 e.stopPropagation();
               }
             },

web/element/extensions.ts

diff --git a/web/element/extensions.ts b/web/element/extensions.ts
index 1f59c35..2322a37 100644
--- a/web/element/extensions.ts
+++ b/web/element/extensions.ts
@@ -28,7 +28,6 @@
   history,
   historyKeymap,
   indentWithTab,
-  insertTab,
 } from '@codemirror/commands';
 import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete';
@@ -60,15 +59,16 @@
     },
   });
 
-const tabsOrSpaces = () =>
+const fixedHeightEditor = (height: number) =>
   EditorView.theme({
-    '.cm-tab:before': {
-      color: '#5f6368',
-      content: "'\\2192'",
-      position: 'absolute',
-    },
+    '&': {height: `${height}px`},
+    '.cm-scroller': {overflow: 'auto'},
+  });
 
+const hideTabsAndSpaces = () =>
+  EditorView.theme({
     // Class is created and used by highlightWhitespace()
+    // This hides tabs unless show_tabs is enabled in prefs.
     '.cm-highlightTab': {
       'background-image': 'none',
       'background-size': 'none',
@@ -77,20 +77,24 @@
       display: 'inline-block',
       'text-decoration': 'inherit',
     },
-    '.cm-highlightTab:before': {
-      color: '#5f6368',
-      content: "'\\2192'",
-      position: 'absolute',
-    },
     '.cm-highlightSpace:before': {
       content: "''",
     },
   });
 
-const fixedHeightEditor = (height: number) =>
+const tabTheme = () =>
   EditorView.theme({
-    '&': {height: `${height}px`},
-    '.cm-scroller': {overflow: 'auto'},
+    '.cm-tab:before': {
+      color: '#5f6368',
+      content: "'\\2192'",
+      position: 'absolute',
+    },
+    // Class is created and used by highlightWhitespace()
+    '.cm-highlightTab:before': {
+      color: '#5f6368',
+      content: "'\\2192'",
+      position: 'absolute',
+    },
   });
 
 export const extensions = (
@@ -100,17 +104,6 @@
   fileContent?: string,
   darkMode?: boolean
 ) => {
-  // This uses the preference to detect whether
-  // to use 'tabs' when you use the tab button
-  // or to use 'spaces' when using the tab button.
-  const tab = prefs?.indent_with_tabs
-    ? {
-        key: 'Tab',
-        preventDefault: true,
-        run: insertTab,
-      }
-    : indentWithTab;
-
   const codeExtensions: Array<Extension> = [
     lineNumbers(),
     highlightActiveLineGutter(),
@@ -127,28 +120,25 @@
       ...searchKeymap,
       ...historyKeymap,
       ...foldKeymap,
-      tab,
+      indentWithTab,
     ]),
     trailingspace(),
-    tabsOrSpaces(),
     fixedHeightEditor(height),
     colorTheme(darkMode ?? false),
+    EditorState.tabSize.of(prefs?.tab_size ?? 0),
+    highlightWhitespace(),
+    hideTabsAndSpaces(),
   ];
 
   if (!prefs) return codeExtensions;
 
-  if (prefs.line_length && prefs.line_length > 0) {
+  if (prefs.line_length) {
     codeExtensions.push(rulerPlugin);
   }
 
   if (prefs.auto_close_brackets) {
     codeExtensions.push(closeBrackets());
   }
-
-  if (prefs.indent_unit && prefs.indent_unit >= 0) {
-    codeExtensions.push(indentUnit.of(' '.repeat(prefs.indent_unit)));
-  }
-
   if (prefs.line_wrapping) {
     codeExtensions.push(EditorView.lineWrapping);
   }
@@ -165,17 +155,19 @@
   }
 
   if (prefs.show_tabs) {
-    codeExtensions.push(highlightWhitespace());
+    codeExtensions.push(tabTheme());
+  }
+
+  if (prefs.indent_with_tabs) {
+    codeExtensions.push(indentUnit.of('\t'));
+  } else {
+    codeExtensions.push(indentUnit.of(' '.repeat(prefs.indent_unit ?? 0)));
   }
 
   if (prefs.show_whitespace_errors) {
     codeExtensions.push(highlightTrailingWhitespace());
   }
 
-  if (prefs.tab_size && prefs.tab_size >= 0) {
-    codeExtensions.push(EditorState.tabSize.of(prefs.tab_size));
-  }
-
   if (fileContent?.includes('\r\n')) {
     codeExtensions.push(EditorState.lineSeparator.of('\r\n'));
   }

web/element/ruler.ts

diff --git a/web/element/ruler.ts b/web/element/ruler.ts
index 946fa29..3d5bf76 100644
--- a/web/element/ruler.ts
+++ b/web/element/ruler.ts
@@ -37,7 +37,7 @@
       `;
       // TODO: This should be equal to the amount of padding on a line.
       // This value should be extracted from CodeMirror rather than hardcoded.
-      rulerElement.style.width = `4px`;
+      rulerElement.style.width = '4px';
     }
 
     destroy() {
@@ -46,9 +46,9 @@
   }
 
   function updateRulerWidth(
-      newWidth: number,
-      defaultWidth: number,
-      force = false
+    newWidth: number,
+    defaultWidth: number,
+    force = false
   ) {
     if ((newWidth !== width || force) && rulerElement) {
       width = newWidth;