Html Editor - AI-powered Text Editing

@section ExternalDependencies {

    <script src="https://cdn.jsdelivr.net/npm/devextreme-quill@1.7.3/dist/dx-quill.min.js"></script>

    <script type="module">

        import { AzureOpenAI } from "https://esm.sh/openai@4.73.1";

​

        window.AzureOpenAI = AzureOpenAI;

    </script>

}

​

@(Html.DevExtreme().HtmlEditor()

    .ID("html-editor")

    .Height(530)

    .Value(new JS("markup"))

    .AiIntegration(new JS("aiIntegration"))

    .Toolbar(toolbar => toolbar

        .Items(items => {

            items.Add().Name("ai").Commands(new object [] {

                "summarize",

                "proofread",

                "expand",

                "shorten",

                "changeStyle",

                "changeTone",

                "translate",

                "askAI",

                new {

                    name = "custom",

                    text = "Extract Keywords",

                    prompt = new JS("() => { return 'Extract a list of keywords from the text and return it as a comma-separated string' }")

                }

            });

        })

        .Items(items => {

            items.Add().Name(HtmlEditorToolbarItem.Separator);

            items.Add().Name(HtmlEditorToolbarItem.Undo);

            items.Add().Name(HtmlEditorToolbarItem.Redo);

        })

    )

)

​

<script>

    let aiService;

​

    const deployment = 'gpt-4o-mini';

    const apiVersion = '2024-02-01';

    const endpoint = 'https://public-api.devexpress.com/demo-openai';

    const apiKey = 'DEMO';

​

    async function getAIResponse(messages, signal) {

        const params = {

            messages,

            model: deployment,

            max_tokens: 1000,

            temperature: 0.7,

        };

        return aiService.chat.completions.create(params, { signal });

    }

​

    const aiIntegration = new DevExpress.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 = new Promise(async (resolve, reject) => {

                try {

                    const response = await getAIResponse(aiPrompt, signal);

                    const result = response.choices[0].message?.content;

                    resolve(result);

                } catch {

                    reject();

                }

            });

            const result = {

                promise,

                abort: () => {

                    controller.abort();

                },

            };

            return result;

        },

    });

​

    $(() => {

        aiService = new AzureOpenAI({

            dangerouslyAllowBrowser: true,

            deployment,

            endpoint,

            apiVersion,

            apiKey,

        });

    });

​

    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>

    `;

</script>

​