From 7783ef6e22648e5acdb474fbdb579f3ad47a1474 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Fri, 23 Oct 2026 13:12:11 +1000 Subject: [PATCH 1/2] TINYDOC-3663: Replace the multi-editor mode demo with an HR hiring pack example. --- .../tinymceai-multi-editor/example.js | 71 ++++++++++++---- .../tinymceai-multi-editor/index.html | 82 ++++++------------- .../tinymceai-multi-editor/index.js | 76 +++++++++++++---- .../ROOT/pages/tinymceai-multi-editor.adoc | 2 +- 4 files changed, 137 insertions(+), 94 deletions(-) diff --git a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js index 59f9baea49..b05a681c92 100644 --- a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js +++ b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js @@ -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: '

Welcome to TinyMCE AI. Pick an action below or type your own prompt.

', + tinymceai_chat_welcome_message: '

Hi! I’m your writing assistant.

I can read and write across all three sections of this hiring pack — refine the role, generate interview questions, or draft notes for HR.

', + // 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()) @@ -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.' }); diff --git a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html index 6c2a5ef576..9c8b98d8a4 100644 --- a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html +++ b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html @@ -1,62 +1,26 @@ -

Introduction (first editor in the group)

- + +

Interview questions

+ -

Body (shares the AI sidebar with the Introduction)

- diff --git a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.js b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.js index 600056c785..b640c3827e 100644 --- a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.js +++ b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.js @@ -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: '

Welcome to TinyMCE AI. Pick an action below or type your own prompt.

', + tinymceai_chat_welcome_message: '

Hi! I’m your writing assistant.

I can read and write across all three sections of this hiring pack — refine the role, generate interview questions, or draft notes for HR.

', + // 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', @@ -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.' }); diff --git a/modules/ROOT/pages/tinymceai-multi-editor.adoc b/modules/ROOT/pages/tinymceai-multi-editor.adoc index 417a9fd0fd..c9a2a96c1e 100644 --- a/modules/ROOT/pages/tinymceai-multi-editor.adoc +++ b/modules/ROOT/pages/tinymceai-multi-editor.adoc @@ -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[] From 15a6febe26f864aa25c04eb71c1997d0e2af6e66 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 28 Oct 2026 14:18:02 +1000 Subject: [PATCH 2/2] TINYDOC-3663: apply feedback from product. --- modules/ROOT/pages/tinymceai-multi-editor.adoc | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/modules/ROOT/pages/tinymceai-multi-editor.adoc b/modules/ROOT/pages/tinymceai-multi-editor.adoc index c9a2a96c1e..ec8a052261 100644 --- a/modules/ROOT/pages/tinymceai-multi-editor.adoc +++ b/modules/ROOT/pages/tinymceai-multi-editor.adoc @@ -8,14 +8,12 @@ include::partial$misc/admon-requires-8.10v.adoc[] -Multi-editor mode groups several {productname} editors on the same page so that they share one Chat sidebar and one Review sidebar. Use multi-editor mode when a page splits related content across several editors, for example a form with separate editors for a summary and a body, or a page that edits several related articles side by side. - -In a group, Chat, Review, and Quick Actions work across the content of every editor. The {pluginname} plugin identifies the content of each editor by name, and previews and applies each change in the editor it belongs to. +Multi-editor mode groups several {productname} editors on one page, such as the sections of a form, so that they share one Chat sidebar and one Review sidebar. Chat, Review, and Quick Actions work across the content of every editor in the group. [[demo]] == Demo -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. +The demo below groups the three sections of a hiring pack, and the shared Chat sidebar opens when the demo loads. Select a suggested action, or run a review across all three editors. liveDemo::tinymceai-multi-editor[]