diff --git a/web/BUILD b/web/BUILD
index 9b4b35b..3c91428 100644
--- a/web/BUILD
+++ b/web/BUILD
@@ -32,7 +32,6 @@
     tsconfig = ":tsconfig",
     deps = [
         "@plugins_npm//@gerritcodereview/typescript-api",
-        "@plugins_npm//@types/codemirror",
         "@plugins_npm//lit",
     ],
 )
@@ -55,9 +54,27 @@
     tsconfig = ":tsconfig",
     deps = [
         "@plugins_npm//@gerritcodereview/typescript-api",
-        "@plugins_npm//@types/codemirror",
-        "@plugins_npm//codemirror",
         "@plugins_npm//lit",
+        "@plugins_npm//@codemirror/autocomplete",
+        "@plugins_npm//@codemirror/commands",
+        "@plugins_npm//@codemirror/lang-css",
+        "@plugins_npm//@codemirror/lang-cpp",
+        "@plugins_npm//@codemirror/lang-html",
+        "@plugins_npm//@codemirror/lang-java",
+        "@plugins_npm//@codemirror/lang-javascript",
+        "@plugins_npm//@codemirror/lang-json",
+        "@plugins_npm//@codemirror/lang-markdown",
+        "@plugins_npm//@codemirror/lang-php",
+        "@plugins_npm//@codemirror/lang-python",
+        "@plugins_npm//@codemirror/lang-rust",
+        "@plugins_npm//@codemirror/lang-sql",
+        "@plugins_npm//@codemirror/lang-xml",
+        "@plugins_npm//@codemirror/language",
+        "@plugins_npm//@codemirror/language-data",
+        "@plugins_npm//@codemirror/lint",
+        "@plugins_npm//@codemirror/search",
+        "@plugins_npm//@codemirror/state",
+        "@plugins_npm//@codemirror/view",
     ],
 )
 
diff --git a/web/codemirror-imports.ts b/web/codemirror-imports.ts
deleted file mode 100644
index 6db3037..0000000
--- a/web/codemirror-imports.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import 'codemirror';
-
-import {EditorConfiguration} from 'codemirror';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'codemirror-element': CodeMirrorElement;
-  }
-}
-
-/**
- * The type `codemirror.EditorConfiguration` is just outdated, so we have to add
- * some props manually here.
- */
-export interface CodeMirrorConfig extends EditorConfiguration {
-  autoCloseBrackets?: boolean;
-  matchBrackets?: boolean;
-  showTabs?: boolean;
-  showTrailingSpace?: boolean;
-  lineSeparator?: string;
-  rulers?: false | ReadonlyArray<number | Ruler> | undefined;
-}
-
-/**
- * <codemirror-element> is defined in a separate javascript bundle, so let's
- * define its interface here.
- */
-interface CodeMirrorElement extends HTMLElement {
-  lineNum?: number;
-  params?: CodeMirrorConfig;
-}
-
-interface Ruler {
-  column: number;
-  className?: string | undefined;
-  color?: string | undefined;
-  lineStyle?: string | undefined;
-  width?: string | undefined;
-}
diff --git a/web/element/codemirror-css.ts b/web/element/codemirror-css.ts
deleted file mode 100644
index 71f9cf3..0000000
--- a/web/element/codemirror-css.ts
+++ /dev/null
@@ -1,516 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import {css} from 'lit';
-
-/**
- * This is just a copy of lib/codemirror.css.
- * We need to be able to expose this to lit.
- */
-export const codemirrorStyles = css`
-  /* BASICS */
-
-  .CodeMirror {
-    /* Set height, width, borders, and global font properties here */
-    font-family: monospace;
-    height: 300px;
-    color: black;
-    direction: ltr;
-  }
-
-  /* PADDING */
-
-  .CodeMirror-lines {
-    padding: 4px 0; /* Vertical padding around content */
-  }
-  /* @noflip */
-  .CodeMirror pre.CodeMirror-line,
-  .CodeMirror pre.CodeMirror-line-like {
-    padding: 0 4px; /* Horizontal padding of content */
-  }
-
-  .CodeMirror-scrollbar-filler,
-  .CodeMirror-gutter-filler {
-    background-color: white; /* The little square between H and V scrollbars */
-  }
-
-  /* GUTTER */
-
-  /* @noflip */
-  .CodeMirror-gutters {
-    border-right: 1px solid #ddd;
-    background-color: #f7f7f7;
-    white-space: nowrap;
-  }
-  .CodeMirror-linenumbers {
-  }
-  /* @noflip */
-  .CodeMirror-linenumber {
-    padding: 0 3px 0 5px;
-    min-width: 20px;
-    text-align: right;
-    color: #999;
-    white-space: nowrap;
-  }
-
-  .CodeMirror-guttermarker {
-    color: black;
-  }
-  .CodeMirror-guttermarker-subtle {
-    color: #999;
-  }
-
-  /* CURSOR */
-
-  /* @noflip */
-  .CodeMirror-cursor {
-    border-left: 1px solid black;
-    border-right: none;
-    width: 0;
-  }
-  /* Shown when moving in bi-directional text */
-  /* @noflip */
-  .CodeMirror div.CodeMirror-secondarycursor {
-    border-left: 1px solid silver;
-  }
-  .cm-fat-cursor .CodeMirror-cursor {
-    width: auto;
-    border: 0 !important;
-    background: #7e7;
-  }
-  .cm-fat-cursor div.CodeMirror-cursors {
-    z-index: 1;
-  }
-  .cm-fat-cursor .CodeMirror-line::selection,
-  .cm-fat-cursor .CodeMirror-line > span::selection,
-  .cm-fat-cursor .CodeMirror-line > span > span::selection {
-    background: transparent;
-  }
-  .cm-fat-cursor .CodeMirror-line::-moz-selection,
-  .cm-fat-cursor .CodeMirror-line > span::-moz-selection,
-  .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
-    background: transparent;
-  }
-  .cm-fat-cursor {
-    caret-color: transparent;
-  }
-  @-moz-keyframes blink {
-    0% {
-    }
-    50% {
-      background-color: transparent;
-    }
-    100% {
-    }
-  }
-  @-webkit-keyframes blink {
-    0% {
-    }
-    50% {
-      background-color: transparent;
-    }
-    100% {
-    }
-  }
-  @keyframes blink {
-    0% {
-    }
-    50% {
-      background-color: transparent;
-    }
-    100% {
-    }
-  }
-
-  /* Can style cursor different in overwrite (non-insert) mode */
-  .CodeMirror-overwrite .CodeMirror-cursor {
-  }
-
-  .cm-tab {
-    display: inline-block;
-    text-decoration: inherit;
-  }
-
-  .CodeMirror-rulers {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -50px;
-    bottom: 0;
-    overflow: hidden;
-  }
-  /* @noflip */
-  .CodeMirror-ruler {
-    border-left: 1px solid #ccc;
-    top: 0;
-    bottom: 0;
-    position: absolute;
-  }
-
-  /* DEFAULT THEME */
-
-  .cm-s-default .cm-header {
-    color: blue;
-  }
-  .cm-s-default .cm-quote {
-    color: #090;
-  }
-  .cm-negative {
-    color: #d44;
-  }
-  .cm-positive {
-    color: #292;
-  }
-  .cm-header,
-  .cm-strong {
-    font-weight: bold;
-  }
-  .cm-em {
-    font-style: italic;
-  }
-  .cm-link {
-    text-decoration: underline;
-  }
-  .cm-strikethrough {
-    text-decoration: line-through;
-  }
-
-  .cm-s-default .cm-keyword {
-    color: #708;
-  }
-  .cm-s-default .cm-atom {
-    color: #219;
-  }
-  .cm-s-default .cm-number {
-    color: #164;
-  }
-  .cm-s-default .cm-def {
-    color: #00f;
-  }
-  .cm-s-default .cm-variable,
-  .cm-s-default .cm-punctuation,
-  .cm-s-default .cm-property,
-  .cm-s-default .cm-operator {
-  }
-  .cm-s-default .cm-variable-2 {
-    color: #05a;
-  }
-  .cm-s-default .cm-variable-3,
-  .cm-s-default .cm-type {
-    color: #085;
-  }
-  .cm-s-default .cm-comment {
-    color: #a50;
-  }
-  .cm-s-default .cm-string {
-    color: #a11;
-  }
-  .cm-s-default .cm-string-2 {
-    color: #f50;
-  }
-  .cm-s-default .cm-meta {
-    color: #555;
-  }
-  .cm-s-default .cm-qualifier {
-    color: #555;
-  }
-  .cm-s-default .cm-builtin {
-    color: #30a;
-  }
-  .cm-s-default .cm-bracket {
-    color: #997;
-  }
-  .cm-s-default .cm-tag {
-    color: #170;
-  }
-  .cm-s-default .cm-attribute {
-    color: #00c;
-  }
-  .cm-s-default .cm-hr {
-    color: #999;
-  }
-  .cm-s-default .cm-link {
-    color: #00c;
-  }
-
-  .cm-s-default .cm-error {
-    color: #f00;
-  }
-  .cm-invalidchar {
-    color: #f00;
-  }
-
-  .CodeMirror-composing {
-    border-bottom: 2px solid;
-  }
-
-  /* Default styles for common addons */
-
-  div.CodeMirror span.CodeMirror-matchingbracket {
-    color: #0b0;
-  }
-  div.CodeMirror span.CodeMirror-nonmatchingbracket {
-    color: #a22;
-  }
-  .CodeMirror-matchingtag {
-    background: rgba(255, 150, 0, 0.3);
-  }
-  .CodeMirror-activeline-background {
-    background: #e8f2ff;
-  }
-
-  /* STOP */
-
-  /* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-  .CodeMirror {
-    position: relative;
-    overflow: hidden;
-    background: white;
-  }
-
-  /* @noflip */
-  .CodeMirror-scroll {
-    overflow: scroll !important; /* Things will break if this is overridden */
-    /* 50px is the magic margin used to hide the element's real scrollbars */
-    /* See overflow: hidden in .CodeMirror */
-    margin-bottom: -50px;
-    margin-right: -50px;
-    padding-bottom: 50px;
-    height: 100%;
-    outline: none; /* Prevent dragging from highlighting the element */
-    position: relative;
-    z-index: 0;
-  }
-  /* @noflip */
-  .CodeMirror-sizer {
-    position: relative;
-    border-right: 50px solid transparent;
-  }
-
-  /* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-  .CodeMirror-vscrollbar,
-  .CodeMirror-hscrollbar,
-  .CodeMirror-scrollbar-filler,
-  .CodeMirror-gutter-filler {
-    position: absolute;
-    z-index: 6;
-    display: none;
-    outline: none;
-  }
-  /* @noflip */
-  .CodeMirror-vscrollbar {
-    right: 0;
-    top: 0;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-  /* @noflip */
-  .CodeMirror-hscrollbar {
-    bottom: 0;
-    left: 0;
-    overflow-y: hidden;
-    overflow-x: scroll;
-  }
-  /* @noflip */
-  .CodeMirror-scrollbar-filler {
-    right: 0;
-    bottom: 0;
-  }
-  /* @noflip */
-  .CodeMirror-gutter-filler {
-    left: 0;
-    bottom: 0;
-  }
-
-  /* @noflip */
-  .CodeMirror-gutters {
-    position: absolute;
-    left: 0;
-    top: 0;
-    min-height: 100%;
-    z-index: 3;
-  }
-  .CodeMirror-gutter {
-    white-space: normal;
-    height: 100%;
-    display: inline-block;
-    vertical-align: top;
-    margin-bottom: -50px;
-  }
-  .CodeMirror-gutter-wrapper {
-    position: absolute;
-    z-index: 4;
-    background: none !important;
-    border: none !important;
-  }
-  .CodeMirror-gutter-background {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 4;
-  }
-  .CodeMirror-gutter-elt {
-    position: absolute;
-    cursor: default;
-    z-index: 4;
-  }
-  .CodeMirror-gutter-wrapper ::selection {
-    background-color: transparent;
-  }
-  .CodeMirror-gutter-wrapper ::-moz-selection {
-    background-color: transparent;
-  }
-
-  .CodeMirror-lines {
-    cursor: text;
-    min-height: 1px; /* prevents collapsing before first draw */
-  }
-  .CodeMirror pre.CodeMirror-line,
-  .CodeMirror pre.CodeMirror-line-like {
-    /* Reset some styles that the rest of the page might have set */
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    border-width: 0;
-    background: transparent;
-    font-family: inherit;
-    font-size: inherit;
-    margin: 0;
-    white-space: pre;
-    word-wrap: normal;
-    line-height: inherit;
-    color: inherit;
-    z-index: 2;
-    position: relative;
-    overflow: visible;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-variant-ligatures: contextual;
-    font-variant-ligatures: contextual;
-  }
-  .CodeMirror-wrap pre.CodeMirror-line,
-  .CodeMirror-wrap pre.CodeMirror-line-like {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    word-break: normal;
-  }
-
-  /* @noflip */
-  .CodeMirror-linebackground {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 0;
-  }
-
-  .CodeMirror-linewidget {
-    position: relative;
-    z-index: 2;
-    padding: 0.1px; /* Force widget margins to stay inside of the container */
-  }
-
-  .CodeMirror-widget {
-  }
-
-  .CodeMirror-rtl pre {
-    direction: rtl;
-  }
-
-  .CodeMirror-code {
-    outline: none;
-  }
-
-  /* Force content-box sizing for the elements where we expect it */
-  .CodeMirror-scroll,
-  .CodeMirror-sizer,
-  .CodeMirror-gutter,
-  .CodeMirror-gutters,
-  .CodeMirror-linenumber {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-  }
-
-  .CodeMirror-measure {
-    position: absolute;
-    width: 100%;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-  }
-
-  .CodeMirror-cursor {
-    position: absolute;
-    pointer-events: none;
-  }
-  .CodeMirror-measure pre {
-    position: static;
-  }
-
-  div.CodeMirror-cursors {
-    visibility: hidden;
-    position: relative;
-    z-index: 3;
-  }
-  div.CodeMirror-dragcursors {
-    visibility: visible;
-  }
-
-  .CodeMirror-focused div.CodeMirror-cursors {
-    visibility: visible;
-  }
-
-  .CodeMirror-selected {
-    background: #d9d9d9;
-  }
-  .CodeMirror-focused .CodeMirror-selected {
-    background: #d7d4f0;
-  }
-  .CodeMirror-crosshair {
-    cursor: crosshair;
-  }
-  .CodeMirror-line::selection,
-  .CodeMirror-line > span::selection,
-  .CodeMirror-line > span > span::selection {
-    background: #d7d4f0;
-  }
-  .CodeMirror-line::-moz-selection,
-  .CodeMirror-line > span::-moz-selection,
-  .CodeMirror-line > span > span::-moz-selection {
-    background: #d7d4f0;
-  }
-
-  .cm-searching {
-    background-color: #ffa;
-    background-color: rgba(255, 255, 0, 0.4);
-  }
-
-  /* Used to force a border model for a node */
-  /* @noflip */
-  .cm-force-border {
-    padding-right: 0.1px;
-  }
-
-  @media print {
-    /* Hide the cursor when printing */
-    .CodeMirror div.CodeMirror-cursors {
-      visibility: hidden;
-    }
-  }
-
-  /* See issue #2901 */
-  .cm-tab-wrap-hack:after {
-    content: '';
-  }
-
-  /* Help users use markselection to safely style text background */
-  span.CodeMirror-selectedtext {
-    background: none;
-  }
-`;
diff --git a/web/element/codemirror-element.ts b/web/element/codemirror-element.ts
index 3cdd668..d8afff6 100644
--- a/web/element/codemirror-element.ts
+++ b/web/element/codemirror-element.ts
@@ -3,17 +3,12 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import './codemirror-imports';
-
-import {EditorConfiguration} from 'codemirror';
-import {css, html, LitElement} from 'lit';
-import {customElement, property, query} from 'lit/decorators.js';
-
-import {codemirrorStyles} from './codemirror-css';
-import {dialogStyles} from './dialog-css';
-import {foldgutterStyles} from './foldgutter-css';
-import {searchMatchStyles} from './matchesonscrollbar-css';
-import {simpleScrollStyles} from './simplescrollbars-css';
+import {LitElement, css, html} from 'lit';
+import {customElement, property, query} from 'lit/decorators';
+import {EditorView} from '@codemirror/view';
+import {EditorState} from '@codemirror/state';
+import {updateRulerWidth} from './ruler';
+import {extensions} from './extensions';
 
 type ValueChangedEvent<T = string> = CustomEvent<{value: T}>;
 
@@ -26,45 +21,59 @@
   }
 }
 
+/**
+ * This is a standard REST API object:
+ * https://gerrit-review.googlesource.com/Documentation/rest-api-accounts.html#edit-preferences-info
+ *
+ * TODO: Add this object to the plugin API.
+ */
+export interface EditPreferencesInfo {
+  tab_size?: number;
+  line_length?: number;
+  indent_unit?: number;
+  show_tabs?: boolean;
+  show_whitespace_errors?: boolean;
+  syntax_highlighting?: boolean;
+  match_brackets?: boolean;
+  line_wrapping?: boolean;
+  indent_with_tabs?: boolean;
+  auto_close_brackets?: boolean;
+}
+
 @customElement('codemirror-element')
 export class CodeMirrorElement extends LitElement {
   @property({type: Number}) lineNum?: number;
 
-  @property({type: Object}) params?: EditorConfiguration;
+  @property({type: String}) fileContent?: string;
 
-  @query('#wrapper') wrapper?: HTMLElement;
+  @property({type: String}) fileType?: string;
+
+  @property({type: Object}) prefs?: EditPreferencesInfo;
+
+  @query('#wrapper')
+  wrapper!: HTMLElement;
 
   private initialized = false;
 
   static override get styles() {
     return [
-      codemirrorStyles,
-      dialogStyles,
-      foldgutterStyles,
-      searchMatchStyles,
-      simpleScrollStyles,
       css`
-        .CodeMirror {
-          font-family: var(--monospace-font-family);
+        .cm-editor {
+          font-family: 'Roboto Mono', 'SF Mono', 'Lucida Console', Monaco,
+            monospace;
+          /* CodeMirror has a default z-index of 4. Set to 0 to avoid collisions with fixed header. */
+          z-index: 0;
+          background: white;
         }
-        .CodeMirror-linenumbers {
-          background-color: var(--background-color-tertiary);
-        }
-        .CodeMirror-linenumber {
-          color: var(--deemphasized-text-color);
+        .cm-lineNumbers {
+          background-color: #f1f3f4;
         }
         .CodeMirror-ruler {
-          border-left: 1px solid var(--border-color);
+          border-left: 1px solid #ddd;
         }
-        .cm-trailingspace {
-          background-color: var(--error-background);
-          border: 1px solid var(--error-foreground);
-          border-radius: 2px;
-        }
-        .cm-tab:before {
-          color: var(--deemphasized-text-color);
-          content: '\\2192';
-          position: absolute;
+        .cm-editor .cm-content {
+          font-family: 'Roboto Mono', 'SF Mono', 'Lucida Console', Monaco,
+            monospace;
         }
       `,
     ];
@@ -79,45 +88,66 @@
   }
 
   private initialize() {
-    if (!this.params || !this.isConnected || !this.wrapper) return;
+    if (!this.isConnected || !this.wrapper) return;
 
     if (this.initialized) return;
     this.initialized = true;
 
-    // eslint-disable-next-line new-cap
-    const cm = CodeMirror(this.wrapper, this.params);
-    setTimeout(() => {
-      const offsetTop = this.getBoundingClientRect().top;
-      const clientHeight = window.innerHeight ?? document.body.clientHeight;
-      // We are setting a fixed height, because for large files we want to
-      // benefit from CodeMirror's virtual scrolling.
-      // 80px is roughly the size of the bottom margins plus the footer height.
-      // This ensures the height of the textarea doesn't push out of screen.
-      const height = clientHeight - offsetTop - 80;
-      cm.refresh();
-      cm.focus();
-      cm.setSize(null, height < 600 ? 600 : height);
-      if (this.lineNum) {
-        // We have to take away one from the line number,
-        // because CodeMirror's line count is zero-based.
-        cm.setCursor(this.lineNum - 1);
-      }
-    }, 1);
-    cm.on('change', e => {
-      this.dispatchEvent(
-        new CustomEvent('content-change', {
-          detail: {value: e.getValue()},
-          bubbles: true,
-          composed: true,
-        })
-      );
+    const offsetTop = this.getBoundingClientRect().top;
+    const clientHeight = window.innerHeight ?? document.body.clientHeight;
+    // We are setting a fixed height, because for large files we want to
+    // benefit from CodeMirror's virtual scrolling.
+    // 80px is roughly the size of the bottom margins plus the footer height.
+    // This ensures the height of the textarea doesn't push out of screen.
+    const height = clientHeight - offsetTop - 80;
+
+    const editor = new EditorView({
+      state: EditorState.create({
+        doc: this.fileContent ?? '',
+        extensions: [
+          ...extensions(
+            height,
+            this.prefs,
+            this.fileType,
+            this.fileContent ?? ''
+          ),
+          EditorView.updateListener.of(update => {
+            if (this.prefs?.line_length) {
+              // This is required to be in the setTimeout() to ensure the
+              // line is set as correctly as possible.
+              updateRulerWidth(this.prefs.line_length, update.view.defaultCharacterWidth, true);
+            }
+
+            if (update.docChanged) {
+              this.dispatchEvent(
+                new CustomEvent('content-change', {
+                  detail: {value: update.state.doc.toString()},
+                  bubbles: true,
+                  composed: true,
+                })
+              );
+            }
+          }),
+          EditorView.domEventHandlers({
+            keydown(e: KeyboardEvent) {
+              // Exempt the ctrl/command+s key from preventing events from propagating
+              // through the app. This is because we use it to save changes.
+              if (!e.metaKey && !e.ctrlKey) {
+                e.stopPropagation();
+              }
+            },
+          })
+        ],
+      }),
+      parent: this.wrapper as Element,
     });
-    cm.getInputField().addEventListener('keydown', e => {
-      // Exempt the ctrl/command+s key from preventing events from propagating
-      // through the app. This is because we use it to save changes.
-      if (!e.metaKey && !e.ctrlKey) {
-        e.stopPropagation();
-      }
-    });
+
+    editor.focus();
+
+    if (this.lineNum) {
+      // We have to take away one from the line number,
+      // ... because CodeMirror's line count is zero-based.
+      editor.dispatch({selection: {anchor: this.lineNum - 1}});
+    }
   }
 }
diff --git a/web/element/codemirror-imports.ts b/web/element/codemirror-imports.ts
deleted file mode 100644
index a79193e..0000000
--- a/web/element/codemirror-imports.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import 'codemirror';
-import 'codemirror/addon/dialog/dialog';
-import 'codemirror/addon/display/rulers';
-import 'codemirror/addon/edit/closebrackets';
-import 'codemirror/addon/edit/closetag';
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/addon/edit/matchtags';
-import 'codemirror/addon/edit/trailingspace';
-import 'codemirror/addon/scroll/annotatescrollbar';
-import 'codemirror/addon/scroll/simplescrollbars';
-import 'codemirror/addon/search/matchesonscrollbar';
-import 'codemirror/addon/search/jump-to-line';
-import 'codemirror/addon/search/matchesonscrollbar';
-import 'codemirror/addon/search/searchcursor';
-import 'codemirror/addon/search/search';
-import 'codemirror/addon/mode/simple';
-import 'codemirror/addon/mode/multiplex';
-import 'codemirror/mode/meta';
-import 'codemirror/mode/clike/clike';
-import 'codemirror/mode/clojure/clojure';
-import 'codemirror/mode/coffeescript/coffeescript';
-import 'codemirror/mode/commonlisp/commonlisp';
-import 'codemirror/mode/css/css';
-import 'codemirror/mode/d/d';
-import 'codemirror/mode/dart/dart';
-import 'codemirror/mode/diff/diff';
-import 'codemirror/mode/django/django';
-import 'codemirror/mode/dockerfile/dockerfile';
-import 'codemirror/mode/erlang/erlang';
-import 'codemirror/mode/go/go';
-import 'codemirror/mode/groovy/groovy';
-import 'codemirror/mode/haml/haml';
-import 'codemirror/mode/handlebars/handlebars';
-import 'codemirror/mode/haskell/haskell';
-import 'codemirror/mode/htmlembedded/htmlembedded';
-import 'codemirror/mode/htmlmixed/htmlmixed';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/jinja2/jinja2';
-import 'codemirror/mode/jsx/jsx';
-import 'codemirror/mode/julia/julia';
-import 'codemirror/mode/lua/lua';
-import 'codemirror/mode/markdown/markdown';
-import 'codemirror/mode/mllike/mllike';
-import 'codemirror/mode/nginx/nginx';
-import 'codemirror/mode/perl/perl';
-import 'codemirror/mode/php/php';
-import 'codemirror/mode/powershell/powershell';
-import 'codemirror/mode/properties/properties';
-import 'codemirror/mode/protobuf/protobuf';
-import 'codemirror/mode/puppet/puppet';
-import 'codemirror/mode/python/python';
-import 'codemirror/mode/rpm/rpm';
-import 'codemirror/mode/ruby/ruby';
-import 'codemirror/mode/sass/sass';
-import 'codemirror/mode/scheme/scheme';
-import 'codemirror/mode/shell/shell';
-import 'codemirror/mode/soy/soy';
-import 'codemirror/mode/sparql/sparql';
-import 'codemirror/mode/sql/sql';
-import 'codemirror/mode/swift/swift';
-import 'codemirror/mode/tcl/tcl';
-import 'codemirror/mode/velocity/velocity';
-import 'codemirror/mode/verilog/verilog';
-import 'codemirror/mode/vb/vb';
-import 'codemirror/mode/xml/xml';
-import 'codemirror/mode/yaml/yaml';
diff --git a/web/element/dialog-css.ts b/web/element/dialog-css.ts
deleted file mode 100644
index 917d0eb..0000000
--- a/web/element/dialog-css.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import {css} from 'lit';
-
-/**
- * This is just a copy of addon/dialog/dialog.css.
- * We need to be able to expose this to lit.
- */
-export const dialogStyles = css`
-  .CodeMirror-dialog {
-    position: absolute;
-    left: 0;
-    right: 0;
-    background: inherit;
-    z-index: 15;
-    padding: 0.1em 0.8em;
-    overflow: hidden;
-    color: inherit;
-  }
-
-  .CodeMirror-dialog-top {
-    border-bottom: 1px solid #eee;
-    top: 0;
-  }
-
-  .CodeMirror-dialog-bottom {
-    border-top: 1px solid #eee;
-    bottom: 0;
-  }
-
-  .CodeMirror-dialog input {
-    border: none;
-    outline: none;
-    background: transparent;
-    width: 20em;
-    color: inherit;
-    font-family: monospace;
-  }
-
-  .CodeMirror-dialog button {
-    font-size: 70%;
-  }
-`;
diff --git a/web/element/extensions.ts b/web/element/extensions.ts
new file mode 100644
index 0000000..41dcca2
--- /dev/null
+++ b/web/element/extensions.ts
@@ -0,0 +1,166 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {
+  EditorView,
+  keymap,
+  highlightSpecialChars,
+  drawSelection,
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightWhitespace,
+  highlightTrailingWhitespace,
+} from '@codemirror/view';
+import {EditorState, Extension} from '@codemirror/state';
+import {
+  defaultHighlightStyle,
+  indentOnInput,
+  foldGutter,
+  foldKeymap,
+  bracketMatching,
+  syntaxHighlighting,
+  indentUnit,
+} from '@codemirror/language';
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+  insertTab
+} from '@codemirror/commands';
+import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
+import {closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete';
+import {rulerPlugin} from './ruler';
+import {language} from './language';
+import {EditPreferencesInfo} from './codemirror-element';
+
+const trailingspace = () =>
+  EditorView.theme({
+    '.cm-trailingspace': {
+      'background-color': '#fce8e6',
+      "border": '1px solid #c5221f',
+      'border-radius': '2px',
+    },
+  });
+
+const tabsOrSpaces = () =>
+  EditorView.theme({
+    '.cm-tab:before': {
+      color: '#5f6368',
+      content: "'\\2192'",
+      position: 'absolute',
+    },
+
+    // Class is created and used by highlightWhitespace()
+    '.cm-highlightTab': {
+      'background-image': 'none',
+      'background-size': 'none',
+      'background-position': 'none',
+      'background-repeat': 'none',
+      "display": 'inline-block',
+      'text-decoration': 'inherit',
+    },
+    '.cm-highlightTab:before': {
+      color: '#5f6368',
+      content: "'\\2192'",
+      position: 'absolute',
+    },
+    '.cm-highlightSpace:before': {
+      content: "''",
+    },
+  });
+
+const fixedHeightEditor = (height: number) =>
+  EditorView.theme({
+    '&': {height: `${height}px`},
+    '.cm-scroller': {overflow: 'auto'},
+  });
+
+export const extensions = (
+    height: number,
+    prefs?: EditPreferencesInfo,
+    fileType?: string,
+    fileContent?: string
+) => {
+  // 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(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    highlightSelectionMatches(),
+    keymap.of([
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...searchKeymap,
+      ...historyKeymap,
+      ...foldKeymap,
+      tab
+    ]),
+    trailingspace(),
+    tabsOrSpaces(),
+    fixedHeightEditor(height),
+  ];
+
+  if (!prefs) return codeExtensions;
+
+  if (prefs.line_length && prefs.line_length > 0) {
+    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);
+  }
+
+  if (prefs.match_brackets) {
+    codeExtensions.push(bracketMatching());
+  }
+
+  if (prefs.syntax_highlighting && language(fileType)) {
+    codeExtensions.push(
+      language(fileType) as Extension,
+      syntaxHighlighting(defaultHighlightStyle, {fallback: true})
+    );
+  }
+
+  if (prefs.show_tabs) {
+    codeExtensions.push(highlightWhitespace());
+  }
+
+  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'));
+  }
+
+  return codeExtensions;
+};
diff --git a/web/element/foldgutter-css.ts b/web/element/foldgutter-css.ts
deleted file mode 100644
index d9c59c8..0000000
--- a/web/element/foldgutter-css.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import {css} from 'lit';
-
-/**
- * This is just a copy of addon/fold/foldgutter.css.
- * We need to be able to expose this to lit.
- */
-export const foldgutterStyles = css`
-  .CodeMirror-foldmarker {
-    color: blue;
-    text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px,
-      #b9f -1px 1px 2px;
-    font-family: arial;
-    line-height: 0.3;
-    cursor: pointer;
-  }
-  .CodeMirror-foldgutter {
-    width: 0.7em;
-  }
-  .CodeMirror-foldgutter-open,
-  .CodeMirror-foldgutter-folded {
-    cursor: pointer;
-  }
-  .CodeMirror-foldgutter-open:after {
-    content: '\\25BE';
-  }
-  .CodeMirror-foldgutter-folded:after {
-    content: '\\25B8';
-  }
-`;
diff --git a/web/element/language.ts b/web/element/language.ts
new file mode 100644
index 0000000..50c1f03
--- /dev/null
+++ b/web/element/language.ts
@@ -0,0 +1,378 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {StreamLanguage} from '@codemirror/language';
+
+// Languages
+import {asciiArmor} from '@codemirror/legacy-modes/mode/asciiarmor';
+import {apl} from '@codemirror/legacy-modes/mode/apl';
+import {asn1} from '@codemirror/legacy-modes/mode/asn1';
+import {asterisk} from '@codemirror/legacy-modes/mode/asterisk';
+import {brainfuck} from '@codemirror/legacy-modes/mode/brainfuck';
+import {c} from '@codemirror/legacy-modes/mode/clike';
+import {csharp} from '@codemirror/legacy-modes/mode/clike';
+import {clojure} from '@codemirror/legacy-modes/mode/clojure';
+import {cmake} from '@codemirror/legacy-modes/mode/cmake';
+import {cobol} from '@codemirror/legacy-modes/mode/cobol';
+import {coffeeScript} from '@codemirror/legacy-modes/mode/coffeescript';
+import {commonLisp} from '@codemirror/legacy-modes/mode/commonlisp';
+import {crystal} from '@codemirror/legacy-modes/mode/crystal';
+import {less, sCSS, gss} from '@codemirror/legacy-modes/mode/css';
+import {cypher} from '@codemirror/legacy-modes/mode/cypher';
+import {d} from '@codemirror/legacy-modes/mode/d';
+import {dart} from '@codemirror/legacy-modes/mode/clike';
+import {diff} from '@codemirror/legacy-modes/mode/diff';
+import {dockerFile} from '@codemirror/legacy-modes/mode/dockerfile';
+import {dtd} from '@codemirror/legacy-modes/mode/dtd';
+import {dylan} from '@codemirror/legacy-modes/mode/dylan';
+import {ebnf} from '@codemirror/legacy-modes/mode/ebnf';
+import {ecl} from '@codemirror/legacy-modes/mode/ecl';
+import {eiffel} from '@codemirror/legacy-modes/mode/eiffel';
+import {elm} from '@codemirror/legacy-modes/mode/elm';
+import {erlang} from '@codemirror/legacy-modes/mode/erlang';
+import {factor} from '@codemirror/legacy-modes/mode/factor';
+import {fcl} from '@codemirror/legacy-modes/mode/fcl';
+import {forth} from '@codemirror/legacy-modes/mode/forth';
+import {fortran} from '@codemirror/legacy-modes/mode/fortran';
+import {gas} from '@codemirror/legacy-modes/mode/gas';
+import {go} from '@codemirror/legacy-modes/mode/go';
+import {gherkin} from '@codemirror/legacy-modes/mode/gherkin';
+import {groovy} from '@codemirror/legacy-modes/mode/groovy';
+import {fSharp, oCaml} from '@codemirror/legacy-modes/mode/mllike';
+import {haskell} from '@codemirror/legacy-modes/mode/haskell';
+import {haxe, hxml} from '@codemirror/legacy-modes/mode/haxe';
+import {http} from '@codemirror/legacy-modes/mode/http';
+import {idl} from '@codemirror/legacy-modes/mode/idl';
+import {jinja2} from '@codemirror/legacy-modes/mode/jinja2';
+import {jsonld} from '@codemirror/legacy-modes/mode/javascript';
+import {julia} from '@codemirror/legacy-modes/mode/julia';
+import {kotlin} from '@codemirror/legacy-modes/mode/clike';
+import {liveScript} from '@codemirror/legacy-modes/mode/livescript';
+import {lua} from '@codemirror/legacy-modes/mode/lua';
+import {mathematica} from '@codemirror/legacy-modes/mode/mathematica';
+import {mbox} from '@codemirror/legacy-modes/mode/mbox';
+import {mirc} from '@codemirror/legacy-modes/mode/mirc';
+import {modelica} from '@codemirror/legacy-modes/mode/modelica';
+import {mscgen, msgenny} from '@codemirror/legacy-modes/mode/mscgen';
+import {mumps} from '@codemirror/legacy-modes/mode/mumps';
+import {nginx} from '@codemirror/legacy-modes/mode/nginx';
+import {nsis} from '@codemirror/legacy-modes/mode/nsis';
+import {ntriples} from '@codemirror/legacy-modes/mode/ntriples';
+import {objectiveC} from '@codemirror/legacy-modes/mode/clike';
+import {oz} from '@codemirror/legacy-modes/mode/oz';
+import {pascal} from '@codemirror/legacy-modes/mode/pascal';
+import {perl} from '@codemirror/legacy-modes/mode/perl';
+import {pig} from '@codemirror/legacy-modes/mode/pig';
+import {powerShell} from '@codemirror/legacy-modes/mode/powershell';
+import {properties} from '@codemirror/legacy-modes/mode/properties';
+import {protobuf} from '@codemirror/legacy-modes/mode/protobuf';
+import {puppet} from '@codemirror/legacy-modes/mode/puppet';
+import {q} from '@codemirror/legacy-modes/mode/q';
+import {rpmChanges, rpmSpec} from '@codemirror/legacy-modes/mode/rpm';
+import {ruby} from '@codemirror/legacy-modes/mode/ruby';
+import {sas} from '@codemirror/legacy-modes/mode/sas';
+import {sass} from '@codemirror/legacy-modes/mode/sass';
+import {scala} from '@codemirror/legacy-modes/mode/clike';
+import {scheme} from '@codemirror/legacy-modes/mode/scheme';
+import {shader} from '@codemirror/legacy-modes/mode/clike';
+import {shell} from '@codemirror/legacy-modes/mode/shell';
+import {sieve} from '@codemirror/legacy-modes/mode/sieve';
+import {sparql} from '@codemirror/legacy-modes/mode/sparql';
+import {spreadsheet} from '@codemirror/legacy-modes/mode/spreadsheet';
+import {solr} from '@codemirror/legacy-modes/mode/solr';
+import {pgSQL, plSQL, cassandra} from '@codemirror/legacy-modes/mode/sql';
+import {squirrel} from '@codemirror/legacy-modes/mode/clike';
+import {stex} from '@codemirror/legacy-modes/mode/stex';
+import {swift} from '@codemirror/legacy-modes/mode/swift';
+import {tcl} from '@codemirror/legacy-modes/mode/tcl';
+import {textile} from '@codemirror/legacy-modes/mode/textile';
+import {tiddlyWiki} from '@codemirror/legacy-modes/mode/tiddlywiki';
+import {tiki} from '@codemirror/legacy-modes/mode/tiki';
+import {toml} from '@codemirror/legacy-modes/mode/toml';
+import {troff} from '@codemirror/legacy-modes/mode/troff';
+import {ttcn} from '@codemirror/legacy-modes/mode/ttcn';
+import {ttcnCfg} from '@codemirror/legacy-modes/mode/ttcn-cfg';
+import {turtle} from '@codemirror/legacy-modes/mode/turtle';
+import {vb} from '@codemirror/legacy-modes/mode/vb';
+import {vbScript} from '@codemirror/legacy-modes/mode/vbscript';
+import {velocity} from '@codemirror/legacy-modes/mode/velocity';
+import {verilog} from '@codemirror/legacy-modes/mode/verilog';
+import {vhdl} from '@codemirror/legacy-modes/mode/vhdl';
+import {webIDL} from '@codemirror/legacy-modes/mode/webidl';
+import {xQuery} from '@codemirror/legacy-modes/mode/xquery';
+import {yacas} from '@codemirror/legacy-modes/mode/yacas';
+import {yaml} from '@codemirror/legacy-modes/mode/yaml';
+import {z80} from '@codemirror/legacy-modes/mode/z80';
+
+import {cpp} from '@codemirror/lang-cpp';
+import {css as _css} from '@codemirror/lang-css';
+import {java} from '@codemirror/lang-java';
+import {html as _html} from '@codemirror/lang-html';
+import {javascript} from '@codemirror/lang-javascript';
+import {json} from '@codemirror/lang-json';
+import {markdown} from '@codemirror/lang-markdown';
+import {php} from '@codemirror/lang-php';
+import {python} from '@codemirror/lang-python';
+import {rust} from '@codemirror/lang-rust';
+import {sql} from '@codemirror/lang-sql';
+import {xml} from '@codemirror/lang-xml';
+
+export const language = (fileType?: string) => {
+  switch (fileType) {
+    case 'text/apl':
+      return StreamLanguage.define(apl);
+    case 'text/x-ttcn-asn':
+      return StreamLanguage.define(asn1({}));
+    case 'text/x-asterisk':
+      return StreamLanguage.define(asterisk);
+    case 'text/x-brainfuck':
+      return StreamLanguage.define(brainfuck);
+    case 'text/x-ebnf':
+      return StreamLanguage.define(ebnf);
+    case 'text/x-python':
+      return python();
+    case 'text/x-csrc':
+      return StreamLanguage.define(c);
+    case 'text/x-csharp':
+      return StreamLanguage.define(csharp);
+    case 'text/x-c++src':
+      return cpp();
+    case 'application/dart':
+      return StreamLanguage.define(dart);
+    case 'text/x-kotlin':
+      return StreamLanguage.define(kotlin);
+    case 'text/x-objectivec':
+      return StreamLanguage.define(objectiveC);
+    case 'x-shader/x-fragment':
+    case 'x-shader/x-vertex':
+      return StreamLanguage.define(shader);
+    case 'text/x-ttcn-cfg':
+      return StreamLanguage.define(ttcnCfg);
+    case 'text/x-common-lisp':
+      return StreamLanguage.define(commonLisp);
+    case 'text/x-clojure':
+    case 'text/x-clojurescript':
+      return StreamLanguage.define(clojure);
+    case 'text/x-cmake':
+      return StreamLanguage.define(cmake);
+    case 'application/json':
+      return json();
+    case 'text/x-cobol':
+      return StreamLanguage.define(cobol);
+    case 'text/x-coffeescript':
+      return StreamLanguage.define(coffeeScript);
+    case 'text/x-ini':
+    case 'text/x-properties':
+      return StreamLanguage.define(properties);
+    case 'text/x-crystal':
+      return StreamLanguage.define(crystal);
+    case 'application/xml':
+      return xml;
+    case 'text/css':
+      return _css();
+    case 'text/x-less':
+      return StreamLanguage.define(less);
+    case 'text/x-scss':
+      return StreamLanguage.define(sCSS);
+    case 'text/x-gss':
+      return StreamLanguage.define(gss);
+    case 'text/x-cassandra':
+      return StreamLanguage.define(cassandra);
+    case 'text/x-pgsql':
+      return StreamLanguage.define(pgSQL);
+    case 'text/x-plsql':
+      return StreamLanguage.define(plSQL);
+    case 'application/x-cypher-query':
+      return StreamLanguage.define(cypher);
+    case 'text/x-d':
+      return StreamLanguage.define(d);
+    case 'text/x-diff':
+      return StreamLanguage.define(diff);
+    case 'application/xml-dtd':
+      return StreamLanguage.define(dtd);
+    case 'text/x-dylan':
+      return StreamLanguage.define(dylan);
+    case 'text/x-dockerfile':
+      return StreamLanguage.define(dockerFile);
+    case 'text/x-eiffel':
+      return StreamLanguage.define(eiffel);
+    case 'text/x-ecl':
+      return StreamLanguage.define(ecl);
+    case 'text/x-elm':
+      return StreamLanguage.define(elm);
+    case 'application/x-ejs':
+    case 'text/html':
+    case 'application/x-jsp':
+      return _html();
+    case 'application/x-erb':
+    case 'text/x-ruby':
+      return StreamLanguage.define(ruby);
+    case 'text/x-erlang':
+      return StreamLanguage.define(erlang);
+    case 'text/jsx':
+      return javascript({jsx: true});
+    case 'text/x-spreadsheet':
+      return StreamLanguage.define(spreadsheet);
+    case 'text/x-fortran':
+      return StreamLanguage.define(fortran);
+    case 'text/x-factor':
+      return StreamLanguage.define(factor);
+    case 'text/x-feature':
+    case 'text/x-gherkin':
+      return StreamLanguage.define(gherkin);
+    case 'text/x-fcl':
+      return StreamLanguage.define(fcl);
+    case 'text/x-forth':
+      return StreamLanguage.define(forth);
+    case 'text/x-fsharp':
+      return StreamLanguage.define(fSharp);
+    case 'text/x-go':
+      return StreamLanguage.define(go);
+    case 'text/x-groovy':
+      return StreamLanguage.define(groovy);
+    case 'text/x-haskell':
+    case 'text/x-literate-haskell':
+      return StreamLanguage.define(haskell);
+    case 'message/http':
+      return StreamLanguage.define(http);
+    case 'text/x-haxe':
+      return StreamLanguage.define(haxe);
+    case 'text/x-hxml':
+      return StreamLanguage.define(hxml);
+    case 'text/x-jinja2':
+      return StreamLanguage.define(jinja2);
+    case 'text/x-java':
+      return java();
+    case 'text/x-julia':
+      return StreamLanguage.define(julia);
+    case 'application/ld+json':
+      return StreamLanguage.define(jsonld);
+    case 'text/x-livescript':
+      return StreamLanguage.define(liveScript);
+    case 'text/x-lua':
+      return StreamLanguage.define(lua);
+    case 'text/x-markdown':
+      return markdown();
+    case 'application/mbox':
+      return StreamLanguage.define(mbox);
+    case 'text/mirc':
+      return StreamLanguage.define(mirc);
+    case 'text/x-ocaml':
+      return StreamLanguage.define(oCaml);
+    case 'text/x-modelica':
+      return StreamLanguage.define(modelica);
+    case 'text/x-mumps':
+      return StreamLanguage.define(mumps);
+    case 'text/x-mscgen':
+      return StreamLanguage.define(mscgen);
+    case 'text/x-msgenny':
+      return StreamLanguage.define(msgenny);
+    case 'text/x-mathematica':
+      return StreamLanguage.define(mathematica);
+    case 'text/x-nginx-conf':
+      return StreamLanguage.define(nginx);
+    case 'text/x-nsis':
+      return StreamLanguage.define(nsis);
+    case 'text/n-triples':
+      return StreamLanguage.define(ntriples);
+    case 'text/x-squirrel':
+      return StreamLanguage.define(squirrel);
+    case 'text/x-oz':
+      return StreamLanguage.define(oz);
+    case 'text/x-pascal':
+      return StreamLanguage.define(pascal);
+    case 'application/pgp':
+      return StreamLanguage.define(asciiArmor);
+    case 'text/x-pig':
+      return StreamLanguage.define(pig);
+    case 'text/x-perl':
+      return StreamLanguage.define(perl);
+    case 'text/x-puppet':
+      return StreamLanguage.define(puppet);
+    case 'text/x-idl':
+      return StreamLanguage.define(idl);
+    case 'text/x-protobuf':
+      return StreamLanguage.define(protobuf);
+    case 'application/x-powershell':
+      return StreamLanguage.define(powerShell);
+    case 'text/x-q':
+      return StreamLanguage.define(q);
+    case 'text/x-rpm-spec':
+      return StreamLanguage.define(rpmSpec);
+    case 'text/x-rpm-changes':
+      return StreamLanguage.define(rpmChanges);
+    case 'application/sparql-query':
+      return StreamLanguage.define(sparql);
+    case 'text/x-rustsrc':
+      return rust();
+    case 'text/x-gas':
+      return StreamLanguage.define(gas);
+    case 'text/x-sas':
+      return StreamLanguage.define(sas);
+    case 'text/x-sass':
+      return StreamLanguage.define(sass);
+    case 'text/x-scala':
+      return StreamLanguage.define(scala);
+    case 'text/x-scheme':
+      return StreamLanguage.define(scheme);
+    case 'application/sieve':
+      return StreamLanguage.define(sieve);
+    case 'text/x-solr':
+      return StreamLanguage.define(solr);
+    case 'text/x-stex':
+    case 'text/x-latex':
+      return StreamLanguage.define(stex);
+    case 'text/x-systemverilog':
+      return StreamLanguage.define(verilog);
+    case 'text/x-swift':
+      return StreamLanguage.define(swift);
+    case 'text/x-tcl':
+      return StreamLanguage.define(tcl);
+    case 'text/x-textile':
+      return StreamLanguage.define(textile);
+    case 'text/x-tiddlywiki':
+      return StreamLanguage.define(tiddlyWiki);
+    case 'text/tiki':
+      return StreamLanguage.define(tiki);
+    case 'text/x-toml':
+      return StreamLanguage.define(toml);
+    case 'text/x-toml':
+      return StreamLanguage.define(toml);
+    case 'application/typescript':
+      return javascript({typescript: true});
+    case 'text/x-ttcn':
+      return StreamLanguage.define(ttcn);
+    case 'text/turtle':
+      return StreamLanguage.define(turtle);
+    case 'text/x-vb':
+      return StreamLanguage.define(vb);
+    case 'text/vbscript':
+      return StreamLanguage.define(vbScript);
+    case 'text/x-vhdl':
+      return StreamLanguage.define(vhdl);
+    case 'text/velocity':
+      return StreamLanguage.define(velocity);
+    case 'text/x-webidl':
+      return StreamLanguage.define(webIDL);
+    case 'application/xquery':
+      return StreamLanguage.define(xQuery);
+    case 'text/x-yaml':
+      return StreamLanguage.define(yaml);
+    case 'text/x-yacas':
+      return StreamLanguage.define(yacas);
+    case 'text/x-z80':
+      return StreamLanguage.define(z80);
+    case 'text/troff':
+      return StreamLanguage.define(troff);
+    case 'text/x-sh':
+      return StreamLanguage.define(shell);
+    case 'text/x-php':
+      return php();
+    case 'text/x-sql':
+      return sql();
+  }
+  return [];
+};
diff --git a/web/element/matchesonscrollbar-css.ts b/web/element/matchesonscrollbar-css.ts
deleted file mode 100644
index 32a274c..0000000
--- a/web/element/matchesonscrollbar-css.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import {css} from 'lit';
-
-/**
- * This is just a copy of addon/search/matchesonscrollbar.css.
- * We need to be able to expose this to lit.
- */
-export const searchMatchStyles = css`
-  .CodeMirror-search-match {
-    background: gold;
-    border-top: 1px solid orange;
-    border-bottom: 1px solid orange;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    opacity: 0.5;
-  }
-`;
diff --git a/web/element/ruler.ts b/web/element/ruler.ts
new file mode 100644
index 0000000..5f37d72
--- /dev/null
+++ b/web/element/ruler.ts
@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {EditorView, ViewPlugin} from '@codemirror/view';
+
+// Kindly provided by https://discuss.codemirror.net/t/how-to-implement-ruler/4616/4
+function generateRulerPlugin() {
+  let width = 0;
+  let rulerElement: HTMLDivElement;
+
+  class RulerPlugin {
+    containerElement: HTMLDivElement;
+
+    constructor(view: EditorView) {
+      this.containerElement = view.dom.appendChild(
+        document.createElement('div')
+      );
+      this.containerElement.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        overflow: hidden;
+      `;
+      rulerElement = this.containerElement.appendChild(
+        document.createElement('div')
+      );
+      rulerElement.style.cssText = `
+        position: absolute;
+        border-right: 1px solid #dadce0;
+        height: 100%;
+        opacity: 0.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`;
+    }
+
+    destroy() {
+      rulerElement.remove();
+    }
+  }
+
+  function updateRulerWidth(newWidth: number, defaultWidth: number, force = false) {
+    if ((newWidth !== width || force) && rulerElement) {
+      width = newWidth;
+      rulerElement.style.left = `${width * defaultWidth}px`;
+    }
+  }
+
+  return {rulerPlugin: ViewPlugin.fromClass(RulerPlugin), updateRulerWidth};
+}
+
+const {rulerPlugin, updateRulerWidth} = generateRulerPlugin();
+
+export {rulerPlugin, updateRulerWidth};
diff --git a/web/element/simplescrollbars-css.ts b/web/element/simplescrollbars-css.ts
deleted file mode 100644
index 2203cd6..0000000
--- a/web/element/simplescrollbars-css.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import {css} from 'lit';
-
-/**
- * This is just a copy of addon/scroll/simplescrollbars.css.
- * We need to be able to expose this to lit.
- */
-export const simpleScrollStyles = css`
-  .CodeMirror-simplescroll-horizontal div,
-  .CodeMirror-simplescroll-vertical div {
-    position: absolute;
-    background: #ccc;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    border: 1px solid #bbb;
-    border-radius: 2px;
-  }
-
-  .CodeMirror-simplescroll-horizontal,
-  .CodeMirror-simplescroll-vertical {
-    position: absolute;
-    z-index: 6;
-    background: #eee;
-  }
-
-  .CodeMirror-simplescroll-horizontal {
-    bottom: 0;
-    left: 0;
-    height: 8px;
-  }
-  .CodeMirror-simplescroll-horizontal div {
-    bottom: 0;
-    height: 100%;
-  }
-
-  .CodeMirror-simplescroll-vertical {
-    right: 0;
-    top: 0;
-    width: 8px;
-  }
-  .CodeMirror-simplescroll-vertical div {
-    right: 0;
-    width: 100%;
-  }
-
-  .CodeMirror-overlayscroll .CodeMirror-scrollbar-filler,
-  .CodeMirror-overlayscroll .CodeMirror-gutter-filler {
-    display: none;
-  }
-
-  .CodeMirror-overlayscroll-horizontal div,
-  .CodeMirror-overlayscroll-vertical div {
-    position: absolute;
-    background: #bcd;
-    border-radius: 3px;
-  }
-
-  .CodeMirror-overlayscroll-horizontal,
-  .CodeMirror-overlayscroll-vertical {
-    position: absolute;
-    z-index: 6;
-  }
-
-  .CodeMirror-overlayscroll-horizontal {
-    bottom: 0;
-    left: 0;
-    height: 6px;
-  }
-  .CodeMirror-overlayscroll-horizontal div {
-    bottom: 0;
-    height: 100%;
-  }
-
-  .CodeMirror-overlayscroll-vertical {
-    right: 0;
-    top: 0;
-    width: 6px;
-  }
-  .CodeMirror-overlayscroll-vertical div {
-    right: 0;
-    width: 100%;
-  }
-`;
diff --git a/web/gr-editor.ts b/web/gr-editor.ts
index 04a0425..6d04661 100644
--- a/web/gr-editor.ts
+++ b/web/gr-editor.ts
@@ -3,13 +3,12 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import './codemirror-imports';
+
 import '@gerritcodereview/typescript-api/gerrit';
 import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
 import {html, LitElement} from 'lit';
 import {customElement, property, query} from 'lit/decorators.js';
 
-import {CodeMirrorConfig} from './codemirror-imports';
 import {setScriptSrc} from './safe-script';
 
 declare global {
@@ -19,25 +18,6 @@
 }
 
 /**
- * This is a standard REST API object:
- * https://gerrit-review.googlesource.com/Documentation/rest-api-accounts.html#edit-preferences-info
- *
- * TODO: Add this object to the plugin API.
- */
-interface EditPreferencesInfo {
-  tab_size?: number;
-  line_length?: number;
-  indent_unit?: number;
-  show_tabs?: boolean;
-  show_whitespace_errors?: boolean;
-  syntax_highlighting?: boolean;
-  match_brackets?: boolean;
-  line_wrapping?: boolean;
-  indent_with_tabs?: boolean;
-  auto_close_brackets?: boolean;
-}
-
-/**
  * This component just loads the CodeMirror js bundle lazily and converts the
  * Gerrit preferences into CodeMirror params.
  */
@@ -49,7 +29,7 @@
 
   @property({type: Number}) lineNum?: number;
 
-  @property({type: Object}) prefs?: EditPreferencesInfo;
+  @property({type: Object}) prefs?: unknown;
 
   @property({type: Object}) plugin?: PluginApi;
 
@@ -62,7 +42,9 @@
       <codemirror-element
         id="codemirror"
         .lineNum=${this.lineNum}
-        .params=${this.codeMirrorParams()}
+        .prefs=${this.prefs}
+        .fileContent=${this.fileContent}
+        .fileType=${this.fileType}
       >
       </codemirror-element>
     `;
@@ -85,32 +67,4 @@
     setScriptSrc(script, this.plugin?.url() ?? '');
     document.head.appendChild(script);
   }
-
-  private codeMirrorParams(): CodeMirrorConfig {
-    const params: CodeMirrorConfig = {
-      value: this.fileContent ?? '',
-    };
-
-    if (this.prefs) {
-      params.autoCloseBrackets = this.prefs.auto_close_brackets;
-      params.cursorHeight = 0.85;
-      params.indentUnit = this.prefs.indent_unit;
-      params.indentWithTabs = this.prefs.indent_with_tabs;
-      params.lineNumbers = true;
-      params.lineWrapping = this.prefs.line_wrapping;
-      params.matchBrackets = this.prefs.match_brackets;
-      params.mode = this.prefs.syntax_highlighting ? this.fileType ?? '' : '';
-      params.showTabs = this.prefs.show_tabs;
-      params.showTrailingSpace = this.prefs.show_whitespace_errors;
-      params.tabSize = this.prefs.tab_size;
-      if (this.prefs.line_length) {
-        params.rulers = [{column: this.prefs.line_length}];
-      }
-      if (this.fileContent?.includes('\r\n')) {
-        params.lineSeparator = '\r\n';
-      }
-    }
-
-    return params;
-  }
 }