Skip to content

HtmlEditor: Add Keyboard Trap Fix Info #9042

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arman-boyakhchyan wants to merge 7 commits into
base: main
Choose a base branch
from
Open

HtmlEditor: Add Keyboard Trap Fix Info #9042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
649db4c
HtmlEditor: Add Keyboard Trap Fix Info
arman-boyakhchyan Jul 24, 2026
f3dd94a
Add Minor Updates
arman-boyakhchyan Jul 24, 2026
e7e18a6
Add Vue Fixes
arman-boyakhchyan Jul 24, 2026
27e1e31
Add Naming Fix & Update to `<ol>`
arman-boyakhchyan Jul 24, 2026
6514430
Update to `<ul>`
arman-boyakhchyan Jul 24, 2026
05399b9
Update Following Feedback
arman-boyakhchyan Jul 24, 2026
1fa2de7
Update Following Feedback
arman-boyakhchyan Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 100 additions & 70 deletions api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,118 +13,148 @@ Module configurations.
The DevExtreme Quill modules and the API you can use to customize them are described in the <a href="https://github.com/DevExpress/devextreme-quill/tree/master/docs/modules" target="_blank">Modules</a> documentation section. For example, the <a href="https://github.com/DevExpress/devextreme-quill/blob/master/docs/modules/history.md" target="_blank">History</a> module, which handles the undo and redo operations, can be customized as follows:

@dirkpieterse dirkpieterse Jul 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The DevExtreme Quill modules and the API you can use to customize them are described in the <a href="https://github.com/DevExpress/devextreme-quill/tree/master/docs/modules" target="_blank">Modules</a> documentation section. For example, the <a href="https://github.com/DevExpress/devextreme-quill/blob/master/docs/modules/history.md" target="_blank">History</a> module, which handles the undo and redo operations, can be customized as follows:
The <a href="https://github.com/DevExpress/devextreme-quill/tree/master/docs/modules" target="_blank">Modules</a> documentation section describes the DevExtreme Quill modules and the API you can use to customize them. For example, the <a href="https://github.com/DevExpress/devextreme-quill/blob/master/docs/modules/history.md" target="_blank">History</a> module, which handles the undo and redo operations, can be customized as follows:


---

##### jQuery

<!-- tab: index.js -->
$(function() {
$("#htmlEditorContainer").dxHtmlEditor({
// ...
customizeModules: function(config) {
config.history = {
delay: 0,
maxStack: 5000
};
}
});
$("#html-editor").dxHtmlEditor({
customizeModules(config) {
Comment thread
arman-boyakhchyan marked this conversation as resolved.
config.history = {
delay: 0,
Comment thread
arman-boyakhchyan marked this conversation as resolved.
maxStack: 5000
};
}
});

##### Angular

<!-- tab: app.component.html -->
<dx-html-editor ...
<dx-html-editor
[customizeModules]="customizeQuillModules">
</dx-html-editor>

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';
Comment thread
arman-boyakhchyan marked this conversation as resolved.

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
// ...
export class AppComponent {
customizeQuillModules(config) {
config.history = {
delay: 0,
maxStack: 5000
maxStack: 5000,
};
}
}

<!-- tab: app.module.ts -->
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxHtmlEditorModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxHtmlEditorModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }

##### Vue

<!-- tab: App.vue -->
<template>
<DxHtmlEditor ...
<DxHtmlEditor
:customize-modules="customizeQuillModules"
/>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import DxHtmlEditor from 'devextreme-vue/html-editor';

export default {
components: {
DxHtmlEditor
},
methods: {
customizeQuillModules(config) {
config.history = {
delay: 0,
maxStack: 5000
};
}
}
<script setup lang="ts">
import { DxHtmlEditor } from 'devextreme-vue/html-editor';

function customizeQuillModules(config) {
config.history = {
delay: 0,
Comment thread
arman-boyakhchyan marked this conversation as resolved.
maxStack: 5000,
};
}
</script>

##### React

<!-- tab: App.js -->
import React from 'react';
<!-- tab: App.tsx -->
import React, { useCallback } from 'react';
import { HtmlEditor } from 'devextreme-react/html-editor';

import 'devextreme/dist/css/dx.fluent.blue.light.css';
export default function App() {
const customizeQuillModules = useCallback((config) => {
config.history = {
delay: 0,
maxStack: 5000,
};
}, []);

return (
<HtmlEditor
customizeModules={customizeQuillModules}
/>
);
}

---

import HtmlEditor from 'devextreme-react/html-editor';
You can configure **customizeModules** to modify the [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior of HTML Editor using `keyboard.inlineTabInsertion`:

@dirkpieterse dirkpieterse Jul 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
You can configure **customizeModules** to modify the [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior of HTML Editor using `keyboard.inlineTabInsertion`:
Use **customizeModules** and `keyboard.inlineTabInsertion` to modify the HTML Editor's [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior:


class App extends React.Component {
render() {
return (
<HtmlEditor ...
customizeModules={this.customizeQuillModules}
/>
);
---

##### jQuery

<!-- tab: index.js -->
$("#html-editor").dxHtmlEditor({
customizeModules(config) {
config.keyboard.inlineTabInsertion = true;
}
});

##### Angular

<!-- tab: app.component.html -->
<dx-html-editor
[customizeModules]="customizeQuillModules">
</dx-html-editor>

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';
Comment thread
arman-boyakhchyan marked this conversation as resolved.

// ...
export class AppComponent {
customizeQuillModules(config) {
config.history = {
delay: 0,
maxStack: 5000
};
config.keyboard.inlineTabInsertion = true;
}
}
export default App;

##### Vue

<!-- tab: App.vue -->
<template>
<DxHtmlEditor
:customize-modules="customizeQuillModules"
/>
</template>

<script setup lang="ts">
import { DxHtmlEditor } from 'devextreme-vue/html-editor';

function customizeQuillModules(config) {
config.keyboard.inlineTabInsertion = true;
}
</script>

##### React

<!-- tab: App.tsx -->
import React, { useCallback } from 'react';
import { HtmlEditor } from 'devextreme-react/html-editor';

export default function App() {
const customizeQuillModules = useCallback((config) => {
config.keyboard.inlineTabInsertion = true;
}, []);

return (
<HtmlEditor
customizeModules={customizeQuillModules}
/>
);
}

---

Expand Down
5 changes: 0 additions & 5 deletions ...Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,6 @@ The HTML Editor component meets a variety of <a href="https://www.access-board.g
<td>2.1.1 Keyboard (Level A) <br> 11.5.2.12 Execution of available actions</td>
<td>Users cannot resize images, Popup, and Resizable controls within HTML Editor.</td>
</tr>
<tr>
<td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
<td>2.1.2 No Keyboard Trap (Level A)</td>
<td>The keyboard shortcut to focus out of the component does not exist.</td>
</tr>
<tr>
<td>-</td>
<td>4.1.2 Name, Role, Value</td>
Expand Down
118 changes: 103 additions & 15 deletions concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ A user can use the following keys to interact with the HTML Editor component:

<table class="dx-table">
<tr>
<th>PC</th>
<th>Mac</th>
<th style="min-width: 64px;">PC</th>
<th style="min-width: 64px;">Mac</th>
Comment thread
arman-boyakhchyan marked this conversation as resolved.
<th>Action</th>
</tr>
<tr>
Expand Down Expand Up @@ -50,25 +50,45 @@ A user can use the following keys to interact with the HTML Editor component:
<td>Insert a line break (in the same paragraph)</td>
</tr>
<tr>
<td colspan="2" rowspan="3">Tab</td>
<td>Nest current list item (when in a list)</td>
<td colspan="2">Tab</td>
<td>
<ul>
<li>Indent list items</li>
<li>Focus the next cell in tables</li>
<li>Focus the next focusable element on the page. If <code>keyboard.inlineTabInsertion</code> is enabled, insert a tab character (<code>\t</code>) in text.</li>
Comment thread
arman-boyakhchyan marked this conversation as resolved.
</ul>
</td>
</tr>
<tr>
<td colspan="2">Shift + Tab</td>
<td>
<ul>
<li>Dedent list items</li>
<li>Focus the previous cell in tables</li>
<li>
Focus one of the following elements:
<ul>
<li>The previous focusable element on the page</li>
<li>The HTML Editor <a href="/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/">toolbar</a> (if configured)</li>
</ul>
If text contains tab characters (<code>\t</code>) and <code>keyboard.inlineTabInsertion</code> is enabled, remove a tab character from text.
</li>
</ul>
</td>
</tr>
<tr>
<td>Increase indentation (when at the start of a paragraph)</td>
</tr>
<tr>
<td>Move the cursor to the next table cell</td>
<td colspan="2">Arrow Keys</td>
<td>Navigate through the table</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Shift + Tab</td>
<td>Move the cursor to the previous table cell</td>
<td>Ctrl + Shift + Up&nbsp;Arrow</td>
<td>&#8984; + Shift + Up&nbsp;Arrow</td>
<td>Focus the previous focusable element on the page or the HTML Editor <a href="/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/">toolbar</a> (if configured)</td>
</tr>
<tr>
<td>Decrease indentation (when at the start of a paragraph)</td>
</tr>
<tr>
<td colspan="2">Arrow Keys</td>
<td>Navigate through the table</td>
<td>Ctrl + Shift + Down&nbsp;Arrow</td>
<td>&#8984; + Shift + Down&nbsp;Arrow</td>
<td>Focus the next focusable element on the page</td>
</tr>
<tr>
<td colspan="2">Enter</td>
Expand All @@ -84,4 +104,72 @@ A user can use the following keys to interact with the HTML Editor component:
</tr>
</table>

Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules) to toggle `keyboard.inlineTabInsertion`:
Comment thread
arman-boyakhchyan marked this conversation as resolved.

---

##### jQuery

<!-- tab: index.js -->
$("#html-editor").dxHtmlEditor({
customizeModules(config) {
config.keyboard.inlineTabInsertion = true;
}
});

##### Angular

<!-- tab: app.component.html -->
<dx-html-editor
[customizeModules]="customizeQuillModules">
</dx-html-editor>

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';
Comment thread
arman-boyakhchyan marked this conversation as resolved.

// ...
export class AppComponent {
customizeQuillModules(config) {
config.keyboard.inlineTabInsertion = true;
}
}

##### Vue

<!-- tab: App.vue -->
<template>
<DxHtmlEditor
:customize-modules="customizeQuillModules"
/>
</template>

<script setup lang="ts">
import { DxHtmlEditor } from 'devextreme-vue/html-editor';

function customizeQuillModules(config) {
config.keyboard.inlineTabInsertion = true;
}
</script>

##### React

<!-- tab: App.tsx -->
import React, { useCallback } from 'react';
import { HtmlEditor } from 'devextreme-react/html-editor';

export default function App() {
const customizeQuillModules = useCallback((config) => {
config.keyboard.inlineTabInsertion = true;
}, []);

return (
<HtmlEditor
customizeModules={customizeQuillModules}
/>
);
}

---

#include common-code-register-key-handler