HtmlEditor: Get rid of initial text value in the result TextArea

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts

@@ -72,6 +72,8 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
 
   private _commandOptionsList?: string[];
 
+  private _selectedText = '';
+
   private _resultText = '';
 
   private _askAIPrompt = '';
@@ -444,7 +446,7 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
   }: AIDialogShowPayload): Promise<AIDialogResult> | undefined {
     this._commandsMap = commandsMap;
     this._currentCommand = currentCommand;
-    this._resultText = text ?? '';
+    this._selectedText = text ?? '';
     this._commandOptionsList = commandsMap[currentCommand]?.options ?? [];
     this._currentOption = currentCommandOption;
     this._getCustomCommandPrompt = prompt;

packages/devextreme/testing/helpers/aiDialog.js

@@ -87,7 +87,7 @@ export const setResultText = (value) => {
     textAreaInstance.option('value', value);
 };
 
-export const getResultText = () => {
+export const getResultTextAreaValue = () => {
     const textAreaInstance = $(`.${TEXT_AREA_CLASS}`).eq(1).dxTextArea('instance');
     return textAreaInstance.option('value');
 };

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

@@ -24,9 +24,7 @@ const SELECT_BOX_CLASS = 'dx-selectbox';
 const moduleConfig = {
     beforeEach: function() {
         this.$element = $('#htmlEditor');
-
         this.aiDialog = new AIDialog(this.$element, {}, { container: this.$element });
-
         this.aiDialogPopup = this.aiDialog._popup;
 
         this.setDialogState = (state) => {
@@ -60,8 +58,8 @@ QUnit.module('AIDialog', moduleConfig, () => {
         assert.strictEqual(optionSelectBox.option('value'), 'english', 'correct option selected');
         assert.deepEqual(optionSelectBox.option('items'), ['english', 'german'], 'option SelectBox contains correct items');
         assert.strictEqual($textAreas.length, 2, 'TextAreas are rendered');
-        assert.strictEqual(resultTextAreaInstance.option('value'), 'Test text', 'result TextArea contains correct text');
-        assert.strictEqual(promptTextAreaInstance.option('value'), undefined, 'prompt TextArea contains correct text');
+        assert.strictEqual(resultTextAreaInstance.option('value'), '', 'result TextArea contains empty text');
+        assert.strictEqual(promptTextAreaInstance.option('value'), undefined, 'prompt TextArea contains empty text');
         assert.strictEqual(promptTextAreaInstance.option('visible'), false, 'prompt TextArea is hidden by default');
     });
 
@@ -122,7 +120,7 @@ QUnit.module('AIDialog', moduleConfig, () => {
             const hideSpy = sinon.spy(this.aiDialog, 'hide');
 
             showAIDialog(this).done(({ resultText, event }) => {
-                assert.strictEqual(resultText, 'Test text', 'resolved text is correct');
+                assert.strictEqual(resultText, '', 'resolved text is empty');
                 assert.strictEqual(event.itemData.id, mode, `operation is correct: ${mode}`);
                 assert.strictEqual(hideSpy.calledOnce, true, 'hide called');
                 done();
@@ -139,9 +137,14 @@ QUnit.module('AIDialog', moduleConfig, () => {
         }
 
         const clipboardStub = sinon.stub(navigator.clipboard, 'writeText');
+        const resultTextAreaInstance = this.$element
+            .find(`.${TEXT_AREA_CLASS}`).eq(1)
+            .dxTextArea('instance');
 
         showAIDialog(this);
 
+        resultTextAreaInstance.option({ value: 'Test text' });
+
         const $copyButton = findButtonByText(this.$element, 'Copy');
         $copyButton.trigger('dxclick');
 

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

@@ -6,7 +6,7 @@ import { openAIDialog } from '../../../helpers/aiToolbarMenu.js';
 import {
     clickActionButton,
     setResultText,
-    getResultText,
+    getResultTextAreaValue,
 } from '../../../helpers/aiDialog.js';
 import { AI_DIALOG_CLASS } from '__internal/ui/html_editor/ui/aiDialog';
 
@@ -144,31 +144,23 @@ QUnit.module('AI dialog integration', {}, () => {
         });
     });
 
-    QUnit.module('input source based on selection', () => {
-        QUnit.test('Should use selected text as input', function(assert) {
-            const instance = setupHtmlEditorWithAi();
-
-            instance.setSelection(0, 4);
-
-            openAIDialog($('#htmlEditor'));
-            clickActionButton('replace');
+    QUnit.module('TextArea', () => {
+        QUnit.test('should not have any text inside it if nothing is selected', function(assert) {
+            setupHtmlEditorWithAi();
 
-            const resultText = getResultText();
+            const resultText = getResultTextAreaValue();
 
-            assert.strictEqual(resultText, 'Test', 'selected text used in resultTextArea');
+            assert.strictEqual(resultText, undefined, 'textarea does not contain text');
         });
 
-        QUnit.test('Should use all text as input if nothing is selected', function(assert) {
+        QUnit.test('should not have any text inside it if part of the text is selected', function(assert) {
             const instance = setupHtmlEditorWithAi();
 
-            instance.setSelection(0, 0);
-
-            openAIDialog($('#htmlEditor'));
-            clickActionButton('replace');
+            instance.setSelection(0, 4);
 
-            const resultText = getResultText();
+            const resultText = getResultTextAreaValue();
 
-            assert.strictEqual(resultText, 'Test value\n', 'all text used in resultTextArea');
+            assert.strictEqual(resultText, undefined, 'textarea does not contain text');
         });
     });