From 876722786cfaa4c248dec3764514224be3241c6f Mon Sep 17 00:00:00 2001
From: Steven DeMartini <sjdemartini@users.noreply.github.com>
Date: Mon, 17 Jul 2023 10:09:45 -0700
Subject: [PATCH] Allow user to override TableMenuControls labels

---
 src/TableBubbleMenu.tsx            | 14 ++++++++--
 src/controls/TableMenuControls.tsx | 43 +++++++++++++++++++++---------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/TableBubbleMenu.tsx b/src/TableBubbleMenu.tsx
index 18b06a6..562d049 100644
--- 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
index 575f832..3fcee9c 100644
--- 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()}