DOC-3363: TinyMCE 8.4.0 Documentation.

.api-version

@@ -1 +1 @@
-8.3.2
+8.4.0

antora.yml

@@ -10,7 +10,7 @@ asciidoc:
     companyurl: https://www.tiny.cloud
     cdnurl: https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js
     tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/8/tinydrive.min.js
-    tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js
+    tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8-testing/tinymce.min.js
     tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/8/tinydrive.min.js
     webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js
     jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js
@@ -22,11 +22,13 @@ asciidoc:
     dockerimageexporttopdf: registry.containers.tiny.cloud/pdf-converter-tiny
     dockerimageexporttopdfwindows: registry.containers.tiny.cloud/pdf-converter-windows-tiny
     # document converter placeholder variables
-    exportpdf_service_url: exportpdf_service_url placeholder 
+    exportpdf_service_url: exportpdf_service_url placeholder
+    # TinyMCE AI demo API key
+    tinymceai_demo_api_key: qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc
     # product variables
     productname: TinyMCE
     productmajorversion: 8
-    productminorversion: '8.3'
+    productminorversion: '8.4'
     ##### product name in codeblock
     prodnamecode: tinymce
     #### more names

modules/ROOT/examples/live-demos/custom-view/index.js

@@ -19,7 +19,7 @@ tinymce.init({
           text: 'Save code',
           buttonType: 'primary',
           onAction: () => {
-            const codeContent = document.querySelector('.tox-view__pane_panel').value;
+            const codeContent = document.querySelector('.my-textarea').value;
             ed.setContent(codeContent);
             ed.execCommand('ToggleView', false, 'code');
             console.log('save');
@@ -28,12 +28,12 @@ tinymce.init({
       ],
       onShow: (api) => {
         const editorContent = ed.getContent();
-        api.getContainer().innerHTML = `
+        const container = api.getContainer();
+        container.innerHTML = `
           <div style="height: 100%">
-            <textarea class="tox-view__pane_panel" style="width: 100%; height: 100%; resize: none; padding: 0.5em">
-              ${editorContent}
-            </textarea>
-          </div>`.replace(/\s+/g, '');
+            <textarea class="my-textarea" style="width: 100%; height: 100%; resize: none; padding: 0.5em"></textarea>
+          </div>`;
+        container.querySelector('.my-textarea').value = editorContent;
       },
       onHide: (api) => {
         console.log('Deactivate code', api.getContainer());

modules/ROOT/examples/live-demos/exportpdf-v2/index.html

@@ -0,0 +1,78 @@
+<textarea id="exportpdf-v2">
+  <h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
+  <p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>
+
+  <figure class="image">
+    <img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&amp;w=2072&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
+          alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" width="573" height="429">
+    <figcaption>An elegant workspace featuring a laptop on a polished wood table, accompanied by a bronze cup, creating a warm and productive atmosphere.</figcaption>
+  </figure>
+
+  <p>Photo by <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
+
+  <h2>Project Goals</h2>
+  <p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners. The primary goals include:</p>
+  <ul>
+    <li><strong>Empowering educators</strong> with intuitive tools for content creation, course management, and student assessment.</li>
+    <li><strong>Enhancing the learning experience for students</strong> through engaging content delivery, interactive features, and personalized learning paths.</li>
+    <li><strong>Increasing accessibility and scalability</strong> to cater to diverse learning needs and support a growing user base.</li>
+  </ul>
+
+  <h2>System Features</h2>
+  <p>Streamline is designed to enrich the learning process through a comprehensive set of features:</p>
+  <ul>
+    <li><strong>Content Management System (CMS)</strong>: An intuitive interface enabling educators to create and upload various learning materials, including videos, documents, presentations, and quizzes.</li>
+    <li><strong>Course Management Tools</strong>: Structure courses with clear objectives, organize content modules, and manage student enrollments effectively.</li>
+    <li><strong>Interactive Learning Activities</strong>: Includes gamification, discussion forums, collaborative assignments, and more to maintain student engagement.</li>
+    <li><strong>Assessment & Analytics</strong>: Tools for creating quizzes, tracking student progress, generating reports, and identifying improvement areas.</li>
+    <li><strong>Personalized Learning Paths</strong>: Machine learning algorithms provide tailored content recommendations based on student progress and needs.</li>
+  </ul>
+
+  <h3>Table 1: Streamline - Target User Groups</h3>
+  <table style="border-collapse: collapse; width: 100%;" border="1">
+    <thead>
+      <tr>
+        <th style="text-align: left;">User Group</th>
+        <th style="text-align: left;">Benefits</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>Educators</strong></td>
+        <td>Easy content creation, efficient course management, and valuable student insights.</td>
+      </tr>
+      <tr>
+        <td><strong>Learners</strong></td>
+        <td>Engaging learning experience, personalized learning paths, and interactive collaboration.</td>
+      </tr>
+      <tr>
+        <td><strong>Administrators</strong></td>
+        <td>Scalable platform management, user access control, and comprehensive reporting tools.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Technology Stack</h2>
+  <p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
+  <ul>
+    <li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.</li>
+    <li><strong>Back-End</strong>: Node.js for efficient server-side operations.</li>
+    <li><strong>Database</strong>: MongoDB for flexible and scalable data storage.</li>
+    <li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.</li>
+  </ul>
+
+  <h2>Project Timeline</h2>
+  <ul>
+    <li><strong>Phase 1 (2 Months)</strong>: System design, core functionalities development, and front-end prototype creation.</li>
+    <li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
+    <li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and UI refinement.</li>
+    <li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous iterative development.</li>
+  </ul>
+
+  <blockquote>
+    <p><em>This timeline is preliminary and may be subject to change.</em></p>
+  </blockquote>
+
+  <h2>Conclusion</h2>
+  <p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
+</textarea>

modules/ROOT/examples/live-demos/exportpdf-v2/index.js

@@ -0,0 +1,31 @@
+tinymce.init({
+  selector: 'textarea#exportpdf-v2',
+  height: '800px',
+  plugins: [
+    "exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
+    "help", "image", "insertdatetime", "link", "lists", "media",
+    "preview", "searchreplace", "table", "visualblocks",
+  ],
+  toolbar: "undo redo | exportpdf | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  image_caption: true,
+  exportpdf_converter_options: {
+    version: '2',
+    document: {
+      size: 'A4',
+      orientation: 'portrait',
+      margins: {
+        top: '1in',
+        right: '1in',
+        bottom: '1in',
+        left: '1in',
+        enable_mirror_margins: true
+      }
+    },
+    metadata: {
+      title: 'Streamline LMS Overview',
+      author: 'TinyMCE',
+      subject: 'Learning Management System',
+      keywords: [ 'LMS', 'education', 'Streamline' ]
+    }
+  }
+});

modules/ROOT/examples/live-demos/exportpdf/index.html

@@ -1,10 +1,13 @@
-<textarea id="exportpdf">
+<div style="display: flex; gap: 20px; width: 100%;">
+  <div style="flex: 1; min-width: 0;">
+    <h2>Flat format (backwards compatible)</h2>
+    <textarea class="exportpdf-flat" style="width: 100%;">
   <h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
   <p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>
 
   <figure class="image">
     <img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&amp;w=2072&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
-          alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" width="573" height="429">
+          alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" style="width: 100%; height: auto;">
     <figcaption>An elegant workspace featuring a laptop on a polished wood table, accompanied by a bronze cup, creating a warm and productive atmosphere.</figcaption>
   </figure>
 
@@ -75,4 +78,87 @@ <h2>Project Timeline</h2>
 
   <h2>Conclusion</h2>
   <p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
-</textarea>
+</textarea>
+  </div>
+  <div style="flex: 1; min-width: 0;">
+    <h2>Nested format (v2)</h2>
+    <textarea class="exportpdf-nested" style="width: 100%;">
+  <h1>Streamline - The Next-Gen Learning Management System (LMS)</h1>
+  <p>This document provides a comprehensive overview of the Streamline Learning Management System (LMS) project.</p>
+
+  <figure class="image">
+    <img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?q=80&amp;w=2072&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
+          alt="A laptop on a polished wood table with a bronze cup, creating a warm workspace ambiance" style="width: 100%; height: auto;">
+    <figcaption>An elegant workspace featuring a laptop on a polished wood table, accompanied by a bronze cup, creating a warm and productive atmosphere.</figcaption>
+  </figure>
+
+  <p>Photo by <a href="https://unsplash.com/@anete_lusina">Anete Lūsiņa</a> on <a href="https://unsplash.com">Unsplash</a></p>
+
+  <h2>Project Goals</h2>
+  <p>Streamline aims to revolutionize online learning by offering a robust and user-friendly platform for educators and learners. The primary goals include:</p>
+  <ul>
+    <li><strong>Empowering educators</strong> with intuitive tools for content creation, course management, and student assessment.</li>
+    <li><strong>Enhancing the learning experience for students</strong> through engaging content delivery, interactive features, and personalized learning paths.</li>
+    <li><strong>Increasing accessibility and scalability</strong> to cater to diverse learning needs and support a growing user base.</li>
+  </ul>
+
+  <h2>System Features</h2>
+  <p>Streamline is designed to enrich the learning process through a comprehensive set of features:</p>
+  <ul>
+    <li><strong>Content Management System (CMS)</strong>: An intuitive interface enabling educators to create and upload various learning materials, including videos, documents, presentations, and quizzes.</li>
+    <li><strong>Course Management Tools</strong>: Structure courses with clear objectives, organize content modules, and manage student enrollments effectively.</li>
+    <li><strong>Interactive Learning Activities</strong>: Includes gamification, discussion forums, collaborative assignments, and more to maintain student engagement.</li>
+    <li><strong>Assessment & Analytics</strong>: Tools for creating quizzes, tracking student progress, generating reports, and identifying improvement areas.</li>
+    <li><strong>Personalized Learning Paths</strong>: Machine learning algorithms provide tailored content recommendations based on student progress and needs.</li>
+  </ul>
+
+  <h3>Table 1: Streamline - Target User Groups</h3>
+  <table style="border-collapse: collapse; width: 100%;" border="1">
+    <thead>
+      <tr>
+        <th style="text-align: left;">User Group</th>
+        <th style="text-align: left;">Benefits</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>Educators</strong></td>
+        <td>Easy content creation, efficient course management, and valuable student insights.</td>
+      </tr>
+      <tr>
+        <td><strong>Learners</strong></td>
+        <td>Engaging learning experience, personalized learning paths, and interactive collaboration.</td>
+      </tr>
+      <tr>
+        <td><strong>Administrators</strong></td>
+        <td>Scalable platform management, user access control, and comprehensive reporting tools.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Technology Stack</h2>
+  <p>Streamline will leverage a robust technology stack to ensure performance, scalability, and security:</p>
+  <ul>
+    <li><strong>Front-End</strong>: ReactJS for a responsive and user-friendly interface.</li>
+    <li><strong>Back-End</strong>: Node.js for efficient server-side operations.</li>
+    <li><strong>Database</strong>: MongoDB for flexible and scalable data storage.</li>
+    <li><strong>Cloud Platform</strong>: Amazon Web Services (AWS) for reliable hosting and infrastructure.</li>
+  </ul>
+
+  <h2>Project Timeline</h2>
+  <ul>
+    <li><strong>Phase 1 (2 Months)</strong>: System design, core functionalities development, and front-end prototype creation.</li>
+    <li><strong>Phase 2 (3 Months)</strong>: Integration of advanced features like personalized learning and assessment tools.</li>
+    <li><strong>Phase 3 (1 Month)</strong>: Rigorous testing, bug fixing, and UI refinement.</li>
+    <li><strong>Phase 4 (Ongoing)</strong>: Deployment, user feedback collection, and continuous iterative development.</li>
+  </ul>
+
+  <blockquote>
+    <p><em>This timeline is preliminary and may be subject to change.</em></p>
+  </blockquote>
+
+  <h2>Conclusion</h2>
+  <p>Streamline LMS is poised to become a game-changer in online education. By empowering educators and enhancing student experiences, it aims to make effective and accessible learning available to all.</p>
+</textarea>
+  </div>
+</div>

modules/ROOT/examples/live-demos/exportpdf/index.js

@@ -1,5 +1,5 @@
 tinymce.init({
-  selector: 'textarea#exportpdf',
+  selector: 'textarea.exportpdf-flat',
   height: '800px',
   plugins: [
     "exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
@@ -16,3 +16,35 @@ tinymce.init({
     margin_left: '1in'
   }
 });
+
+tinymce.init({
+  selector: 'textarea.exportpdf-nested',
+  height: '800px',
+  plugins: [
+    "exportpdf", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
+    "help", "image", "insertdatetime", "link", "lists", "media",
+    "preview", "searchreplace", "table", "visualblocks",
+  ],
+  toolbar: "undo redo | exportpdf | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
+  image_caption: true,
+  exportpdf_converter_options: {
+    version: '2',
+    document: {
+      size: 'A4',
+      orientation: 'portrait',
+      margins: {
+        top: '1in',
+        right: '1in',
+        bottom: '1in',
+        left: '1in',
+        enable_mirror_margins: true
+      }
+    },
+    metadata: {
+      title: 'Streamline LMS Overview',
+      author: 'TinyMCE',
+      subject: 'Learning Management System',
+      keywords: [ 'LMS', 'education', 'Streamline' ]
+    }
+  }
+});

modules/ROOT/examples/live-demos/tinymceai-actions/example.js

@@ -0,0 +1,51 @@
+// Step 1: Set up session - this should be part of the application's user management process.
+// Open-source plugins below are only for editing the demo HTML (lists, links, tables). TinyMCE AI options are the focus.
+tinymce.init({
+  selector: 'textarea#tinymceai-actions',
+  height: '800px',
+  plugins: ['tinymceai', 'advlist', 'lists', 'link', 'autolink', 'table', 'wordcount'],
+  toolbar: 'undo redo | tinymceai-chat tinymceai-review tinymceai-quickactions | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
+  sidebar_show: 'tinymceai-chat',
+  tinymceai_token_provider: async () => {
+    return fetch('/api/tinymceai-token', { credentials: 'include' })
+      .then(resp => resp.text())
+      .then(token => ({ token }));
+  },
+  tinymceai_chat_fetch_sources: () => Promise.resolve([{
+    label: 'TinyMCE resources',
+    sources: [
+      { id: 'docs', label: 'TinyMCE Documentation', type: 'web-resource' },
+      { id: 'blog', label: 'Tiny Blog', type: 'web-resource' },
+      { id: 'survey-2023', label: 'State of rich text editing 2023', type: 'web-resource' },
+    ]
+  }]),
+  tinymceai_chat_fetch_source: (id) => {
+    const urls = {
+      'docs': 'https://www.tiny.cloud/docs/tinymce/latest/',
+      'blog': 'https://www.tiny.cloud/blog/',
+      'survey-2023': 'https://www.tiny.cloud/developer-survey-results-2023/',
+    };
+    return Promise.resolve({ type: 'web-resource', url: urls[id] });
+  },
+  tinymceai_quickactions_custom: [
+    {
+      type: 'chat',
+      title: 'Challenge',
+      prompt: 'Challenge statements, verify facts and identify assumptions'
+    }
+  ],
+  tinymceai_languages: [
+    { title: 'English', language: 'english' },
+    { title: 'Chinese (Simplified)', language: 'chinese' },
+    { title: 'Spanish', language: 'spanish' },
+    { title: 'German', language: 'german' },
+    { title: 'Japanese', language: 'japanese' },
+    { title: 'Portuguese', language: 'portuguese' },
+    { title: 'Swedish', language: 'swedish' },
+    { title: 'Korean', language: 'korean' },
+    { title: 'Hindi (Devanagari)', language: 'hindi devanagari' },
+    { title: 'Italian', language: 'italian' },
+    { title: 'Klingon', language: 'klingon' },
+    { title: 'Dothraki', language: 'dothraki' },
+  ]
+});