Skip to content

Commit 777db03

Browse files
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
1 parent 050401f commit 777db03

File tree

28 files changed

+477
-441
lines changed

28 files changed

+477
-441
lines changed

packages/communication-react/review/beta/communication-react.api.md

+24-20
Original file line numberDiff line numberDiff line change
@@ -3308,7 +3308,7 @@ export type MessageEditedListener = MessageReceivedListener;
33083308
// @public
33093309
export type MessageProps = {
33103310
message: Message;
3311-
strings: MessageThreadStrings;
3311+
strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>;
33123312
messageContainerStyle?: ComponentSlotStyle;
33133313
showDate?: boolean;
33143314
disableEditing?: boolean;
@@ -3924,26 +3924,30 @@ export interface RichTextSendBoxProps {
39243924
}
39253925

39263926
// @beta
3927-
export interface RichTextSendBoxStrings extends SendBoxStrings {
3928-
boldTooltip: string;
3929-
bulletListTooltip: string;
3930-
decreaseIndentTooltip: string;
3931-
deleteColumnMenu: string;
3932-
deleteRowMenu: string;
3933-
deleteRowOrColumnMenu: string;
3934-
deleteTableMenu: string;
3935-
increaseIndentTooltip: string;
3936-
insertColumnLeftMenu: string;
3937-
insertColumnRightMenu: string;
3938-
insertRowAboveMenu: string;
3939-
insertRowBelowMenu: string;
3940-
insertRowOrColumnMenu: string;
3941-
insertTableMenuTitle: string;
3942-
insertTableTooltip: string;
3943-
italicTooltip: string;
3944-
numberListTooltip: string;
3927+
export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {
3928+
}
3929+
3930+
// @beta
3931+
export interface RichTextStrings {
3932+
richTextBoldTooltip: string;
3933+
richTextBulletListTooltip: string;
3934+
richTextDecreaseIndentTooltip: string;
3935+
richTextDeleteColumnMenu: string;
3936+
richTextDeleteRowMenu: string;
3937+
richTextDeleteRowOrColumnMenu: string;
3938+
richTextDeleteTableMenu: string;
39453939
richTextFormatButtonTooltip: string;
3946-
underlineTooltip: string;
3940+
richTextIncreaseIndentTooltip: string;
3941+
richTextInsertColumnLeftMenu: string;
3942+
richTextInsertColumnRightMenu: string;
3943+
richTextInsertRowAboveMenu: string;
3944+
richTextInsertRowBelowMenu: string;
3945+
richTextInsertRowOrColumnMenu: string;
3946+
richTextInsertTableMenuTitle: string;
3947+
richTextInsertTableTooltip: string;
3948+
richTextItalicTooltip: string;
3949+
richTextNumberListTooltip: string;
3950+
richTextUnderlineTooltip: string;
39473951
}
39483952

39493953
// @public

packages/communication-react/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ export type {
304304
/* @conditional-compile-remove(rich-text-editor) */
305305
export { RichTextSendBox } from '../../react-components/src';
306306
/* @conditional-compile-remove(rich-text-editor) */
307-
export type { RichTextSendBoxProps, RichTextSendBoxStrings } from '../../react-components/src';
307+
export type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from '../../react-components/src';
308308
/* @conditional-compile-remove(spotlight) */
309309
export type { Spotlight } from '../../react-components/src';
310310
export type { ImageOverlayProps, ImageOverlayStrings } from '../../react-components/src';

packages/react-components/src/components/ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,13 @@ export const ChatMessageComponentAsRichTextEditBox = (
153153
]);
154154
const richTextLocaleStrings = useMemo(() => {
155155
/* @conditional-compile-remove(rich-text-editor) */
156-
return locale.richTextSendBox;
156+
return { ...locale.richTextSendBox, ...strings };
157157
return locale.sendBox;
158-
}, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
158+
}, [
159+
/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox,
160+
/* @conditional-compile-remove(rich-text-editor) */ strings,
161+
locale.sendBox
162+
]);
159163

160164
/* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
161165
const onCancelAttachmentUpload = useCallback(

packages/react-components/src/components/MessageThread.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
4848
import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
4949
import { Announcer } from './Announcer';
5050
/* @conditional-compile-remove(rich-text-editor) */
51+
import { RichTextStrings } from './RichTextEditor/RichTextSendBox';
52+
/* @conditional-compile-remove(rich-text-editor) */
5153
import { loadChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker';
5254

5355
const isMessageSame = (first: ChatMessage, second: ChatMessage): boolean => {
@@ -564,7 +566,7 @@ export type MessageProps = {
564566
/**
565567
* Strings from parent MessageThread component
566568
*/
567-
strings: MessageThreadStrings;
569+
strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>;
568570
/**
569571
* Custom CSS styles for chat message container.
570572
*/

packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx

+26-19
Original file line numberDiff line numberDiff line change
@@ -31,83 +31,90 @@ import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
3131
*
3232
* @beta
3333
*/
34-
export interface RichTextSendBoxStrings extends SendBoxStrings {
34+
export interface RichTextSendBoxStrings extends RichTextStrings, SendBoxStrings {}
35+
36+
/**
37+
* Strings of RichText that can be overridden.
38+
*
39+
* @beta
40+
*/
41+
export interface RichTextStrings {
3542
/**
3643
* Tooltip text for the bold button.
3744
*/
38-
boldTooltip: string;
45+
richTextBoldTooltip: string;
3946
/**
4047
* Tooltip text for the italic button.
4148
*/
42-
italicTooltip: string;
49+
richTextItalicTooltip: string;
4350
/**
4451
* Tooltip text for the underline button.
4552
*/
46-
underlineTooltip: string;
53+
richTextUnderlineTooltip: string;
4754
/**
4855
* Tooltip text for the bullet list button.
4956
*/
50-
bulletListTooltip: string;
57+
richTextBulletListTooltip: string;
5158
/**
5259
* Tooltip text for the number list button.
5360
*/
54-
numberListTooltip: string;
61+
richTextNumberListTooltip: string;
5562
/**
5663
* Tooltip text for the increase indent button.
5764
*/
58-
increaseIndentTooltip: string;
65+
richTextIncreaseIndentTooltip: string;
5966
/**
6067
* Tooltip text for the decrease indent button.
6168
*/
62-
decreaseIndentTooltip: string;
69+
richTextDecreaseIndentTooltip: string;
6370
/**
6471
* Tooltip text insert table button.
6572
*/
66-
insertTableTooltip: string;
73+
richTextInsertTableTooltip: string;
6774
/**
6875
* Tooltip text for the rich text format button button.
6976
*/
7077
richTextFormatButtonTooltip: string;
7178
/**
7279
* Text for the insert menu item.
7380
*/
74-
insertRowOrColumnMenu: string;
81+
richTextInsertRowOrColumnMenu: string;
7582
/**
7683
* Title for the insert table menu.
7784
*/
78-
insertTableMenuTitle: string;
85+
richTextInsertTableMenuTitle: string;
7986
/**
8087
* Text for the insert menu item to insert row above the current selection.
8188
*/
82-
insertRowAboveMenu: string;
89+
richTextInsertRowAboveMenu: string;
8390
/**
8491
* Text for the insert menu item to insert row below the current selection.
8592
*/
86-
insertRowBelowMenu: string;
93+
richTextInsertRowBelowMenu: string;
8794
/**
8895
* Text for the insert menu item to insert column to the left from the current selection.
8996
*/
90-
insertColumnLeftMenu: string;
97+
richTextInsertColumnLeftMenu: string;
9198
/**
9299
* Text for the insert menu item to insert column to the right from the current selection.
93100
*/
94-
insertColumnRightMenu: string;
101+
richTextInsertColumnRightMenu: string;
95102
/**
96103
* Text for the delete row or column menu.
97104
*/
98-
deleteRowOrColumnMenu: string;
105+
richTextDeleteRowOrColumnMenu: string;
99106
/**
100107
* Text for the delete column menu.
101108
*/
102-
deleteColumnMenu: string;
109+
richTextDeleteColumnMenu: string;
103110
/**
104111
* Text for the delete row menu.
105112
*/
106-
deleteRowMenu: string;
113+
richTextDeleteRowMenu: string;
107114
/**
108115
* Text for the delete table menu.
109116
*/
110-
deleteTableMenu: string;
117+
richTextDeleteTableMenu: string;
111118
}
112119

113120
/**

packages/react-components/src/components/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export { ChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageCo
2727
/* @conditional-compile-remove(rich-text-editor) */
2828
export type { ChatMessageComponentAsRichTextEditBoxProps } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox';
2929
/* @conditional-compile-remove(rich-text-editor) */
30-
export type { RichTextSendBoxProps, RichTextSendBoxStrings } from './RichTextEditor/RichTextSendBox';
30+
export type { RichTextSendBoxProps, RichTextSendBoxStrings, RichTextStrings } from './RichTextEditor/RichTextSendBox';
3131

3232
/* @conditional-compile-remove(mention) */
3333
export type {

packages/react-components/src/components/utils/RichTextEditorStringsUtils.ts

+18-18
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ import type { RichTextSendBoxStrings } from '../RichTextEditor/RichTextSendBox';
1010
*/
1111
export const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {
1212
return {
13-
buttonNameBold: strings.boldTooltip,
14-
buttonNameItalic: strings.italicTooltip,
15-
buttonNameUnderline: strings.underlineTooltip,
16-
buttonNameBulletedList: strings.bulletListTooltip,
17-
buttonNameNumberedList: strings.numberListTooltip,
18-
buttonNameIncreaseIndent: strings.increaseIndentTooltip,
19-
buttonNameDecreaseIndent: strings.decreaseIndentTooltip,
20-
buttonNameInsertTable: strings.insertTableTooltip,
21-
insertTablePane: strings.insertTableMenuTitle
13+
buttonNameBold: strings.richTextBoldTooltip,
14+
buttonNameItalic: strings.richTextItalicTooltip,
15+
buttonNameUnderline: strings.richTextUnderlineTooltip,
16+
buttonNameBulletedList: strings.richTextBulletListTooltip,
17+
buttonNameNumberedList: strings.richTextNumberListTooltip,
18+
buttonNameIncreaseIndent: strings.richTextIncreaseIndentTooltip,
19+
buttonNameDecreaseIndent: strings.richTextDecreaseIndentTooltip,
20+
buttonNameInsertTable: strings.richTextInsertTableTooltip,
21+
insertTablePane: strings.richTextInsertTableMenuTitle
2222
};
2323
};
2424

@@ -29,14 +29,14 @@ export const ribbonButtonsStrings = (strings: Partial<RichTextSendBoxStrings>):
2929
*/
3030
export const tableContextMenuStrings = (strings: Partial<RichTextSendBoxStrings>): LocalizedStrings<string> => {
3131
return {
32-
menuNameTableInsert: strings.insertRowOrColumnMenu,
33-
menuNameTableInsertAbove: strings.insertRowAboveMenu,
34-
menuNameTableInsertBelow: strings.insertRowBelowMenu,
35-
menuNameTableInsertLeft: strings.insertColumnLeftMenu,
36-
menuNameTableInsertRight: strings.insertColumnRightMenu,
37-
menuNameTableDelete: strings.deleteRowOrColumnMenu,
38-
menuNameTableDeleteColumn: strings.deleteColumnMenu,
39-
menuNameTableDeleteRow: strings.deleteRowMenu,
40-
menuNameTableDeleteTable: strings.deleteTableMenu
32+
menuNameTableInsert: strings.richTextInsertRowOrColumnMenu,
33+
menuNameTableInsertAbove: strings.richTextInsertRowAboveMenu,
34+
menuNameTableInsertBelow: strings.richTextInsertRowBelowMenu,
35+
menuNameTableInsertLeft: strings.richTextInsertColumnLeftMenu,
36+
menuNameTableInsertRight: strings.richTextInsertColumnRightMenu,
37+
menuNameTableDelete: strings.richTextDeleteRowOrColumnMenu,
38+
menuNameTableDeleteColumn: strings.richTextDeleteColumnMenu,
39+
menuNameTableDeleteRow: strings.richTextDeleteRowMenu,
40+
menuNameTableDeleteTable: strings.richTextDeleteTableMenu
4141
};
4242
};

packages/react-components/src/localization/locales/ar-SA/strings.json

+18-18
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,25 @@
3838
"removeAttachment": "إزالة الملف",
3939
"uploading": "يتم الآن التحميل",
4040
"uploadCompleted": "اكتمل التحميل",
41-
"boldTooltip": "غامق",
42-
"italicTooltip": "مائل",
43-
"underlineTooltip": "مسطّر",
44-
"bulletListTooltip": "قائمة ذات تعداد نقطي",
45-
"numberListTooltip": "قائمة مرقّمة",
46-
"increaseIndentTooltip": "زيادة المسافة البادئة",
47-
"decreaseIndentTooltip": "إنقاص المسافة البادئة",
48-
"insertTableTooltip": "إدراج جدول",
41+
"richTextBoldTooltip": "غامق",
42+
"richTextItalicTooltip": "مائل",
43+
"richTextUnderlineTooltip": "مسطّر",
44+
"richTextBulletListTooltip": "قائمة ذات تعداد نقطي",
45+
"richTextNumberListTooltip": "قائمة مرقّمة",
46+
"richTextIncreaseIndentTooltip": "زيادة المسافة البادئة",
47+
"richTextDecreaseIndentTooltip": "إنقاص المسافة البادئة",
48+
"richTextInsertTableTooltip": "إدراج جدول",
4949
"richTextFormatButtonTooltip": "تنسيق",
50-
"insertRowOrColumnMenu": "إدراج",
51-
"insertTableMenuTitle": "إدراج جدول بـ {column} x {row}",
52-
"insertRowAboveMenu": "إدراج أعلاه",
53-
"insertRowBelowMenu": "إدراج أدناه",
54-
"insertColumnLeftMenu": "إدراج يساراً",
55-
"insertColumnRightMenu": "إدراج يميناً",
56-
"deleteRowOrColumnMenu": "حذف",
57-
"deleteColumnMenu": "حذف العمود",
58-
"deleteRowMenu": "حذف الصف",
59-
"deleteTableMenu": "حذف الجدول",
50+
"richTextInsertRowOrColumnMenu": "إدراج",
51+
"richTextInsertTableMenuTitle": "إدراج جدول بـ {column} x {row}",
52+
"richTextInsertRowAboveMenu": "إدراج أعلاه",
53+
"richTextInsertRowBelowMenu": "إدراج أدناه",
54+
"richTextInsertColumnLeftMenu": "إدراج يساراً",
55+
"richTextInsertColumnRightMenu": "إدراج يميناً",
56+
"richTextDeleteRowOrColumnMenu": "حذف",
57+
"richTextDeleteColumnMenu": "حذف العمود",
58+
"richTextDeleteRowMenu": "حذف الصف",
59+
"richTextDeleteTableMenu": "حذف الجدول",
6060
"attachmentMoreMenu": "خيارات إضافية"
6161
},
6262
"mentionPopover": {

packages/react-components/src/localization/locales/cs-CZ/strings.json

+18-18
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,25 @@
3838
"removeAttachment": "Odebrat soubor",
3939
"uploading": "Nahrávání",
4040
"uploadCompleted": "Nahrávání se dokončilo",
41-
"boldTooltip": "Tučné",
42-
"italicTooltip": "Kurzíva",
43-
"underlineTooltip": "Podtržení",
44-
"bulletListTooltip": "Seznam s odrážkami",
45-
"numberListTooltip": "Číslovaný seznam",
46-
"increaseIndentTooltip": "Zvětšit odsazení",
47-
"decreaseIndentTooltip": "Zmenšit odsazení",
48-
"insertTableTooltip": "Vložit tabulku",
41+
"richTextBoldTooltip": "Tučné",
42+
"richTextItalicTooltip": "Kurzíva",
43+
"richTextUnderlineTooltip": "Podtržení",
44+
"richTextBulletListTooltip": "Seznam s odrážkami",
45+
"richTextNumberListTooltip": "Číslovaný seznam",
46+
"richTextIncreaseIndentTooltip": "Zvětšit odsazení",
47+
"richTextDecreaseIndentTooltip": "Zmenšit odsazení",
48+
"richTextInsertTableTooltip": "Vložit tabulku",
4949
"richTextFormatButtonTooltip": "Formát",
50-
"insertRowOrColumnMenu": "Vložit",
51-
"insertTableMenuTitle": "Vložit {column} x {row} tabulka",
52-
"insertRowAboveMenu": "Vložit nad",
53-
"insertRowBelowMenu": "Vložit pod",
54-
"insertColumnLeftMenu": "Vložit vlevo",
55-
"insertColumnRightMenu": "Vložit vpravo",
56-
"deleteRowOrColumnMenu": "Odstranit",
57-
"deleteColumnMenu": "Odstranit sloupec",
58-
"deleteRowMenu": "Odstranit řádek",
59-
"deleteTableMenu": "Odstranit tabulku",
50+
"richTextInsertRowOrColumnMenu": "Vložit",
51+
"richTextInsertTableMenuTitle": "Vložit {column} x {row} tabulka",
52+
"richTextInsertRowAboveMenu": "Vložit nad",
53+
"richTextInsertRowBelowMenu": "Vložit pod",
54+
"richTextInsertColumnLeftMenu": "Vložit vlevo",
55+
"richTextInsertColumnRightMenu": "Vložit vpravo",
56+
"richTextDeleteRowOrColumnMenu": "Odstranit",
57+
"richTextDeleteColumnMenu": "Odstranit sloupec",
58+
"richTextDeleteRowMenu": "Odstranit řádek",
59+
"richTextDeleteTableMenu": "Odstranit tabulku",
6060
"attachmentMoreMenu": "Další možnosti"
6161
},
6262
"mentionPopover": {

0 commit comments

Comments
 (0)