From 42be84ae4c1e83d89893e3e5c28c44e27a585a4a Mon Sep 17 00:00:00 2001
From: MitchCTiny <mitchell.crompton@tiny.cloud>
Date: Fri, 14 Nov 2025 18:48:36 +1000
Subject: [PATCH 1/6] TINY: Update demos to TinyMCE 8

---
 cool-demos/conditional-blocks.html              |  2 +-
 cool-demos/expand-editor-and-show-toolbar.html  |  6 +++---
 cool-demos/slash-commands.html                  |  4 ++--
 ...rketing-email-inline-mode-fixed-toolbar.html |  4 ++--
 email/marketing-email-inline-mode.html          |  4 ++--
 email/webmail-rich-text-editor.html             | 12 ++++++------
 images/image-alt-text-context-form.html         |  4 ++--
 images/toggle-image-size-context-toolbar.html   |  4 ++--
 tables/customizing-the-table-toolbar.html       |  4 ++--
 tables/table-row-templates.html                 |  4 ++--
 templates-and-layout/advanced-placeholder.html  |  6 +++---
 .../locked-down-template-inline-bordered.html   | 17 +++++------------
 ...d-down-template-inline-context-toolbars.html |  4 ++--
 .../locked-down-template-inline-default.html    |  4 ++--
 ...cked-down-template-inline-fixed-toolbar.html | 10 +++++-----
 .../multiple-columns-using-css-columns.html     |  4 ++--
 tinymce-basics/badges.html                      |  4 ++--
 tinymce-basics/bootstrap-rich-text-form.html    |  4 ++--
 ...toolbar-button-menu-and-context-toolbar.html |  4 ++--
 tinymce-basics/fonts.html                       |  4 ++--
 tinymce-basics/format-link-as-button.html       |  4 ++--
 .../right-aligned-toolbar-button.html           |  4 ++--
 .../useful_styles_for_content_css.html          |  8 ++++----
 ...webapp-description-comment-reply-editor.html |  8 ++++----
 tokens/span-based-token.html                    |  2 +-
 tokens/text-based-token.html                    |  2 +-
 tokens/web-component-token.html                 |  2 +-
 27 files changed, 66 insertions(+), 73 deletions(-)

diff --git a/cool-demos/conditional-blocks.html b/cool-demos/conditional-blocks.html
index 8c4e23a..36181ad 100644
--- a/cool-demos/conditional-blocks.html
+++ b/cool-demos/conditional-blocks.html
@@ -15,7 +15,7 @@
     <meta charset="utf-8">
     <title>Conditional blocks</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         tinymce.init({
diff --git a/cool-demos/expand-editor-and-show-toolbar.html b/cool-demos/expand-editor-and-show-toolbar.html
index c1a5f09..4123aa8 100644
--- a/cool-demos/expand-editor-and-show-toolbar.html
+++ b/cool-demos/expand-editor-and-show-toolbar.html
@@ -10,12 +10,12 @@
     <meta charset="utf-8">
     <title>Expand and show toolbar demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         tinymce.init({
             selector: "#editor-content",
-            plugins: "emoticons hr image link lists charmap table",
+            plugins: "emoticons image link lists charmap table",
             toolbar: "formatgroup paragraphgroup insertgroup",
             placeholder: "Ask a question or post an update...",
             menubar: false,
@@ -206,7 +206,7 @@
             font-weight: strong;
         }
 
-        hr {
+        {
             margin: 1.5rem 0;
             padding: .5rem 0;
             border: 0;
diff --git a/cool-demos/slash-commands.html b/cool-demos/slash-commands.html
index c4bc3d2..4b985d5 100644
--- a/cool-demos/slash-commands.html
+++ b/cool-demos/slash-commands.html
@@ -11,7 +11,7 @@
     <meta charset="utf-8">
     <title>Slash commands plugin</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         // Register a TinyMCE plugin
@@ -200,7 +200,7 @@
         tinymce.init({
             selector: "textarea",
             // Remember to include all relevant plugins here which you included in your `insertActions` array above
-            plugins: "commandpalette insertdatetime lists link code table toc hr image codesample media checklist",
+            plugins: "commandpalette insertdatetime lists link code table toc image codesample media checklist",
             height: 400,
         });
     </script>
diff --git a/email/marketing-email-inline-mode-fixed-toolbar.html b/email/marketing-email-inline-mode-fixed-toolbar.html
index 528b020..f258924 100644
--- a/email/marketing-email-inline-mode-fixed-toolbar.html
+++ b/email/marketing-email-inline-mode-fixed-toolbar.html
@@ -19,7 +19,7 @@
     <meta charset="utf-8">
     <title>Marketing email editor using inline mode and fixed toolbar</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector:'.tinymce',
@@ -34,7 +34,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'undo redo | styleselect | bold italic underline strikethrough | forecolor backcolor | link image emoticons | alignleft aligncenter alignright | bullist numlist | code removeformat',
+            toolbar: 'undo redo | styles | bold italic underline strikethrough | forecolor backcolor | link image emoticons | alignleft aligncenter alignright | bullist numlist | code removeformat',
 
             // Toggle the menubar off to get a leaner visual experience
             // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
diff --git a/email/marketing-email-inline-mode.html b/email/marketing-email-inline-mode.html
index 2b46a86..bbe5b9f 100644
--- a/email/marketing-email-inline-mode.html
+++ b/email/marketing-email-inline-mode.html
@@ -19,7 +19,7 @@
     <meta charset="utf-8">
     <title>Marketing email editor using inline mode</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector:'.tinymce',
@@ -34,7 +34,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'styleselect | bold italic underline | link image emoticons | align bullist numlist | code removeformat',
+            toolbar: 'styles | bold italic underline | link image emoticons | align bullist numlist | code removeformat',
 
             // Toggle the menubar off to get a leaner visual experience
             // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
diff --git a/email/webmail-rich-text-editor.html b/email/webmail-rich-text-editor.html
index 4589abc..f431c9d 100644
--- a/email/webmail-rich-text-editor.html
+++ b/email/webmail-rich-text-editor.html
@@ -8,7 +8,7 @@
     <meta charset="utf-8">
     <title>Rich text webmail editor demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector:'#editor',
@@ -47,7 +47,7 @@
                 formatgroup: {
                     icon: 'format',
                     tooltip: 'Formatting',
-                    items: 'fontselect | formatselect | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
+                    items: 'fontselect | styles | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
                 }
             },
 
@@ -58,9 +58,9 @@
             // The formats option is where custom formatting options are defined.
             // In this case we define a couple of headings and text formats.
             // The p is configured to match against multiple formats to make sure
-            // the styleselect toolbar menu button shows paragraphs as enabled on
+            // the styles toolbar menu button shows paragraphs as enabled on
             // p tags that lacks style attribute. The first item in the array will
-            // be the one applied when choosing the format via the styleselect
+            // be the one applied when choosing the format via the styles
             // toolbar button.
             // https://www.tiny.cloud/docs/configure/content-formatting/#formats
             formats: {
@@ -73,8 +73,8 @@
                 small: { block: 'small', styles: { fontSize: '12px', color: '#aaaaaa' } }
             },
 
-            // An alternative to the styleselect toolbar button is the formatselect button
-            // which is a simpler version of the styleselect button. It is configured
+            // An alternative to the styles toolbar button is the styles button
+            // which is a simpler version of the styles button. It is configured
             // using the block_formats option.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#block_formats
             block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',
diff --git a/images/image-alt-text-context-form.html b/images/image-alt-text-context-form.html
index 31464d1..13c7d89 100644
--- a/images/image-alt-text-context-form.html
+++ b/images/image-alt-text-context-form.html
@@ -10,7 +10,7 @@
     <meta charset="utf-8">
     <title>Set an image alt text using context forms</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         tinymce.init({
@@ -26,7 +26,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'formatselect | bold italic underline  | link image | code',
+            toolbar: 'styles | bold italic underline  | link image | code',
 
             // To make sure the toolbar never scrolls out of view which can happen when
             // writing very long texts while using the autoresize plugin. This option
diff --git a/images/toggle-image-size-context-toolbar.html b/images/toggle-image-size-context-toolbar.html
index eb20432..7693c0b 100644
--- a/images/toggle-image-size-context-toolbar.html
+++ b/images/toggle-image-size-context-toolbar.html
@@ -8,7 +8,7 @@
     <meta charset='utf-8'>
     <title>Toggle between image sizes and layouts</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <script src='https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js' referrerpolicy='origin'></script>
+    <script src='https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js' referrerpolicy='origin'></script>
     <script>
         // An iconpack holds our custom button's SVG icons.
         // Tip! A custom icon pack does not have to be a separate file
@@ -54,7 +54,7 @@
 
             // Define the toolbar that shows up when selecting text based content
             // https://www.tiny.cloud/docs/plugins/quickbars/#quickbars_selection_toolbar
-            quickbars_selection_toolbar: 'formatselect | bold italic underline backcolor | align bullist | quicklink code',
+            quickbars_selection_toolbar: 'styles | bold italic underline backcolor | align bullist | quicklink code',
 
             // Define the toolbar that shows up when selecting images. Notice the
             // custom botton we have put last. See further down how it's set up.
diff --git a/tables/customizing-the-table-toolbar.html b/tables/customizing-the-table-toolbar.html
index 32f356d..4e4f42b 100644
--- a/tables/customizing-the-table-toolbar.html
+++ b/tables/customizing-the-table-toolbar.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8">
     <title>An alternate table context toolbar</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         // An iconpack holds a custom button SVG icon.
         // Tip! A custom icon pack does not have to be a separate file
@@ -41,7 +41,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'styleselect | bold italic underline | inserttable link image emoticons | align bullist numlist | code removeformat',
+            toolbar: 'styles | bold italic underline | inserttable link image emoticons | align bullist numlist | code removeformat',
 
             //Set the height of the editor. Tip: Any css value is accepted as a string.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#height
diff --git a/tables/table-row-templates.html b/tables/table-row-templates.html
index 04c3b10..f1bde00 100644
--- a/tables/table-row-templates.html
+++ b/tables/table-row-templates.html
@@ -15,7 +15,7 @@
     <meta charset="utf-8">
     <title>Table row templates</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector:'#editor',
@@ -30,7 +30,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'styleselect | bold italic underline forecolor backcolor | table link image emoticons | align bullist numlist | code removeformat',
+            toolbar: 'styles | bold italic underline forecolor backcolor | table link image emoticons | align bullist numlist | code removeformat',
 
             // The Naked premium skin provides a clean look.
             // You can also easily create your own borderless skin too.
diff --git a/templates-and-layout/advanced-placeholder.html b/templates-and-layout/advanced-placeholder.html
index 2f33344..98e7b3f 100644
--- a/templates-and-layout/advanced-placeholder.html
+++ b/templates-and-layout/advanced-placeholder.html
@@ -16,7 +16,7 @@
     <meta charset="utf-8">
     <title>Advanced placeholder demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
 
@@ -113,10 +113,10 @@ <h2>Test result</h2>
             // to make dynamic templates (though there is many ways to achieve
             // dynamic templates.).
             // Tip! To make TinyMCE leaner, only include the plugins you actually need
-            plugins: 'link lists code visualblocks table hr image template',
+            plugins: 'link lists code visualblocks table image template',
 
             // Nothing special about the toolbar in this demo.
-            toolbar: 'undo redo | styleselect | bold italic strikethrough backcolor | bullist numlist link image hr | code',
+            toolbar: 'undo redo | styles | bold italic strikethrough backcolor | bullist numlist link image hr | code',
 
             // Tip! The height option accepts any valid CSS for height
             height: 'calc(100vh - 4rem)',
diff --git a/templates-and-layout/locked-down-template-inline-bordered.html b/templates-and-layout/locked-down-template-inline-bordered.html
index b22ae24..265bc8a 100644
--- a/templates-and-layout/locked-down-template-inline-bordered.html
+++ b/templates-and-layout/locked-down-template-inline-bordered.html
@@ -11,7 +11,7 @@
     <title>Inline bordered demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector: '#tinymce',
@@ -29,7 +29,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'undo redo | formatselect | bold italic strikethrough backcolor | link image | align bullist numlist',
+            toolbar: 'undo redo | styles | bold italic strikethrough backcolor | link image | align bullist numlist',
 
             // Toggle the menubar off to get a leaner visual experience
             // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
@@ -39,13 +39,6 @@
             // https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
             placeholder: 'Page body',
 
-            // To remove the outside borders of the toolbar we use a premium skin.
-            // You can also easily create your own borderless skin too.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/borderless-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
-            skin: 'borderless',
-
             // Render the inline toolbar in this element
             // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
             fixed_toolbar_container: '#toolbar',
@@ -59,21 +52,21 @@
                 // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
                 // https://www.tiny.cloud/docs/advanced/events/
                 editor.on('SkinLoaded', () => {
-                    editor.ui.disable();
+                    editor.ui.setEnabled(false);
                 });
 
                 // Enable the UI when the editable area gains focus
                 // TODO: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
                 // https://www.tiny.cloud/docs/advanced/events/
                 editor.on('focus', () => {
-                    editor.ui.enable();
+                    editor.ui.setEnabled(true);
                 });
 
                 // Disable the UI when the editor looses focus
                 // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
                 // https://www.tiny.cloud/docs/advanced/events/
                 editor.on('blur', () => {
-                    editor.ui.disable();
+                    editor.ui.setEnabled(false);
                 });
             }
         });
diff --git a/templates-and-layout/locked-down-template-inline-context-toolbars.html b/templates-and-layout/locked-down-template-inline-context-toolbars.html
index 1503cea..84cb99e 100644
--- a/templates-and-layout/locked-down-template-inline-context-toolbars.html
+++ b/templates-and-layout/locked-down-template-inline-context-toolbars.html
@@ -11,7 +11,7 @@
     <title>Inline context toolbars demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector: '#tinymce',
@@ -36,7 +36,7 @@
 
             // Configure the toolbar button shown in the context toolbar
             // https://www.tiny.cloud/docs/plugins/quickbars/#quickbars_selection_toolbar
-            quickbars_selection_toolbar: 'formatselect | bold italic strikethrough backcolor link | align | bullist numlist',
+            quickbars_selection_toolbar: 'styles | bold italic strikethrough backcolor link | align | bullist numlist',
 
             // Text to show when the editor is empty
             // https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
diff --git a/templates-and-layout/locked-down-template-inline-default.html b/templates-and-layout/locked-down-template-inline-default.html
index b033078..a5c1808 100644
--- a/templates-and-layout/locked-down-template-inline-default.html
+++ b/templates-and-layout/locked-down-template-inline-default.html
@@ -11,7 +11,7 @@
     <title>Default inline mode</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector: '#tinymce',
@@ -29,7 +29,7 @@
             // This option allows you to specify the buttons and the order that
             // they will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'formatselect | bold italic strikethrough backcolor link | code',
+            toolbar: 'styles | bold italic strikethrough backcolor link | code',
 
             // Toggle the menubar off to get a leaner visual experience
             // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
diff --git a/templates-and-layout/locked-down-template-inline-fixed-toolbar.html b/templates-and-layout/locked-down-template-inline-fixed-toolbar.html
index d7792d9..21ce280 100644
--- a/templates-and-layout/locked-down-template-inline-fixed-toolbar.html
+++ b/templates-and-layout/locked-down-template-inline-fixed-toolbar.html
@@ -11,7 +11,7 @@
     <title>Inline mode with fixed toolbar container</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector: '#tinymce',
@@ -29,7 +29,7 @@
             // This option allows you to specify the buttons and the order that
             // they will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'undo redo | formatselect | bold italic strikethrough backcolor | align bullist numlist | link image media blockquote | indent outdent | code removeformat',
+            toolbar: 'undo redo | styles | bold italic strikethrough backcolor | align bullist numlist | link image media blockquote | indent outdent | code removeformat',
 
             // Toggle the menubar off to get a leaner visual experience
             // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
@@ -63,21 +63,21 @@
                 // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
                 // https://www.tiny.cloud/docs/advanced/events/
                 editor.on('SkinLoaded', () => {
-                    editor.ui.disable();
+                    editor.ui.setEnabled(false);
                 });
 
                 // Enable the UI when the editable area gains focus
                 // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
                 // https://www.tiny.cloud/docs/advanced/events/
                 editor.on('focus', () => {
-                    editor.ui.enable();
+                    editor.ui.setEnabled(true);
                 });
 
                 // Disable the UI when the editor looses focus
                 // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
                 // https://www.tiny.cloud/docs/advanced/events/
                 editor.on('blur', () => {
-                    editor.ui.disable();
+                    editor.ui.setEnabled(false);
                 });
             }
         });
diff --git a/templates-and-layout/multiple-columns-using-css-columns.html b/templates-and-layout/multiple-columns-using-css-columns.html
index 77d2d18..16f1167 100644
--- a/templates-and-layout/multiple-columns-using-css-columns.html
+++ b/templates-and-layout/multiple-columns-using-css-columns.html
@@ -8,7 +8,7 @@
     <meta charset="utf-8">
     <title>Columns demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         // An iconpack holds our custom button's SVG icons.
@@ -26,7 +26,7 @@
             plugins: 'link lists code visualblocks',
 
             // We have put our custom callout button last.
-            toolbar: 'undo redo | styleselect | bold italic strikethrough backcolor | columns | bullist link callout',
+            toolbar: 'undo redo | styles | bold italic strikethrough backcolor | columns | bullist link callout',
 
             // Tip! The height option accepts any valid CSS for height
             height: 'calc(100vh)',
diff --git a/tinymce-basics/badges.html b/tinymce-basics/badges.html
index 2ab9d20..b937889 100644
--- a/tinymce-basics/badges.html
+++ b/tinymce-basics/badges.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8">
     <title>Badges with custom text and colors</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         tinymce.init({
@@ -32,7 +32,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'formatselect | bold italic underline  | badge table | code',
+            toolbar: 'styles | bold italic underline  | badge table | code',
 
             // The formats option is where custom formatting options are defined.
             // In this case we define a format for our badge
diff --git a/tinymce-basics/bootstrap-rich-text-form.html b/tinymce-basics/bootstrap-rich-text-form.html
index c7d66d6..a8ef2dc 100644
--- a/tinymce-basics/bootstrap-rich-text-form.html
+++ b/tinymce-basics/bootstrap-rich-text-form.html
@@ -9,7 +9,7 @@
     <title>Bootstrap rich text form</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector:'#editor',
@@ -21,7 +21,7 @@
             statusbar: false,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'autoresize autolink image imagetools link lists media help',
+            plugins: 'autoresize autolink image link lists media help',
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
diff --git a/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html b/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html
index caeeb98..7fa3bef 100644
--- a/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html
+++ b/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html
@@ -10,7 +10,7 @@
     <meta charset="utf-8">
     <title>TinyMCE Demos – Custom Toolbar Buttons, Menus and Context Toolbars</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         // An iconpack holds our custom button's SVG icons.
@@ -31,7 +31,7 @@
             plugins: "link lists code noneditable",
 
             // We have put our custom callout button last.
-            toolbar: "undo redo | formatselect | bold italic strikethrough backcolor | bullist link callout",
+            toolbar: "undo redo | styles | bold italic strikethrough backcolor | bullist link callout",
 
             // Tip! The height option accepts any valid CSS for height
             height: 'calc(100vh - 4rem)',
diff --git a/tinymce-basics/fonts.html b/tinymce-basics/fonts.html
index eb3e50e..c9db58a 100644
--- a/tinymce-basics/fonts.html
+++ b/tinymce-basics/fonts.html
@@ -8,7 +8,7 @@
     <meta charset="utf-8">
     <title>Using custom fonts</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         tinymce.init({
@@ -20,7 +20,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: "undo redo | formatselect | fontselect | fontsizeselect | bold italic strikethrough | bullist link | code",
+            toolbar: "undo redo | styles | fontfamily | fontsize | bold italic strikethrough | bullist link | code",
 
             // Tip! The height option accepts any valid CSS for height
             height: '500px',
diff --git a/tinymce-basics/format-link-as-button.html b/tinymce-basics/format-link-as-button.html
index a124afa..4c96006 100644
--- a/tinymce-basics/format-link-as-button.html
+++ b/tinymce-basics/format-link-as-button.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8">
     <title>Format a link into a call to action button</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector:'#editor',
@@ -24,7 +24,7 @@
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'styleselect | bold italic underline | link image emoticons | align bullist numlist | code removeformat',
+            toolbar: 'styles | bold italic underline | link image emoticons | align bullist numlist | code removeformat',
 
             //Set the height of the editor. Tip: Any css value is accepted as a string.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#height
diff --git a/tinymce-basics/right-aligned-toolbar-button.html b/tinymce-basics/right-aligned-toolbar-button.html
index f14831c..29e7675 100644
--- a/tinymce-basics/right-aligned-toolbar-button.html
+++ b/tinymce-basics/right-aligned-toolbar-button.html
@@ -26,7 +26,7 @@
     <meta charset="utf-8">
     <title>Right aligned toolbar buttons</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         tinymce.init({
@@ -35,7 +35,7 @@
             // Tip! To make TinyMCE leaner, only include the plugins you actually need
             plugins: "link lists fullscreen code",
 
-            toolbar: "undo redo | styleselect | bold italic strikethrough backcolor | bullist link | code fullscreen",
+            toolbar: "undo redo | styles | bold italic strikethrough backcolor | bullist link | code fullscreen",
 
             // Toggle the menubar off to get a leaner visual experience
             // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
diff --git a/tinymce-basics/useful_styles_for_content_css.html b/tinymce-basics/useful_styles_for_content_css.html
index 9b19213..be0f7bb 100644
--- a/tinymce-basics/useful_styles_for_content_css.html
+++ b/tinymce-basics/useful_styles_for_content_css.html
@@ -14,7 +14,7 @@
     <meta charset="utf-8">
     <title>Useful styles to include in your content css</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         tinymce.init({
@@ -46,8 +46,8 @@
                  * -----------------------------------------------------
                  */
 
-                /* Make our invisible overlay be positioned relative to the hr */
-                hr {
+                /* Make our invisible overlay be positioned relative to the */
+                {
                   position: relative;
                 }
 
@@ -124,7 +124,7 @@ <h1>Useful content css</h1>
         <p>The default content css is very basic and unopinionated to allow you as a developer to integrate the styles you want in order to get a good WYSIWYG writing environment.</p>
         <p>That said, here are some tecniques we often implement ourselves that improves the editing experience in TinyMCE</p>
         <p><em>Inspect the source code to see the actual css used</em></p>
-        <h2>Improve hr clickability</h2>
+        <h2>Improve clickability</h2>
         <p>Because the <code>&amp;lt;hr&amp;gt;</code> is often just a 1px gray line, it is very difficult for a user to select and manipulate. By using the <code>::after</code> pseudo element we can create a larger invisible click area greatly improving selectability.</p>
         <hr />
 
diff --git a/tinymce-basics/webapp-description-comment-reply-editor.html b/tinymce-basics/webapp-description-comment-reply-editor.html
index 1403fdb..e0e3105 100644
--- a/tinymce-basics/webapp-description-comment-reply-editor.html
+++ b/tinymce-basics/webapp-description-comment-reply-editor.html
@@ -9,7 +9,7 @@
 This demo showcases among other things:
 
 - The ability to create a custom border outside of TinyMCE and visually encapsulate external content.
-- Use textpattern plugin to provide markdown-like replacement formatting. Also try typing `->`
+- Use plugin to provide markdown-like replacement formatting. Also try typing `->`
 - Use of the autoresize plugin. The editor grows as you type.
 - An usecase for the small premium icon pack
 
@@ -21,7 +21,7 @@
     <meta charset="utf-8">
     <title>Comment editor demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
         tinymce.init({
             selector:'#description',
@@ -46,12 +46,12 @@
             icons: 'small',
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'code autoresize anchor, autolink codesample emoticons hr image link lists table textpattern',
+            plugins: 'code autoresize anchor, autolink codesample emoticons image link lists table textpattern',
 
             // This option allows you to specify the buttons and the order that
             // they will appear on TinyMCE’s toolbar.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            toolbar: 'formatselect | bold italic strikethrough blockquote | bullist numlist codesample link image table emoticons hr',
+            toolbar: 'styles | bold italic strikethrough blockquote | bullist numlist codesample link image table emoticons hr',
 
             // Setting the minimum height when using the autoresize plugin
             // https://www.tiny.cloud/docs/configure/editor-appearance/#min_height
diff --git a/tokens/span-based-token.html b/tokens/span-based-token.html
index 33690ab..dda8db5 100644
--- a/tokens/span-based-token.html
+++ b/tokens/span-based-token.html
@@ -10,7 +10,7 @@
     <meta charset="utf-8">
     <title>Span-based token demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         // An array containing the available tokens.
diff --git a/tokens/text-based-token.html b/tokens/text-based-token.html
index ce76dfe..45b1309 100644
--- a/tokens/text-based-token.html
+++ b/tokens/text-based-token.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8">
     <title>Text-based tokens demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         // An array containing the available tokens.
diff --git a/tokens/web-component-token.html b/tokens/web-component-token.html
index c72f3d0..19eb122 100644
--- a/tokens/web-component-token.html
+++ b/tokens/web-component-token.html
@@ -11,7 +11,7 @@
     <meta charset="utf-8">
     <title>Web component based token demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
+    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
 
     <script>
         // An array containing the available tokens.

From 30a67228eda73cadcd28a7e360bbc337f89b433d Mon Sep 17 00:00:00 2001
From: MitchCTiny <mitchell.crompton@tiny.cloud>
Date: Fri, 14 Nov 2025 18:52:01 +1000
Subject: [PATCH 2/6] Fix slash commands demo

---
 cool-demos/slash-commands.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/cool-demos/slash-commands.html b/cool-demos/slash-commands.html
index 4b985d5..13d8c28 100644
--- a/cool-demos/slash-commands.html
+++ b/cool-demos/slash-commands.html
@@ -125,7 +125,7 @@
                 // the number of characters to type before displaying the autocompleter menu and,
                 // configure the autocompleter to display a menu opposed a row of icons
                 // https://www.tiny.cloud/docs/ui-components/autocompleter/#configurationoptions
-                ch: '/',
+                trigger: '/',
                 minChars: 0,
                 columns: 1,
 
@@ -157,7 +157,7 @@
 
                     // Here the matched autocompleter objects are built
                     // https://www.tiny.cloud/docs/ui-components/autocompleter/#autocompleteitem
-                    return new tinymce.util.Promise(function (resolve) {
+                    return new Promise(function (resolve) {
                         var results = matchedActions.map(function (action) {
                             return {
                                 meta: action,
@@ -200,7 +200,7 @@
         tinymce.init({
             selector: "textarea",
             // Remember to include all relevant plugins here which you included in your `insertActions` array above
-            plugins: "commandpalette insertdatetime lists link code table toc image codesample media checklist",
+            plugins: "commandpalette insertdatetime lists link code table image codesample media checklist",
             height: 400,
         });
     </script>

From 6c6c4a35c1cc6e2bd7fadfcfcc5394d88b7dce67 Mon Sep 17 00:00:00 2001
From: Fredrik Danielsson <fredrik@lostkeys.se>
Date: Wed, 19 Nov 2025 00:35:32 +0100
Subject: [PATCH 3/6] * Updated license

tinymce-basics/useful_styles_for_content_css.html
* Fixed invalid css
* Re-added "hr" in the content
* Removed `noneditable` plugin
* Updated all documentation links

tinymce-basics/badges.html
* Removed `noneditable` plugin
* Updated all documentation links

tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html
* Removed `noneditable` plugin
* Updated all documentation links

tinymce-basics/webapp-description-comment-reply-editor.html
* Correctly use text pattern feature
* Removed text pattern plugin
* Updated all documentation links
* Added markdown plugin

tinymce-basics/bootstrap-rich-text-form.html
* Updated all documentation links

tinymce-basics/right-aligned-toolbar-button.html
* Removed demo because we now have various badges showing up here

tinymce-basics/format-link-as-button.html
* Updated all documentation links

tinymce-basics/fonts.html
* Updated all documentation links
* replaced font_formats with font_family_formats to make custom fonts show up

images/toggle-image-size-context-toolbar.html
* Updated all documentation links

images/image-alt-text-context-form.html
* Updated all documentation links

tables/customizing-the-table-toolbar.html
* Updated all documentation links
* TODO: Commented out the cut/copy/paste row & column buttons preventing the menu from working, waiting for someone more talented to fix them using the new fake clipboard api: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.fakeclipboard/

tables/table-row-templates.html
* TODO: someone needs to update the copy paste row using the new fake clipboard api: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.fakeclipboard/ otherwise the whole premise of the demo is gone
* Updated all documentation links

templates-and-layout/advanced-placeholder.html
* Removed demo because the new enhanced templates plugin does not have the same features as the template plugin it replaced, and cannot be used with this demo, therefore the premise of the demo is lost.

templates-and-layout/multiple-columns-using-css-columns.html
* Removed demo because using css this way is not something TinyMCE supports very well, and I feel it is unwise to lead someone down this route.

templates-and-layout/locked-down-template-inline-default.html
* Updated all documentation links

templates-and-layout/locked-down-template-inline-context-toolbars.html
* Updated all documentation links

templates-and-layout/locked-down-template-inline-context-toolbars.html
* Updated all documentation links

templates-and-layout/locked-down-template-inline-bordered.html
* Updated all documentation links
* Re-added the borderless skin to fix broken toolbar visuals

email/webmail-rich-text-editor.html
* Switched to naked skin because the outside skin had the editor outline on top of the bottom toolbar
* Updated all documentation links

email/marketing-email-inline-mode.html
* Updated all documentation links

email/marketing-email-inline-mode-fixed-toolbar.html
* Updated all documentation links

email/marketing-email.html
* Updated the demo to use the mergetags plugin
* Updated all documentation links

cool-demos/expand-editor-and-show-toolbar.html
* Fixed invalid CSS
* Updated all documentation links
* Note that toolbar bottom with the new tooltips makes it almost impossible to use the toolbar

cool-demos/conditional-blocks.html
* Updated all documentation links
* Removed `noneditable` plugin

cool-demos/slash-commands.html
* Added the `tableofcontents` plugin
* Updated all documentation links
---
 README.md                                     |   2 +-
 cool-demos/conditional-blocks.html            |  48 ++-
 .../expand-editor-and-show-toolbar.html       |  36 +-
 cool-demos/slash-commands.html                |  25 +-
 cool-demos/wordprocessor.html                 |  14 +-
 ...eting-email-inline-mode-fixed-toolbar.html |  26 +-
 email/marketing-email-inline-mode.html        |  25 +-
 email/marketing-email.html                    | 264 ++++++-------
 email/webmail-rich-text-editor.html           |  42 ++-
 images/image-alt-text-context-form.html       |  30 +-
 images/toggle-image-size-context-toolbar.html |  42 +--
 index.html                                    |  62 +---
 package.json                                  |   4 +-
 tables/customizing-the-table-toolbar.html     | 116 +++---
 tables/table-row-templates.html               |  37 +-
 templates-and-layout/README.md                |   2 +-
 .../advanced-placeholder.html                 | 351 ------------------
 .../locked-down-template-inline-bordered.html |  33 +-
 ...down-template-inline-context-toolbars.html |  12 +-
 .../locked-down-template-inline-default.html  |   8 +-
 ...ed-down-template-inline-fixed-toolbar.html |  36 +-
 .../multiple-columns-using-css-columns.html   | 114 ------
 tinymce-basics/badges.html                    |  37 +-
 tinymce-basics/bootstrap-rich-text-form.html  |  28 +-
 ...olbar-button-menu-and-context-toolbar.html |  38 +-
 tinymce-basics/fonts.html                     |   8 +-
 tinymce-basics/format-link-as-button.html     |  12 +-
 .../right-aligned-toolbar-button.html         |  83 -----
 .../useful_styles_for_content_css.html        |  12 +-
 ...bapp-description-comment-reply-editor.html |  46 +--
 tokens/README.md                              |   5 -
 tokens/span-based-token.html                  | 100 -----
 tokens/text-based-token.html                  | 103 -----
 tokens/web-component-token.html               | 210 -----------
 34 files changed, 481 insertions(+), 1530 deletions(-)
 delete mode 100644 templates-and-layout/advanced-placeholder.html
 delete mode 100644 templates-and-layout/multiple-columns-using-css-columns.html
 delete mode 100644 tinymce-basics/right-aligned-toolbar-button.html
 delete mode 100644 tokens/README.md
 delete mode 100644 tokens/span-based-token.html
 delete mode 100644 tokens/text-based-token.html
 delete mode 100644 tokens/web-component-token.html

diff --git a/README.md b/README.md
index cdf9ae1..0e4912e 100644
--- a/README.md
+++ b/README.md
@@ -17,4 +17,4 @@ You can download and run these demos locally. Some demos uses premium plugins so
 
 ## License
 The files in this repository are licensed under an MIT license.
-TinyMCE is licensed under a LGPL or commercial license.
+TinyMCE is available under a commercial license and a subset of the features are open source under the GNU General Public License Version 2 or later.
diff --git a/cool-demos/conditional-blocks.html b/cool-demos/conditional-blocks.html
index 36181ad..9ba6a4d 100644
--- a/cool-demos/conditional-blocks.html
+++ b/cool-demos/conditional-blocks.html
@@ -22,45 +22,54 @@
             selector: '#editor',
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'autoresize advcode link lists noneditable',
+            plugins: 'autoresize advcode link lists mergetags',
 
             // We have put our custom insert conditional block button last.
-            toolbar: 'bold italic strikethrough backcolor | bullist numlist link | conditionalblock | code',
+            toolbar: 'bold italic strikethrough backcolor | bullist numlist link mergetags | conditionalblock | code',
 
             // "Thin" is a premium icon pack you get wth the cloud essential plan.
             // See https://www.tiny.cloud for more details and purchasing options
             // You can also create your own icon packs for TinyMCE
-            // https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
+            // https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/
             icons: 'thin',
 
             // "Naked" is a premium icon pack you get wth the cloud essential plan
             // See https://www.tiny.cloud for more details and purchasing options
             // You can also create your own skins for TinyMCE
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
             skin: 'naked',
 
             // If we don't need the menubar we can hide it
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
+            // Easily configure replacement values using merge tags plugin
+            // https://www.tiny.cloud/docs/tinymce/latest/mergetags/
+            mergetags_list: [
+                { title: "first_name", value: "first_name" },
+                { title: "number_of_people", value: "number_of_people" },
+                { title: "agent_first_name", value: "agent_first_name" },
+            ],
+
             // Tell TinyMCE that conditional-block is a valid element.
-            // https://www.tiny.cloud/docs/configure/content-filtering/#custom_elements
+            // https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#custom_elements
             custom_elements: 'conditional-block',
 
             setup: (editor) => {
                 // Instead of defining a custom icon pack, we can register individual
                 // icons using the API.
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.registry/#addicon
                 editor.ui.registry.addIcon('conditional-block', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19 4a2 2 0 1 1-1.854 2.751L15 6.75c-1.239 0-1.85.61-2.586 2.31l-.3.724c-.42 1.014-.795 1.738-1.246 2.217.406.43.751 1.06 1.12 1.92l.426 1.018c.704 1.626 1.294 2.256 2.428 2.307l.158.004h2.145a2 2 0 1 1 0 1.501L15 18.75l-.219-.004c-1.863-.072-2.821-1.086-3.742-3.208l-.49-1.17c-.513-1.163-.87-1.57-1.44-1.614L9 12.75l-2.146.001a2 2 0 1 1 0-1.501H9c.636 0 1.004-.383 1.548-1.619l.385-.92c.955-2.291 1.913-3.382 3.848-3.457L15 5.25h2.145A2 2 0 0 1 19 4z" fill-rule="evenodd"/></svg>');
 
                 // The preinit event is fired after the editor is loaded but before
                 // the content is loaded
-                // https://www.tiny.cloud/docs/advanced/events/#editorcoreevents
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('PreInit', () => {
                     // Get the iframe window object and the iframes document object
                     // and call our setup function that creates the web component
-                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getwin
-                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getdoc
+                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getWin
+                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getDoc
                     const win = editor.getWin();
                     const doc = editor.getDoc();
                     setupWebComponent(win, doc, editor);
@@ -71,7 +80,7 @@
                     // to be saved with the content. We therefore need to filter out the attribute
                     // upon serlialization (which happens on "save", view sourcecode and preview
                     // among others).
-                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilter
+                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.serializer/#addNodeFilter
                     editor.serializer.addNodeFilter('conditional-block', (nodes) => {
                         // Iterate through all filtered nodes and remove the contenteditable attribute
                         // as well as the wrapper <div> we add when creating the custom element
@@ -81,7 +90,7 @@
                                 node.attr('contenteditable', null);
                                 // Traverse into the first child which would be the <div contenteditable="true">
                                 // and use unwrap to remove the <div> but keep the children.
-                                // https://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.node/#unwrap
+                                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.node/#unwrap
                                 node.firstChild.unwrap();
                             }
                         });
@@ -89,7 +98,7 @@
                 });
 
                 // Register a custom toolbar menu button to insert the conditional block
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#menubutton
                 editor.ui.registry.addButton('conditionalblock', {
                     icon: 'conditional-block',
                     tooltip: 'Insert conditional block',
@@ -104,8 +113,8 @@
             // In a real world scenario, with much more custom styles for headings
             // links, tables, images etc, it's recommended to use the content_css
             // option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 /* We remove the default selected outline because it doesn't follow the
                  * border radius and reintroduce it as a box-shadow.
@@ -307,8 +316,7 @@
         const dialogManager = (conditionalBlock, editor) => {
             // Open a TinyMCE modal where the user can set the badge's
             // background and text color.
-            // https://www.tiny.cloud/docs/ui-components/dialog/
-            // https://www.tiny.cloud/docs/ui-components/dialogcomponents/
+            // https://www.tiny.cloud/docs/tinymce/latest/dialog/
             editor.windowManager.open({
                 title: 'Insert/edit Conditional block',
                 body: {
@@ -368,13 +376,13 @@
                     // Check if a block is edited or a new block is to be inserted
                     if (!conditionalBlock) {
                         // Insert content at the location of the cursor.
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#insertContent
                         editor.insertContent(`<conditional-block data-property="${data.property}" data-operator="${data.operator}" data-value="${data.value}"><p>Write conditional text here</p></conditional-block>`);
                     }
                     else {
                         // Working directly with the DOM often requires manually adding
                         // the actions to the undo stack.
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.undomanager/
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.undomanager/
                         editor.undoManager.transact(() => {
                             // Update the data-attributes on the conditional-block element
                             conditionalBlock.dataset.property = data.property;
@@ -383,7 +391,7 @@
                         });
 
                         // Tell TinyMCE that the ui has been updated.
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#nodechanged
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#nodeChanged
                         editor.nodeChanged();
                     }
 
diff --git a/cool-demos/expand-editor-and-show-toolbar.html b/cool-demos/expand-editor-and-show-toolbar.html
index 4123aa8..cb9f63a 100644
--- a/cool-demos/expand-editor-and-show-toolbar.html
+++ b/cool-demos/expand-editor-and-show-toolbar.html
@@ -1,7 +1,7 @@
 <!--
     This demo showcases a minimalist editor that expands on focus
     It uses the TinyMCE inline mode to allow for greater control
-        over the toolbar position and behavior.
+    over the toolbar position and behavior.
 -->
 
 <!doctype html>
@@ -23,27 +23,27 @@
             icons: 'thin',
 
             // Enable inline mode
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
 
             // Render the toolbar in this container.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#fixed_toolbar_container
             fixed_toolbar_container: '#editor-toolbar',
 
             // Makes menus move upwards
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_location
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar_location
             toolbar_location: 'bottom',
 
             // Remove the manual image resizing as we're using percentage widths
-            // https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#object_resizing
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#object_resizing
             object_resizing: false,
 
             // Hide the right click context menus
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#contextmenu
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#contextmenu
             contextmenu: false,
 
             // Create three custom toolbar groups
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_groups
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar_groups
             toolbar_groups: {
                 formatgroup: {
                     icon: 'format',
@@ -65,27 +65,27 @@
             // On mobile, toolbar_mode is sliding by default which is not compatible
             // with toolbar_groups. Therefore we explicitly set toolbar_mode to floating
             // on mobile and touch devices.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_mode
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#mobile
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar_mode
+            // https://www.tiny.cloud/docs/tinymce/latest/tinymce-for-mobile/
             mobile: {
                 toolbar_mode: 'floating'
             },
 
             setup: (editor) => {
                 // Apply a custom class to the wrapper element when the editor gets focus
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('focus', () => {
                     document.getElementById('editor-wrap').classList.add('focused');
                 });
 
                 // Remove the custom class when the editor loses focus
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('blur', () => {
                     document.getElementById('editor-wrap').classList.remove('focused');
                 });
 
                 // Register a custom context toolbar for images
-                // https://www.tiny.cloud/docs/ui-components/contexttoolbar/#registeringacontexttoolbar
+                // https://www.tiny.cloud/docs/tinymce/latest/contexttoolbar/#registeringacontexttoolbar
                 editor.ui.registry.addContextToolbar('editimage', {
                     predicate: (node) => {
                         return node.nodeName.toLowerCase() === 'img'
@@ -96,24 +96,24 @@
                 });
 
                 // Register a custom edit image button
-                // https://www.tiny.cloud/docs/ui-components/toolbarbuttons/
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addButton('editimage', {
                     icon: 'edit-block',
                     onAction: () => {
                         // Display the image dialog
-                        // https://www.tiny.cloud/docs/plugins/image/#commands
+                        // https://www.tiny.cloud/docs/tinymce/latest/image/#commands
                         editor.execCommand('mceImage');
                     }
                 });
 
                 // Register a custom remove image button
-                // https://www.tiny.cloud/docs/ui-components/toolbarbuttons/
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addButton('removeimage', {
                     icon: 'remove',
                     onAction: () => {
                         // Get the currently selected content (called "node") and delete it.
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/
-                        // https://www.tiny.cloud/docs/api/tinymce.html/tinymce.html.node/
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.node/
                         const node = tinymce.activeEditor.selection.getNode();
                         node.remove();
                     }
@@ -206,7 +206,7 @@
             font-weight: strong;
         }
 
-        {
+        hr {
             margin: 1.5rem 0;
             padding: .5rem 0;
             border: 0;
diff --git a/cool-demos/slash-commands.html b/cool-demos/slash-commands.html
index 13d8c28..28f08a0 100644
--- a/cool-demos/slash-commands.html
+++ b/cool-demos/slash-commands.html
@@ -2,7 +2,8 @@
     This demo showcases how to use the autocompleter API to make a
     slash commands feature and wrap it in a custom plugin
 
-    Learn more about making custom plugins at https://www.tiny.cloud/docs/advanced/creating-a-plugin/
+    Learn more about making custom plugins at 
+    https://www.tiny.cloud/docs/tinymce/latest/creating-a-plugin/
 -->
 
 <!doctype html>
@@ -15,7 +16,7 @@
 
     <script>
         // Register a TinyMCE plugin
-        // https://www.tiny.cloud/docs/advanced/creating-a-plugin/#registeringacustompluginwithtinymce
+        // https://www.tiny.cloud/docs/tinymce/latest/creating-a-plugin/#registeringacustompluginwithtinymce
         tinymce.PluginManager.add('commandpalette', function (editor) {
 
             // An array holding all unique details of each menu item in the
@@ -26,15 +27,15 @@
                     icon: 'h1',
                     action: () => {
                         // Declare what content to be inserted, or what command to execute.
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#insertContent
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#execCommand
                         editor.insertContent('<h1>Heading 1</h1>');
 
                         // Certain actions, like headings, inserts a placeholder to provide some user feedback
                         // But since the placeholder is meant to be replaced
                         // we can force TinyMCE to select the placeholder so the user can just begin
                         // typing their heading
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/
                         editor.selection.select(editor.selection.getNode());
                     }
                 },
@@ -118,13 +119,13 @@
             ]
 
             // Set up the autocompleter
-            // https://www.tiny.cloud/docs/ui-components/autocompleter/
+            // https://www.tiny.cloud/docs/tinymce/latest/autocompleter/
             editor.ui.registry.addAutocompleter('insertActions', {
 
                 // The character to trigger the autocompleter,
                 // the number of characters to type before displaying the autocompleter menu and,
                 // configure the autocompleter to display a menu opposed a row of icons
-                // https://www.tiny.cloud/docs/ui-components/autocompleter/#configurationoptions
+                // https://www.tiny.cloud/docs/tinymce/latest/autocompleter/
                 trigger: '/',
                 minChars: 0,
                 columns: 1,
@@ -156,7 +157,6 @@
                     });
 
                     // Here the matched autocompleter objects are built
-                    // https://www.tiny.cloud/docs/ui-components/autocompleter/#autocompleteitem
                     return new Promise(function (resolve) {
                         var results = matchedActions.map(function (action) {
                             return {
@@ -172,24 +172,23 @@
                 },
 
                 // Perform the action the end-user selected from the autocompleter menu
-                // https://www.tiny.cloud/docs/ui-components/autocompleter/#configurationoptions
                 onAction: function (autocompleteApi, rng, action, meta) {
 
                     // In this use-case we want to remove the trigger character and any
                     // further characters the user typed to filter the actions.
                     // We begin by creating a selection around those characters
-                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/
+                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/
                     editor.selection.setRng(rng);
 
                     // Delete the selection
-                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
+                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#execCommand
                     editor.execCommand('Delete');
 
                     // Perform the selected action
                     meta.action();
 
                     // Finally we hide the autocompleter menu
-                    // https://www.tiny.cloud/docs/ui-components/autocompleter/#api
+                    // https://www.tiny.cloud/docs/tinymce/latest/autocompleter/#api
                     autocompleteApi.hide();
                 }
             });
@@ -200,7 +199,7 @@
         tinymce.init({
             selector: "textarea",
             // Remember to include all relevant plugins here which you included in your `insertActions` array above
-            plugins: "commandpalette insertdatetime lists link code table image codesample media checklist",
+            plugins: "commandpalette insertdatetime lists link code table image codesample media checklist tableofcontents",
             height: 400,
         });
     </script>
diff --git a/cool-demos/wordprocessor.html b/cool-demos/wordprocessor.html
index 3ab209b..5e8b46c 100644
--- a/cool-demos/wordprocessor.html
+++ b/cool-demos/wordprocessor.html
@@ -19,21 +19,21 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#basic-toolbar-options
             toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image addcomment showcomments  | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
 
             // Tip! The height option accepts any valid CSS for height
             // If your editor is expected to get larger than the viewport
             // the sticky toolbar is useful for keeping the controls
             // always visible
-            // https://www.tiny.cloud/docs/tinymce/6/editor-size-options/
-            // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/#toolbar_sticky
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-size-options/
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#toolbar_sticky
             height: '700px',
             toolbar_sticky: true,
 
             // You can customize the look and feel of the ui using skins and icons,
             // In this demo we are using an alternative icon pack
-            // https://www.tiny.cloud/docs/tinymce/6/editor-icons/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
             icons: 'thin',
 
             // The autosave plugin helps prevent data loss if the end-user accidentally
@@ -41,13 +41,13 @@
             // There are many configuration options to control things like save interval
             // and retention. The below option loads any unsaved content from local
             // storage into TinyMCE
-            // https://www.tiny.cloud/docs/tinymce/6/autosave/#autosave_restore_when_empty
+            // https://www.tiny.cloud/docs/tinymce/latest/autosave/#autosave_restore_when_empty
             autosave_restore_when_empty: true,
 
             // The Tiny Comments plugin enables you to quickly get collaboration up and
             // running. There are a lot of customizability but here are the most basic
             // options to get you started
-            // https://www.tiny.cloud/docs/tinymce/6/introduction-to-tiny-comments/
+            // https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/
             tinycomments_mode: 'embedded',
             tinycomments_author: 'john.doe',
             tinycomments_author_name: 'John Doe',
@@ -57,7 +57,7 @@
             // In a real world scenario, with much more custom styles for headings
             // links, tables, images etc, it's recommended to use the content_css
             // option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/tinymce/6/add-css-options/
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/
             content_style: `
                 body {
                     background: #fff;
diff --git a/email/marketing-email-inline-mode-fixed-toolbar.html b/email/marketing-email-inline-mode-fixed-toolbar.html
index f258924..85c84cf 100644
--- a/email/marketing-email-inline-mode-fixed-toolbar.html
+++ b/email/marketing-email-inline-mode-fixed-toolbar.html
@@ -25,7 +25,7 @@
             selector:'.tinymce',
 
             // Enable inline mode
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -33,39 +33,39 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'undo redo | styles | bold italic underline strikethrough | forecolor backcolor | link image emoticons | alignleft aligncenter alignright | bullist numlist | code removeformat',
 
             // Toggle the menubar off to get a leaner visual experience
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // To remove the outside borders of the toolbar we use a premium skin.
             // You can also easily create your own borderless skin too.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/borderless-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/borderless-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
             skin: 'borderless',
 
             // Render the inline toolbar into this element
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#fixed_toolbar_container
             fixed_toolbar_container: '.toolbar',
 
             // In emails we rarely use target for links so we hide the
             // target drop down in the link dialog
-            // https://www.tiny.cloud/docs/plugins/link/#target_list
+            // https://www.tiny.cloud/docs/tinymce/latest/link/#link_target_list
             target_list: false,
 
             // We don't want users to be able to resize images by using
             // drag and drop because it can break layout templates.
-            // https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#object_resizing
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#object_resizing
             object_resizing : false,
 
             // The formats option is where custom formatting options are defined.
             // In this case we define a couple of headings and a button appearance
             // for links. HTML Emails require inlining the CSS. Fortunately the
             // styles property makes that easy.
-            // https://www.tiny.cloud/docs/configure/content-formatting/#formats
+            // https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#formats
             formats: {
                 h1: { block: 'h1', styles: { fontSize: '32px' } },
                 h2: { block: 'h2', styles: { fontSize: '18px' } },
@@ -73,7 +73,7 @@
             },
 
             // The style_formats option controls the styleformat toolbar button menu
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats
+            // https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#style_formats
             style_formats: [
                 { title: 'Paragraph', format: 'p' },
                 { title: 'Heading 1', format: 'h1' },
@@ -84,13 +84,13 @@
 
             setup: (editor) => {
                 // Apply a custom class to the wrapper element when the editor gets focus
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('focus', () => {
                     document.getElementById('editor').classList.add('focused');
                 });
 
                 // Remove the custom class when the editor loses focus
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('blur', () => {
                     document.getElementById('editor').classList.remove('focused');
                 });
diff --git a/email/marketing-email-inline-mode.html b/email/marketing-email-inline-mode.html
index bbe5b9f..a927a26 100644
--- a/email/marketing-email-inline-mode.html
+++ b/email/marketing-email-inline-mode.html
@@ -25,7 +25,7 @@
             selector:'.tinymce',
 
             // Enable inline mode
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -33,39 +33,40 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic underline | link image emoticons | align bullist numlist | code removeformat',
 
             // Toggle the menubar off to get a leaner visual experience
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // To make the toolbar take up a bit less space we use the Small
             // premium skin and the small premium icon pack (this is completely
             // optional). You can also create your own small skin and icon pack.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/snow-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
-            // https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
+            // https://www.tiny.cloud/docs/tinymce/latest/snow-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/
+            // https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/
             skin: 'small',
             icons: 'small',
 
             // In emails we rarely use target for links so we hide the
             // target drop down in the link dialog
-            // https://www.tiny.cloud/docs/plugins/link/#target_list
+            // https://www.tiny.cloud/docs/tinymce/latest/link/#link_target_list
             target_list: false,
 
             // We don't want users to be able to resize images by using
             // drag and drop because it can break layout templates.
-            // https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#object_resizing
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#object_resizing
             object_resizing : false,
 
             // The formats option is where custom formatting options are defined.
             // In this case we define a couple of headings and a button appearance
             // for links. HTML Emails require inlining the CSS. Fortunately the
             // styles property makes that easy.
-            // https://www.tiny.cloud/docs/configure/content-formatting/#formats
+            // https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#formats
             formats: {
                 h1: { block: 'h1', styles: { fontSize: '32px' } },
                 h2: { block: 'h2', styles: { fontSize: '18px' } },
@@ -73,7 +74,7 @@
             },
 
             // The style_formats option controls the styleformat toolbar button menu
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats
+            // https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#style_formats
             style_formats: [
                 { title: 'Paragraph', format: 'p' },
                 { title: 'Heading 1', format: 'h1' },
diff --git a/email/marketing-email.html b/email/marketing-email.html
index 357606d..51f80ae 100644
--- a/email/marketing-email.html
+++ b/email/marketing-email.html
@@ -1,17 +1,17 @@
 <!--
-    The proper way to do marketing email with TinyMCE is to use
-    inline mode, and move all table layout outside of TinyMCE.
-    Tables in TinyMCE are first and formost to display tabular
-    data, not for layouts do doing table layouts in TinyMCE,
-    while possible, is not recommended. It is simply too easy
-    to accidentally break the design.
-
-    Here is an example of how to do a marketing email using
-    TinyMCE inline mode. The TinyMCE editor is only applied
-    to the rich text parts. All the table layout are outside
-    of TinyMCE. This makes it easy for you to to add other
-    logic such as inserting blocks and drag and drop reordering
-    yourself.
+The proper way to do marketing email with TinyMCE is to use
+inline mode, and move all table layout outside of TinyMCE.
+Tables in TinyMCE are first and formost to display tabular
+data, not for layouts do doing table layouts in TinyMCE,
+while possible, is not recommended. It is simply too easy
+to accidentally break the design.
+
+Here is an example of how to do a marketing email using
+TinyMCE inline mode. The TinyMCE editor is only applied
+to the rich text parts. All the table layout are outside
+of TinyMCE. This makes it easy for you to to add other
+logic such as inserting blocks and drag and drop reordering
+yourself.
 -->
 
 <!doctype html>
@@ -22,109 +22,75 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
     <script>
-        // An array containing the available tokens.
-        var tokens = [
-            { text: "name.first", value: "{{name.first}}" },
-            { text: "name.last", value: "{{name.last}}" },
-            { text: "name.full", value: "{{name.full}}" },
-            { text: "email.home", value: "{{email.home}}" },
-            { text: "email.work", value: "{{email.work}}" },
-        ];
-
         tinymce.init({
             selector:'.tinymce',
-
+            
             // Enable inline mode
-            // https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
-
+            
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'link lists image emoticons advcode editimage linkchecker',
-
+            plugins: 'link lists image emoticons advcode editimage linkchecker mergetags',
+            
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#basic-toolbar-options
-            toolbar: 'styles | bold italic forecolor backcolor link image emoticons tokens | align bullist numlist | code removeformat',
-
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
+            toolbar: 'styles | bold italic forecolor backcolor link image emoticons mergetags | align bullist numlist | code removeformat',
+            
             // Toggle the menubar off to get a leaner visual experience
-            // https://www.tiny.cloud/docs/tinymce/6/menus-configuration-options/
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
-
+            
             // In emails we rarely use target for links so we hide the
             // target drop down in the link dialog
-            // https://www.tiny.cloud/docs/tinymce/6/link/#link_target_list
+            // https://www.tiny.cloud/docs/tinymce/latest/link/#link_target_list
             target_list: false,
-
+            
             // We don't want users to be able to resize images by using
             // drag and drop because it can break layout templates.
-            // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#object_resizing
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#object_resizing
             object_resizing : false,
-
+            
+            // Easily configure replacement values using merge tags plugin
+            // https://www.tiny.cloud/docs/tinymce/latest/mergetags/
+            mergetags_list: [
+                { title: "First name", value: "name.first" },
+                { title: "Last name", value: "name.last" },
+                { title: "Full name", value: "name.full" },
+                { title: "Work email", value: "email.work" },                    
+                { title: "Home email", value: "email.home" },
+            ],
+            
             // The formats option is where custom formatting options are defined.
             // In this case we define a couple of headings and a button appearance
             // for links. HTML Emails require inlining the CSS. Fortunately the
             // styles property makes that easy.
-            // https://www.tiny.cloud/docs/tinymce/6/content-formatting/
+            // https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#formats
             formats: {
                 h1: { block: 'h1', styles: { fontSize: '24px', color: '#335dff' } },
                 h2: { block: 'h2', styles: { fontSize: '18px' } },
                 calltoaction: { selector: 'a', styles: { backgroundColor: '#335dff', padding: '12px 16px', color: '#ffffff', borderRadius: '4px', textDecoration: 'none', display: 'inline-block'} }
             },
-
+            
             // The style_formats option controls the styleformat toolbar button menu
-            // https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#style_formats
+            // https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#style_formats
             style_formats: [
-                { title: 'Paragraph', format: 'p' },
-                { title: 'Heading 1', format: 'h1' },
-                { title: 'Heading 2', format: 'h2' },
-                { title: 'Button styles'},
-                { title: 'Call-to-action', format: 'calltoaction' },
+            { title: 'Paragraph', format: 'p' },
+            { title: 'Heading 1', format: 'h1' },
+            { title: 'Heading 2', format: 'h2' },
+            { title: 'Button styles'},
+            { title: 'Call-to-action', format: 'calltoaction' },
             ],
-
+            
             // An inline editor is "invisible" when there are no content in the editor
             // Make sure to use the placeholder option to show the user where to write
-            // https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#placeholder
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#placeholder
             placeholder: "Write here...",
-
+            
             // Toolbar_mode controls how the toolbar behaves when toolbar buttons do not
             // fit on one row. Wrap displays all toolbar buttons wrapped over multiple rows
-            // https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar_mode
-            toolbar_mode: "wrap",
-
-            // The noneditable_regexp option transforms matched text into spans which is then
-            // visually styled to look like tags.
-            // https://www.tiny.cloud/docs/tinymce/6/content-behavior-options/#noneditable_regexp
-            noneditable_regexp: /\{\{[^\}]+\}\}/g, // matches {{handlebar}},
-
-            setup: (editor) => {
-                // Instead of defining a custom icon pack, we can register individual
-                // icons using the API.
-                // This particular icon is from the Material Icon library
-                // https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor.ui.registry/#addIcon
-                // https://fonts.google.com/icons
-                editor.ui.registry.addIcon('token', '<svg enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h24v24h-24z" fill="none"/><path d="m21 12-4.37 6.16c-.37.52-.98.84-1.63.84h-3v-2h3l3.55-5-3.55-5h-10v3h-2v-3c0-1.1.9-2 2-2h10c.65 0 1.26.31 1.63.84zm-11 3h-3v-3h-2v3h-3v2h3v3h2v-3h3z"/></svg>');
-
-                // Register a custom toolbar menu button to insert tokens
-                // https://www.tiny.cloud/docs/tinymce/6/custom-menu-toolbar-button/
-                editor.ui.registry.addMenuButton("tokens", {
-                    icon: "token",
-                    tooltip: "Insert token",
-                    fetch: (callback) => {
-                        var items = tokens.map((token) => {
-                            return {
-                                type: "menuitem",
-                                text: token.text,
-                                onAction: () => {
-                                    // Insert content at the location of the cursor.
-                                    // https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor/#insertContent
-                                    editor.insertContent(token.value);
-                                }
-                            }
-                        });
-                        callback(items);
-                    }
-                });
-            },
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar_mode
+            toolbar_mode: "wrap",                        
         });
     </script>
     <style>
@@ -132,33 +98,33 @@
             padding: 0;
             margin: 0;
             box-sizing: border-box;
-
+            
         }
-
+        
         .container {
             background-color: #f9f9fb;
             margin: 0 auto;
             max-width: 1000px;
         }
-
+        
         .email {
             max-width: 840px;
             margin: auto;
         }
-
+        
         .toolbar {
             background-color: #fff;
             height: 42px;
             padding-top: 48px;
             border-bottom: 1px solid rgba(0, 0, 0, .1);
         }
-
+        
         .tinymce:focus {
             border-radius: 0.5px;
             box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
             outline: 0;
         }
-
+        
         .mceNonEditable {
             background-color: #e7ecff;
             padding: 1px 0;
@@ -169,65 +135,65 @@
     </style>
 </head>
 <body>
-
-<div class="container">
-    <div class="toolbar"></div>
-    <div class="email">
-        <table style="background-color: #f9f9fb; width: 100%; padding: 32px 0" border="0">
-            <tr>
-                <td align="center">
-                    <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #dfe3ec; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
-                        <tr>
-                            <td style="padding: 16px 64px 0;">
-                                <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
-                                    <p>Hey {{first.name}}</p>
-                                    <h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
-                                    <p>Are you:</p>
-                                    <p><strong>Building an new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
-                                    <p><strong>Building email marketing software</strong> (i.e. the next Mailchimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
-                                    <p>Then use the only WYSIWYG editor that is trusted by 1,5M devs!</p>
-                                    <p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>
-                                </div>
-                            </td>
-                        </tr>
-
-                        <tr>
-                            <td style="padding: 0 64px 16px;">
-                                <table border="0" style="width: 100%;">
-                                    <tr>
-                                        <td style="width: 48%; vertical-align: top;">
-                                            <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
-                                                <p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
-                                                <h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
-                                                <p>Play with this demo to see how our email WYSIWYG editor works!</p>
-                                            </div>
-                                        </td>
-
-                                        <td style="width: 4%"></td>
-
-                                        <td style="width: 48%; vertical-align: top;">
-                                            <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
-                                                <p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
-                                                <h2 style="font-size: 18px;">Try Premium plugins!</h2>
-                                                <p>Sign up for a 14 day trial and try out all our premium plugins!</p>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-
-                        <tr>
-                            <td style="background-color: #eff0f6; padding: 24px 64px;">
-                                <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
-                                <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
-                            </td>
-                        </tr>
-                    </table>
-                </td>
-            </tr>
-        </table>
+    
+    <div class="container">
+        <div class="toolbar"></div>
+        <div class="email">
+            <table style="background-color: #f9f9fb; width: 100%; padding: 32px 0" border="0">
+                <tr>
+                    <td align="center">
+                        <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #dfe3ec; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
+                            <tr>
+                                <td style="padding: 16px 64px 0;">
+                                    <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
+                                        <p>Hey {{first.name}}</p>
+                                        <h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
+                                        <p>Are you:</p>
+                                        <p><strong>Building an new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
+                                        <p><strong>Building email marketing software</strong> (i.e. the next Mailchimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
+                                        <p>Then use the only WYSIWYG editor that is trusted by 1,5M devs!</p>
+                                        <p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>
+                                    </div>
+                                </td>
+                            </tr>
+                            
+                            <tr>
+                                <td style="padding: 0 64px 16px;">
+                                    <table border="0" style="width: 100%;">
+                                        <tr>
+                                            <td style="width: 48%; vertical-align: top;">
+                                                <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
+                                                    <p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
+                                                    <h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
+                                                    <p>Play with this demo to see how our email WYSIWYG editor works!</p>
+                                                </div>
+                                            </td>
+                                            
+                                            <td style="width: 4%"></td>
+                                            
+                                            <td style="width: 48%; vertical-align: top;">
+                                                <div class="tinymce" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
+                                                    <p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
+                                                    <h2 style="font-size: 18px;">Try Premium plugins!</h2>
+                                                    <p>Sign up for a 14 day trial and try out all our premium plugins!</p>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </table>
+                                </td>
+                            </tr>
+                            
+                            <tr>
+                                <td style="background-color: #eff0f6; padding: 24px 64px;">
+                                    <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
+                                    <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+            </table>
+        </div>
     </div>
-</div>
 </body>
 </html>
diff --git a/email/webmail-rich-text-editor.html b/email/webmail-rich-text-editor.html
index f431c9d..73d4e2d 100644
--- a/email/webmail-rich-text-editor.html
+++ b/email/webmail-rich-text-editor.html
@@ -14,8 +14,8 @@
             selector:'#editor',
 
             // If we don't need the menubar or statusbar we can hide them
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/statusbar-configuration-options/#statusbar
             menubar: false,
             statusbar: false,
 
@@ -25,24 +25,24 @@
             // To create an interesting visual appearance we use a premium skin
             // called outside which moves the toolbar outside of the editor
             // frame. You can also create your own skin and icon pack.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/outside-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
-            skin: 'outside',
+            // https://www.tiny.cloud/docs/tinymce/latest/naked-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
+            skin: 'naked',
 
             // Set the height of the editor. Tip! Any css unit works, even calc().
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#height
+            // https://www.tiny.cloud/docs/tinymce/latest/autoresize/#min_height
             height: '300px',
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'undo redo | formatgroup | link emoticons image | code removeformat',
 
             // Toolbar groups is a useful concept for organizing the toolbar into
             // sub toolbars that show up as a floating toolbar.
             // This particular toolbar config is inspired by Gmail.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_groups
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar_groups
             toolbar_groups: {
                 formatgroup: {
                     icon: 'format',
@@ -52,7 +52,7 @@
             },
 
             // Move the toolbar below the editable area
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_location
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar_location
             toolbar_location: 'bottom',
 
             // The formats option is where custom formatting options are defined.
@@ -62,7 +62,7 @@
             // p tags that lacks style attribute. The first item in the array will
             // be the one applied when choosing the format via the styles
             // toolbar button.
-            // https://www.tiny.cloud/docs/configure/content-formatting/#formats
+            // https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#formats
             formats: {
                 h1: { block: 'h1', styles: { fontSize: '24px' } },
                 h2: { block: 'h2', styles: { fontSize: '18px' } },
@@ -76,13 +76,13 @@
             // An alternative to the styles toolbar button is the styles button
             // which is a simpler version of the styles button. It is configured
             // using the block_formats option.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#block_formats
+            // https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#block_formats
             block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',
 
             // In order to force TinyMCE to apply inline styles to the default paragraph
             // text we can use the forced_root_block together with forced_root_block_attrs.
-            // https://www.tiny.cloud/docs/configure/content-filtering/#forced_root_block
-            // https://www.tiny.cloud/docs/configure/content-filtering/#forced_root_block_attrs
+            // https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#forced_root_block
+            // https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#forced_root_block_attrs
             forced_root_block: 'p',
             forced_root_block_attrs: { 'style': 'font-size: 14px; font-family: helvetica, arial, sans-serif;'},
         });
@@ -98,14 +98,22 @@
             max-width: 800px;
             margin: auto;
         }
+
+        .editor-wrap {
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            overflow: hidden;
+        }
     </style>
 </head>
 
 <body>
 <main>
-    <textarea id="editor">
-        <p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Demo showcasing inline styles and email friendly custom formats. Caveat is that remove styles doesn't work properly. It removes our "default" inline font-size and there is no way around that.</p>
-    </textarea>
+    <div class="editor-wrap">
+        <textarea id="editor">
+            <p style="font-size: 14px; font-family: helvetica, arial, sans-serif;">Demo showcasing inline styles and email friendly custom formats. Caveat is that remove styles doesn't work properly. It removes our "default" inline font-size and there is no way around that.</p>
+        </textarea>
+    </div>
 </main>
 </body>
 </html>
diff --git a/images/image-alt-text-context-form.html b/images/image-alt-text-context-form.html
index 13c7d89..4425f73 100644
--- a/images/image-alt-text-context-form.html
+++ b/images/image-alt-text-context-form.html
@@ -17,7 +17,7 @@
             selector: '#editor',
 
             // If we don't need the menubar we can hide it
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -25,14 +25,14 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic underline  | link image | code',
 
             // To make sure the toolbar never scrolls out of view which can happen when
             // writing very long texts while using the autoresize plugin. This option
             // sticks the toolbar to the top of the screen while the editable area
             // is visible
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_sticky
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#toolbar_sticky
             toolbar_sticky: true,
 
             // The following css will be injected into the editor, extending
@@ -40,8 +40,8 @@
             // In a real world scenario, with much more custom styles for headings
             // links, tables, images etc, it's strongly recommended to use the
             // content_css option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 body {
                     min-height: 100vh;
@@ -56,11 +56,11 @@
             setup: (editor) => {
                 // Instead of defining a custom icon pack, we can register individual
                 // icons using the API.
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.registry/#addIcon
                 editor.ui.registry.addIcon('alt-text', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M16.144 3.372l1.286.772L7.658 20.43l-1.286-.772.614-1.024c-1.099-.627-2.13-1.451-3.089-2.436a18.159 18.159 0 0 1-2.06-2.547l-.127-.192-.223-.35-.18-.3-.14-.247a6.025 6.025 0 0 1-.054-.101 1 1 0 0 1 0-.922l.054-.101.14-.247.18-.3.223-.35.127-.192a18.159 18.159 0 0 1 2.06-2.547C6.2 5.438 8.908 4 12 4c1.19 0 2.324.213 3.4.61l.744-1.238zM12 6C9.523 6 7.289 7.187 5.33 9.198A16.178 16.178 0 0 0 3.153 12l.217.342c.04.063.083.127.128.195a16.178 16.178 0 0 0 1.832 2.265c.845.868 1.742 1.583 2.687 2.114l1.216-2.027a4 4 0 0 1 4.015-6.69l1.099-1.832A7.704 7.704 0 0 0 12 6z"/><path d="M18.007 18.002C16.204 19.272 14.199 20 12 20a9.71 9.71 0 0 1-2.231-.258l1.064-1.74h7.174zM13.279 14h8.641l-.057.085c-.465.652-.989 1.299-1.572 1.917L12.056 16l1.223-2zm2.444-4h6.2l.121.175.246.366.223.35.18.3.14.247.054.101A1 1 0 0 1 23 12h-8.5l1.223-2zm4.38-2.198l.186.198h-3.344l1.175-1.922a15.12 15.12 0 0 1 1.983 1.724z"/></g></svg>');
 
                 // Register a custom context toolbar shown when selecting any image
-                // https://www.tiny.cloud/docs/ui-components/contexttoolbar/#registeringacontexttoolbar
+                // https://www.tiny.cloud/docs/tinymce/latest/contexttoolbar/#registeringacontexttoolbar
                 editor.ui.registry.addContextToolbar('imageContextToolbar', {
                     predicate: function (node) {
                         return node.nodeName.toLowerCase() === 'img'
@@ -72,7 +72,7 @@
 
                 // The context form contains our alt text input field. It also manages
                 // the toolbar button that opens the context form.
-                // https://www.tiny.cloud/docs/ui-components/contextform/
+                // https://www.tiny.cloud/docs/tinymce/latest/contextform/
                 editor.ui.registry.addContextForm('alttext', {
                     // Define the button used in our context toolbar to open the context form
                     launch: {
@@ -88,11 +88,11 @@
                     initValue: () => {
                         // First we get the selected element. It can be either the
                         // callout itself or any child element within it.
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#getnode
+                        // // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/#getNode
                         const node = editor.selection.getNode();
 
                         // Get the selected image's alt attribute text
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#getattrib
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/#getAttrib
                         const altText = tinymce.DOM.getAttrib(node, 'alt');
 
                         // Return the the alt text to be displayed as initial value
@@ -109,18 +109,18 @@
                             onAction: (contextFormApi) => {
                                 // Working directly with the DOM requires manually adding
                                 // the actions to the undo stack.
-                                // https://www.tiny.cloud/docs/api/tinymce/tinymce.undomanager/
+                                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.undomanager/
                                 editor.undoManager.transact(() => {
                                     // Get the selected element (in this case our image)
-                                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#getnode
+                                    // // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/#getNode
                                     const node = editor.selection.getNode();
 
                                     // Set the alt attribute on the selected image
-                                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#setattrib
+                                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/#setAttrib
                                     const alt = tinymce.DOM.setAttrib(node, 'alt', contextFormApi.getValue());
 
                                     // Close the context form
-                                    // https://www.tiny.cloud/docs/ui-components/contextform/#formapi
+                                    // https://www.tiny.cloud/docs/tinymce/latest/contextform/#formapi
                                     contextFormApi.hide();
                                 });
                             }
@@ -131,7 +131,7 @@
                             icon: 'close',
                             onAction: (contextform) => {
                                 // The cancel button simply closes the context form
-                                // https://www.tiny.cloud/docs/ui-components/contextform/#formapi
+                                // https://www.tiny.cloud/docs/tinymce/latest/contextform/#formapi
                                 contextform.hide();
                             }
                         },
diff --git a/images/toggle-image-size-context-toolbar.html b/images/toggle-image-size-context-toolbar.html
index 7693c0b..b1d1882 100644
--- a/images/toggle-image-size-context-toolbar.html
+++ b/images/toggle-image-size-context-toolbar.html
@@ -29,55 +29,55 @@
 
             // Since we are primarily using quickbars, we hide the menubar,
             // toolbar and statusbar
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
-            //https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/statusbar-configuration-options/#statusbar
             menubar: false,
             toolbar: false,
             statusbar: false,
 
             // To remove the outside borders from editor we can the borderless
             // premium skin. You can also  create your own borderless skin.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/borderless-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/borderless-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
             skin: 'borderless',
 
             // Tip! The height option accepts any valid CSS for height
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#height
+            // https://www.tiny.cloud/docs/tinymce/latest/customize-ui/#changing-editor-height-and-width
             height: '100vh',
 
             // Make the custom icon pack available in TinyMCE. A custom icon pack
             // extends the default icon pack.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
             icons: 'image-context-toolbar',
 
             // Define the toolbar that shows up when selecting text based content
-            // https://www.tiny.cloud/docs/plugins/quickbars/#quickbars_selection_toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/quickbars/#quickbars_selection_toolbar
             quickbars_selection_toolbar: 'styles | bold italic underline backcolor | align bullist | quicklink code',
 
             // Define the toolbar that shows up when selecting images. Notice the
             // custom botton we have put last. See further down how it's set up.
-            // https://www.tiny.cloud/docs/plugins/quickbars/#quickbars_image_toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/quickbars/#quickbars_image_toolbar
             quickbars_image_toolbar: 'wideimage fullwidthimage  asideimage | imageproperties',
 
             // We don't want users to be able to resize images manually. This option
             // will remove the resize handles on images (and tables)
-            // https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#object_resizing
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#object_resizing
             object_resizing : false,
 
             // Hide the image dimension input field from the image properties dialog
-            // https://www.tiny.cloud/docs/plugins/image/#image_dimensions
+            // https://www.tiny.cloud/docs/tinymce/latest/image/#image_dimensions
             image_dimensions: false,
 
             // Enable the user to display image captions via the image properties dialog
-            // https://www.tiny.cloud/docs/plugins/image/#image_caption
+            // https://www.tiny.cloud/docs/tinymce/latest/image/#image_caption
             image_caption: true,
 
             // The formats option is where custom formatting options are defined.
             // In this case we define the different image size formats we want users
             // to be able to select through the image context toolbar.
-            // https://www.tiny.cloud/docs/configure/content-formatting/#formats
+            // https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#formats
             formats: {
                 wide_image: {
                     // Which html element that can accept the format
@@ -105,24 +105,24 @@
 
             setup: (editor) => {
                 // Register a toolbar button for which is used to toggle the images
-                // https://www.tiny.cloud/docs/ui-components/toolbarbuttons/
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addToggleButton('wideimage', {
                     // References the icon identifier in the icon pack at the top of this
                     // document and loaded into TinyMCE using the icons option.
                     icon: 'image-wide',
                     onAction: (api) => {
                         // Issue a command to apply a format
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#execCommand
                         editor.execCommand('mceToggleFormat', false, 'wide_image');
                         // We also need to remove the formats we don't longer want to use
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.formatter/
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.formatter/
                         editor.formatter.remove('full_width_image');
                         editor.formatter.remove('aside_image');
                     },
 					onSetup: (buttonApi) => {
                         // This block of code highlights this button if the selected image
                         // already has the specified format applied
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.formatter/
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.formatter/
 						buttonApi.setActive(editor.formatter.match('wide_image'));
                     	let change = editor.formatter.formatChanged('wide_image', (state) => buttonApi.setActive(state));
                     	return () => {
@@ -168,7 +168,7 @@
                     icon: 'image-options',
                     onAction: (api) => {
                         // the mceImage command opens the image properties dialog
-                        // https://www.tiny.cloud/docs/plugins/image/#commands
+                        // https://www.tiny.cloud/docs/tinymce/latest/image/#commands
                         editor.execCommand('mceImage');
                     }
                 });
@@ -179,8 +179,8 @@
             // In a real world scenario, it's recommended to use the content_css
             // option to load a separate CSS file. Makes editing easier too.
             // We also assume you know enough CSS to make sense of the styles below
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 body {
                     color: #444;
diff --git a/index.html b/index.html
index 4a9fb8f..7ab116b 100644
--- a/index.html
+++ b/index.html
@@ -240,14 +240,14 @@ <h1>TinyMCE Demos</h1>
         <p>TinyMCE is a versatile tool that can be used for a wide variety of text editing tasks. This repository aims to inspire you and demonstrate different approaches to common use cases.</p>
         <p>Every demo has a thorougly documented html file explaining the TinyMCE config as well as links to relevant documentation to make it easy to use these demos as basis for your own projects.</p>
         <p>Make sure you visit the <a href="https://github.com/tinymce/tinymce-demos">Github repository and look through the HTML files</a>. Each demo is carefully documented to help you get the most out of TinyMCE.
-        <p>These demos are released under a MIT license. TinyMCE is licensed under a LGPL or commercial license</p>
+        <p>These demos are released under a MIT license. TinyMCE is available under a commercial license and a subset of the features are open source under the GNU General Public License Version 2 or later</p>
     </header>
 
     <main>
         <section>
             <header id="tinymce-basics">
                 <h2>TinyMCE Basics</h2>
-                <p>The following demos showcase common how-tos like creating toolbar buttons, menu items, formattingS etc.</p>
+                <p>The following demos showcase common how-tos like creating toolbar buttons, menu items, formatting etc.</p>
             </header>
 
             <article>
@@ -288,13 +288,6 @@ <h3><a href="tinymce-basics/bootstrap-rich-text-form.html">Implementing TinyMCE
                 <span class="tag tag-skinning">Skinning</span>
             </article>
 
-            <article>
-                <h3><a href="tinymce-basics/right-aligned-toolbar-button.html">Right aligned toolbar buttons</a></h3>
-                <p>Normally we <strong>strongly advice against overriding the TinyMCE CSS</strong> to tweak the editor. The proper way to change the visual appearance is to make a skin. That said, there is always exceptions to a good rule and moving a couple of toolbar buttons to the right side of the toolbar is one example of such an exeception.</p>
-                <span class="tag">Beginner</span>
-                <span class="tag tag-toolbar">Toolbar</span>
-            </article>
-
             <article>
                 <h3><a href="tinymce-basics/format-link-as-button.html">Format links to look like buttons</a></h3>
                 <p>This demo shows how to format a link into a call-to-action button by creating a custom format that applies a class to a link turning it into a button.</p>
@@ -355,40 +348,7 @@ <h3><a href="tables/table-row-templates.html">Table row templates</a></h3>
                 <span class="tag tag-buttons-and-menus">Buttons & Menus</span>
                 <span class="tag tag-plugin">Plugin:Tables</span>
             </article>
-        </section>
-
-        <section>
-            <header id="tokens">
-                <h2>Tokens</h2>
-                <p>Tokens – or mail merge variables such as {{name.first}} – are often found in document automation and email editors. Here are three ways you can implement them in TinyMCE</p>
-            </header>
-
-            <article>
-                <h3><a href="tokens/text-based-token.html">Text-based tokens</a></h3>
-                <p>Transform any text based tokens such as {{name.first}} into spans that we can style and make noneditable – and transform back to pure text when storing the content. Perfect for existing systems as this approach is non-destructive to your content.</p>
-                <span class="tag">Beginner</span>
-                <span class="tag tag-buttons-and-menus">Buttons & Menus</span>
-                <span class="tag tag-content-styling">Content Styling</span>
-                <span class="tag tag-plugin">Plugin:Noneditable</span>
-            </article>
-
-            <article>
-                <h3><a href="tokens/web-component-token.html">Web component tokens</a></h3>
-                <p>With the january 2020 release of Microsoft Edge, all major browsers now supports web components. Here we  create a custom element called <code>&lt;inline-token&gt;</code> that becomes our token. Tip: You can render the custom element using vue/angular/react in your front-end</p>
-                <span class="tag">Master</span>
-                <span class="tag tag-buttons-and-menus">Buttons & Menus</span>
-                <span class="tag tag-content-styling">Content Styling</span>
-                <span class="tag tag-custom-elements">Custom Elements</span>
-            </article>
-
-            <article>
-                <h3><a href="tokens/span-based-token.html">Span-based tokens</a></h3>
-                <p>Here we use a span with a class to wrap our token. A simple but powerful approach.</p>
-                <span class="tag">Beginner</span>
-                <span class="tag tag-buttons-and-menus">Buttons & Menus</span>
-                <span class="tag tag-content-styling">Content Styling</span>
-            </article>
-        </section>
+        </section>        
 
         <section>
             <header id="templates">
@@ -396,22 +356,6 @@ <h2>Templates</h2>
                 <p>Examples and ideas how to implement templates and layouts with TinyMCE. For example how to only enable editing on select parts of a document or to enable multiple column support in TinyMCE</p>
             </header>
 
-            <article>
-                <h3><a href="templates-and-layout/advanced-placeholder.html">Advanced Placeholders – pick a template from a blank document</a></h3>
-                <p>This demo shows how to implement an empty page placeholder UI containing complex HTML and buttons to insert templates. This feature is found in popular apps like Notion and Atlassian Confluence among others.</p>
-                <span class="tag">Master</span>
-                <span class="tag tag-content-styling">Content Styling</span>
-                <span class="tag tag-plugin">Plugin:Templates</span>
-            </article>
-
-            <article>
-                <h3><a href="templates-and-layout/multiple-columns-using-css-columns.html">Create a multiple column format using CSS Columns</a></h3>
-                <p>Demo of how to implement columns using CSS Columns and a toolbar button to toggle columns on/off</p>
-                <span class="tag">Intermediate</span>
-                <span class="tag tag-buttons-and-menus">Buttons & Menus</span>
-                <span class="tag tag-formats">Formats</span>
-            </article>
-
             <article>
                 <h3><a href="templates-and-layout/locked-down-template-inline-default.html">Locked down template example 1: using the default inline mode</a></h3>
                 <p>A popular question we get is how to lock down the editor in different ways to force a specific order of elements or prevent formatting. The way to do this is by using the inline mode which will give you more flexibility over the TinyMCE UI. Here is a basic example using the regular inline mode.</p>
diff --git a/package.json b/package.json
index 480c39f..13f2350 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
 {
     "name": "oxide-usecase-demos",
     "version": "1.0.1",
-    "description": "Use Case Demos for TinyMCE 5 Oxide Skin",
+    "description": "Use Case Demos for TinyMCE",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "serve": "browser-sync start --server --files '*.html'"
     },
     "author": "",
-    "license": "ISC",
+    "license": "MIT",
     "dependencies": {
       "browser-sync": "^2.26.5"
     }
diff --git a/tables/customizing-the-table-toolbar.html b/tables/customizing-the-table-toolbar.html
index 4e4f42b..d7ee684 100644
--- a/tables/customizing-the-table-toolbar.html
+++ b/tables/customizing-the-table-toolbar.html
@@ -1,10 +1,8 @@
 <!--
-    Create an alterate table context toolbar! TinyMCE 5.4 introduced
-    a couple of new table APIs we can use to construct an alternative
-    table context toolbar. This demo showcases a table header
-    row/column toggle, a menu for choosing cell background color and
-    keyboard shortcuts for adding table rows and columns among other
-    things
+    Create an alterate table context toolbar! This demo showcases a 
+    table header row/column toggle, a menu for choosing cell background
+    color andkeyboard shortcuts for adding table rows and columns among
+    other things
 -->
 
 <!doctype html>
@@ -20,8 +18,8 @@
         // If you only need to include one or two icons it's easier to
         // use the tinymce.editor.ui.Registry.addIcon() method. An example
         // of that is shown further down in this demo.
-        // https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
-        // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon
+        // https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/
+        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.registry/#addIcon
         tinymce.IconManager.add('customIcons', {
             icons: {
                 'table-column-options': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14zM5 13v5h4v-5H5zm14 0h-4v5h4v-5zm0-7h-4v5h4V6zM5 11h4V6H5v5z"/></svg>',
@@ -32,7 +30,7 @@
             selector:'#editor',
 
             // Toggle the menubar off if it isn't needed
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -40,18 +38,18 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic underline | inserttable link image emoticons | align bullist numlist | code removeformat',
 
             //Set the height of the editor. Tip: Any css value is accepted as a string.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#height
+            // https://www.tiny.cloud/docs/tinymce/latest/customize-ui/#changing-editor-height-and-width
             height: 400,
 
             // The following css will be injected into the editor, extending
             // the default styles. In a real world scenario, it's recommended
             // to use the content_css option to load a separate CSS file.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 table {
                     width: 100%;
@@ -66,22 +64,22 @@
 
             // Make the custom icon pack available in TinyMCE. A custom icon pack
             // extends the default icon pack.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
             icons: 'customIcons',
 
             // In this demo we don't want to use the right click context menus
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#contextmenu
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#contextmenu
             contextmenu: false,
 
             // Tell TinyMCE how to modify the table HTML when converting regular rows
             // to header rows. In this case td's will move into `thead` and be
             // converted to `th`.
-            // https://www.tiny.cloud/docs/plugins/table/#table_header_type
+            // https://www.tiny.cloud/docs/tinymce/latest/table-options/#table_header_type
             table_header_type: 'sectionCells',
 
             // Configure the table context toolbar. The last button is
             // the built in remove table button.
-            // https://www.tiny.cloud/docs/plugins/table/#table_toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#table_toolbar
             table_toolbar: 'celloptions rowoptions columnoptions | tabledelete',
 
             setup: (editor) => {
@@ -92,7 +90,7 @@
                 // object. The keycode numbers 37 to 40 represent the arrow keys.
                 // For a list of javascript keycodes see
                 // https://css-tricks.com/snippets/javascript/javascript-keycodes/
-                // https://www.tiny.cloud/docs/advanced/keyboard-shortcuts/
+                // https://www.tiny.cloud/docs/tinymce/latest/keyboard-shortcuts/
                 editor.addShortcut('alt+37', "Insert column before", () => {
                     menuActionManager.insertColumnBefore();
                 });
@@ -109,10 +107,10 @@
                     menuActionManager.insertRowAfter();
                 });
 
-                // TinyMCE 5.4 introduced improved APIs for inserting tables.
+                // TinyMCE has APIs for inserting tables.
                 // Here's a toolbar button that displays a table grid picker
                 // The table picker is unfortunately undocumented at this stage
-                // https://www.tiny.cloud/docs/ui-components/toolbarbuttons/
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addMenuButton('inserttable', {
                     icon: 'table',
                     tooltip: 'Insert table',
@@ -122,7 +120,7 @@
                                 type: 'fancymenuitem',
                                 fancytype: 'inserttable',
                                 onAction: function(data) {
-                                    // https://www.tiny.cloud/docs/plugins/table/#commands
+                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#commands
                                     editor.execCommand('mceInsertTable', false, { rows: data.numRows, columns: data.numColumns, options: { headerRows: 1 } });
                                 }
                             }
@@ -131,9 +129,9 @@
                 });
 
                 // Create a toolbar menu button to hold all row related options
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-menu-toolbar-button/
                 editor.ui.registry.addMenuButton('rowoptions', {
-                    icon: 'table-row-properties', // Part of the default icon pack: https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/
+                    icon: 'table-row-properties', // Part of the default icon pack: https://www.tiny.cloud/docs/tinymce/latest/editor-icon-identifiers/
                     tooltip: 'Row options',
                     fetch: (callback) => {
                         var items = [
@@ -179,6 +177,7 @@
                                     menuActionManager.deleteRow();
                                 }
                             },
+                            /*                            
                             {
                                 type: 'separator',
                             },
@@ -207,8 +206,8 @@
                                 },
                                 onSetup: (buttonApi) => {
                                     // Check the clipboard for any rows and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/plugins/table/#api
-                                    // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
                                     const state = editor.plugins.table.getClipboardRows().length > 0 ? false : true;
                                     buttonApi.setDisabled(state);
                                 }
@@ -222,19 +221,20 @@
                                 },
                                 onSetup: (buttonApi) => {
                                     // Check the clipboard for any rows and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/plugins/table/#api
-                                    // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
                                     const state = editor.plugins.table.getClipboardRows().length > 0 ? false : true;
                                     buttonApi.setDisabled(state);
                                 }
                             },
+                            */
                         ];
                         callback(items);
                     }
                 });
 
                 // Create a toolbar menu button to hold all row related options
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-menu-toolbar-button/
                 editor.ui.registry.addMenuButton('columnoptions', {
                     icon: 'table-column-options', // Insert the icon from the icon pack at the beginning of this file
                     tooltip: 'Column options',
@@ -282,6 +282,7 @@
                                     menuActionManager.deleteColumn();
                                 }
                             },
+                            /*                            
                             {
                                 type: 'separator',
                             },
@@ -300,7 +301,7 @@
                                 onAction: () => {
                                     menuActionManager.copyColumn();
                                 }
-                            },
+                            },                            
                             {
                                 type: 'menuitem',
                                 text: 'Paste column before',
@@ -310,8 +311,8 @@
                                 },
                                 onSetup: (buttonApi) => {
                                     // Check the clipboard for any cols and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/plugins/table/#api
-                                    // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
                                     const state = editor.plugins.table.getClipboardCols().length > 0 ? false : true;
                                     buttonApi.setDisabled(state);
                                 }
@@ -325,19 +326,20 @@
                                 },
                                 onSetup: (buttonApi) => {
                                     // Check the clipboard for any cols and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/plugins/table/#api
-                                    // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
+                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
                                     const state = editor.plugins.table.getClipboardCols().length > 0 ? false : true;
                                     buttonApi.setDisabled(state);
                                 }
                             },
+                            */
                         ];
                         callback(items);
                     }
                 });
 
                 // Create a toolbar menu button to hold all cell related options
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-menu-toolbar-button/
                 editor.ui.registry.addMenuButton('celloptions', {
                     icon: 'table-cell-properties', // Part of the default icon pack: https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/
                     tooltip: 'Cell options',
@@ -384,84 +386,84 @@
         const menuActionManager = {
             headerRow: () => {
                 // Check the type of the selected table row and inverse it
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#querycommandvaluestableplugin
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#querycommandvaluestableplugin
                 const type = tinymce.activeEditor.queryCommandValue('mceTableRowType') === 'body' ? 'header' : 'body';
 
                 // Apply the inverse table row type.
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableRowType', false, { type });
             },
             insertRowBefore: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableInsertRowBefore');
             },
             insertRowAfter: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableInsertRowAfter');
             },
             deleteRow: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableDeleteRow');
             },
             cutRow: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableCutRow');
             },
             copyRow: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableCopyRow');
             },
             pasteRowBefore: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTablePasteRowBefore');
             },
             pasteRowAfter: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTablePasteRowAfter');
             },
             headerColumn: () => {
                 // Check the type of the selected table column and inverse it
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#querycommandvaluestableplugin
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#querycommandvaluestableplugin
                 const type = tinymce.activeEditor.queryCommandValue('mceTableColType') === 'td' ? 'th' : 'td';
 
                 // Apply the inverse table row type.
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableColType', false, { type });
             },
             insertColumnBefore: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableInsertColBefore');
             },
             insertColumnAfter: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableInsertColAfter');
             },
             deleteColumn: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableDeleteCol');
             },
             cutColumn: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableCutCol');
             },
             copyColumn: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableCopyCol');
             },
             pasteColumnBefore: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTablePasteColBefore');
             },
             pasteColumnAfter: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTablePasteColAfter');
             },
             mergeCells: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableMergeCells');
             },
             splitCell: () => {
-                // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                 tinymce.activeEditor.execCommand('mceTableSplitCells');
             }
         }
@@ -520,19 +522,19 @@
 
                 // Register an TinyMCE icon. This is an alternate way of creating icons
                 // in TinyMCE. The first argument is the icon name, the second is the svg data.
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.registry/#addIcon
                 editor.ui.registry.addIcon(color.icon, color.svg);
 
                 // Push a submenu item onto the the submenu array in the format
                 // specified for menubuttons.
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#menubutton
                 colorMenuItems.push({
                     type: 'menuitem',
                     icon: color.icon,
                     text: color.text,
                     tooltip: color.text + ' background',
                     onAction: () => {
-                        // https://www.tiny.cloud/docs/advanced/editor-command-identifiers/#table
+                        // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table
                         editor.execCommand('mceTableApplyCellStyle', false, { backgroundColor: color.value });
                     }
                 });
diff --git a/tables/table-row-templates.html b/tables/table-row-templates.html
index f1bde00..3223032 100644
--- a/tables/table-row-templates.html
+++ b/tables/table-row-templates.html
@@ -21,7 +21,7 @@
             selector:'#editor',
 
             // Toggle the menubar off if it isn't needed
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -29,38 +29,38 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic underline forecolor backcolor | table link image emoticons | align bullist numlist | code removeformat',
 
             // The Naked premium skin provides a clean look.
             // You can also easily create your own borderless skin too.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/naked/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/naked-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
             skin: 'naked',
 
             // To make sure the toolbar never scrolls out of view which can happen when
             // writing very long texts while using the autoresize plugin. This option
             // sticks the toolbar to the top of the screen while the editable area
             // is visible
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_sticky
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#toolbar_sticky
             toolbar_sticky: true,
 
             // "Thin" is a premium icon pack you get wth the cloud essential plan.
             // See https://www.tiny.cloud for more details and purchasing options
             // You can also create your own icon packs for TinyMCE
-            // https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
+            // https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/
             icons: 'thin',
 
             // When using the autoresize plugin we can set a minimum height of the editor
-            // https://www.tiny.cloud/docs/plugins/autoresize/#min_height
+            // https://www.tiny.cloud/docs/tinymce/latest/autoresize/#min_height
             min_height: 400,
 
             // The following css will be injected into the editor, extending
             // the default styles. In a real world scenario, it's recommended
             // to use the content_css option to load a separate CSS file.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 body {
                     max-width: 780px;
@@ -105,18 +105,18 @@
             // Tell TinyMCE how to modify the table HTML when converting regular rows
             // to header rows. In this case td's will move into `thead` and be
             // converted to `th`.
-            // https://www.tiny.cloud/docs/plugins/table/#table_header_type
+            // https://www.tiny.cloud/docs/tinymce/latest/table-options/#table_header_type
             table_header_type: 'sectionCells',
 
             // Configure the table context toolbar. The last button is
             // the built in remove table button.
-            // https://www.tiny.cloud/docs/plugins/table/#table_toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#table_toolbar
             table_toolbar: 'inserttemplaterow | tabledeleterow tabledelete',
 
             setup: (editor) => {
 
                 // Register a custom toolbar button for opening the badge dialog.
-                // https://www.tiny.cloud/docs/ui-components/toolbarbuttons/
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addButton('inserttemplaterow', {
                     icon: 'table-insert-row-after',
                     text: 'Insert drone status',
@@ -124,8 +124,7 @@
                     onAction: () => {
 
                         // Opens a TinyMCE modal
-                        // https://www.tiny.cloud/docs/ui-components/dialog/
-                        // https://www.tiny.cloud/docs/ui-components/dialogcomponents/
+                        // https://www.tiny.cloud/docs/tinymce/latest/dialog/
                         editor.windowManager.open({
                         title: 'Insert Drone Details',
                         body: {
@@ -173,19 +172,19 @@
                             `;
 
                             // Store any existing table clipboard row data
-                            // https://www.tiny.cloud/docs/plugins/table/#api
+                            // https://www.tiny.cloud/docs/tinymce/latest/table/#api
                             const storedClipboard = editor.plugins.table.getClipboardRows();
 
                             // Set the clipboard data to be the table row element created previously
-                            // https://www.tiny.cloud/docs/plugins/table/#api
+                            // https://www.tiny.cloud/docs/tinymce/latest/table/#api
                             editor.plugins.table.setClipboardRows([tr]);
 
                             // Paste the table clipboard data
-                            // https://www.tiny.cloud/docs/plugins/table/#commands
+                            // https://www.tiny.cloud/docs/tinymce/latest/table/#commands
                             editor.execCommand('mceTablePasteRowAfter');
 
                             // Restore the saved table clipboard row data
-                            // https://www.tiny.cloud/docs/plugins/table/#api
+                            // https://www.tiny.cloud/docs/tinymce/latest/table/#api
                             editor.plugins.table.setClipboardRows(storedClipboard);
 
                             // Close the dialog.
diff --git a/templates-and-layout/README.md b/templates-and-layout/README.md
index 1dfbccc..959c3cf 100644
--- a/templates-and-layout/README.md
+++ b/templates-and-layout/README.md
@@ -1,5 +1,5 @@
 # Templates and Layouts
 
-Examples and ideas how to implement templates and layouts with TinyMCE. For example how to only enable editing on select parts of a document or to enable multiple column support in TinyMCE.
+Examples and ideas how to implement templates and layouts with TinyMCE. For example how to only enable editing on select parts of a document
 
 **Don't miss!** Each HTML file contains detailed comments for each option to help you get started.
diff --git a/templates-and-layout/advanced-placeholder.html b/templates-and-layout/advanced-placeholder.html
deleted file mode 100644
index 98e7b3f..0000000
--- a/templates-and-layout/advanced-placeholder.html
+++ /dev/null
@@ -1,351 +0,0 @@
-<!--
-    Advanced placeholder with templates demo
-
-    This demo shows how to implement an empty page placeholder
-    containing complex HTML and buttons to insert templates.
-    This feature is found in popular apps like Notion and
-    Atlassian Confluence among others.
-
-    Note that this demo is about implementing the UI to display
-    a placeholder and pick a template inside TinyMCE.
--->
-
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Advanced placeholder demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
-
-    <script>
-
-        // For this demo we have created an object that holds all of our
-        // templates. It is up to you to architecture the template storage
-        // and delivery mechanism, including how to create new templates
-        // and modify existing ones.
-        const templates = {
-            project_description: `
-                <h1>Project title</h1>
-                <p>Provide an overview of the project, the desired outcome and the steps involved</p>
-                <h2>Project details</h2>
-                <table style="border-collapse: collapse; width: 100%;" border="1">
-                    <tbody>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">Project Manager</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">Firstname Lastname</span></td>
-                        </tr>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">Start date</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">YYYY-MM-DD</span></td>
-                        </tr>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">End date</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">YYYY-MM-DD</span></td>
-                        </tr>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">Team</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">Team name</span></td>
-                        </tr>
-                    </tbody>
-                </table>
-                <h2>Project content</h2>
-                <p>Continue writing your project documentations here</p>
-            `,
-            meeting_minutes: `
-                <h1>Meeting minutes</h1>
-                <table style="border-collapse: collapse; width: 100%;" border="1">
-                    <tbody>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">Project</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">Firstname Lastname</span></td>
-                        </tr>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">Date</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">YYYY-MM-DD</span></td>
-                        </tr>
-                    </tbody>
-                </table>
-                <h2>Participants</h2>
-                <ul>
-                    <li>Participant 1</li>
-                    <li>Participant 2</li>
-                </ul>
-                <h2>Agenda</h2>
-                <p>The following topics were discussed during the meeting</p>
-                <h3>Topic 1</h3>
-                <p>Topic description</p>
-                <h2>Action points</h2>
-                <ul>
-                    <li>Action item 1</li>
-                    <li>Action item 2</li>
-                </ul>
-            `,
-            replacement_value_example: `
-                <h1>Test report</h1>
-                <p><span style="background-color: #fbeeb8;">The values in the table is dynamically generated using the template plugin replacement values</span></p>
-                <table style="border-collapse: collapse; width: 100%;" border="1">
-                    <tbody>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">Test subject</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">{$username}</span></td>
-                        </tr>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">Date</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;" class="cdate">date</span></td>
-                        </tr>
-                        <tr style="height: 22px;">
-                            <th style="width: 50%; height: 22px; text-align: left; background-color: #ecf0f1;"><span style="font-size: 10pt;">ID</span></th>
-                            <td style="width: 50%; height: 22px;"><span style="font-size: 10pt;">{$userid}</span></td>
-                        </tr>
-                    </tbody>
-                </table>
-                <h2>Test result</h2>
-                <p>Enter test results here</p>
-            `,
-            blank_template: ''
-        };
-
-        tinymce.init({
-            selector: '#editor',
-
-            // The template plugin is needed to use the replace values feature
-            // to make dynamic templates (though there is many ways to achieve
-            // dynamic templates.).
-            // Tip! To make TinyMCE leaner, only include the plugins you actually need
-            plugins: 'link lists code visualblocks table image template',
-
-            // Nothing special about the toolbar in this demo.
-            toolbar: 'undo redo | styles | bold italic strikethrough backcolor | bullist numlist link image hr | code',
-
-            // Tip! The height option accepts any valid CSS for height
-            height: 'calc(100vh - 4rem)',
-
-            // The template plugin allows inserting variables inside a template which is
-            // then replaced with these values upon insertion. This is one way to
-            // achieve dynamic templates. Another way would be to generate the whole template
-            // dynamically upon request in which case the template_replace_values can be removed.
-            // https://www.tiny.cloud/docs/plugins/template/#template_replace_values
-            template_replace_values: {
-                username : 'Jack Black',
-                userid : '991234-22'
-            },
-
-            // A simple way to get dates into the templates is using the creation date feature
-            // of the template plugin.
-            // https://www.tiny.cloud/docs/plugins/template/#template_cdate_classes
-            template_cdate_classes: 'cdate creationdate',
-
-            setup: editor => {
-
-                // This is where we define our placeholder. It can be any HTML.
-                // The content is actually being inserted into the editor, but
-                // is filtered out on save/export to avoid it being submitted to
-                // the backend.
-                // Each button also has content editable false to make the button
-                // clickable.
-                // Please have a look at the CSS below as it's a big part of the
-                // UI as well.
-                // Notice also that we're not using any javascript inside the content
-                // to avoid XSS vulnerability issues. Instead each button is identified
-                // using an id.
-                editor.on('init', () => {
-                    editor.setContent(`
-                        <div id="placeholder">
-                            <h1>Document Title</h1>
-                            <p>Start a new blank document or insert a template below</p>
-                            <button type="button" id="project_description" contenteditable="false" class="doc">Project Description</button>
-                            <button type="button" id="meeting_minutes" contenteditable="false" class="doc">Meeting minutes</button>
-                            <button type="button" id="replacement_value_example" contenteditable="false" class="doc">Replacements value example</button>
-                            <button type="button" id="blank_template" contenteditable="false" class="new-doc">Empty page</button>
-                            <button type="button" id="manage_templates" contenteditable="false" class="manage">Manage templates</button>
-                        </div>
-                    `);
-                });
-
-                // When the editor is clicked we monitor what is being clicked and
-                // take appropriate actions. This is how we dedect if a insert template
-                // button has been clicked. This event is triggered for every click inside
-                // TinyMCE.
-                // https://www.tiny.cloud/docs/advanced/events/
-                const placeholderManager = (e) => {
-
-                    // Check if the content contains the placeholder inserted above.
-                    // The get() function looks for an id attribute.
-                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#get
-                    const placeholderExists = editor.dom.get('placeholder');
-
-                    // If a button html element is being clicked this will return true.
-                    const button = editor.dom.getParent(e.target, 'button');
-
-                    if (placeholderExists) {
-
-                        // If a insert button is button is being clicked or to proceed with an
-                        // empty document.
-                        if (button) {
-
-                            // In our demo we have a button that manages templates (a feature you have
-                            // to build yourself). We first check if that is the button being clicked.
-                            // If not, it means we want to insert a template.
-                            if (button.id === 'manage_templates') {
-                                alert('Managing templates is done by the host app (not part of tinymce)');
-                            } else {
-
-                                //
-                                // OPTION 1
-                                //
-                                // If replacement values is not needed, then setContent can be used.
-                                // This also means we're not using the template plugin so all references
-                                // to it can be removed. Remove the alternative insert template block
-                                // below.
-                                //
-
-                                /*
-                                // Inject the template into the content, replacing the placeholder
-                                // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent
-                                editor.setContent(templates[button.id]);
-                                // Optionally set the cursor at the beginning of the document
-                                editor.selection.setCursorLocation(editor.getBody().firstChild, 0);
-                                // Optionally scroll the document to the top if the template is larger
-                                // than the editor viewport.
-                                editor.getWin().scrollTo(0, 0);
-                                */
-
-                                //
-                                // OPTION 2
-                                //
-                                // Use the template plugin to get replace values working (variables
-                                // inside templates).
-                                //
-
-                                // Remove all content from the editor
-                                editor.setContent('');
-                                // Force set the selection at the beginning of the empty document where
-                                // we want the template to be inserted
-                                // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#setcursorlocation
-                                editor.selection.setCursorLocation(editor.getBody().firstChild, 0);
-                                // Insert the template
-                                // https://www.tiny.cloud/docs/plugins/template/#commands
-                                editor.execCommand('mceInsertTemplate', false, templates[button.id]);
-                                // Optionally once again set the cursor at the beginning of the document (optional)
-                                editor.selection.setCursorLocation(editor.getBody().firstChild, 0);
-                                // Optionally scroll to the top if the inserted template is larger than
-                                // the editor viewport
-                                editor.getWin().scrollTo(0, 0);
-                            }
-                        } else {
-                            // In this demo we want to start an empty document with a title.
-                            // This does not force having a title for a document, it's simply
-                            // a convenience feature.
-                            editor.undoManager.transact(() => {
-                                editor.setContent('<h1><br></h1>');
-                            });
-                        }
-                    }
-                };
-
-                // Bind the click event listener to the placeholder manager function
-                editor.once('click tap', placeholderManager);
-
-                editor.on('Undo', () => {
-                    // Rebind the click event listener when the editor is reverted back
-                    // to the original content
-                    if (!editor.undoManager.hasUndo()) {
-                        editor.once('click tap', placeholderManager);
-                    }
-                });
-
-                editor.on('PreInit', () => {
-                    // To prevent the placeholder to be submitted out of TinyMCE we
-                    // remove it upon serialization. In this case, any <div> tag
-                    // will be removed, so adapt it to your needs.
-                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilter
-                    editor.serializer.addNodeFilter('div', nodes => {
-                        nodes.forEach(node => {
-                            node.remove();
-                        });
-                    });
-                });
-            },
-
-            // The following css will be injected into the editor, extending
-            // the default styles.
-            // In a real world scenario, with much more custom styles for headings
-            // links, tables, images etc, it's strongly recommended to use the
-            // content_css option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
-            content_style: `
-                body {
-                    max-width: 720px;
-                    margin: 2rem auto;
-                }
-
-                #placeholder {
-                    color: #aaa;
-                    display: flex;
-                    flex-direction: column;
-                    min-height: calc(100vh - 4rem);
-                    -webkit-user-select: none; /* Prevent any selections on the element */
-                    user-select: none;
-                }
-
-                #placeholder * {
-                    -webkit-user-select: none; /* Prevent any selections on the element */
-                    user-select: none;
-                }
-
-                #placeholder h1 {
-                    margin: 0;
-                }
-
-                #placeholder button {
-                    -webkit-appearance: none;
-                    background: url('images/template-icon-document.png') .25rem center no-repeat transparent;
-                    background-size: 20px 20px;
-                    border-radius: .25rem;
-                    border: none;
-                    color: #aaa;
-                    cursor: default;
-                    display: block;
-                    font-family: inherit;
-                    font-size: 1rem;
-                    margin: .15rem -.25rem;
-                    outline: none;
-                    padding: .35rem .35rem .35rem calc(.5rem + 20px);
-                    text-align: left;
-                    transition: background-color .2s;
-                }
-
-                #placeholder button:hover {
-                    background-color: #f4f4f4;
-                }
-
-                #placeholder button.new-doc {
-                    background-image: url('images/template-icon-new-document.png');
-                }
-
-                #placeholder button.manage {
-                    background-image: url('images/template-icon-manage.png');
-                }
-	        `
-        });
-    </script>
-    <style>
-        body {
-            margin: 2rem;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        }
-
-        main {
-            max-width: 1024px;
-            margin: auto;
-        }
-    </style>
-</head>
-<body>
-<main>
-    <textarea id="editor"></textarea>
-</main>
-</body>
-</html>
diff --git a/templates-and-layout/locked-down-template-inline-bordered.html b/templates-and-layout/locked-down-template-inline-bordered.html
index 265bc8a..42f6240 100644
--- a/templates-and-layout/locked-down-template-inline-bordered.html
+++ b/templates-and-layout/locked-down-template-inline-bordered.html
@@ -20,7 +20,7 @@
             // You have to wire up the persistent storage yourself, for example
             // getting the editable area's DOM tree, serlialize it and send it
             // to the backend using a hidden inputfield.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -28,43 +28,50 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'undo redo | styles | bold italic strikethrough backcolor | link image | align bullist numlist',
 
             // Toggle the menubar off to get a leaner visual experience
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // Text to show when the editor is empty
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#placeholder
             placeholder: 'Page body',
 
+            // To remove the outside borders of the toolbar we use a premium skin.
+            // You can also easily create your own borderless skin too.
+            // https://www.tiny.cloud/docs/tinymce/latest/borderless-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
+            skin: 'borderless',
+
             // Render the inline toolbar in this element
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#fixed_toolbar_container
             fixed_toolbar_container: '#toolbar',
 
-            // Make the toolbar always visible (requires TinyMCE 5.5)
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_persist
+            // Make the toolbar always visible
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#persistent-inline-editor-toolbar-options
             toolbar_persist: true,
 
             setup: (editor) => {
                 // Disable the UI when the editor has loaded
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.ui/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('SkinLoaded', () => {
                     editor.ui.setEnabled(false);
                 });
 
                 // Enable the UI when the editable area gains focus
-                // TODO: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.ui/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('focus', () => {
                     editor.ui.setEnabled(true);
                 });
 
                 // Disable the UI when the editor looses focus
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.ui/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('blur', () => {
                     editor.ui.setEnabled(false);
                 });
diff --git a/templates-and-layout/locked-down-template-inline-context-toolbars.html b/templates-and-layout/locked-down-template-inline-context-toolbars.html
index 84cb99e..1e4e592 100644
--- a/templates-and-layout/locked-down-template-inline-context-toolbars.html
+++ b/templates-and-layout/locked-down-template-inline-context-toolbars.html
@@ -20,26 +20,26 @@
             // You have to wire up the persistent storage yourself, for example
             // getting the editable area's DOM tree, serlialize it and send it
             // to the backend using a hidden inputfield.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
 
             // The quickbars enable the context toolbars shown on selection
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            // https://www.tiny.cloud/docs/plugins/quickbars/
+            // https://www.tiny.cloud/docs/tinymce/latest/quickbars/
             plugins: 'quickbars anchor autolink link lists',
 
             // When using quickbars, we disable the regular toolbar and menubar
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             toolbar: false,
             menubar: false,
 
             // Configure the toolbar button shown in the context toolbar
-            // https://www.tiny.cloud/docs/plugins/quickbars/#quickbars_selection_toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/quickbars/#quickbars_selection_toolbar
             quickbars_selection_toolbar: 'styles | bold italic strikethrough backcolor link | align | bullist numlist',
 
             // Text to show when the editor is empty
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#placeholder
             placeholder: 'Page body'
         });
     </script>
diff --git a/templates-and-layout/locked-down-template-inline-default.html b/templates-and-layout/locked-down-template-inline-default.html
index a5c1808..6a20ecc 100644
--- a/templates-and-layout/locked-down-template-inline-default.html
+++ b/templates-and-layout/locked-down-template-inline-default.html
@@ -20,7 +20,7 @@
             // You have to wire up the persistent storage yourself, for example
             // getting the editable area's DOM tree, serlialize it and send it
             // to the backend using a hidden inputfield.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -28,15 +28,15 @@
 
             // This option allows you to specify the buttons and the order that
             // they will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic strikethrough backcolor link | code',
 
             // Toggle the menubar off to get a leaner visual experience
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // Text to show when the editor is empty
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#placeholder
             placeholder: 'Page body'
         });
     </script>
diff --git a/templates-and-layout/locked-down-template-inline-fixed-toolbar.html b/templates-and-layout/locked-down-template-inline-fixed-toolbar.html
index 21ce280..20fcc63 100644
--- a/templates-and-layout/locked-down-template-inline-fixed-toolbar.html
+++ b/templates-and-layout/locked-down-template-inline-fixed-toolbar.html
@@ -20,7 +20,7 @@
             // You have to wire up the persistent storage yourself, for example
             // getting the editable area's DOM tree, serlialize it and send it
             // to the backend using a hidden inputfield.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#inline
+            // https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/
             inline: true,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
@@ -28,54 +28,54 @@
 
             // This option allows you to specify the buttons and the order that
             // they will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'undo redo | styles | bold italic strikethrough backcolor | align bullist numlist | link image media blockquote | indent outdent | code removeformat',
 
             // Toggle the menubar off to get a leaner visual experience
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // Text to show when the editor is empty
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#placeholder
             placeholder: 'Page body',
 
             // Render the inline toolbar in this element
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#fixed_toolbar_container
             fixed_toolbar_container: '#toolbar',
 
-            // Make the toolbar always visible (requires TinyMCE 5.5)
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_persist
+            // Make the toolbar always visible
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#persistent-inline-editor-toolbar-options
             toolbar_persist: true,
 
             // A nice borderless web-appy skin is our premium skin called Snow, here
             // used together with the Thin premium icon pack
             // You can also easily create your own borderless skin too.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/snow-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
-            // https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
+            // https://www.tiny.cloud/docs/tinymce/latest/snow-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
+            // https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/
             skin: 'snow',
             icons: 'thin',
 
             setup: (editor) => {
                 // Disable the UI when the editor has loaded
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.ui/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('SkinLoaded', () => {
                     editor.ui.setEnabled(false);
                 });
 
                 // Enable the UI when the editable area gains focus
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.ui/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('focus', () => {
                     editor.ui.setEnabled(true);
                 });
 
                 // Disable the UI when the editor looses focus
-                // https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.ui/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('blur', () => {
                     editor.ui.setEnabled(false);
                 });
diff --git a/templates-and-layout/multiple-columns-using-css-columns.html b/templates-and-layout/multiple-columns-using-css-columns.html
deleted file mode 100644
index 16f1167..0000000
--- a/templates-and-layout/multiple-columns-using-css-columns.html
+++ /dev/null
@@ -1,114 +0,0 @@
-<!--
-    A simple demo showing how to enable CSS columns in TinyMCE
--->
-
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Columns demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
-
-    <script>
-        // An iconpack holds our custom button's SVG icons.
-        // Tip! A custom icon pack does not have to be a separate file
-        tinymce.IconManager.add('customIcons', {
-            icons: {
-                'columns': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill-rule="evenodd"><rect width="8" height="2" x="3" y="5" rx="1"/><rect width="8" height="2" x="13" y="5" rx="1"/><rect width="8" height="2" x="3" y="9" rx="1"/><rect width="8" height="2" x="13" y="9" rx="1"/><rect width="8" height="2" x="3" y="13" rx="1"/><rect width="8" height="2" x="13" y="13" rx="1"/><rect width="8" height="2" x="3" y="17" rx="1"/><rect width="6" height="2" x="13" y="17" rx="1"/></g></svg>',
-            }
-        });
-
-        tinymce.init({
-            selector: '#editor',
-
-            // Tip! To make TinyMCE leaner, only include the plugins you actually need
-            plugins: 'link lists code visualblocks',
-
-            // We have put our custom callout button last.
-            toolbar: 'undo redo | styles | bold italic strikethrough backcolor | columns | bullist link callout',
-
-            // Tip! The height option accepts any valid CSS for height
-            height: 'calc(100vh)',
-
-            // Use the skin option to change the appearance of TinyMCE.
-            // Here we're using the premium skin called Borderless
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            skin: 'borderless',
-
-            // Make the custom icon pack available in TinyMCE. A custom icon pack
-            // extends the default icon pack.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
-            icons: 'customIcons',
-
-            // The formats option is where custom formatting options are defined.
-            // Here we add a format called "col" that wraps a div around the selected
-            // elements.
-            // https://www.tiny.cloud/docs/configure/content-formatting/#formats
-            formats: {
-                col: {block: "div", wrapper: true}
-            },
-
-            setup: (editor) => {
-                // Here we register a custom toggle toolbar button to toggle the "Col"
-                // format on and off.
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton
-                editor.ui.registry.addToggleButton('columns', {
-                    icon: 'columns',
-                    tooltip: 'Make columns',
-                    onAction: (api) => {
-                        // Toggle the col format when pressed
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
-                        editor.execCommand('mceToggleFormat', false, 'col');
-                    },
-                    onSetup: function (api) {
-                        editor.formatter.formatChanged('col', function (state) {
-                            api.setActive(state);
-                        });
-                    }
-                });
-            },
-
-            // The content CSS option loads the CSS file that controls the content
-            // within TinyMCE. In this case we load a premium content_css from
-            // the Tiny cloud CDN.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
-            content_css: 'document',
-
-            // The following css will be injected into the editor, extending
-            // the default styles.
-            // In a real world scenario, with much more custom styles for headings
-            // links, tables, images etc, it's recommended to use the content_css
-            // option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
-            content_style: `
-                div {
-                    columns: 2;
-                }
-
-                div > * {
-                    margin-top: 0;
-                }
-	        `
-        });
-    </script>
-    <style>
-        body {
-            margin: 0rem;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        }
-    </style>
-</head>
-<body>
-<main>
-    <textarea id="editor">
-        <h1>Legal fineprint</h1>
-        <div>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a molestie nisl, at sodales diam. Vivamus ullamcorper convallis odio, ut lacinia sem. Proin in dui sit amet justo hendrerit imperdiet. Nullam ante felis, tincidunt et bibendum ut, pellentesque sit amet est. Proin cursus varius lorem ut porttitor. Duis ac velit eget purus vestibulum finibus. Nulla facilisi. Donec sit amet erat metus. Phasellus id ullamcorper sapien, eget vehicula lectus. Integer at mi id sapien dignissim gravida id ac metus.</p>
-            <p>Duis vel varius quam. Donec rhoncus nunc id arcu molestie, a auctor ipsum viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas id interdum lorem</p>
-        </div>
-    </textarea>
-</main>
-</body>
-</html>
diff --git a/tinymce-basics/badges.html b/tinymce-basics/badges.html
index b937889..356847b 100644
--- a/tinymce-basics/badges.html
+++ b/tinymce-basics/badges.html
@@ -23,20 +23,20 @@
             height: 'calc(100vh - 4rem)',
 
             // If we don't need the menubar we can hide it
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
             menubar: false,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'code table noneditable',
+            plugins: 'code table',
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic underline  | badge table | code',
 
             // The formats option is where custom formatting options are defined.
             // In this case we define a format for our badge
-            // https://www.tiny.cloud/docs/configure/content-formatting/#formats
+            // https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#formats
             formats: {
                 badge: {
                     // Declare that a badge should be wrapped in a span
@@ -58,7 +58,7 @@
             // regular text after the element. The `inline_boundaries_selector` allows us
             // to use the arrow keys to escape a badge and continue typing regular text
             // before and afterwards.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#inline_boundaries_selector
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#inline_boundaries_selector
             inline_boundaries_selector: 'a[href],code,.mce-annotation,span.badge',
 
             // The following css will be injected into the editor, extending
@@ -66,8 +66,8 @@
             // In a real world scenario, with much more custom styles for headings
             // links, tables, images etc, it's strongly recommended to use the
             // content_css option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 span.badge {
                     background-color: gray;
@@ -83,11 +83,11 @@
             setup: (editor) => {
                 // Instead of defining a custom icon pack, we can register individual
                 // icons using the API.
-                https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon
+                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.registry/#addIcon
                 editor.ui.registry.addIcon('badge', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><g fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2" transform="rotate(-45 11.894 11.644)"><path d="M5 7h10.343a3 3 0 0 1 2.121.879l3.415 3.414a.997.997 0 0 1 0 1.414l-3.415 3.414a3 3 0 0 1-2.12.879H5a.997.997 0 0 1-1-1V8a.997.997 0 0 1 1-1z"/><path stroke-linecap="round" transform="rotate(-135 15.828 12)" d="M16.414 11.414L15.707 12.121"/></g></svg>');
 
                 // Register a custom toolbar button for opening the badge dialog.
-                // https://www.tiny.cloud/docs/ui-components/toolbarbuttons/
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addButton('badge', {
                     icon: 'badge',
                     tooltip: 'Insert/edit badge',
@@ -98,12 +98,12 @@
                         const backgroundColor = function() {
 
                             // Fetch the node of the current selection.
-                            // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/
+                            // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/
                             node = editor.selection.getNode();
 
                             // Check if the node has the badge class, if so
                             // it will have a background color style.
-                            // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/
+                            // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/
                             if (editor.dom.hasClass(node, 'badge')) {
                                 return node.style.backgroundColor;
                             }
@@ -127,8 +127,7 @@
 
                         // Open a TinyMCE modal where the user can set the badge's
                         // background and text color.
-                        // https://www.tiny.cloud/docs/ui-components/dialog/
-                        // https://www.tiny.cloud/docs/ui-components/dialogcomponents/
+                        // https://www.tiny.cloud/docs/tinymce/latest/dialog/
                         editor.windowManager.open({
                             title: 'Insert/edit Badge',
                             body: {
@@ -168,32 +167,32 @@
                                 var data = dialog.getData();
 
                                 // Get the currently selected node.
-                                // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/
+                                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/
                                 const node = editor.selection.getNode();
 
                                 // Working directly with the DOM often requires manually adding
                                 // the actions to the undo stack.
-                                // https://www.tiny.cloud/docs/api/tinymce/tinymce.undomanager/
+                                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.undomanager/
                                 editor.undoManager.transact(() => {
                                     // Check if the selected node is a badge.
-                                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/
+                                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/
                                     if (editor.dom.hasClass(node, 'badge')) {
                                         // If the selection is a badge, we manipulate the styles directly
                                         // instead of using the formatter to set a new format which caused
                                         // nested spans (it creates a badge inside the badge).
-                                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#setstyles
+                                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/#setStyles
                                         editor.dom.setStyles(node, {'background-color': data.backgroundcolor, 'color': data.textcolor});
                                     }
                                     else {
                                         // If not a badge, then apply the badge format to the current selection
                                         // or the word the text caret is currently placed in.
-                                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.formatter/#apply
+                                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.formatter/#apply
                                         editor.formatter.apply('badge', {styles: `background-color: ${data.backgroundcolor}; color: ${data.textcolor};`});
                                     }
                                 });
 
                                 // Tell TinyMCE that the ui has been updated.
-                                // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#nodechanged
+                                // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#nodeChanged
                                 editor.nodeChanged();
 
                                 // Close the dialog.
diff --git a/tinymce-basics/bootstrap-rich-text-form.html b/tinymce-basics/bootstrap-rich-text-form.html
index a8ef2dc..9f8c238 100644
--- a/tinymce-basics/bootstrap-rich-text-form.html
+++ b/tinymce-basics/bootstrap-rich-text-form.html
@@ -15,8 +15,8 @@
             selector:'#editor',
 
             // If we don't need the menubar or statusbar we can hide them
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/statusbar-configuration-options/#statusbar
             menubar: false,
             statusbar: false,
 
@@ -25,44 +25,44 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'h1 h2 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help fullscreen ',
 
             // We use the Bootstrap premium skin to make TinyMCE match the
             // visual style of Bootstrap, primarily colors and the dialogs.
             // You can also create your own bootstrap skin.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/outside-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/bootstrap-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
             skin: 'bootstrap',
             
             // We also add the new Bootstrap premium icon pack
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/ (Coming in v5.7)
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
-            // https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
+            // https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/
             icons: 'bootstrap',
 
             // Setting the minimum height when using the autoresize plugin
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#min_height
+            // https://www.tiny.cloud/docs/tinymce/latest/autoresize/#min_height
             min_height: 400,
 
             // Set the whitespace between the bottom most row and the bottom of the editor
-            // https://www.tiny.cloud/docs/plugins/autoresize/#autoresize_bottom_margin
+            // https://www.tiny.cloud/docs/tinymce/latest/autoresize/#autoresize_bottom_margin
             autoresize_bottom_margin: 20,
 
             // To make sure the toolbar never scrolls out of view which can happen when
             // writing very long texts while using the autoresize plugin. This option
             // sticks the toolbar to the top of the screen while the editable area
             // is visible
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_sticky
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#toolbar_sticky
             toolbar_sticky: true,
 
             setup: (editor) => {
                 // Apply the Bootstrap focus outline and associated animation
                 // Read more about different editor events in the documentation
-                // https://www.tiny.cloud/docs/advanced/events/
+                // https://www.tiny.cloud/docs/tinymce/latest/events/
                 editor.on('init', () => {
-                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getcontainer
+                    // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getContainer
                     editor.getContainer().style.transition="border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
                 });
                 editor.on('focus', () => {
diff --git a/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html b/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html
index 7fa3bef..185f418 100644
--- a/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html
+++ b/tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html
@@ -28,7 +28,7 @@
             selector: "#editor",
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need
-            plugins: "link lists code noneditable",
+            plugins: "link lists code",
 
             // We have put our custom callout button last.
             toolbar: "undo redo | styles | bold italic strikethrough backcolor | bullist link callout",
@@ -40,18 +40,19 @@
             // don't want to be editable. First we make the root
             // Callout element non-editable, then we define the
             // parts of the Callout that is editable.
-            // https://www.tiny.cloud/docs/plugins/noneditable/
+            // https://www.tiny.cloud/docs/tinymce/latest/non-editable-content-options/
+
             noneditable_noneditable_class: 'callout',
             noneditable_editable_class: 'content',
 
             // Hide the right click context menus to avoid conflict with
             // the context toolbars
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#contextmenu
+            // https://www.tiny.cloud/docs/tinymce/latest/contextmenu/#available-context-menu-sections
             contextmenu: false,
 
             // Make the custom icon pack available in TinyMCE. A custom icon pack
             // extends the default icon pack.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
             icons: 'customIcons',
 
             // We use the menu option to define custom menu items
@@ -61,15 +62,14 @@
             // all menu items in the whole menu, you cannot simply append
             // a menu item to an existing menu.
             // For a list of in which menu the default menu items goes, see
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menu
-            // https://www.tiny.cloud/docs/ui-components/menuitems/
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#example-the-tinymce-default-menu-items
             menu: {
                 insert: {title: 'Insert', items: 'link callout'}
             },
 
             setup: (editor) => {
                 // Register a custom toolbar button that inserts the callout
-                // https://www.tiny.cloud/docs/ui-components/toolbarbuttons/
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addButton('callout', {
                     icon: 'callout',
                     tooltip: 'Insert callout',
@@ -78,7 +78,7 @@
                         // It is wise to include an empty paragraph to
                         // avoid having text be inserted directly under
                         // the div.
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#insertContent
                         tinymce.activeEditor.insertContent(`
                             <div class="callout">
                                 <div class="content"><p>Callout</p></div>
@@ -99,17 +99,17 @@
                     onAction: function () {
                         // First we get the selected element. It can be either the
                         // callout itself or any child element within it.
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#getnode
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/#getNode
                         const node = tinymce.activeEditor.selection.getNode();
 
                         // Then we traverse up the DOM tree to make sure we target
                         // the callout element if it wasn't the selected node.
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#getparent
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/#getParent
                         const callout = tinymce.activeEditor.dom.getParent(node, '.callout');
 
                         // Then we remove and add the neccesseary classes.
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#removeclass
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#addclass
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/#removeClass
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/#addClass
                         tinymce.DOM.removeClass(callout, 'red');
                         tinymce.DOM.addClass(callout, 'yellow');
                     }
@@ -148,26 +148,26 @@
                     onAction: function () {
                         // First we get the selected element. It can be either the
                         // callout itself or any child element within it.
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#getnode
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/#getNode
                         const node = tinymce.activeEditor.selection.getNode();
 
                         // Then we traverse up the DOM tree to make sure we target
                         // the callout element if it wasn't the selected node.
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.domutils/#getparent
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/#getParent
                         const callout = tinymce.activeEditor.dom.getParent(node, '.callout');
 
                         // Make the callout the selected element
-                        // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#select
+                        //https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/#select
                         tinymce.activeEditor.selection.select(callout);
 
                         // Finally we issue a delete command to remove the selected callout
-                        // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
+                        // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#execCommand
                         tinymce.activeEditor.execCommand('delete');
                     }
                 });
 
                 // Register a custom context toolbar
-                // https://www.tiny.cloud/docs/ui-components/contexttoolbar/#registeringacontexttoolbar
+                // https://www.tiny.cloud/docs/tinymce/latest/contexttoolbar/#registeringacontexttoolbar
                 editor.ui.registry.addContextToolbar('callout', {
                     predicate: function (node) {
                         // Return true if the node has the callout class.
@@ -231,8 +231,8 @@
             // In a real world scenario, with much more custom styles for headings
             // links, tables, images etc, it's recommended to use the content_css
             // option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 .callout {
                     margin: 1rem 0;
diff --git a/tinymce-basics/fonts.html b/tinymce-basics/fonts.html
index c9db58a..2561c6a 100644
--- a/tinymce-basics/fonts.html
+++ b/tinymce-basics/fonts.html
@@ -19,7 +19,7 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: "undo redo | styles | fontfamily | fontsize | bold italic strikethrough | bullist link | code",
 
             // Tip! The height option accepts any valid CSS for height
@@ -28,7 +28,7 @@
             // Declare the fonts that should show up in menus. Any font used here must also be included in the `font_css`.
             // https://www.tiny.cloud/docs/configure/editor-appearance/#font_formats
             // https://www.tiny.cloud/docs/configure/editor-appearance/#fontsize_formats
-            font_formats: 'Sacramento=Sacramento; Cookie=Cookie; Great Vibes=Great Vibes; Fredoka One=Fredoka One; Alfa Slab One=Alfa Slab One; Satisfy=Satisfy; Permanent Marker=Permanent Marker; Staatliches=Staatliches; Abril Fatface=Abril Fatface; Dancing Script=Dancing Script; Pacifico=Pacifico; Josefin Sans=Josefin Sans; Montserrat=Montserrat; Mogra=Mogra; Andale Mono=andale mono; Arial=arial; Arial Black=arial black; Book Antiqua=book antiqua; Comic Sans MS=comic sans ms; Courier New=courier new; Georgia=georgia; Helvetica=helvetica; Impact=impact; Symbol=symbol; Tahoma=tahoma; Terminal=terminal; Times New Roman=times new roman; Verdana=verdana; Webdings=webdings; Wingdings=wingdings',
+            font_family_formats: 'Sacramento=Sacramento; Cookie=Cookie; Great Vibes=Great Vibes; Fredoka One=Fredoka One; Alfa Slab One=Alfa Slab One; Satisfy=Satisfy; Permanent Marker=Permanent Marker; Staatliches=Staatliches; Abril Fatface=Abril Fatface; Dancing Script=Dancing Script; Pacifico=Pacifico; Josefin Sans=Josefin Sans; Montserrat=Montserrat; Mogra=Mogra; Andale Mono=andale mono; Arial=arial; Arial Black=arial black; Book Antiqua=book antiqua; Comic Sans MS=comic sans ms; Courier New=courier new; Georgia=georgia; Helvetica=helvetica; Impact=impact; Symbol=symbol; Tahoma=tahoma; Terminal=terminal; Times New Roman=times new roman; Verdana=verdana; Webdings=webdings; Wingdings=wingdings',
             fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 60px 72px 84px',
 
             // The `font_css` option allows you to declare font import statements that
@@ -38,7 +38,7 @@
             //     @import url("https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Cookie|Dancing+Script|Fredoka+One|Great+Vibes|Josefin+Sans:400,400i,700,700i|Mogra|Montserrat:400,400i,700,700i|Pacifico|Permanent+Marker|Sacramento|Satisfy|Staatliches&display=swap");
             // but can also include @font-face declarations.
             // Read more about using web fonts at https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
-            // https://www.tiny.cloud/docs/configure/content-appearance/#font_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#font_css
             font_css: 'fonts.css',
         });
     </script>
@@ -55,7 +55,7 @@
 <main>
     <textarea id="editor">
         <h1><span style="font-family: 'Fredoka One';">Using custom <span style="font-family: Staatliches;">fonts</span> with <span style="font-family: 'Abril Fatface';">TinyMCE</span></span></h1>
-        <p><span style="font-family: 'Josefin Sans';">This demo showcases using the <a href="https://www.tiny.cloud/docs/configure/content-appearance/#font_css">font_css option</a> to define custom fonts.</span></p>
+        <p><span style="font-family: 'Josefin Sans';">This demo showcases using the <a href="https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#font_css">font_css option</a> to define custom fonts.</span></p>
     </textarea>
 </main>
 </body>
diff --git a/tinymce-basics/format-link-as-button.html b/tinymce-basics/format-link-as-button.html
index 4c96006..5a70d61 100644
--- a/tinymce-basics/format-link-as-button.html
+++ b/tinymce-basics/format-link-as-button.html
@@ -23,17 +23,17 @@
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic underline | link image emoticons | align bullist numlist | code removeformat',
 
             //Set the height of the editor. Tip: Any css value is accepted as a string.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#height
+            // https://www.tiny.cloud/docs/tinymce/latest/customize-ui/#changing-editor-height-and-width
             height: 400,
 
             // The formats option is where custom formatting options are defined.
             // If you're looking for email friendly call-to-action button links,
             // take a look at the email/marketing-email-inline-mode.html demo.
-            // https://www.tiny.cloud/docs/configure/content-formatting/#formats
+            // https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#formats
             formats: {
                 // We name our format "calltoaction"
                 calltoaction: {
@@ -45,7 +45,7 @@
             },
 
             // The style_formats option controls the styleformat toolbar button menu
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats
+            // https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#style_formats
             style_formats: [
                 { title: 'Paragraph', format: 'p' },
                 { title: 'Heading 1', format: 'h1' },
@@ -57,8 +57,8 @@
             // The following css will be injected into the editor, extending
             // the default styles. In a real world scenario, it's recommended
             // to use the content_css option to load a separate CSS file.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
                 .btn {
                     background-color: #706FD3;
diff --git a/tinymce-basics/right-aligned-toolbar-button.html b/tinymce-basics/right-aligned-toolbar-button.html
deleted file mode 100644
index 29e7675..0000000
--- a/tinymce-basics/right-aligned-toolbar-button.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!--
-    Normally we strongly advice against overriding the TinyMCE CSS
-    to tweak the editor. The proper way to change the visual
-    appearance is to make a skin. That said, there is always
-    exceptions to a good rule and moving a couple of toolbar buttons
-    to the right side of the toolbar is one example of such an
-    exception.
-
-    Since the toolbar is using flexbox it's pretty easy to just add
-    one simple CSS override to move a toolbar button group over to
-    the other side. However, there are some caveats:
-
-    * It is not supported
-    * It probably has issues with right-to-left languages
-    * Future updates to TinyMCE might change the UI HTML and CSS,
-      thus breaking the UI
-
-    But if you know what you are doing and accept the consequences,
-    this is how you move buttons! See the Style tag below for
-    instructions.
--->
-
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Right aligned toolbar buttons</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
-
-    <script>
-        tinymce.init({
-            selector: "#editor",
-
-            // Tip! To make TinyMCE leaner, only include the plugins you actually need
-            plugins: "link lists fullscreen code",
-
-            toolbar: "undo redo | styles | bold italic strikethrough backcolor | bullist link | code fullscreen",
-
-            // Toggle the menubar off to get a leaner visual experience
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
-            menubar: false,
-
-            // Tip! The height option accepts any valid CSS for height
-            height: '500px',
-        });
-    </script>
-    <style>
-        body {
-            margin: 2rem .5rem;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        }
-
-        main {
-            max-width: 800px;
-            margin: auto;
-        }
-
-        /*
-            The toolbar is using flexbox. With a carefully targeted override
-            we can push the toolbar group over to the right side
-        */
-        .tox .tox-toolbar__group:last-child {
-            margin-left: auto !important;
-        }
-    </style>
-</head>
-<body>
-<main>
-    <textarea id="editor">
-        <h1>Right aligned toolbar buttons</h1>
-        <p>Normally we <strong>strongly advice against overriding the TinyMCE CSS</strong> to tweak the editor. The proper way to change the visual appearance is to make a skin. That said, there is always exceptions to a good rule and moving a couple of toolbar buttons to the right side of the toolbar is one example of such an exception.</p>
-        <p>Since the toolbar is using <em>flexbox</em> it's pretty easy to just add one simple CSS override to move a toolbar button group over to the other side. However, there are some caveats:</p>
-        <ul>
-            <li>It is not supported</li>
-            <li>It probably has issues with right-to-left languages</li>
-            <li>Future updates to TinyMCE might change the UI HTML and CSS, thus breaking the UI.</li>
-        </ul>
-        <p>But if you know what you are doing and accept the consequences, this is how you move buttons!</p>
-    </textarea>
-</main>
-</body>
-</html>
diff --git a/tinymce-basics/useful_styles_for_content_css.html b/tinymce-basics/useful_styles_for_content_css.html
index be0f7bb..b54c4c4 100644
--- a/tinymce-basics/useful_styles_for_content_css.html
+++ b/tinymce-basics/useful_styles_for_content_css.html
@@ -24,11 +24,11 @@
             height: 'calc(100vh - 4rem)',
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'code table noneditable',
+            plugins: 'code table',
 
             // Disable the drag handles on images to avoid having them obscure the
             // rounded corners on images example
-            // https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#object_resizing
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#object_resizing
             object_resizing : false,
 
             // The following css will be injected into the editor, extending
@@ -36,8 +36,8 @@
             // In a real world scenario, with much more custom styles for headings
             // links, tables, images etc, it's strongly recommended to use the
             // content_css option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style
+            // https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css
             content_style: `
 
                 /*
@@ -47,7 +47,7 @@
                  */
 
                 /* Make our invisible overlay be positioned relative to the */
-                {
+                hr {
                   position: relative;
                 }
 
@@ -124,7 +124,7 @@ <h1>Useful content css</h1>
         <p>The default content css is very basic and unopinionated to allow you as a developer to integrate the styles you want in order to get a good WYSIWYG writing environment.</p>
         <p>That said, here are some tecniques we often implement ourselves that improves the editing experience in TinyMCE</p>
         <p><em>Inspect the source code to see the actual css used</em></p>
-        <h2>Improve clickability</h2>
+        <h2>Improve hr clickability</h2>
         <p>Because the <code>&amp;lt;hr&amp;gt;</code> is often just a 1px gray line, it is very difficult for a user to select and manipulate. By using the <code>::after</code> pseudo element we can create a larger invisible click area greatly improving selectability.</p>
         <hr />
 
diff --git a/tinymce-basics/webapp-description-comment-reply-editor.html b/tinymce-basics/webapp-description-comment-reply-editor.html
index e0e3105..d89b4ba 100644
--- a/tinymce-basics/webapp-description-comment-reply-editor.html
+++ b/tinymce-basics/webapp-description-comment-reply-editor.html
@@ -9,7 +9,7 @@
 This demo showcases among other things:
 
 - The ability to create a custom border outside of TinyMCE and visually encapsulate external content.
-- Use plugin to provide markdown-like replacement formatting. Also try typing `->`
+- The text patterns feature provides common substitutions when typing.
 - Use of the autoresize plugin. The editor grows as you type.
 - An usecase for the small premium icon pack
 
@@ -27,63 +27,47 @@
             selector:'#description',
 
             // If we don't need the menubar or statusbar we can hide them
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
+            // https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar
+            // https://www.tiny.cloud/docs/tinymce/latest/statusbar-configuration-options/#statusbar
             menubar: false,
             statusbar: false,
 
             // as we want to provide our own editor border to include the save button
             // we can use the naked skin that completely removes all borders.
             // You can also easily create your own borderless skin.
-            // https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/naked-demo/
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#skin
-            // https://www.tiny.cloud/docs/advanced/creating-a-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/naked-demo/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-skin/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
             skin: 'naked',
 
             // For a leaner look we can use the Small premium icon pack.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#icons
-            // https://www.tiny.cloud/docs/advanced/creating-an-icon-pack/
+            // https://www.tiny.cloud/docs/tinymce/latest/editor-icons/
+            // https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/
             icons: 'small',
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'code autoresize anchor, autolink codesample emoticons image link lists table textpattern',
+            plugins: 'code autoresize anchor, autolink codesample emoticons image link lists table markdown',
 
             // This option allows you to specify the buttons and the order that
             // they will appear on TinyMCE’s toolbar.
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
+            // https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar
             toolbar: 'styles | bold italic strikethrough blockquote | bullist numlist codesample link image table emoticons hr',
 
             // Setting the minimum height when using the autoresize plugin
-            // https://www.tiny.cloud/docs/configure/editor-appearance/#min_height
+            // https://www.tiny.cloud/docs/tinymce/latest/autoresize/#min_height
             min_height: 160,
 
             // Set the whitespace between the bottom most row and the bottom of the editor
-            // https://www.tiny.cloud/docs/plugins/autoresize/#autoresize_bottom_margin
+            // https://www.tiny.cloud/docs/tinymce/latest/autoresize/#autoresize_bottom_margin
             autoresize_bottom_margin: 24,
 
-            // The text pattern plugin enables you to assign actions to happen when
+            // The text pattern feature enables you to assign actions to happen when
             // the user types content into TinyMCE. In this case we are substituting
             // starts for proper bullet lists, hashes for headings and other common
             // substutions
-            // https://www.tiny.cloud/docs/plugins/textpattern/#textpattern_patterns
-            textpattern_patterns: [
-                {start: '*', end: '*', format: 'italic'},
-                {start: '_', end: '_', format: 'italic'},
-                {start: '**', end: '**', format: 'bold'},
-                {start: '__', end: '__', format: 'bold'},
-                {start: '`', end: '`', format: 'code'},
-                {start: '>', format: 'blockquote'},
-                {start: '1. ', cmd: 'InsertOrderedList'},
-                {start: '* ', cmd: 'InsertUnorderedList'},
-                {start: '- ', cmd: 'InsertUnorderedList' },
-                {start: '+ ', cmd: 'InsertUnorderedList' },
-                {start: '#', format: 'h1'},
-                {start: '##', format: 'h2'},
-                {start: '###', format: 'h3'},
+            // https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#text_patterns
+            text_patterns: [
                 {start: '->', replacement: '→'},
-                {start: '***', format: 'hr'},
-                {start: '---', format: 'hr'},
-                {start: '* * *', format: 'hr'},
             ]
         });
     </script>
diff --git a/tokens/README.md b/tokens/README.md
deleted file mode 100644
index eda4ca4..0000000
--- a/tokens/README.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Tokens
-
-Tokens – or mail merge variables such as `{{name.first}}` – are often found in document automation and email editors. Here are three ways you can implement them in TinyMCE.
-
-**Don't miss!** Each HTML file contains detailed comments for each option to help you get started.
diff --git a/tokens/span-based-token.html b/tokens/span-based-token.html
deleted file mode 100644
index dda8db5..0000000
--- a/tokens/span-based-token.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!--
-    This demo shows how to use regular spans as tokens (sometimes called mail-merge-tags
-    or replacement variables) together with the noneditable plugin to make the tokens
-    behave like selectable elements within TinyMCE.
--->
-
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Span-based token demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
-
-    <script>
-        // An array containing the available tokens.
-        var tokens = [
-            { text: "name.first", value: "name.first" },
-            { text: "name.last", value: "name.last" },
-            { text: "name.full", value: "name.full" },
-            { text: "email.home", value: "email.home" },
-            { text: "email.work", value: "email.work" },
-        ];
-
-        tinymce.init({
-            selector: "#editor",
-
-            // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: "autoresize code link lists noneditable",
-
-            // We have put our custom insert token button last.
-            toolbar: "bold italic strikethrough backcolor | bullist numlist link | tokens",
-
-            // The noneditable plugin takes a class and make the associated element
-            // noneditable and selectable.
-            // https://www.tiny.cloud/docs/plugins/noneditable/
-            noneditable_noneditable_class: "token",
-
-            setup: (editor) => {
-                // Register a custom toolbar menu button to insert tokens
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
-                editor.ui.registry.addMenuButton("tokens", {
-                    text: "Token",
-                    tooltip: "Insert token",
-                    fetch: (callback) => {
-                        var items = tokens.map((token) => {
-                            return {
-                                type: "menuitem",
-                                text: token.text,
-                                onAction: () => {
-                                    // Insert content at the location of the cursor.
-                                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
-                                    editor.insertContent(`<span class="token">${token.value}</span>`);
-                                }
-                            }
-                        });
-                        callback(items);
-                    }
-                });
-            },
-
-            // The following css will be injected into the editor, extending
-            // the default styles.
-            // In a real world scenario, with much more custom styles for headings
-            // links, tables, images etc, it's recommended to use the content_css
-            // option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
-            content_style: `
-                .token {
-                    background-color: #D6F0FF;
-                    padding: 1px 3px;
-                    color: #44719B;
-                    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-                    font-size: 0.9375em;
-                }
-            `,
-        });
-    </script>
-    <style>
-        body {
-            margin: 2rem .5rem;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-        }
-
-        main {
-            max-width: 800px;
-            margin: auto;
-        }
-    </style>
-</head>
-<body>
-<main>
-    <textarea id="editor">
-        <p>Hello <span class="token">name.first</span></p>
-        <p>Thank you for considering Tiny Lodge for your next conference</p>
-    </textarea>
-</main>
-</body>
-</html>
diff --git a/tokens/text-based-token.html b/tokens/text-based-token.html
deleted file mode 100644
index 45b1309..0000000
--- a/tokens/text-based-token.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!--
-    This demo shows how to use the noneditable plugin
-    to transform text based tokens (sometimes called mail-merge-tags
-    or replacement variables) into span based tokens which we can style
-    and prevent editing of to avoid editors breaking the tokens. The span
-    based tokens will be transformed back into text when publishing the
-    content.
--->
-
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Text-based tokens demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
-
-    <script>
-        // An array containing the available tokens.
-        var tokens = [
-            { text: "name.first", value: "{{name.first}}" },
-            { text: "name.last", value: "{{name.last}}" },
-            { text: "name.full", value: "{{name.full}}" },
-            { text: "email.home", value: "{{email.home}}" },
-            { text: "email.work", value: "{{email.work}}" },
-        ];
-
-        tinymce.init({
-            selector: "#editor",
-
-            // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: "autoresize code link lists noneditable",
-
-            // We have put our custom insert token button last.
-            toolbar: "bold italic strikethrough backcolor | bullist numlist link | tokens",
-
-            // The noneditable_regexp option transforms matched text into spans which is then
-            // visually styled to look like tags.
-            // https://www.tiny.cloud/docs/plugins/noneditable/
-            noneditable_regexp: /\{\{[^\}]+\}\}/g, // matches {{handlebar}},
-
-            setup: (editor) => {
-                // Register a custom toolbar menu button to insert tokens
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
-                editor.ui.registry.addMenuButton("tokens", {
-                    text: "Token",
-                    tooltip: "Insert token",
-                    fetch: (callback) => {
-                        var items = tokens.map((token) => {
-                            return {
-                                type: "menuitem",
-                                text: token.text,
-                                onAction: () => {
-                                    // Insert content at the location of the cursor.
-                                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
-                                    editor.insertContent(token.value);
-                                }
-                            }
-                        });
-                        callback(items);
-                    }
-                });
-            },
-
-            // The following css will be injected into the editor, extending
-            // the default styles.
-            // In a real world scenario, with much more custom styles for headings
-            // links, tables, images etc, it's recommended to use the content_css
-            // option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
-            content_style: `
-                .mceNonEditable {
-                    background-color: #D6F0FF;
-                    padding: 1px 0;
-                    color: #44719B;
-                    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-                    font-size: 0.9375em;
-                }
-            `,
-        });
-    </script>
-    <style>
-        body {
-            margin: 2rem .5rem;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-        }
-
-        main {
-            max-width: 800px;
-            margin: auto;
-        }
-    </style>
-</head>
-<body>
-<main>
-    <textarea id="editor">
-        <p>Hello {{name.first}}</p>
-        <p>Thank you for considering Tiny Lodge for your next conference</p>
-    </textarea>
-</main>
-</body>
-</html>
diff --git a/tokens/web-component-token.html b/tokens/web-component-token.html
deleted file mode 100644
index 19eb122..0000000
--- a/tokens/web-component-token.html
+++ /dev/null
@@ -1,210 +0,0 @@
-<!--
-    This demo shows how to use web components to display tokens (sometimes called
-    mail-merge-tags or replacement variables). Note that the inline-token custom element
-    we create in this demo could be used as a vue/angular/react element elsewhere
-    outside of TinyMCE for maximum browser support.
--->
-
-<!doctype html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Web component based token demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
-
-    <script>
-        // An array containing the available tokens.
-        var tokens = [
-            { text: "name.first", value: "name.first" },
-            { text: "name.last", value: "name.last" },
-            { text: "name.full", value: "name.full" },
-            { text: "email.home", value: "email.home" },
-            { text: "email.work", value: "email.work" },
-        ];
-
-        tinymce.init({
-            selector: "#editor",
-
-            // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: "autoresize code link lists noneditable",
-
-            // We have put our custom insert token button last.
-            toolbar: "bold italic strikethrough backcolor | bullist numlist link | tokens",
-
-            // Tell TinyMCE that inline token is a valid element. The ~ indicates the tag
-            // should be treated as a span.
-            // https://www.tiny.cloud/docs/configure/content-filtering/#custom_elements
-            custom_elements: "~inline-token",
-
-            setup: (editor) => {
-
-                // The init event is fired when the editor is fully loaded.
-                // https://www.tiny.cloud/docs/advanced/events/#editorcoreevents
-                editor.on("init", () => {
-                    // Get the iframe window object and the iframes document object
-                    // and call our setup function that creates the web component
-                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getwin
-                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getdoc
-                    const win = editor.getWin();
-                    const doc = editor.getDoc();
-                    setup(win, doc);
-                });
-
-                // The preinit event is fired after the editor is loaded but before
-                // the content is loaded
-                // https://www.tiny.cloud/docs/advanced/events/#editorcoreevents
-                editor.on("preinit", () => {
-                    // During the creation of the web component we set contenteditable false
-                    // on the web component to make it behave like a noneditable but selectable
-                    // element inside TinyMCE. But we don't want the contenteditable attribute
-                    // to be saved with the content. We therefore need to filter out the attribute
-                    // upon serlialization (which happens on "save", view sourcecode and preview
-                    // among others).
-                    // https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.serializer/#addnodefilter
-                    editor.serializer.addNodeFilter("inline-token", (nodes) => {
-                        // Iterate through all filtered nodes and remove the contenteditable attribute
-                        nodes.forEach((node) => {
-                            if (!!node.attr("contenteditable")) {
-                                node.attr("contenteditable", null);
-                            }
-                        });
-                    });
-                });
-
-                // Register a custom toolbar menu button to insert tokens
-                // https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#menubutton
-                editor.ui.registry.addMenuButton("tokens", {
-                    text: "Token",
-                    tooltip: "Insert token",
-                    fetch: (callback) => {
-                        var items = tokens.map((token) => {
-                            return {
-                                type: "menuitem",
-                                text: token.text,
-                                onAction: () => {
-                                    // Insert content at the location of the cursor.
-                                    // https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent
-                                    editor.insertContent(`<inline-token>${token.value}</inline-token>`);
-                                }
-                            }
-                        });
-                        callback(items);
-                    }
-                });
-            },
-
-            // The following css will be injected into the editor, extending
-            // the default styles.
-            // In a real world scenario, with much more custom styles for headings
-            // links, tables, images etc, it's recommended to use the content_css
-            // option to load a separate CSS file. Makes editing easier too.
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_style
-            // https://www.tiny.cloud/docs/configure/content-appearance/#content_css
-            content_style: `
-                /* We remove the default selected outline because it doesn't follow the
-                 * border radius we have on the inline token element and move it to the
-                 * inline token element
-                 * /
-                .mce-content-body inline-token[contentEditable=false][data-mce-selected] {
-                    outline: none;
-                    cursor: default;
-                }
-            `,
-        });
-
-        // Our custom function for setting up the inline token web component.
-        // Read more about web components here:
-        // https://developer.mozilla.org/en-US/docs/Web/Web_Components
-        const setup = (win, doc) => {
-            // the shadow root gets it's HTML content from the template element.
-            // We do not need to inject the template element into the content,
-            // we can simply create it in memory and attach it to the shadow root
-            const template = doc.createElement("template");
-
-            template.innerHTML = `
-                <style>
-                    /* The host selector targets the shadow DOM host element
-                     * https://developer.mozilla.org/en-US/docs/Web/CSS/:host()
-                     */
-                    :host {
-                        display: inline-block; /* Required to prevent some issues with added spaces when the cursor is just before or after the custom element */
-                        background-color: #D6F0FF;
-                        padding: 0 3px;
-                        color: #44719B;
-                        border-radius: 2px;
-                        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-                        font-size: 0.9375em;
-                    }
-
-                    :host(:hover) {
-                        cursor: default;
-                    }
-
-                    /* Here we create a new selection outline using box-shadow
-                     * that follows the border radius (in contrast to outline that
-                     * creates a rectangular box)
-                     */
-                    :host([contentEditable=false][data-mce-selected]) {
-                        outline: none !important;
-                        box-shadow: 0 0 0 3px #b4d7ff;
-                    }
-                </style>
-
-                <!--
-                    The web components HTML. The content between slot will be
-                    replaced by the content wrapped in the <inline-token> element.
-                    The span isn't really needed.
-                    https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
-                -->
-                <span>
-                    <slot>token-not-defined</slot>
-                </span>
-            `;
-
-            // Create the inline token web component.
-            // Familiarize yourself with web components here:
-            // https://developer.mozilla.org/en-US/docs/Web/Web_Components
-            class InlineToken extends win.HTMLElement {
-                constructor() {
-                    super();
-
-                    // During the creation of the web component we set contenteditable false
-                    // on the web component to make it behave like a noneditable but selectable
-                    // element inside TinyMCE.
-                    this.setAttribute("contenteditable", false);
-
-                    // Attach the shadow DOM to the element
-                    // https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
-                    const shadow = this.attachShadow({mode: "open"});
-
-                    // Attach the Template to the web components shadow DOM
-                    this.shadowRoot.appendChild(template.content.cloneNode(true));
-                }
-            }
-            // Register our web component to the tag we want to use it as
-            // https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define
-            win.customElements.define("inline-token", InlineToken);
-        }
-    </script>
-    <style>
-        body {
-            margin: 2rem .5rem;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
-        }
-
-        main {
-            max-width: 800px;
-            margin: auto;
-        }
-    </style>
-</head>
-<body>
-<main>
-    <textarea id="editor">
-        <p>Hello <inline-token>name.first</inline-token></p>
-        <p>Thank you for considering Tiny Lodge for your next conference</p>
-    </textarea>
-</main>
-</body>
-</html>

From d90f7f25a42b9118344ca3203b68ec56fefc9cfd Mon Sep 17 00:00:00 2001
From: Fredrik Danielsson <fredrik@lostkeys.se>
Date: Wed, 19 Nov 2025 11:01:51 +0100
Subject: [PATCH 4/6] Updated spelling, wording and fixed minor errors

---
 cool-demos/conditional-blocks.html             |  8 ++++----
 cool-demos/expand-editor-and-show-toolbar.html |  6 ++++--
 cool-demos/slash-commands.html                 |  1 -
 email/marketing-email.html                     | 10 +++++-----
 email/webmail-rich-text-editor.html            |  8 +-------
 images/toggle-image-size-context-toolbar.html  |  2 +-
 tables/customizing-the-table-toolbar.html      | 10 +++++-----
 7 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/cool-demos/conditional-blocks.html b/cool-demos/conditional-blocks.html
index 9ba6a4d..9cad55b 100644
--- a/cool-demos/conditional-blocks.html
+++ b/cool-demos/conditional-blocks.html
@@ -24,7 +24,7 @@
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
             plugins: 'autoresize advcode link lists mergetags',
 
-            // We have put our custom insert conditional block button last.
+            // We have put our custom insert conditional block button second to last.
             toolbar: 'bold italic strikethrough backcolor | bullist numlist link mergetags | conditionalblock | code',
 
             // "Thin" is a premium icon pack you get wth the cloud essential plan.
@@ -34,7 +34,7 @@
             // https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/
             icons: 'thin',
 
-            // "Naked" is a premium icon pack you get wth the cloud essential plan
+            // "Naked" is a premium icon pack you get with the cloud essential plan
             // See https://www.tiny.cloud for more details and purchasing options
             // You can also create your own skins for TinyMCE
             // https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/
@@ -78,7 +78,7 @@
                     // on the web component to make it behave like a noneditable but selectable
                     // element inside TinyMCE. But we don't want the contenteditable attribute
                     // to be saved with the content. We therefore need to filter out the attribute
-                    // upon serlialization (which happens on "save", view sourcecode and preview
+                    // upon serialization (which happens on "save", view source code and preview
                     // among others).
                     // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.serializer/#addNodeFilter
                     editor.serializer.addNodeFilter('conditional-block', (nodes) => {
@@ -98,7 +98,7 @@
                 });
 
                 // Register a custom toolbar menu button to insert the conditional block
-                // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#menubutton
+                // https://www.tiny.cloud/docs/tinymce/latest/custom-menu-toolbar-button/
                 editor.ui.registry.addButton('conditionalblock', {
                     icon: 'conditional-block',
                     tooltip: 'Insert conditional block',
diff --git a/cool-demos/expand-editor-and-show-toolbar.html b/cool-demos/expand-editor-and-show-toolbar.html
index cb9f63a..935570b 100644
--- a/cool-demos/expand-editor-and-show-toolbar.html
+++ b/cool-demos/expand-editor-and-show-toolbar.html
@@ -1,5 +1,5 @@
 <!--
-    This demo showcases a minimalist editor that expands on focus
+    This demo showcases a minimalist editor that expands on focus.
     It uses the TinyMCE inline mode to allow for greater control
     over the toolbar position and behavior.
 -->
@@ -16,7 +16,6 @@
         tinymce.init({
             selector: "#editor-content",
             plugins: "emoticons image link lists charmap table",
-            toolbar: "formatgroup paragraphgroup insertgroup",
             placeholder: "Ask a question or post an update...",
             menubar: false,
             skin: 'naked',
@@ -61,6 +60,9 @@
                     items: 'link image emoticons charmap hr'
                 }
             },
+            
+            // Show the three toolbar groups
+            toolbar: "formatgroup paragraphgroup insertgroup",
 
             // On mobile, toolbar_mode is sliding by default which is not compatible
             // with toolbar_groups. Therefore we explicitly set toolbar_mode to floating
diff --git a/cool-demos/slash-commands.html b/cool-demos/slash-commands.html
index 28f08a0..89c6d1f 100644
--- a/cool-demos/slash-commands.html
+++ b/cool-demos/slash-commands.html
@@ -125,7 +125,6 @@
                 // The character to trigger the autocompleter,
                 // the number of characters to type before displaying the autocompleter menu and,
                 // configure the autocompleter to display a menu opposed a row of icons
-                // https://www.tiny.cloud/docs/tinymce/latest/autocompleter/
                 trigger: '/',
                 minChars: 0,
                 columns: 1,
diff --git a/email/marketing-email.html b/email/marketing-email.html
index 51f80ae..ab6b71b 100644
--- a/email/marketing-email.html
+++ b/email/marketing-email.html
@@ -1,14 +1,14 @@
 <!--
-The proper way to do marketing email with TinyMCE is to use
-inline mode, and move all table layout outside of TinyMCE.
-Tables in TinyMCE are first and formost to display tabular
-data, not for layouts do doing table layouts in TinyMCE,
+The proper way to do marketing emails with TinyMCE is to use
+inline mode, and move all table layouts outside of TinyMCE.
+Tables in TinyMCE are first and foremost to display tabular
+data, not for layouts. Doing table layouts in TinyMCE,
 while possible, is not recommended. It is simply too easy
 to accidentally break the design.
 
 Here is an example of how to do a marketing email using
 TinyMCE inline mode. The TinyMCE editor is only applied
-to the rich text parts. All the table layout are outside
+to the rich text parts. The table layout is outside
 of TinyMCE. This makes it easy for you to to add other
 logic such as inserting blocks and drag and drop reordering
 yourself.
diff --git a/email/webmail-rich-text-editor.html b/email/webmail-rich-text-editor.html
index 73d4e2d..7826595 100644
--- a/email/webmail-rich-text-editor.html
+++ b/email/webmail-rich-text-editor.html
@@ -47,7 +47,7 @@
                 formatgroup: {
                     icon: 'format',
                     tooltip: 'Formatting',
-                    items: 'fontselect | styles | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
+                    items: 'fontfamily | styles | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
                 }
             },
 
@@ -73,12 +73,6 @@
                 small: { block: 'small', styles: { fontSize: '12px', color: '#aaaaaa' } }
             },
 
-            // An alternative to the styles toolbar button is the styles button
-            // which is a simpler version of the styles button. It is configured
-            // using the block_formats option.
-            // https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/#block_formats
-            block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',
-
             // In order to force TinyMCE to apply inline styles to the default paragraph
             // text we can use the forced_root_block together with forced_root_block_attrs.
             // https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#forced_root_block
diff --git a/images/toggle-image-size-context-toolbar.html b/images/toggle-image-size-context-toolbar.html
index b1d1882..4a73b46 100644
--- a/images/toggle-image-size-context-toolbar.html
+++ b/images/toggle-image-size-context-toolbar.html
@@ -104,7 +104,7 @@
 
 
             setup: (editor) => {
-                // Register a toolbar button for which is used to toggle the images
+                // Register a toolbar button for which is used to toggle the images's style
                 // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/
                 editor.ui.registry.addToggleButton('wideimage', {
                     // References the icon identifier in the icon pack at the top of this
diff --git a/tables/customizing-the-table-toolbar.html b/tables/customizing-the-table-toolbar.html
index d7ee684..e87068d 100644
--- a/tables/customizing-the-table-toolbar.html
+++ b/tables/customizing-the-table-toolbar.html
@@ -1,7 +1,7 @@
 <!--
-    Create an alterate table context toolbar! This demo showcases a 
+    Create an alternate table context toolbar! This demo showcases a 
     table header row/column toggle, a menu for choosing cell background
-    color andkeyboard shortcuts for adding table rows and columns among
+    color and keyboard shortcuts for adding table rows and columns among
     other things
 -->
 
@@ -34,7 +34,7 @@
             menubar: false,
 
             // Tip! To make TinyMCE leaner, only include the plugins you actually need.
-            plugins: 'link lists image table code',
+            plugins: 'link lists image table code emoticons',
 
             // This option allows you to specify the buttons and the order that they
             // will appear on TinyMCE’s toolbar.
@@ -385,7 +385,7 @@
         // call to from both menuitems and shortcuts
         const menuActionManager = {
             headerRow: () => {
-                // Check the type of the selected table row and inverse it
+                // Check the type of the selected table row and invert it
                 // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#querycommandvaluestableplugin
                 const type = tinymce.activeEditor.queryCommandValue('mceTableRowType') === 'body' ? 'header' : 'body';
 
@@ -422,7 +422,7 @@
                 tinymce.activeEditor.execCommand('mceTablePasteRowAfter');
             },
             headerColumn: () => {
-                // Check the type of the selected table column and inverse it
+                // Check the type of the selected table column and invert it
                 // https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#querycommandvaluestableplugin
                 const type = tinymce.activeEditor.queryCommandValue('mceTableColType') === 'td' ? 'th' : 'td';
 

From ebbf27f80f85bda25fc10224b468f06ccf3d1ff0 Mon Sep 17 00:00:00 2001
From: Fredrik Danielsson <fredrik@lostkeys.se>
Date: Wed, 19 Nov 2025 14:25:55 +0100
Subject: [PATCH 5/6] Fixed clipboard for table-row-templates

---
 tables/table-row-templates.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/tables/table-row-templates.html b/tables/table-row-templates.html
index 3223032..06cc841 100644
--- a/tables/table-row-templates.html
+++ b/tables/table-row-templates.html
@@ -172,20 +172,22 @@
                             `;
 
                             // Store any existing table clipboard row data
-                            // https://www.tiny.cloud/docs/tinymce/latest/table/#api
-                            const storedClipboard = editor.plugins.table.getClipboardRows();
+                            // https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.fakeclipboard/
+                            const storedClipboard = tinymce.FakeClipboard.read();
 
                             // Set the clipboard data to be the table row element created previously
-                            // https://www.tiny.cloud/docs/tinymce/latest/table/#api
-                            editor.plugins.table.setClipboardRows([tr]);
+                            const item = tinymce.FakeClipboard.FakeClipboardItem({
+	                            'x-tinymce/dom-table-rows': [{ dom: tr }],
+                            });
+
+                            tinymce.FakeClipboard.write([item]);
 
                             // Paste the table clipboard data
                             // https://www.tiny.cloud/docs/tinymce/latest/table/#commands
-                            editor.execCommand('mceTablePasteRowAfter');
+                            editor.execCommand('mceTablePasteRowAfter');                            
 
                             // Restore the saved table clipboard row data
-                            // https://www.tiny.cloud/docs/tinymce/latest/table/#api
-                            editor.plugins.table.setClipboardRows(storedClipboard);
+                            tinymce.FakeClipboard.write(storedClipboard);
 
                             // Close the dialog.
                             dialog.close();

From 608cf6de6d96cd4a58fb440096eba93a536b8c26 Mon Sep 17 00:00:00 2001
From: Fredrik Danielsson <fredrik@lostkeys.se>
Date: Wed, 19 Nov 2025 14:41:19 +0100
Subject: [PATCH 6/6] Removed copy/paste rows and columns because the low-level
 API replacing the old table clipboard apis are not for public consumption

---
 tables/customizing-the-table-toolbar.html | 106 +---------------------
 1 file changed, 2 insertions(+), 104 deletions(-)

diff --git a/tables/customizing-the-table-toolbar.html b/tables/customizing-the-table-toolbar.html
index e87068d..ba9a301 100644
--- a/tables/customizing-the-table-toolbar.html
+++ b/tables/customizing-the-table-toolbar.html
@@ -176,58 +176,7 @@
                                 onAction: () => {
                                     menuActionManager.deleteRow();
                                 }
-                            },
-                            /*                            
-                            {
-                                type: 'separator',
-                            },
-                            {
-                                type: 'menuitem',
-                                text: 'Cut row',
-                                icon: 'cut-row',
-                                onAction: () => {
-                                    menuActionManager.cutRow();
-                                }
-                            },
-                            {
-                                type: 'menuitem',
-                                text: 'Copy row',
-                                icon: 'duplicate-row',
-                                onAction: () => {
-                                    menuActionManager.copyRow();
-                                }
-                            },
-                            {
-                                type: 'menuitem',
-                                text: 'Paste row before',
-                                icon: 'paste-row-before',
-                                onAction: () => {
-                                    menuActionManager.pasteRowBefore();
-                                },
-                                onSetup: (buttonApi) => {
-                                    // Check the clipboard for any rows and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
-                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
-                                    const state = editor.plugins.table.getClipboardRows().length > 0 ? false : true;
-                                    buttonApi.setDisabled(state);
-                                }
-                            },
-                            {
-                                type: 'menuitem',
-                                text: 'Paste row after',
-                                icon: 'paste-row-after',
-                                onAction: () => {
-                                    menuActionManager.pasteRowAfter();
-                                },
-                                onSetup: (buttonApi) => {
-                                    // Check the clipboard for any rows and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
-                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
-                                    const state = editor.plugins.table.getClipboardRows().length > 0 ? false : true;
-                                    buttonApi.setDisabled(state);
-                                }
-                            },
-                            */
+                            }
                         ];
                         callback(items);
                     }
@@ -281,58 +230,7 @@
                                 onAction: () => {
                                     menuActionManager.deleteColumn();
                                 }
-                            },
-                            /*                            
-                            {
-                                type: 'separator',
-                            },
-                            {
-                                type: 'menuitem',
-                                text: 'Cut column',
-                                icon: 'cut-column',
-                                onAction: () => {
-                                    menuActionManager.cutColumn();
-                                }
-                            },
-                            {
-                                type: 'menuitem',
-                                text: 'Copy column',
-                                icon: 'duplicate-column',
-                                onAction: () => {
-                                    menuActionManager.copyColumn();
-                                }
-                            },                            
-                            {
-                                type: 'menuitem',
-                                text: 'Paste column before',
-                                icon: 'paste-column-before',
-                                onAction: () => {
-                                    menuActionManager.pasteColumnBefore();
-                                },
-                                onSetup: (buttonApi) => {
-                                    // Check the clipboard for any cols and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
-                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
-                                    const state = editor.plugins.table.getClipboardCols().length > 0 ? false : true;
-                                    buttonApi.setDisabled(state);
-                                }
-                            },
-                            {
-                                type: 'menuitem',
-                                text: 'Paste column after',
-                                icon: 'paste-column-after',
-                                onAction: () => {
-                                    menuActionManager.pasteColumnAfter();
-                                },
-                                onSetup: (buttonApi) => {
-                                    // Check the clipboard for any cols and disable the menu item if there is none
-                                    // https://www.tiny.cloud/docs/tinymce/latest/table/#api
-                                    // https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/#api
-                                    const state = editor.plugins.table.getClipboardCols().length > 0 ? false : true;
-                                    buttonApi.setDisabled(state);
-                                }
-                            },
-                            */
+                            }                            
                         ];
                         callback(items);
                     }