diff --git a/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts b/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts index f107910b39a8..f1dc376965b7 100644 --- a/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts +++ b/packages/devextreme/js/__internal/ui/html_editor/utils/m_toolbar_helper.ts @@ -25,10 +25,6 @@ import { const MIN_HEIGHT = 400; const BORDER_STYLES = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']; -const BORDER_STYLES_TRANSLATED = BORDER_STYLES.map((style) => ({ - id: style, - value: localizationMessage.format(`dxHtmlEditor-borderStyle${camelize(style, true)}`), -})); const USER_ACTION = 'user'; const SILENT_ACTION = 'silent'; @@ -51,6 +47,13 @@ const ICON_MAP = { clear: 'clearformat', }; +function getBorderStylesTranslated() { + return BORDER_STYLES.map((style) => ({ + id: style, + value: localizationMessage.format(`dxHtmlEditor-borderStyle${camelize(style, true)}`), + })); +} + function getFormatHandlers(module) { return { clear: ({ event }) => { @@ -446,7 +449,7 @@ function getTablePropertiesFormConfig(module, { $element, formats, tableBlot }) label: { text: localizationMessage.format('dxHtmlEditor-style') }, editorType: 'dxSelectBox', editorOptions: { - items: BORDER_STYLES_TRANSLATED, + items: getBorderStylesTranslated(), valueExpr: 'id', displayExpr: 'value', placeholder: 'Select style', @@ -616,7 +619,7 @@ function getCellPropertiesFormConfig(module, { label: { text: localizationMessage.format('dxHtmlEditor-style') }, editorType: 'dxSelectBox', editorOptions: { - items: BORDER_STYLES_TRANSLATED, + items: getBorderStylesTranslated(), valueExpr: 'id', displayExpr: 'value', }, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js index 484904e7f784..979743aac810 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js @@ -1,5 +1,6 @@ import $ from 'jquery'; import 'ui/html_editor'; +import localization from 'localization'; import { getFormatHandlers } from '__internal/ui/html_editor/utils/m_toolbar_helper'; @@ -1136,4 +1137,34 @@ module('Table properties forms', { }); }); + module('Localization', { + beforeEach: function() { + this.messages = { + 'de': { + 'dxHtmlEditor-borderStyleNone': 'Test', + } + }; + localization.loadMessages(this.messages); + localization.locale('de'); + }, + afterEach: function() { + localization.locale('en'); + } + }, () => { + test('borderStyle selectbox items are localized even if messages are loaded at runtime (T1234032)', function(assert) { + this.createWidget(); + + const $tableElement = this.$element.find('table').eq(0); + + showCellPropertiesForm(this.instance, $tableElement); + + this.clock.tick(10); + + const formBorderItem = this.getFormInstance().option('items')[0]; + const borderStyleEditor = formBorderItem.items[0]; + const firstListItem = borderStyleEditor.editorOptions.items[0]; + + assert.strictEqual(firstListItem.value, 'Test', 'borderStyleEditor is correctly localized'); + }); + }); });