Allow user to override TableMenuControls labels

sjdemartini · Jul 19, 2023 · 8767227 · 8767227
1 parent 05809e1
commit 8767227
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/src/TableBubbleMenu.tsx b/src/TableBubbleMenu.tsx
@@ -6,7 +6,9 @@ import ControlledBubbleMenu, {
   type ControlledBubbleMenuProps,
 } from "./ControlledBubbleMenu";
 import { useRichTextEditorContext } from "./context";
-import TableMenuControls from "./controls/TableMenuControls";
+import TableMenuControls, {
+  type TableMenuControlsProps,
+} from "./controls/TableMenuControls";
 import { useDebouncedFocus } from "./hooks";
 import DebounceRender, {
   type DebounceRenderProps,
@@ -26,6 +28,11 @@ export type TableBubbleMenuProps = {
    * interval, if `disableDebounce` is not true.
    */
   DebounceProps?: Except<DebounceRenderProps, "children">;
+  /**
+   * Override the default labels for any of the menu buttons. If any is omitted,
+   * it falls back to the default mui-tiptap label for that label.
+   */
+  labels?: TableMenuControlsProps["labels"];
 } & Partial<Except<ControlledBubbleMenuProps, "open" | "editor" | "children">>;
 
 const useStyles = makeStyles({
@@ -57,6 +64,7 @@ const useStyles = makeStyles({
 export default function TableBubbleMenu({
   disableDebounce = false,
   DebounceProps,
+  labels,
   ...controlledBubbleMenuProps
 }: TableBubbleMenuProps) {
   const editor = useRichTextEditorContext();
@@ -131,7 +139,9 @@ export default function TableBubbleMenu({
     return null;
   }
 
-  const controls = <TableMenuControls className={classes.controls} />;
+  const controls = (
+    <TableMenuControls className={classes.controls} labels={labels} />
+  );
 
   return (
     <ControlledBubbleMenu

diff --git a/src/controls/TableMenuControls.tsx b/src/controls/TableMenuControls.tsx
@@ -19,6 +19,24 @@ import MenuControlsContainer from "./MenuControlsContainer";
 export type TableMenuControlsProps = {
   /** Class applied to the root controls container element. */
   className?: string;
+  /**
+   * Override the default labels for any of the menu buttons. For any value that
+   * is omitted in this object, it falls back to the default content.
+   */
+  labels?: {
+    insertColumnBefore?: string;
+    insertColumnAfter?: string;
+    deleteColumn?: string;
+    insertRowAbove?: string;
+    insertRowBelow?: string;
+    deleteRow?: string;
+    mergeCells?: string;
+    splitCell?: string;
+    toggleHeaderRow?: string;
+    toggleHeaderColumn?: string;
+    toggleHeaderCell?: string;
+    deleteTable?: string;
+  };
 };
 
 /**
@@ -27,26 +45,27 @@ export type TableMenuControlsProps = {
  */
 export default function TableMenuControls({
   className,
+  labels,
 }: TableMenuControlsProps) {
   const editor = useRichTextEditorContext();
   return (
     <MenuControlsContainer className={className}>
       <MenuButton
-        tooltipLabel="Insert column before"
+        tooltipLabel={labels?.insertColumnBefore ?? "Insert column before"}
         IconComponent={RiInsertColumnLeft}
         onClick={() => editor?.chain().focus().addColumnBefore().run()}
         disabled={!editor?.can().addColumnBefore()}
       />
 
       <MenuButton
-        tooltipLabel="Insert column after"
+        tooltipLabel={labels?.insertColumnAfter ?? "Insert column after"}
         IconComponent={RiInsertColumnRight}
         onClick={() => editor?.chain().focus().addColumnAfter().run()}
         disabled={!editor?.can().addColumnAfter()}
       />
 
       <MenuButton
-        tooltipLabel="Delete column"
+        tooltipLabel={labels?.deleteColumn ?? "Delete column"}
         IconComponent={RiDeleteColumn}
         onClick={() => editor?.chain().focus().deleteColumn().run()}
         disabled={!editor?.can().deleteColumn()}
@@ -55,21 +74,21 @@ export default function TableMenuControls({
       <MenuDivider />
 
       <MenuButton
-        tooltipLabel="Insert row above"
+        tooltipLabel={labels?.insertRowAbove ?? "Insert row above"}
         IconComponent={RiInsertRowTop}
         onClick={() => editor?.chain().focus().addRowBefore().run()}
         disabled={!editor?.can().addRowBefore()}
       />
 
       <MenuButton
-        tooltipLabel="Insert row below"
+        tooltipLabel={labels?.insertRowBelow ?? "Insert row below"}
         IconComponent={RiInsertRowBottom}
         onClick={() => editor?.chain().focus().addRowAfter().run()}
         disabled={!editor?.can().addRowAfter()}
       />
 
       <MenuButton
-        tooltipLabel="Delete row"
+        tooltipLabel={labels?.deleteRow ?? "Delete row"}
         IconComponent={RiDeleteRow}
         onClick={() => editor?.chain().focus().deleteRow().run()}
         disabled={!editor?.can().deleteRow()}
@@ -78,14 +97,14 @@ export default function TableMenuControls({
       <MenuDivider />
 
       <MenuButton
-        tooltipLabel="Merge cells"
+        tooltipLabel={labels?.mergeCells ?? "Merge cells"}
         IconComponent={RiMergeCellsHorizontal}
         onClick={() => editor?.chain().focus().mergeCells().run()}
         disabled={!editor?.can().mergeCells()}
       />
 
       <MenuButton
-        tooltipLabel="Split cell"
+        tooltipLabel={labels?.splitCell ?? "Split cell"}
         IconComponent={RiSplitCellsHorizontal}
         onClick={() => editor?.chain().focus().splitCell().run()}
         disabled={!editor?.can().splitCell()}
@@ -94,21 +113,21 @@ export default function TableMenuControls({
       <MenuDivider />
 
       <MenuButton
-        tooltipLabel="Toggle header row"
+        tooltipLabel={labels?.toggleHeaderRow ?? "Toggle header row"}
         IconComponent={RiLayoutRowFill}
         onClick={() => editor?.chain().focus().toggleHeaderRow().run()}
         disabled={!editor?.can().toggleHeaderRow()}
       />
 
       <MenuButton
-        tooltipLabel="Toggle header column"
+        tooltipLabel={labels?.toggleHeaderColumn ?? "Toggle header column"}
         IconComponent={RiLayoutColumnFill}
         onClick={() => editor?.chain().focus().toggleHeaderColumn().run()}
         disabled={!editor?.can().toggleHeaderColumn()}
       />
 
       <MenuButton
-        tooltipLabel="Toggle header cell"
+        tooltipLabel={labels?.toggleHeaderCell ?? "Toggle header cell"}
         IconComponent={FormatColorFill}
         onClick={() => editor?.chain().focus().toggleHeaderCell().run()}
         disabled={!editor?.can().toggleHeaderCell()}
@@ -118,7 +137,7 @@ export default function TableMenuControls({
       <MenuDivider />
 
       <MenuButton
-        tooltipLabel="Delete table"
+        tooltipLabel={labels?.deleteTable ?? "Delete table"}
         IconComponent={GridOff}
         onClick={() => editor?.chain().focus().deleteTable().run()}
         disabled={!editor?.can().deleteTable()}