Fix bug 1542611 - Always put focus on Editor. (#1258)

mozilla · Apr 16, 2019 · 9c87360 · 9c87360
1 parent 5bb924d
commit 9c87360
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 16 deletions.
diff --git a/frontend/src/modules/editor/actions.js b/frontend/src/modules/editor/actions.js
@@ -19,11 +19,13 @@ export const UPDATE_SELECTION: 'editor/UPDATE_SELECTION' = 'editor/UPDATE_SELECT
 export type UpdateAction = {|
     +type: typeof UPDATE,
     +translation: string,
+    +changeSource: string,
 |};
-export function update(translation: string): UpdateAction {
+export function update(translation: string, changeSource?: string): UpdateAction {
     return {
         type: UPDATE,
         translation,
+        changeSource: changeSource || 'internal',
     };
 }
 

diff --git a/frontend/src/modules/editor/components/Editor.js b/frontend/src/modules/editor/components/Editor.js
@@ -51,18 +51,19 @@ export class EditorBase extends React.Component<InternalProps> {
         this.props.dispatch(actions.resetSelection());
     }
 
-    updateTranslation = (translation: string) => {
-        this.props.dispatch(actions.update(translation));
+    updateTranslation = (translation: string, fromOutsideEditor?: boolean) => {
+        const source = fromOutsideEditor ? 'external' : 'internal';
+        this.props.dispatch(actions.update(translation, source));
     }
 
     copyOriginalIntoEditor = () => {
         const { selectedEntity, pluralForm } = this.props;
         if (selectedEntity) {
             if (pluralForm === -1 || pluralForm === 1) {
-                this.updateTranslation(selectedEntity.original);
+                this.updateTranslation(selectedEntity.original, true);
             }
             else {
-                this.updateTranslation(selectedEntity.original_plural);
+                this.updateTranslation(selectedEntity.original_plural, true);
             }
         }
     }

diff --git a/frontend/src/modules/editor/components/EditorProxy.js b/frontend/src/modules/editor/components/EditorProxy.js
@@ -32,6 +32,7 @@ export default class EditorProxy extends React.Component<EditorProxyProps> {
 
         if (entity.format === 'ftl') {
             return <FluentEditor
+                key={ entity.pk }
                 isReadOnlyEditor={ this.props.isReadOnlyEditor }
                 editor={ this.props.editor }
                 locale={ this.props.locale }
@@ -43,6 +44,7 @@ export default class EditorProxy extends React.Component<EditorProxyProps> {
         }
 
         return <GenericEditor
+            key={ entity.pk }
             isReadOnlyEditor={ this.props.isReadOnlyEditor }
             editor={ this.props.editor }
             locale={ this.props.locale }

diff --git a/frontend/src/modules/editor/components/FluentEditor.js b/frontend/src/modules/editor/components/FluentEditor.js
@@ -43,7 +43,20 @@ export default class FluentEditor extends React.Component<EditorProps> {
         this.aceEditor = React.createRef();
     }
 
+    componentDidMount() {
+        if (!this.aceEditor.current) {
+            return;
+        }
+        this.aceEditor.current.editor.focus();
+        this.aceEditor.current.editor.moveCursorTo(0, 0);
+        this.aceEditor.current.editor.clearSelection();
+    }
+
     componentDidUpdate() {
+        if (!this.aceEditor.current) {
+            return;
+        }
+
         // If there is content to add to the editor, do so, then remove
         // the content so it isn't added again.
         // This is an abuse of the redux store, because we want to update
@@ -56,6 +69,8 @@ export default class FluentEditor extends React.Component<EditorProps> {
             );
             this.props.resetSelectionContent();
         }
+
+        this.aceEditor.current.editor.focus();
     }
 
     updateTranslationSelectionWith(content: string) {
@@ -91,6 +106,7 @@ export default class FluentEditor extends React.Component<EditorProps> {
             mode='fluent'
             theme='fluent'
             width='100%'
+            focus={ true }
             wrapEnabled={ true }
             setOptions={ options }
             value={ this.props.editor.translation }

diff --git a/frontend/src/modules/editor/components/FluentEditor.test.js b/frontend/src/modules/editor/components/FluentEditor.test.js
@@ -7,7 +7,7 @@ import FluentEditor from './FluentEditor';
 
 describe('<FluentEditor>', () => {
     const EDITOR = {
-        translation: 'hello',
+        translation: 'world',
     };
 
     it('renders a textarea with some content', () => {
@@ -29,7 +29,7 @@ describe('<FluentEditor>', () => {
         wrapper.setProps({
             editor: {
                 ...EDITOR,
-                selectionReplacementContent: ' world'
+                selectionReplacementContent: 'hello '
             }
         });
 

diff --git a/frontend/src/modules/editor/components/GenericEditor.js b/frontend/src/modules/editor/components/GenericEditor.js
@@ -33,11 +33,9 @@ export default class GenericEditor extends React.Component<EditorProps> {
             return;
         }
 
-        // After mounting, put the cursor at the end of the content.
-        this.textarea.current.setSelectionRange(
-            this.props.editor.translation.length,
-            this.props.editor.translation.length,
-        );
+        this.textarea.current.focus();
+        // After mounting, put the cursor at the beginning of the content.
+        this.textarea.current.setSelectionRange(0, 0);
     }
 
     componentDidUpdate() {
@@ -53,6 +51,12 @@ export default class GenericEditor extends React.Component<EditorProps> {
             );
             this.props.resetSelectionContent();
         }
+
+        this.textarea.current.focus();
+
+        if (this.props.editor.changeSource === 'external') {
+            this.textarea.current.setSelectionRange(0, 0);
+        }
     }
 
     updateTranslationSelectionWith(content: string) {

diff --git a/frontend/src/modules/editor/components/GenericEditor.test.js b/frontend/src/modules/editor/components/GenericEditor.test.js
@@ -12,7 +12,7 @@ const DEFAULT_LOCALE = {
 };
 
 const EDITOR = {
-    translation: 'hello',
+    translation: 'world',
 };
 
 
@@ -24,7 +24,7 @@ describe('<GenericEditor>', () => {
         />);
 
         expect(wrapper.find('textarea')).toHaveLength(1);
-        expect(wrapper.find('textarea').html()).toContain('hello');
+        expect(wrapper.find('textarea').html()).toContain('world');
     });
 
     it('calls the updateTranslation function on change', () => {
@@ -51,7 +51,7 @@ describe('<GenericEditor>', () => {
             updateTranslation={ updateMock }
         />);
 
-        wrapper.setProps({ editor: { selectionReplacementContent: ' world' } });
+        wrapper.setProps({ editor: { selectionReplacementContent: 'hello ' } });
 
         expect(updateMock.calledOnce).toBeTruthy();
         expect(updateMock.calledWith('hello world')).toBeTruthy();

diff --git a/frontend/src/modules/editor/reducer.js b/frontend/src/modules/editor/reducer.js
@@ -17,12 +17,23 @@ type Action =
 
 export type EditorState = {|
     +translation: string,
+    +changeSource: string,
     +selectionReplacementContent: string,
 |};
 
 
 const initial: EditorState = {
     translation: '',
+
+    // Source of the current change. 'internal' or missing if from inside the
+    // Editor, 'external' otherwise. This allows the Editor to behave
+    // differently depending on the type of change.
+    changeSource: 'internal',
+
+    // Order to replace the currently selected text inside the Editor with
+    // this content. This is reset after that change has been made. Because
+    // we have different Editor implementations, we need to let those components
+    // perform the actual replacement logic.
     selectionReplacementContent: '',
 };
 
@@ -35,11 +46,13 @@ export default function reducer(
             return {
                 ...state,
                 translation: action.translation,
+                changeSource: action.changeSource,
             };
         case UPDATE_SELECTION:
             return {
                 ...state,
                 selectionReplacementContent: action.content,
+                changeSource: 'internal',
             };
         case RESET_SELECTION:
             return {

diff --git a/frontend/src/modules/entitydetails/components/EntityDetails.js b/frontend/src/modules/entitydetails/components/EntityDetails.js
@@ -139,7 +139,7 @@ export class EntityDetailsBase extends React.Component<InternalProps, State> {
     }
 
     updateEditorTranslation = (translation: string) => {
-        this.props.dispatch(editor.actions.update(translation));
+        this.props.dispatch(editor.actions.update(translation, 'external'));
     }
 
     addTextToEditorTranslation = (content: string) => {