Skip to content

Commit c277f65

Browse files
ksercsksercs
authored
HtmlEditor: add jquery "AI-powered Text Editing" demo (DevExpress#29837)
1 parent 060a465 commit c277f65

File tree

10 files changed

+160
-3
lines changed

10 files changed

+160
-3
lines changed

‎apps/demos/Demos/HtmlEditor/AITextEditing/HtmlEditorAi.png‎

-40 KB
Binary file not shown.

‎apps/demos/Demos/HtmlEditor/AITextEditing/jQuery/data.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const deployment = 'gpt-4o-mini';
2+
const apiVersion = '2024-02-01';
3+
const endpoint = 'https://public-api.devexpress.com/demo-openai';
4+
const apiKey = 'DEMO';
5+
6+
const markup = `
7+
<h2>
8+
<img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor">
9+
Formatted Text Editor (HTML Editor)
10+
</h2>
11+
<br>
12+
<p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML.</p>
13+
<p>Supported features:</p>
14+
<ul>
15+
<li>Inline formats:
16+
<ul>
17+
<li>Bold, italic, strikethrough text formatting</li>
18+
<li>Font, size, color changes (HTML only)</li>
19+
</ul>
20+
</li>
21+
<li>Block formats:
22+
<ul>
23+
<li>Headers</li>
24+
<li>Text alignment</li>
25+
<li>Lists (ordered and unordered)</li>
26+
<li>Code blocks</li>
27+
<li>Quotes</li>
28+
</ul>
29+
</li>
30+
<li>Custom formats</li>
31+
<li>Mail-merge placeholders (for example, %username%)</li>
32+
<li>Adaptive toolbar for working images, links, and color formats</li>
33+
<li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li>
34+
<li>Copy-paste rich content (unsupported formats are removed)</li>
35+
<li>Tables support</li>
36+
</ul>
37+
`;

‎apps/demos/Demos/HtmlEditor/AITextEditing/jQuery/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
8+
<script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
9+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme/dist/css/dx.light.css" />
10+
<script src="../../../../node_modules/devextreme-quill/dist/dx-quill.min.js"></script>
11+
12+
<script type="module">
13+
import { AzureOpenAI } from "https://esm.sh/[email protected]";
14+
15+
window.AzureOpenAI = AzureOpenAI;
16+
</script>
17+
18+
<script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
19+
<script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script>
20+
<script src="data.js"></script>
21+
<link rel="stylesheet" type="text/css" href="styles.css" />
22+
<script src="index.js"></script>
23+
</head>
24+
<body class="dx-viewport">
25+
<div class="demo-container">
26+
<div class="html-editor"></div>
27+
</div>
28+
</body>
29+
</html>

‎apps/demos/Demos/HtmlEditor/AITextEditing/jQuery/index.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
$(() => {
2+
const aiService = new AzureOpenAI({
3+
dangerouslyAllowBrowser: true,
4+
deployment,
5+
endpoint,
6+
apiVersion,
7+
apiKey,
8+
});
9+
10+
async function getAIResponse(messages, signal) {
11+
const params = {
12+
messages,
13+
model: deployment,
14+
max_tokens: 1000,
15+
temperature: 0.7,
16+
};
17+
18+
return aiService.chat.completions.create(params, { signal });
19+
}
20+
21+
const aiIntegration = new DevExpress.aiIntegration({
22+
sendRequest({ prompt }) {
23+
const controller = new AbortController();
24+
const signal = controller.signal;
25+
26+
const aiPrompt = [
27+
{ role: 'system', content: prompt.system, },
28+
{ role: 'user', content: prompt.user, },
29+
];
30+
31+
const promise = new Promise(async (resolve, reject) => {
32+
try {
33+
const response = await getAIResponse(aiPrompt, signal);
34+
const result = response.choices[0].message?.content;
35+
36+
resolve(result);
37+
} catch {
38+
reject();
39+
}
40+
});
41+
42+
const result = {
43+
promise,
44+
abort: () => {
45+
controller.abort();
46+
},
47+
};
48+
49+
return result;
50+
},
51+
});
52+
53+
$('.html-editor').dxHtmlEditor({
54+
height: 530,
55+
value: markup,
56+
aiIntegration,
57+
toolbar: {
58+
items: [
59+
{
60+
name: 'ai',
61+
commands: [
62+
'summarize',
63+
'proofread',
64+
'expand',
65+
'shorten',
66+
'changeStyle',
67+
'changeTone',
68+
'translate',
69+
'askAI',
70+
{
71+
name: 'custom',
72+
text: 'Extract Keywords',
73+
prompt: () => {
74+
return 'Extract a list of keywords from the text and return them as a comma-separated string';
75+
},
76+
},
77+
],
78+
},
79+
'separator',
80+
'undo',
81+
'redo'
82+
],
83+
}
84+
});
85+
});

‎apps/demos/Demos/HtmlEditor/AITextEditing/jQuery/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.dx-htmleditor-content img {
2+
vertical-align: middle;
3+
padding-right: 10px;
4+
}

‎apps/demos/menuMeta.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2050,15 +2050,15 @@
20502050
},
20512051
{
20522052
"Name": "AI-powered Text Editing",
2053-
"Equivalents": "AI, text editing, text editor",
2053+
"Equivalents": "AI, AI text transformation, AI editor",
20542054
"Demos": [
20552055
{
20562056
"Title": "AI-powered Text Editing",
20572057
"Name": "AITextEditing",
20582058
"Widget": "HtmlEditor",
20592059
"DemoType": "Web",
2060-
"Badge": "Roadmap",
2061-
"RoadmapSurveyUrl": "https://www.devexpress.com/support/surveys/devextreme-roadmap-ai.xml"
2060+
"Badge": "New",
2061+
"Modules": "openai"
20622062
}
20632063
]
20642064
},

‎apps/demos/testing/common.test.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ const getTestSpecificSkipRules = (testName) => {
5757
return ['empty-table-header'];
5858
case 'Localization-UsingGlobalize':
5959
return ['label'];
60+
case 'HtmlEditor-AITextEditing':
61+
return ['aria-command-name'];
6062
default:
6163
return [];
6264
}

‎apps/demos/testing/etalons/HtmlEditor-AITextEditing (fluent.blue.light).png‎

103 KB
Loading

‎apps/demos/testing/etalons/HtmlEditor-AITextEditing (material.blue.light).png‎

75.1 KB
Loading

‎apps/demos/testing/etalons/HtmlEditor-AITextEditing.png‎

99.2 KB
Loading

0 commit comments

Comments
 (0)