From 57a79272844fb5a0b05d3a14909a6d7b117b35db Mon Sep 17 00:00:00 2001
From: Eemeli Aro <eemeli@mozilla.com>
Date: Sun, 28 May 2023 13:44:29 +0300
Subject: [PATCH] Replace editor <textarea> with CodeMirror v6

---
 package-lock.json                             |  92 +++++++++++
 translate/package.json                        |   5 +
 translate/rollup.config.mjs                   |   2 +-
 translate/src/context/Editor.test.js          |  19 +--
 translate/src/context/Editor.tsx              |  53 +++---
 translate/src/context/UnsavedChanges.tsx      |  11 +-
 .../src/modules/editor/components/Editor.css  |  33 ----
 .../modules/editor/components/Editor.test.js  |  21 +--
 .../editor/hooks/useHandleShortcuts.ts        | 153 ------------------
 translate/src/modules/editor/index.ts         |   1 -
 .../components/EditAccesskey.tsx              |  75 +++++++--
 .../translationform/components/EditField.tsx  | 133 +++++++++------
 .../TranslationForm-multiple.test.js          | 106 ++++++------
 .../components/TranslationForm-single.test.js |  36 +++--
 .../components/TranslationForm.css            |  49 +++++-
 .../components/TranslationForm.tsx            |  35 ++--
 .../utils/editFieldExtensions.ts              |  90 +++++++++++
 .../utils/editFieldShortcuts.ts               | 127 +++++++++++++++
 .../src/utils/message/editMessageEntry.tsx    |   3 +
 19 files changed, 644 insertions(+), 400 deletions(-)
 delete mode 100644 translate/src/modules/editor/hooks/useHandleShortcuts.ts
 create mode 100644 translate/src/modules/translationform/utils/editFieldExtensions.ts
 create mode 100644 translate/src/modules/translationform/utils/editFieldShortcuts.ts

diff --git a/package-lock.json b/package-lock.json
index ac64aac1d7..b88bfa1bd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1912,6 +1912,62 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.7.1.tgz",
+      "integrity": "sha512-hSxf9S0uB+GV+gBsjY1FZNo53e1FFdzPceRfCfD1gWOnV6o21GfB5J5Wg9G/4h76XZMPrF0A6OCK/Rz5+V1egg==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.6.0",
+        "@lezer/common": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.2.4.tgz",
+      "integrity": "sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.7.0.tgz",
+      "integrity": "sha512-4SMwe6Fwn57klCUsVN0y4/h/iWT+XIXFEmop2lIHHuWO0ubjCrF3suqSZLyOQlznxkNnNbOOfKe5HQbQGCAmTg==",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.2.1.tgz",
+      "integrity": "sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw=="
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.12.0.tgz",
+      "integrity": "sha512-xNHvbJBc2v8JuEcIGOck6EUGShpP+TYGCEMVEVQMYxbFXfMhYnoF3znxB/2GgeKR0nrxBs+nhBupiTYQqCp2kw==",
+      "dependencies": {
+        "@codemirror/state": "^6.1.4",
+        "style-mod": "^4.0.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -2981,6 +3037,27 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@lezer/common": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.0.2.tgz",
+      "integrity": "sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng=="
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.1.6.tgz",
+      "integrity": "sha512-cmSJYa2us+r3SePpRCjN5ymCqCPv+zyXmDl0ciWtVaNiORT/MxM7ZgOMQZADD0o51qOaOg24qc/zBViOIwAjJg==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.5.tgz",
+      "integrity": "sha512-Kye0rxYBi+OdToLUN2tQfeH5VIrpESC6XznuvxmIxbO1lz6M1C90vkjMNYoX1SfbUcuvoPXvLYsBquZ//77zVQ==",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
     "node_modules/@messageformat/fluent": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/@messageformat/fluent/-/fluent-0.4.1.tgz",
@@ -11982,6 +12059,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.0.3.tgz",
+      "integrity": "sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw=="
+    },
     "node_modules/style-to-js": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.1.tgz",
@@ -12606,6 +12688,11 @@
       "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
       "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.7.tgz",
+      "integrity": "sha512-XB8aa62d4rrVfoZYQaYNy3fy+z4nrfy2ooea3/0BnBzXW0tSdZ+lRgjzBZhk0La0H6h8fVyYCxx/qkQcAIuvfg=="
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -12944,6 +13031,11 @@
     },
     "translate": {
       "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/commands": "^6.2.4",
+        "@codemirror/language": "^6.7.0",
+        "@codemirror/state": "^6.2.1",
+        "@codemirror/view": "^6.12.0",
         "@fluent/bundle": "^0.18.0",
         "@fluent/langneg": "^0.7.0",
         "@fluent/react": "^0.15.1",
diff --git a/translate/package.json b/translate/package.json
index 95fce8e8b2..5e565a8aec 100644
--- a/translate/package.json
+++ b/translate/package.json
@@ -2,6 +2,11 @@
   "name": "translate",
   "private": true,
   "dependencies": {
+    "@codemirror/autocomplete": "^6.7.1",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/language": "^6.7.0",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.12.0",
     "@fluent/bundle": "^0.18.0",
     "@fluent/langneg": "^0.7.0",
     "@fluent/react": "^0.15.1",
diff --git a/translate/rollup.config.mjs b/translate/rollup.config.mjs
index d60e8e6764..4e242af95b 100644
--- a/translate/rollup.config.mjs
+++ b/translate/rollup.config.mjs
@@ -10,7 +10,7 @@ import css from 'rollup-plugin-css-only';
 /** @type {import('rollup').RollupOptions} */
 const config = {
   input: 'src/index.tsx',
-  output: { file: 'dist/translate.js' },
+  output: { file: 'dist/translate.js', format: 'iife' },
 
   treeshake: 'recommended',
 
diff --git a/translate/src/context/Editor.test.js b/translate/src/context/Editor.test.js
index b355b7c548..6a85900ac1 100644
--- a/translate/src/context/Editor.test.js
+++ b/translate/src/context/Editor.test.js
@@ -219,10 +219,9 @@ describe('<EditorProvider>', () => {
   });
 
   it('clears a rich Fluent value', () => {
-    let editor, result, actions;
+    let editor, actions;
     const Spy = () => {
       editor = useContext(EditorData);
-      result = useContext(EditorResult);
       actions = useContext(EditorActions);
       return null;
     };
@@ -256,10 +255,6 @@ describe('<EditorProvider>', () => {
         },
       ],
     });
-    expect(result).toMatchObject([
-      { name: '', keys: [{ type: 'nmtoken', value: 'one' }], value: '' },
-      { name: '', keys: [{ type: '*', value: 'other' }], value: '' },
-    ]);
   });
 
   it('sets editor from history', () => {
@@ -272,8 +267,6 @@ describe('<EditorProvider>', () => {
     };
     const wrapper = mountSpy(Spy, 'ftl', `key = VALUE\n`);
 
-    expect(result).toMatchObject([{ name: '', keys: [], value: 'VALUE' }]);
-
     const source = ftl`
       key =
           { $var ->
@@ -304,8 +297,8 @@ describe('<EditorProvider>', () => {
       ],
     });
     expect(result).toMatchObject([
-      { name: '', keys: [{ type: 'nmtoken', value: 'one' }], value: 'ONE' },
-      { name: '', keys: [{ type: '*', value: 'other' }], value: 'OTHER' },
+      { keys: [{ type: 'nmtoken', value: 'one' }], name: '', value: 'ONE' },
+      { keys: [{ type: '*', value: 'other' }], name: '', value: 'OTHER' },
     ]);
   });
 
@@ -340,15 +333,15 @@ describe('<EditorProvider>', () => {
         },
       ],
     });
-    expect(result).toMatchObject([{ name: '', keys: [], value: source }]);
+    expect(result).toMatchObject([{ keys: [], name: '', value: source }]);
 
     act(() => actions.toggleSourceView());
     wrapper.update();
 
     expect(editor).toMatchObject({ fields: [{}, {}], sourceView: false });
     expect(result).toMatchObject([
-      { name: '', keys: [{ type: 'nmtoken', value: 'one' }], value: 'ONE' },
-      { name: '', keys: [{ type: '*', value: 'other' }], value: 'OTHER' },
+      { keys: [{ type: 'nmtoken', value: 'one' }], name: '', value: 'ONE' },
+      { keys: [{ type: '*', value: 'other' }], name: '', value: 'OTHER' },
     ]);
   });
 });
diff --git a/translate/src/context/Editor.tsx b/translate/src/context/Editor.tsx
index 47ff961123..92f8839f7a 100644
--- a/translate/src/context/Editor.tsx
+++ b/translate/src/context/Editor.tsx
@@ -30,9 +30,9 @@ import { UnsavedActions } from './UnsavedChanges';
 
 export type EditFieldHandle = {
   get value(): string;
-  set value(next: string);
   focus(): void;
-  setSelection(content: string): void;
+  setSelection(text: string): void;
+  setValue(text: string): void;
 };
 
 export type EditorField = {
@@ -51,6 +51,12 @@ export type EditorField = {
 };
 
 export type EditorData = Readonly<{
+  /**
+   * Should match `useContext(EntityView).pk`.
+   * If it doesn't, the entity has changed but data isn't updated yet.
+   */
+  pk: number;
+
   /** Is a request to send a new translation running? */
   busy: boolean;
 
@@ -100,9 +106,6 @@ export type EditorActions = {
   /** If `format: 'ftl'`, must be called with the source of a full entry */
   setEditorFromHistory(value: string): void;
 
-  /** Set the result value of the active input */
-  setEditorFromInput(idx: number, value: string): void;
-
   /** @param manual Set `true` when value set due to direct user action */
   setEditorFromHelpers(
     value: string,
@@ -112,6 +115,9 @@ export type EditorActions = {
 
   setEditorSelection(content: string): void;
 
+  /** Set the result value of the active input */
+  setResultFromInput(idx: number, value: string): void;
+
   toggleSourceView(): void;
 };
 
@@ -137,6 +143,7 @@ const createSimpleMessageEntry = (id: string, value: string): MessageEntry => ({
 });
 
 const initEditorData: EditorData = {
+  pk: 0,
   busy: false,
   entry: { id: '', value: null, attributes: new Map() },
   focusField: { current: null },
@@ -151,8 +158,8 @@ const initEditorActions: EditorActions = {
   setEditorBusy: () => {},
   setEditorFromHelpers: () => {},
   setEditorFromHistory: () => {},
-  setEditorFromInput: () => {},
   setEditorSelection: () => {},
+  setResultFromInput: () => {},
   toggleSourceView: () => {},
 };
 
@@ -188,13 +195,10 @@ export function EditorProvider({ children }: { children: React.ReactElement }) {
       clearEditor() {
         setState((state) => {
           for (const field of state.fields) {
-            field.handle.current.value = '';
+            field.handle.current.setValue('');
           }
           return state;
         });
-        setResult((result) =>
-          result.map(({ name, keys }) => ({ name, keys, value: '' })),
-        );
       },
 
       setEditorBusy: (busy) =>
@@ -204,15 +208,14 @@ export function EditorProvider({ children }: { children: React.ReactElement }) {
         setState((prev) => {
           const { fields, focusField, sourceView } = prev;
           const field = focusField.current ?? fields[0];
-          field.handle.current.value = str;
+          field.handle.current.setValue(str);
           let next = fields.slice();
-          let result = buildResult(next);
           if (sourceView) {
+            const result = buildResult(next);
             next = editSource(buildMessageEntry(prev.entry, result));
             focusField.current = next[0];
-            result = buildResult(next);
+            setResult(result);
           }
-          setResult(result);
           return {
             ...prev,
             machinery: { manual, translation: str, sources },
@@ -238,29 +241,32 @@ export function EditorProvider({ children }: { children: React.ReactElement }) {
             }
           } else {
             next.fields = editMessageEntry(prev.initial);
-            next.fields[0].handle.current.value = str;
+            next.fields[0].handle.current.setValue(str);
           }
           next.focusField.current = next.fields[0];
           setResult(buildResult(next.fields));
           return next;
         }),
 
-      setEditorFromInput: (idx, value) =>
-        setResult((prev) => {
-          const res = prev.slice();
-          res[idx] = { ...res[idx], value };
-          return res;
-        }),
-
       setEditorSelection: (content) =>
         setState((state) => {
           const { fields, focusField } = state;
           const field = focusField.current ?? fields[0];
           field.handle.current.setSelection(content);
-          setResult(buildResult(fields));
           return state;
         }),
 
+      setResultFromInput: (idx, value) =>
+        setResult((prev) => {
+          if (prev.length > idx) {
+            const res = prev.slice();
+            res[idx] = { ...res[idx], value };
+            return res;
+          } else {
+            return prev;
+          }
+        }),
+
       toggleSourceView: () =>
         setState((prev) => {
           if (prev.sourceView) {
@@ -325,6 +331,7 @@ export function EditorProvider({ children }: { children: React.ReactElement }) {
     const fields = sourceView ? editSource(source) : editMessageEntry(entry);
 
     setState(() => ({
+      pk: entity.pk,
       busy: false,
       entry,
       fields,
diff --git a/translate/src/context/UnsavedChanges.tsx b/translate/src/context/UnsavedChanges.tsx
index 405aed7ff9..994b634add 100644
--- a/translate/src/context/UnsavedChanges.tsx
+++ b/translate/src/context/UnsavedChanges.tsx
@@ -6,6 +6,11 @@ export type UnsavedChanges = Readonly<{
 }>;
 
 export type UnsavedActions = {
+  /**
+   * The `callback` is called as `setTimout(callback)`
+   * to avoid an occasional React complaint about
+   * updating one component while rendering a different component.
+   */
   checkUnsavedChanges(callback: () => void): void;
 
   /**
@@ -50,7 +55,7 @@ export function UnsavedChangesProvider({
           if (prev.check()) {
             return { check: () => true, onIgnore: callback };
           } else {
-            callback();
+            setTimeout(callback);
             return prev;
           }
         }),
@@ -60,11 +65,7 @@ export function UnsavedChangesProvider({
           const { onIgnore } = prev;
           if (onIgnore) {
             if (ignore) {
-              // Needs to happen after the return to avoid an occasional React
-              // complaint about updating one component while rendering a
-              // different component.
               setTimeout(onIgnore);
-
               return { check: () => false, onIgnore: null };
             }
             return { ...prev, onIgnore: null };
diff --git a/translate/src/modules/editor/components/Editor.css b/translate/src/modules/editor/components/Editor.css
index 3bc19791f4..a42641f36d 100644
--- a/translate/src/modules/editor/components/Editor.css
+++ b/translate/src/modules/editor/components/Editor.css
@@ -7,36 +7,3 @@
   min-height: 160px;
   position: relative;
 }
-
-.editor textarea {
-  border: none;
-  box-sizing: border-box;
-  display: block;
-  font-size: 14px;
-  line-height: 22px;
-  height: calc(100% - 60px);
-  min-height: 100px;
-  overflow: auto;
-  padding: 10px;
-  width: 100%;
-  resize: vertical;
-}
-
-/* Remove highlight in Chrome */
-.editor textarea:focus {
-  outline: none;
-}
-
-.editor .plural-selector ~ textarea {
-  min-height: auto;
-}
-
-.editor input[readonly],
-.editor textarea[readonly] {
-  background: #c7cacf;
-  cursor: default;
-}
-
-.editor textarea[data-script='Arabic'] {
-  font-size: 15px;
-}
diff --git a/translate/src/modules/editor/components/Editor.test.js b/translate/src/modules/editor/components/Editor.test.js
index 5c58b1ca3a..a9a971cac3 100644
--- a/translate/src/modules/editor/components/Editor.test.js
+++ b/translate/src/modules/editor/components/Editor.test.js
@@ -11,6 +11,7 @@ import { EditorActions, EditorProvider } from '~/context/Editor';
 import { EntityViewProvider } from '~/context/EntityView';
 import { LocationProvider } from '~/context/Location';
 import { RECEIVE_ENTITIES } from '~/modules/entities/actions';
+import { EditField } from '~/modules/translationform/components/EditField';
 
 import { createDefaultUser, createReduxStore } from '~/test/store';
 import { MockLocalizationProvider } from '~/test/utils';
@@ -128,7 +129,7 @@ describe('<Editor>', () => {
   it('renders the simple form when passing a simple string', () => {
     const [wrapper] = mountEditor(1);
 
-    const input = wrapper.find('TranslationForm textarea');
+    const input = wrapper.find(EditField);
     expect(input).toHaveLength(1);
     expect(input.prop('defaultValue')).toBe('Salut');
   });
@@ -136,7 +137,7 @@ describe('<Editor>', () => {
   it('renders the simple form when passing a simple string with one attribute', () => {
     const [wrapper] = mountEditor(2);
 
-    const input = wrapper.find('TranslationForm textarea');
+    const input = wrapper.find(EditField);
     expect(input).toHaveLength(1);
     expect(input.prop('defaultValue')).toBe('Quelque chose de bien');
   });
@@ -144,19 +145,19 @@ describe('<Editor>', () => {
   it('renders the rich form when passing a supported rich message', () => {
     const [wrapper] = mountEditor(3);
 
-    expect(wrapper.find('TranslationForm textarea')).toHaveLength(2);
+    expect(wrapper.find(EditField)).toHaveLength(2);
   });
 
   it('renders the rich form when passing a message with nested selector', () => {
     const [wrapper] = mountEditor(5);
 
-    expect(wrapper.find('TranslationForm textarea')).toHaveLength(4);
+    expect(wrapper.find(EditField)).toHaveLength(4);
   });
 
   it('renders the source form when passing a broken string', () => {
     const [wrapper] = mountEditor(6);
 
-    const input = wrapper.find('TranslationForm textarea');
+    const input = wrapper.find(EditField);
     expect(input).toHaveLength(1);
     expect(input.prop('defaultValue')).toBe(BROKEN_STRING.trim());
   });
@@ -167,7 +168,7 @@ describe('<Editor>', () => {
     // Force source mode.
     wrapper.find('button.ftl').simulate('click');
 
-    const input = wrapper.find('TranslationForm textarea');
+    const input = wrapper.find(EditField);
     expect(input).toHaveLength(1);
     expect(input.prop('defaultValue')).toBe('my-message = Salut');
   });
@@ -178,7 +179,7 @@ describe('<Editor>', () => {
     // Force source mode.
     wrapper.find('button.ftl').simulate('click');
 
-    const input = wrapper.find('TranslationForm textarea');
+    const input = wrapper.find(EditField);
     expect(input).toHaveLength(1);
     expect(input.prop('defaultValue')).toBe('my-message = { "" }');
   });
@@ -195,7 +196,7 @@ describe('<Editor>', () => {
     // Switch to rich mode.
     wrapper.find('button.ftl').simulate('click');
 
-    expect(wrapper.find('TranslationForm textarea')).toHaveLength(2);
+    expect(wrapper.find(EditField)).toHaveLength(2);
   });
 
   it('updates content that comes from an external source', () => {
@@ -206,7 +207,7 @@ describe('<Editor>', () => {
     wrapper.update();
 
     // The translation has been updated to a simplified preview.
-    expect(wrapper.find('textarea').text()).toEqual('Coucou');
+    expect(wrapper.find(EditField).text()).toEqual('Coucou');
   });
 
   it('passes a reconstructed translation to sendTranslation', async () => {
@@ -215,7 +216,7 @@ describe('<Editor>', () => {
     const [wrapper, actions] = mountEditor(1);
 
     // Update the content with new input
-    act(() => actions.setEditorFromInput(0, 'Coucou'));
+    act(() => actions.setResultFromInput(0, 'Coucou'));
     wrapper.update();
     await act(() => wrapper.find('.action-suggest').prop('onClick')());
 
diff --git a/translate/src/modules/editor/hooks/useHandleShortcuts.ts b/translate/src/modules/editor/hooks/useHandleShortcuts.ts
deleted file mode 100644
index ee963c6fa0..0000000000
--- a/translate/src/modules/editor/hooks/useHandleShortcuts.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useContext } from 'react';
-
-import { EditorActions } from '~/context/Editor';
-import { EntityView } from '~/context/EntityView';
-import { FailedChecksData } from '~/context/FailedChecksData';
-import { HelperSelection } from '~/context/HelperSelection';
-import { MachineryTranslations } from '~/context/MachineryTranslations';
-import { SearchData } from '~/context/SearchData';
-import { UnsavedActions, UnsavedChanges } from '~/context/UnsavedChanges';
-import { useAppSelector } from '~/hooks';
-import { useReadonlyEditor } from '~/hooks/useReadonlyEditor';
-import { getPlainMessage } from '~/utils/message';
-
-import { useCopyOriginalIntoEditor } from './useCopyOriginalIntoEditor';
-import { useExistingTranslationGetter } from './useExistingTranslationGetter';
-import { useSendTranslation } from './useSendTranslation';
-import { useUpdateTranslationStatus } from './useUpdateTranslationStatus';
-
-/**
- * Return a function to handle shortcuts in a translation form.
- */
-export function useHandleShortcuts(): (event: React.KeyboardEvent) => void {
-  const copyOriginalIntoEditor = useCopyOriginalIntoEditor();
-  const sendTranslation = useSendTranslation();
-  const updateTranslationStatus = useUpdateTranslationStatus();
-
-  const { entity } = useContext(EntityView);
-  const { resetUnsavedChanges } = useContext(UnsavedActions);
-  const unsavedChanges = useContext(UnsavedChanges);
-  const readonly = useReadonlyEditor();
-  const { clearEditor, setEditorFromHelpers } = useContext(EditorActions);
-  const getExistingTranslation = useExistingTranslationGetter();
-  const { errors, source, warnings, resetFailedChecks } =
-    useContext(FailedChecksData);
-  const helperSelection = useContext(HelperSelection);
-
-  const { translations: machineryTranslations } = useContext(
-    MachineryTranslations,
-  );
-  const { results: concordanceSearchResults } = useContext(SearchData);
-  const otherLocaleTranslations = useAppSelector(
-    (state) => state.otherlocales.translations,
-  );
-
-  // Disable keyboard shortcuts when editor is in read only.
-  if (readonly) {
-    return () => {};
-  }
-
-  return (ev: React.KeyboardEvent) => {
-    switch (ev.key) {
-      // On Enter:
-      //   - If unsaved changes popup is shown, proceed.
-      //   - If failed checks popup is shown after approving a translation, approve it anyway.
-      //   - In other cases, send current translation.
-      case 'Enter':
-        if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey) {
-          ev.preventDefault();
-
-          const ignoreWarnings = errors.length + warnings.length > 0;
-
-          if (unsavedChanges.onIgnore) {
-            // There are unsaved changes, proceed.
-            resetUnsavedChanges(true);
-          } else if (typeof source === 'number') {
-            // Approve anyway.
-            updateTranslationStatus(source, 'approve', ignoreWarnings);
-          } else {
-            const existingTranslation = getExistingTranslation();
-            if (existingTranslation && !existingTranslation.approved) {
-              updateTranslationStatus(
-                existingTranslation.pk,
-                'approve',
-                ignoreWarnings,
-              );
-            } else {
-              sendTranslation(ignoreWarnings);
-            }
-          }
-        }
-        break;
-
-      // On Esc, close unsaved changes and failed checks popups if open.
-      case 'Escape':
-        ev.preventDefault();
-        if (unsavedChanges.onIgnore) {
-          // Close unsaved changes popup
-          resetUnsavedChanges(false);
-        } else if (errors.length || warnings.length) {
-          // Close failed checks popup
-          resetFailedChecks();
-        }
-        break;
-
-      // On Ctrl + Shift + C, copy the original translation.
-      case 'C':
-        if (ev.ctrlKey && ev.shiftKey && !ev.altKey) {
-          ev.preventDefault();
-          copyOriginalIntoEditor();
-        }
-        break;
-
-      // On Ctrl + Shift + Backspace, clear the content.
-      case 'Backspace':
-        if (ev.ctrlKey && ev.shiftKey && !ev.altKey) {
-          ev.preventDefault();
-          clearEditor();
-        }
-        break;
-
-      // On Ctrl + Shift + Up/Down, copy next/previous entry from active
-      // helper tab (Machinery or Locales) into translation.
-      case 'ArrowDown':
-      case 'ArrowUp':
-        if (ev.ctrlKey && ev.shiftKey && !ev.altKey) {
-          const { tab, element, setElement } = helperSelection;
-          const isMachinery = tab === 0;
-          const numTranslations = isMachinery
-            ? machineryTranslations.length + concordanceSearchResults.length
-            : otherLocaleTranslations.length;
-
-          if (numTranslations === 0) {
-            return;
-          }
-
-          ev.preventDefault();
-
-          const nextIdx =
-            ev.key === 'ArrowDown'
-              ? (element + 1) % numTranslations
-              : (element - 1 + numTranslations) % numTranslations;
-          setElement(nextIdx);
-
-          if (isMachinery) {
-            const len = machineryTranslations.length;
-            const { translation, sources } =
-              nextIdx < len
-                ? machineryTranslations[nextIdx]
-                : concordanceSearchResults[nextIdx - len];
-            setEditorFromHelpers(translation, sources, true);
-          } else {
-            const { translation } = otherLocaleTranslations[nextIdx];
-            setEditorFromHelpers(
-              getPlainMessage(translation, entity.format),
-              [],
-              true,
-            );
-          }
-        }
-        break;
-    }
-  };
-}
diff --git a/translate/src/modules/editor/index.ts b/translate/src/modules/editor/index.ts
index fa8e42372d..9c08e5a3c4 100644
--- a/translate/src/modules/editor/index.ts
+++ b/translate/src/modules/editor/index.ts
@@ -1,6 +1,5 @@
 export { EditorMenu } from './components/EditorMenu';
 
 export { useCopyOriginalIntoEditor } from './hooks/useCopyOriginalIntoEditor';
-export { useHandleShortcuts } from './hooks/useHandleShortcuts';
 export { useSendTranslation } from './hooks/useSendTranslation';
 export { useUpdateTranslationStatus } from './hooks/useUpdateTranslationStatus';
diff --git a/translate/src/modules/translationform/components/EditAccesskey.tsx b/translate/src/modules/translationform/components/EditAccesskey.tsx
index f0f4326fa3..e401473e5d 100644
--- a/translate/src/modules/translationform/components/EditAccesskey.tsx
+++ b/translate/src/modules/translationform/components/EditAccesskey.tsx
@@ -1,6 +1,7 @@
 import React, {
   forwardRef,
   memo,
+  useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -11,21 +12,70 @@ import React, {
 import { EditFieldHandle, EditorActions, EditorData } from '~/context/Editor';
 import { Locale } from '~/context/Locale';
 import { useReadonlyEditor } from '~/hooks/useReadonlyEditor';
-import { useHandleShortcuts } from '~/modules/editor';
+import { useCopyOriginalIntoEditor } from '~/modules/editor';
 import { extractAccessKeyCandidates } from '~/utils/message';
 
+import { useHandleEnter, useHandleEscape } from '../utils/editFieldShortcuts';
 import type { EditFieldProps } from './EditField';
 
+function useHandleShortcuts(): (event: React.KeyboardEvent) => void {
+  const copyOriginalIntoEditor = useCopyOriginalIntoEditor();
+  const { clearEditor } = useContext(EditorActions);
+
+  const onEnter = useHandleEnter();
+  const onEscape = useHandleEscape();
+
+  return (ev: React.KeyboardEvent) => {
+    switch (ev.key) {
+      case 'Enter':
+        if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey) {
+          ev.preventDefault();
+          onEnter();
+        }
+        break;
+
+      case 'Escape':
+        ev.preventDefault();
+        onEscape();
+        break;
+
+      // On Ctrl + Shift + C, copy the original translation.
+      case 'C':
+        if (ev.ctrlKey && ev.shiftKey && !ev.altKey) {
+          ev.preventDefault();
+          copyOriginalIntoEditor();
+        }
+        break;
+
+      // On Ctrl + Shift + Backspace, clear the content.
+      case 'Backspace':
+        if (ev.ctrlKey && ev.shiftKey && !ev.altKey) {
+          ev.preventDefault();
+          clearEditor();
+        }
+        break;
+    }
+  };
+}
+
 export const EditAccesskey = memo(
   forwardRef<EditFieldHandle, EditFieldProps & { name: string }>(
-    ({ defaultValue, id, index, name, onFocus }, ref) => {
+    ({ defaultValue, index, name, onFocus }, ref) => {
       const locale = useContext(Locale);
-      const { setEditorFromInput } = useContext(EditorActions);
+      const { setResultFromInput } = useContext(EditorActions);
       const { fields } = useContext(EditorData);
       const domRef = useRef<HTMLInputElement>(null);
       const readOnly = useReadonlyEditor();
 
-      const [value, setValue] = useState(defaultValue);
+      const [value, setValue_] = useState(defaultValue);
+      const setValue = useCallback(
+        (value: string) => {
+          setValue_(value);
+          setResultFromInput(index, value);
+        },
+        [index],
+      );
+
       useEffect(() => setValue(defaultValue), [defaultValue]);
 
       useImperativeHandle<EditFieldHandle, EditFieldHandle>(
@@ -34,9 +84,6 @@ export const EditAccesskey = memo(
           get value() {
             return value;
           },
-          set value(next) {
-            setValue(next);
-          },
           focus() {
             const input = domRef.current;
             if (input) {
@@ -45,20 +92,21 @@ export const EditAccesskey = memo(
               input.setSelectionRange(end, end);
             }
           },
-          setSelection(content) {
-            if (content.length <= 1) {
-              setValue(content);
+          setSelection(text) {
+            if (text.length <= 1) {
+              setValue(text);
             }
           },
+          setValue,
         }),
-        [],
+        [setValue],
       );
 
       const handleUpdate = (value: string) => {
         onFocus?.();
         setValue(value);
-        setEditorFromInput(index, value);
       };
+      const handleKeyDown = useHandleShortcuts();
 
       const candidates = extractAccessKeyCandidates(fields, name);
       return (
@@ -67,11 +115,10 @@ export const EditAccesskey = memo(
             ref={domRef}
             className='accesskey-input'
             dir={locale.direction}
-            id={id}
             lang={locale.code}
             maxLength={1}
             onChange={(ev) => handleUpdate(ev.currentTarget.value)}
-            onKeyDown={useHandleShortcuts()}
+            onKeyDown={readOnly ? undefined : handleKeyDown}
             readOnly={readOnly}
             value={value}
             data-script={locale.script}
diff --git a/translate/src/modules/translationform/components/EditField.tsx b/translate/src/modules/translationform/components/EditField.tsx
index fe24303a0d..56a3c3fe66 100644
--- a/translate/src/modules/translationform/components/EditField.tsx
+++ b/translate/src/modules/translationform/components/EditField.tsx
@@ -1,95 +1,126 @@
+import { EditorState } from '@codemirror/state';
+import { EditorView, placeholder } from '@codemirror/view';
+
 import { useLocalization } from '@fluent/react';
 import React, {
   forwardRef,
   memo,
+  useCallback,
   useContext,
   useEffect,
   useImperativeHandle,
-  useRef,
+  useState,
 } from 'react';
+
 import { EditFieldHandle, EditorActions } from '~/context/Editor';
 import { Locale } from '~/context/Locale';
 import { useReadonlyEditor } from '~/hooks/useReadonlyEditor';
-import { useHandleShortcuts } from '~/modules/editor';
+
+import { getExtensions, useKeyHandlers } from '../utils/editFieldExtensions';
 
 export type EditFieldProps = {
-  /** Used by `<label htmlFor>` */
-  id?: string;
   index: number;
   onFocus?: () => void;
   singleField?: boolean;
   defaultValue: string;
 };
 
+/**
+ * The CodeMirror initialization is only run once,
+ * so changes in props or context are not reflected in the editor unless handled separately,
+ * as is done e.g. for `defaultValue`.
+ *
+ * Make sure apply an appropriate `key` prop to keep old instances from being reused.
+ */
 export const EditField = memo(
   forwardRef<EditFieldHandle, EditFieldProps>(
-    ({ defaultValue, id, index, onFocus, singleField }, ref) => {
+    ({ defaultValue, index, onFocus, singleField }, ref) => {
       const { l10n } = useLocalization();
       const locale = useContext(Locale);
-      const { setEditorFromInput } = useContext(EditorActions);
-      const domRef = useRef<HTMLTextAreaElement>(null);
+      const readOnly = useReadonlyEditor();
+      const { setResultFromInput } = useContext(EditorActions);
+      const keyHandlers = useKeyHandlers();
+      const [view, setView] = useState<EditorView | null>(null);
 
-      useEffect(() => {
-        const textarea = domRef.current;
-        if (textarea) {
-          textarea.value = defaultValue;
+      const initView = useCallback((parent: HTMLDivElement | null) => {
+        if (parent) {
+          const extensions = getExtensions(keyHandlers);
+          if (readOnly) {
+            extensions.push(
+              EditorState.readOnly.of(true),
+              EditorView.editable.of(false),
+            );
+          } else {
+            if (singleField) {
+              const l10nId = 'translationform--single-field-placeholder';
+              extensions.push(placeholder(l10n.getString(l10nId)));
+            }
+            extensions.push(
+              EditorView.updateListener.of((update) => {
+                if (onFocus && update.focusChanged && update.view.hasFocus) {
+                  onFocus();
+                }
+                if (update.docChanged) {
+                  setResultFromInput(index, update.state.doc.toString());
+                }
+              }),
+            );
+          }
+
+          const state = EditorState.create({ doc: defaultValue, extensions });
+          view?.destroy();
+          setView(new EditorView({ state, parent }));
+        } else if (view) {
+          view.destroy();
+          setView(null);
         }
-      }, [defaultValue]);
+      }, []);
+
+      const setValue = useCallback(
+        (text: string) => {
+          view?.dispatch({
+            changes: { from: 0, to: view.state.doc.length, insert: text },
+            selection: { anchor: text.length },
+          });
+        },
+        [view],
+      );
+      useEffect(() => setValue(defaultValue), [defaultValue]);
 
       useImperativeHandle<EditFieldHandle, EditFieldHandle>(
         ref,
         () => ({
           get value() {
-            return domRef.current?.value ?? '';
-          },
-          set value(next) {
-            const textarea = domRef.current;
-            if (textarea) {
-              textarea.value = next;
-            }
+            return view ? view.state.doc.toString() : defaultValue;
           },
           focus() {
-            const textarea = domRef.current;
-            if (textarea) {
-              textarea.focus();
-              const end = textarea.value.length;
-              textarea.setSelectionRange(end, end);
+            if (view) {
+              const range = view.state.selection.main;
+              const end = view.state.doc.length;
+              if (range.anchor === 0 && range.empty && end) {
+                view.dispatch({ selection: { anchor: end } });
+              }
+              view.focus();
             }
           },
-          setSelection(content) {
-            const textarea = domRef.current;
-            textarea?.setRangeText(
-              content,
-              textarea.selectionStart,
-              textarea.selectionEnd,
-              'end',
-            );
+          setSelection(text) {
+            if (view) {
+              view.dispatch(view.state.replaceSelection(text));
+              view.focus();
+            }
           },
+          setValue,
         }),
-        [],
+        [view],
       );
 
-      const readOnly = useReadonlyEditor();
-      const placeholder =
-        singleField && !readOnly
-          ? l10n.getString('translationform--single-field-placeholder')
-          : undefined;
-
       return (
-        <textarea
-          ref={domRef}
-          defaultValue={defaultValue}
-          id={id}
-          onChange={(ev) => {
-            setEditorFromInput(index, ev.currentTarget.value);
-          }}
-          onFocus={onFocus}
-          onKeyDown={useHandleShortcuts()}
-          placeholder={placeholder}
-          readOnly={readOnly}
+        <div
+          className={readOnly ? 'readonly' : undefined}
+          ref={initView}
+          data-script={locale.script}
           dir={locale.direction}
           lang={locale.code}
-          data-script={locale.script}
         />
       );
     },
diff --git a/translate/src/modules/translationform/components/TranslationForm-multiple.test.js b/translate/src/modules/translationform/components/TranslationForm-multiple.test.js
index c5f7cefca1..1cf5ab7563 100644
--- a/translate/src/modules/translationform/components/TranslationForm-multiple.test.js
+++ b/translate/src/modules/translationform/components/TranslationForm-multiple.test.js
@@ -56,25 +56,30 @@ function mountForm(string) {
     store,
   );
 
-  return [wrapper, actions, () => result];
+  const views = Array.from(
+    wrapper.find('.translationform').instance().querySelectorAll('.cm-content'),
+  ).map((el) => el.cmView.view);
+
+  return { actions, getResult: () => result, views, wrapper };
 }
 
 describe('<TranslationForm> with multiple fields', () => {
   it('renders textarea for a value and each attribute', () => {
-    const [wrapper] = mountForm(ftl`
+    const { views } = mountForm(ftl`
       message = Value
         .attr-1 = And
         .attr-2 = Attributes
       `);
 
-    expect(wrapper.find('textarea')).toHaveLength(3);
-    expect(wrapper.find('textarea').at(0).html()).toContain('Value');
-    expect(wrapper.find('textarea').at(1).html()).toContain('And');
-    expect(wrapper.find('textarea').at(2).html()).toContain('Attributes');
+    expect(views.map((view) => view.state.doc.toString())).toMatchObject([
+      'Value',
+      'And',
+      'Attributes',
+    ]);
   });
 
   it('renders select expression properly', () => {
-    const [wrapper] = mountForm(ftl`
+    const { views, wrapper } = mountForm(ftl`
       my-entry =
         { PLATFORM() ->
             [variant] Hello!
@@ -82,17 +87,16 @@ describe('<TranslationForm> with multiple fields', () => {
         }
       `);
 
-    expect(wrapper.find('textarea')).toHaveLength(2);
-
+    expect(views.map((view) => view.state.doc.toString())).toMatchObject([
+      'Hello!',
+      'World!',
+    ]);
     expect(wrapper.find('label').at(0).html()).toContain('variant');
-    expect(wrapper.find('textarea').at(0).html()).toContain('Hello!');
-
     expect(wrapper.find('label').at(1).html()).toContain('another-variant');
-    expect(wrapper.find('textarea').at(1).html()).toContain('World!');
   });
 
   it('renders select expression in attributes properly', () => {
-    const [wrapper] = mountForm(ftl`
+    const { views, wrapper } = mountForm(ftl`
       my-entry =
         .label =
             { PLATFORM() ->
@@ -106,18 +110,19 @@ describe('<TranslationForm> with multiple fields', () => {
             }
       `);
 
-    expect(wrapper.find('textarea')).toHaveLength(2);
+    expect(views.map((view) => view.state.doc.toString())).toMatchObject([
+      'Preferences',
+      'Options',
+    ]);
     expect(wrapper.find('input')).toHaveLength(2);
 
     const l0 = wrapper.find('label').at(0);
     expect(l0.find('span').at(0).html()).toContain('label');
     expect(l0.find('span').at(1).html()).toContain('macosx');
-    expect(wrapper.find('textarea').at(0).html()).toContain('Preferences');
 
     const l1 = wrapper.find('label').at(1);
     expect(l1.find('span').at(0).html()).toContain('label');
     expect(l1.find('span').at(1).html()).toContain('other');
-    expect(wrapper.find('textarea').at(1).html()).toContain('Options');
 
     const l2 = wrapper.find('label').at(2);
     expect(l2.find('span').at(0).html()).toContain('accesskey');
@@ -131,7 +136,7 @@ describe('<TranslationForm> with multiple fields', () => {
   });
 
   it('renders plural string properly', () => {
-    const [wrapper] = mountForm(ftl`
+    const { views, wrapper } = mountForm(ftl`
       my-entry =
         { $num ->
             [one] Hello!
@@ -139,23 +144,18 @@ describe('<TranslationForm> with multiple fields', () => {
         }
       `);
 
-    expect(wrapper.find('textarea')).toHaveLength(2);
-
-    expect(wrapper.find('textarea').at(0).html()).toContain('Hello!');
+    expect(views.map((view) => view.state.doc.toString())).toMatchObject([
+      'Hello!',
+      'World!',
+    ]);
 
-    expect(
-      wrapper.find('#translationform--label-with-example').at(0).prop('vars'),
-    ).toEqual({ label: 'one', example: 1 });
-
-    expect(wrapper.find('textarea').at(1).html()).toContain('World!');
-
-    expect(
-      wrapper.find('#translationform--label-with-example').at(1).prop('vars'),
-    ).toEqual({ label: 'other', example: 2 });
+    const labels = wrapper.find('#translationform--label-with-example');
+    expect(labels.at(0).prop('vars')).toEqual({ label: 'one', example: 1 });
+    expect(labels.at(1).prop('vars')).toEqual({ label: 'other', example: 2 });
   });
 
   it('renders plural string in attributes properly', () => {
-    const [wrapper] = mountForm(ftl`
+    const { views, wrapper } = mountForm(ftl`
       my-entry =
         .label =
             { $num ->
@@ -165,47 +165,43 @@ describe('<TranslationForm> with multiple fields', () => {
         .attr = Foo
       `);
 
-    expect(wrapper.find('textarea')).toHaveLength(3);
-
-    expect(wrapper.find('textarea').at(0).html()).toContain('Hello!');
+    expect(views.map((view) => view.state.doc.toString())).toMatchObject([
+      'Hello!',
+      'World!',
+      'Foo',
+    ]);
 
     expect(wrapper.find('label').at(0).find('span').at(0).html()).toContain(
       'label',
     );
-
-    expect(
-      wrapper.find('#translationform--label-with-example').at(0).prop('vars'),
-    ).toEqual({ label: 'one', example: 1 });
-
-    expect(wrapper.find('textarea').at(1).html()).toContain('World!');
-
     expect(wrapper.find('label').at(1).find('span').at(0).html()).toContain(
       'label',
     );
 
-    expect(
-      wrapper.find('#translationform--label-with-example').at(1).prop('vars'),
-    ).toEqual({ label: 'other', example: 2 });
+    const labels = wrapper.find('#translationform--label-with-example');
+    expect(labels.at(0).prop('vars')).toEqual({ label: 'one', example: 1 });
+    expect(labels.at(1).prop('vars')).toEqual({ label: 'other', example: 2 });
   });
 
   it('renders access keys properly', () => {
-    const [wrapper] = mountForm(ftl`
+    const { views, wrapper } = mountForm(ftl`
       title = Title
         .label = Candidates
         .accesskey = C
       `);
 
-    expect(wrapper.find('textarea')).toHaveLength(2);
-    expect(wrapper.find('input')).toHaveLength(1);
-
-    expect(wrapper.find('label').at(1).html()).toContain('label');
-    expect(wrapper.find('textarea').at(1).prop('defaultValue')).toEqual(
+    expect(views.map((view) => view.state.doc.toString())).toMatchObject([
+      'Title',
       'Candidates',
-    );
+    ]);
 
+    expect(wrapper.find('label').at(1).html()).toContain('label');
     expect(wrapper.find('label').at(2).html()).toContain('accesskey');
-    expect(wrapper.find('input').prop('value')).toEqual('C');
-    expect(wrapper.find('input').prop('maxLength')).toEqual(1);
+
+    const input = wrapper.find('input');
+    expect(input).toHaveLength(1);
+    expect(input.prop('value')).toEqual('C');
+    expect(input.prop('maxLength')).toEqual(1);
 
     expect(wrapper.find('.accesskeys')).toHaveLength(1);
     expect(wrapper.find('.accesskeys button')).toHaveLength(8);
@@ -220,7 +216,7 @@ describe('<TranslationForm> with multiple fields', () => {
   });
 
   it('does not render accesskey buttons if no candidates can be generated', () => {
-    const [wrapper] = mountForm(ftl`
+    const { wrapper } = mountForm(ftl`
       title =
         .label = { reference }
         .accesskey = C
@@ -230,7 +226,7 @@ describe('<TranslationForm> with multiple fields', () => {
   });
 
   it('does not render the access key UI if access key is longer than 1 character', () => {
-    const [wrapper] = mountForm(ftl`
+    const { wrapper } = mountForm(ftl`
       title =
         .label = Candidates
         .accesskey = { reference }
@@ -240,7 +236,7 @@ describe('<TranslationForm> with multiple fields', () => {
   });
 
   it('updates the translation when setEditorSelection is passed', async () => {
-    const [wrapper, actions, getResult] = mountForm(ftl`
+    const { actions, getResult, wrapper } = mountForm(ftl`
       title = Value
         .label = Something
       `);
diff --git a/translate/src/modules/translationform/components/TranslationForm-single.test.js b/translate/src/modules/translationform/components/TranslationForm-single.test.js
index 50df8c7afe..33d19d7526 100644
--- a/translate/src/modules/translationform/components/TranslationForm-single.test.js
+++ b/translate/src/modules/translationform/components/TranslationForm-single.test.js
@@ -55,27 +55,32 @@ function mountForm(string) {
     store,
   );
 
-  return [wrapper, actions, () => result];
+  const view = wrapper
+    .find('.singlefield')
+    .instance()
+    .querySelector('.cm-content').cmView.view;
+
+  return { actions, getResult: () => result, view, wrapper };
 }
 
 describe('<TranslationForm> with one field', () => {
-  it('renders a textarea with some content', () => {
-    const [wrapper] = mountForm('Salut');
-
-    expect(wrapper.find('textarea').prop('defaultValue')).toBe('Salut');
+  it('renders an editor with some content', () => {
+    const { view } = mountForm('Salut');
+    expect(view.state.doc.toString()).toBe('Salut');
   });
 
-  it('calls the updateTranslation function on change', () => {
-    const [wrapper, _, getResult] = mountForm('hello');
-    const onChange = wrapper.find('textarea').prop('onChange');
-    act(() => onChange({ currentTarget: { value: 'good bye' } }));
-    wrapper.update();
-
+  it('updates the result on change', () => {
+    const { view, getResult } = mountForm('hello');
+    act(() =>
+      view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: 'good bye' },
+      }),
+    );
     expect(getResult()[0].value).toBe('good bye');
   });
 
   it('updates the translation when setEditorSelection is passed without focus', async () => {
-    const [wrapper, actions, getResult] = mountForm('Foo');
+    const { wrapper, actions, getResult } = mountForm('Foo');
     act(() => actions.setEditorSelection(', Bar'));
     wrapper.update();
 
@@ -83,11 +88,10 @@ describe('<TranslationForm> with one field', () => {
   });
 
   it('updates the translation when setEditorSelection is passed with focus', async () => {
-    const [wrapper, actions, getResult] = mountForm('Hello');
+    const { actions, getResult, view, wrapper } = mountForm('Hello');
     act(() => {
-      const ta = wrapper.find('textarea');
-      ta.simulate('focus');
-      ta.getDOMNode().setSelectionRange(5, 5);
+      view.focus();
+      view.dispatch({ selection: { anchor: view.state.doc.length } });
       actions.setEditorSelection(', World');
     });
     wrapper.update();
diff --git a/translate/src/modules/translationform/components/TranslationForm.css b/translate/src/modules/translationform/components/TranslationForm.css
index 640d2b451f..257c7bd3fe 100644
--- a/translate/src/modules/translationform/components/TranslationForm.css
+++ b/translate/src/modules/translationform/components/TranslationForm.css
@@ -38,13 +38,6 @@
   color: #7bc876;
 }
 
-.translationform table tr > td > textarea {
-  min-height: 0;
-  height: 24px;
-  margin: 2px 0;
-  padding: 0 4px;
-}
-
 .translationform .accesskey-input {
   border: none;
   box-sizing: border-box;
@@ -81,6 +74,46 @@
 }
 
 .translationform .accesskeys .key.active,
-.translationform .accesskeys .key:hover {
+.translationform .accesskeys .key:hover:not(:disabled) {
   border-color: #7bc876;
 }
+
+.translationform .accesskeys .key:disabled {
+  cursor: default;
+}
+
+.cm-editor {
+  background: white;
+  color: #444;
+  font-size: 14px;
+  line-height: 22px;
+  padding: 6px 8px 6px 4px;
+}
+
+.cm-editor .cm-scroller {
+  font-family: inherit;
+}
+
+.singlefield .cm-content,
+.singlefield .cm-gutter {
+  min-height: calc(100px - 12px);
+}
+
+.translationform .cm-editor {
+  margin: 2px 0;
+  padding: 0;
+}
+
+.translationform .cm-content {
+  padding: 2px 0;
+}
+
+.editor input[readonly],
+.editor .readonly .cm-editor {
+  background: #c7cacf;
+  cursor: default;
+}
+
+[data-script='Arabic'] .cm-editor {
+  font-size: 15px;
+}
diff --git a/translate/src/modules/translationform/components/TranslationForm.tsx b/translate/src/modules/translationform/components/TranslationForm.tsx
index b6a349cc53..270e0b196e 100644
--- a/translate/src/modules/translationform/components/TranslationForm.tsx
+++ b/translate/src/modules/translationform/components/TranslationForm.tsx
@@ -2,7 +2,7 @@ import { Localized } from '@fluent/react';
 import React, {
   useCallback,
   useContext,
-  useLayoutEffect,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -20,14 +20,12 @@ import './TranslationForm.css';
 
 const Label = ({
   getExample,
-  htmlFor,
   labels,
 }: {
   getExample: (label: string) => number | undefined;
-  htmlFor: string;
   labels: Array<{ label: string; plural: boolean }>;
 }) => (
-  <label htmlFor={htmlFor}>
+  <label>
     {labels.map(({ label, plural }, index) => {
       const example = plural && getExample(label);
       const key = label + index;
@@ -58,9 +56,10 @@ const Label = ({
  * interface to the user. The translation is stored as an AST, and changes
  * are made directly to that AST.
  */
-export function TranslationForm(): React.ReactElement<'div'> {
+export function TranslationForm(): React.ReactElement<'div'> | null {
   const { entity } = useContext(EntityView);
-  const { fields, focusField, machinery } = useContext(EditorData);
+  const { fields, focusField, machinery, pk, sourceView } =
+    useContext(EditorData);
   const [shouldFocus, setShouldFocus] = useState(true);
 
   const locale = useContext(Locale);
@@ -77,7 +76,7 @@ export function TranslationForm(): React.ReactElement<'div'> {
 
   // Reset the currently focused element when the entity changes or
   // the translation changes from an external source.
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!searchBoxHasFocus()) {
       setShouldFocus(true);
     }
@@ -102,14 +101,16 @@ export function TranslationForm(): React.ReactElement<'div'> {
     [fields, focusField, shouldFocus],
   );
 
-  return fields.length === 1 ? (
-    <EditField
-      ref={fieldValues[0].ref}
-      key={entity.pk}
-      defaultValue={fields[0].handle.current.value}
-      index={0}
-      singleField
-    />
+  return pk !== entity.pk ? null : fields.length === 1 ? (
+    <div className='singlefield'>
+      <EditField
+        ref={fieldValues[0].ref}
+        key={sourceView ? 's!' + pk : pk}
+        defaultValue={fields[0].handle.current.value}
+        index={0}
+        singleField
+      />
+    </div>
   ) : (
     <div className='translationform' key={entity.pk}>
       <table>
@@ -124,13 +125,13 @@ export function TranslationForm(): React.ReactElement<'div'> {
             return (
               <tr key={id}>
                 <td>
-                  <Label getExample={getExample} htmlFor={id} labels={labels} />
+                  <Label getExample={getExample} labels={labels} />
                 </td>
                 <td>
                   <EditPattern
+                    key={pk + id}
                     ref={ref}
                     defaultValue={value}
-                    id={id}
                     index={i}
                     name={name}
                     onFocus={onFocus}
diff --git a/translate/src/modules/translationform/utils/editFieldExtensions.ts b/translate/src/modules/translationform/utils/editFieldExtensions.ts
new file mode 100644
index 0000000000..a1c3aabab1
--- /dev/null
+++ b/translate/src/modules/translationform/utils/editFieldExtensions.ts
@@ -0,0 +1,90 @@
+import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+import {
+  history,
+  historyKeymap,
+  insertNewlineAndIndent,
+  standardKeymap,
+} from '@codemirror/commands';
+import { bracketMatching } from '@codemirror/language';
+import { Extension } from '@codemirror/state';
+import {
+  EditorView,
+  highlightTrailingWhitespace,
+  keymap,
+} from '@codemirror/view';
+import { useContext, useEffect, useRef } from 'react';
+
+import { EditorActions } from '~/context/Editor';
+import { useCopyOriginalIntoEditor } from '~/modules/editor';
+import {
+  useHandleCtrlShiftArrow,
+  useHandleEnter,
+  useHandleEscape,
+} from './editFieldShortcuts';
+
+/**
+ * Key handlers depend on application state,
+ * so rather than updating the keymap continuously,
+ * let's use a ref for the handlers instead.
+ */
+export function useKeyHandlers() {
+  const { clearEditor } = useContext(EditorActions);
+  const copyOriginalIntoEditor = useCopyOriginalIntoEditor();
+  const onCtrlShiftArrow = useHandleCtrlShiftArrow();
+  const onEnter = useHandleEnter();
+  const onEscape = useHandleEscape();
+
+  const handlers = {
+    onCtrlShiftArrow,
+    onCtrlShiftBackspace() {
+      clearEditor();
+      return true as const;
+    },
+    onCtrlShiftC() {
+      copyOriginalIntoEditor();
+      return true as const;
+    },
+    onEnter,
+    onEscape,
+  };
+  const ref = useRef(handlers);
+  useEffect(() => {
+    ref.current = handlers;
+  });
+  return ref;
+}
+
+export const getExtensions = (
+  ref: ReturnType<typeof useKeyHandlers>,
+): Extension[] => [
+  highlightTrailingWhitespace(),
+  history(),
+  bracketMatching(),
+  closeBrackets(),
+  EditorView.lineWrapping,
+  keymap.of([
+    {
+      key: 'Enter',
+      run: () => ref.current.onEnter(),
+      shift: insertNewlineAndIndent,
+    },
+    { key: 'Mod-Enter', run: insertNewlineAndIndent },
+    { key: 'Escape', run: () => ref.current.onEscape() },
+    {
+      key: 'Shift-Ctrl-ArrowDown',
+      run: () => ref.current.onCtrlShiftArrow('ArrowDown'),
+    },
+    {
+      key: 'Shift-Ctrl-ArrowUp',
+      run: () => ref.current.onCtrlShiftArrow('ArrowUp'),
+    },
+    {
+      key: 'Shift-Ctrl-Backspace',
+      run: () => ref.current.onCtrlShiftBackspace(),
+    },
+    { key: 'Shift-Ctrl-c', run: () => ref.current.onCtrlShiftC() },
+    ...closeBracketsKeymap,
+    ...standardKeymap,
+    ...historyKeymap,
+  ]),
+];
diff --git a/translate/src/modules/translationform/utils/editFieldShortcuts.ts b/translate/src/modules/translationform/utils/editFieldShortcuts.ts
new file mode 100644
index 0000000000..c51f0a21dd
--- /dev/null
+++ b/translate/src/modules/translationform/utils/editFieldShortcuts.ts
@@ -0,0 +1,127 @@
+import { useContext } from 'react';
+
+import { EditorActions } from '~/context/Editor';
+import { EntityView } from '~/context/EntityView';
+import { FailedChecksData } from '~/context/FailedChecksData';
+import { HelperSelection } from '~/context/HelperSelection';
+import { MachineryTranslations } from '~/context/MachineryTranslations';
+import { SearchData } from '~/context/SearchData';
+import { UnsavedActions, UnsavedChanges } from '~/context/UnsavedChanges';
+import { useAppSelector } from '~/hooks';
+import { getPlainMessage } from '~/utils/message';
+
+import { useExistingTranslationGetter } from '../../editor/hooks/useExistingTranslationGetter';
+import { useSendTranslation } from '../../editor/hooks/useSendTranslation';
+import { useUpdateTranslationStatus } from '../../editor/hooks/useUpdateTranslationStatus';
+
+/**
+ *  On Enter:
+ *   - If unsaved changes popup is shown, proceed.
+ *   - If failed checks popup is shown after approving a translation, approve it anyway.
+ *   - In other cases, send current translation.
+ */
+export function useHandleEnter(): () => true {
+  const sendTranslation = useSendTranslation();
+  const updateTranslationStatus = useUpdateTranslationStatus();
+  const { resetUnsavedChanges } = useContext(UnsavedActions);
+  const unsavedChanges = useContext(UnsavedChanges);
+  const getExistingTranslation = useExistingTranslationGetter();
+  const { errors, source, warnings } = useContext(FailedChecksData);
+
+  return () => {
+    const ignoreWarnings = errors.length + warnings.length > 0;
+
+    if (unsavedChanges.onIgnore) {
+      // There are unsaved changes, proceed.
+      resetUnsavedChanges(true);
+    } else if (typeof source === 'number') {
+      // Approve anyway.
+      updateTranslationStatus(source, 'approve', ignoreWarnings);
+    } else {
+      const existingTranslation = getExistingTranslation();
+      if (existingTranslation && !existingTranslation.approved) {
+        updateTranslationStatus(
+          existingTranslation.pk,
+          'approve',
+          ignoreWarnings,
+        );
+      } else {
+        sendTranslation(ignoreWarnings);
+      }
+    }
+    return true;
+  };
+}
+
+/** On Esc, close unsaved changes and failed checks popups if open. */
+export function useHandleEscape(): () => boolean {
+  const { resetUnsavedChanges } = useContext(UnsavedActions);
+  const unsavedChanges = useContext(UnsavedChanges);
+  const { errors, warnings, resetFailedChecks } = useContext(FailedChecksData);
+
+  return () => {
+    if (unsavedChanges.onIgnore) {
+      // Close unsaved changes popup
+      resetUnsavedChanges(false);
+      return true;
+    } else if (errors.length || warnings.length) {
+      // Close failed checks popup
+      resetFailedChecks();
+      return true;
+    }
+    return false;
+  };
+}
+
+/**
+ * On Ctrl + Shift + Up/Down, copy next/previous entry from active
+ * helper tab (Machinery or Locales) into translation.
+ */
+export function useHandleCtrlShiftArrow(): (
+  key: 'ArrowDown' | 'ArrowUp',
+) => boolean {
+  const { entity } = useContext(EntityView);
+  const { setEditorFromHelpers } = useContext(EditorActions);
+  const helperSelection = useContext(HelperSelection);
+  const { translations: machineryTranslations } = useContext(
+    MachineryTranslations,
+  );
+  const { results: concordanceSearchResults } = useContext(SearchData);
+  const otherLocaleTranslations = useAppSelector(
+    (state) => state.otherlocales.translations,
+  );
+
+  return (key) => {
+    const { tab, element, setElement } = helperSelection;
+    const isMachinery = tab === 0;
+    const numTranslations = isMachinery
+      ? machineryTranslations.length + concordanceSearchResults.length
+      : otherLocaleTranslations.length;
+
+    if (numTranslations === 0) {
+      return false;
+    }
+    const nextIdx =
+      key === 'ArrowDown'
+        ? (element + 1) % numTranslations
+        : (element - 1 + numTranslations) % numTranslations;
+    setElement(nextIdx);
+
+    if (isMachinery) {
+      const len = machineryTranslations.length;
+      const { translation, sources } =
+        nextIdx < len
+          ? machineryTranslations[nextIdx]
+          : concordanceSearchResults[nextIdx - len];
+      setEditorFromHelpers(translation, sources, true);
+    } else {
+      const { translation } = otherLocaleTranslations[nextIdx];
+      setEditorFromHelpers(
+        getPlainMessage(translation, entity.format),
+        [],
+        true,
+      );
+    }
+    return true;
+  };
+}
diff --git a/translate/src/utils/message/editMessageEntry.tsx b/translate/src/utils/message/editMessageEntry.tsx
index e4b844d615..d3dcaf785a 100644
--- a/translate/src/utils/message/editMessageEntry.tsx
+++ b/translate/src/utils/message/editMessageEntry.tsx
@@ -9,6 +9,9 @@ const emptyHandleRef = (value: string) => ({
     value,
     focus() {},
     setSelection() {},
+    setValue(text: string) {
+      this.value = text;
+    },
   },
 });