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 {cloudname}, dependencies and additional resources are automatically loaded. The information below applies to self-hosted installations using NPM or ZIP packages. All examples in this guide use NPM package import paths.
+====
+
+== 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 recommended 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. For a full list of plugin dependencies, see each plugin's documentation page.
+
+== 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 skin CSS file (`+content.css+` or `+content.js+`)
+
+[NOTE]
+====
+Importing the `+skin.js+` and `+content.js+` files is an alternative way to load skin styles besides CSS imports. For bundlers like Webpack and Browserify that require additional setup to 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[]