HtmlEditor: make localization working for borderStyle selectbox if me…

…ssages are loaded at runtime (T1234032) (#28894)
DevExpress · Feb 3, 2025 · 83c5bf7 · 83c5bf7
1 parent 9c4b5b1
commit 83c5bf7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
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
@@ -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/...e/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/tableProperties.tests.js b/...e/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');
+        });
+    });
 });