Replace editor `<textarea>` with CodeMirror v6 #2866

eemeli · 2023-05-28T11:50:30Z

Replaces the translation editor <textarea> using CodeMirror, an editor we'll be able to extend to provide e.g. syntax and error highlighting as well as autocompletion.

As CodeMirror isn't React, but does manage its internal state in a similar manner, matching that within the app requires some finessing. A new context EditorResult is added to EditorProvider as an output; it's updated by the editor, but not read by it. The pre-existing EditorData now no longer directly contains the value being edited, but does have references to EditFieldHandles, an interface that abstracts the get/set/focus operations for each field.

…editor value

eemeli · 2023-05-29T20:11:24Z

Rebased to not include other PR contents. Got tests to pass, though needed to skip a couple due to the difference in selection handling. Will need to work on that to help ensure that we also fix #2781.

eemeli · 2023-05-30T13:08:12Z

Key shortcuts and default selection should now work. This now fixes #2781.

eemeli · 2023-05-30T17:39:49Z

I'll stop rebasing this now, as it's starting to look properly reviewable

eemeli · 2023-05-30T17:43:39Z

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' },


One of the new dependencies includes a module with a top-level statement const top = .... With the default output.format, Rollup presumes that the code will be included in a <script type=module> so leaves it at the top level. However, as we don't do that, the output needs to be wrapped in an IIFE.

eemeli · 2023-05-30T17:48:45Z

translate/src/context/Editor.tsx


-  const [state, setState] = useState<EditorData>(initEditorData);
+  const [state, setState] = useState(initEditorData);
+  const [result, setResult] = useState<EditorResult>([]);

  const actions = useMemo<EditorActions>(() => {


The actions that directly set a new value for fields need to also update result. Those that call field.handle.current.setValue() don't, as the EditField and EditAccessKey will take care of that.

eemeli · 2023-05-30T17:55:19Z

translate/src/modules/editor/hooks/useHandleShortcuts.ts

Contents refactored & moved to translate/src/modules/translationform/utils/editFieldShortcuts.ts.

eemeli · 2023-05-30T17:56:20Z

translate/src/modules/editor/components/Editor.css

textarea styles refactored & moved to translate/src/modules/translationform/components/TranslationForm.css

eemeli · 2023-05-30T18:01:11Z

translate/src/modules/translationform/components/EditAccesskey.tsx

-  const locale = useContext(Locale);
-  const { setEditorFromInput } = useContext(EditorActions);
-  const message = useEditorValue();
+function useHandleShortcuts(): (event: React.KeyboardEvent) => void {


CodeMirror has its own way of specifying key handlers, so this is now specific to EditAccesskey.

As a follow-up change, we should probably move these handlers out of the editors, so that they're applied also when the focus isn't on the input field, rather like Alt/Option+ArrowDown/ArrowUp.

eemeli · 2023-05-30T18:05:04Z

translate/src/modules/translationform/components/TranslationForm.css

+  cursor: default;
+}
+
+.cm-editor {


CodeMirror packages in some styling for itself via CSS-in-JS; these are overrides on those defaults. It does include its own styling system, but relying on CSS is just as valid, and more in line with what we've been doing so far.

eemeli · 2023-05-30T18:06:43Z

translate/src/modules/translationform/components/TranslationForm.tsx

  labels: Array<{ label: string; plural: boolean }>;
 }) => (
-  <label htmlFor={htmlFor}>
+  <label>


Sadly, HTML <label> and contentEditable doesn't really play well together, so clicking on the label will no longer focus the appropriate field.

That's a nasty UX issue. Why do we need contenteditable?

Because it's used by CodeMirror, and effectively the basis on which any solution other than <textarea> is built.

Oh, ok - I thought we were also using contenteditable in the label.

eemeli · 2023-05-30T18:09:06Z

translate/src/modules/translationform/components/TranslationForm.tsx

-      userInput={userInput}
-      value={value[0]?.value}
-    />
+  return pk !== entity.pk ? null : fields.length === 1 ? (


Sometimes, we render TranslationForm before EditorProvider updates on entity change. This pk check ensures that we don't try to build a form with intermediate data, because that gets pretty messy.

eemeli · 2023-05-30T18:12:12Z

translate/src/modules/translationform/utils/editFieldExtensions.ts

+  bracketMatching(),
+  closeBrackets(),
+  EditorView.lineWrapping,
+  keymap.of([


The first binding that matches and returns true stops further bindings from being run, so order here matters. As standardKeymap includes bindings matching most of our own customizations, those need to come first.

mathjazz · 2023-06-14T18:21:45Z

Fixes #2180

This PR doesn't fix the whole issue. We should either file a separate issue to track the implementation of the rich editor, or separate issues to track syntax highlighting and error annotations.

eemeli · 2023-06-14T20:15:33Z

Fixes #2180

This PR doesn't fix the whole issue. We should either file a separate issue to track the implementation of the rich editor, or separate issues to track syntax highlighting and error annotations.

Point taken. Removed the closing link.

mathjazz

Works very well, excellent job!

The only thing we should fix in addition to the CSS comment inline is add a short delay before we trigger trailing space indicator. Currently it's annoying to see the red color blinking as you type.

translate/src/modules/translationform/components/TranslationForm.css

translate/src/modules/translationform/utils/editFieldExtensions.ts

eemeli · 2023-06-15T11:11:19Z

The only thing we should fix in addition to the CSS comment inline is add a short delay before we trigger trailing space indicator. Currently it's annoying to see the red color blinking as you type.

The default extension for this isn't configurable like that, so I removed it for now.

This reverts commit 9a1ee55.

* Revert "Re-enable spellchecker in translation editor (#2884)" This reverts commit efa6859. * Revert "Add syntax highlighting for placeholders and tags (#2879)" This reverts commit 9220827. * Revert "Replace editor `<textarea>` with CodeMirror v6 (#2866)" This reverts commit 9a1ee55.

refactor: Add EditFieldHandle and EditorResult as interfaces for the …

ea082d6

…editor value

eemeli force-pushed the codemirror branch from ecbcb78 to 1dd92e4 Compare May 29, 2023 17:45

eemeli linked an issue May 29, 2023 that may be closed by this pull request

Improve Fluent source editor with syntax highlighting, error annotations #2180

Open

eemeli force-pushed the codemirror branch from 1dd92e4 to b04358a Compare May 30, 2023 13:06

eemeli linked an issue May 30, 2023 that may be closed by this pull request

Clicking a placeable in source string moves the cursor to the end of the string #2781

Closed

eemeli force-pushed the codemirror branch from b04358a to 57a7927 Compare May 30, 2023 17:00

Replace editor <textarea> with CodeMirror v6

1767c27

eemeli force-pushed the codemirror branch from 57a7927 to 1767c27 Compare May 30, 2023 17:35

eemeli marked this pull request as ready for review May 30, 2023 17:39

eemeli requested a review from mathjazz May 30, 2023 17:40

eemeli commented May 30, 2023

View reviewed changes

Fix unsaved changes reset

5475228

eemeli removed a link to an issue Jun 14, 2023

Improve Fluent source editor with syntax highlighting, error annotations #2180

Open

mathjazz reviewed Jun 15, 2023

View reviewed changes

translate/src/modules/translationform/components/TranslationForm.css Outdated Show resolved Hide resolved

eemeli commented Jun 15, 2023

View reviewed changes

translate/src/modules/translationform/components/TranslationForm.css Outdated Show resolved Hide resolved

eemeli commented Jun 15, 2023

View reviewed changes

translate/src/modules/translationform/utils/editFieldExtensions.ts Outdated Show resolved Hide resolved

eemeli commented Jun 15, 2023

View reviewed changes

translate/src/modules/translationform/utils/editFieldExtensions.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

a1e84a1

mathjazz approved these changes Jun 15, 2023

View reviewed changes

eemeli merged commit 9a1ee55 into mozilla:master Jun 15, 2023

eemeli deleted the codemirror branch June 15, 2023 13:09

mathjazz added a commit to mathjazz/pontoon that referenced this pull request Jun 20, 2023

Revert "Replace editor <textarea> with CodeMirror v6 (mozilla#2866)"

7e0dba8

This reverts commit 9a1ee55.

mathjazz added a commit to mathjazz/pontoon that referenced this pull request Jun 20, 2023

Revert "Replace editor <textarea> with CodeMirror v6 (mozilla#2866)"

e83dfb6

This reverts commit 9a1ee55.

This was referenced Jun 21, 2023

Translators can't approve pending suggestions #2885

Closed

Autogrow rich editor fields to display the entire content #2274

Closed

mathjazz added a commit to mathjazz/pontoon that referenced this pull request Jun 22, 2023

Revert "Replace editor <textarea> with CodeMirror v6 (mozilla#2866)"

291e2f1

This reverts commit 9a1ee55.

eemeli mentioned this pull request Jul 25, 2023

Re-introduce CodeMirror editor + delay setting failed checks until editor results have updated #2917

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace editor `<textarea>` with CodeMirror v6 #2866

Replace editor `<textarea>` with CodeMirror v6 #2866

eemeli commented May 28, 2023 •

edited

Loading

eemeli commented May 29, 2023

eemeli commented May 30, 2023

eemeli commented May 30, 2023

eemeli May 30, 2023

eemeli May 30, 2023

eemeli May 30, 2023

eemeli May 30, 2023

eemeli May 30, 2023

eemeli May 30, 2023

eemeli May 30, 2023 •

edited by mathjazz

Loading

mathjazz Jun 14, 2023

eemeli Jun 14, 2023

mathjazz Jun 14, 2023

eemeli May 30, 2023

eemeli May 30, 2023

mathjazz commented Jun 14, 2023 •

edited

Loading

eemeli commented Jun 14, 2023

mathjazz left a comment

eemeli commented Jun 15, 2023

Replace editor <textarea> with CodeMirror v6 #2866

Replace editor <textarea> with CodeMirror v6 #2866

Conversation

eemeli commented May 28, 2023 • edited Loading

eemeli commented May 29, 2023

eemeli commented May 30, 2023

eemeli commented May 30, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eemeli May 30, 2023 • edited by mathjazz Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mathjazz commented Jun 14, 2023 • edited Loading

eemeli commented Jun 14, 2023

mathjazz left a comment

Choose a reason for hiding this comment

eemeli commented Jun 15, 2023

Replace editor `<textarea>` with CodeMirror v6 #2866

Replace editor `<textarea>` with CodeMirror v6 #2866

eemeli commented May 28, 2023 •

edited

Loading

eemeli May 30, 2023 •

edited by mathjazz

Loading

mathjazz commented Jun 14, 2023 •

edited

Loading