Backend API
import React from 'react';
import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
import { markup, extractKeywordsPrompt } from './data.ts';
import { aiIntegration } from './service.ts';
export default function App() {
return (
<HtmlEditor
height={530}
defaultValue={markup}
aiIntegration={aiIntegration}
>
<Toolbar>
<ToolbarItem name="ai">
<Command name="summarize" />
<Command name="proofread" />
<Command name="expand" />
<Command name="shorten" />
<Command name="changeStyle" />
<Command name="changeTone" />
<Command name="translate" />
<Command name="askAI" />
<Command
name="custom"
text="Extract Keywords"
prompt={extractKeywordsPrompt}
/>
</ToolbarItem>
<ToolbarItem name="separator" />
<ToolbarItem name="undo" />
<ToolbarItem name="redo" />
</Toolbar>
</HtmlEditor>
);
}
import React from 'react';
import HtmlEditor, { Toolbar, ToolbarItem, Command } from 'devextreme-react/html-editor';
import { markup, extractKeywordsPrompt } from './data.js';
import { aiIntegration } from './service.js';
export default function App() {
return (
<HtmlEditor
height={530}
defaultValue={markup}
aiIntegration={aiIntegration}
>
<Toolbar>
<ToolbarItem name="ai">
<Command name="summarize" />
<Command name="proofread" />
<Command name="expand" />
<Command name="shorten" />
<Command name="changeStyle" />
<Command name="changeTone" />
<Command name="translate" />
<Command name="askAI" />
<Command
name="custom"
text="Extract Keywords"
prompt={extractKeywordsPrompt}
/>
</ToolbarItem>
<ToolbarItem name="separator" />
<ToolbarItem name="undo" />
<ToolbarItem name="redo" />
</Toolbar>
</HtmlEditor>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
import type { HtmlEditorTypes } from 'devextreme-react/html-editor';
export const markup = `
<h2>
<img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor">
Formatted Text Editor (HTML Editor)
</h2>
<br>
<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>
<p>Supported features:</p>
<ul>
<li>Inline formats:
<ul>
<li>Bold, italic, strikethrough text formatting</li>
<li>Font, size, color changes (HTML only)</li>
</ul>
</li>
<li>Block formats:
<ul>
<li>Headers</li>
<li>Text alignment</li>
<li>Lists (ordered and unordered)</li>
<li>Code blocks</li>
<li>Quotes</li>
</ul>
</li>
<li>Custom formats</li>
<li>Mail-merge placeholders (for example, %username%)</li>
<li>Adaptive toolbar for working images, links, and color formats</li>
<li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li>
<li>Copy-paste rich content (unsupported formats are removed)</li>
<li>Tables support</li>
</ul>
`;
export const extractKeywordsPrompt: HtmlEditorTypes.AICustomCommand['prompt'] = () =>
'Extract a list of keywords from the text and return it as a comma-separated string';
import { AIIntegration } from 'devextreme-react/common/ai-integration';
import type { AIResponse, RequestParams, Response } from 'devextreme-react/common/ai-integration';
import { AzureOpenAI, OpenAI } from 'openai';
type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & {
content: string;
};
const AzureOpenAIConfig = {
dangerouslyAllowBrowser: true,
deployment: 'demo-mini',
apiVersion: '2024-02-01',
endpoint: 'https://public-api.devexpress.com/demo-openai',
apiKey: 'DEMO',
};
const aiService = new AzureOpenAI(AzureOpenAIConfig);
async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
const params = {
messages,
model: AzureOpenAIConfig.deployment,
max_completion_tokens: 1000,
temperature: 0.7,
};
const response = await aiService.chat.completions.create(params, { signal });
return response.choices[0].message?.content;
}
export const aiIntegration = new AIIntegration({
sendRequest({ prompt }: RequestParams): Response {
const controller = new AbortController();
const signal = controller.signal;
const aiPrompt: AIMessage[] = [
{ role: 'system', content: prompt.system ?? '' },
{ role: 'user', content: prompt.user ?? '' },
];
const promise = getAIResponse(aiPrompt, signal) as Promise<AIResponse>;
return {
promise,
abort: () => {
controller.abort();
},
};
},
});
import { AIIntegration } from 'devextreme-react/common/ai-integration';
import { AzureOpenAI } from 'openai';
const AzureOpenAIConfig = {
dangerouslyAllowBrowser: true,
deployment: 'demo-mini',
apiVersion: '2024-02-01',
endpoint: 'https://public-api.devexpress.com/demo-openai',
apiKey: 'DEMO',
};
const aiService = new AzureOpenAI(AzureOpenAIConfig);
async function getAIResponse(messages, signal) {
const params = {
messages,
model: AzureOpenAIConfig.deployment,
max_completion_tokens: 1000,
temperature: 0.7,
};
const response = await aiService.chat.completions.create(params, { signal });
return response.choices[0].message?.content;
}
export const aiIntegration = new AIIntegration({
sendRequest({ prompt }) {
const controller = new AbortController();
const signal = controller.signal;
const aiPrompt = [
{ role: 'system', content: prompt.system ?? '' },
{ role: 'user', content: prompt.user ?? '' },
];
const promise = getAIResponse(aiPrompt, signal);
return {
promise,
abort: () => {
controller.abort();
},
};
},
});
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const markup = `
<h2>
<img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor">
Formatted Text Editor (HTML Editor)
</h2>
<br>
<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>
<p>Supported features:</p>
<ul>
<li>Inline formats:
<ul>
<li>Bold, italic, strikethrough text formatting</li>
<li>Font, size, color changes (HTML only)</li>
</ul>
</li>
<li>Block formats:
<ul>
<li>Headers</li>
<li>Text alignment</li>
<li>Lists (ordered and unordered)</li>
<li>Code blocks</li>
<li>Quotes</li>
</ul>
</li>
<li>Custom formats</li>
<li>Mail-merge placeholders (for example, %username%)</li>
<li>Adaptive toolbar for working images, links, and color formats</li>
<li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li>
<li>Copy-paste rich content (unsupported formats are removed)</li>
<li>Tables support</li>
</ul>
`;
export const extractKeywordsPrompt = () =>
'Extract a list of keywords from the text and return it as a comma-separated string';
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
.dx-htmleditor-content img {
vertical-align: middle;
padding-right: 10px;
}
The default "ai" toolbar item includes the following predefined commands:
- Summarize
- Proofread
- Expand
- Shorten
- Change style
- Change tone
- Translate
- Ask AI assistant (allows users to run their own prompts to alter HTML Editor content)
You can also specify predefined commands to include in the "ai" item and customize standard command default options (for example, by setting a custom list of target languages for translation). Additionally, you can add a new custom command to the "ai" item by specifying your prompt. In this demo, the custom command is "Extract Keywords". For additional information, check the prompt in code.
This implementation works with selected text. If nothing is selected, the entire text is altered.