Skip to content

Commit f5a228b

Browse files
r-farkhutdinovRuslan Farkhutdinov
r-farkhutdinov
and
Ruslan Farkhutdinov
authored
HtmlEditor: Update AI dialog controls && Add storybook story (DevExpress#29633)
Co-authored-by: Ruslan Farkhutdinov <[email protected]>
1 parent 588fdef commit f5a228b

File tree

15 files changed

+299
-36
lines changed

15 files changed

+299
-36
lines changed

‎apps/react-storybook/stories/htmleditor/HtmlEditor.stories.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react';
2+
import { HtmlEditor, Toolbar, Item, IHtmlEditorOptions, IItemProps } from 'devextreme-react/html-editor';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import { defaultToolbarItems, fullToolbarItems } from './data';
5+
import { AIIntegration } from 'devextreme/artifacts/npm/devextreme/common/ai-integration';
6+
7+
const meta: Meta<typeof HtmlEditor> = {
8+
title: 'Editors/HtmlEditor',
9+
component: HtmlEditor,
10+
};
11+
12+
export default meta;
13+
14+
type HtmlEditorRenderArgs = IHtmlEditorOptions & {
15+
items: IItemProps[],
16+
};
17+
18+
export const Overview: StoryObj<HtmlEditorRenderArgs> = {
19+
argTypes: {
20+
items: {
21+
options: ['default', 'full'],
22+
mapping: {
23+
default: defaultToolbarItems,
24+
full: fullToolbarItems,
25+
},
26+
control: {
27+
type: 'select',
28+
labels: {
29+
default: 'Default Toolbar',
30+
full: 'Full Toolbar',
31+
},
32+
},
33+
},
34+
rtlEnabled: { control: 'boolean' },
35+
readOnly: { control: 'boolean' },
36+
disabled: { control: 'boolean'},
37+
height: { control: 'number' },
38+
width: { control: 'text' },
39+
},
40+
args: {
41+
items: defaultToolbarItems,
42+
rtlEnabled: false,
43+
readOnly: false,
44+
disabled: false,
45+
height: 500,
46+
width: '100%',
47+
},
48+
render: ({ items, ...editorProps }: HtmlEditorRenderArgs) => (
49+
<div style={{ width: '100%' }}>
50+
<HtmlEditor {...editorProps} defaultValue="<p>Hello, world!</p>">
51+
<Toolbar>
52+
{items.map((item, index) => (
53+
<Item key={index} {...item} />
54+
))}
55+
</Toolbar>
56+
</HtmlEditor>
57+
</div>
58+
),
59+
}
60+
61+
export const WithAI: StoryObj<HtmlEditorRenderArgs> = {
62+
args: {
63+
items: [
64+
...defaultToolbarItems,
65+
{ name: 'separator' },
66+
{ name: 'ai' }
67+
],
68+
height: 500,
69+
width: '100%',
70+
},
71+
render: ({ items, ...editorProps }: HtmlEditorRenderArgs) => (
72+
<div style={{ width: '100%' }}>
73+
<HtmlEditor
74+
{...editorProps}
75+
defaultValue="<p>What is the capital of France?</p>"
76+
aiIntegration={{} as AIIntegration}
77+
>
78+
<Toolbar>
79+
{items.map((item, index) => (
80+
<Item key={index} {...item} />
81+
))}
82+
</Toolbar>
83+
</HtmlEditor>
84+
</div>
85+
),
86+
}
87+

‎apps/react-storybook/stories/htmleditor/data.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
export const defaultToolbarItems = [
2+
{ name: 'bold' },
3+
{ name: 'italic' },
4+
{ name: 'underline' },
5+
{ name: 'separator' },
6+
{ name: 'undo' },
7+
{ name: 'redo' },
8+
];
9+
10+
export const fullToolbarItems = [
11+
{ name: 'undo' },
12+
{ name: 'redo' },
13+
{ name: 'separator' },
14+
{
15+
name: 'size',
16+
acceptedValues: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'],
17+
options: { placeholder: 'Font size' },
18+
},
19+
{
20+
name: 'font',
21+
acceptedValues: ['Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana'],
22+
options: { placeholder: 'Font' },
23+
},
24+
{ name: 'separator' },
25+
{ name: 'bold' },
26+
{ name: 'italic' },
27+
{ name: 'strike' },
28+
{ name: 'underline' },
29+
{ name: 'separator' },
30+
{ name: 'alignLeft' },
31+
{ name: 'alignCenter' },
32+
{ name: 'alignRight' },
33+
{ name: 'alignJustify' },
34+
{ name: 'separator' },
35+
{ name: 'orderedList' },
36+
{ name: 'bulletList' },
37+
{ name: 'separator' },
38+
{
39+
name: 'header',
40+
acceptedValues: [false, 1, 2, 3, 4, 5],
41+
options: { placeholder: 'Header' },
42+
},
43+
{ name: 'separator' },
44+
{ name: 'color' },
45+
{ name: 'background' },
46+
{ name: 'separator' },
47+
{ name: 'link' },
48+
{ name: 'image' },
49+
{ name: 'separator' },
50+
{ name: 'clear' },
51+
{ name: 'codeBlock' },
52+
{ name: 'blockquote' },
53+
{ name: 'separator' },
54+
{ name: 'insertTable' },
55+
{ name: 'deleteTable' },
56+
{ name: 'insertRowAbove' },
57+
{ name: 'insertRowBelow' },
58+
{ name: 'deleteRow' },
59+
{ name: 'insertColumnLeft' },
60+
{ name: 'insertColumnRight' },
61+
{ name: 'deleteColumn' },
62+
];

‎packages/devextreme-scss/scss/widgets/base/_htmlEditor.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -354,18 +354,15 @@ $transparent-border: 1px solid transparent;
354354

355355
.dx-aidialog-controls {
356356
display: flex;
357-
gap: 8px;
358357

359358
.dx-selectbox {
360359
flex: 1 0 0;
361-
max-width: calc(50% - 4px);
362360
}
363361
}
364362

365363
.dx-aidialog-content {
366364
display: flex;
367365
flex-direction: column;
368-
gap: 12px;
369366
}
370367

371368
.dx-aidialog-title {

‎packages/devextreme-scss/scss/widgets/fluent/htmlEditor/_index.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,3 +302,16 @@
302302
.dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content {
303303
box-shadow: $fluent-popup-content-shadow;
304304
}
305+
306+
.dx-aidialog-controls {
307+
gap: $fluent-aidialog-selects-gap;
308+
309+
.dx-selectbox {
310+
max-width: calc(50% - $fluent-aidialog-selects-gap * 0.5);
311+
}
312+
}
313+
314+
.dx-aidialog-content {
315+
padding: $fluent-aidialog-content-padding;
316+
gap: $fluent-aidialog-content-gap;
317+
}

‎packages/devextreme-scss/scss/widgets/fluent/htmlEditor/_sizes.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,19 @@ $fluent-html-editor-toolbar-menu-separator-margin: 4px !default;
1111
$fluent-html-editor-fileuploader-input-wrapper-border-radius: 8px !default;
1212
$fluent-html-editor-fileuploader-input-wrapper-border-size: 1.5px !default;
1313
$fluent-html-editor-add-image-dialog-tabs-padding: null !default;
14+
$fluent-aidialog-selects-gap: null !default;
15+
$fluent-aidialog-content-gap: null !default;
16+
$fluent-aidialog-content-padding: null !default;
1417

1518
@if $size == "default" {
1619
$fluent-toolbar-size-editor-width: 120px !default;
1720
$fluent-html-editor-vertical-padding: 16px !default;
1821
$fluent-html-editor-horizontal-padding: 16px !default;
1922
$fluent-html-editor-add-image-dialog-fileuploader-padding: 48px 0 24px;
2023
$fluent-html-editor-add-image-dialog-tabs-padding: 14px !default;
24+
$fluent-aidialog-selects-gap: 8px;
25+
$fluent-aidialog-content-gap: 16px;
26+
$fluent-aidialog-content-padding: 16px 24px;
2127
}
2228

2329
@else if $size == "compact" {
@@ -26,6 +32,9 @@ $fluent-html-editor-add-image-dialog-tabs-padding: null !default;
2632
$fluent-html-editor-horizontal-padding: 12px !default;
2733
$fluent-html-editor-add-image-dialog-fileuploader-padding: 40px 0 18px;
2834
$fluent-html-editor-add-image-dialog-tabs-padding: 8px !default;
35+
$fluent-aidialog-selects-gap: 4px;
36+
$fluent-aidialog-content-gap: 12px;
37+
$fluent-aidialog-content-padding: 12px 16px;
2938
}
3039

3140
$fluent-htmleditor-toolbar-padding: $fluent-html-editor-horizontal-padding !default;

‎packages/devextreme-scss/scss/widgets/generic/htmlEditor/_index.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,3 +298,22 @@
298298
background-color: $htmleditor-cells-separator-bg;
299299
}
300300
}
301+
302+
.dx-aidialog {
303+
.dx-aidialog-controls {
304+
gap: $generic-aidialog-selects-gap;
305+
306+
.dx-selectbox {
307+
max-width: calc(50% - $generic-aidialog-selects-gap * 0.5);
308+
}
309+
}
310+
311+
.dx-aidialog-content {
312+
padding: $generic-aidialog-content-padding;
313+
gap: $generic-aidialog-content-gap;
314+
}
315+
316+
.dx-button {
317+
min-width: auto;
318+
}
319+
}

‎packages/devextreme-scss/scss/widgets/generic/htmlEditor/_sizes.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,22 @@
55
$generic-toolbar-size-editor-width: null !default;
66
$generic-html-editor-add-image-dialog-base-padding: 5px !default;
77
$generic-html-editor-add-image-dialog-fileuploader-padding: null !default;
8+
$generic-aidialog-selects-gap: null !default;
9+
$generic-aidialog-content-gap: null !default;
10+
$generic-aidialog-content-padding: null !default;
811

912
@if $size == "default" {
1013
$generic-toolbar-size-editor-width: 105px !default;
1114
$generic-html-editor-add-image-dialog-fileuploader-padding: 60px 20px !default;
15+
$generic-aidialog-selects-gap: 10px;
16+
$generic-aidialog-content-gap: 20px;
17+
$generic-aidialog-content-padding: 20px;
1218
}
1319

1420
@else if $size == "compact" {
1521
$generic-toolbar-size-editor-width: 80px !default;
1622
$generic-html-editor-add-image-dialog-fileuploader-padding: 40px 20px !default;
23+
$generic-aidialog-selects-gap: 5px;
24+
$generic-aidialog-content-gap: 10px;
25+
$generic-aidialog-content-padding: 10px;
1726
}

‎packages/devextreme-scss/scss/widgets/material/htmlEditor/_index.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,3 +342,28 @@
342342
box-shadow: $material-popup-overlay-content-shadow;
343343
}
344344
}
345+
346+
.dx-aidialog {
347+
.dx-toolbar.dx-popup-bottom {
348+
padding: $material-aidialog-toolbar-padding;
349+
}
350+
351+
.dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper {
352+
.dx-overlay-content {
353+
box-shadow: $material-popup-overlay-content-shadow;
354+
}
355+
}
356+
357+
.dx-aidialog-controls {
358+
gap: $material-aidialog-selects-gap;
359+
360+
.dx-selectbox {
361+
max-width: calc(50% - $material-aidialog-selects-gap * 0.5);
362+
}
363+
}
364+
365+
.dx-aidialog-content {
366+
padding: $material-aidialog-content-padding;
367+
gap: $material-aidialog-content-gap;
368+
}
369+
}

‎packages/devextreme-scss/scss/widgets/material/htmlEditor/_sizes.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,27 @@
66
$material-toolbar-size-editor-width: null !default;
77
$material-htmleditor-toolbar-padding: null !default;
88
$material-html-editor-add-image-dialog-fileuploader-padding: null !default;
9+
$material-aidialog-selects-gap: null !default;
10+
$material-aidialog-content-gap: null !default;
11+
$material-aidialog-content-padding: null !default;
12+
$material-aidialog-toolbar-padding: null !default;
913

1014
@if $size == "default" {
1115
$material-toolbar-size-editor-width: 120px !default;
1216
$material-htmleditor-toolbar-padding: 16px !default;
1317
$material-html-editor-add-image-dialog-fileuploader-padding: 50px 40px;
18+
$material-aidialog-selects-gap: 8px;
19+
$material-aidialog-content-gap: 24px;
20+
$material-aidialog-content-padding: 24px;
21+
$material-aidialog-toolbar-padding: 16px 24px;
1422
}
1523

1624
@else if $size == "compact" {
1725
$material-toolbar-size-editor-width: 90px !default;
1826
$material-htmleditor-toolbar-padding: 11px !default;
1927
$material-html-editor-add-image-dialog-fileuploader-padding: 40px 30px;
28+
$material-aidialog-selects-gap: 8px;
29+
$material-aidialog-content-gap: 16px;
30+
$material-aidialog-content-padding: 16px;
31+
$material-aidialog-toolbar-padding: 8px 16px;
2032
}

‎packages/devextreme-themebuilder/tests/data/dependencies.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const dependencies: FlatStylesDependencies = {
3838
gallery: [],
3939
toolbar: ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup'],
4040
contextmenu: ['validation', 'button', 'loadindicator', 'textbox'],
41-
htmleditor: ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'textbox', 'list', 'checkbox', 'selectbox', 'numberbox', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'calendar', 'datebox', 'form', 'buttongroup', 'colorbox', 'progressbar', 'fileuploader', 'contextmenu', 'textarea'],
41+
htmleditor: ['validation', 'button', 'loadindicator', 'loadpanel', 'scrollview', 'popup', 'toolbar', 'textbox', 'list', 'checkbox', 'selectbox', 'numberbox', 'multiview', 'tabs', 'tabpanel', 'box', 'responsivebox', 'calendar', 'datebox', 'form', 'buttongroup', 'colorbox', 'progressbar', 'fileuploader', 'contextmenu', 'textarea', 'menu', 'dropdownbutton', 'treeview'],
4242
sortable: [],
4343
lookup: ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'loadpanel', 'scrollview', 'list', 'popover'],
4444
map: [],

0 commit comments

Comments
 (0)