From e4f9530e105ecb4dee0c3e0811897f068c905fee Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Tue, 11 Jun 2024 09:28:38 +0530
Subject: [PATCH 1/2] Avoid direct modification of HTML

---
 .../modules/IDE/components/Editor/index.jsx   | 34 ++++++++++++++-----
 .../IDE/components/EditorAccessibility.jsx    |  9 +++--
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/client/modules/IDE/components/Editor/index.jsx b/client/modules/IDE/components/Editor/index.jsx
index 6f5eeb5609..3e7e4dcb16 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 (
       <MediaQuery minWidth={770}>
         {(matches) =>
@@ -565,7 +575,10 @@ class Editor extends React.Component {
                   name={this.props.file.name}
                 />
               ) : null}
-              <EditorAccessibility lintMessages={this.props.lintMessages} />
+              <EditorAccessibility
+                lintMessages={this.props.lintMessages}
+                currentLine={currentLine}
+              />
             </section>
           ) : (
             <EditorContainer expanded={this.props.isExpanded}>
@@ -591,7 +604,10 @@ class Editor extends React.Component {
                     name={this.props.file.name}
                   />
                 ) : null}
-                <EditorAccessibility lintMessages={this.props.lintMessages} />
+                <EditorAccessibility
+                  lintMessages={this.props.lintMessages}
+                  currentLine={currentLine}
+                />
               </section>
             </EditorContainer>
           )
diff --git a/client/modules/IDE/components/EditorAccessibility.jsx b/client/modules/IDE/components/EditorAccessibility.jsx
index c569d51258..fcd095bf64 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 = ({ lintMessages = [], currentLine }) => {
   const { t } = useTranslation();
+  const lineText = t('Editor.KeyUpLineNumber', { lineNumber: currentLine });
+
   return (
     <div className="editor-accessibility">
       <ul className="editor-lintmessages" title="lint messages">
@@ -27,7 +29,7 @@ const EditorAccessibility = ({ lintMessages = [] }) => {
           aria-atomic="true"
           id="current-line"
         >
-          {' '}
+          {lineText}
         </span>
       </p>
     </div>
@@ -43,7 +45,8 @@ EditorAccessibility.propTypes = {
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired
     })
-  ).isRequired
+  ).isRequired,
+  currentLine: PropTypes.number.isRequired
 };
 
 export default EditorAccessibility;

From 1f2100642dcd43deed7418ce26e42dd3d4fbb971 Mon Sep 17 00:00:00 2001
From: Piyush <chandra.piyush17@gmail.com>
Date: Tue, 11 Jun 2024 10:17:43 +0530
Subject: [PATCH 2/2] used React.memo to prevent unnecessary re-renders

---
 client/modules/IDE/components/EditorAccessibility.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/components/EditorAccessibility.jsx b/client/modules/IDE/components/EditorAccessibility.jsx
index fcd095bf64..8e9422c6b0 100644
--- a/client/modules/IDE/components/EditorAccessibility.jsx
+++ b/client/modules/IDE/components/EditorAccessibility.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-const EditorAccessibility = ({ lintMessages = [], currentLine }) => {
+const EditorAccessibility = React.memo(({ lintMessages = [], currentLine }) => {
   const { t } = useTranslation();
   const lineText = t('Editor.KeyUpLineNumber', { lineNumber: currentLine });
 
@@ -34,7 +34,7 @@ const EditorAccessibility = ({ lintMessages = [], currentLine }) => {
       </p>
     </div>
   );
-};
+});
 
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.arrayOf(