HtmlEditor: header format should be reset on move to next line by enter press (T1315504)

Author: Zedwag

packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts

@@ -135,11 +135,11 @@ if (Quill) {
         }
 
         this.quill.on('editor-change', (eventName, newValue, oldValue, eventSource) => {
-          const isSilentMode = eventSource === SILENT_ACTION && isEmptyObject(this.quill.getFormat());
-
-          if (!isSilentMode) {
-            const isSelectionChanged = eventName === SELECTION_CHANGE_EVENT;
+          const isSilentMode = eventSource === SILENT_ACTION
+            && isEmptyObject(this.quill.getFormat());
+          const isSelectionChanged = eventName === SELECTION_CHANGE_EVENT;
 
+          if (!isSilentMode || isSelectionChanged) {
             this._updateToolbar(isSelectionChanged);
           }
         });

packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/toolbarIntegration.tests.js

@@ -3,13 +3,15 @@ import $ from 'jquery';
 import 'ui/html_editor';
 import fx from 'common/core/animation/fx';
 
+import nativePointerMock from '../../../helpers/nativePointerMock.js';
 import { checkLink, prepareEmbedValue, prepareTableValue } from './utils.js';
 
 const TOOLBAR_CLASS = 'dx-htmleditor-toolbar';
 const TOOLBAR_WRAPPER_CLASS = 'dx-htmleditor-toolbar-wrapper';
 const TOOLBAR_FORMAT_WIDGET_CLASS = 'dx-htmleditor-toolbar-format';
 const TOOLBAR_MULTILINE_CLASS = 'dx-toolbar-multiline';
 const TOOLBAR_FORMAT_BUTTON_ACTIVE_CLASS = 'dx-format-active';
+const HTML_EDITOR_CONTENT_CLASS = 'dx-htmleditor-content';
 const DROPDOWNMENU_CLASS = 'dx-dropdownmenu-button';
 const DROPDOWNEDITOR_ICON_CLASS = 'dx-dropdowneditor-icon';
 const BUTTON_CONTENT_CLASS = 'dx-button-content';
@@ -25,6 +27,8 @@ const LIST_ITEM_CLASS = 'dx-list-item';
 
 const BLACK_PIXEL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYGWNgYmL6DwABFgEGpP/tHAAAAABJRU5ErkJggg==';
 
+const ENTER_KEY_CODE = 13;
+
 const { test, module: testModule } = QUnit;
 
 function getToolbar($container) {
@@ -146,6 +150,39 @@ export default function() {
                 .trigger('dxclick');
         });
 
+        test('header format should be reset after moving to next line (T1315504)', function(assert) {
+            const $htmlEditor = $('#htmlEditor').dxHtmlEditor({
+                value: '<p>test</p>',
+                toolbar: {
+                    items: [{
+                        name: 'header',
+                        acceptedValues: [false, 1, 2, 3, 4, 5],
+                        options: {
+                            opened: true
+                        },
+                    }],
+                    multiline: false
+                },
+            });
+            const htmlEditor = $htmlEditor.dxHtmlEditor('instance');
+            const $formatWidget = $htmlEditor.find(`.${TOOLBAR_FORMAT_WIDGET_CLASS}`);
+            const $content = $htmlEditor.find(`.${HTML_EDITOR_CONTENT_CLASS}`);
+            htmlEditor.setSelection(4, 0);
+
+            $(`.${LIST_ITEM_CLASS}`)
+                .last()
+                .trigger('dxclick');
+
+
+            const value = $formatWidget.find(`.${INPUT_CLASS}`).val();
+            assert.strictEqual(value, 'Heading 5', 'Header format is applied');
+
+            nativePointerMock().simulateEvent($content.get(0), 'keydown', { keyCode: ENTER_KEY_CODE });
+
+            const newValue = $formatWidget.find(`.${INPUT_CLASS}`).val();
+            assert.strictEqual(newValue, 'Normal text', 'Header format is reset');
+        });
+
         test('adaptive menu should be hidden after selecting formatting', function(assert) {
             const done = assert.async();
             const instance = $('#htmlEditor').dxHtmlEditor({