diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index ce57901f..559fff23 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -2,12 +2,14 @@ // Copyright (c) 2020 The Pybricks Authors import { ResizeSensor } from '@blueprintjs/core'; +import { WithI18nProps, withI18n } from '@shopify/react-i18n'; import { Ace } from 'ace-builds'; import React from 'react'; import AceEditor from 'react-ace'; import { connect } from 'react-redux'; import { Action, Dispatch } from '../actions'; import { setEditSession } from '../actions/editor'; +import en from './editor.en.json'; import 'ace-builds/src-noconflict/mode-python'; import 'ace-builds/src-noconflict/theme-xcode'; @@ -16,7 +18,7 @@ import 'ace-builds/src-min-noconflict/ext-language_tools'; type DispatchProps = { onSessionChanged: (session?: Ace.EditSession) => void }; -type EditorProps = DispatchProps; +type EditorProps = DispatchProps & WithI18nProps; class Editor extends React.Component { private editorRef: React.RefObject; @@ -40,7 +42,7 @@ class Editor extends React.Component { width="100%" height="100%" focus={true} - placeholder="Write your program here..." + placeholder={this.props.i18n.translate('editor.placeholder')} defaultValue={localStorage.getItem('program') || undefined} editorProps={{ $blockScrolling: true }} setOptions={{ @@ -74,4 +76,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({ onSessionChanged: (s): Action => dispatch(setEditSession(s)), }); -export default connect(undefined, mapDispatchToProps)(Editor); +export default connect( + undefined, + mapDispatchToProps, +)(withI18n({ id: 'editor', fallback: en, translations: { en } })(Editor)); diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index a48a8b2e..72b292c0 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -98,6 +98,6 @@ export default connect( withI18n({ id: 'notification', fallback: en, - translations: () => ({ en }), + translations: { en }, })(Notification), ); diff --git a/src/components/editor.en.json b/src/components/editor.en.json new file mode 100644 index 00000000..15e88db3 --- /dev/null +++ b/src/components/editor.en.json @@ -0,0 +1,5 @@ +{ + "editor": { + "placeholder": "Write your program here..." + } +}