Share localization string between sendbox and editbox (#4457)

* Share localization string between sendbox and editbox * Clean up PR * Make string name more specific * Remove extends from MessageThreadStrings * Update communication-react.api.md
Azure · May 10, 2024 · 777db03 · 777db03
1 parent 050401f
commit 777db03
Show file tree

Hide file tree

Showing 28 changed files with 477 additions and 441 deletions.
diff --git a/packages/communication-react/review/beta/communication-react.api.md b/packages/communication-react/review/beta/communication-react.api.md
@@ -3308,7 +3308,7 @@ export type MessageEditedListener = MessageReceivedListener;
 // @public
 export type MessageProps = {
     message: Message;
-    strings: MessageThreadStrings;
+    strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;
@@ -3924,26 +3924,30 @@ export interface RichTextSendBoxProps {
 }
 
 // @beta
-export interface RichTextSendBoxStrings extends SendBoxStrings {
-    boldTooltip: string;
-    bulletListTooltip: string;
-    decreaseIndentTooltip: string;
-    deleteColumnMenu: string;
-    deleteRowMenu: string;
-    deleteRowOrColumnMenu: string;
-    deleteTableMenu: string;
-    increaseIndentTooltip: string;
-    insertColumnLeftMenu: string;
-    insertColumnRightMenu: string;
-    insertRowAboveMenu: string;
-    insertRowBelowMenu: string;
-    insertRowOrColumnMenu: string;
-    insertTableMenuTitle: string;
-    insertTableTooltip: string;
-    italicTooltip: string;
-    numberListTooltip: string;
+export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
+}
+
+// @beta
+export interface RichTextStrings {
+    richTextBoldTooltip: string;
+    richTextBulletListTooltip: string;
+    richTextDecreaseIndentTooltip: string;
+    richTextDeleteColumnMenu: string;
+    richTextDeleteRowMenu: string;
+    richTextDeleteRowOrColumnMenu: string;
+    richTextDeleteTableMenu: string;
     richTextFormatButtonTooltip: string;
-    underlineTooltip: string;
+    richTextIncreaseIndentTooltip: string;
+    richTextInsertColumnLeftMenu: string;
+    richTextInsertColumnRightMenu: string;
+    richTextInsertRowAboveMenu: string;
+    richTextInsertRowBelowMenu: string;
+    richTextInsertRowOrColumnMenu: string;
+    richTextInsertTableMenuTitle: string;
+    richTextInsertTableTooltip: string;
+    richTextItalicTooltip: string;
+    richTextNumberListTooltip: string;
+    richTextUnderlineTooltip: string;
 }
 
 // @public

diff --git a/packages/communication-react/src/index.ts b/packages/communication-react/src/index.ts
@@ -304,7 +304,7 @@ export type {
 /* @conditional-compile-remove(rich-text-editor) */
 export { RichTextSendBox } from '../../react-components/src';
 /* @conditional-compile-remove(rich-text-editor) */
-export type { RichTextSendBoxProps, RichTextSendBoxStrings } from '../../react-components/src';
+export type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from '../../react-components/src';
 /* @conditional-compile-remove(spotlight) */
 export type { Spotlight } from '../../react-components/src';
 export type { ImageOverlayProps, ImageOverlayStrings } from '../../react-components/src';

diff --git a/.../src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx b/.../src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx
@@ -153,9 +153,13 @@ export const ChatMessageComponentAsRichTextEditBox = (
   ]);
   const richTextLocaleStrings = useMemo(() => {
     /* @conditional-compile-remove(rich-text-editor) */
-    return locale.richTextSendBox;
+    return { ...locale.richTextSendBox, ...strings };
     return locale.sendBox;
-  }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
+  }, [
+    /* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox,
+    /* @conditional-compile-remove(rich-text-editor) */ strings,
+    locale.sendBox
+  ]);
 
   /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
   const onCancelAttachmentUpload = useCallback(

diff --git a/packages/react-components/src/components/MessageThread.tsx b/packages/react-components/src/components/MessageThread.tsx
@@ -48,6 +48,8 @@ import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
 import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 import { Announcer } from './Announcer';
 /* @conditional-compile-remove(rich-text-editor) */
+import { RichTextStrings } from './RichTextEditor/RichTextSendBox';
+/* @conditional-compile-remove(rich-text-editor) */
 import { loadChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker';
 
 const isMessageSame = (first: ChatMessage, second: ChatMessage): boolean => {
@@ -564,7 +566,7 @@ export type MessageProps = {
   /**
    * Strings from parent MessageThread component
    */
-  strings: MessageThreadStrings;
+  strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>;
   /**
    * Custom CSS styles for chat message container.
    */

diff --git a/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx b/packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx
@@ -31,83 +31,90 @@ import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
  *
  * @beta
  */
-export interface RichTextSendBoxStrings extends SendBoxStrings {
+export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}
+
+/**
+ * Strings of RichText that can be overridden.
+ *
+ * @beta
+ */
+export interface RichTextStrings {
   /**
    * Tooltip text for the bold button.
    */
-  boldTooltip: string;
+  richTextBoldTooltip: string;
   /**
    * Tooltip text for the italic button.
    */
-  italicTooltip: string;
+  richTextItalicTooltip: string;
   /**
    * Tooltip text for the underline button.
    */
-  underlineTooltip: string;
+  richTextUnderlineTooltip: string;
   /**
    * Tooltip text for the bullet list button.
    */
-  bulletListTooltip: string;
+  richTextBulletListTooltip: string;
   /**
    * Tooltip text for the number list button.
    */
-  numberListTooltip: string;
+  richTextNumberListTooltip: string;
   /**
    * Tooltip text for the increase indent button.
    */
-  increaseIndentTooltip: string;
+  richTextIncreaseIndentTooltip: string;
   /**
    * Tooltip text for the decrease indent button.
    */
-  decreaseIndentTooltip: string;
+  richTextDecreaseIndentTooltip: string;
   /**
    * Tooltip text insert table button.
    */
-  insertTableTooltip: string;
+  richTextInsertTableTooltip: string;
   /**
    * Tooltip text for the rich text format button button.
    */
   richTextFormatButtonTooltip: string;
   /**
    * Text for the insert menu item.
    */
-  insertRowOrColumnMenu: string;
+  richTextInsertRowOrColumnMenu: string;
   /**
    * Title for the insert table menu.
    */
-  insertTableMenuTitle: string;
+  richTextInsertTableMenuTitle: string;
   /**
    * Text for the insert menu item to insert row above the current selection.
    */
-  insertRowAboveMenu: string;
+  richTextInsertRowAboveMenu: string;
   /**
    * Text for the insert menu item to insert row below the current selection.
    */
-  insertRowBelowMenu: string;
+  richTextInsertRowBelowMenu: string;
   /**
    * Text for the insert menu item to insert column to the left from the current selection.
    */
-  insertColumnLeftMenu: string;
+  richTextInsertColumnLeftMenu: string;
   /**
    * Text for the insert menu item to insert column to the right from the current selection.
    */
-  insertColumnRightMenu: string;
+  richTextInsertColumnRightMenu: string;
   /**
    * Text for the delete row or column menu.
    */
-  deleteRowOrColumnMenu: string;
+  richTextDeleteRowOrColumnMenu: string;
   /**
    * Text for the delete column menu.
    */
-  deleteColumnMenu: string;
+  richTextDeleteColumnMenu: string;
   /**
    * Text for the delete row menu.
    */
-  deleteRowMenu: string;
+  richTextDeleteRowMenu: string;
   /**
    * Text for the delete table menu.
    */
-  deleteTableMenu: string;
+  richTextDeleteTableMenu: string;
 }
 
 /**

diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
@@ -27,7 +27,7 @@ export { ChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageCo
 /* @conditional-compile-remove(rich-text-editor) */
 export type { ChatMessageComponentAsRichTextEditBoxProps } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox';
 /* @conditional-compile-remove(rich-text-editor) */
-export type { RichTextSendBoxProps, RichTextSendBoxStrings } from './RichTextEditor/RichTextSendBox';
+export type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from './RichTextEditor/RichTextSendBox';
 
 /* @conditional-compile-remove(mention) */
 export type {

diff --git a/packages/react-components/src/components/utils/RichTextEditorStringsUtils.ts b/packages/react-components/src/components/utils/RichTextEditorStringsUtils.ts
@@ -10,15 +10,15 @@ import type { RichTextSendBoxStrings } from '../RichTextEditor/RichTextSendBox';
  */
 export const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {
   return {
-    buttonNameBold: strings.boldTooltip,
-    buttonNameItalic: strings.italicTooltip,
-    buttonNameUnderline: strings.underlineTooltip,
-    buttonNameBulletedList: strings.bulletListTooltip,
-    buttonNameNumberedList: strings.numberListTooltip,
-    buttonNameIncreaseIndent: strings.increaseIndentTooltip,
-    buttonNameDecreaseIndent: strings.decreaseIndentTooltip,
-    buttonNameInsertTable: strings.insertTableTooltip,
-    insertTablePane: strings.insertTableMenuTitle
+    buttonNameBold: strings.richTextBoldTooltip,
+    buttonNameItalic: strings.richTextItalicTooltip,
+    buttonNameUnderline: strings.richTextUnderlineTooltip,
+    buttonNameBulletedList: strings.richTextBulletListTooltip,
+    buttonNameNumberedList: strings.richTextNumberListTooltip,
+    buttonNameIncreaseIndent: strings.richTextIncreaseIndentTooltip,
+    buttonNameDecreaseIndent: strings.richTextDecreaseIndentTooltip,
+    buttonNameInsertTable: strings.richTextInsertTableTooltip,
+    insertTablePane: strings.richTextInsertTableMenuTitle
   };
 };
 
@@ -29,14 +29,14 @@ export const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>):
  */
 export const tableContextMenuStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {
   return {
-    menuNameTableInsert: strings.insertRowOrColumnMenu,
-    menuNameTableInsertAbove: strings.insertRowAboveMenu,
-    menuNameTableInsertBelow: strings.insertRowBelowMenu,
-    menuNameTableInsertLeft: strings.insertColumnLeftMenu,
-    menuNameTableInsertRight: strings.insertColumnRightMenu,
-    menuNameTableDelete: strings.deleteRowOrColumnMenu,
-    menuNameTableDeleteColumn: strings.deleteColumnMenu,
-    menuNameTableDeleteRow: strings.deleteRowMenu,
-    menuNameTableDeleteTable: strings.deleteTableMenu
+    menuNameTableInsert: strings.richTextInsertRowOrColumnMenu,
+    menuNameTableInsertAbove: strings.richTextInsertRowAboveMenu,
+    menuNameTableInsertBelow: strings.richTextInsertRowBelowMenu,
+    menuNameTableInsertLeft: strings.richTextInsertColumnLeftMenu,
+    menuNameTableInsertRight: strings.richTextInsertColumnRightMenu,
+    menuNameTableDelete: strings.richTextDeleteRowOrColumnMenu,
+    menuNameTableDeleteColumn: strings.richTextDeleteColumnMenu,
+    menuNameTableDeleteRow: strings.richTextDeleteRowMenu,
+    menuNameTableDeleteTable: strings.richTextDeleteTableMenu
   };
 };
diff --git a/packages/react-components/src/localization/locales/ar-SA/strings.json b/packages/react-components/src/localization/locales/ar-SA/strings.json
@@ -38,25 +38,25 @@
     "removeAttachment": "إزالة الملف",
     "uploading": "يتم الآن التحميل",
     "uploadCompleted": "اكتمل التحميل",
-    "boldTooltip": "غامق",
-    "italicTooltip": "مائل",
-    "underlineTooltip": "مسطّر",
-    "bulletListTooltip": "قائمة ذات تعداد نقطي",
-    "numberListTooltip": "قائمة مرقّمة",
-    "increaseIndentTooltip": "زيادة المسافة البادئة",
-    "decreaseIndentTooltip": "إنقاص المسافة البادئة",
-    "insertTableTooltip": "إدراج جدول",
+    "richTextBoldTooltip": "غامق",
+    "richTextItalicTooltip": "مائل",
+    "richTextUnderlineTooltip": "مسطّر",
+    "richTextBulletListTooltip": "قائمة ذات تعداد نقطي",
+    "richTextNumberListTooltip": "قائمة مرقّمة",
+    "richTextIncreaseIndentTooltip": "زيادة المسافة البادئة",
+    "richTextDecreaseIndentTooltip": "إنقاص المسافة البادئة",
+    "richTextInsertTableTooltip": "إدراج جدول",
     "richTextFormatButtonTooltip": "تنسيق",
-    "insertRowOrColumnMenu": "إدراج",
-    "insertTableMenuTitle": "إدراج جدول بـ {column} x {row}",
-    "insertRowAboveMenu": "إدراج أعلاه",
-    "insertRowBelowMenu": "إدراج أدناه",
-    "insertColumnLeftMenu": "إدراج يساراً",
-    "insertColumnRightMenu": "إدراج يميناً",
-    "deleteRowOrColumnMenu": "حذف",
-    "deleteColumnMenu": "حذف العمود",
-    "deleteRowMenu": "حذف الصف",
-    "deleteTableMenu": "حذف الجدول",
+    "richTextInsertRowOrColumnMenu": "إدراج",
+    "richTextInsertTableMenuTitle": "إدراج جدول بـ {column} x {row}",
+    "richTextInsertRowAboveMenu": "إدراج أعلاه",
+    "richTextInsertRowBelowMenu": "إدراج أدناه",
+    "richTextInsertColumnLeftMenu": "إدراج يساراً",
+    "richTextInsertColumnRightMenu": "إدراج يميناً",
+    "richTextDeleteRowOrColumnMenu": "حذف",
+    "richTextDeleteColumnMenu": "حذف العمود",
+    "richTextDeleteRowMenu": "حذف الصف",
+    "richTextDeleteTableMenu": "حذف الجدول",
     "attachmentMoreMenu": "خيارات إضافية"
   },
   "mentionPopover": {

diff --git a/packages/react-components/src/localization/locales/cs-CZ/strings.json b/packages/react-components/src/localization/locales/cs-CZ/strings.json
@@ -38,25 +38,25 @@
     "removeAttachment": "Odebrat soubor",
     "uploading": "Nahrávání",
     "uploadCompleted": "Nahrávání se dokončilo",
-    "boldTooltip": "Tučné",
-    "italicTooltip": "Kurzíva",
-    "underlineTooltip": "Podtržení",
-    "bulletListTooltip": "Seznam s odrážkami",
-    "numberListTooltip": "Číslovaný seznam",
-    "increaseIndentTooltip": "Zvětšit odsazení",
-    "decreaseIndentTooltip": "Zmenšit odsazení",
-    "insertTableTooltip": "Vložit tabulku",
+    "richTextBoldTooltip": "Tučné",
+    "richTextItalicTooltip": "Kurzíva",
+    "richTextUnderlineTooltip": "Podtržení",
+    "richTextBulletListTooltip": "Seznam s odrážkami",
+    "richTextNumberListTooltip": "Číslovaný seznam",
+    "richTextIncreaseIndentTooltip": "Zvětšit odsazení",
+    "richTextDecreaseIndentTooltip": "Zmenšit odsazení",
+    "richTextInsertTableTooltip": "Vložit tabulku",
     "richTextFormatButtonTooltip": "Formát",
-    "insertRowOrColumnMenu": "Vložit",
-    "insertTableMenuTitle": "Vložit {column} x {row} tabulka",
-    "insertRowAboveMenu": "Vložit nad",
-    "insertRowBelowMenu": "Vložit pod",
-    "insertColumnLeftMenu": "Vložit vlevo",
-    "insertColumnRightMenu": "Vložit vpravo",
-    "deleteRowOrColumnMenu": "Odstranit",
-    "deleteColumnMenu": "Odstranit sloupec",
-    "deleteRowMenu": "Odstranit řádek",
-    "deleteTableMenu": "Odstranit tabulku",
+    "richTextInsertRowOrColumnMenu": "Vložit",
+    "richTextInsertTableMenuTitle": "Vložit {column} x {row} tabulka",
+    "richTextInsertRowAboveMenu": "Vložit nad",
+    "richTextInsertRowBelowMenu": "Vložit pod",
+    "richTextInsertColumnLeftMenu": "Vložit vlevo",
+    "richTextInsertColumnRightMenu": "Vložit vpravo",
+    "richTextDeleteRowOrColumnMenu": "Odstranit",
+    "richTextDeleteColumnMenu": "Odstranit sloupec",
+    "richTextDeleteRowMenu": "Odstranit řádek",
+    "richTextDeleteTableMenu": "Odstranit tabulku",
     "attachmentMoreMenu": "Další možnosti"
   },
   "mentionPopover": {