cms-admin: Add in-toolbar translate button to TipTap rich text block

.changeset/tiptap-translate-button.md

@@ -0,0 +1,13 @@
+---
+"@dextinity/cms-admin": minor
+---
+
+Add an in-toolbar translate button to the TipTap rich text block
+
+The Draft.js-based rich text block already has a toolbar button to translate a single field, with an optional dialog to review the translation before applying it. The TipTap rich text block had no equivalent, leaving document-wide translation as the only option for TipTap fields.
+
+The button now appears in the TipTap toolbar whenever a `ContentTranslationServiceProvider` is enabled, and can be hidden per block with the new `disableContentTranslation` option:
+
+```tsx
+createTipTapRichTextBlock({ disableContentTranslation: true });
+```

packages/admin/cms-admin/src/blocks/tipTap/TipTapToolbar.tsx

@@ -19,6 +19,7 @@ import {
     RteUl,
     RteUnderlined,
     RteUndo,
+    Translate,
 } from "@dextinity/admin-icons";
 import {
     Box,
@@ -166,6 +167,8 @@ export const TipTapToolbar = ({
     childBlocks,
     listLevelMax,
     headingLevels = [1, 2, 3, 4, 5, 6],
+    canTranslate,
+    onTranslateClick,
 }: {
     editor: Editor;
     supports: TipTapSupports[];
@@ -176,6 +179,8 @@ export const TipTapToolbar = ({
     childBlocks: Record<string, TipTapChildBlock>;
     listLevelMax?: number;
     headingLevels?: number[];
+    canTranslate?: boolean;
+    onTranslateClick?: () => void;
 }) => {
     const intl = useIntl();
     const [moreAnchorEl, setMoreAnchorEl] = useState<null | HTMLElement>(null);
@@ -434,6 +439,16 @@ export const TipTapToolbar = ({
                     </FormControl>
                 </ToolbarGroup>
             )}
+            {canTranslate && (
+                <ToolbarGroup>
+                    <ToolbarButton
+                        editor={editor}
+                        icon={Translate}
+                        tooltip={<FormattedMessage id="dextinity.blocks.tipTapRichText.translate.tooltip" defaultMessage="Translate" />}
+                        onToggle={() => onTranslateClick?.()}
+                    />
+                </ToolbarGroup>
+            )}
             {(hasInlineFormatButtons || moreOptions) && (
                 <ToolbarGroup>
                     {supports.includes("bold") && (