DOC-3329: Premium Plugins Installation and Bundling Documentation for NPM

modules/ROOT/nav.adoc

@@ -104,6 +104,7 @@
 *** xref:customize-ui.adoc[Customizing the UI]
 *** xref:creating-a-skin.adoc[Create a skin]
 *** xref:creating-an-icon-pack.adoc[Create an icon pack]
+*** xref:using-the-icon-pack-template.adoc[Using the icon pack template tool]
 ** Images Guide
 *** xref:upload-images.adoc[Image uploads]
 *** xref:php-upload-handler.adoc[PHP image upload handler]

modules/ROOT/pages/bundling-content-css.adoc

@@ -19,7 +19,7 @@ Example syntax for including the example content CSS in a bundle:
 |===
 |Module Syntax |Source |Example
 
-.2+|ES6+
+.2+|ES6+ (Webpack/Rollup)
 |npm
 a|
 [source, js]
@@ -34,6 +34,21 @@ a|
 import contentCSS from '../tinymce/skins/content/example/content.css';
 ----
 
+.2+|ES6+ (Vite)
+|npm
+a|
+[source, js]
+----
+import 'tinymce/skins/content/example/content.js';
+----
+
+|`.zip`
+a|
+[source, js]
+----
+import '../tinymce/skins/content/example/content.js';
+----
+
 .2+|Common JS
 |npm
 a|
@@ -49,6 +64,7 @@ a|
 const contentCSS = require('../tinymce/skins/content/example/content.css');
 ----
 |===
+
 IMPORTANT: The handling of content CSS files (such as `+content.css+` or `+content.min.css+`) varies between bundling tools. View the relevant guide for the required syntax at xref:introduction-to-bundling-tinymce.adoc[Bundling {productname} with a module loader].
 
 include::partial$module-loading/bundling-content-css-files.adoc[]

modules/ROOT/pages/bundling-icons.adoc

@@ -26,29 +26,43 @@ The following examples show how to bundle icon packs using different module synt
 |====
 |Module Syntax |Source |Example
 
-.2+|ES6+
-|npm
+.3+|ES6+
+|npm (community)
 a|
 [source, js]
 ----
 import 'tinymce/icons/material';
 ----
 
+|npm (premium)
+a|
+[source, js]
+----
+import 'tinymce-premium/icons/material';
+----
+
 |`.zip`
 a|
 [source, js]
 ----
 import '../tinymce/icons/material/icons';
 ----
 
-.2+|Common JS
-|npm
+.3+|Common JS
+|npm (community)
 a|
 [source, js]
 ----
 require('tinymce/icons/material');
 ----
 
+|npm (premium)
+a|
+[source, js]
+----
+require('tinymce-premium/icons/material');
+----
+
 |`.zip`
 a|
 [source, js]
@@ -57,6 +71,33 @@ require('../tinymce/icons/material/icons.js');
 ----
 |====
 
+[[premium-icon-packs-npm]]
+== Premium icon packs from `+tinymce-premium+` (NPM)
+
+The `+tinymce-premium+` NPM package ships all premium icon packs in `+tinymce-premium/icons/+`. Choose one of the following patterns depending on how {productname} is deployed:
+
+*Bundling (recommended for modern build tools)*
+
+* Import the required icon pack so the module bundler adds it to the application bundle. For example:
++
+[source,js]
+----
+import 'tinymce/icons/default';  // Always required
+import 'tinymce-premium/icons/material';
+// ... other TinyMCE imports
+----
+* After bundling, set `+icons: 'material'+` (or any imported icon pack) in the editor configuration.
+
+*Non-bundling with file layering*
+
+* When hosting directly from `+node_modules+`, copy `+node_modules/tinymce-premium/icons/+` into `+node_modules/tinymce/icons/+` as part of the build or deployment step (for example, in a `+postinstall+` script).
+* Once copied, premium icon packs live beside the core files, so setting `+icons+` works without extra configuration.
+
+*Non-bundling with `+icons_url+`*
+
+* Leave the premium icon packs in `+node_modules/tinymce-premium/icons/+` and configure xref:editor-icons.adoc#icons_url[`+icons_url+`] to point at the required icon pack file.
+* This approach avoids moving files and is useful when the `+node_modules+` directory is web-accessible (or when copying only the specific icon pack to a public folder).
+
 == Available icon packs
 
 include::partial$module-loading/bundling-icon-files.adoc[]

modules/ROOT/pages/bundling-localization.adoc

@@ -22,6 +22,8 @@ include::partial$misc/using-community-lang-packs.adoc[leveloffset=+1]
 include::partial$module-loading/bundling-ref-example.adoc[leveloffset=+1]
 :!editorcomponent:
 
+Premium language packs are available from ZIP downloads or the `+tinymce-premium+` NPM package. When using the NPM package, import language packs from `+tinymce-premium/langs/+` instead of `+tinymce/langs/+`.
+
 The following table shows examples of the syntax used to bundle the following example localization file:
 
 ....
@@ -33,13 +35,20 @@ The following table shows examples of the syntax used to bundle the following ex
 |Module Syntax |Source |Example
 
 .2+|ES6+
-|npm
+|npm (community)
 a|
 [source, js]
 ----
 import 'tinymce/langs/sv_SE';
 ----
 
+|npm (premium)
+a|
+[source, js]
+----
+import 'tinymce-premium/langs/sv_SE';
+----
+
 |`.zip`
 a|
 [source, js]
@@ -48,13 +57,20 @@ import '../tinymce/langs/sv_SE';
 ----
 
 .2+|Common JS
-|npm
+|npm (community)
 a|
 [source, js]
 ----
 require('tinymce/langs/sv_SE');
 ----
 
+|npm (premium)
+a|
+[source, js]
+----
+require('tinymce-premium/langs/sv_SE');
+----
+
 |`.zip`
 a|
 [source, js]
@@ -63,6 +79,11 @@ require('../tinymce/langs/sv_SE.js');
 ----
 |===
 
+[NOTE]
+====
+For complete information on using premium language packs from the NPM package, including non-bundling approaches, see: xref:ui-localization.adoc#premium-language-packs-npm[Providing premium language packs from `+tinymce-premium+`].
+====
+
 :forModuleLoaders: true
 include::partial$misc/ui-languages.adoc[leveloffset=+1]
 :forModuleLoaders: false

modules/ROOT/pages/bundling-plugins.adoc

@@ -3,51 +3,174 @@
 :description_short: Information on bundling plugins
 :description: Information on bundling TinyMCE plugins using module loading
 
+== Overview
+
+{productname} plugins can be bundled using module loaders such as Webpack, Rollup, or Vite. This guide covers how to include both community and premium plugins in your application bundle.
+
+{productname} includes both community and premium plugins:
+
+* **Community plugins**: Available with all {productname} installations
+* **Premium plugins**: Available with paid {productname} subscriptions via the `+tinymce-premium+` package
+
 :editorcomponent: plugin
 include::partial$module-loading/bundling-ref-example.adoc[]
 :!editorcomponent:
 
-[NOTE]
-If using {productname} 7.0.1 or earlier, please refer to link:https://www.tiny.cloud/docs/tinymce/6/bundling-plugins/[Bundling {productname} plugins using module loading] from the {productname} v6 documentation guide.
-
 include::partial$plugin-files/plugin-file-index.js.adoc[]
 
+== Bundling syntax examples
 
-Example syntax for including the example "<plugincode>" plugin in a bundle using `content.js`for bundling:
+The following examples show the syntax for including plugins in a bundle. The examples use a placeholder `+<plugincode>+` to represent any plugin name:
 
-[cols='1,1,4']
+[cols='1,2,3']
 |===
 |Module Syntax |Source |Example
 
-.2+|ES6+
-|npm
+.4+|ES6+
+|npm (community plugins)
 a|
 [source, js]
 ----
 import 'tinymce/plugins/<plugincode>';
 ----
 
-|`.zip`
+|npm (premium plugins)
+a|
+[source, js]
+----
+import 'tinymce-premium/plugins/<plugincode>';
+----
+
+|`.zip` (community plugins)
+a|
+[source, js]
+----
+import '<path_to_tinymce_zip>/plugins/<plugincode>';
+----
+
+|`.zip` (premium plugins)
 a|
 [source, js]
 ----
-import '../tinymce/plugins/<plugincode>';
+import '<path_to_tinymce_premium_zip>/plugins/<plugincode>';
 ----
 
-.2+|Common JS
-|npm
+.4+|Common JS
+|npm (community plugins)
 a|
 [source, js]
 ----
 require('tinymce/plugins/<plugincode>');
 ----
 
-|`.zip`
+|npm (premium plugins)
+a|
+[source, js]
+----
+require('tinymce-premium/plugins/<plugincode>');
+----
+
+|`.zip` (community plugins)
 a|
 [source, js]
 ----
-require('../tinymce/plugins/<plugincode>');
+require('<path_to_tinymce_zip>/plugins/<plugincode>');
+----
+
+|`.zip` (premium plugins)
+a|
+[source, js]
+----
+require('<path_to_tinymce_premium_zip>/plugins/<plugincode>');
 ----
 |===
 
+
+[[using-premium-plugins]]
+== Using premium plugins
+
+After installing the `+tinymce-premium+` package, you need to configure the plugins in your editor. There are two main approaches:
+
+[IMPORTANT]
+====
+*License Key Manager Requirement:*
+
+When using premium plugins with a commercial license, you must include the `+licensekeymanager+` plugin. The editor will not function properly without it. For more information, see: xref:license-key.adoc[License Key].
+
+*xref:bundling-plugins.adoc#bundling-recommended[When bundling]:*
+[source,js]
+----
+import 'tinymce-premium/plugins/licensekeymanager';
+----
+
+*xref:bundling-plugins.adoc#using-external-plugins[When using `+external_plugins+`]:*
+[source,js]
+----
+external_plugins: {
+  'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/plugin.min.js'
+}
+----
+====
+
+[[bundling-recommended]]
+=== Bundling (Recommended)
+
+For most modern applications, bundling premium plugins is recommended. This includes the plugin code directly in your application bundle.
+
+. Import the premium plugins you need:
++
+[source,js]
+----
+import 'tinymce-premium/plugins/advcode';
+import 'tinymce-premium/plugins/tinycomments';
+// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
+import 'tinymce-premium/plugins/licensekeymanager';
+----
+
+. Add the plugins to your editor configuration:
++
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  license_key: 'T8LK:...', // Your commercial license key
+  plugins: 'advcode tinycomments',
+  // ... other configuration
+});
+----
+
+For complete bundling examples, see the <<premium-plugins,Premium plugins>> and <<community-plugins,Community plugins>> sections below.
+
+[[using-external-plugins]]
+=== Using external_plugins (Non-bundling)
+
+When bundling is not available or you want to lazy-load plugins, use the `+external_plugins+` option:
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  license_key: 'T8LK:...', // Your commercial license key
+  external_plugins: {
+    'advcode': '<path_to_premium_plugins>/advcode/plugin.min.js',
+    'tinycomments': '<path_to_premium_plugins>/tinycomments/plugin.min.js',
+    // Always include the licensekeymanager plugin when using premium plugins with a commercial license.
+    'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/plugin.min.js'
+  },
+  plugins: 'advcode tinycomments',
+  // ... other configuration
+});
+----
+
+[NOTE]
+====
+The `+external_plugins+` option supports three URL formats:
+
+* Absolute URLs (e.g., `+https://cdn.example.com/...`)
+* Relative to web-server root (e.g., `+/node_modules/...`)
+* Relative to {productname} `+base_url+` (e.g., `+../../node_modules/...`)
+
+For more information, see: xref:editor-important-options.adoc#external_plugins[`+external_plugins+` configuration option].
+====
+
 include::partial$module-loading/bundling-plugin-files.adoc[]