DOC-3356: TBA #3976
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| <textarea id="tinymceai"> | ||
| <h1 style="font-size: 1.5em; color: black; margin-top: 0; text-align: left;">TinyMCE AI</h1> | ||
| <p style="font-size: 1em; color: #333; margin: 15px 0;">TinyMCE AI provides AI-powered features including AI chat, AI review, and quick actions.</p> | ||
| </textarea> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| tinymce.init({ | ||
| selector: 'textarea#tinymceai', | ||
| height: '800px', | ||
| plugins: ["tinymceai", "advlist", "anchor", "autolink", "charmap", "code"], | ||
| toolbar: "undo redo | tinymceai | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image" | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| = TinyMCE AI Quick Actions | ||
|
|
||
| :navtitle: Quick Actions | ||
| :description: quick actions feature for TinyMCE AI plugin | ||
| :description_short: quick actions feature | ||
| :keywords: AI, quick actions, actions, tinymceai | ||
|
|
||
| Quick actions streamline routine content transformations by offering one-click AI-powered suggestions directly within the editor. You can also ask questions about your selected text in AI chat to get instant AI insights and analysis. This feature enhances speed, relevance, and usability, particularly for repeatable or simple tasks. The feature comes with an easy-to-use window interface but can also act as a conversation starter with the xref:tinymceai-chat.adoc[Chat]. | ||
|
|
||
| [[demo]] | ||
| == Demo | ||
|
|
||
| liveDemo::tinymceai[] | ||
|
|
||
| [[overview]] | ||
| == Overview | ||
|
|
||
| Actions are fast, stateless operations that transform content directly. Unlike Reviews that provide suggestions, Actions immediately modify your content based on the selected operation. | ||
|
|
||
| **When to use Actions vs Reviews:** Use Actions when you need to transform specific text content (fix grammar, translate, adjust tone). Use Reviews when you need to analyze entire documents for quality improvements and get suggestions without automatically changing the content. | ||
|
Contributor
There was a problem hiding this comment. Same as before - Instead of "specific text content" should we say something like a selection or a small section or something? Since Quick Actions work on selections specifically. |
||
|
|
||
| image::https://placehold.net/default.png[TinyMCE AI quick actions showing AI-powered suggestions and Q&A functionality] | ||
|
|
||
| [[integration]] | ||
| == Integration | ||
|
|
||
| To start using the Quick Actions feature, first load the TinyMCE AI plugin in your editor configuration. xref:tinymceai-integration.adoc[Learn more about installing and enabling AI features]. | ||
|
|
||
| Then, you can add the menu that opens the list of Quick Actions (`tinymceai-actions`) image:https://placehold.net/default.png[Quick Actions icon,24px] to your main toolbar and/or balloon toolbar configurations. To learn more about toolbar configuration, refer to the xref:toolbar-configuration-options.adoc[toolbar configuration] guide. | ||
|
Contributor
There was a problem hiding this comment. Is "balloon toolbar" the equiv of our context toolbars? I assume so. Also want to check if we add the AI features to the selection toolbar by default if the plugin is enabled - Idk if we're doing that currently |
||
|
|
||
| image::https://placehold.net/default.png[TinyMCE AI Quick Actions dropdown in the toolbar] | ||
|
|
||
| Finally, you can also add individual Quick Actions to the toolbar as shortcuts for even easier access. For example, you can add the `ask-ai` image:https://placehold.net/default.png[Ask AI icon,24px] button, or the `improve-writing` image:https://placehold.net/default.png[Improve Writing icon,24px] button (find it in the demo above). You can add whole categories to the toolbar, too. xref:tinymceai-actions-plugin.adoc#default-actions[Learn more about available actions]. | ||
|
|
||
| The final example configuration looks as follows: | ||
|
|
||
| [source,js] | ||
| ---- | ||
| tinymce.init({ | ||
| selector: '#editor', | ||
| plugins: 'tinymceai', | ||
| tinymceai_token_provider: function() { | ||
| return fetch('/api/token').then(response => response.text()); | ||
| }, | ||
|
|
||
| // Adding Quick Actions to the main editor toolbar. | ||
| toolbar: [ | ||
| // The main Quick Actions button | ||
| 'tinymceai-actions', | ||
|
|
||
| // Two individual actions | ||
| 'ask-ai', | ||
| 'improve-writing', | ||
|
|
||
| // Whole action category | ||
| 'translate', | ||
|
|
||
| // ... other toolbar items | ||
| ], | ||
|
|
||
| // Adding Quick Actions to the balloon toolbar. Since some of the actions are selection-sensitive, | ||
| // accessing them might be easier for users using this kind of toolbar. | ||
| quickbars_selection_toolbar: 'tinymceai-actions | ask-ai | improve-writing | translate' | ||
| }); | ||
| ---- | ||
|
|
||
| [[types-of-actions]] | ||
| == Types of actions | ||
|
|
||
| There are two types of actions available in the quick actions feature: | ||
|
|
||
| * Some actions, for instance, "Ask AI" or "Summarize", lead to the xref:tinymceai-chat.adoc[Chat] interface with selected text added as context. The former will just open the Chat and allow you to start typing your message. The latter, however, will not only open the Chat but also start the conversation for your current editor selection right away, and expect a summary of that selection from the AI. | ||
|
|
||
| * Executing other actions like "Continue writing" or "Make shorter" will open the window interface conveniently right next to your selection and present the answers from the AI for you to accept or reject them. | ||
|
Contributor
There was a problem hiding this comment. pretty sure our UI ended up being a bit different for this |
||
|
|
||
| You can define the behavior of each action when you xref:tinymceai-actions-plugin.adoc#custom-actions[create custom ones]. | ||
|
|
||
| [[default-actions]] | ||
| == Default Actions | ||
|
|
||
| By default, the Quick Actions feature includes several built-in actions that speed up the content editing process. All Quick Actions can be accessed through the menu button image:https://placehold.net/default.png[Quick Actions icon,24px] (`tinymceai-actions`) but also individually when handpicked by the integrator in the xref:toolbar-configuration-options.adoc[editor toolbar configuration]. You can add the whole action categories to the toolbar too. | ||
|
|
||
| Keep in mind that you can xref:tinymceai-actions-plugin.adoc#custom-actions[add custom actions] to the list and xref:tinymceai-actions-plugin.adoc#removing-default-actions[remove defaults]. | ||
|
|
||
| Here's the full list of available actions: | ||
|
|
||
| * `'ask-ai'` | ||
| * **"Chat commands"** category (`'chat-commands'`) | ||
| ** `'explain'` | ||
| ** `'summarize'` | ||
| ** `'highlight-key-points'` | ||
| * `'improve-writing'` | ||
| * `'continue'` | ||
| * `'fix-grammar'` | ||
| * **"Adjust length"** category (`'adjust-length'`) | ||
| ** `'make-shorter'` | ||
| ** `'make-longer'` | ||
| * **"Change tone"** category (`'change-tone'`) | ||
| ** `'make-tone-casual'` | ||
| ** `'make-tone-direct'` | ||
| ** `'make-tone-friendly'` | ||
| ** `'make-tone-confident'` | ||
| ** `'make-tone-professional'` | ||
| * **"Translate"** category (`'translate'`) | ||
| ** `'translate-to-english'` | ||
| ** `'translate-to-chinese'` | ||
| ** `'translate-to-french'` | ||
| ** `'translate-to-german'` | ||
| ** `'translate-to-italian'` | ||
| ** `'translate-to-portuguese'` | ||
| ** `'translate-to-russian'` | ||
|
|
||
| [[custom-actions]] | ||
| == Custom Actions | ||
|
|
||
| The `tinymceai_actions_extraCommands` configuration property allows you to add new commands to the Quick actions feature. Below, you will find an example of three extra actions added to the user interface: two of them open the quick actions window, but the last one interacts with AI chat. Learn more about xref:tinymceai-actions-plugin.adoc#types-of-actions[types of actions]. | ||
|
Contributor
There was a problem hiding this comment. tinymceai_custom_commands |
||
|
|
||
| [source,js] | ||
| ---- | ||
| tinymce.init({ | ||
| selector: '#editor', | ||
| plugins: 'tinymceai', | ||
| toolbar: 'tinymceai-actions', | ||
| tinymceai_token_provider: function() { | ||
| return fetch('/api/token').then(response => response.text()); | ||
| }, | ||
| tinymceai_actions_extraCommands: [ | ||
| { | ||
| id: 'add-quote-from-famous-person', | ||
| displayedPrompt: 'Add a quote from a famous person', | ||
| prompt: 'Add a quote from a known person, which would make sense in the context of the selected text.', | ||
| type: 'ACTION', | ||
| model: 'agent-1' | ||
| }, | ||
| { | ||
| id: 'summarize-in-bullet-points', | ||
| displayedPrompt: 'Summarize in 5 bullet points', | ||
| prompt: 'Summarize the selected text in 5 bullet points.', | ||
| type: 'CHAT' | ||
| }, | ||
| { | ||
| id: 'include-more-sarcasm', | ||
| displayedPrompt: 'Rewrite adding more sarcasm', | ||
| prompt: 'Rewrite using a sarcastic tone.', | ||
| type: 'ACTION', | ||
| model: 'agent-1' | ||
| } | ||
|
|
||
| // ... More commands ... | ||
| ] | ||
| }); | ||
| ---- | ||
|
|
||
| [[removing-default-actions]] | ||
| == Removing default actions | ||
|
Contributor
There was a problem hiding this comment. we let people configure the list instead of them having to specify which to remove. option is. tinymceai_quickactions_menu for the main menu, then any sub menus have their own option (tone, length, etc) |
||
|
|
||
| The `tinymceai_actions_removeCommands` configuration property allows you to remove existing commands from the Quick actions feature. Here's an example that removes two actions ("Explain" and "Summarize"): | ||
|
|
||
| [source,js] | ||
| ---- | ||
| tinymce.init({ | ||
| selector: '#editor', | ||
| plugins: 'tinymceai', | ||
| toolbar: 'tinymceai-actions', | ||
| tinymceai_token_provider: function() { | ||
| return fetch('/api/token').then(response => response.text()); | ||
| }, | ||
| tinymceai_actions_removeCommands: [ | ||
| 'explain', | ||
| 'summarize' | ||
|
|
||
| // ... More commands to remove ... | ||
| ] | ||
| }); | ||
| ---- | ||
|
|
||
| [[related-features]] | ||
| == Related Features | ||
|
|
||
| * xref:tinymceai-chat.adoc[AI chat] – For interactive discussions with document analysis and context. | ||
| * xref:tinymceai-review-plugin.adoc[AI review] – For content quality analysis and improvement suggestions. | ||
| * xref:tinymceai-actions.adoc[Actions API] – For API-level action functionality. | ||
| * xref:tinymceai-introduction.adoc[Introduction] – Overview of all TinyMCE AI features. | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
that sentence is about chat, not quick actions.