Welcome to TinyMCE AI. Pick an action below or type your own prompt.
', + 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' } + ], + 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' }, + ] +}; + +// Group 1: the Introduction and Native integration editors share one AI sidebar. +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-introduction', + tinymceai_group: 'article-opening', + 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.' +}); + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-native-integration', + tinymceai_group: 'article-opening', + tinymceai_document_name: 'Native integration', + tinymceai_document_description: 'The section on moving from external AI tools to AI built into the editor, with a bulleted list of benefits.' +}); + +// Group 2: the Workflow comparison and Adoption challenges editors share a separate AI sidebar and never see the content of group 1. +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-workflow-comparison', + tinymceai_group: 'article-analysis', + tinymceai_document_name: 'Workflow comparison', + tinymceai_document_description: 'The section that compares traditional and AI-enhanced workflows. Keep the comparison table.' +}); + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-adoption-challenges', + tinymceai_group: 'article-analysis', + tinymceai_document_name: 'Adoption challenges', + tinymceai_document_description: 'The closing section on adoption challenges. Two short paragraphs.' +}); diff --git a/modules/ROOT/examples/live-demos/tinymceai-multi-editor-groups/index.html b/modules/ROOT/examples/live-demos/tinymceai-multi-editor-groups/index.html new file mode 100644 index 0000000000..a64691acbf --- /dev/null +++ b/modules/ROOT/examples/live-demos/tinymceai-multi-editor-groups/index.html @@ -0,0 +1,77 @@ +article-openingarticle-analysisWelcome to TinyMCE AI. Pick an action below or type your own prompt.
', + 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' } + ], + toolbar_mode: 'sliding', + visual: false, + images_file_types: 'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp,svg', + user_id: 'james-wilson', + spellchecker_active: true, + spellchecker_dialog: true, + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_store_type: 'temporary', + advcode_inline: true, + tinycomments_mode: 'embedded', + suggestededits_content: 'html', + mentions_item_type: 'profile', + mentions_fetch, + fetch_users, + revisionhistory_display_author: true, + tinymceai_token_provider: async () => { + // Step 2: Check we have a session then fetch JWT + return isLoggedIn.then(() => + fetch(`https://demo.api.tiny.cloud/1/${apiKey}/jwt/tinymceai`, { 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' }, + ] +}; + +// Group 1: the Introduction and Native integration editors share one AI sidebar. +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-introduction', + revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-groups-introduction'), + tinymceai_group: 'article-opening', + 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.' +}); + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-native-integration', + revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-groups-native-integration'), + tinymceai_group: 'article-opening', + tinymceai_document_name: 'Native integration', + tinymceai_document_description: 'The section on moving from external AI tools to AI built into the editor, with a bulleted list of benefits.' +}); + +// Group 2: the Workflow comparison and Adoption challenges editors share a separate AI sidebar and never see the content of group 1. +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-workflow-comparison', + revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-groups-workflow-comparison'), + tinymceai_group: 'article-analysis', + tinymceai_document_name: 'Workflow comparison', + tinymceai_document_description: 'The section that compares traditional and AI-enhanced workflows. Keep the comparison table.' +}); + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#tinymceai-multi-editor-groups-adoption-challenges', + revisionhistory_fetch: createRevisionHistoryFetch('textarea#tinymceai-multi-editor-groups-adoption-challenges'), + tinymceai_group: 'article-analysis', + tinymceai_document_name: 'Adoption challenges', + tinymceai_document_description: 'The closing section on adoption challenges. Two short paragraphs.' +}); diff --git a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js new file mode 100644 index 0000000000..59f9baea49 --- /dev/null +++ b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/example.js @@ -0,0 +1,74 @@ +// 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', + tinymceai_sidebar_type: 'floating', + tinymceai_chat_welcome_message: 'Welcome to TinyMCE AI. Pick an action below or type your own prompt.
', + 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' } + ], + tinymceai_token_provider: async () => { + return fetch('/api/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' }, + ] +}; + +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.' +}); + +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.' +}); diff --git a/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html new file mode 100644 index 0000000000..6c2a5ef576 --- /dev/null +++ b/modules/ROOT/examples/live-demos/tinymceai-multi-editor/index.html @@ -0,0 +1,62 @@ +Welcome to TinyMCE AI. Pick an action below or type your own prompt.
', + 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' } + ], + toolbar_mode: 'sliding', + visual: false, + images_file_types: 'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp,svg', + user_id: 'james-wilson', + spellchecker_active: true, + spellchecker_dialog: true, + uploadcare_public_key: '630992ad50fe2291c406', + uploadcare_store_type: 'temporary', + advcode_inline: true, + tinycomments_mode: 'embedded', + suggestededits_content: 'html', + mentions_item_type: 'profile', + mentions_fetch, + fetch_users, + revisionhistory_display_author: true, + tinymceai_token_provider: async () => { + // Step 2: Check we have a session then fetch JWT + return isLoggedIn.then(() => + fetch(`https://demo.api.tiny.cloud/1/${apiKey}/jwt/tinymceai`, { 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' }, + ] +}; + +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.' +}); + +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.' +}); diff --git a/modules/ROOT/images/tinymceai/tinymceai-context-tag.png b/modules/ROOT/images/tinymceai/tinymceai-context-tag.png new file mode 100644 index 0000000000..b04ead3a52 Binary files /dev/null and b/modules/ROOT/images/tinymceai/tinymceai-context-tag.png differ diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 366559b36c..05bad34f08 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -258,6 +258,7 @@ **** xref:tinymceai-chat.adoc[Chat] **** xref:tinymceai-review.adoc[Review] **** xref:tinymceai-actions.adoc[Actions] +**** xref:tinymceai-multi-editor.adoc[Multi-editor mode] **** xref:tinymceai-models.adoc[AI models] **** xref:tinymceai-limits.adoc[Limits] **** xref:tinymceai-integration-options.adoc[Integration options] diff --git a/modules/ROOT/pages/8.10.0-release-notes.adoc b/modules/ROOT/pages/8.10.0-release-notes.adoc index 11148912fb..c38e59de1d 100644 --- a/modules/ROOT/pages/8.10.0-release-notes.adoc +++ b/modules/ROOT/pages/8.10.0-release-notes.adoc @@ -221,7 +221,18 @@ For information on the **Suggested Edits** plugin, see: xref:suggestededits.adoc The {productname} {release-version} release includes an accompanying release of the **TinyMCE AI** premium plugin. -**TinyMCE AI** includes the following improvements and fixes. +**TinyMCE AI** includes the following addition, improvements and fixes. + +==== New multi-editor support +// #TINYMCE-14817 + +Previously, the **TinyMCE AI** plugin worked with one editor at a time. When related content was split across several editors on a page, users had to run Chat, Review, and Quick Actions in each editor separately, and the AI had no context from the other editors. + +In {productname} {release-version}, the **TinyMCE AI** plugin can group editors on the same page. Editors that share a xref:tinymceai.adoc#tinymceai_group[`+tinymceai_group+`] value share one Chat sidebar and one Review sidebar. Chat, Review, and Quick Actions work across the content of every editor in the group, and the plugin previews and applies each change in the editor it belongs to. The Review sidebar groups suggestions under the name of the editor they belong to. + +The xref:tinymceai.adoc#tinymceai_document_name[`+tinymceai_document_name+`] option names the content of each editor, and the xref:tinymceai.adoc#tinymceai_document_description[`+tinymceai_document_description+`] option describes that content to the AI service. + +For information on multi-editor mode, see xref:tinymceai-multi-editor.adoc[Multi-editor mode]. ==== Applying or skipping all quick action suggestions did nothing when the Review sidebar was open // #TINYMCE-14293 diff --git a/modules/ROOT/pages/tinymceai-actions.adoc b/modules/ROOT/pages/tinymceai-actions.adoc index bad22cd5aa..5078a74be7 100644 --- a/modules/ROOT/pages/tinymceai-actions.adoc +++ b/modules/ROOT/pages/tinymceai-actions.adoc @@ -298,3 +298,4 @@ The https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] reference (in * xref:tinymceai-chat.adoc[AI Chat]: For interactive discussions with document analysis and context. * xref:tinymceai-review.adoc[AI Review]: For content quality analysis and improvement suggestions. +* xref:tinymceai-multi-editor.adoc[Multi-editor mode]: For sharing Chat, Review, and Quick Actions across several editors on one page. diff --git a/modules/ROOT/pages/tinymceai-chat.adoc b/modules/ROOT/pages/tinymceai-chat.adoc index e110299faa..ba69e993bb 100644 --- a/modules/ROOT/pages/tinymceai-chat.adoc +++ b/modules/ROOT/pages/tinymceai-chat.adoc @@ -287,3 +287,4 @@ The https://tinymceai.api.tiny.cloud/docs[interactive API documentation] lists e * xref:tinymceai-review.adoc[AI Review]: For content quality analysis and improvement suggestions. * xref:tinymceai-actions.adoc[Quick actions]: For fast, stateless content transformations. +* xref:tinymceai-multi-editor.adoc[Multi-editor mode]: For sharing Chat, Review, and Quick Actions across several editors on one page. diff --git a/modules/ROOT/pages/tinymceai-multi-editor.adoc b/modules/ROOT/pages/tinymceai-multi-editor.adoc new file mode 100644 index 0000000000..417a9fd0fd --- /dev/null +++ b/modules/ROOT/pages/tinymceai-multi-editor.adoc @@ -0,0 +1,134 @@ += TinyMCE AI multi-editor mode +:navtitle: Multi-editor mode +:pluginname: TinyMCE AI +:plugincode: tinymceai +:description: Group several editors on one page so that they share TinyMCE AI Chat, Review, and Quick Actions +:description_short: multi-editor mode +:keywords: AI, multi-editor, multiple editors, group, tinymceai + +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. + +[[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. + +liveDemo::tinymceai-multi-editor[] + +include::partial$misc/admon-inline-not-supported.adoc[] + +[[how-grouped-editors-work]] +== How grouped editors work + +[[shared-sidebar]] +=== Shared sidebar + +The first editor of the group to be created hosts the shared Chat sidebar and Review sidebar. The Chat and Review toolbar buttons and menu items in every other editor of the group open, close, and focus that shared sidebar. + +[[chat]] +=== Chat + +By default, each chat prompt includes the content of every editor in the group. Each editor appears above the prompt as a context tag labeled with its xref:tinymceai.adoc#tinymceai_document_name[`+tinymceai_document_name+`] value, for example image:tinymceai/tinymceai-context-tag.png[Body context tag] for an editor named `+Body+`. + +Users can change which editors the AI works with: + +* Removing a context tag leaves the content of that editor out of the prompt, and the AI does not change that editor. +* The **Add context source** menu lists every editor in the group and adds a removed editor back. + +After a message is sent, the editors included in that message stay in the conversation and their context tags cannot be removed until the user starts a new conversation. Editors that were left out can still be added from the **Add context source** menu at any point in the conversation. + +The AI can change the content of any editor in the conversation, and the plugin previews and applies each change in the editor it belongs to. To direct a request at the content of one editor, name that content in the prompt, for example _"Shorten the Introduction"_. For more information about chat, see xref:tinymceai-chat.adoc[Chat]. + +[[review]] +=== Review + +A review analyzes the content of every editor in the group. The Review sidebar groups suggestions under the name of the editor they belong to and shows the number of pending suggestions in each group. A review always covers the whole group. For more information about reviews, see xref:tinymceai-review.adoc[Review]. + +[[quick-actions]] +=== Quick Actions + +Users can run a Quick Action from any editor in the group. What the Quick Action changes depends on whether text is selected in that editor: + +* With text selected, the Quick Action changes only the selected text in that editor. +* With no text selected, the Quick Action changes the whole content of every editor in the group and ignores any text selected in the other editors. For example, running **Translate** with no text selected translates every editor in the group. + +Chat actions, such as **Explain**, **Summarize**, and **Highlight key points**, open the shared Chat sidebar and start a conversation that includes every editor in the group, as described in xref:#chat[Chat]. For more information about Quick Actions, see xref:tinymceai-actions.adoc[Quick Actions]. + +[[previewing-and-applying-changes]] +=== Previewing and applying changes + +While the {pluginname} plugin previews changes from Chat or Quick Actions, each affected editor shows its own preview and is read-only. The whole group shares one change toolbar: + +* The change counter covers the changes in every editor of the group. +* The next and previous buttons move between changes across editors. +* Selecting a change in any editor moves the change toolbar to that change. +* Accepting or rejecting a change applies it to the editor that holds the change. + +[[discarding-suggestions]] +=== Discarding pending suggestions + +When any editor in the group has pending suggestions, the {pluginname} plugin asks for confirmation before it discards them and starts a different AI task. For example, the confirmation dialog appears when the user switches between the Chat sidebar and the Review sidebar, or runs a Quick Action while a review has pending suggestions. + +If the user confirms, the plugin discards the pending suggestions in every editor of the group and returns each editor to normal editing. If the user cancels, the plugin keeps every preview and pending suggestion. + +[[integration]] +== Integration + +To group editors, load the `+tinymceai+` plugin in each editor and set the same xref:tinymceai.adoc#tinymceai_group[`+tinymceai_group+`] value on each editor in the group. Give each editor a unique xref:tinymceai.adoc#tinymceai_document_name[`+tinymceai_document_name+`] value, and optionally a xref:tinymceai.adoc#tinymceai_document_description[`+tinymceai_document_description+`] value that describes the content to the AI. + +Multi-editor mode is supported with the floating sidebar. Set xref:tinymceai.adoc#tinymceai_sidebar_type[`+tinymceai_sidebar_type+`] to `+'floating'+` for every editor in the group. + +Use the same {pluginname} configuration for every editor in a group, for example by sharing a settings object between the `+tinymce.init+` calls: + +[source,js] +---- +const sharedSettings = { + plugins: 'tinymceai', + toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review', + tinymceai_sidebar_type: 'floating', + tinymceai_group: 'article', + // Required for authentication + tinymceai_token_provider: () => { + return fetch('/api/token').then(r => r.text()).then(token => ({ token })); + } +}; + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#introduction', // change this value according to the HTML + tinymceai_document_name: 'Introduction', + tinymceai_document_description: 'The introduction of the article. A short paragraph that sets out the topic and hooks the reader.' +}); + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#body', // change this value according to the HTML + tinymceai_document_name: 'Body', + tinymceai_document_description: 'The main body of the article. Uses h2 subheadings and short paragraphs.' +}); +---- + +Grouped editors must be on the same page and use the same `+tinymce+` instance. Set xref:tinymceai.adoc#tinymceai_group[`+tinymceai_group+`] in the initial configuration of each editor. + +For information about installing the plugin and enabling AI features, see xref:tinymceai.adoc[Plugin Reference]. + +[[multiple-groups]] +=== Multiple groups on one page + +A page can contain several independent groups, each with a different xref:tinymceai.adoc#tinymceai_group[`+tinymceai_group+`] value. Each group has its own shared sidebar, and an editor in one group never receives the content of an editor in another group. For a configuration with two groups, see the xref:tinymceai.adoc#tinymceai_group[two-group example]. + +[[configuration]] +== Configuration + +For the options that configure multi-editor mode, see xref:tinymceai.adoc#options-multi-editor[Options for multi-editor mode]. + +[[related-features]] +== Related features + +* xref:tinymceai-chat.adoc[AI Chat]: For interactive discussions with document analysis and context. +* xref:tinymceai-review.adoc[AI Review]: For content quality analysis and improvement suggestions. +* xref:tinymceai-actions.adoc[Quick Actions]: For fast, stateless content transformations. diff --git a/modules/ROOT/pages/tinymceai-review.adoc b/modules/ROOT/pages/tinymceai-review.adoc index 2ceef933e9..738f1db662 100644 --- a/modules/ROOT/pages/tinymceai-review.adoc +++ b/modules/ROOT/pages/tinymceai-review.adoc @@ -134,3 +134,4 @@ The https://tinymceai.api.tiny.cloud/docs#tag/Reviews[Reviews API] reference (in * xref:tinymceai-chat.adoc[AI chat]: For interactive discussions with document analysis and context. * xref:tinymceai-actions.adoc[Quick actions]: Shortcuts to individual AI operations on a selection or range (transformations, translation, chat, and custom actions). +* xref:tinymceai-multi-editor.adoc[Multi-editor mode]: For sharing Chat, Review, and Quick Actions across several editors on one page. diff --git a/modules/ROOT/partials/configuration/tinymceai_options.adoc b/modules/ROOT/partials/configuration/tinymceai_options.adoc index 73902da544..b1664d75ae 100644 --- a/modules/ROOT/partials/configuration/tinymceai_options.adoc +++ b/modules/ROOT/partials/configuration/tinymceai_options.adoc @@ -847,3 +847,136 @@ tinymceai_reviews: [ ] ---- +[[options-multi-editor]] +== Options for multi-editor mode + +These options group several editors on the same page so that they share one Chat sidebar and one Review sidebar, and Chat, Review, and Quick Actions work across the content of every editor in the group. The options also identify the content of each editor to users and to the AI service. For a description of how grouped editors work, see xref:tinymceai-multi-editor.adoc[Multi-editor mode]. + +include::partial$misc/admon-requires-8.10v.adoc[] + +[[tinymceai_group]] +=== `+tinymceai_group+` + +Adds the editor to a named group. Editors on the same page with the same `+tinymceai_group+` value share one Chat sidebar and one Review sidebar. In a group, Chat, Review, and Quick Actions work across the content of every editor. The editor created first in the group hosts the shared sidebars. + +The plugin uses the group name only to match editors, and never shows the name to users or sends it to the AI service. A page can contain several independent groups, each with a different name. Editors in one group never receive content from another group. + +An editor without this option does not belong to any group. It has its own Chat sidebar and Review sidebar, and works only with its own content, even when other editors on the same page belong to a group. + +For more details and a live demo, see xref:tinymceai-multi-editor.adoc[Multi-editor mode]. + +*Type:* `+String+` + +*Default value:* `+undefined+` + +.Example: two independent groups on one page +[source,js] +---- +const sharedSettings = { + plugins: 'tinymceai', + toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review', + tinymceai_sidebar_type: 'floating', + // Required for authentication + tinymceai_token_provider: () => { + return fetch('/api/token').then(r => r.text()).then(token => ({ token })); + } +}; + +// Group "article": the introduction and body editors share one AI sidebar. +tinymce.init({ + ...sharedSettings, + selector: 'textarea#introduction', // change this value according to the HTML + tinymceai_group: 'article' +}); + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#body', // change this value according to the HTML + tinymceai_group: 'article' +}); + +// Group "notes": a separate AI sidebar that never receives the content of the "article" group. +tinymce.init({ + ...sharedSettings, + selector: 'textarea#research-notes', // change this value according to the HTML + tinymceai_group: 'notes' +}); + +tinymce.init({ + ...sharedSettings, + selector: 'textarea#review-notes', // change this value according to the HTML + tinymceai_group: 'notes' +}); +---- + +[NOTE] +==== +Set this option in the initial configuration of the editor. Changing this option after the editor initializes is not supported. +==== + +[[tinymceai_document_name]] +=== `+tinymceai_document_name+` + +The name of the content in the editor. The {pluginname} plugin uses this name to: + +* Label the content of the editor in the Chat sidebar, including the context tags of a prompt and the chat history. +* Label the group of suggestions for the editor in the Review sidebar. +* Name the content that the plugin sends to the AI service with a chat prompt, so that the AI can refer to it and tell it apart from the content of other editors. +* Match each editor to its content when a user resumes a conversation from the chat history. + +When this option is not set, the plugin uses the editor ID as the name, for example `+mce_0+` or the ID of the target element. Set a descriptive name for each editor in a group, because an editor ID does not identify the content to users or to the AI service. + +The plugin removes leading and trailing whitespace from the value. A value that is empty or longer than 255 characters is not valid. When the value is not valid, {productname} logs a warning to the browser console and the plugin uses the editor ID instead. + +*Type:* `+String+` + +*Default value:* `+undefined+` + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', // change this value according to the HTML + plugins: 'tinymceai', + toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review', + tinymceai_group: 'report', + tinymceai_document_name: 'Executive summary', + // Required for authentication + tinymceai_token_provider: () => { + return fetch('/api/token').then(r => r.text()).then(token => ({ token })); + } +}); +---- + +[IMPORTANT] +==== +Give each editor in a group a unique name, and keep each name the same across page loads. When a user resumes a conversation from the chat history, the plugin matches the stored content to editors by name. If two editors in a group share a name, the plugin can match content to the wrong editor. If a name changes, the plugin no longer matches conversations saved with the previous name to that editor. +==== + +[[tinymceai_document_description]] +=== `+tinymceai_document_description+` + +A short description of the content in the editor, such as its purpose, format, length limits, or audience. The {pluginname} plugin sends the description to the AI service with the content of the editor when a user submits a chat prompt. The AI uses the description as additional context, for example to keep a title short or to apply a change only to the relevant content. + +Users do not see the description. + +*Type:* `+String+` + +*Default value:* `+undefined+` + +.Example +[source,js] +---- +tinymce.init({ + selector: 'textarea', // change this value according to the HTML + plugins: 'tinymceai', + toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review', + tinymceai_group: 'blog-post', + tinymceai_document_name: 'Blog post body', + tinymceai_document_description: 'The main body of the blog post. Uses h2 subheadings and short paragraphs.', + // Required for authentication + tinymceai_token_provider: () => { + return fetch('/api/token').then(r => r.text()).then(token => ({ token })); + } +}); +---- diff --git a/modules/ROOT/partials/misc/admon-requires-8.10v.adoc b/modules/ROOT/partials/misc/admon-requires-8.10v.adoc new file mode 100644 index 0000000000..8cfaa251e1 --- /dev/null +++ b/modules/ROOT/partials/misc/admon-requires-8.10v.adoc @@ -0,0 +1 @@ +NOTE: This feature is only available for {productname} 8.10 and later.