Skip to content

TINYDOC-3663: Replace the multi-editor mode demo with an HR hiring pack example. #4405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
kemister85 wants to merge 1 commit into
base: tinymce/8
Choose a base branch
from
+137 −94
Draft

TINYDOC-3663: Replace the multi-editor mode demo with an HR hiring pack example. #4405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 55 additions & 16 deletions modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,45 @@
// Open-source plugins below are only for editing the demo HTML (lists, links, tables). TinyMCE AI options are the focus.
// Share one TinyMCE AI configuration between every editor in the group.
const sharedSettings = {
height: '400px',
plugins: ['tinymceai', 'advlist', 'lists', 'link', 'autolink', 'table', 'wordcount'],
toolbar: 'undo redo | tinymceai-chat tinymceai-review ai-quickactions-translate | styles | bold italic | bullist numlist | link',
toolbar: 'undo redo | tinymceai-chat tinymceai-review ai-quickactions-translate | styles | bold italic underline | bullist numlist | link table',
menubar: false,
tinymceai_sidebar_type: 'floating',
tinymceai_chat_welcome_message: '<p>Welcome to TinyMCE AI. Pick an action below or type your own prompt.</p>',
tinymceai_chat_welcome_message: '<p>Hi! I’m your writing assistant.</p><p>I can read and write across all three sections of this hiring pack — refine the role, generate interview questions, or draft notes for HR.</p>',
// Every welcome action uses the empty 'no-icon' icon registered in setup, so the buttons show text only.
tinymceai_chat_welcome_actions: [
{ text: 'Here are some actions to get started:' },
{ title: 'Summarize the document', command: 'TinyMCEAIQuickActionsSummarize' },
{ title: 'Continue writing', command: 'TinyMCEAIQuickActionContinueWriting' },
{ title: 'Translate to Spanish', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' },
{ title: 'Review my document', command: 'ToggleSidebar', value: 'tinymceai-review' }
{ text: '**Try one of these:**' },
{
title: 'Suggest more interview questions',
command: 'TinyMCEAIChatPrompt',
value: {
prompt: 'Based on the Role description, suggest three or four more interview questions and add them to the end of the numbered list in the Interview questions section. Match the style of the existing questions.',
displayedPrompt: 'Suggest more interview questions'
},
icon: 'no-icon'
},
{
title: 'Draft notes for HR',
command: 'TinyMCEAIChatPrompt',
value: {
prompt: 'Based on the Role description and the Interview questions, draft additional notes for HR about scheduling and running the interviews for this role, and add them to the Notes for HR section.',
displayedPrompt: 'Draft notes for HR'
},
icon: 'no-icon'
},
{
title: 'Flag any unclear or biased wording',
command: 'TinyMCEAIChatPrompt',
value: {
prompt: 'Check all three sections of this hiring pack for unclear or biased wording. For each phrase, explain the problem and suggest clearer, more inclusive wording.',
displayedPrompt: 'Flag any unclear or biased wording'
},
icon: 'no-icon'
}
],
setup: (editor) => {
editor.ui.registry.addIcon('no-icon', '');
},
tinymceai_token_provider: async () => {
return fetch('/api/token', { credentials: 'include' })
.then(resp => resp.text())
Expand Down Expand Up @@ -59,16 +86,28 @@ const sharedSettings = {

tinymce.init({
...sharedSettings,
selector: 'textarea#tinymceai-multi-editor-introduction',
tinymceai_group: 'article',
tinymceai_document_name: 'Introduction',
tinymceai_document_description: 'The introduction of the article. A title, a short paragraph that sets out the topic, and a figure.'
selector: 'textarea#tinymceai-multi-editor-role-description',
height: '270px',
sidebar_show: 'tinymceai-chat',
tinymceai_group: 'hiring-pack',
tinymceai_document_name: 'Role description',
tinymceai_document_description: 'The job advert for the role: the job title and location, what the role involves, and the requirements for candidates.'
});

tinymce.init({
...sharedSettings,
selector: 'textarea#tinymceai-multi-editor-interview-questions',
height: '340px',
tinymceai_group: 'hiring-pack',
tinymceai_document_name: 'Interview questions',
tinymceai_document_description: 'The interview guide for the role: a heading followed by a numbered list of interview questions.'
});

tinymce.init({
...sharedSettings,
selector: 'textarea#tinymceai-multi-editor-body',
tinymceai_group: 'article',
tinymceai_document_name: 'Body',
tinymceai_document_description: 'The main body of the article. Uses h2 and h3 subheadings, short paragraphs, a bulleted list, and a comparison table.'
selector: 'textarea#tinymceai-multi-editor-notes-for-hr',
height: '260px',
tinymceai_group: 'hiring-pack',
tinymceai_document_name: 'Notes for HR',
tinymceai_document_description: 'Notes for the HR team about scheduling and running the hiring process for the role.'
});
82 changes: 23 additions & 59 deletions modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,26 @@
<h3>Introduction (first editor in the group)</h3>
<textarea id="tinymceai-multi-editor-introduction">
<h1>The Future of Content Creation: Integrating GenAI into Modern Workflows</h1>
<p>The landscape of digital content creation is undergoing a seismic shift. For years, the process of writing, editing, and publishing remained largely manual, requiring significant cognitive load for every draft. However, the emergence of Generative AI (GenAI) has introduced a new paradigm. By embedding intelligence directly into the tools where writing happens, organizations can unlock unprecedented levels of productivity and creativity.</p>
<figure class="image"><img style="width: 566px; aspect-ratio: 1536 / 1024; display: block; margin-left: auto; margin-right: auto;" src="https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/preview/" sizes="(min-width: 1536px) 1536px, 100vw" srcset="https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/100x/ 100w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/200x/ 200w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/300x/ 300w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/500x/ 500w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/750x/ 750w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/preview/ 1536w" alt="Retro pop art illustration in red and blue halftone style showing a friendly robot collaborating with three people using laptops and tablets, symbolizing AI-assisted content creation and teamwork." height="357">
<figcaption>By embedding intelligence directly into the tools where writing happens, organizations unlock unprecedented levels of productivity and creativity.</figcaption>
</figure>
<style>
/* Hide the empty icon slot so the welcome action buttons show text only. */
.tox .tox-ai .tox-ai-chat-action-button .tox-icon:empty { display: none; }
</style>

<h3>Role description</h3>
<textarea id="tinymceai-multi-editor-role-description">
<h2>Senior product designer, Berlin</h2>
<p>We’re looking for a strong designer to join our young and fast-moving team shaping the editing experience end to end. You’ll own flows from first sketch to shipped release, working next to engineers and researchers.</p>
<p>Must have 5+ years in product design and be comfortable owning ambiguous problems. Native-level English required.</p>
</textarea>

<h3>Interview questions</h3>
<textarea id="tinymceai-multi-editor-interview-questions">
<h2>Interview guide</h2>
<ol>
<li>Walk me through a project where you owned the problem definition, not just the visuals.</li>
<li>How do you work with engineering when a constraint appears mid-build?</li>
</ol>
</textarea>

<h3>Body (shares the AI sidebar with the Introduction)</h3>
<textarea id="tinymceai-multi-editor-body">
<h2>The Shift from External Tools to Native Integration</h2>
<p>Many early adopters of AI technology rely on external chat interfaces. While powerful, this "copy-paste" workflow introduces friction and disrupts the creative flow. Native integration&mdash;where the AI exists within the text editor itself&mdash;allows creators to remain focused. Instead of switching tabs to generate a summary or check facts, the AI acts as a collaborative partner that understands the context of the current document.</p>
<h3>Key Benefits of Integrated AI</h3>
<ul>
<li><strong>Contextual Awareness:</strong> AI can analyze existing text to suggest relevant follow-up points or maintain a consistent brand voice.</li>
<li><strong>Reduced Cognitive Load:</strong> By automating repetitive tasks like formatting and basic proofreading, writers can focus on high-level strategy and storytelling.</li>
<li><strong>Streamlined Collaboration:</strong> Integrated tools allow teams to brainstorm and refine ideas within a single shared environment, accelerating the approval process.</li>
<li><strong>Enhanced Accuracy:</strong> When connected to internal knowledge bases, GenAI can provide fact-checking capabilities that generic models lack.</li>
</ul>
<h2>Evaluating Workflow Improvements</h2>
<p>To understand the impact of GenAI integration, it is helpful to compare traditional workflows against AI-enhanced processes. The following table highlights common content tasks and how native AI transforms the output and efficiency for different stakeholders.</p>
<table style="width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px; border: 1px solid rgb(206, 212, 217);" border="1">
<thead>
<tr>
<th style="border-color: #ced4d9; background-color: #ecf0f1; width: 26.6364%;">Workflow Task</th>
<th style="border-color: #ced4d9; background-color: #ecf0f1; width: 35.8714%;">Traditional Method</th>
<th style="border-color: #ced4d9; background-color: #ecf0f1; width: 37.4922%;">GenAI-Enhanced Method</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border-color: #ced4d9; width: 26.6364%;"><strong>Drafting</strong></td>
<td style="border-color: #ced4d9; width: 35.8714%;">Starting from a blank page.</td>
<td style="border-color: #ced4d9; width: 37.4922%;">AI-generated outlines and initial drafts.</td>
</tr>
<tr>
<td style="border-color: #ced4d9; width: 26.6364%;"><strong>Research</strong></td>
<td style="border-color: #ced4d9; width: 35.8714%;">Manual searching across multiple tabs.</td>
<td style="border-color: #ced4d9; width: 37.4922%;">Instant retrieval of internal/external data.</td>
</tr>
<tr>
<td style="border-color: #ced4d9; width: 26.6364%;"><strong>Tone Adjustment</strong></td>
<td style="border-color: #ced4d9; width: 35.8714%;">Manual rewriting for different audiences.</td>
<td style="border-color: #ced4d9; width: 37.4922%;">One-click conversion (e.g., Casual to Formal).</td>
</tr>
<tr>
<td style="border-color: #ced4d9; width: 26.6364%;"><strong>Summarization</strong></td>
<td style="border-color: #ced4d9; width: 35.8714%;">Reading full text and manual condensing.</td>
<td style="border-color: #ced4d9; width: 37.4922%;">Automated key takeaway generation.</td>
</tr>
<tr>
<td style="border-color: #ced4d9; width: 26.6364%;"><strong>Localization</strong></td>
<td style="border-color: #ced4d9; width: 35.8714%;">External translation services required.</td>
<td style="border-color: #ced4d9; width: 37.4922%;">In-editor multilingual support and translation.</td>
</tr>
</tbody>
</table>
<h2>Overcoming Adoption Challenges</h2>
<p>While the advantages are clear, implementing GenAI requires a strategic approach. Concerns regarding data privacy, output quality, and the "human touch" are common. <em>To address these, organizations should prioritize tools that offer "human-in-the-loop" functionality</em>. AI should be viewed as an assistant&mdash;a co-pilot that offers suggestions while leaving final editorial control in the hands of the writer.</p>
<p>Furthermore, technical teams must focus on the "integrator" experience. Providing developers with straightforward APIs and pre-built UI components ensures that these advanced features can be deployed quickly <strong>without the risk of building complex AI infrastructure from scratch</strong>. As we look toward the future, the goal is simple: technology that fades into the background, empowering creators to do their best work with less friction.</p>
<h3>Notes for HR</h3>
<textarea id="tinymceai-multi-editor-notes-for-hr">
<p>Schedule the portfolio review before the panel so feedback arrives in time.</p>
<p>Keep the take-home optional.</p>
</textarea>
76 changes: 58 additions & 18 deletions modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,22 +48,49 @@ const createRevisionHistoryFetch = (selector) => () => {

// Share one TinyMCE AI configuration between every editor in the group.
const sharedSettings = {
height: '400px',
plugins: [
'autolink', 'link', 'emoticons', 'lists', 'table', 'advlist', 'searchreplace', 'wordcount', 'autocorrect', 'tinymcespellchecker', 'charmap', 'fullscreen', 'advcode', 'accordion', 'anchor', 'footnotes', 'powerpaste', 'importword', 'exportpdf', 'exportword', 'markdown', 'a11ychecker', 'typography', 'casechange', 'checklist', 'advtable', 'formatpainter', 'permanentpen', 'tableofcontents', 'help', 'math', 'linkchecker', 'media', 'mediaembed',
'quickbars', 'tinymceai', 'tinycomments', 'mentions', 'revisionhistory', 'suggestededits', 'uploadcare'
],
toolbar: 'undo redo | tinymceai-chat tinymceai-review ai-quickactions-translate | styles | bold italic | bullist numlist | link',
toolbar: 'undo redo | tinymceai-chat tinymceai-review ai-quickactions-translate spellchecker | styles | bold italic underline forecolor backcolor casechange | link uploadcare table addcomment | align bullist numlist checklist removeformat | code fullscreen help',
menubar: false,
tinymceai_sidebar_type: 'floating',
quickbars_selection_toolbar: 'tinymceai-quickactions addcomment',
tinymceai_chat_welcome_message: '<p>Welcome to TinyMCE AI. Pick an action below or type your own prompt.</p>',
tinymceai_chat_welcome_message: '<p>Hi! I’m your writing assistant.</p><p>I can read and write across all three sections of this hiring pack — refine the role, generate interview questions, or draft notes for HR.</p>',
// Every welcome action uses the empty 'no-icon' icon registered in setup, so the buttons show text only.
tinymceai_chat_welcome_actions: [
{ text: 'Here are some actions to get started:' },
{ title: 'Summarize the document', command: 'TinyMCEAIQuickActionsSummarize' },
{ title: 'Continue writing', command: 'TinyMCEAIQuickActionContinueWriting' },
{ title: 'Translate to Spanish', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' },
{ title: 'Review my document', command: 'ToggleSidebar', value: 'tinymceai-review' }
{ text: '**Try one of these:**' },
{
title: 'Suggest more interview questions',
command: 'TinyMCEAIChatPrompt',
value: {
prompt: 'Based on the Role description, suggest three or four more interview questions and add them to the end of the numbered list in the Interview questions section. Match the style of the existing questions.',
displayedPrompt: 'Suggest more interview questions'
},
icon: 'no-icon'
},
{
title: 'Draft notes for HR',
command: 'TinyMCEAIChatPrompt',
value: {
prompt: 'Based on the Role description and the Interview questions, draft additional notes for HR about scheduling and running the interviews for this role, and add them to the Notes for HR section.',
displayedPrompt: 'Draft notes for HR'
},
icon: 'no-icon'
},
{
title: 'Flag any unclear or biased wording',
command: 'TinyMCEAIChatPrompt',
value: {
prompt: 'Check all three sections of this hiring pack for unclear or biased wording. For each phrase, explain the problem and suggest clearer, more inclusive wording.',
displayedPrompt: 'Flag any unclear or biased wording'
},
icon: 'no-icon'
}
],
setup: (editor) => {
editor.ui.registry.addIcon('no-icon', '');
},
toolbar_mode: 'sliding',
visual: false,
images_file_types: 'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp,svg',
Expand Down Expand Up @@ -128,18 +155,31 @@ const sharedSettings = {

tinymce.init({
...sharedSettings,
selector: 'textarea#tinymceai-multi-editor-introduction',
revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-introduction'),
tinymceai_group: 'article',
tinymceai_document_name: 'Introduction',
tinymceai_document_description: 'The introduction of the article. A title, a short paragraph that sets out the topic, and a figure.'
selector: 'textarea#tinymceai-multi-editor-role-description',
height: '270px',
sidebar_show: 'tinymceai-chat',
revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-role-description'),
tinymceai_group: 'hiring-pack',
tinymceai_document_name: 'Role description',
tinymceai_document_description: 'The job advert for the role: the job title and location, what the role involves, and the requirements for candidates.'
});

tinymce.init({
...sharedSettings,
selector: 'textarea#tinymceai-multi-editor-interview-questions',
height: '340px',
revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-interview-questions'),
tinymceai_group: 'hiring-pack',
tinymceai_document_name: 'Interview questions',
tinymceai_document_description: 'The interview guide for the role: a heading followed by a numbered list of interview questions.'
});

tinymce.init({
...sharedSettings,
selector: 'textarea#tinymceai-multi-editor-body',
revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-body'),
tinymceai_group: 'article',
tinymceai_document_name: 'Body',
tinymceai_document_description: 'The main body of the article. Uses h2 and h3 subheadings, short paragraphs, a bulleted list, and a comparison table.'
selector: 'textarea#tinymceai-multi-editor-notes-for-hr',
height: '260px',
revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-notes-for-hr'),
tinymceai_group: 'hiring-pack',
tinymceai_document_name: 'Notes for HR',
tinymceai_document_description: 'Notes for the HR team about scheduling and running the hiring process for the role.'
});
2 changes: 1 addition & 1 deletion modules/ROOT/pages/tinymceai-multi-editor.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ In a group, Chat, Review, and Quick Actions work across the content of every edi
[[demo]]
== Demo

The demo below splits an article across an Introduction editor and a Body editor in one group. Select the image:icons-premium/ai-assistant.svg[Chat icon,24px] Chat toolbar button in either editor to open the shared Chat sidebar, which the first editor hosts. Then ask the AI to change both parts of the article, or run a review over both editors.
The demo below splits a hiring pack across three editors in one group: a Role description editor, an Interview questions editor, and a Notes for HR editor. The shared Chat sidebar opens when the demo loads, and the image:icons-premium/ai-assistant.svg[Chat icon,24px] Chat toolbar button in any of the three editors opens or closes it. Select one of the suggested actions to add interview questions, draft notes for HR, or flag unclear or biased wording across the hiring pack, or run a review over all three editors.

liveDemo::tinymceai-multi-editor[]

Expand Down
Loading