DOC-3329: Update bundling guides to reference imports for help plugin and keynav/en explicitly. Include bundling-plugin-resources examples.

Author: kemister85

modules/ROOT/pages/bundling-plugins.adoc

@@ -85,7 +85,6 @@ require('<path_to_tinymce_premium_zip>/plugins/<plugincode>');
 ----
 |===
 
-
 [[using-premium-plugins]]
 == Using premium plugins
 
@@ -173,4 +172,6 @@ The `+external_plugins+` option supports three URL formats:
 For more information, see: xref:editor-important-options.adoc#external_plugins[`+external_plugins+` configuration option].
 ====
 
-include::partial$module-loading/bundling-plugin-files.adoc[]
+include::partial$module-loading/bundling-plugin-files.adoc[]
+
+include::partial$module-loading/bundling-plugin-resources.adoc[]

modules/ROOT/partials/module-loading/bundling-browserify-cjs-npm_editor.adoc

@@ -29,6 +29,8 @@ require('tinymce/plugins/emoticons/js/emojis');
 require('tinymce/plugins/link');
 require('tinymce/plugins/lists');
 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');
@@ -46,7 +48,7 @@ exports.render = () => {
   tinymce.init({
     selector: 'textarea#editor',
     /* All plugins need to be imported and added to the plugins option. */
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,

modules/ROOT/partials/module-loading/bundling-browserify-cjs-zip_editor.adoc

@@ -29,6 +29,8 @@ require('../tinymce/js/tinymce/plugins/emoticons/js/emojis');
 require('../tinymce/js/tinymce/plugins/link');
 require('../tinymce/js/tinymce/plugins/lists');
 require('../tinymce/js/tinymce/plugins/table');
+require('../tinymce/js/tinymce/plugins/help');
+require('../tinymce/js/tinymce/plugins/help/js/i18n/keynav/en');
 
 /* Import premium plugins */
 /* From NPM package (recommended) */
@@ -48,7 +50,7 @@ exports.render = () => {
   tinymce.init({
     selector: 'textarea#editor',
     /* All plugins need to be imported and added to the plugins option. */
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,

modules/ROOT/partials/module-loading/bundling-plugin-resources.adoc

@@ -0,0 +1,140 @@
+[[plugin-resources]]
+== Additional plugin resources
+
+[IMPORTANT]
+====
+When bundling {productname} with module loaders (Webpack, Vite, Rollup), some plugins require additional resource files (CSS, JS, or language files) to be explicitly imported. These files are not automatically resolved by the bundler and must be imported manually.
+
+Key points:
+
+* Core plugin resources typically use relative paths without file extensions
+* Premium plugin resources (from `tinymce-premium`) MUST include the `.js` or `.css` file extension in the import path
+* Language files are typically located in `plugins/<plugincode>/langs/`
+* CSS files may be in `plugins/<plugincode>/css/` or at the plugin root
+* English is the default language, so `en.js` language files don't exist (plugins fall back to English)
+====
+
+=== Common plugin resource requirements
+
+The following plugins require additional resource files when bundling:
+
+[[help-plugin-resources]]
+==== Help plugin (`+help+`)
+
+The Help plugin requires the keyboard navigation language file for the keyboard navigation tab to function properly:
+
+[cols='1,1,4']
+|===
+|Module Syntax |Source |Example
+
+.2+|ES6+
+|npm
+a|
+[source, js]
+----
+import 'tinymce/plugins/help/js/i18n/keynav/en';
+----
+
+|`.zip`
+a|
+[source, js]
+----
+import '../tinymce/plugins/help/js/i18n/keynav/en';
+----
+
+.2+|Common JS
+|npm
+a|
+[source, js]
+----
+require('tinymce/plugins/help/js/i18n/keynav/en');
+----
+
+|`.zip`
+a|
+[source, js]
+----
+require('../tinymce/plugins/help/js/i18n/keynav/en');
+----
+|===
+
+[[pageembed-plugin-resources]]
+==== Page Embed plugin (`+pageembed+`)
+
+The Page Embed plugin requires a CSS file for proper styling:
+
+[cols='1,1,4']
+|===
+|Module Syntax |Source |Example
+
+.2+|ES6+
+|npm
+a|
+[source, js]
+----
+import 'tinymce-premium/plugins/pageembed/css/empa30.css';
+----
+
+|`.zip`
+a|
+[source, js]
+----
+import '../plugins/pageembed/css/empa30.css';
+----
+
+.2+|Common JS
+|npm
+a|
+[source, js]
+----
+require('tinymce-premium/plugins/pageembed/css/empa30.css');
+----
+
+|`.zip`
+a|
+[source, js]
+----
+require('../plugins/pageembed/css/empa30.css');
+----
+|===
+
+[[emoticons-plugin-resources]]
+==== Emoticons plugin (`+emoticons+`)
+
+The xref:emoticons.adoc[Emoticons plugin] requires an emoji database file. By default, it uses `+js/emojis.js+`, but you can also use `+js/emojiimages.js+` by configuring the xref:emoticons.adoc#emoticons_database[`+emoticons_database+`] option.
+
+[cols='1,1,4']
+|===
+|Module Syntax |Source |Example
+
+.2+|ES6+
+|npm
+a|
+[source, js]
+----
+import 'tinymce/plugins/emoticons/js/emojis';
+----
+
+|`.zip`
+a|
+[source, js]
+----
+import '../tinymce/plugins/emoticons/js/emojis';
+----
+
+.2+|Common JS
+|npm
+a|
+[source, js]
+----
+require('tinymce/plugins/emoticons/js/emojis');
+----
+
+|`.zip`
+a|
+[source, js]
+----
+require('../tinymce/plugins/emoticons/js/emojis');
+----
+|===
+

modules/ROOT/partials/module-loading/bundling-rollup-es6-npm_editor.adoc

@@ -27,6 +27,8 @@ import 'tinymce/plugins/emoticons/js/emojis';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/table';
+import 'tinymce/plugins/help';
+import 'tinymce/plugins/help/js/i18n/keynav/en';
 
 include::partial$integrations/premium-plugins-bundling.adoc[]
 
@@ -40,7 +42,7 @@ import contentCss from 'tinymce/skins/content/default/content.css';
 export function render () {
   tinymce.init({
     selector: 'textarea#editor',
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,

modules/ROOT/partials/module-loading/bundling-rollup-es6-zip_editor.adoc

@@ -27,6 +27,8 @@ import '../tinymce/js/tinymce/plugins/emoticons/js/emojis';
 import '../tinymce/js/tinymce/plugins/link';
 import '../tinymce/js/tinymce/plugins/lists';
 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 */
@@ -42,7 +44,7 @@ import contentCss from '../tinymce/js/tinymce/skins/content/default/content.css'
 export function render () {
   tinymce.init({
     selector: 'textarea#editor',
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,

modules/ROOT/partials/module-loading/bundling-vite-es6-npm_editor.adoc

@@ -29,6 +29,8 @@ import 'tinymce/plugins/emoticons/js/emojis';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/table';
+import 'tinymce/plugins/help';
+import 'tinymce/plugins/help/js/i18n/keynav/en';
 
 include::partial$integrations/premium-plugins-bundling.adoc[]
 
@@ -43,7 +45,7 @@ export function render () {
   tinymce.init({
     selector: 'textarea#editor',
     license_key: 'gpl',
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin_url: 'default',
     content_css: 'default',

modules/ROOT/partials/module-loading/bundling-webpack-cjs-npm_editor.adoc

@@ -27,6 +27,8 @@ require('tinymce/plugins/emoticons/js/emojis');
 require('tinymce/plugins/link');
 require('tinymce/plugins/lists');
 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');
@@ -44,7 +46,7 @@ exports.render = () => {
   tinymce.init({
     selector: 'textarea#editor',
     /* All plugins need to be imported and added to the plugins option. */
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,

modules/ROOT/partials/module-loading/bundling-webpack-cjs-zip_editor.adoc

@@ -27,6 +27,8 @@ require('../tinymce/js/tinymce/plugins/emoticons/js/emojis');
 require('../tinymce/js/tinymce/plugins/link');
 require('../tinymce/js/tinymce/plugins/lists');
 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 */
@@ -43,7 +45,7 @@ exports.render = () => {
   tinymce.init({
     selector: 'textarea#editor',
     /* All plugins need to be imported and added to the plugins option. */
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,

modules/ROOT/partials/module-loading/bundling-webpack-es6-npm_editor.adoc

@@ -27,6 +27,8 @@ import 'tinymce/plugins/emoticons/js/emojis';
 import 'tinymce/plugins/link';
 import 'tinymce/plugins/lists';
 import 'tinymce/plugins/table';
+import 'tinymce/plugins/help';
+import 'tinymce/plugins/help/js/i18n/keynav/en';
 
 include::partial$integrations/premium-plugins-bundling.adoc[]
 
@@ -40,7 +42,7 @@ import contentCss from 'tinymce/skins/content/default/content.css';
 export function render () {
   tinymce.init({
     selector: 'textarea#editor',
-    plugins: 'advlist code emoticons link lists table',
+    plugins: 'advlist code emoticons link lists table help',
     toolbar: 'bold italic | bullist numlist | link emoticons',
     skin: false,
     content_css: false,