DOC-3329: Add key details to icons, skins, lang files for how to use tinymce-premium/file with examples ect.

Author: kemister85

modules/ROOT/pages/bundling-icons.adoc

@@ -27,13 +27,20 @@ The following examples show how to bundle icon packs using different module synt
 |Module Syntax |Source |Example
 
 .2+|ES6+
-|npm
+|npm (community)
 a|
 [source, js]
 ----
 import 'tinymce/icons/material';
 ----
 
+|npm (premium)
+a|
+[source, js]
+----
+import 'tinymce-premium/icons/material';
+----
+
 |`.zip`
 a|
 [source, js]
@@ -42,13 +49,20 @@ import '../tinymce/icons/material/icons';
 ----
 
 .2+|Common JS
-|npm
+|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-skins.adoc

@@ -66,3 +66,32 @@ const contentUiSkinInlineCss = require('../tinymce/skins/ui/example/content.inli
 ////
 
 include::partial$module-loading/bundling-skin-files.adoc[]
+
+[[premium-skins-npm]]
+== Premium skins from `+tinymce-premium+` (NPM)
+
+The `+tinymce-premium+` NPM package ships all premium skins in `+tinymce-premium/skins/+`. Choose one of the following patterns depending on how {productname} is deployed:
+
+*Bundling (recommended for modern build tools)*
+
+* Import the required skin files so the module bundler adds them to the application bundle. For example:
++
+[source,js]
+----
+import 'tinymce-premium/skins/ui/oxide/skin.css';
+import contentUiSkinCss from 'tinymce-premium/skins/ui/oxide/content.css';
+// ... other TinyMCE imports
+----
+* After bundling, set `+skin: false+` and `+content_css: false+` in the editor configuration, then use `+content_style+` to inject the bundled CSS.
+
+*Non-bundling with file layering*
+
+* When hosting directly from `+node_modules+`, copy `+node_modules/tinymce-premium/skins/+` into `+node_modules/tinymce/skins/+` as part of the build or deployment step (for example, in a `+postinstall+` script).
+* Once copied, premium skins live beside the core files, so setting `+skin+` works without extra configuration.
+
+*Non-bundling with `+skin_url+`*
+
+* Leave the premium skins in `+node_modules/tinymce-premium/skins/+` and configure xref:editor-skin.adoc#skin_url[`+skin_url+`] to point at the required skin directory.
+* This approach avoids moving files and is useful when the `+node_modules+` directory is web-accessible (or when copying only the specific skin to a public folder).
+
+Document the chosen approach in deployment scripts to keep upgrades predictable.

modules/ROOT/pages/npm-projects.adoc

@@ -60,13 +60,9 @@ Install the `+tinymce-premium+` package using npm:
 npm install tinymce-premium@^8.3
 ----
 
-include::partial$install/npm-premium-version-note.adoc[]
-
 [NOTE]
 ====
-* For {productname} 8.3, the `+tinymce-premium+` package is only published to the NPM registry. Other package manager registries (Packagist/Composer, NuGet etc.) may be considered for future releases.
-* Yarn can also install packages from the NPM registry, so `+yarn add tinymce-premium@^8.3+` will work.
-* The `+tinymce-premium+` package version aligns with the `+tinymce+` package version. **Always** use compatible versions of both packages (e.g., both at 8.3.0 or later).
+The `+tinymce-premium+` package is available for {productname} 8.3 onwards and is currently only published to the NPM registry (Yarn can also install from NPM). The package version must align with the `+tinymce+` package version—always use compatible versions of both packages (e.g., both at 8.3.0 or later).
 ====
 
 === Package contents

modules/ROOT/partials/configuration/icons_url.adoc

@@ -111,4 +111,23 @@ tinymce.init({
 });
 ----
 
+=== Example: loading premium icons from `+tinymce-premium+` (NPM)
+
+When installing the `+tinymce-premium+` NPM package, premium icon packs are stored in `+node_modules/tinymce-premium/icons/+`. Configure `+icons_url+` to point at the desired icon pack file. For example:
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  icons_url: '/node_modules/tinymce-premium/icons/material/icons.js',
+  icons: 'material'
+});
+----
+
+[NOTE]
+====
+* Ensure the `+node_modules+` directory (or a copy of the icon pack file) is accessible to the browser. Many projects copy the required icon pack into a public folder (such as `+/public/icons/material/icons.js+`) during their build step and update `+icons_url+` accordingly.
+* Combine this with the approaches listed in xref:bundling-icons.adoc#premium-icon-packs-npm[Premium icon packs from `+tinymce-premium+`] to match the deployment strategy.
+====
+
 endif::[]

modules/ROOT/partials/configuration/language.adoc

@@ -32,8 +32,40 @@ tinymce.init({
 [[using-the-premium-language-packs]]
 === Using the premium language packs
 
-The following professionally localized language packs are provided to paid {cloudname} and premium self-hosted deployments. To use these language packs, set the `+language+` option to the corresponding language code in RFC5646 format. No additional configuration is required.
+The following professionally localized language packs are provided to paid {cloudname} and premium self-hosted deployments. To use these language packs, set the `+language+` option to the corresponding language code in RFC5646 format.
+
+For {cloudname} and ZIP-based deployments, no additional configuration is required. When using the `+tinymce-premium+` NPM package, see xref:ui-localization.adoc#premium-language-packs-npm[Providing premium language packs from `+tinymce-premium+`] for configuration options.
+
+The following table lists the available premium language packs:
 
 include::partial$misc/ui-languages.adoc[leveloffset=+2]
 
+[[premium-language-packs-npm]]
+==== Providing premium language packs from `+tinymce-premium+` (NPM)
+
+The `+tinymce-premium+` NPM package ships all paid translations in `+tinymce-premium/langs/+`. Choose one of the following patterns depending on how {productname} is deployed:
+
+*Bundling (recommended for modern build tools)*
+
+* Import the required language files so the module bundler adds them to the application bundle. For example:
++
+[source,js]
+----
+import 'tinymce/langs/en_GB';
+import 'tinymce-premium/langs/fi';
+// ... other TinyMCE imports
+----
+* After bundling, set `+language: 'fi'+` (or any imported locale) and no extra HTTP requests are required.
+
+*Non-bundling with file layering*
+
+* When hosting directly from `+node_modules+`, copy `+node_modules/tinymce-premium/langs/+` into `+node_modules/tinymce/langs/+` as part of the build or deployment step (for example, in a `+postinstall+` script).
+* Once copied, premium language packs live beside the core files, so setting `+language+` works without extra configuration.
+
+*Non-bundling with `+language_url+`*
+
+* Leave the premium packs in `+node_modules/tinymce-premium/langs/+` and configure xref:ui-localization.adoc#language_url[`+language_url+`] to point at the required file.
+* This approach avoids moving files and is useful when the `+node_modules+` directory is web-accessible (or when copying only the specific file to a public folder).
+
+
 include::partial$misc/using-community-lang-packs.adoc[leveloffset=+1]

modules/ROOT/partials/configuration/language_url.adoc

@@ -16,9 +16,29 @@ Also, the `+language+` option must also be set and must be set to the name of th
 ----
 tinymce.init({
   selector: 'textarea', // change this value according to your HTML
-  language_url: '/path/to/language/pack/fi.js', // path from the root of your web application — / — to the language pack(s)
+  language_url: '/<path_to_language_pack>/fi.js', // path from the root of your web application — / — to the language pack(s)
   language: 'fi'  // the name of the language pack file
 });
 ----
 
 You can find and download languages link:{gettiny}/language-packages/[here].
+
+=== Example: loading premium languages from `+tinymce-premium+` (NPM)
+
+When installing the `+tinymce-premium+` NPM package, each paid translation is stored in `+node_modules/tinymce-premium/langs/+`. Configure `+language_url+` to point at the desired file.
+
+.Example
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  language_url: '/<path_to_tinymce-premium>/langs/pt_BR.js',
+  language: 'pt-BR'
+});
+----
+
+[NOTE]
+====
+* Ensure the `+node_modules+` directory (or a copy of the language file) is accessible to the browser. Many projects copy the required file into a public folder (such as `+/public/langs/pt_BR.js+`) during their build step and update `+language_url+` accordingly.
+* Combine this with the approaches listed in xref:ui-localization.adoc#premium-language-packs-npm[Providing premium language packs from `+tinymce-premium+`] to match the deployment strategy.
+====

modules/ROOT/partials/configuration/skin_url.adoc

@@ -14,3 +14,22 @@ tinymce.init({
   skin_url: '/css/my{prodnamecode}skin'
 });
 ----
+
+=== Example: loading premium skins from `+tinymce-premium+` (NPM)
+
+When installing the `+tinymce-premium+` NPM package, premium skins are stored in `+node_modules/tinymce-premium/skins/+`. Configure `+skin_url+` to point at the desired skin directory. For example:
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  skin_url: '/node_modules/tinymce-premium/skins/ui/oxide',
+  skin: 'oxide'
+});
+----
+
+[NOTE]
+====
+* Ensure the `+node_modules+` directory (or a copy of the skin directory) is accessible to the browser. Many projects copy the required skin into a public folder (such as `+/public/skins/ui/oxide+`) during their build step and update `+skin_url+` accordingly.
+* Combine this with the approaches listed in xref:bundling-skins.adoc#premium-skins-npm[Premium skins from `+tinymce-premium+`] to match the deployment strategy.
+====

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

@@ -38,8 +38,7 @@ ifeval::["{productSource}" == "package-manager"]
 npm install tinymce @tinymce/tinymce-angular
 ----
 +
-include::partial$integrations/premium-plugins-install-step.adoc[]
-
+include::partial$integrations/premium-plugins-install-step-link.adoc[]
 endif::[]
 ifeval::["{productSource}" != "package-manager"]
 . Install the `+tinymce-angular+` package.

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

@@ -29,7 +29,7 @@ ifeval::["{productSource}" == "package-manager"]
 
 . To use the self-hosted version of `{productname}`, install the `{productname}` package from the Command Palette.
 +
-include::partial$integrations/premium-plugins-install-step-blazor.adoc[]
+include::partial$integrations/premium-plugins-install-step-link.adoc[]
 endif::[]
 
 [[using-visual-studio]]
@@ -105,8 +105,7 @@ ifeval::["{productSource}" == "package-manager"]
 dotnet add package TinyMCE
 ----
 
-include::partial$integrations/premium-plugins-install-step-blazor.adoc[]
-
+include::partial$integrations/premium-plugins-install-step-link.adoc[]
 endif::[]
 
 . Test the application using the .NET development server.