rework

Author: Zedwag

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

@@ -137,9 +137,11 @@ if (Quill) {
         this.quill.on('editor-change', (eventName, newValue, oldValue, eventSource) => {
           const isSilentMode = eventSource === SILENT_ACTION
             && isEmptyObject(this.quill.getFormat());
-          const isSelectionChanged = eventName === SELECTION_CHANGE_EVENT;
 
-          if (!isSilentMode || isSelectionChanged) {
+          this._updateHeaderFormatWidget();
+
+          if (!isSilentMode) {
+            const isSelectionChanged = eventName === SELECTION_CHANGE_EVENT;
             this._updateToolbar(isSelectionChanged);
           }
         });
@@ -672,6 +674,19 @@ if (Quill) {
       this._toggleClearFormatting(hasFormats || selection.length > 1);
     }
 
+    _updateHeaderFormatWidget() {
+      const formatName = 'header';
+      const formatWidget = this._toolbarWidgets.getByName(formatName);
+      const selection = this.quill.getSelection();
+
+      if (!selection || !formatWidget) {
+        return;
+      }
+
+      const formats = this.quill.getFormat(selection);
+      this._markActiveFormatWidget(formatName, formatWidget, formats);
+    }
+
     _markActiveFormatWidget(name, widget, formats) {
       if (this._isColorFormat(name)) {
         this._updateColorWidget(name, formats[name]);

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

@@ -17,6 +17,7 @@ const DROPDOWNEDITOR_ICON_CLASS = 'dx-dropdowneditor-icon';
 const BUTTON_CONTENT_CLASS = 'dx-button-content';
 const QUILL_CONTAINER_CLASS = 'dx-quill-container';
 const STATE_DISABLED_CLASS = 'dx-state-disabled';
+const FORMAT_ACTIVE_CLASS = 'dx-format-active';
 const HEX_FIELD_CLASS = 'dx-colorview-label-hex';
 const INPUT_CLASS = 'dx-texteditor-input';
 const DIALOG_CLASS = 'dx-formdialog';
@@ -183,6 +184,63 @@ export default function() {
             assert.strictEqual(newValue, 'Normal text', 'Header format is reset');
         });
 
+        test('font format should not be reset after moving to next line', function(assert) {
+            const $htmlEditor = $('#htmlEditor').dxHtmlEditor({
+                value: '<p>test</p>',
+                toolbar: {
+                    items: [{
+                        name: 'font',
+                        acceptedValues: ['Arial', 'Courier New', 'Georgia'],
+                        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, 'Georgia', 'Font format is applied');
+
+            nativePointerMock().simulateEvent($content.get(0), 'keydown', { keyCode: ENTER_KEY_CODE });
+
+            const newValue = $formatWidget.find(`.${INPUT_CLASS}`).val();
+            assert.strictEqual(newValue, 'Georgia', 'Font format is not reset');
+        });
+
+        ['bold', 'italic', 'strike', 'underline'].forEach((formatName) => {
+            test(`${formatName} format should not be reset after moving to next line`, function(assert) {
+                const $htmlEditor = $('#htmlEditor').dxHtmlEditor({
+                    value: '<p>test</p>',
+                    toolbar: {
+                        items: [formatName],
+                        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);
+
+                $formatWidget.trigger('dxclick');
+
+                assert.strictEqual($formatWidget.hasClass(FORMAT_ACTIVE_CLASS), true, `${formatName} format is applied`);
+
+                nativePointerMock().simulateEvent($content.get(0), 'keydown', { keyCode: ENTER_KEY_CODE });
+
+                assert.strictEqual($formatWidget.hasClass(FORMAT_ACTIVE_CLASS), true, `${formatName} format is not reset`);
+            });
+        });
+
         test('adaptive menu should be hidden after selecting formatting', function(assert) {
             const done = assert.async();
             const instance = $('#htmlEditor').dxHtmlEditor({