DOC-2228: Updates new bundling with js feature, additional copy edits to bundling with es6 vite documentation. (#3020)

* DOC-2228: Updates to bundling with js,  to bundling with es6+vite.

* DOC-2228: add changelog entry.

* DOC-2228: update js code blocks for various files.

* DOC-2228: add example 2 to bundling-plugins.adoc
update bundling-plugins-that-cant-bundle.adoc message.

* DOC-2228: Various updates including..
removal of example 1 from bundling-plugins.adoc
condensing of css and js to css or bundled css

* Update bundling-plugins.adoc

Co-authored-by: Hamza Benkhaldoun <[email protected]>

* DOC-2228: update admon-building-plugin-langs.adoc to include links.

---------

Co-authored-by: Hamza Benkhaldoun <[email protected]>

Author: kemister85

changelog.md

@@ -6,6 +6,7 @@ The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/
 
 ### Unreleased
 
+- DOC-2228: Updates new bundling with `js` feature, `additional` copy edits to bundling with es6 vite documentation.
 - DOC-2215: add new feature `mce-clipboard` to 6.8.1 release project for AdvTemplate.
 - DOC-2216: add new single `js` bundling feature example for `Bundling an npm version of TinyMCE with ES6 and Vite`.
 - DOC-2202: add new `bespoke` button text updates to `events.adoc` file.

modules/ROOT/pages/bundling-plugins.adoc

@@ -11,12 +11,13 @@ The following table shows examples of the syntax used to bundle the following pl
 
 Required files for an example plugin:
 
-....
-./plugins/example/content.css
+[source, js]
+----
+./plugins/example/content.js // or './plugins/example/content_css.js'
 ./plugins/example/plugin.js
-....
+----
 
-Example syntax for including the example "plugin" in a bundle:
+Example syntax for including the example "plugin" in a bundle using `content.js` or `content_css.js` files for bundling:
 
 [cols='1,1,4']
 |===
@@ -27,15 +28,17 @@ Example syntax for including the example "plugin" in a bundle:
 a|
 [source, js]
 ----
-import pluginCss from 'tinymce/plugins/example/content.css';
+import pluginCss from 'tinymce/plugins/example/content.js';
+//import pluginCss from 'tinymce/plugins/example/content_css.js';
 import 'tinymce/plugins/example';
 ----
 
 |`.zip`
 a|
 [source, js]
 ----
-import pluginCss from '../tinymce/plugins/example/content.css';
+import '../tinymce/plugins/example/content.js';
+//import '../tinymce/plugins/example/content_css.js';
 import '../tinymce/plugins/example/plugin';
 ----
 
@@ -44,19 +47,19 @@ import '../tinymce/plugins/example/plugin';
 a|
 [source, js]
 ----
-const pluginCss = require('tinymce/plugins/example/content.css');
+const pluginCss = require('tinymce/plugins/example/content.js');
+//require('tinymce/plugins/example/content_css.js'); 
 require('tinymce/plugins/example');
 ----
 
 |`.zip`
 a|
 [source, js]
 ----
-const pluginCss = require('../tinymce/plugins/example/content.css');
+const pluginCss = require('../tinymce/plugins/example/content.js');
+//require('../tinymce/plugins/example/content_css.js');
 require('../tinymce/plugins/example/plugin.js');
 ----
 |===
 
-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-plugin-files.adoc[]
+include::partial$module-loading/bundling-plugin-files.adoc[]

modules/ROOT/pages/vite-es6-npm.adoc

@@ -25,8 +25,6 @@ include::partial$module-loading/webpack-dev-dependencies.adoc[]
 
 include::partial$module-loading/bundling-vite-es6-npm_editor.adoc[]
 
-NOTE: If using {productname} premium skins, run **`@tiny-premium/oxide-premium-skins`** to install the dependency's.
-
 include::partial$module-loading/bundling-vite-es6-npm_config.adoc[]
 
 . Import the index.js file in the index.html page, such as:

modules/ROOT/partials/module-loading/admon-bundling-plugin-langs.adoc

@@ -1 +1 @@
-NOTE: The plugin language files (such as `+./plugins/plugin/langs/sv_SE.js+`) are required where the editor user interface is localized using the xref:ui-localization.adoc#language[`+language+` option].
+NOTE: The plugin language files (such as `+./plugins/plugin/langs/sv_SE.js+`) are required where the editor user interface is localized using the xref:ui-localization.adoc#language[language option]. Please prefer to xref:bundling-plugins.adoc#plugin-language-files[plugin-language-files]

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

@@ -326,3 +326,9 @@ include::partial$plugin-files/plugin-file-list-visualchars.adoc[]
 === Word Count (`+wordcount+`)
 
 include::partial$plugin-files/plugin-file-list-wordcount.adoc[]
+
+
+[[plugin-language-files]]
+== Plugin language files
+
+include::partial$module-loading/bundling-plugin-language-files.adoc[]

modules/ROOT/partials/module-loading/bundling-plugin-language-files.adoc

@@ -0,0 +1,43 @@
+IMPORTANT: Replace `<plugin-name>` with the specific plugin name when adding the plugin language files to your config.
+
+[source, js]
+----
+./plugins/<plugin-name>/langs/ar.js
+./plugins/<plugin-name>/langs/bg_BG.js
+./plugins/<plugin-name>/langs/ca.js
+./plugins/<plugin-name>/langs/cs.js
+./plugins/<plugin-name>/langs/da.js
+./plugins/<plugin-name>/langs/de.js
+./plugins/<plugin-name>/langs/el.js
+./plugins/<plugin-name>/langs/es.js
+./plugins/<plugin-name>/langs/eu.js
+./plugins/<plugin-name>/langs/fa.js
+./plugins/<plugin-name>/langs/fi.js
+./plugins/<plugin-name>/langs/fr_FR.js
+./plugins/<plugin-name>/langs/he_IL.js
+./plugins/<plugin-name>/langs/hi.js
+./plugins/<plugin-name>/langs/hr.js
+./plugins/<plugin-name>/langs/hu_HU.js
+./plugins/<plugin-name>/langs/id.js
+./plugins/<plugin-name>/langs/it.js
+./plugins/<plugin-name>/langs/ja.js
+./plugins/<plugin-name>/langs/kk.js
+./plugins/<plugin-name>/langs/ko_KR.js
+./plugins/<plugin-name>/langs/ms.js
+./plugins/<plugin-name>/langs/nb_NO.js
+./plugins/<plugin-name>/langs/nl.js
+./plugins/<plugin-name>/langs/pl.js
+./plugins/<plugin-name>/langs/pt_BR.js
+./plugins/<plugin-name>/langs/pt_PT.js
+./plugins/<plugin-name>/langs/ro.js
+./plugins/<plugin-name>/langs/ru.js
+./plugins/<plugin-name>/langs/sk.js
+./plugins/<plugin-name>/langs/sl_SI.js
+./plugins/<plugin-name>/langs/sv_SE.js
+./plugins/<plugin-name>/langs/th_TH.js
+./plugins/<plugin-name>/langs/tr.js
+./plugins/<plugin-name>/langs/uk.js
+./plugins/<plugin-name>/langs/vi.js
+./plugins/<plugin-name>/langs/zh_CN.js
+./plugins/<plugin-name>/langs/zh_TW.js
+----

modules/ROOT/partials/module-loading/bundling-plugins-that-cant-bundle.adoc

@@ -1,6 +1,6 @@
 [IMPORTANT]
 ====
-The following premium plugins *can not* be bundled at this time:
+The following premium plugins *can not* be bundled if the {productname} version is earlier than **6.8.0**. However, if the {productname} version is equivalent to **v6.8.0** or **later**, the following premium plugins can be bundled:
 
 * Accessibility Checker (`+a11ychecker+`)
 * Advanced Code (`+advcode+`)

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

@@ -1,7 +1,9 @@
 . Create a new source file for importing the required components from {productname} and configuring the editor.
 +
 include::partial$module-loading/bundling-required-components.adoc[]
-+
+
+NOTE: This example will only work for {productname} 6.8.0 and later.
+
 Example `+src/editor.js+`
 +
 [source,js]
@@ -40,19 +42,14 @@ import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.js';
 /* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
 import contentCss from 'tinymce/skins/content/default/content.js';
 
-/* Import Premium Skins can be changes by uncommenting the below example and updating the skin_url and content_css values */
-/* import '@tiny-premium/oxide-premium-skins/build/skins/ui/material-outline/skin.js' */
-/* import '@tiny-premium/oxide-premium-skins/build/skins/ui/material-outline/content.js' */
-/* import '@tiny-premium/oxide-premium-skins/build/skins/content/material-outline/content.js' */
-
 /* Initialize TinyMCE */
 export function render () {
   tinymce.init({
     selector: 'textarea#editor',
     plugins: 'advlist code emoticons link lists table',
     toolbar: 'bold italic | bullist numlist | link emoticons',
-    skin_url: 'default', /* material-outline */
-    content_css: 'default', /* material-outline */
+    skin_url: 'default',
+    content_css: 'default',
   });
 };
-----
+----

modules/ROOT/partials/plugin-files/plugin-file-list-a11ychecker.adoc

@@ -1,42 +1,12 @@
-....
-./plugins/a11ychecker/css/annotations.css
-./plugins/a11ychecker/langs/ar.js
-./plugins/a11ychecker/langs/bg_BG.js
-./plugins/a11ychecker/langs/ca.js
-./plugins/a11ychecker/langs/cs.js
-./plugins/a11ychecker/langs/da.js
-./plugins/a11ychecker/langs/de.js
-./plugins/a11ychecker/langs/el.js
-./plugins/a11ychecker/langs/es.js
-./plugins/a11ychecker/langs/eu.js
-./plugins/a11ychecker/langs/fa.js
-./plugins/a11ychecker/langs/fi.js
-./plugins/a11ychecker/langs/fr_FR.js
-./plugins/a11ychecker/langs/he_IL.js
-./plugins/a11ychecker/langs/hi.js
-./plugins/a11ychecker/langs/hr.js
-./plugins/a11ychecker/langs/hu_HU.js
-./plugins/a11ychecker/langs/id.js
-./plugins/a11ychecker/langs/it.js
-./plugins/a11ychecker/langs/ja.js
-./plugins/a11ychecker/langs/kk.js
-./plugins/a11ychecker/langs/ko_KR.js
-./plugins/a11ychecker/langs/ms.js
-./plugins/a11ychecker/langs/nb_NO.js
-./plugins/a11ychecker/langs/nl.js
-./plugins/a11ychecker/langs/pl.js
-./plugins/a11ychecker/langs/pt_BR.js
-./plugins/a11ychecker/langs/pt_PT.js
-./plugins/a11ychecker/langs/ro.js
-./plugins/a11ychecker/langs/ru.js
-./plugins/a11ychecker/langs/sk.js
-./plugins/a11ychecker/langs/sl_SI.js
-./plugins/a11ychecker/langs/sv_SE.js
-./plugins/a11ychecker/langs/th_TH.js
-./plugins/a11ychecker/langs/tr.js
-./plugins/a11ychecker/langs/uk.js
-./plugins/a11ychecker/langs/vi.js
-./plugins/a11ychecker/langs/zh_CN.js
-./plugins/a11ychecker/langs/zh_TW.js
+.Base js file.
+[source, js]
+----
 ./plugins/a11ychecker/plugin.js
-....
+----
+
+.css or bundled css
+[source, js]
+----
+./plugins/a11ychecker/css/annotations.css // or
+./plugins/a11ychecker/css/annotations.js // bundling requires v6.8.0 or later.
+----

modules/ROOT/partials/plugin-files/plugin-file-list-advcode.adoc

@@ -1,6 +1,19 @@
-....
-./plugins/advcode/codemirror.min.css
+.Base js file
+[source, js]
+----
+./plugins/advcode/plugin.js
+----
+
+.css or bundled css
+[source, js]
+----
+./plugins/advcode/codemirror.min.css //or
+./plugins/advcode/codemirror_css.js // bundling requires v6.8.0 or later.
+----
+
+.other js files
+[source, js]
+----
 ./plugins/advcode/codemirror.min.js
 ./plugins/advcode/customeditor.js
-./plugins/advcode/plugin.js
-....
+----