diff --git a/.changeset/two-chicken-pretend.md b/.changeset/two-chicken-pretend.md new file mode 100644 index 00000000000..b78ab1c5ad9 --- /dev/null +++ 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 index 97a639e3807..2c980a651c1 100644 --- 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 index 13efd5b1676..fc30e97b8e6 100644 --- 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 index 3b14650531c..32a00c293b0 100644 --- 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 index 9a5f515f0c2..b60e4b6d050 100644 --- 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);