Skip to content

Commit b8306d4

Browse files
alexslavralexslavr
authored
HtmlEditorToolbarItem: Generate configuration components for AI commands (DevExpress#29888)
1 parent 3384f45 commit b8306d4

File tree

15 files changed

+234
-17
lines changed

15 files changed

+234
-17
lines changed

‎apps/demos/Demos/HtmlEditor/AITextEditing/Vue/data.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { DxHtmlEditorTypes } from 'devextreme-vue/html-editor';
2+
13
export const AzureOpenAIConfig = {
24
dangerouslyAllowBrowser: true,
35
deployment: 'gpt-4o-mini',
@@ -6,7 +8,7 @@ export const AzureOpenAIConfig = {
68
apiKey: 'DEMO',
79
};
810

9-
export const commands = [
11+
export const commands: Array<DxHtmlEditorTypes.AICommand | DxHtmlEditorTypes.AICommandName> = [
1012
'summarize',
1113
'proofread',
1214
'expand',

‎packages/devextreme-angular/src/ui/html-editor/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,10 @@ import { DxoTableContextMenuModule } from 'devextreme-angular/ui/nested';
5555
import { DxiItemModule } from 'devextreme-angular/ui/nested';
5656
import { DxoTableResizingModule } from 'devextreme-angular/ui/nested';
5757
import { DxoToolbarModule } from 'devextreme-angular/ui/nested';
58+
import { DxiCommandModule } from 'devextreme-angular/ui/nested';
5859
import { DxoVariablesModule } from 'devextreme-angular/ui/nested';
5960

61+
import { DxiHtmlEditorCommandModule } from 'devextreme-angular/ui/html-editor/nested';
6062
import { DxoHtmlEditorConverterModule } from 'devextreme-angular/ui/html-editor/nested';
6163
import { DxoHtmlEditorFileUploaderOptionsModule } from 'devextreme-angular/ui/html-editor/nested';
6264
import { DxoHtmlEditorImageUploadModule } from 'devextreme-angular/ui/html-editor/nested';
@@ -1023,7 +1025,9 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
10231025
DxiItemModule,
10241026
DxoTableResizingModule,
10251027
DxoToolbarModule,
1028+
DxiCommandModule,
10261029
DxoVariablesModule,
1030+
DxiHtmlEditorCommandModule,
10271031
DxoHtmlEditorConverterModule,
10281032
DxoHtmlEditorFileUploaderOptionsModule,
10291033
DxoHtmlEditorImageUploadModule,
@@ -1052,7 +1056,9 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
10521056
DxiItemModule,
10531057
DxoTableResizingModule,
10541058
DxoToolbarModule,
1059+
DxiCommandModule,
10551060
DxoVariablesModule,
1061+
DxiHtmlEditorCommandModule,
10561062
DxoHtmlEditorConverterModule,
10571063
DxoHtmlEditorFileUploaderOptionsModule,
10581064
DxoHtmlEditorImageUploadModule,

‎packages/devextreme-angular/src/ui/html-editor/nested/command-dxi.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/* tslint:disable:max-line-length */
2+
3+
4+
import {
5+
Component,
6+
NgModule,
7+
Host,
8+
SkipSelf,
9+
Input
10+
} from '@angular/core';
11+
12+
13+
14+
15+
import { AICommandNameExtended } from 'devextreme/ui/html_editor';
16+
17+
import {
18+
DxIntegrationModule,
19+
NestedOptionHost,
20+
} from 'devextreme-angular/core';
21+
import { CollectionNestedOption } from 'devextreme-angular/core';
22+
23+
24+
@Component({
25+
selector: 'dxi-html-editor-command',
26+
standalone: true,
27+
template: '',
28+
styles: [''],
29+
imports: [ DxIntegrationModule ],
30+
providers: [NestedOptionHost]
31+
})
32+
export class DxiHtmlEditorCommandComponent extends CollectionNestedOption {
33+
@Input()
34+
get name(): AICommandNameExtended {
35+
return this._getOption('name');
36+
}
37+
set name(value: AICommandNameExtended) {
38+
this._setOption('name', value);
39+
}
40+
41+
@Input()
42+
get options(): any {
43+
return this._getOption('options');
44+
}
45+
set options(value: any) {
46+
this._setOption('options', value);
47+
}
48+
49+
@Input()
50+
get prompt(): ((param: string) => string) {
51+
return this._getOption('prompt');
52+
}
53+
set prompt(value: ((param: string) => string)) {
54+
this._setOption('prompt', value);
55+
}
56+
57+
@Input()
58+
get text(): string {
59+
return this._getOption('text');
60+
}
61+
set text(value: string) {
62+
this._setOption('text', value);
63+
}
64+
65+
66+
protected get _optionPath() {
67+
return 'commands';
68+
}
69+
70+
71+
constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost,
72+
@Host() optionHost: NestedOptionHost) {
73+
super();
74+
parentOptionHost.setNestedOption(this);
75+
optionHost.setHost(this, this._fullOptionPath.bind(this));
76+
}
77+
78+
79+
80+
ngOnDestroy() {
81+
this._deleteRemovedOptions(this._fullOptionPath());
82+
}
83+
84+
}
85+
86+
@NgModule({
87+
imports: [
88+
DxiHtmlEditorCommandComponent
89+
],
90+
exports: [
91+
DxiHtmlEditorCommandComponent
92+
],
93+
})
94+
export class DxiHtmlEditorCommandModule { }

‎packages/devextreme-angular/src/ui/html-editor/nested/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './command-dxi';
12
export * from './converter';
23
export * from './file-uploader-options';
34
export * from './image-upload';

‎packages/devextreme-angular/src/ui/html-editor/nested/item-dxi.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
import { DOCUMENT } from '@angular/common';
2020

2121

22-
import { dxHtmlEditorTableContextMenuItem, HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
22+
import { dxHtmlEditorTableContextMenuItem, HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem, AICommand, AICommandName } from 'devextreme/ui/html_editor';
2323
import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar';
2424
import { ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common';
2525

@@ -32,6 +32,7 @@ import {
3232
DxTemplateHost
3333
} from 'devextreme-angular/core';
3434
import { CollectionNestedOption } from 'devextreme-angular/core';
35+
import { DxiHtmlEditorCommandComponent } from './command-dxi';
3536

3637

3738
@Component({
@@ -220,12 +221,28 @@ export class DxiHtmlEditorItemComponent extends CollectionNestedOption implement
220221
this._setOption('widget', value);
221222
}
222223

224+
@Input()
225+
get commands(): Array<AICommand | AICommandName> {
226+
return this._getOption('commands');
227+
}
228+
set commands(value: Array<AICommand | AICommandName>) {
229+
this._setOption('commands', value);
230+
}
231+
223232

224233
protected get _optionPath() {
225234
return 'items';
226235
}
227236

228237

238+
@ContentChildren(forwardRef(() => DxiHtmlEditorCommandComponent))
239+
get commandsChildren(): QueryList<DxiHtmlEditorCommandComponent> {
240+
return this._getOption('commands');
241+
}
242+
set commandsChildren(value) {
243+
this.setChildren('commands', value);
244+
}
245+
229246
@ContentChildren(forwardRef(() => DxiHtmlEditorItemComponent))
230247
get itemsChildren(): QueryList<DxiHtmlEditorItemComponent> {
231248
return this._getOption('items');

‎packages/devextreme-angular/src/ui/html-editor/nested/toolbar.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717

1818

1919

20-
import { dxHtmlEditorToolbarItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
20+
import { AIToolbarItem, dxHtmlEditorToolbarItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
2121

2222
import {
2323
DxIntegrationModule,
@@ -46,10 +46,10 @@ export class DxoHtmlEditorToolbarComponent extends NestedOption implements OnDes
4646
}
4747

4848
@Input()
49-
get items(): Array<dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem> {
49+
get items(): Array<AIToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem> {
5050
return this._getOption('items');
5151
}
52-
set items(value: Array<dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem>) {
52+
set items(value: Array<AIToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem>) {
5353
this._setOption('items', value);
5454
}
5555

‎packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { ItemClickEvent } from 'devextreme/ui/drop_down_button';
1616
import { dxFileManagerContextMenuItem, FileManagerPredefinedContextMenuItem, FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager';
1717
import { ButtonItem, EmptyItem, FormItemComponent, FormItemType, GroupItem, LabelLocation, SimpleItem, TabbedItem } from 'devextreme/ui/form';
1818
import { GanttPredefinedContextMenuItem, GanttPredefinedToolbarItem } from 'devextreme/ui/gantt';
19-
import { HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
19+
import { AICommand, AICommandName, HtmlEditorPredefinedContextMenuItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
2020
import { dxMenuItem } from 'devextreme/ui/menu';
2121
import { Properties as dxSplitterOptions } from 'devextreme/ui/splitter';
2222
import { Properties as dxTabPanelOptions } from 'devextreme/ui/tab_panel';
@@ -490,6 +490,13 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
490490
this._setOption('formatValues', value);
491491
}
492492

493+
get commands(): Array<AICommandName | AICommand> {
494+
return this._getOption('commands');
495+
}
496+
set commands(value: Array<AICommandName | AICommand>) {
497+
this._setOption('commands', value);
498+
}
499+
493500
get key(): string {
494501
return this._getOption('key');
495502
}

‎packages/devextreme-angular/src/ui/nested/base/data-grid-toolbar.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { UserDefinedElement } from 'devextreme/core/element';
99
import { DataGridPredefinedToolbarItem, dxDataGridToolbarItem } from 'devextreme/ui/data_grid';
1010
import { dxFileManagerToolbarItem, FileManagerPredefinedToolbarItem } from 'devextreme/ui/file_manager';
1111
import { dxGanttToolbarItem, GanttPredefinedToolbarItem } from 'devextreme/ui/gantt';
12-
import { dxHtmlEditorToolbarItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
12+
import { AIToolbarItem, dxHtmlEditorToolbarItem, HtmlEditorPredefinedToolbarItem } from 'devextreme/ui/html_editor';
1313
import { dxTreeListToolbarItem, TreeListPredefinedToolbarItem } from 'devextreme/ui/tree_list';
1414

1515
@Component({
@@ -23,10 +23,10 @@ export abstract class DxoDataGridToolbar extends NestedOption {
2323
this._setOption('disabled', value);
2424
}
2525

26-
get items(): Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem> {
26+
get items(): Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | AIToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem> {
2727
return this._getOption('items');
2828
}
29-
set items(value: Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem>) {
29+
set items(value: Array<dxDataGridToolbarItem | DataGridPredefinedToolbarItem | dxFileManagerToolbarItem | FileManagerPredefinedToolbarItem | dxGanttToolbarItem | GanttPredefinedToolbarItem | dxHtmlEditorToolbarItem | AIToolbarItem | HtmlEditorPredefinedToolbarItem | dxTreeListToolbarItem | TreeListPredefinedToolbarItem>) {
3030
this._setOption('items', value);
3131
}
3232

‎packages/devextreme-angular/src/ui/nested/base/diagram-custom-command-dxi.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77

88
import { ToolbarItemLocation } from 'devextreme/common';
99
import { Command, CustomCommand } from 'devextreme/ui/diagram';
10+
import { AICommandNameExtended } from 'devextreme/ui/html_editor';
1011

1112
@Component({
1213
template: ''
@@ -33,10 +34,10 @@ export abstract class DxiDiagramCustomCommand extends CollectionNestedOption {
3334
this._setOption('location', value);
3435
}
3536

36-
get name(): Command | string {
37+
get name(): Command | string | AICommandNameExtended {
3738
return this._getOption('name');
3839
}
39-
set name(value: Command | string) {
40+
set name(value: Command | string | AICommandNameExtended) {
4041
this._setOption('name', value);
4142
}
4243

@@ -46,4 +47,18 @@ export abstract class DxiDiagramCustomCommand extends CollectionNestedOption {
4647
set text(value: string) {
4748
this._setOption('text', value);
4849
}
50+
51+
get options(): any {
52+
return this._getOption('options');
53+
}
54+
set options(value: any) {
55+
this._setOption('options', value);
56+
}
57+
58+
get prompt(): Function {
59+
return this._getOption('prompt');
60+
}
61+
set prompt(value: Function) {
62+
this._setOption('prompt', value);
63+
}
4964
}

‎packages/devextreme-angular/src/ui/nested/command-dxi.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ import { DxiItemComponent } from './item-dxi';
3636
'items',
3737
'location',
3838
'name',
39-
'text'
39+
'text',
40+
'options',
41+
'prompt'
4042
]
4143
})
4244
export class DxiCommandComponent extends DxiDiagramCustomCommand {

0 commit comments

Comments
 (0)