Replace editor <textarea> with CodeMirror v6

mozilla · May 29, 2023 · 1dd92e4 · 1dd92e4
1 parent ea082d6
commit 1dd92e4
Show file tree

Hide file tree

Showing 10 changed files with 318 additions and 182 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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/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
@@ -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,35 +129,35 @@ 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');
   });
 
   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');
   });
 
   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 () => {