DOC-3181: Update React integration doc (#3688)

* DOC-3181: Update React integration

* Update modules/ROOT/partials/integrations/react-quick-start.adoc

* DOC-3181: Replace your-api-key with no-api-key.

---------

Co-authored-by: Karl Kemister-Sheppard <[email protected]>

Author: tiny-ben-tran

modules/ROOT/partials/integrations/react-quick-start.adoc

@@ -18,6 +18,7 @@ This procedure requires https://nodejs.org/[Node.js (and npm)].
 +
 [source,sh]
 ----
+# npm 7+, extra double-dash is needed
 npm create vite@5 tinymce-react-demo -- --template react-swc
 ----
 . Change to the newly created directory.
@@ -28,11 +29,11 @@ cd tinymce-react-demo
 ----
 
 ifeval::["{productSource}" == "cloud"]
-. Install the `+@tinymce/tinymce-react+` package and save it to your `+package.json+` with `+--save+`.
+. Install the `+@tinymce/tinymce-react+` package.
 +
 [source,sh]
 ----
-npm install --save @tinymce/tinymce-react
+npm install @tinymce/tinymce-react
 ----
 
 . Using a text editor, open `+./src/App.jsx+` and replace the contents with:
@@ -50,11 +51,12 @@ export default function App() {
       console.log(editorRef.current.getContent());
     }
   };
+
   return (
     <>
       <Editor
-        apiKey='your-api-key'
-        onInit={(_evt, editor) => editorRef.current = editor}
+        apiKey='no-api-key'
+        onInit={ (_evt, editor) => editorRef.current = editor }
         initialValue="<p>This is the initial content of the editor.</p>"
         init={{
           height: 500,
@@ -83,11 +85,11 @@ This JavaScript file will create a component "`+App+`" containing a {productname
 endif::[]
 ifeval::["{productSource}" == "package-manager"]
 ifeval::["{productUse}" == "host"]
-. Install the `+tinymce+`, `+@tinymce/tinymce-react+` and `+fs-extra+` packages and save them to your `+package.json+` with `+--save+`.
+. Install the `+tinymce+`, `+@tinymce/tinymce-react+` and `+fs-extra+` packages.
 +
 [source,sh]
 ----
-npm install --save tinymce @tinymce/tinymce-react fs-extra
+npm install tinymce @tinymce/tinymce-react fs-extra
 ----
 
 . Setup a `postinstall` script to copy {productname} to the public directory for hosting
@@ -175,11 +177,11 @@ export default function App() {
 
 endif::[]
 ifeval::["{productUse}" == "bundle"]
-. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages and save them to your `+package.json+` with `+--save+`.
+. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages
 +
 [source,sh]
 ----
-npm install --save tinymce @tinymce/tinymce-react
+npm install tinymce @tinymce/tinymce-react
 ----
 
 . Using a text editor, create `+./src/BundledEditor.jsx+` and set the contents to:
@@ -265,6 +267,7 @@ export default function App() {
       console.log(editorRef.current.getContent());
     }
   };
+
   return (
     <>
       <BundledEditor
@@ -293,11 +296,10 @@ endif::[]
 endif::[]
 ifeval::["{productSource}" == "zip"]
 ifeval::["{productUse}" == "host"]
-. Install the `+@tinymce/tinymce-react+` package and save it to your `+package.json+` with `+--save+`.
-+
+. Install the `+@tinymce/tinymce-react+` package.
 [source,sh]
 ----
-npm install --save @tinymce/tinymce-react
+npm install @tinymce/tinymce-react
 ----
 
 . Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+public+` folder. Afterwards the directory listing should be similar to below:
@@ -324,24 +326,17 @@ public
     └── tinymce.min.js
 ----
 
-. Using a text editor, open `+./eslintrc.cjs+` and add `+'src/tinymce'+` to the `+ignorePatterns+` array.
+. Using a text editor, open `+./eslint.config.js` and add `+'src/tinymce'+` to the `+ignores+` array.
 +
-.Diff of `.eslintrc.js`
+.Diff of `.eslint.config.js`
 [source,patch]
 ----
-diff --git a/.eslintrc.cjs b/.eslintrc.cjs
-index 3b3b3b3..4b4b4b4 100644
---- a/.eslintrc.cjs
-+++ b/.eslintrc.cjs
-@@ -7,7 +7,7 @@ modules.exports = {
-   'plugin:react/jsx-runtime',
-     'plugin:react-hooks/recommended',
-   ],
--  ignorePatterns: ['dist', '.eslintrc.cjs'],
-+  ignorePatterns: ['dist', '.eslintrc.cjs', 'src/tinymce'],
-   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-   settings: { react: { version: '18.2' } },
-   plugins: ['react-refresh'],
+export default tseslint.config(
+-  { ignores: ['dist'] },
++  { ignores: ['dist', 'src/tinymce'] },
+   {
+     extends: [js.configs.recommended, ...tseslint.configs.recommended],
+     files: ['**/*.{ts,tsx}'],
 ----
 
 . Using a text editor, open `+./src/App.jsx+` and replace the contents with:
@@ -390,11 +385,11 @@ export default function App() {
 endif::[]
 ifeval::["{productUse}" == "bundle"]
 
-. Install the `+@tinymce/tinymce-react+` and `+script-loader+` packages and save them to your `+package.json+` with `+--save+`.
+. Install the `+@tinymce/tinymce-react+` and `+script-loader+` packages.
 +
 [source,sh]
 ----
-npm install --save @tinymce/tinymce-react script-loader
+npm install @tinymce/tinymce-react script-loader
 ----
 
 . Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder. Afterwards the directory listing should be similar to below:
@@ -423,24 +418,24 @@ src
     └── tinymce.min.js
 ----
 
-. Using a text editor, open `+./eslintrc.cjs+` and add `+'src/tinymce'+` to the `+ignorePatterns+` array.
+. Using a text editor, open `+./eslint.config.js+` and add `+'src/tinymce'+` to the `+ignores+` array.
 +
-.Diff of `.eslintrc.js`
+.Diff of `.eslint.config.js`
 [source,patch]
 ----
-diff --git a/.eslintrc.cjs b/.eslintrc.cjs
-index 3b3b3b3..4b4b4b4 100644
---- a/.eslintrc.cjs
-+++ b/.eslintrc.cjs
-@@ -7,7 +7,7 @@ modules.exports = {
-   'plugin:react/jsx-runtime',
-     'plugin:react-hooks/recommended',
-   ],
--  ignorePatterns: ['dist', '.eslintrc.cjs'],
-+  ignorePatterns: ['dist', '.eslintrc.cjs', 'src/tinymce'],
-   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-   settings: { react: { version: '18.2' } },
-   plugins: ['react-refresh'],
+diff --git a/eslint.config.js b/eslint.config.js
+index 092408a..1ab8db4 100644
+--- a/eslint.config.js
++++ b/eslint.config.js
+@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
+ import tseslint from 'typescript-eslint'
+
+ export default tseslint.config(
+-  { ignores: ['dist'] },
++  { ignores: ['dist', 'src/tinymce'] },
+   {
+     extends: [js.configs.recommended, ...tseslint.configs.recommended],
+     files: ['**/*.{ts,tsx}'],
 ----
 
 . Using a text editor, create `+./src/BundledEditor.jsx+` and set the contents to:
@@ -596,4 +591,4 @@ endif::[]
 * For information on customizing:
 ** {productname} integration, see: xref:react-ref.adoc[].
 ** {productname}, see: xref:basic-setup.adoc[].
-** The React application, see: https://vitejs.dev/guide/#getting-started[Getting Started with Vite] or https://reactjs.org/docs/getting-started.html[the React documentation].
+** The React application, see: https://vitejs.dev/guide/#getting-started[Getting Started with Vite] or https://react.dev/learn[the React documentation].

modules/ROOT/partials/integrations/react-tech-ref.adoc

@@ -34,7 +34,7 @@ To install the `+tinymce-react+` package and save it to your `+package.json+`.
 
 [source,sh]
 ----
-npm install --save @tinymce/tinymce-react
+npm install @tinymce/tinymce-react
 ----
 
 or with Yarn
@@ -104,7 +104,7 @@ The `+tinymce-react+` integration will try to source {productname} in the follow
 
 These props are used to configure how the editor is sourced:
 
-xref:apikey[`+apiKey+`]:: The {cloudname} API key. When loading from {cloudname}, use this prop to remove the "This domain is not registered..." warning message.
+xref:apikey[`+apiKey+`]:: The {cloudname} API key. When loading from {cloudname}, use this prop to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message.
 
 xref:licenseKey[`+licenseKey+`]:: The {cloudname} License key. Use this when self-hosting {productname} instead of loading from {cloudname}.
 
@@ -167,7 +167,7 @@ None of the configuration props are *required* for the {productname} React compo
 
 {cloudname} API key.
 
-Required for deployments using the {cloudname} to provide the {productname} editor without the warning message "This domain is not registered...".
+Required for deployments using the {cloudname} to provide the {productname} editor without the warning message "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more".
 
 include::partial$misc/get-an-api-key.adoc[]
 
@@ -180,7 +180,7 @@ include::partial$misc/get-an-api-key.adoc[]
 [source,jsx]
 ----
 <Editor
-  apiKey='your-api-key'
+  apiKey='no-api-key'
 />
 ----
 
@@ -229,7 +229,7 @@ Such as:
 [source,jsx,subs="attributes+"]
 ----
 <Editor
-  apiKey='your-api-key'
+  apiKey='no-api-key'
   cloudChannel='{productmajorversion}-dev'
   init={{ /* your other settings */ }}
 />
@@ -663,7 +663,7 @@ function MyComponent({initialValue}) {
 
 CAUTION: The controlled component can have performance problems on large documents as it requires converting the entire document to a string on each keystroke or modification.
 
-To use the editor as a https://reactjs.org/docs/forms.html#controlled-components[controlled component], both the `+value+` and `+onEditorChange+` props are required.
+To use the editor as a https://legacy.reactjs.org/docs/forms.html#controlled-components[controlled component], both the `+value+` and `+onEditorChange+` props are required.
 
 The `+value+` prop is used to set and re-set the editor content. If it is not updated to the latest version of the editor content, the editor will rollback any changes.
 
@@ -767,7 +767,7 @@ function MyComponent({initialValue, limit}) {
 };
 ----
 
-For information on controlled components in React, see: https://reactjs.org/docs/forms.html#controlled-components[React Docs - Controlled Components].
+For information on controlled components in React, see: https://legacy.reactjs.org/docs/forms.html#controlled-components[React Docs - Controlled Components].
 
 [[event-binding]]
 == Event binding