DOC-2375: TinyMCE 7.1 Documentation. (#3242)

* DOC-2375: TinyMCE 7.1 Documentation. * DOC-2368: Update bundling documentation for all premium plugins for new index.js files. (#3224) * DOC-2368: Update bundling documentation for all premium plugins for new index.js files. * DOC-2368: additional improvements. * DOC-2368: additional copy edits to bundling-plugins.adoc and related partials,includes. * Revert "DOC-2339: On-premises documentation for document converters. (#3180)" This reverts commit 93d7ffe. * DOC-2368: update plugin code ref. * DOC-2368: delete plugin-file-plugins.adoc pages, update plugin.js for import code blocks. * Update modules/ROOT/partials/plugin-files/plugin-file-bundling-message.adoc Co-authored-by: ltrouton <[email protected]> * Update modules/ROOT/partials/plugin-files/plugin-file-index.js.adoc Co-authored-by: ltrouton <[email protected]> * Update modules/ROOT/partials/plugin-files/plugin-file-bundling-also-requires.adoc Co-authored-by: ltrouton <[email protected]> * Update modules/ROOT/pages/bundling-plugins.adoc * Update modules/ROOT/pages/bundling-plugins.adoc Co-authored-by: ltrouton <[email protected]> * DOC-2368: update plugin-file-list-emoticons.adoc file to include note. * DOC-2368: add note to reference back to the tinymce v6 docs if version is equal to or less than 7.0. * Update modules/ROOT/pages/bundling-plugins.adoc Co-authored-by: ltrouton <[email protected]> --------- Co-authored-by: ltrouton <[email protected]> * DOC-288 (#3262) * DOC-2386: add Google Gemini integration guide (#3250) * Add Google Gemini integration guide * Update Gemini string response example to use Vertex AI * Add admonition about access token security above each code example * Fix indentation in code examples * Update admonition from Mitch's suggestions Co-authored-by: Mitchell Crompton <[email protected]> * Improve code example comments about authentication Co-authored-by: Mitchell Crompton <[email protected]> * Remove pronouns from admon-ai-proxy.adoc and ai-gemini.adoc * change order of nav items * Apply suggestions from code review Only include ai proxy admon once per page Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: Karl Kemister-Sheppard <[email protected]> --------- Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: Karl Kemister-Sheppard <[email protected]> * DOC-2387: Add live demo to AI Assistant plugin page (#3260) * DOC-2387: Add live demo to AI Assistant plugin page * fix the authorization header in index.js * update live demo content to match website ai demo * add admonition that live demo uses proxy * DOC-2385: add Amazon Bedrock integration guide (#3252) * DOC-2384: Added local playbook and dev scripts (#3247) * Initial draft for Amazon Bedrock integration guide * change order of nav.adoc items * add ai proxy admonition (will be functional once merged into tinymce/7) * Revert "DOC-2384: Added local playbook and dev scripts (#3247)" This reverts commit 8631a51. * Apply suggestions from code review Co-authored-by: Karl Kemister-Sheppard <[email protected]> --------- Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: Karl Kemister-Sheppard <[email protected]> * DOC-2399: Extract OpenAI integration code to separate page (#3270) * add ai-openai.adoc page with OpenAI string and streaming code examples * change ai_request to use minimal string response code example * remove basic setup section from ai.adoc and fix options headings nesting levels * add missing heading to ai-openai.adoc * move openai to above proxy in nav.adoc * add ai proxy admonitions (will be functional once merged into tinymce/7) * only include ai proxy admon once per page * change gemini prerequisites to ordered list * DOC-2381: add new `Math` Plugin documentation for TinyMCE 7.1. (#3253) * DOC-2381: add new Math plugin documentation for TinyMCE 7.1. * Update modules/ROOT/examples/live-demos/math/index.js * DOC-2381: update math demo, and removed examples of using equations. * Update premium-plugins.adoc Co-authored-by: spocke <[email protected]> * Update math.adoc Co-authored-by: spocke <[email protected]> * Update math.adoc Co-authored-by: spocke <[email protected]> * Update math.adoc Co-authored-by: spocke <[email protected]> * Update math.adoc Co-authored-by: spocke <[email protected]> * Update modules/ROOT/pages/math.adoc * DOC-2381: Demo update, and included examples of block vs inline. * DOC-2381: Updated index.html for demo. * Update modules/ROOT/examples/live-demos/math/index.html * Update modules/ROOT/partials/misc/admon-requires-7.1v.adoc Co-authored-by: Farzad Hayat <[email protected]> * add plugin to available-menu-items.adoc * add plugin to available-toolbar-buttons.adoc * add plugin to editor-command-identifiers.adoc * add plugin to full-featured demo * Update modules/ROOT/examples/live-demos/math/index.html Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/partials/menu-item-ids/math-menu-items.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/partials/toolbar-button-ids/math-toolbar-buttons.adoc Co-authored-by: ltrouton <[email protected]> * Update modules/ROOT/partials/menu-item-ids/math-menu-items.adoc Co-authored-by: ltrouton <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: ltrouton <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: ltrouton <[email protected]> * Removed details - Update modules/ROOT/pages/math.adoc * Details amended - Update modules/ROOT/pages/math.adoc * Demo content updated - Update modules/ROOT/examples/live-demos/math/index.html * Updated information - Update modules/ROOT/pages/math.adoc * Added list separator -Update modules/ROOT/pages/math.adoc * italicised some text- Update modules/ROOT/pages/math.adoc * Apply suggestions from code review Co-authored-by: tiny-ben-tran <[email protected]> Co-authored-by: Andrew Herron <[email protected]> * Update modules/ROOT/pages/math.adoc Co-authored-by: spocke <[email protected]> --------- Co-authored-by: spocke <[email protected]> Co-authored-by: Farzad Hayat <[email protected]> Co-authored-by: ltrouton <[email protected]> Co-authored-by: shirqa <[email protected]> Co-authored-by: tiny-ben-tran <[email protected]> Co-authored-by: Andrew Herron <[email protected]> * DOC-2366: Add revision history diff API (#3278) * DOC-2366: Add revision history API section * DOC-2366: Clean up * Update modules/ROOT/partials/plugin-apis/ai-apis.adoc Co-authored-by: Mitchell Crompton <[email protected]> --------- Co-authored-by: Mitchell Crompton <[email protected]> * DOC-2401: Add integration docs for Azure OpenAI (#3273) * DOC-2401: Add integration docs for Azure OpenAI * Fix indentation in code * DOC-2401: Edits to azure ai page * Apply suggestions from code review Co-authored-by: shirqa <[email protected]> Co-authored-by: Mitchell Crompton <[email protected]> * DOC-2401: Fix streaming snippet * Update modules/ROOT/nav.adoc * Update modules/ROOT/pages/ai-azure.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> --------- Co-authored-by: Farzad Hayatbakhsh <[email protected]> Co-authored-by: shirqa <[email protected]> Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: Karl Kemister-Sheppard <[email protected]> * DOC-2363: TinyMCE 7.1 release notes and changelog. (#3243) * DOC-2363: TinyMCE 7.1 release notes and changelog. * DOC-2384: Added local playbook and dev scripts (#3247) * change default http-server address to 'localhost' * DOC-2363: New `index.js` file that includes all plugin resources. (#3246) * DOC-2363: New index.js file that includes all plugin resources. * Update modules/ROOT/pages/7.1-release-notes.adoc * Update modules/ROOT/pages/7.1-release-notes.adoc * DOC-2363: Removed `aria-pressed` from the `More` button in sliding toolbar mode and replaced it with `aria-expanded` (#3267) * DOC-2363: Removed aria-pressed from the More button in sliding toolbar mode and replaced it with aria-expanded. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Shan <[email protected]> --------- Co-authored-by: Shan <[email protected]> * DOC-2363: Notification accessibility improvements: added tooltips, keyboard navigation and shortcut to focus on notifications. (#3266) * DOC-2363: Notification accessibility improvements: added tooltips, keyboard navigation and shortcut to focus on notifications. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Shan <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Shan <[email protected]> --------- Co-authored-by: Shan <[email protected]> * DOC-2363: Add TINY-10597 release note entry (#3256) * DOC-2363: Add TINY-10800 release note entry (#3255) * DOC-2363: Dialog title was not announced in macOS VoiceOver, dialogs now use `aria-label` instead of `aria-labelledby` on macOS. (#3271) * DOC-2363: Dialog title was not announced in macOS VoiceOver, dialogs now use aria-label instead of aria-labelledby on macOS. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> --------- Co-authored-by: Farzad Hayat <[email protected]> * DOC-2363: ToggleToolbarDrawer command did not toggle the toolbar in sliding mode when {skipFocus: true} parameter was passed. (#3265) * DOC-2363: Firefox not announcing the iframe title when `iframe_aria_text` was set. (#3275) * DOC-2363: Firefox not announcing the iframe title when was set. * Update 7.1-release-notes.adoc Co-authored-by: Shan <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc --------- Co-authored-by: Shan <[email protected]> * DOC-2363: release note entry for TINY-10725 (#3251) * DOC-2363: add changelog for TinyMCE 7.1 core changes. * DOC-2396: add Windows High Contrast mode support to 7.1 release notes (#3279) * DOC-2396: add Windows High Contrast mode support to 7.1 release notes * Apply suggestions from code review Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: Arvin(Jintao) Han <[email protected]> --------- Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: Arvin(Jintao) Han <[email protected]> * DOC-2363: Add TINY-10780 release note entry (#3254) * DOC-2363: Included `itemprop`, `itemscope`, `itemtype` as valid HTML5 attributes in the core schema. (#3244) * DOC-2363: Included itemprop, itemscope, itemtype as valid HTML5 attributes in the core schema. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc --------- Co-authored-by: Farzad Hayat <[email protected]> * DOC-2363: Accompanying Premium self-hosted server-side component changes in TinyMCE 7.1. (#3274) * DOC-2363: Open link context menu action was not enabled for links on images. (#3277) * DOC-2363: Open link context menu action was not enabled for links on images. * DOC-2363: Add release note for open link context menu action issues * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Mitchell Crompton <[email protected]> --------- Co-authored-by: Ben Tran <[email protected]> Co-authored-by: Mitchell Crompton <[email protected]> * DOC-2363: Notification width was not constrained to the width of the editor. (#3268) * DOC-2363: Notification width was not constrained to the width of the editor. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> --------- Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/changelog.adoc * Update modules/ROOT/pages/changelog.adoc * DOC-2363: Video and audio elements could not be played on Safari. (#3258) * DOC-2363: Video and audio elements could not be played on Safari. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> --------- Co-authored-by: Farzad Hayat <[email protected]> * DOC-2363: In the custom view, the scrollbar of the container were not visible if its height was greater than the editor. (#3272) * DOC-2363: In the custom view, the scrollbar of the container were not visible if its height was greater than the editor. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc --------- Co-authored-by: Farzad Hayat <[email protected]> Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc * Update modules/ROOT/pages/7.1-release-notes.adoc * Update modules/ROOT/pages/7.1-release-notes.adoc * DOC-2363: Styles were not retained when toggling a list on and off. (#3269) Co-authored-by: Farzad Hayat <[email protected]> * DOC-2363: Added new `A11ycheckStart`, `A11ycheckStop`, `A11ycheckIgnore`, `A11ycheckRepair` and `A11ycheckShowDetails` events.. (#3245) * DOC-2363: Added new A11ycheckStart, A11ycheckStop, A11ycheckIgnore, A11ycheckRepair and A11ycheckShowDetails events. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/partials/events/a11ychecker-events.adoc Co-authored-by: Farzad Hayat <[email protected]> * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> * Add Accessibility Checker events to events page * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> --------- Co-authored-by: Farzad Hayat <[email protected]> * DOC-2363: Custom block elements with colon characters would throw errors. (#3259) * DOC-2363: Custom block elements with colon characters would throw errors. * DOC-2363: Custom block elements with colon characters would throw errors. * Update modules/ROOT/pages/7.1-release-notes.adoc Co-authored-by: Farzad Hayat <[email protected]> --------- Co-authored-by: Farzad Hayat <[email protected]> * DOC--2363: Fixed accessibility issue by removing duplicate role (menu) attribute from color swatches. (#3261) Co-authored-by: Farzad Hayat <[email protected]> * DOC-2363: final copy edits and removal of trailing template material. * Update modules/ROOT/pages/7.1-release-notes.adoc * DOC-2363: add revisionhistory_diff_classes entry to the TinyMCE 7.1 release notes. * Update modules/ROOT/pages/7.1-release-notes.adoc --------- Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: Farzad Hayatbakhsh <[email protected]> Co-authored-by: Shan <[email protected]> Co-authored-by: Arvin(Jintao) Han <[email protected]> Co-authored-by: Ben Tran <[email protected]> * DOC-2408: update support page EOS dates to include 7.1 entry (#3284) * DOC-2408: update support page EOS dates to include 7.1 entry * Update modules/ROOT/partials/misc/supported-versions.adoc --------- Co-authored-by: Karl Kemister-Sheppard <[email protected]> --------- Co-authored-by: ltrouton <[email protected]> Co-authored-by: Shan <[email protected]> Co-authored-by: Farzad Hayat <[email protected]> Co-authored-by: Mitchell Crompton <[email protected]> Co-authored-by: spocke <[email protected]> Co-authored-by: shirqa <[email protected]> Co-authored-by: tiny-ben-tran <[email protected]> Co-authored-by: Andrew Herron <[email protected]> Co-authored-by: Arvin(Jintao) Han <[email protected]>
tinymce · May 8, 2024 · 70dd8a1 · 70dd8a1
1 parent 64ac405
commit 70dd8a1
Show file tree

Hide file tree

Showing 113 changed files with 2,038 additions and 990 deletions.
diff --git a/antora.yml b/antora.yml
@@ -14,6 +14,8 @@ asciidoc:
     tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/7/tinydrive.min.js
     webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js
     jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js
+    openai_proxy_url: https://openai.ai-demo-proxy.tiny.cloud/v1/chat/completions
+    openai_proxy_token: eyJhbGciOiJFUzM4NCJ9.eyJhdWQiOlsiaHR0cHM6Ly9vcGVuYWkuYWktZGVtby1wcm94eS50aW55LmNsb3VkLyJdLCJleHAiOjE3MTk3NTYwMDAsImh0dHBzOi8vb3BlbmFpLmFpLWRlbW8tcHJveHkudGlueS5jbG91ZC9yb2xlIjoicHVibGljLWRlbW8iLCJpc3MiOiJodHRwczovL2FpLWRlbW8tcHJveHkudGlueS5jbG91ZC8iLCJqdGkiOiJlYWU5MjBhMy05ZGQ0LTRkZjUtYTM4Yy04ODY5ZTJkZGIwYTQiLCJzdWIiOiJhaS1hc3Npc3RhbnQtZGVtbyJ9.hX44J5hPOCLOidK8mBAcnlAVh-ae4nVTq3W92xRLuGiF_4mGZWn1W3Ihgd7unlffz7GDayGxD_3hoQx8f64bTJg5hyHjwjKH1AZj1EKRal-NCNbqmoUa0TOm6_VXpRl2
     default_meta_keywords: tinymce, documentation, docs, plugins, customizable skins, configuration, examples, html, php, java, javascript, image editor, inline editor, distraction-free editor, classic editor, wysiwyg
     # product docker variables
     dockerimageimportfromwordexporttoword: registry.containers.tiny.cloud/docx-converter-tiny

diff --git a/modules/ROOT/examples/live-demos/ai-demo/index.html b/modules/ROOT/examples/live-demos/ai-demo/index.html
diff --git a/modules/ROOT/examples/live-demos/ai-demo/index.js b/modules/ROOT/examples/live-demos/ai-demo/index.js
diff --git a/modules/ROOT/examples/live-demos/ai/example.js b/modules/ROOT/examples/live-demos/ai/example.js
@@ -0,0 +1,125 @@
+const fetchApi = import("https://unpkg.com/@microsoft/[email protected]/lib/esm/index.js").then(module => module.fetchEventSource);
+
+// This example stores the API key in the client side integration. This is not recommended for any purpose.
+// Instead, an alternate method for retrieving the API key should be used.
+const api_key = '<INSERT_API_KEY_HERE>';
+
+const ai_request =  (request, respondWith) => respondWith.stream(async (signal, streamMessage) => {
+  // Adds each previous query and response as individual messages
+  const conversation = request.thread.flatMap((event) => {
+    if (event.response) {
+      return [
+        { role: 'user', content: event.request.query },
+        { role: 'assistant', content: event.response.data }
+      ];
+    } else {
+      return [];
+    }
+  });
+
+  // System messages provided by the plugin to format the output as HTML content.
+  const pluginSystemMessages = request.system.map((content) => ({
+    role: 'system',
+    content
+  }));
+
+  const systemMessages = [
+    ...pluginSystemMessages,
+    // Additional system messages to control the output of the AI
+    { role: 'system', content: 'Do not include html\`\`\` at the start or \`\`\` at the end.' },
+    { role: 'system', content: 'No explanation or boilerplate, just give the HTML response.' }
+  ];
+
+  // Forms the new query sent to the API
+  const content = request.context.length === 0 || conversation.length > 0
+    ? request.query
+    : `Question: ${request.query} Context: """${request.context}"""`;
+
+  const messages = [
+    ...conversation,
+    ...systemMessages,
+    { role: 'user', content }
+  ];
+
+  const requestBody = {
+    model: 'gpt-3.5-turbo',
+    temperature: 0.7,
+    max_tokens: 800,
+    messages,
+    stream: true
+  };
+
+  const openAiOptions = {
+    signal,
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${api_key}`
+    },
+    body: JSON.stringify(requestBody)
+  };
+
+  const onopen = async (response) => {
+    if (response) {
+      const contentType = response.headers.get('content-type');
+      if (response.ok && contentType?.includes('text/event-stream')) {
+        return;
+      } else if (contentType?.includes('application/json')) {
+        const data = await response.json();
+        if (data.error) {
+          throw new Error(`${data.error.type}: ${data.error.message}`);
+        }
+      }
+    } else {
+      throw new Error('Failed to communicate with the ChatGPT API');
+    }
+  };
+
+  // This function passes each new message into the plugin via the `streamMessage` callback.
+  const onmessage = (ev) => {
+    const data = ev.data;
+    if (data !== '[DONE]') {
+      const parsedData = JSON.parse(data);
+      const firstChoice = parsedData?.choices[0];
+      const message = firstChoice?.delta?.content;
+      if (message) {
+        streamMessage(message);
+      }
+    }
+  };
+
+  const onerror = (error) => {
+    // Stop operation and do not retry by the fetch-event-source
+    throw error;
+  };
+
+  // Use microsoft's fetch-event-source library to work around the 2000 character limit
+  // of the browser `EventSource` API, which requires query strings
+  return fetchApi
+  .then(fetchEventSource =>
+    fetchEventSource('https://api.openai.com/v1/chat/completions', {
+      ...openAiOptions,
+      openWhenHidden: true,
+      onopen,
+      onmessage,
+      onerror
+    })
+  )
+  .then(async (response) => {
+    if (response && !response.ok) {
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(`${data.error.type}: ${data.error.message}`);
+      }
+    }
+  })
+  .catch(onerror);
+});
+
+tinymce.init({
+  selector: 'textarea',  // change this value according to your HTML
+  plugins: "ai advlist anchor autolink charmap advcode emoticons fullscreen help image link lists media preview searchreplace table",
+  toolbar: "undo redo | aidialog aishortcuts | styles fontsizeinput | bold italic | align bullist numlist | table link image | code",
+  height: 650,
+  ai_request
+});
diff --git a/modules/ROOT/examples/live-demos/ai/index.html b/modules/ROOT/examples/live-demos/ai/index.html
@@ -0,0 +1,13 @@
+<textarea id="ai">
+  <h1 class="p1"><span class="s1">🤖</span><span class="s2"><strong> Try out AI Assistant!</strong></span></h1>
+  <p class="p2"><span class="s2">Below are just a few of the ways you can use AI Assistant within your app. Since you can define your own custom prompts, the sky really is the limit!</span></p>
+  <p class="p2"><span class="s2"><strong>&nbsp;</strong></span><span class="s3">🎭</span><span class="s2"><strong> Changing tone </strong>&ndash;<strong>&nbsp;</strong>Lighten up the sentence below by selecting the text, clicking <img src="{{imagesdir}}/ai-plugin/wand-icon.svg" width="20" height="20"/>,&nbsp;and choosing <em>Change tone &gt; Friendly</em>.</span></p>
+  <blockquote>
+  <p class="p2"><span class="s2">The 3Q23 financial results followed a predictable trend, reflecting the status quo from previous years.</span></p>
+  </blockquote>
+  <p class="p2"><span class="s3">📝</span><span class="s2"><strong> Summarizing&nbsp;</strong>&ndash; Below is a long paragraph that people may not want to read from start to finish. Get a quick summary by selecting the text, clicking <img src="{{imagesdir}}/ai-plugin/wand-icon.svg" width="20" height="20"/>,&nbsp;and choosing <em>Summarize content</em>.</span></p>
+  <blockquote>
+  <p class="p2"><span class="s2">Population growth in the 17th century was marked by significant increment in the number of people around the world. Various factors contributed to this demographic trend. Firstly, advancements in agriculture and technology resulted in increased food production and improved living conditions. This led to decreased mortality rates and better overall health, allowing for more individuals to survive and thrive. Additionally, the exploration and expansion of European powers, such as colonization efforts, fostered migration and settlement in new territories.</span></p>
+  </blockquote>
+  <p class="p2"><span class="s3">💡</span><span class="s2"><strong> Writing from scratch</strong> &ndash; Ask AI Assistant to generate content from scratch by clicking <img src="{{imagesdir}}/ai-plugin/ai-icon.svg" width="20" height="20"/>, and typing&nbsp;<em>Write a marketing email announcing TinyMCE's new AI Assistant plugin</em>.</span></p>
+</textarea>
diff --git a/modules/ROOT/examples/live-demos/ai/index.js b/modules/ROOT/examples/live-demos/ai/index.js
@@ -0,0 +1,121 @@
+const fetchApi = import("https://unpkg.com/@microsoft/[email protected]/lib/esm/index.js").then(module => module.fetchEventSource);
+
+const ai_request =  (request, respondWith) => respondWith.stream(async (signal, streamMessage) => {
+  // Adds each previous query and response as individual messages
+  const conversation = request.thread.flatMap((event) => {
+    if (event.response) {
+      return [
+        { role: 'user', content: event.request.query },
+        { role: 'assistant', content: event.response.data }
+      ];
+    } else {
+      return [];
+    }
+  });
+
+  // System messages provided by the plugin to format the output as HTML content.
+  const pluginSystemMessages = request.system.map((content) => ({
+    role: 'system',
+    content
+  }));
+
+  const systemMessages = [
+    ...pluginSystemMessages,
+    // Additional system messages to control the output of the AI
+    { role: 'system', content: 'Do not include html\`\`\` at the start or \`\`\` at the end.' },
+    { role: 'system', content: 'No explanation or boilerplate, just give the HTML response.' }
+  ];
+
+  // Forms the new query sent to the API
+  const content = request.context.length === 0 || conversation.length > 0
+    ? request.query
+    : `Question: ${request.query} Context: """${request.context}"""`;
+
+  const messages = [
+    ...conversation,
+    ...systemMessages,
+    { role: 'user', content }
+  ];
+
+  const requestBody = {
+    model: 'gpt-3.5-turbo',
+    temperature: 0.7,
+    max_tokens: 800,
+    messages,
+    stream: true
+  };
+
+  const openAiOptions = {
+    signal,
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer {{ openai_proxy_token }}`
+    },
+    body: JSON.stringify(requestBody)
+  };
+
+  const onopen = async (response) => {
+    if (response) {
+      const contentType = response.headers.get('content-type');
+      if (response.ok && contentType?.includes('text/event-stream')) {
+        return;
+      } else if (contentType?.includes('application/json')) {
+        const data = await response.json();
+        if (data.error) {
+          throw new Error(`${data.error.type}: ${data.error.message}`);
+        }
+      }
+    } else {
+      throw new Error('Failed to communicate with the ChatGPT API');
+    }
+  };
+
+  // This function passes each new message into the plugin via the `streamMessage` callback.
+  const onmessage = (ev) => {
+    const data = ev.data;
+    if (data !== '[DONE]') {
+      const parsedData = JSON.parse(data);
+      const firstChoice = parsedData?.choices[0];
+      const message = firstChoice?.delta?.content;
+      if (message) {
+        streamMessage(message);
+      }
+    }
+  };
+
+  const onerror = (error) => {
+    // Stop operation and do not retry by the fetch-event-source
+    throw error;
+  };
+
+  // Use microsoft's fetch-event-source library to work around the 2000 character limit
+  // of the browser `EventSource` API, which requires query strings
+  return fetchApi
+  .then(fetchEventSource =>
+    fetchEventSource("{{ openai_proxy_url }}", {
+      ...openAiOptions,
+      openWhenHidden: true,
+      onopen,
+      onmessage,
+      onerror
+    })
+  )
+  .then(async (response) => {
+    if (response && !response.ok) {
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(`${data.error.type}: ${data.error.message}`);
+      }
+    }
+  })
+  .catch(onerror);
+});
+
+tinymce.init({
+  selector: 'textarea',
+  plugins: "ai advlist anchor autolink charmap advcode emoticons fullscreen help image link lists media preview searchreplace table",
+  toolbar: "undo redo | aidialog aishortcuts | styles fontsizeinput | bold italic | align bullist numlist | table link image | code",
+  height: 650,
+  ai_request
+});
diff --git a/modules/ROOT/examples/live-demos/full-featured/example.js b/modules/ROOT/examples/live-demos/full-featured/example.js
@@ -3,13 +3,13 @@ const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;
 
 tinymce.init({
   selector: 'textarea#full-featured',
-  plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
+  plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker editimage help formatpainter permanentpen pageembed charmap tinycomments mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate markdown revisionhistory',
   tinydrive_token_provider: 'URL_TO_YOUR_TOKEN_PROVIDER',
   tinydrive_dropbox_app_key: 'YOUR_DROPBOX_APP_KEY',
   tinydrive_google_drive_key: 'YOUR_GOOGLE_DRIVE_KEY',
   tinydrive_google_drive_client_id: 'YOUR_GOOGLE_DRIVE_CLIENT_ID',
   mobile: {
-    plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate',
+    plugins: 'preview powerpaste casechange importcss tinydrive searchreplace autolink autosave save directionality advcode visualblocks visualchars fullscreen image link math media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker a11ychecker help formatpainter pageembed charmap mentions quickbars linkchecker emoticons advtable footnotes mergetags autocorrect typography advtemplate',
   },
   menu: {
     tc: {
@@ -18,7 +18,7 @@ tinymce.init({
     }
   },
   menubar: 'file edit view insert format tools table tc help',
-  toolbar: "undo redo | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table media pageembed | lineheight  outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
+  toolbar: "undo redo | revisionhistory | aidialog aishortcuts | blocks fontsizeinput | bold italic | align numlist bullist | link image | table math media pageembed | lineheight  outdent indent | strikethrough forecolor backcolor formatpainter removeformat | charmap emoticons checklist | code fullscreen preview | save print | pagebreak anchor codesample footnotes mergetags | addtemplate inserttemplate | addcomment showcomments | ltr rtl casechange | spellcheckdialog a11ycheck", // Note: if a toolbar item requires a plugin, the item will not present in the toolbar if the plugin is not also loaded.
   autosave_ask_before_unload: true,
   autosave_interval: '30s',
   autosave_prefix: '{path}{query}-{id}-',