[ESLint] Prefer .textContent over .innerText (#3118)

graphql · May 27, 2023 · 431b7fe · 431b7fe
1 parent c645932
commit 431b7fe
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 14 deletions.
diff --git a/.changeset/two-chicken-pretend.md b/.changeset/two-chicken-pretend.md
@@ -0,0 +1,6 @@
+---
+'cm6-graphql': patch
+'@graphiql/react': patch
+---
+
+Prefer `.textContent` over `.innerText`
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -305,6 +305,7 @@ module.exports = {
         'unicorn/prefer-keyboard-event-key': 'off',
 
         'unicorn/prefer-switch': 'error',
+        'unicorn/prefer-dom-node-text-content': 'error',
         // TODO: Fix all errors for the following rules included in recommended config
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-var-requires': 'off',
@@ -343,6 +344,10 @@ module.exports = {
     {
       files: ['**/cypress/**'],
       extends: 'plugin:cypress/recommended',
+      rules: {
+        // Because innerText doesn't return hidden elements and returns new line (\n) characters
+        'unicorn/prefer-dom-node-text-content': 'off',
+      },
     },
     {
       // Rules for unit tests

diff --git a/examples/monaco-graphql-webpack/src/index.ts b/examples/monaco-graphql-webpack/src/index.ts
@@ -231,7 +231,7 @@ function renderToolbar(toolbar: HTMLElement) {
   executionTray.classList.add('align-right');
 
   executeOpButton.id = 'execute-op';
-  executeOpButton.innerText = 'Run Operation ➤';
+  executeOpButton.textContent = 'Run Operation ➤';
   executeOpButton.title = 'Execute the active GraphQL Operation';
 
   schemaReloadButton.classList.add('reload-button');

diff --git a/packages/cm6-graphql/src/completions.ts b/packages/cm6-graphql/src/completions.ts
@@ -47,7 +47,8 @@ export const completion = graphqlLanguage.data.of({
               (item.isDeprecated && item.deprecationReason)
             ) {
               const el = document.createElement('div');
-              el.innerText = item.documentation || item.deprecationReason || '';
+              el.textContent =
+                item.documentation || item.deprecationReason || '';
               return el;
             }
           },

diff --git a/packages/graphiql-react/src/editor/completion.ts b/packages/graphiql-react/src/editor/completion.ts
@@ -86,7 +86,7 @@ export function onHasCompletion(
           const deprecationLabel = document.createElement('span');
           deprecationLabel.className =
             'CodeMirror-hint-information-deprecation-label';
-          deprecationLabel.innerText = 'Deprecated';
+          deprecationLabel.textContent = 'Deprecated';
           deprecation.append(deprecationLabel);
 
           deprecationReason = document.createElement('div');
@@ -186,7 +186,7 @@ export function onHasCompletion(
         }
 
         if (fieldName) {
-          fieldName.innerText = ctx.text;
+          fieldName.textContent = ctx.text;
         }
 
         if (typeNamePill && typeNamePrefix && typeName && typeNameSuffix) {
@@ -195,24 +195,24 @@ export function onHasCompletion(
 
             const renderType = (type: GraphQLType) => {
               if (isNonNullType(type)) {
-                typeNameSuffix!.innerText = '!' + typeNameSuffix!.innerText;
+                typeNameSuffix!.textContent = '!' + typeNameSuffix!.textContent;
                 renderType(type.ofType);
               } else if (isListType(type)) {
-                typeNamePrefix!.innerText += '[';
-                typeNameSuffix!.innerText = ']' + typeNameSuffix!.innerText;
+                typeNamePrefix!.textContent += '[';
+                typeNameSuffix!.textContent = ']' + typeNameSuffix!.textContent;
                 renderType(type.ofType);
               } else {
-                typeName!.innerText = type.name;
+                typeName!.textContent = type.name;
               }
             };
 
-            typeNamePrefix.innerText = '';
-            typeNameSuffix.innerText = '';
+            typeNamePrefix.textContent = '';
+            typeNameSuffix.textContent = '';
             renderType(ctx.type);
           } else {
-            typeNamePrefix.innerText = '';
-            typeName.innerText = '';
-            typeNameSuffix.innerText = '';
+            typeNamePrefix.textContent = '';
+            typeName.textContent = '';
+            typeNameSuffix.textContent = '';
             typeNamePill.style.display = 'none';
           }
         }
@@ -252,7 +252,7 @@ export function onHasCompletion(
       return;
     }
 
-    const typeName = event.currentTarget.innerText;
+    const typeName = event.currentTarget.textContent || '';
     const type = schema.getType(typeName);
     if (type) {
       plugin.setVisiblePlugin(DOC_EXPLORER_PLUGIN);