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 @@ -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..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 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 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[]