DOC-3367: Add new bundling guide overview page.

modules/ROOT/nav.adoc

@@ -149,6 +149,7 @@
 *** xref:annotations.adoc[Using the Annotations API]
 ** Bundling {productname}
 *** xref:introduction-to-bundling-tinymce.adoc[Introduction]
+*** xref:bundling-guide.adoc[Bundling overview]
 *** Webpack
 **** xref:webpack-es6-npm.adoc[ES6 and npm]
 **** xref:webpack-cjs-npm.adoc[CommonJS and npm]

modules/ROOT/pages/a11ychecker.adoc

@@ -33,6 +33,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 [[accessibility-rules]]
 == Accessibility Rules
 

modules/ROOT/pages/accordion.adoc

@@ -30,6 +30,8 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
 == Options
 
 The following configuration options affect the behavior of the {pluginname} plugin.

modules/ROOT/pages/advanced-templates.adoc

@@ -144,6 +144,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 NOTE: The undefined options in the above example must be defined. See the xref:options[Options] below for specific details on each function.
 
 

modules/ROOT/pages/advanced-typography.adoc

@@ -79,6 +79,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Options
 
 The following configuration options affect the behavior of the {pluginname} plugin.

modules/ROOT/pages/advcode.adoc

@@ -38,6 +38,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Enable full-screen mode
 
 To enable the full-screen mode button in the {pluginname}, configure the plugin to run in inline mode and include the fullscreen plugin:

modules/ROOT/pages/advlist.adoc

@@ -22,6 +22,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Interactive demo
 
 liveDemo::advlist[]

modules/ROOT/pages/advtable.adoc

@@ -32,6 +32,7 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
 
 == Sorting table rows and columns
 

modules/ROOT/pages/ai.adoc

@@ -44,6 +44,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Using a proxy server with {pluginname}
 
 NOTE: As per OpenAI’s https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety[best practices for API key safety], deployment of an API key in a client-side environment is specifically not recommended.

modules/ROOT/pages/anchor.adoc

@@ -24,6 +24,8 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
 == Options
 
 include::partial$configuration/allow_html_in_named_anchor.adoc[leveloffset=+1]

modules/ROOT/pages/autocorrect.adoc

@@ -27,6 +27,8 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
 [[usage-notes]]
 == Usage notes
 

modules/ROOT/pages/autolink.adoc

@@ -20,6 +20,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Options
 
 include::partial$configuration/link_default_target.adoc[leveloffset=+1]

modules/ROOT/pages/autoresize.adoc

@@ -22,6 +22,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == How it works
 
 The Autoresize plugin monitors content changes and automatically adjusts the editor height to accommodate the content. When enabled:

modules/ROOT/pages/autosave.adoc

@@ -26,6 +26,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Options
 
 These settings affect the execution of the `+autosave+` plugin. The settings described here will affect the interval, duration and behavior of locally stored drafts of the current editor instance.

modules/ROOT/pages/bundling-guide.adoc

@@ -0,0 +1,176 @@
+= Bundling {productname} - Overview
+:navtitle: Bundling overview
+:description_short: Overview of bundling TinyMCE with module bundlers
+:description: Overview of bundling TinyMCE with module bundlers including required imports, plugins, and resources
+:keywords: bundling, webpack, vite, rollup, modules, imports, es6, commonjs
+
+This guide provides an overview of bundling {productname} with module bundlers such as Webpack, Vite, Rollup, or Browserify. For bundler-specific setup instructions, see xref:introduction-to-bundling-tinymce.adoc[Introduction to bundling {productname}].
+
+[NOTE]
+====
+When using TinyMCE Cloud, dependencies and additional resources are automatically loaded. The information below applies to self-hosted installations using NPM or ZIP packages.
+====
+
+== Module syntax support
+
+{productname} supports both ES6 modules and CommonJS modules:
+
+* **ES6 modules**: Use `+import+` statements (shown in all documentation examples)
+* **CommonJS modules**: Use `+require()+` statements
+
+Both syntaxes are supported, but this documentation uses ES6 module syntax in all examples.
+
+== Required imports
+
+include::partial$module-loading/bundling-required-components.adoc[]
+
+=== Example: Basic required imports
+
+[source,js]
+----
+/* Import TinyMCE */
+import tinymce from 'tinymce';
+
+/* Default icons are required */
+import 'tinymce/icons/default';
+
+/* Required TinyMCE components */
+import 'tinymce/themes/silver';
+import 'tinymce/models/dom';
+
+/* Import a skin (oxide is the default) */
+import 'tinymce/skins/ui/oxide/skin.js';
+import 'tinymce/skins/ui/oxide/content.js';
+
+/* Content CSS for editor content styling */
+import 'tinymce/skins/content/default/content.js';
+----
+
+For more information on:
+
+* Icons, see xref:bundling-icons.adoc[Bundling icons]
+* Themes, see xref:bundling-themes.adoc[Bundling themes]
+* Models, see xref:bundling-models.adoc[Bundling models]
+* Skins, see xref:bundling-skins.adoc[Bundling skins]
+* Content CSS, see xref:bundling-content-css.adoc[Bundling content CSS]
+
+== Importing plugins
+
+Most plugins can be imported directly using their plugin code. The import path depends on whether the plugin is a community or premium plugin:
+
+=== Community plugins
+
+[source,js]
+----
+import 'tinymce/plugins/<plugincode>';
+----
+
+=== Premium plugins
+
+[source,js]
+----
+import 'tinymce-premium/plugins/<plugincode>';
+----
+
+[IMPORTANT]
+====
+When using premium plugins with a commercial license, you must include the `+licensekeymanager+` plugin:
+
+[source,js]
+----
+import 'tinymce-premium/plugins/licensekeymanager';
+----
+
+For more information, see xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
+====
+
+For detailed information on bundling plugins, see xref:bundling-plugins.adoc[Bundling plugins].
+
+== Plugin gotchas
+
+Some plugins require additional resource files (JS, CSS, or language files) to function properly. These must be explicitly imported when bundling:
+
+=== Plugins requiring additional resources
+
+* **Emoticons**: Requires an emoji database file (`+js/emojis.js+`)
+* **Help**: Requires a keyboard navigation language file (`+js/i18n/keynav/<lang>.js+`)
+* **Autocorrect**: Requires a word list file (`+js/en.js+`)
+* **Uploadcare**: Requires a webcomponent file (`+js/uc-video.js+`)
+
+For specific import examples, see xref:bundling-plugins.adoc#plugin-resources[Additional plugin resources].
+
+=== Plugin dependencies
+
+Some plugins depend on other plugins. For example:
+
+* The `+advtable+` plugin requires the `+table+` plugin
+
+Always import dependent plugins before the plugin that requires them.
+
+== CSS files
+
+Some plugins require additional CSS files. Plugin CSS files are included automatically when importing plugins via their JS file.
+
+When using skins, you must import both:
+
+* The skin CSS file (`+skin.css+` or `+skin.js+`)
+* The content UI CSS file (`+content.css+` or `+content.js+`)
+
+[NOTE]
+====
+Importing the `+skin.js+` and `+content.js+` files is an alternative way to load skin styles. For bundlers like Webpack and Browserify that support CSS imports, the CSS examples in xref:bundling-skins.adoc[Bundling skins] remain valid.
+====
+
+For more information, see xref:bundling-skins.adoc[Bundling skins].
+
+== Language files
+
+Language files are optional and used for localizing the {productname} UI and plugin interfaces.
+
+=== Core UI language files
+
+For community packages:
+
+[source,js]
+----
+import 'tinymce/langs/<language>.js';
+----
+
+For premium packages:
+
+[source,js]
+----
+import 'tinymce-premium/langs/<language>.js';
+----
+
+=== Plugin language files
+
+Plugin language files are separate from the main UI language files. The editor's `+language+` option must be set to the desired language for the plugin's language file to take effect.
+
+[source,js]
+----
+// Community plugin language file
+import 'tinymce/plugins/<plugincode>/langs/<language>.js';
+
+// Premium plugin language file
+import 'tinymce-premium/plugins/<plugincode>/langs/<language>.js';
+----
+
+[NOTE]
+====
+* US English is the default language, so the language packs do not include `+en.js+` language files (see xref:ui-localization.adoc#language[`+language+` option]). Note that the Help and Autocorrect plugins have their own `+en.js+` files.
+* Examples include the `.js` extension for clarity; most bundlers can resolve file extensions automatically.
+====
+
+For more information, see xref:bundling-localization.adoc[UI localizations].
+
+== Next steps
+
+* xref:introduction-to-bundling-tinymce.adoc[Introduction to bundling {productname}] - Bundler-specific guides
+* xref:bundling-themes.adoc[Bundling themes] - Theme configuration and customization
+* xref:bundling-models.adoc[Bundling models] - Model configuration
+* xref:bundling-plugins.adoc[Bundling plugins] - Detailed plugin bundling information
+* xref:bundling-skins.adoc[Bundling skins] - Skin configuration and customization
+* xref:bundling-icons.adoc[Bundling icons] - Icon pack configuration
+* xref:bundling-content-css.adoc[Content CSS] - Content styling configuration
+* xref:bundling-localization.adoc[UI localizations] - Language file configuration

modules/ROOT/pages/casechange.adoc

@@ -16,6 +16,8 @@ liveDemo::casechange[]
 
 // include::partial$misc/purchase-premium-plugins.adoc[]
 
+include::partial$misc/bundling-guide-link.adoc[]
+
 == Changing the case of selected text
 
 Perform the following steps to change the case of selected text in a document to lowercase, UPPERCASE, or Title Case:

modules/ROOT/pages/charmap.adoc

@@ -18,6 +18,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Options
 
 The default map of unicode characters can be overridden or extended through the options below.

modules/ROOT/pages/checklist.adoc

@@ -48,6 +48,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 NOTE: The *Checklist* plugin has to be used together with the xref:lists.adoc[Lists] plugin to work.
 
 == CSS

modules/ROOT/pages/code.adoc

@@ -18,6 +18,8 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
 include::partial$misc/code-dialog-and-selection-state.adoc[]
 
 include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]

modules/ROOT/pages/codesample.adoc

@@ -18,6 +18,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 By default, `+codesample+` uses `+http://prismjs.com/+` to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.
 
 NOTE: Prism.js and prism.css need to be added to a page for syntax highlighting to work. See the instructions below to learn how to do this.

modules/ROOT/pages/directionality.adoc

@@ -19,6 +19,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
 
 == Commands

modules/ROOT/pages/editimage.adoc

@@ -40,6 +40,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 == Self-hosted Installation
 
 To enable the {productname} Image Editing plugin:

modules/ROOT/pages/emoticons.adoc

@@ -22,6 +22,8 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
 == Browser emoji support
 
 By default, the emoticon plugin inserts Unicode character codes, such as `+\ud83d\ude03+` for the smiley emoji. How emoji are rendered is dependent on the web browser and operating system of the user. As a result of this, some emoji may be rendered in black and white, or may not render. To ensure emoji render consistently across browsers and operating systems, {companyname} recommends adding an emoji-compatible web font to the default font-family using xref:add-css-options.adoc#content_css[`+content_css+`].

modules/ROOT/pages/exportpdf.adoc

@@ -39,6 +39,9 @@ tinymce.init({
 });
 ----
 
+include::partial$misc/bundling-guide-link.adoc[]
+
+
 For more infomation on the exportpdf_token_provider option, see xref:exportpdf.adoc#exportpdf-token-provider[exportpdf_token_provider].
 
 include::partial$misc/admon-jwt-authentication-requirements.adoc[]