DOC-2216: add new single js bundling feature example for `Bundling …

…an npm version of TinyMCE with ES6 and Vite`. (#3010) * DOC-2216: add new single bundling feature example for . * DOC-2216: fix rel path for bundling-vite-es6-npm.config.adoc. * DOC-2216: update , remove in shell commands, update scaffolding commands. * Update modules/ROOT/pages/vite-es6-npm.adoc * Update modules/ROOT/pages/vite-es6-npm.adoc * Update modules/ROOT/pages/vite-es6-npm.adoc * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * DOC-2216: various updates including; naming convention update for file update sh commands included example for importing premium skins * Update modules/ROOT/pages/vite-es6-npm.adoc --------- Co-authored-by: tiny-ben-tran <[email protected]>
tinymce · Nov 30, 2023 · 808d0dd · 808d0dd
1 parent 805f279
commit 808d0dd
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 1 deletion.
diff --git a/changelog.md b/changelog.md
@@ -6,6 +6,7 @@ The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/
 
 ### Unreleased
 
+- 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.
 - DOC-2209: add new default_font_stack `user-formatting-option.adoc` file.
 

diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc
@@ -195,6 +195,8 @@
 **** xref:webpack-cjs-npm.adoc[CommonJS and npm]
 **** xref:webpack-es6-download.adoc[ES6 and a .zip archive]
 **** xref:webpack-cjs-download.adoc[CommonJS and a .zip archive]
+*** Vite
+**** xref:vite-es6-npm.adoc[ES6 and npm]
 *** Rollup.js
 **** xref:rollup-es6-npm.adoc[ES6 and npm]
 **** xref:rollup-es6-download.adoc[ES6 and a .zip archive]

diff --git a/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc b/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc
@@ -13,6 +13,10 @@ The following guides and reference pages assist with bundling {productname} usin
 * xref:webpack-es6-download.adoc[ES6 and a .zip archive]
 * xref:webpack-cjs-download.adoc[CommonJS and a .zip archive]
 
+== Vite
+
+* xref:vite-es6-npm.adoc[Vite, ES6 and npm]
+
 [[rollupjs]]
 == Rollup.js
 

diff --git a/modules/ROOT/pages/vite-es6-npm.adoc b/modules/ROOT/pages/vite-es6-npm.adoc
@@ -0,0 +1,77 @@
+= Bundling an npm version of TinyMCE with ES6 and Vite
+:navtitle: ES6 and npm
+:description_short: Bundling an npm version of TinyMCE in a project using ES6 and Vite
+:description: Bundling an npm version of TinyMCE in a project using ES6 and Vite
+:keywords: vite, es6, es2015, npm, modules, tinymce
+:installtype: a npm
+:bundler: https://vitejs.dev[Vite]
+:syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules[ES6+ syntax]
+
+include::partial$module-loading/bundling-procedure-intro.adoc[]
+
+== Requirements
+
+This guide requires the following:
+
+* Node.js and npm.
+* Basic knowledge of how to use https://vitejs.dev[Vite].
+* (Optional: For premium features) The latest premium .zip bundle of TinyMCE that includes premium plugins.
+
+== Procedures
+
+:is_zip_install: vite
+// use new vite dev-dependencies
+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:
++
+[source,html]
+----
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+
+<body>
+  <script type="module" src="/src/index.js"></script>
+</body>
+
+</html>
+----
++
+. Run vite in dev mode to test the application
++
+[source,sh]
+----
+npx vite dev
+----
++
+. If Vite
+.. **runs** successfully, check that the editor loads in the application.
+.. **fails**, review any errors and the configuration changes in this procedure; you may need to adjust for conflicts or other issues when bundling {productname} into an existing project.
+. Run vite in production mode to generate the bundle
++
+[source,sh]
+----
+npx vite build
+----
++
+. If vite runs successfully, check that it generated by running:
++
+[source,sh]
+----
+npx vite preview
+----
+:!is_zip_install:
+
+include::partial$module-loading/bundling-next-steps.adoc[]
diff --git a/modules/ROOT/partials/module-loading/bundling-vite-es6-npm_config.adoc b/modules/ROOT/partials/module-loading/bundling-vite-es6-npm_config.adoc
@@ -0,0 +1,27 @@
+. Add the {productname} assets and configuration into the project and provide a target element to initialize the editor. 
++
+Example `+src/index.js+`
++
+[source,js]
+----
+import * as editor from './editor';
+
+const heading = () => {
+  const element = document.createElement('h1');
+  element.innerText = 'TinyMCE Vite demo';
+  return element;
+};
+
+const editorArea = () => {
+  const element = document.createElement('textarea');
+  element.id = 'editor';
+  return element;
+};
+
+const parent = document.createElement('p');
+parent.appendChild(editorArea());
+document.body.appendChild(heading());
+document.body.appendChild(parent);
+
+editor.render();
+----
diff --git a/modules/ROOT/partials/module-loading/bundling-vite-es6-npm_editor.adoc b/modules/ROOT/partials/module-loading/bundling-vite-es6-npm_editor.adoc
@@ -0,0 +1,58 @@
+. Create a new source file for importing the required components from {productname} and configuring the editor.
++
+include::partial$module-loading/bundling-required-components.adoc[]
++
+Example `+src/editor.js+`
++
+[source,js]
+----
+/* Import TinyMCE */
+import tinymce from 'tinymce';
+
+/* Default icons are required. After that, import custom icons if applicable */
+import 'tinymce/icons/default/icons.min.js';
+
+/* Required TinyMCE components */
+import 'tinymce/themes/silver/theme.min.js';
+import 'tinymce/models/dom/model.min.js';
+
+/* Import a skin (can be a custom skin instead of the default) */
+import 'tinymce/skins/ui/oxide/skin.js';
+
+/* Import plugins */
+import 'tinymce/plugins/advlist';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/emoticons';
+import 'tinymce/plugins/emoticons/js/emojis';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/table';
+
+/* Import premium plugins */
+/* NOTE: Download separately and add these to /src/plugins */
+/* import './plugins/checklist/plugin.js'; */
+/* import './plugins/powerpaste/plugin.js'; */
+/* import './plugins/powerpaste/js/wordimport.js'; */
+
+/* content UI CSS is required */
+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 */
+  });
+};
+----
diff --git a/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc b/modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc
@@ -19,7 +19,7 @@ npm install --save-dev \
 ----
 
 endif::[]
-ifeval::[{is_zip_install} != true]
+ifeval::[{is_zip_install} != true && != vite]
 . Add `+tinymce+` and the following development dependencies to the project.
 * https://www.npmjs.com/package/webpack[`+webpack+`]
 * https://www.npmjs.com/package/webpack-cli[`+webpack-cli+`]
@@ -41,3 +41,20 @@ npm install --save-dev \
 ----
 
 endif::[]
+ifeval::[{is_zip_install} == vite]
+. Create scaffolding for your project.
++
+[source,sh]
+----
+npm create vite@5 . && npm install tinymce
+----
++
+. Or add `+tinymce+` and the following development dependencies to your existing project.
+* https://vitejs.dev[`+Vite+`]
++
+For example:
++
+[source,sh]
+----
+npm install tinymce && npm install --save-dev vite
+----