diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx index f41f9eecd8..c66d99b458 100644 --- a/client/modules/IDE/components/Editor/index.jsx +++ b/client/modules/IDE/components/Editor/index.jsx @@ -84,6 +84,10 @@ const INDENTATION_AMOUNT = 2; class Editor extends React.Component { constructor(props) { super(props); + this.state = { + currentLine: 1 + }; + this._cm = null; this.tidyCode = this.tidyCode.bind(this); this.updateLintingMessageAccessibility = debounce((annotations) => { @@ -195,12 +199,9 @@ class Editor extends React.Component { }, 1000) ); - this._cm.on('keyup', () => { - const temp = this.props.t('Editor.KeyUpLineNumber', { - lineNumber: parseInt(this._cm.getCursor().line + 1, 10) - }); - document.getElementById('current-line').innerHTML = temp; - }); + if (this._cm) { + this._cm.on('keyup', this.handleKeyUp); + } this._cm.on('keydown', (_cm, e) => { // Show hint @@ -336,7 +337,9 @@ class Editor extends React.Component { } componentWillUnmount() { - this._cm = null; + if (this._cm) { + this._cm.off('keyup', this.handleKeyUp); + } this.props.provideController(null); } @@ -366,6 +369,11 @@ class Editor extends React.Component { return updatedFile; } + handleKeyUp = () => { + const lineNumber = parseInt(this._cm.getCursor().line + 1, 10); + this.setState({ currentLine: lineNumber }); + }; + showFind() { this._cm.execCommand('findPersistent'); } @@ -522,6 +530,8 @@ class Editor extends React.Component { this.props.file.fileType === 'folder' || this.props.file.url }); + const { currentLine } = this.state; + return ( {(matches) => @@ -565,7 +575,10 @@ class Editor extends React.Component { name={this.props.file.name} /> ) : null} - + ) : ( @@ -591,7 +604,10 @@ class Editor extends React.Component { name={this.props.file.name} /> ) : null} - + ) diff --git a/client/modules/IDE/components/EditorAccessibility.jsx b/client/modules/IDE/components/EditorAccessibility.jsx index c569d51258..8e9422c6b0 100644 --- a/client/modules/IDE/components/EditorAccessibility.jsx +++ b/client/modules/IDE/components/EditorAccessibility.jsx @@ -2,8 +2,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import { useTranslation } from 'react-i18next'; -const EditorAccessibility = ({ lintMessages = [] }) => { +const EditorAccessibility = React.memo(({ lintMessages = [], currentLine }) => { const { t } = useTranslation(); + const lineText = t('Editor.KeyUpLineNumber', { lineNumber: currentLine }); + return (
    @@ -27,12 +29,12 @@ const EditorAccessibility = ({ lintMessages = [] }) => { aria-atomic="true" id="current-line" > - {' '} + {lineText}

); -}; +}); EditorAccessibility.propTypes = { lintMessages: PropTypes.arrayOf( @@ -43,7 +45,8 @@ EditorAccessibility.propTypes = { message: PropTypes.string.isRequired, id: PropTypes.number.isRequired }) - ).isRequired + ).isRequired, + currentLine: PropTypes.number.isRequired }; export default EditorAccessibility;