From 9498f66e1e98669e31457f07b774bab9a2a183c7 Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Tue, 9 Dec 2025 16:55:16 +1030
Subject: [PATCH 01/10] Various changes and remove instructions related to
 premium plugins from the bundling with webpack guide

---
 .../ROOT/pages/introduction-to-bundling-tinymce.adoc |  2 +-
 modules/ROOT/pages/webpack-cjs-download.adoc         |  2 +-
 modules/ROOT/pages/webpack-cjs-npm.adoc              |  8 ++++----
 modules/ROOT/pages/webpack-es6-download.adoc         |  2 +-
 modules/ROOT/pages/webpack-es6-npm.adoc              | 12 ++++++------
 .../module-loading/bundling-procedure-intro.adoc     |  4 +---
 .../bundling-webpack-cjs-npm_editor.adoc             |  8 +-------
 .../bundling-webpack-cjs-zip_editor.adoc             |  4 ----
 .../bundling-webpack-es6-npm_editor.adoc             |  5 +----
 .../bundling-webpack-es6-zip_editor.adoc             |  7 +------
 .../module-loading/webpack-dev-dependencies.adoc     |  2 +-
 11 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc b/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc
index 99150a66d9..ebb0bb2c6d 100644
--- a/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc
+++ b/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc
@@ -4,7 +4,7 @@
 :description: Introduction to bundling TinyMCE with Webpack, Rollup.js, or Browserify.
 :keywords: webpack, browserify, es6, rollup, commonjs, modules, tinymce, es2015
 
-The following guides and reference pages assist with bundling {productname} using a module loader, such as Webpack, Rollup.js, and Browserify. {productname} is a modular platform that is designed to lazy-load libraries when they are required. This allows developers to only bundle the components of {productname} that are required and keep the resulting bundle as small as possible.
+The following guides and reference pages assists you bundle {productname} into your project using a module bundler, such as Webpack, Rollup.js, and Browserify.
 
 == Webpack
 
diff --git a/modules/ROOT/pages/webpack-cjs-download.adoc b/modules/ROOT/pages/webpack-cjs-download.adoc
index ad2788b537..9c3c25f5e0 100644
--- a/modules/ROOT/pages/webpack-cjs-download.adoc
+++ b/modules/ROOT/pages/webpack-cjs-download.adoc
@@ -13,7 +13,7 @@ include::partial$module-loading/bundling-procedure-intro.adoc[]
 
 This guide requires the following:
 
-* Node.js and npm
+* Node.js and NPM
 * Basic knowledge of how to use https://webpack.js.org/[Webpack]
 
 == Procedure
diff --git a/modules/ROOT/pages/webpack-cjs-npm.adoc b/modules/ROOT/pages/webpack-cjs-npm.adoc
index c440ca86b9..e0203a18fe 100644
--- a/modules/ROOT/pages/webpack-cjs-npm.adoc
+++ b/modules/ROOT/pages/webpack-cjs-npm.adoc
@@ -1,9 +1,9 @@
-= Bundling an NPM version of TinyMCE with CommonJS and Webpack
-:navtitle: CommonJS and npm
+= Bundling TinyMCE from NPM using Webpack and CommonJS
+:navtitle: CommonJS and NPM
 :description_short: Bundling an NPM version of TinyMCE in a project using CommonJS and Webpack
 :description: Bundling an NPM version of TinyMCE in a project using CommonJS and Webpack
 :keywords: webpack, commonjs, cjs, npm, modules, tinymce
-:installtype: an npm
+:installtype: an NPM
 :bundler: https://webpack.js.org/[Webpack]
 :syntax: http://www.commonjs.org/specs/modules/1.0/[CommonJS syntax]
 
@@ -13,7 +13,7 @@ include::partial$module-loading/bundling-procedure-intro.adoc[]
 
 This guide requires the following:
 
-* Node.js and npm
+* Node.js and NPM
 * Basic knowledge of how to use https://webpack.js.org/[Webpack]
 * (Optional: For premium features) The latest premium `+.zip+` bundle of TinyMCE for including premium plugins
 
diff --git a/modules/ROOT/pages/webpack-es6-download.adoc b/modules/ROOT/pages/webpack-es6-download.adoc
index 253c49a6b1..3b208e80dc 100644
--- a/modules/ROOT/pages/webpack-es6-download.adoc
+++ b/modules/ROOT/pages/webpack-es6-download.adoc
@@ -13,7 +13,7 @@ include::partial$module-loading/bundling-procedure-intro.adoc[]
 
 This guide requires the following:
 
-* Node.js and npm
+* Node.js and NPM
 * Basic knowledge of how to use https://webpack.js.org/[Webpack]
 
 == Procedure
diff --git a/modules/ROOT/pages/webpack-es6-npm.adoc b/modules/ROOT/pages/webpack-es6-npm.adoc
index 7656eadbbc..abf5082971 100644
--- a/modules/ROOT/pages/webpack-es6-npm.adoc
+++ b/modules/ROOT/pages/webpack-es6-npm.adoc
@@ -1,9 +1,9 @@
-= Bundling an NPM version of TinyMCE with ES6 and Webpack
-:navtitle: ES6 and npm
-:description_short: Bundling an NPM version of TinyMCE in a project using ES6 and Webpack
-:description: Bundling an NPM version of TinyMCE in a project using ES6 and Webpack
+= Bundling TinyMCE from NPM with Webpack using ES6 modules
+:navtitle: ES6
+:description_short: Bundling TinyMCE in a project using Webpack with ES6
+:description: Bundling TinyMCE in a project using Webpack with ES6
 :keywords: webpack, es6, es2015, npm, modules, tinymce
-:installtype: an npm
+:installtype: an NPM
 :bundler: https://webpack.js.org/[Webpack]
 :syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules[ES6+ syntax]
 
@@ -13,7 +13,7 @@ include::partial$module-loading/bundling-procedure-intro.adoc[]
 
 This guide requires the following:
 
-* Node.js and npm
+* Node.js and NPM
 * Basic knowledge of how to use https://webpack.js.org/[Webpack]
 * (Optional: For premium features) The latest premium `+.zip+` bundle of TinyMCE for including premium plugins
 
diff --git a/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc b/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc
index 8e5283e0b2..334bcb4412 100644
--- a/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc
+++ b/modules/ROOT/partials/module-loading/bundling-procedure-intro.adoc
@@ -1,3 +1 @@
-The following procedure will assist with bundling {installtype} version of {productname} with {bundler} using {syntax}. The procedure assumes the user has experience with {bundler} and {syntax}. The following steps provide a working example for bundling a basic {productname} configuration with {bundler}, and provides links to reference pages at the end of the procedure for bundling additional customizations with the editor.
-
-If {productname} will be used with a JavaScript framework (such as React.js, Angular, or Vue.js) the bundle will also require the relevant framework integration package (where available). For a list of supported framework integrations, see: xref:installation.adoc[Installing {productname}].
+The following procedure will assist with bundling {installtype} version of {productname} with {bundler} using {syntax}. The procedure assumes the user has experience with {bundler} and {syntax}. The following steps provide a working example for bundling a basic {productname} configuration with {bundler}.
\ No newline at end of file
diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc
index 88d08b96ac..ac6fe25d17 100644
--- a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc
+++ b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc
@@ -30,11 +30,6 @@ require('tinymce/plugins/table');
 require('tinymce/plugins/help');
 require('tinymce/plugins/help/js/i18n/keynav/en');
 
-/* Import premium plugins from NPM */
-require('tinymce-premium/plugins/advcode');
-require('tinymce-premium/plugins/licensekeymanager');
-require('tinymce-premium/plugins/tinycomments');
-
 /* content UI CSS is required (using the default oxide skin) */
 const contentUiSkinCss = require('tinymce/skins/ui/oxide/content.css');
 
@@ -50,8 +45,7 @@ exports.render = () => {
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,
-    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
-include::partial$module-loading/bundling-external-plugins-npm.adoc[]
+    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString()
   });
 };
 ----
diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc
index d5ac5af017..711eea8259 100644
--- a/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc
+++ b/modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc
@@ -30,10 +30,6 @@ require('../tinymce/js/tinymce/plugins/table');
 require('../tinymce/js/tinymce/plugins/help');
 require('../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en');
 
-include::partial$integrations/premium-plugins-bundling.adoc[]
-/* From ZIP download - download separately and add to /src/plugins */
-/* import './plugins/<plugincode>'; */
-
 /* content UI CSS is required (using the default oxide skin) */
 const contentUiSkinCss = require('../tinymce/js/tinymce/skins/ui/oxide/content.css');
 
diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc
index 16bf328815..9ec20931bd 100644
--- a/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc
+++ b/modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc
@@ -30,8 +30,6 @@ import 'tinymce/plugins/table';
 import 'tinymce/plugins/help';
 import 'tinymce/plugins/help/js/i18n/keynav/en';
 
-include::partial$integrations/premium-plugins-bundling.adoc[]
-
 /* content UI CSS is required (using the default oxide skin) */
 import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.css';
 
@@ -46,8 +44,7 @@ export function render () {
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,
-    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
-include::partial$module-loading/bundling-external-plugins-npm.adoc[]
+    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString()
   });
 };
 ----
diff --git a/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc b/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc
index 2bd49c829b..f3e043feda 100644
--- a/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc
+++ b/modules/ROOT/partials/module-loading/bundling-webpack-es6-zip_editor.adoc
@@ -30,10 +30,6 @@ import '../tinymce/js/tinymce/plugins/table';
 import '../tinymce/js/tinymce/plugins/help';
 import '../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en';
 
-include::partial$integrations/premium-plugins-bundling.adoc[]
-/* From ZIP download - download separately and add to /src/plugins */
-/* import './plugins/<plugincode>'; */
-
 /* content UI CSS is required (using the default oxide skin) */
 import contentUiSkinCss from '../tinymce/js/tinymce/skins/ui/oxide/content.css';
 
@@ -48,8 +44,7 @@ export function render () {
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,
-    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
-include::partial$module-loading/bundling-external-plugins-zip.adoc[]
+    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString()
   });
 };
 ----
\ No newline at end of file
diff --git a/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc b/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc
index 920eb5bebf..989510cf4f 100644
--- a/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc
+++ b/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc
@@ -1,5 +1,5 @@
 ifeval::[{is_zip_install} == true]
-. Add the following development dependencies to the project.
+. Add the following dependencies to your project.
 * https://www.npmjs.com/package/webpack[`+webpack+`]
 * https://www.npmjs.com/package/webpack-cli[`+webpack-cli+`]
 * https://www.npmjs.com/package/mini-css-extract-plugin[`+mini-css-extract-plugin+`]

From 47921c1b9a0c4f84b5d97c5dcc3a13be4f4608ef Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Thu, 11 Dec 2025 08:45:28 +1030
Subject: [PATCH 02/10] more changes

---
 modules/ROOT/pages/vite-es6-npm.adoc | 24 ++++++++++++------------
 package.json                         |  3 +++
 yarn.lock                            |  5 +++++
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/modules/ROOT/pages/vite-es6-npm.adoc b/modules/ROOT/pages/vite-es6-npm.adoc
index b4676b2032..f851655ff2 100644
--- a/modules/ROOT/pages/vite-es6-npm.adoc
+++ b/modules/ROOT/pages/vite-es6-npm.adoc
@@ -1,9 +1,9 @@
-= Bundling an NPM version of TinyMCE with ES6 and Vite
-:navtitle: ES6 and npm
+= Bundling TinyMCE from NPM with ES6 and Vite
+:navtitle: ES6 and NPM
 :description_short: Bundling an NPM version of TinyMCE in a project using ES6 and Vite
 :description: Bundling an NPM version of TinyMCE in a project using ES6 and Vite
 :keywords: vite, es6, es2015, npm, modules, tinymce
-:installtype: a npm
+:installtype: a NPM
 :bundler: https://vitejs.dev[Vite]
 :syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules[ES6+ syntax]
 
@@ -13,19 +13,19 @@ include::partial$module-loading/bundling-procedure-intro.adoc[]
 
 This guide requires the following:
 
-* Node.js and npm.
+* Node.js and NPM.
 * Basic knowledge of how to use https://vitejs.dev[Vite].
-* For self-hosted deployments: A valid license key starting with `T8LK:` from your link:{accountpageurl}/[{accountpage}]
+// * For self-hosted deployments: A valid license key starting with `T8LK:` from your link:{accountpageurl}/[{accountpage}]
 * (Optional: For premium features) The latest premium .zip bundle of TinyMCE that includes premium plugins.
 
-[IMPORTANT]
-====
-When self-hosting TinyMCE 8:
+// [IMPORTANT]
+// ====
+// When self-hosting TinyMCE 8:
 
-* A license key is required for commercial deployments
-* Keys must start with the `T8LK:` prefix
-* For hybrid deployments that need both cloud features and local fallback, you can use both `license_key` and `api_key`
-====
+// * A license key is required for commercial deployments
+// * Keys must start with the `T8LK:` prefix
+// * For hybrid deployments that need both cloud features and local fallback, you can use both `license_key` and `api_key`
+// ====
 
 == Procedures
 
diff --git a/package.json b/package.json
index cfa39cc679..4b1ed52da5 100644
--- a/package.json
+++ b/package.json
@@ -42,5 +42,8 @@
     "http-server": "^0.12.3",
     "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5"
+  },
+  "dependencies": {
+    "tinymce-premium": "^8.3.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index df30cc65f6..c18f4eba1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1874,6 +1874,11 @@ timers-ext@^0.1.7:
     es5-ext "~0.10.46"
     next-tick "1"
 
+tinymce-premium@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/tinymce-premium/-/tinymce-premium-8.3.0.tgz#d837062bfba4fd6ca79fdad4310be6f9bcc78a3c"
+  integrity sha512-h76r8ynq2Y3pSqxJosp5qeDqFgz07jk6/GG1jCKUKg0Dc+HG0kfNpRuhl9au0v/QEcuDLp3495f512B/YfchYQ==
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"

From 414b426f54b039cd870a3651961d163c57324c84 Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Thu, 11 Dec 2025 10:01:41 +1030
Subject: [PATCH 03/10] Update quick start cloud

---
 modules/ROOT/pages/cloud-quick-start.adoc       | 17 ++++++++---------
 .../install/initialize-editor-cloud.adoc        | 16 +++++++---------
 package.json                                    |  4 +---
 yarn.lock                                       |  5 -----
 4 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/modules/ROOT/pages/cloud-quick-start.adoc b/modules/ROOT/pages/cloud-quick-start.adoc
index 38d0fcbb70..1458a66601 100644
--- a/modules/ROOT/pages/cloud-quick-start.adoc
+++ b/modules/ROOT/pages/cloud-quick-start.adoc
@@ -1,11 +1,10 @@
-= Quick start: {productname} with {cloudname}
+= Quick start: {productname} from {cloudname}
 :navtitle: Quick start: Cloud
 :description_short: Setup a basic {productname} {productmajorversion} editor using the {cloudname}.
 :description: Get an instance of {productname} {productmajorversion} up and running using the {cloudname}.
 :keywords: tinymce, script, textarea
 :productSource: cloud
 
-== Install {productname} using the {cloudname}
 
 {productname} {productmajorversion} is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a {productname} editor to a web page using the {cloudname}.
 
@@ -13,32 +12,32 @@ include::partial$misc/admon-account-creation-and-social-option.adoc[]
 
 == Include the {productname} script
 
-Include the following line of code in the `+<head>+` of a HTML page:
+Include the following script tag in the `+<head>+` of a HTML file:
 
 [source,html,subs="attributes+"]
 ----
 <script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
 ----
 
-== Initialize {productname} as part of a web form
+== Initialize {productname}
 
 include::partial$install/initialize-editor-cloud.adoc[]
 
-Adding this content to an HTML file and opening it in a web browser will load a {productname} editor, such as:
+Adding this content to the HTML file and opening it in a web browser will load a {productname} editor, such as:
 
 liveDemo::default[]
 
-== Update the "no-api-key" placeholder with your API key
+== Update the "no-api-key" placeholder
 
-To remove the notice:
+Update the `+no-api-key+` placeholder in the source script URL (`+<script src=https://.../no-api-key/tinymce/{productmajorversion}/tinymce.min.js+/>`) with your {cloudname} API key, which is created when signing up to the link:{accountsignup}/[{cloudname}].
+
+Providing a valid API key also removes the notice:
 
 [WARNING]
 ====
 **This domain is not registered with {cloudname}. Please see the quick start guide or create an account.**
 ====
 
-Update the `+no-api-key+` placeholder in the source script (`+<script src=...+`) with your {cloudname} API key, which is created when signing up to the link:{accountsignup}/[{cloudname}].
-
 Signing up for a {cloudname} API key will also provide a trial of the xref:plugins.adoc#premium-plugins[Premium Plugins].
 
 include::partial$install/save-content.adoc[]
diff --git a/modules/ROOT/partials/install/initialize-editor-cloud.adoc b/modules/ROOT/partials/install/initialize-editor-cloud.adoc
index c120a68ee3..616cd972b7 100644
--- a/modules/ROOT/partials/install/initialize-editor-cloud.adoc
+++ b/modules/ROOT/partials/install/initialize-editor-cloud.adoc
@@ -1,6 +1,6 @@
-Initialize {productname} {productmajorversion} on any element (or elements) on the web page by passing an object containing a `+selector+` value to `+tinymce.init()+`. The `+selector+` value can be any valid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors[CSS selector].
+Initialize {productname} {productmajorversion} on any element (or elements) on the web page by passing a `+selector+` to `+tinymce.init()+`. The `+selector+` value can be any valid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors[CSS selector].
 
-For example, to replace `+<textarea id="mytextarea">+` with a {productname} {productmajorversion} editor instance, pass the selector `+'#mytextarea'+` to `+tinymce.init()+`:
+For example, to initialize a {productname} {productmajorversion} instance at the textarea element, pass the selector `+#mytextarea+` to `+tinymce.init()+`.
 
 [source,html,subs="attributes+"]
 ----
@@ -11,18 +11,16 @@ For example, to replace `+<textarea id="mytextarea">+` with a {productname} {pro
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
+  </head>
+
+  <body>
+    <h1>{productname} Quick Start Guide</h1>
+    <textarea id="mytextarea">Hello, World!</textarea>
     <script>
       tinymce.init({
         selector: '#mytextarea'
       });
     </script>
-  </head>
-
-  <body>
-    <h1>{productname} Quick Start Guide</h1>
-    <form method="post">
-      <textarea id="mytextarea">Hello, World!</textarea>
-    </form>
   </body>
 </html>
 ----
diff --git a/package.json b/package.json
index 4b1ed52da5..b038529b0b 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,5 @@
     "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5"
   },
-  "dependencies": {
-    "tinymce-premium": "^8.3.0"
-  }
+  "dependencies": {}
 }
diff --git a/yarn.lock b/yarn.lock
index c18f4eba1c..df30cc65f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1874,11 +1874,6 @@ timers-ext@^0.1.7:
     es5-ext "~0.10.46"
     next-tick "1"
 
-tinymce-premium@^8.3.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/tinymce-premium/-/tinymce-premium-8.3.0.tgz#d837062bfba4fd6ca79fdad4310be6f9bcc78a3c"
-  integrity sha512-h76r8ynq2Y3pSqxJosp5qeDqFgz07jk6/GG1jCKUKg0Dc+HG0kfNpRuhl9au0v/QEcuDLp3495f512B/YfchYQ==
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"

From 1c50bb735f0cb90e9d942763544d4246cc3c1782 Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Thu, 11 Dec 2025 15:41:48 +1030
Subject: [PATCH 04/10] Update cloud and bundle docs of react

---
 modules/ROOT/pages/react-cloud.adoc           |   9 +-
 modules/ROOT/pages/react-pm-bundle.adoc       |   8 +-
 modules/ROOT/pages/react-pm-host.adoc         |   8 +-
 .../import-tinymce-statements.adoc            |  36 +++
 .../integrations/react-quick-start.adoc       | 212 ++++++------------
 5 files changed, 115 insertions(+), 158 deletions(-)
 create mode 100644 modules/ROOT/partials/integrations/import-tinymce-statements.adoc

diff --git a/modules/ROOT/pages/react-cloud.adoc b/modules/ROOT/pages/react-cloud.adoc
index 90667b351d..f24e33eac0 100644
--- a/modules/ROOT/pages/react-cloud.adoc
+++ b/modules/ROOT/pages/react-cloud.adoc
@@ -1,7 +1,10 @@
-= Using TinyMCE from the Tiny Cloud CDN with the React framework
+= Using TinyMCE from Tiny Cloud in React
 :navtitle: React
-:description: A guide on integrating TinyMCE from the Tiny Cloud into the React framework.
-:keywords: integration, integrate, react, reactjs, vite, tinymce-react
+:description: A guide on integrating TinyMCE from the Tiny Cloud into React.
+:keywords: integration, integrate, react, reactjs, vite, tinymce-react, tinymce
 :productSource: cloud
 
+
+This guide shows how to integrate TinyMCE from Tiny Cloud into a React project using link:https://github.com/tinymce/tinymce-react[{productname} React component] 
+
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/react-pm-bundle.adoc b/modules/ROOT/pages/react-pm-bundle.adoc
index d8440d9463..18295fd585 100644
--- a/modules/ROOT/pages/react-pm-bundle.adoc
+++ b/modules/ROOT/pages/react-pm-bundle.adoc
@@ -1,8 +1,10 @@
-= Bundle with TinyMCE and the React framework
-:navtitle: Using a package manager with bundling
-:description: A guide on integrating the TinyMCE package into the React framework by bundling it.
+= Bundle TinyMCE in React
+:navtitle: Bundle TinyMCE in a React project using a module bundler
+:description: A guide on integrating the TinyMCE package into React by bundling it.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, bundle
 :productSource: package-manager
 :productUse: bundle
 
+This guide shows how to bundle TinyMCE in a React project with link:https://github.com/tinymce/tinymce-react[{productname} React component]
+
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/react-pm-host.adoc b/modules/ROOT/pages/react-pm-host.adoc
index 0ab1adb51a..299007412f 100644
--- a/modules/ROOT/pages/react-pm-host.adoc
+++ b/modules/ROOT/pages/react-pm-host.adoc
@@ -1,9 +1,11 @@
-= Lazy load TinyMCE with the React framework
+= Self-host TinyMCE in React
 :page-aliases: react-pm.adoc
-:navtitle: Using a package manager with hosting
-:description: A guide on integrating the TinyMCE package into the React framework by self-hosting it.
+:navtitle: Self-host TinyMCE in React
+:description: A guide on integrating TinyMCE into React by self-hosting it.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, host
 :productSource: package-manager
 :productUse: host
 
+This guide shows how to self-host TinyMCE in a React project using link:https://github.com/tinymce/tinymce-react[{productname} React component] 
+
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/partials/integrations/import-tinymce-statements.adoc b/modules/ROOT/partials/integrations/import-tinymce-statements.adoc
new file mode 100644
index 0000000000..d56ba7eebb
--- /dev/null
+++ b/modules/ROOT/partials/integrations/import-tinymce-statements.adoc
@@ -0,0 +1,36 @@
+// Ensure to import tinymce first as other components expect
+// a global variable `tinymce` to exist
+import 'tinymce/tinymce';
+// DOM model
+import 'tinymce/models/dom/model'
+// Theme
+import 'tinymce/themes/silver';
+// Toolbar icons
+import 'tinymce/icons/default';
+// Editor styles
+import 'tinymce/skins/ui/oxide/skin';
+
+// if you use a plugin that is not listed here the editor will fail to load
+import 'tinymce/plugins/anchor';
+import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/autolink';
+import 'tinymce/plugins/charmap';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/media';
+import 'tinymce/plugins/visualblocks';
+import 'tinymce/plugins/fullscreen';
+import 'tinymce/plugins/insertdatetime';
+import 'tinymce/plugins/preview';
+import 'tinymce/plugins/help';
+// Include resources that a plugin lazy-loads at the run-time
+import 'tinymce/plugins/help/js/i18n/keynav/en';
+import 'tinymce/plugins/image';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/searchreplace';
+import 'tinymce/plugins/table';
+import 'tinymce/plugins/wordcount';
+
+// Content styles, including inline UI like fake cursors
+import 'tinymce/skins/content/default/content';
+import 'tinymce/skins/ui/oxide/content';
\ No newline at end of file
diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc
index 384eddf4ed..17579ea418 100644
--- a/modules/ROOT/partials/integrations/react-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/react-quick-start.adoc
@@ -1,38 +1,29 @@
 :packageName: tinymce-react
 
-The link:https://github.com/tinymce/tinymce-react[Official {productname} React component] integrates {productname} into React projects. This procedure creates a link:https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc[React SWC plugin] containing a {productname} editor.
-
-For examples of the {productname} integration, visit https://tinymce.github.io/tinymce-react/[the tinymce-react storybook].
+For more live examples of {productname} React component, visit https://tinymce.github.io/tinymce-react/[the tinymce-react storybook].
 
 == Prerequisites
 
-This procedure requires https://nodejs.org/[Node.js (and npm)].
+This procedure requires https://nodejs.org/[Node.js (and NPM)].
 
 == Procedure
 
-. Use the https://github.com/vitejs/vite[Vite] package and the link:https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc[React SWC plugin] to create a new React project named `+tinymce-react-demo+`.
+. Use https://github.com/vitejs/vite[Vite] and link:https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc[React SWC] to create a new React project named `+tinymce-react-demo+`.
 +
 [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.
+. Go to the project directory and install `+@tinymce/tinymce-react+`
 +
 [source,sh]
 ----
-cd tinymce-react-demo
+cd tinymce-react-demo && npm install @tinymce/tinymce-react
 ----
 
 ifeval::["{productSource}" == "cloud"]
-. Install the `+@tinymce/tinymce-react+` package.
-+
-[source,sh]
-----
-npm install @tinymce/tinymce-react
-----
-
-. Using a text editor, open `+./src/App.jsx+` and replace the contents with:
+. Add `Editor` component to `+./src/App.jsx+`. By default, it will fetch {productname} from Tiny Cloud:
 +
 [source,jsx]
 ----
@@ -58,9 +49,9 @@ export default function App() {
           height: 500,
           menubar: false,
           plugins: [
-            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
             'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
+            'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount',
           ],
           toolbar: 'undo redo | blocks | ' +
             'bold italic forecolor | alignleft aligncenter ' +
@@ -75,25 +66,17 @@ export default function App() {
 }
 ----
 +
-This JavaScript file will create a component "`+App+`" containing a {productname} editor configured with basic features.
-
-. Update the `+apiKey+` option in the editor element and include your link:{accountsignup}/[{cloudname} API key].
+. Update the `+apiKey+` prop with your link:{accountsignup}/[{cloudname} API key].
 endif::[]
 ifeval::["{productSource}" == "package-manager"]
 ifeval::["{productUse}" == "host"]
-. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages.
+. Install the `+tinymce+` package.
 +
 [source,sh]
 ----
-npm install tinymce @tinymce/tinymce-react
+npm install tinymce
 ----
 +
-include::partial$integrations/premium-plugins-install-step-link.adoc[]
-[NOTE]
-====
-For information on configuring premium plugins when hosting (using `+external_plugins+`), see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
-====
-+
 . Install `+fs-extra+` as a development dependency:
 +
 [source,sh]
@@ -101,9 +84,10 @@ For information on configuring premium plugins when hosting (using `+external_pl
 npm install -D fs-extra
 ----
 +
-. Setup a `postinstall` script to copy {productname} to the public directory for hosting
+
+. Setup a `postinstall` script to copy {productname} to `public` directory which makes {productname} available as static assets
 +
-.postinstall.js
+.Add `postinstall.js` script with the following:
 [source,js]
 ----
 import fse from 'fs-extra';
@@ -111,12 +95,11 @@ import path from 'path';
 const topDir = import.meta.dirname;
 fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
 fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });
-// Only when using tinymce-premium plugins
-// fse.emptyDirSync(path.join(topDir, 'public', 'tinymce-premium'));
-// fse.copySync(path.join(topDir, 'node_modules', 'tinymce-premium'), path.join(topDir, 'public', 'tinymce-premium'), { overwrite: true });
 ----
 +
-.package.json
+
++
+.Update `postinstall` target in `package.json` to run the `postinstall.js` script
 [source,json]
 ----
 {
@@ -128,21 +111,25 @@ fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'pu
 }
 ----
 +
-..gitignore
+
+. Exclude `public/tinymce` from Git tracking
++
 [source,.gitignore]
 ----
 # ... other rules omitted for brevity ...
 /public/tinymce/
 ----
++
 
-. Run the `postinstall` to copy {productname} to the `public` directory
+. In this instance, run the `postinstall` to copy {productname} to the `public` directory. Note: This script will run automatically after every package installation.
 +
 [source,sh]
 ----
 npm run postinstall
 ----
++
 
-. Using a text editor, open `+./src/App.jsx+` and replace the contents with:
+. Add `Editor` component to `+./src/App.jsx+` and update `tinymceScriptSrc` as below:
 +
 [source,jsx]
 ----
@@ -165,18 +152,18 @@ export default function App() {
         onInit={(_evt, editor) => editorRef.current = editor}
         initialValue='<p>This is the initial content of the editor.</p>'
         init={{
-          height: 500,
-          menubar: false,
-          plugins: [
-            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
-            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-            'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
-          ],
-          toolbar: 'undo redo | blocks | ' +
-            'bold italic forecolor | alignleft aligncenter ' +
-            'alignright alignjustify | bullist numlist outdent indent | ' +
-            'removeformat | help',
-          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+            height: 500,
+            menubar: false,
+            plugins: [
+              'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
+              'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+              'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
+            ],
+            toolbar: 'undo redo | blocks | ' +
+              'bold italic forecolor | alignleft aligncenter ' +
+              'alignright alignjustify | bullist numlist outdent indent | ' +
+              'removeformat | help',
+            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
         }}
       />
       <button onClick={log}>Log editor content</button>
@@ -184,7 +171,7 @@ export default function App() {
   );
 }
 ----
-
++
 
 endif::[]
 ifeval::["{productUse}" == "bundle"]
@@ -195,70 +182,13 @@ ifeval::["{productUse}" == "bundle"]
 npm install tinymce @tinymce/tinymce-react
 ----
 +
-include::partial$integrations/premium-plugins-install-step-link.adoc[]
-+
-[NOTE]
-====
-For information on configuring premium plugins when bundling, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
-====
-+
-. Using a text editor, create `+./src/BundledEditor.jsx+` and set the contents to:
+
+. Add `+./src/BundledEditor.jsx+` and add `Editor` component as below:
 +
 [source,jsx]
 ----
 import { Editor } from '@tinymce/tinymce-react';
-
-// TinyMCE so the global var exists
-import 'tinymce/tinymce';
-// DOM model
-import 'tinymce/models/dom/model'
-// Theme
-import 'tinymce/themes/silver';
-// Toolbar icons
-import 'tinymce/icons/default';
-// Editor styles
-import 'tinymce/skins/ui/oxide/skin';
-
-// importing the plugin js.
-// if you use a plugin that is not listed here the editor will fail to load
-import 'tinymce/plugins/advlist';
-import 'tinymce/plugins/anchor';
-import 'tinymce/plugins/autolink';
-import 'tinymce/plugins/autoresize';
-import 'tinymce/plugins/autosave';
-import 'tinymce/plugins/charmap';
-import 'tinymce/plugins/code';
-import 'tinymce/plugins/codesample';
-import 'tinymce/plugins/directionality';
-import 'tinymce/plugins/emoticons';
-import 'tinymce/plugins/fullscreen';
-import 'tinymce/plugins/help';
-import 'tinymce/plugins/help/js/i18n/keynav/en';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/importcss';
-import 'tinymce/plugins/insertdatetime';
-import 'tinymce/plugins/link';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/media';
-import 'tinymce/plugins/nonbreaking';
-import 'tinymce/plugins/pagebreak';
-import 'tinymce/plugins/preview';
-import 'tinymce/plugins/quickbars';
-import 'tinymce/plugins/save';
-import 'tinymce/plugins/searchreplace';
-import 'tinymce/plugins/table';
-import 'tinymce/plugins/visualblocks';
-import 'tinymce/plugins/visualchars';
-import 'tinymce/plugins/wordcount';
-
-// importing plugin resources
-import 'tinymce/plugins/emoticons/js/emojis';
-
-include::partial$integrations/premium-plugins-bundling.adoc[]
-
-// Content styles, including inline UI like fake cursors
-import 'tinymce/skins/content/default/content';
-import 'tinymce/skins/ui/oxide/content';
+include::partial$integrations/import-tinymce-statements.adoc[]
 
 export default function BundledEditor(props) {
   return (
@@ -269,8 +199,9 @@ export default function BundledEditor(props) {
   );
 }
 ----
++
 
-. Using a text editor, open `+./src/App.jsx+` and replace the contents with:
+. Use `BundleEditor` component in `+./src/App.jsx+` as the following:
 +
 [source,jsx]
 ----
@@ -295,8 +226,9 @@ export default function App() {
           height: 500,
           menubar: false,
           plugins: [
-            'advlist', 'anchor', 'autolink', 'help', 'image', 'link', 'lists',
-            'searchreplace', 'table', 'wordcount'
+            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
+            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+            'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
           ],
           toolbar: 'undo redo | blocks | ' +
             'bold italic forecolor | alignleft aligncenter ' +
@@ -310,6 +242,7 @@ export default function App() {
   );
 }
 ----
++
 endif::[]
 endif::[]
 ifeval::["{productSource}" == "zip"]
@@ -381,19 +314,19 @@ export default function App() {
         onInit={(_evt, editor) => editorRef.current = editor}
         initialValue='<p>This is the initial content of the editor.</p>'
         init={{
-          height: 500,
-          menubar: false,
-          plugins: [
-            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
-            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-            'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
-          ],
-          toolbar: 'undo redo | blocks | ' +
-            'bold italic forecolor | alignleft aligncenter ' +
-            'alignright alignjustify | bullist numlist outdent indent | ' +
-            'removeformat | help',
-          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
-        }}
+            height: 500,
+            menubar: false,
+            plugins: [
+              'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
+              'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+              'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
+            ],
+            toolbar: 'undo redo | blocks | ' +
+              'bold italic forecolor | alignleft aligncenter ' +
+              'alignright alignjustify | bullist numlist outdent indent | ' +
+              'removeformat | help',
+            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+          }}
       />
       <button onClick={log}>Log editor content</button>
     </>
@@ -566,9 +499,9 @@ export default function App() {
 endif::[]
 endif::[]
 
-. Test the application using the Node.js development server.
+. Test the application.
 +
-* To start the development server, navigate to the `+tinymce-react-demo+` directory and run:
+* To start the development server run:
 +
 [source,sh]
 ----
@@ -577,29 +510,10 @@ npm run dev
 
 * To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
 
-== Deploying the application to a HTTP server
 
-The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: https://vitejs.dev/guide/build[Building for Production] or https://vitejs.dev/guide/static-deploy.html[Deploying a Static Site].
+== Deploying the application
 
-To deploy the application to a local HTTP Server:
-
-. Navigate to the `+tinymce-react-demo+` directory and run:
-+
-[source,sh]
-----
-npm run build
-----
-. You can optionally preview the production build by running:
-+
-[source,sh]
-----
-npm run preview
-----
-. Copy the contents of the `+tinymce-react-demo/dist+` directory to the root directory of the web server.
-
-The application has now been deployed on the web server.
-
-NOTE: Additional configuration is required to deploy the application outside the web server root directory, such as +http://localhost:<port>/my_react_application+.
+The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: https://vitejs.dev/guide/build[Building for Production] or https://vitejs.dev/guide/static-deploy.html[Deploying a Static Site].
 
 == Next Steps
 

From 6135b009d76b89e185aea19b6af76282b69a304c Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Fri, 12 Dec 2025 09:00:43 +1030
Subject: [PATCH 05/10] More updates to React guides

---
 modules/ROOT/pages/react-zip-bundle.adoc      |   6 +-
 modules/ROOT/pages/react-zip-host.adoc        |   6 +-
 .../integrations/react-quick-start.adoc       | 140 +++---------------
 3 files changed, 29 insertions(+), 123 deletions(-)

diff --git a/modules/ROOT/pages/react-zip-bundle.adoc b/modules/ROOT/pages/react-zip-bundle.adoc
index 6281d40ae1..284ccc7b46 100644
--- a/modules/ROOT/pages/react-zip-bundle.adoc
+++ b/modules/ROOT/pages/react-zip-bundle.adoc
@@ -1,6 +1,6 @@
-= Bundling the TinyMCE .zip package with the React framework
-:navtitle: Using a .zip package with bundling
-:description: A guide on integrating a .zip version of TinyMCE into the React framework by bundling it.
+= Bundling TinyMCE from .zip package in React
+:navtitle: Using a .zip package with a module bundler
+:description: A guide on integrating a .zip version of TinyMCE in a React project by bundling it.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, bundle
 :productSource: zip
 :productUse: bundle
diff --git a/modules/ROOT/pages/react-zip-host.adoc b/modules/ROOT/pages/react-zip-host.adoc
index 4fdf72456c..0db2f98ef9 100644
--- a/modules/ROOT/pages/react-zip-host.adoc
+++ b/modules/ROOT/pages/react-zip-host.adoc
@@ -1,7 +1,7 @@
-= Hosting the TinyMCE .zip package with the React framework
+= Self-host TinyMCE from .zip package in React
 :page-aliases: react-zip.adoc
-:navtitle: Using a .zip package with hosting
-:description: A guide on integrating a .zip version of TinyMCE into the React framework by self-hosting it.
+:navtitle: Using a TinyMCE .zip package in React
+:description: A guide on self-hosting a .zip version of TinyMCE into React.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, host
 :productSource: zip
 :productUse: host
diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc
index 17579ea418..c568fa3a3d 100644
--- a/modules/ROOT/partials/integrations/react-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/react-quick-start.adoc
@@ -129,7 +129,7 @@ npm run postinstall
 ----
 +
 
-. Add `Editor` component to `+./src/App.jsx+` and update `tinymceScriptSrc` as below:
+. Add `Editor` component to `+./src/App.jsx+` and point `tinymceScriptSrc` the `tinymce` location.
 +
 [source,jsx]
 ----
@@ -247,51 +247,25 @@ endif::[]
 endif::[]
 ifeval::["{productSource}" == "zip"]
 ifeval::["{productUse}" == "host"]
-. Install the `+@tinymce/tinymce-react+` package.
-+
-[source,sh]
-----
-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:
-+
-.> `tree -L 2 public`
-[source,text]
-----
-public
-├── favicon.ico
-├── index.html
-├── logo192.png
-├── logo512.png
-├── manifest.json
-├── robots.txt
-└── tinymce
-    ├── icons
-    ├── langs
-    ├── license.txt
-    ├── models
-    ├── plugins
-    ├── skins
-    ├── themes
-    ├── tinymce.d.ts
-    └── tinymce.min.js
-----
+
+. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+public+` folder
 +
-. Using a text editor, open `+./eslint.config.js` and add `+'src/tinymce'+` to the `+ignores+` array.
+
+. Add `+'public/tinymce'+` to the `+ignores+` array to `+./eslint.config.js` file.
 +
 .Diff of `.eslint.config.js`
 [source,patch]
 ----
 export default tseslint.config(
 -  { ignores: ['dist'] },
-+  { ignores: ['dist', 'src/tinymce'] },
++  { ignores: ['dist', 'public/tinymce'] },
    {
      extends: [js.configs.recommended, ...tseslint.configs.recommended],
      files: ['**/*.{ts,tsx}'],
 ----
 +
-. Using a text editor, open `+./src/App.jsx+` and replace the contents with:
+
+. Update `+./src/App.jsx+` as below. *Note*: Remember to point `tinymceScriptSrc` the `tinymce` location.
 +
 [source,jsx]
 ----
@@ -334,44 +308,21 @@ export default function App() {
 }
 ----
 +
+
 . Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
 endif::[]
 ifeval::["{productUse}" == "bundle"]
 
-. Install the `+@tinymce/tinymce-react+` and `+script-loader+` packages.
+. Install `+script-loader+` package.
 +
 [source,sh]
 ----
-npm install @tinymce/tinymce-react script-loader
+npm install 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:
-+
-.> `tree -L 2 src`
-[source,text]
-----
-src
-├── App.css
-├── App.js
-├── App.test.js
-├── index.css
-├── index.js
-├── logo.svg
-├── reportWebVitals.js
-├── setupTests.js
-└── tinymce
-    ├── icons
-    ├── langs
-    ├── license.txt
-    ├── models
-    ├── plugins
-    ├── skins
-    ├── themes
-    ├── tinymce.d.ts
-    └── tinymce.min.js
-----
-+
-. Using a text editor, open `+./eslint.config.js+` and add `+'src/tinymce'+` to the `+ignores+` array.
+. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder.
+
+. Add `+'src/tinymce'+` to the `+ignores+` array to `+./eslint.config.js` file.
 +
 .Diff of `.eslint.config.js`
 [source,patch]
@@ -391,60 +342,13 @@ index 092408a..1ab8db4 100644
      files: ['**/*.{ts,tsx}'],
 ----
 +
-. Using a text editor, create `+./src/BundledEditor.jsx+` and set the contents to:
+
+. Create `+./src/BundledEditor.jsx+` and set the contents to:
 +
 [source,jsx]
 ----
 import { Editor } from '@tinymce/tinymce-react';
-
-// TinyMCE so the global var exists
-import './tinymce/tinymce.min.js';
-// DOM model
-import './tinymce/models/dom/model.min.js'
-// Theme
-import './tinymce/themes/silver/theme.min.js';
-// Toolbar icons
-import './tinymce/icons/default/icons.min.js';
-// Editor styles
-import './tinymce/skins/ui/oxide/skin.min.js';
-
-// importing the plugin index.js file.
-// if you use a plugin that is not listed here the editor will fail to load
-import './tinymce/plugins/advlist';
-import './tinymce/plugins/anchor';
-import './tinymce/plugins/autolink';
-import './tinymce/plugins/autoresize';
-import './tinymce/plugins/autosave';
-import './tinymce/plugins/charmap';
-import './tinymce/plugins/code';
-import './tinymce/plugins/codesample';
-import './tinymce/plugins/directionality';
-import './tinymce/plugins/emoticons';
-import './tinymce/plugins/fullscreen';
-import './tinymce/plugins/help';
-import './tinymce/plugins/image';
-import './tinymce/plugins/importcss';
-import './tinymce/plugins/insertdatetime';
-import './tinymce/plugins/link';
-import './tinymce/plugins/lists';
-import './tinymce/plugins/media';
-import './tinymce/plugins/nonbreaking';
-import './tinymce/plugins/pagebreak';
-import './tinymce/plugins/preview';
-import './tinymce/plugins/quickbars';
-import './tinymce/plugins/save';
-import './tinymce/plugins/searchreplace';
-import './tinymce/plugins/table';
-import './tinymce/plugins/visualblocks';
-import './tinymce/plugins/visualchars';
-import './tinymce/plugins/wordcount';
-
-// importing plugin resources
-import './tinymce/plugins/emoticons/js/emojis.js';
-
-// Content styles, including inline UI like fake cursors
-import './tinymce/skins/content/default/content.js';
-import './tinymce/skins/ui/oxide/content.js';
+include::partial$integrations/import-tinymce-statements.adoc[]
 
 export default function BundledEditor(props) {
   return (
@@ -456,8 +360,9 @@ export default function BundledEditor(props) {
 }
 ----
 +
-. Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
-. Using a text editor, open `+./src/App.jsx+` and replace the contents with:
+. Update the `+licenseKey+` option to include your xref:license-key.adoc[License Key].
+
+. Add `BundleEditor` component into `+./src/App.jsx+` as the following:
 +
 [source,jsx]
 ----
@@ -481,8 +386,9 @@ export default function App() {
           height: 500,
           menubar: false,
           plugins: [
-            'advlist', 'anchor', 'autolink', 'help', 'image', 'link', 'lists',
-            'searchreplace', 'table', 'wordcount'
+            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
+            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+            'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
           ],
           toolbar: 'undo redo | blocks | ' +
             'bold italic forecolor | alignleft aligncenter ' +

From cf797bf1cfd9db48745942b0930a1627569ebaa6 Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Mon, 15 Dec 2025 11:44:41 +1030
Subject: [PATCH 06/10] Update angular docs

---
 modules/ROOT/pages/angular-cloud.adoc         |   7 +-
 modules/ROOT/pages/angular-pm-bundle.adoc     |  46 ++----
 modules/ROOT/pages/angular-pm.adoc            |   6 +-
 modules/ROOT/pages/angular-zip.adoc           |   6 +-
 .../angular-load-tinymce-independently.adoc   |  58 ++++++++
 .../integrations/angular-quick-start.adoc     | 132 ++++--------------
 6 files changed, 110 insertions(+), 145 deletions(-)
 create mode 100644 modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc

diff --git a/modules/ROOT/pages/angular-cloud.adoc b/modules/ROOT/pages/angular-cloud.adoc
index 979d6a7f57..254d78d0ec 100644
--- a/modules/ROOT/pages/angular-cloud.adoc
+++ b/modules/ROOT/pages/angular-cloud.adoc
@@ -1,7 +1,10 @@
-= Using {productname} from the Tiny Cloud CDN with the Angular framework
+= Using {productname} from Tiny Cloud in Angular
 :navtitle: Angular
-:description: A guide on integrating TinyMCE from the Tiny Cloud into the Angular framework.
+:description: A guide on using TinyMCE from the Tiny Cloud in a Angular project.
 :keywords: integration, integrate, angular
 :productSource: cloud
 
+This guide shows how to integrate {productname} from Tiny Cloud into an Angular application using https://github.com/tinymce/tinymce-angular[{productname} Angular component].
+
+
 include::partial$integrations/angular-quick-start.adoc[]
diff --git a/modules/ROOT/pages/angular-pm-bundle.adoc b/modules/ROOT/pages/angular-pm-bundle.adoc
index f44c680e5f..621bf772a9 100644
--- a/modules/ROOT/pages/angular-pm-bundle.adoc
+++ b/modules/ROOT/pages/angular-pm-bundle.adoc
@@ -1,11 +1,11 @@
-= Bundling TinyMCE with an Angular application
+= Bundling TinyMCE from NPM in an Angular application
 :navtitle: Using a package manager with bundling
-:description: A guide on bundling TinyMCE with an Angular application using Vite.
+:description: A guide on bundling TinyMCE in an Angular application using Vite.
 :keywords: integration, integrate, angular, bundle, vite, npm, tinymce
 :productSource: package-manager
 :packageName: @tinymce/tinymce-angular
 
-The https://github.com/tinymce/tinymce-angular[Official {productname} Angular component] integrates {productname} into Angular projects. This procedure creates a https://angular.dev/tools/cli/setup-local[basic Angular application] containing a bundled {productname} editor.
+This guide shows how to integrate the NPM version of {productname} in an Angular application using a module bundler Vite.
 
 For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
 
@@ -15,7 +15,7 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
 
 == Procedure
 
-. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package.
+. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
 +
 [source,sh]
 ----
@@ -27,27 +27,14 @@ npm install -g @angular/cli
 ----
 ng new --defaults --skip-git tinymce-angular-demo
 ----
-. Change into the newly created directory.
+. Go to the newly project directory and install `+tinymce+` and `+@tinymce/tinymce-angular+`.
 +
 [source,sh]
 ----
-cd tinymce-angular-demo
+cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular
 ----
-. Install the `+tinymce+` and `+@tinymce/tinymce-angular+` packages.
 +
-[source,sh]
-----
-npm install tinymce @tinymce/tinymce-angular
-----
-+
-include::partial$integrations/premium-plugins-install-step-link.adoc[]
-+
-[NOTE]
-====
-For information on configuring premium plugins when bundling, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
-====
-+
-. Using a text editor, create `+src/app/editor.component.ts+` and set the contents to:
+. Create `+src/app/editor.component.ts+`
 +
 [source,ts]
 ----
@@ -74,11 +61,10 @@ import 'tinymce/plugins/lists';
 import 'tinymce/plugins/table';
 import 'tinymce/plugins/code';
 import 'tinymce/plugins/help';
-import 'tinymce/plugins/help/js/en.js';
+// Include resources that a plugin lazy-loads at the run-time
+import 'tinymce/plugins/help/js/i18n/keynav/en.js';
 import 'tinymce/plugins/wordcount';
 
-include::partial$integrations/premium-plugins-bundling.adoc[]
-
 // Content styles, including inline UI like fake cursors
 import 'tinymce/skins/content/default/content.js';
 import 'tinymce/skins/ui/oxide/content.js';
@@ -103,7 +89,7 @@ export class MyEditorComponent {
 }
 ----
 +
-. Using a text editor, open `+src/app/app.component.ts+` and update it to use the editor component:
+. Open `+src/app/app.component.ts+` and update it to use `MyEditorComponent`:
 +
 [source,ts]
 ----
@@ -122,7 +108,7 @@ import { MyEditorComponent } from './editor.component';
 export class AppComponent {}
 ----
 +
-. Run `+ng serve+` to start a dev server
+. Run the Angular development server
 +
 [source,sh]
 ----
@@ -130,16 +116,6 @@ ng serve
 ----
 +
 
-. Build the application for production:
-+
-[source,sh]
-----
-ng build
-----
-+
-This command creates an optimized production bundle in the `+dist+` directory.
-
-. If premium plugins are included, update the `+licenseKey+` option in the editor component and include your xref:license-key.adoc[License Key].
 
 == Next Steps
 
diff --git a/modules/ROOT/pages/angular-pm.adoc b/modules/ROOT/pages/angular-pm.adoc
index 378db8bd37..18ce6e1951 100644
--- a/modules/ROOT/pages/angular-pm.adoc
+++ b/modules/ROOT/pages/angular-pm.adoc
@@ -1,7 +1,9 @@
-= Using the {productname} package with the Angular framework
+= Using {productname} from NPM in Angular
 :navtitle: Using a package manager
-:description: A guide on integrating the TinyMCE package into the Angular framework.
+:description: A guide on integrating the TinyMCE package into an Angular application.
 :keywords: integration, integrate, angular
 :productSource: package-manager
 
+This guide shows how to integrate the NPM version of {productname} in an Angular application.
+
 include::partial$integrations/angular-quick-start.adoc[]
diff --git a/modules/ROOT/pages/angular-zip.adoc b/modules/ROOT/pages/angular-zip.adoc
index 8de91e7b6a..8ae7873af5 100644
--- a/modules/ROOT/pages/angular-zip.adoc
+++ b/modules/ROOT/pages/angular-zip.adoc
@@ -1,7 +1,9 @@
-= Using the {productname} .zip package with the Angular framework
+= Using the {productname} from .zip package in Angular
 :navtitle: Using a .zip package
-:description: A guide on integrating a .zip version of TinyMCE into the Angular framework.
+:description: A guide on integrating a .zip version of TinyMCE into an Angular application.
 :keywords: integration, integrate, angular
 :productSource: zip
 
+This guide shows how to integrate {productname} from a .zip package in an Angular application.
+
 include::partial$integrations/angular-quick-start.adoc[]
diff --git a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
new file mode 100644
index 0000000000..77c147c9e1
--- /dev/null
+++ b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
@@ -0,0 +1,58 @@
+
+. There are two ways to add the {productname} into the application:
+.. Lazy load {productname} using the provided `TINYMCE_SCRIPT_SRC` dependency provider.
+* Add {productname} to the `+assets+` configuration in `+angular.json+`. This will make {productname} available as a static asset to the application.
++
+[source,json]
+----
+"assets": [
+  { 
+    "glob": "**/*",
+    "input": "node_modules/tinymce",
+    "output": "/tinymce/"
+  }
+]
+----
++
+
+* Update the component's dependency providers.
++
+[source,ts]
+----
+import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
+
+@Component({
+  /* ... */
+  standalone: true,
+  imports: [EditorComponent],
+  providers: [
+    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
+  ]
+})
+----
++
+
+.. Load {productname} into the application's runtime global scope.
+* Open `+angular.json+` and add {productname} to the _global scripts_ tag.
++
+[source,json]
+----
+"scripts": [
+  "/<path_to_tinymce>/tinymce.min.js"
+]
+----
+
+* Update the `+base_url+` and `+suffix+` options to configurate the location of other components like skins, icons, plugins, etc.
++
+[source,ts]
+----
+export class AppComponent {
+  /* ... */
+  init: EditorComponent['init'] = {
+    /* ... */
+    base_url: '/tinymce', // Root for resources
+    suffix: '.min'        // Suffix to use when loading resources
+  };
+}
+----
++
\ No newline at end of file
diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc
index b987085cde..1d9bca69e2 100644
--- a/modules/ROOT/partials/integrations/angular-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc
@@ -1,56 +1,61 @@
 :packageName: tinymce-angular
 
-The https://github.com/tinymce/tinymce-angular[Official {productname} Angular component] integrates {productname} into Angular projects. This procedure creates a https://angular.dev/tools/cli/setup-local[basic Angular application] containing a {productname} editor.
+The steps below use standalone components. If using Angular Modules, see xref:angular-modules[Angular Modules].
 
-This procedure uses standalone components. If using Angular Modules, see xref:angular-modules[Angular Modules].
-
-For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
+For more examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
 
 == Prerequisites
 
-This procedure requires https://nodejs.org/[Node.js (and npm)].
+This procedure requires https://nodejs.org/[Node.js (and NPM)].
 
 == Procedure
 
-. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package.
+. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
 +
 [source,sh]
 ----
 npm install -g @angular/cli
 ----
-. Create a new Angular project named `+tinymce-angular-demo+`.
++
+. Create a new Angular project named `+tinymce-angular-demo+` using default settings and without Git initialization.
 +
 [source,sh]
 ----
 ng new --defaults --skip-git tinymce-angular-demo
 ----
-. Change into the newly created directory.
++
+. Move into the project directory and install `+tinymce-angular+`.
 +
 [source,sh]
 ----
-cd tinymce-angular-demo
+cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
 ----
++
 ifeval::["{productSource}" == "package-manager"]
-. Install the `+tinymce+` and `+tinymce-angular+` packages.
+
+. Install the `+tinymce+`.
 +
 [source,sh]
 ----
-npm install tinymce @tinymce/tinymce-angular
+npm install tinymce
 ----
 +
-include::partial$integrations/premium-plugins-install-step-link.adoc[]
 endif::[]
 ifeval::["{productSource}" != "package-manager"]
+
 . Install the `+tinymce-angular+` package.
 +
 [source,sh]
 ----
 npm install @tinymce/tinymce-angular
 ----
-endif::[]
-. Using a text editor, open `+/path/to/tinymce-angular-demo/src/app/app.component.ts+` and replace the contents with:
 +
+
+endif::[]
+. Update the root component `+src/app/app.component.ts+` to import and use the `EditorComponent`.
 ifeval::["{productSource}" == "cloud"]
+
++
 [source,ts,subs="attributes+"]
 ----
 import { Component } from '@angular/core';
@@ -75,9 +80,11 @@ export class AppComponent {
 }
 ----
 +
-. Update the `+apiKey+` option in the editor element to include your link:{accountsignup}/[{cloudname} API key].
+. Update the `+apiKey+` with your own link:{accountsignup}/[{cloudname} API key].
 endif::[]
 ifeval::["{productSource}" != "cloud"]
+
++
 [source,ts,subs="attributes+"]
 ----
 import { Component } from '@angular/core';
@@ -100,109 +107,25 @@ export class AppComponent {
   };
 }
 ----
-endif::[]
-ifeval::["{productSource}" == "package-manager"]
-. Using a text editor, open `+angular.json+` and add {productname} to the `+assets+` property.
-+
-[source,json]
-----
-"assets": [
-  { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
-]
-----
-
-. Load {productname}.
-* To load {productname} when the editor is initialized (also known as lazy loading), add a dependency provider to the component using the `+TINYMCE_SCRIPT_SRC+` token.
 +
-[source,ts]
-----
-import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
-/* ... */
-@Component({
-  /* ... */
-  standalone: true,
-  imports: [EditorComponent],
-  providers: [
-    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
-  ]
-})
-----
-+
-[NOTE]
-====
-When using `+TINYMCE_SCRIPT_SRC+` to lazy load TinyMCE, you can not import premium plugins directly. This will trigger a `tinymce not defined` error in your application because the plugins need to access `tinymce` global variable which doesn't exist at that time.
-====
-* To load {productname} when the page or application is loaded:
-.. Open `+angular.json+` and add {productname} to the _global scripts_ tag.
-+
-[source,json]
-----
-"scripts": [
-  "node_modules/tinymce/tinymce.min.js"
-]
-----
-.. Update the editor configuration to include the `+base_url+` and `+suffix+` options.
-+
-[source,ts]
-----
-export class AppComponent {
-  /* ... */
-  init: EditorComponent['init'] = {
-    /* ... */
-    base_url: '/tinymce', // Root for resources
-    suffix: '.min'        // Suffix to use when loading resources
-  };
-}
-----
 endif::[]
-ifeval::["{productSource}" == "zip"]
-
-. Add the `+tinymce+` global to the application by: Deploying {productname} independent of the Angular application, or bundling {productname} with the Angular application.
-* Deploy {productname} independent of the Angular application
-+
-To use an independent deployment of {productname}, add a script to either the `+<head>+` or the end of the `+<body>+` of the HTML file, such as:
-+
-[source,html]
-----
-<script src="/path/to/tinymce.min.js"></script>
-----
+ifeval::["{productSource}" == "package-manager"]
+include::partial$integrations/angular-load-tinymce-independently.adoc[]
 endif::[]
 
-. Run `+ng serve+` to start a dev server
+. Run the Angular a development server
 +
 [source,sh]
 ----
 ng serve
 ----
++
 
+ifeval::["{productSource}" == "package-manager"]
 [[angular-modules]]
 == Angular Modules
 `+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file.
 
-ifeval::["{productSource}" == "package-manager"]
-
-[source,ts]
-----
-import { NgModule } from '@angular/core';
-import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
-
-@NgModule({
-  /* ... */
-  imports: [
-    EditorModule
-  ],
-  providers: [
-    // If you're self hosting and lazy loading TinyMCE from node_modules:
-    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
-  ],
-  /* ... */
-})
-export class MyModule {}
-----
-
-endif::[]
-
-ifeval::["{productSource}" != "package-manager"]
 
 [source,ts]
 ----
@@ -221,6 +144,7 @@ export class MyModule {}
 
 endif::[]
 
+
 == Next Steps
 
 * For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].

From 080c4b6194bccd6988d98ca89f987f39abd56b5a Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Mon, 15 Dec 2025 12:47:32 +1030
Subject: [PATCH 07/10] Fix syntax

---
 modules/ROOT/pages/angular-pm-bundle.adoc                 | 8 ++++++--
 .../integrations/angular-load-tinymce-independently.adoc  | 6 ++----
 .../ROOT/partials/integrations/angular-quick-start.adoc   | 7 +++----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/modules/ROOT/pages/angular-pm-bundle.adoc b/modules/ROOT/pages/angular-pm-bundle.adoc
index 621bf772a9..f40e5b3eb7 100644
--- a/modules/ROOT/pages/angular-pm-bundle.adoc
+++ b/modules/ROOT/pages/angular-pm-bundle.adoc
@@ -5,7 +5,7 @@
 :productSource: package-manager
 :packageName: @tinymce/tinymce-angular
 
-This guide shows how to integrate the NPM version of {productname} in an Angular application using a module bundler Vite.
+This guide shows how to integrate the NPM version of {productname} in an Angular application using a module bundler such as Vite.
 
 For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
 
@@ -21,18 +21,21 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
 ----
 npm install -g @angular/cli
 ----
+
 . Create a new Angular project named `+tinymce-angular-demo+`.
 +
 [source,sh]
 ----
 ng new --defaults --skip-git tinymce-angular-demo
 ----
+
 . Go to the newly project directory and install `+tinymce+` and `+@tinymce/tinymce-angular+`.
 +
 [source,sh]
 ----
 cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular
 ----
+
 +
 . Create `+src/app/editor.component.ts+`
 +
@@ -89,6 +92,7 @@ export class MyEditorComponent {
 }
 ----
 +
+
 . Open `+src/app/app.component.ts+` and update it to use `MyEditorComponent`:
 +
 [source,ts]
@@ -107,6 +111,7 @@ import { MyEditorComponent } from './editor.component';
 })
 export class AppComponent {}
 ----
+
 +
 . Run the Angular development server
 +
@@ -114,7 +119,6 @@ export class AppComponent {}
 ----
 ng serve
 ----
-+
 
 
 == Next Steps
diff --git a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
index 77c147c9e1..a9e9e1e871 100644
--- a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
+++ b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
@@ -1,4 +1,5 @@
 
++
 . There are two ways to add the {productname} into the application:
 .. Lazy load {productname} using the provided `TINYMCE_SCRIPT_SRC` dependency provider.
 * Add {productname} to the `+assets+` configuration in `+angular.json+`. This will make {productname} available as a static asset to the application.
@@ -13,7 +14,6 @@
   }
 ]
 ----
-+
 
 * Update the component's dependency providers.
 +
@@ -30,7 +30,6 @@ import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
   ]
 })
 ----
-+
 
 .. Load {productname} into the application's runtime global scope.
 * Open `+angular.json+` and add {productname} to the _global scripts_ tag.
@@ -54,5 +53,4 @@ export class AppComponent {
     suffix: '.min'        // Suffix to use when loading resources
   };
 }
-----
-+
\ No newline at end of file
+----
\ No newline at end of file
diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc
index 1d9bca69e2..6d6e36dae1 100644
--- a/modules/ROOT/partials/integrations/angular-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc
@@ -10,6 +10,7 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
 
 == Procedure
 
+--
 . From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
 +
 [source,sh]
@@ -107,12 +108,11 @@ export class AppComponent {
   };
 }
 ----
-+
+
 endif::[]
 ifeval::["{productSource}" == "package-manager"]
 include::partial$integrations/angular-load-tinymce-independently.adoc[]
 endif::[]
-
 . Run the Angular a development server
 +
 [source,sh]
@@ -121,12 +121,12 @@ ng serve
 ----
 +
 
+
 ifeval::["{productSource}" == "package-manager"]
 [[angular-modules]]
 == Angular Modules
 `+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file.
 
-
 [source,ts]
 ----
 import { NgModule } from '@angular/core';
@@ -141,7 +141,6 @@ import { EditorModule } from '@tinymce/tinymce-angular';
 })
 export class MyModule {}
 ----
-
 endif::[]
 
 

From 367992dfc28159cf910b5dbf4204250e58a81680 Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Mon, 15 Dec 2025 15:45:08 +1030
Subject: [PATCH 08/10] Correct instructions for Angular zip package

---
 .../angular-load-tinymce-independently.adoc   | 40 +++++++++----------
 .../integrations/angular-quick-start.adoc     | 37 ++++-------------
 2 files changed, 26 insertions(+), 51 deletions(-)

diff --git a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
index a9e9e1e871..6fd398e739 100644
--- a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
+++ b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
@@ -1,21 +1,7 @@
 
 +
-. There are two ways to add the {productname} into the application:
+. There are two options for including {productname} into the application:
 .. Lazy load {productname} using the provided `TINYMCE_SCRIPT_SRC` dependency provider.
-* Add {productname} to the `+assets+` configuration in `+angular.json+`. This will make {productname} available as a static asset to the application.
-+
-[source,json]
-----
-"assets": [
-  { 
-    "glob": "**/*",
-    "input": "node_modules/tinymce",
-    "output": "/tinymce/"
-  }
-]
-----
-
-* Update the component's dependency providers.
 +
 [source,ts]
 ----
@@ -26,22 +12,34 @@ import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
   standalone: true,
   imports: [EditorComponent],
   providers: [
-    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
+    { provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' }
   ]
 })
 ----
 
-.. Load {productname} into the application's runtime global scope.
-* Open `+angular.json+` and add {productname} to the _global scripts_ tag.
+.. Add {productname} to the _global scripts_ tag via `+angular.json+`.
 +
 [source,json]
 ----
 "scripts": [
-  "/<path_to_tinymce>/tinymce.min.js"
+  "<path_to_source_tinymce>/tinymce.min.js"
 ]
 ----
 
-* Update the `+base_url+` and `+suffix+` options to configurate the location of other components like skins, icons, plugins, etc.
+. Then update `+angular.json+` to include {productname} and other components as `+assets+`. This will make them available to the application.
++
+[source,json]
+----
+"assets": [
+  {
+    "glob": "**/*",
+    "input": "<path_to_source_tinymce>/tinymce",
+    "output": "/tinymce"
+  }
+]
+----
+
+. Update the `+base_url+` and `+suffix+` options to configurate the location of other components like skins, icons, plugins, etc.
 +
 [source,ts]
 ----
@@ -53,4 +51,4 @@ export class AppComponent {
     suffix: '.min'        // Suffix to use when loading resources
   };
 }
-----
\ No newline at end of file
+----
diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc
index 6d6e36dae1..d31c82690e 100644
--- a/modules/ROOT/partials/integrations/angular-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc
@@ -10,7 +10,6 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
 
 == Procedure
 
---
 . From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
 +
 [source,sh]
@@ -50,12 +49,10 @@ ifeval::["{productSource}" != "package-manager"]
 ----
 npm install @tinymce/tinymce-angular
 ----
-+
-
 endif::[]
+
 . Update the root component `+src/app/app.component.ts+` to import and use the `EditorComponent`.
 ifeval::["{productSource}" == "cloud"]
-
 +
 [source,ts,subs="attributes+"]
 ----
@@ -110,39 +107,19 @@ export class AppComponent {
 ----
 
 endif::[]
-ifeval::["{productSource}" == "package-manager"]
-include::partial$integrations/angular-load-tinymce-independently.adoc[]
+
+ifeval::["{productSource}" == "zip"]
+. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder.
 endif::[]
+
+include::partial$integrations/angular-load-tinymce-independently.adoc[]
+
 . Run the Angular a development server
 +
 [source,sh]
 ----
 ng serve
 ----
-+
-
-
-ifeval::["{productSource}" == "package-manager"]
-[[angular-modules]]
-== Angular Modules
-`+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file.
-
-[source,ts]
-----
-import { NgModule } from '@angular/core';
-import { EditorModule } from '@tinymce/tinymce-angular';
-
-@NgModule({
-  /* ... */
-  imports: [
-    EditorModule
-  ],
-  /* ... */
-})
-export class MyModule {}
-----
-endif::[]
-
 
 == Next Steps
 

From 867a2e124d675915fcce9b886ef83c77921bdd1d Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Wed, 17 Dec 2025 13:58:58 +1030
Subject: [PATCH 09/10] Another go at React docs

---
 modules/ROOT/pages/react-cloud.adoc           |   2 +-
 modules/ROOT/pages/react-pm-bundle.adoc       |   2 +-
 modules/ROOT/pages/react-pm-host.adoc         |   2 +-
 modules/ROOT/pages/react-zip-bundle.adoc      |   4 +-
 modules/ROOT/pages/react-zip-host.adoc        |   6 +-
 .../import-tinymce-statements.adoc            |  36 -----
 .../integrations/react-quick-start.adoc       | 139 +++++++++++++-----
 7 files changed, 110 insertions(+), 81 deletions(-)
 delete mode 100644 modules/ROOT/partials/integrations/import-tinymce-statements.adoc

diff --git a/modules/ROOT/pages/react-cloud.adoc b/modules/ROOT/pages/react-cloud.adoc
index f24e33eac0..ce6a993182 100644
--- a/modules/ROOT/pages/react-cloud.adoc
+++ b/modules/ROOT/pages/react-cloud.adoc
@@ -5,6 +5,6 @@
 :productSource: cloud
 
 
-This guide shows how to integrate TinyMCE from Tiny Cloud into a React project using link:https://github.com/tinymce/tinymce-react[{productname} React component] 
+This guide shows how to integrate TinyMCE from Tiny Cloud into a React application using link:https://github.com/tinymce/tinymce-react[{productname} React component].
 
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/react-pm-bundle.adoc b/modules/ROOT/pages/react-pm-bundle.adoc
index 18295fd585..391cf030e8 100644
--- a/modules/ROOT/pages/react-pm-bundle.adoc
+++ b/modules/ROOT/pages/react-pm-bundle.adoc
@@ -5,6 +5,6 @@
 :productSource: package-manager
 :productUse: bundle
 
-This guide shows how to bundle TinyMCE in a React project with link:https://github.com/tinymce/tinymce-react[{productname} React component]
+This guide shows how to integrate TinyMCE in a React application with link:https://github.com/tinymce/tinymce-react[{productname} React component].
 
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/react-pm-host.adoc b/modules/ROOT/pages/react-pm-host.adoc
index 299007412f..73e64f8939 100644
--- a/modules/ROOT/pages/react-pm-host.adoc
+++ b/modules/ROOT/pages/react-pm-host.adoc
@@ -6,6 +6,6 @@
 :productSource: package-manager
 :productUse: host
 
-This guide shows how to self-host TinyMCE in a React project using link:https://github.com/tinymce/tinymce-react[{productname} React component] 
+This guide shows how to self-host TinyMCE in a React application using link:https://github.com/tinymce/tinymce-react[{productname} React component].
 
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/react-zip-bundle.adoc b/modules/ROOT/pages/react-zip-bundle.adoc
index 284ccc7b46..263666bd16 100644
--- a/modules/ROOT/pages/react-zip-bundle.adoc
+++ b/modules/ROOT/pages/react-zip-bundle.adoc
@@ -1,8 +1,10 @@
 = Bundling TinyMCE from .zip package in React
 :navtitle: Using a .zip package with a module bundler
-:description: A guide on integrating a .zip version of TinyMCE in a React project by bundling it.
+:description: A guide on bundling a .zip version of TinyMCE in a React project.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, bundle
 :productSource: zip
 :productUse: bundle
 
+This shows how to self-host and bundle {productname} from a `.zip` package into a React application.
+
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/pages/react-zip-host.adoc b/modules/ROOT/pages/react-zip-host.adoc
index 0db2f98ef9..ac6c68eede 100644
--- a/modules/ROOT/pages/react-zip-host.adoc
+++ b/modules/ROOT/pages/react-zip-host.adoc
@@ -1,9 +1,11 @@
-= Self-host TinyMCE from .zip package in React
+= Lazy-loading TinyMCE from .zip package in React
 :page-aliases: react-zip.adoc
 :navtitle: Using a TinyMCE .zip package in React
-:description: A guide on self-hosting a .zip version of TinyMCE into React.
+:description: A guide on lazy-loading a .zip version of TinyMCE in a React application.
 :keywords: integration, integrate, react, reactjs, vite, tinymce-react, host
 :productSource: zip
 :productUse: host
 
+This guide shows how to self-host and lazy-load {productname} from a `.zip` package into a React application.
+
 include::partial$integrations/react-quick-start.adoc[]
diff --git a/modules/ROOT/partials/integrations/import-tinymce-statements.adoc b/modules/ROOT/partials/integrations/import-tinymce-statements.adoc
deleted file mode 100644
index d56ba7eebb..0000000000
--- a/modules/ROOT/partials/integrations/import-tinymce-statements.adoc
+++ /dev/null
@@ -1,36 +0,0 @@
-// Ensure to import tinymce first as other components expect
-// a global variable `tinymce` to exist
-import 'tinymce/tinymce';
-// DOM model
-import 'tinymce/models/dom/model'
-// Theme
-import 'tinymce/themes/silver';
-// Toolbar icons
-import 'tinymce/icons/default';
-// Editor styles
-import 'tinymce/skins/ui/oxide/skin';
-
-// if you use a plugin that is not listed here the editor will fail to load
-import 'tinymce/plugins/anchor';
-import 'tinymce/plugins/advlist';
-import 'tinymce/plugins/autolink';
-import 'tinymce/plugins/charmap';
-import 'tinymce/plugins/code';
-import 'tinymce/plugins/media';
-import 'tinymce/plugins/visualblocks';
-import 'tinymce/plugins/fullscreen';
-import 'tinymce/plugins/insertdatetime';
-import 'tinymce/plugins/preview';
-import 'tinymce/plugins/help';
-// Include resources that a plugin lazy-loads at the run-time
-import 'tinymce/plugins/help/js/i18n/keynav/en';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/link';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/searchreplace';
-import 'tinymce/plugins/table';
-import 'tinymce/plugins/wordcount';
-
-// Content styles, including inline UI like fake cursors
-import 'tinymce/skins/content/default/content';
-import 'tinymce/skins/ui/oxide/content';
\ No newline at end of file
diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc
index c568fa3a3d..e162e411e1 100644
--- a/modules/ROOT/partials/integrations/react-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/react-quick-start.adoc
@@ -1,7 +1,5 @@
 :packageName: tinymce-react
 
-For more live examples of {productname} React component, visit https://tinymce.github.io/tinymce-react/[the tinymce-react storybook].
-
 == Prerequisites
 
 This procedure requires https://nodejs.org/[Node.js (and NPM)].
@@ -85,21 +83,21 @@ npm install -D fs-extra
 ----
 +
 
-. Setup a `postinstall` script to copy {productname} to `public` directory which makes {productname} available as static assets
+. Setup a `postinstall` script to copy {productname} to `public` directory, which automatically makes {productname} and other components available as static assets after each installation.
 +
-.Add `postinstall.js` script with the following:
+.Add `postinstall.js` file.
 [source,js]
 ----
 import fse from 'fs-extra';
 import path from 'path';
+
 const topDir = import.meta.dirname;
 fse.emptyDirSync(path.join(topDir, 'public', 'tinymce'));
 fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true });
 ----
-+
 
 +
-.Update `postinstall` target in `package.json` to run the `postinstall.js` script
+.Update `postinstall` target in `package.json` to run the `postinstall.js` script.
 [source,json]
 ----
 {
@@ -110,26 +108,23 @@ fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'pu
   }
 }
 ----
-+
 
-. Exclude `public/tinymce` from Git tracking
+. Exclude `+public/tinymce+` from Git tracking
 +
 [source,.gitignore]
 ----
 # ... other rules omitted for brevity ...
 /public/tinymce/
 ----
-+
 
-. In this instance, run the `postinstall` to copy {productname} to the `public` directory. Note: This script will run automatically after every package installation.
+. In this instance, run the `postinstall` to copy {productname} to the `public` directory.
 +
 [source,sh]
 ----
 npm run postinstall
 ----
-+
 
-. Add `Editor` component to `+./src/App.jsx+` and point `tinymceScriptSrc` the `tinymce` location.
+. Add `Editor` component to `+./src/App.jsx+` and point `tinymceScriptSrc` to the `tinymce` location.
 +
 [source,jsx]
 ----
@@ -171,15 +166,15 @@ export default function App() {
   );
 }
 ----
-+
 
 endif::[]
+
 ifeval::["{productUse}" == "bundle"]
-. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages
+. Install the `+tinymce+` package.
 +
 [source,sh]
 ----
-npm install tinymce @tinymce/tinymce-react
+npm install tinymce
 ----
 +
 
@@ -188,7 +183,41 @@ npm install tinymce @tinymce/tinymce-react
 [source,jsx]
 ----
 import { Editor } from '@tinymce/tinymce-react';
-include::partial$integrations/import-tinymce-statements.adoc[]
+// Ensure to import tinymce first as other components expect
+// a global variable `tinymce` to exist
+import 'tinymce/tinymce';
+// DOM model
+import 'tinymce/models/dom/model'
+// Theme
+import 'tinymce/themes/silver';
+// Toolbar icons
+import 'tinymce/icons/default';
+// Editor styles
+import 'tinymce/skins/ui/oxide/skin';
+// Content styles, including inline UI like fake cursors
+import 'tinymce/skins/content/default/content';
+import 'tinymce/skins/ui/oxide/content';
+
+// Import plugins
+import 'tinymce/plugins/anchor';
+import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/autolink';
+import 'tinymce/plugins/charmap';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/media';
+import 'tinymce/plugins/visualblocks';
+import 'tinymce/plugins/fullscreen';
+import 'tinymce/plugins/insertdatetime';
+import 'tinymce/plugins/preview';
+import 'tinymce/plugins/help';
+// Include resources that a plugin lazy-loads at the run-time
+import 'tinymce/plugins/help/js/i18n/keynav/en';
+import 'tinymce/plugins/image';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/searchreplace';
+import 'tinymce/plugins/table';
+import 'tinymce/plugins/wordcount';
 
 export default function BundledEditor(props) {
   return (
@@ -199,9 +228,8 @@ export default function BundledEditor(props) {
   );
 }
 ----
-+
 
-. Use `BundleEditor` component in `+./src/App.jsx+` as the following:
+. Add `BundledEditor` component into `+./src/App.jsx+` with necessary configurations.
 +
 [source,jsx]
 ----
@@ -242,16 +270,16 @@ export default function App() {
   );
 }
 ----
-+
 endif::[]
+
 endif::[]
+
 ifeval::["{productSource}" == "zip"]
 ifeval::["{productUse}" == "host"]
 
 . Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+public+` folder
-+
 
-. Add `+'public/tinymce'+` to the `+ignores+` array to `+./eslint.config.js` file.
+. Add `+'public/tinymce'+` to the `+ignores+` array to `+./eslint.config.js+` file.
 +
 .Diff of `.eslint.config.js`
 [source,patch]
@@ -263,7 +291,6 @@ export default tseslint.config(
      extends: [js.configs.recommended, ...tseslint.configs.recommended],
      files: ['**/*.{ts,tsx}'],
 ----
-+
 
 . Update `+./src/App.jsx+` as below. *Note*: Remember to point `tinymceScriptSrc` the `tinymce` location.
 +
@@ -307,9 +334,6 @@ export default function App() {
   );
 }
 ----
-+
-
-. Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key].
 endif::[]
 ifeval::["{productUse}" == "bundle"]
 
@@ -319,7 +343,7 @@ ifeval::["{productUse}" == "bundle"]
 ----
 npm install script-loader
 ----
-+
+
 . Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder.
 
 . Add `+'src/tinymce'+` to the `+ignores+` array to `+./eslint.config.js` file.
@@ -341,14 +365,60 @@ index 092408a..1ab8db4 100644
      extends: [js.configs.recommended, ...tseslint.configs.recommended],
      files: ['**/*.{ts,tsx}'],
 ----
+
+. Install `+vite-plugin-commonjs+` and update `vite.config.ts` file to enable support for `+CommonJS+` modules.
 +
+[source,typescript]
+----
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import commonjs from 'vite-plugin-commonjs';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), commonjs()],
+});
+----
 
 . Create `+./src/BundledEditor.jsx+` and set the contents to:
 +
 [source,jsx]
 ----
 import { Editor } from '@tinymce/tinymce-react';
-include::partial$integrations/import-tinymce-statements.adoc[]
+// Ensure to import `tinymce` first as other components expect
+// a global variable `tinymce` to exist
+import './tinymce/tinymce';
+// DOM model
+import './tinymce/models/dom/model'
+// Theme
+import './tinymce/themes/silver';
+// Toolbar icons
+import './tinymce/icons/default';
+// Editor styles
+import './tinymce/skins/ui/oxide/skin';
+// Content styles, including inline UI like fake cursors
+import './tinymce/skins/content/default/content';
+import './tinymce/skins/ui/oxide/content';
+// Import plugins
+import './tinymce/plugins/anchor';
+import './tinymce/plugins/advlist';
+import './tinymce/plugins/autolink';
+import './tinymce/plugins/charmap';
+import './tinymce/plugins/code';
+import './tinymce/plugins/media';
+import './tinymce/plugins/visualblocks';
+import './tinymce/plugins/fullscreen';
+import './tinymce/plugins/insertdatetime';
+import './tinymce/plugins/preview';
+import './tinymce/plugins/help';
+// Include resources that a plugin lazy-loads at the run-time
+import './tinymce/plugins/help/js/i18n/keynav/en';
+import './tinymce/plugins/image';
+import './tinymce/plugins/link';
+import './tinymce/plugins/lists';
+import './tinymce/plugins/searchreplace';
+import './tinymce/plugins/table';
+import './tinymce/plugins/wordcount';
 
 export default function BundledEditor(props) {
   return (
@@ -359,8 +429,6 @@ export default function BundledEditor(props) {
   );
 }
 ----
-+
-. Update the `+licenseKey+` option to include your xref:license-key.adoc[License Key].
 
 . Add `BundleEditor` component into `+./src/App.jsx+` as the following:
 +
@@ -406,7 +474,6 @@ endif::[]
 endif::[]
 
 . Test the application.
-+
 * To start the development server run:
 +
 [source,sh]
@@ -414,19 +481,13 @@ endif::[]
 npm run dev
 ----
 
-* To stop the development server, select on the command line or command prompt and press _Ctrl+C_.
-
-
-== Deploying the application
-
-The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: https://vitejs.dev/guide/build[Building for Production] or https://vitejs.dev/guide/static-deploy.html[Deploying a Static Site].
-
-== Next Steps
+== Other resources
 
 ifeval::["{productUse}" == "bundle"]
 * For information on bundling, see: xref:introduction-to-bundling-tinymce.adoc[]
 endif::[]
-* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-react/[the tinymce-react storybook].
+* For examples of the {productname} React integration, see: https://tinymce.github.io/tinymce-react/[the tinymce-react storybook].
+* For guides on integrating {productname} premium plugins, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
 * For information on customizing:
 ** {productname} integration, see: xref:react-ref.adoc[].
 ** {productname}, see: xref:basic-setup.adoc[].

From fa1a3135a436eeb16750c4528223c029b5d3ae9a Mon Sep 17 00:00:00 2001
From: Ben Tran <ben.tran@tiny.cloud>
Date: Wed, 17 Dec 2025 15:49:38 +1030
Subject: [PATCH 10/10] Add a page for angular zip bundle

---
 modules/ROOT/nav.adoc                         |   1 +
 modules/ROOT/pages/angular-pm-bundle.adoc     |  20 +--
 modules/ROOT/pages/angular-zip-bundle.adoc    | 119 ++++++++++++++++++
 modules/ROOT/pages/angular-zip.adoc           |   4 +-
 .../angular-load-tinymce-independently.adoc   |   2 +-
 .../integrations/angular-other-resources.adoc |   8 ++
 .../integrations/angular-quick-start.adoc     |  25 +---
 7 files changed, 139 insertions(+), 40 deletions(-)
 create mode 100644 modules/ROOT/pages/angular-zip-bundle.adoc
 create mode 100644 modules/ROOT/partials/integrations/angular-other-resources.adoc

diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc
index 65573e7804..a418437ba1 100644
--- a/modules/ROOT/nav.adoc
+++ b/modules/ROOT/nav.adoc
@@ -57,6 +57,7 @@
 ****** xref:react-zip-bundle.adoc[Using a .zip package with bundling]
 ***** Angular
 ****** xref:angular-zip.adoc[Using a .zip package]
+****** xref:angular-zip-bundle.adoc[Bundle TinyMCE from a .zip package]
 ***** Vue.js
 ****** xref:vue-zip.adoc[Using a .zip package]
 ***** Blazor
diff --git a/modules/ROOT/pages/angular-pm-bundle.adoc b/modules/ROOT/pages/angular-pm-bundle.adoc
index f40e5b3eb7..24889c8c3b 100644
--- a/modules/ROOT/pages/angular-pm-bundle.adoc
+++ b/modules/ROOT/pages/angular-pm-bundle.adoc
@@ -5,9 +5,7 @@
 :productSource: package-manager
 :packageName: @tinymce/tinymce-angular
 
-This guide shows how to integrate the NPM version of {productname} in an Angular application using a module bundler such as Vite.
-
-For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
+This guide shows how to integrate the NPM version of {productname} in an Angular application.
 
 == Prerequisites
 
@@ -36,8 +34,8 @@ ng new --defaults --skip-git tinymce-angular-demo
 cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular
 ----
 
-+
-. Create `+src/app/editor.component.ts+`
+
+. Create `+src/app/editor.component.ts+`.
 +
 [source,ts]
 ----
@@ -112,7 +110,6 @@ import { MyEditorComponent } from './editor.component';
 export class AppComponent {}
 ----
 
-+
 . Run the Angular development server
 +
 [source,sh]
@@ -120,13 +117,4 @@ export class AppComponent {}
 ng serve
 ----
 
-
-== Next Steps
-
-* For information on bundling, see: xref:introduction-to-bundling-tinymce.adoc[]
-* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
-* For information on customizing:
-** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference].
-** {productname}, see: xref:basic-setup.adoc[Basic setup].
-** The Angular application, see: https://angular.dev[the Angular documentation].
-* For a complete example, see: https://github.com/tinymce/tinymce-angular-integration-examples/tree/self-hosted-with-npm-premium-plugins[the Angular bundling example repository].
+include::partial$integrations/angular-other-resources.adoc[]
\ No newline at end of file
diff --git a/modules/ROOT/pages/angular-zip-bundle.adoc b/modules/ROOT/pages/angular-zip-bundle.adoc
new file mode 100644
index 0000000000..15136a6eb5
--- /dev/null
+++ b/modules/ROOT/pages/angular-zip-bundle.adoc
@@ -0,0 +1,119 @@
+= Bundling TinyMCE from .zip package in Angular
+:navtitle: Using a package manager with bundling
+:description: A guide on bundling TinyMCE from a .zip package in an Angular application.
+:keywords: integration, integrate, angular, bundle, vite, npm, tinymce
+:productSource: package-manager
+:packageName: @tinymce/tinymce-angular
+
+This guide shows how to integrate {productname} from a `.zip` package in an Angular application.
+
+== Prerequisites
+
+This procedure requires https://nodejs.org/[Node.js (and NPM)].
+
+== Procedure
+
+. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
++
+[source,sh]
+----
+npm install -g @angular/cli
+----
+
+. Create a new Angular project named `+tinymce-angular-demo+`.
++
+[source,sh]
+----
+ng new --defaults --skip-git tinymce-angular-demo
+----
+
+. Go to the new project directory and `+@tinymce/tinymce-angular+`.
++
+[source,sh]
+----
+cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
+----
+
+. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder.
+
+. Create `+src/app/editor.component.ts+` with the following:
++
+[source,ts]
+----
+import { Component } from '@angular/core';
+import { EditorComponent } from '@tinymce/tinymce-angular';
+
+// Ensure you import TinyMCE to register the global variable required by other components
+import '../tinymce/tinymce';
+// DOM model
+import '../tinymce/models/dom/model';
+// Theme
+import '../tinymce/themes/silver';
+// Toolbar icons
+import '../tinymce/icons/default';
+// Editor styles
+import '../tinymce/skins/ui/oxide/skin.js';
+// Content styles, including inline UI like fake cursors
+import '../tinymce/skins/content/default/content.js';
+import '../tinymce/skins/ui/oxide/content.js';
+
+// Import plugins
+import '../tinymce/plugins/advlist';
+import '../tinymce/plugins/autolink';
+import '../tinymce/plugins/link';
+import '../tinymce/plugins/image';
+import '../tinymce/plugins/lists';
+import '../tinymce/plugins/table';
+import '../tinymce/plugins/code';
+import '../tinymce/plugins/help';
+// Include resources that a plugin lazy-loads at the run-time
+import '../tinymce/plugins/help/js/i18n/keynav/en.js';
+import '../tinymce/plugins/wordcount';
+
+@Component({
+  selector: 'app-editor',
+  standalone: true,
+  imports: [EditorComponent],
+  template: `
+    <editor
+      [init]="init"
+      licenseKey="gpl"
+    />
+  `
+})
+export class MyEditorComponent {
+  init: EditorComponent['init'] = {
+    height: 500,
+    plugins: 'advlist autolink lists link image table code help wordcount',
+    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
+  };
+}
+----
+
+. Update `+src/app/app.component.ts+` to use `MyEditorComponent`.
++
+[source,ts]
+----
+import { Component } from '@angular/core';
+import { MyEditorComponent } from './editor.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [MyEditorComponent],
+  template: `
+    <h1>TinyMCE Angular Demo</h1>
+    <app-editor />
+  `
+})
+export class AppComponent {}
+----
+
+. Run the Angular development server
++
+[source,sh]
+----
+ng serve
+----
+
+include::partial$integrations/angular-other-resources.adoc[]
\ No newline at end of file
diff --git a/modules/ROOT/pages/angular-zip.adoc b/modules/ROOT/pages/angular-zip.adoc
index 8ae7873af5..ab5143020a 100644
--- a/modules/ROOT/pages/angular-zip.adoc
+++ b/modules/ROOT/pages/angular-zip.adoc
@@ -1,9 +1,9 @@
-= Using the {productname} from .zip package in Angular
+= Lazy-load {productname} from .zip package in Angular
 :navtitle: Using a .zip package
 :description: A guide on integrating a .zip version of TinyMCE into an Angular application.
 :keywords: integration, integrate, angular
 :productSource: zip
 
-This guide shows how to integrate {productname} from a .zip package in an Angular application.
+This guide shows how to self-host and lazy-load {productname} from a `.zip` package into an Angular application.
 
 include::partial$integrations/angular-quick-start.adoc[]
diff --git a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
index 6fd398e739..af6ca2542b 100644
--- a/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
+++ b/modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc
@@ -26,7 +26,7 @@ import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 ]
 ----
 
-. Then update `+angular.json+` to include {productname} and other components as `+assets+`. This will make them available to the application.
+. Then update `+angular.json+` to include {productname} and other components as `+assets+`. This will make them available to the application as static assets.
 +
 [source,json]
 ----
diff --git a/modules/ROOT/partials/integrations/angular-other-resources.adoc b/modules/ROOT/partials/integrations/angular-other-resources.adoc
new file mode 100644
index 0000000000..c26df0d094
--- /dev/null
+++ b/modules/ROOT/partials/integrations/angular-other-resources.adoc
@@ -0,0 +1,8 @@
+== Other resources
+
+* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
+* For guides on integrating {productname} premium plugins, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
+* For information on customizing:
+** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference].
+** {productname}, see: xref:basic-setup.adoc[Basic setup].
+** The Angular application, see: https://angular.dev[the Angular documentation].
\ No newline at end of file
diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc
index d31c82690e..ecad469418 100644
--- a/modules/ROOT/partials/integrations/angular-quick-start.adoc
+++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc
@@ -2,8 +2,6 @@
 
 The steps below use standalone components. If using Angular Modules, see xref:angular-modules[Angular Modules].
 
-For more examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
-
 == Prerequisites
 
 This procedure requires https://nodejs.org/[Node.js (and NPM)].
@@ -16,21 +14,21 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
 ----
 npm install -g @angular/cli
 ----
-+
+
 . Create a new Angular project named `+tinymce-angular-demo+` using default settings and without Git initialization.
 +
 [source,sh]
 ----
 ng new --defaults --skip-git tinymce-angular-demo
 ----
-+
+
 . Move into the project directory and install `+tinymce-angular+`.
 +
 [source,sh]
 ----
 cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
 ----
-+
+
 ifeval::["{productSource}" == "package-manager"]
 
 . Install the `+tinymce+`.
@@ -41,15 +39,6 @@ npm install tinymce
 ----
 +
 endif::[]
-ifeval::["{productSource}" != "package-manager"]
-
-. Install the `+tinymce-angular+` package.
-+
-[source,sh]
-----
-npm install @tinymce/tinymce-angular
-----
-endif::[]
 
 . Update the root component `+src/app/app.component.ts+` to import and use the `EditorComponent`.
 ifeval::["{productSource}" == "cloud"]
@@ -121,10 +110,4 @@ include::partial$integrations/angular-load-tinymce-independently.adoc[]
 ng serve
 ----
 
-== Next Steps
-
-* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
-* For information on customizing:
-** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference].
-** {productname}, see: xref:basic-setup.adoc[Basic setup].
-** The Angular application, see: https://angular.dev[the Angular documentation].
+include::partial$integrations/angular-other-resources.adoc[]
\ No newline at end of file