From 1420c58addd8b0de910f52eb923ebfa74af35c87 Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Wed, 16 Apr 2025 15:20:10 +0930
Subject: [PATCH 1/3] DOC-3181: Update React integration

---
 .../integrations/react-quick-start.adoc       | 81 +++++++++----------
 .../partials/integrations/react-tech-ref.adoc |  6 +-
 2 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc
index 20e60ed330..2e098474f0 100644
--- a/modules/ROOT/partials/integrations/react-quick-start.adoc
+++ b/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}
+        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].
diff --git a/modules/ROOT/partials/integrations/react-tech-ref.adoc b/modules/ROOT/partials/integrations/react-tech-ref.adoc
index a83c3a3546..6a5901da2d 100644
--- a/modules/ROOT/partials/integrations/react-tech-ref.adoc
+++ b/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
@@ -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

From c816aa314807e7fca41cc454b680d9c3f722716a Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 09:09:32 +1000
Subject: [PATCH 2/3] Update
 modules/ROOT/partials/integrations/react-quick-start.adoc

---
 modules/ROOT/partials/integrations/react-quick-start.adoc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc
index 2e098474f0..6339586930 100644
--- a/modules/ROOT/partials/integrations/react-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/react-quick-start.adoc
@@ -55,7 +55,7 @@ export default function App() {
   return (
     <>
       <Editor
-        apiKey='your-api-key'
+        apiKey='no-api-key'
         onInit={ (_evt, editor) => editorRef.current = editor }
         initialValue="<p>This is the initial content of the editor.</p>"
         init={{

From 2bd4ef923aeb92e22b7d9e432b799af6c9b34aa0 Mon Sep 17 00:00:00 2001
From: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>
Date: Wed, 14 May 2025 09:56:24 +1000
Subject: [PATCH 3/3] DOC-3181: Replace your-api-key with no-api-key.

---
 modules/ROOT/partials/integrations/react-tech-ref.adoc | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/ROOT/partials/integrations/react-tech-ref.adoc b/modules/ROOT/partials/integrations/react-tech-ref.adoc
index 6a5901da2d..aa27ae9b40 100644
--- a/modules/ROOT/partials/integrations/react-tech-ref.adoc
+++ b/modules/ROOT/partials/integrations/react-tech-ref.adoc
@@ -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 */ }}
 />