Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions docs/api/config/toolbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ You can specify the following buttons in the RichText toolbar:
| `outdent` | Decreases paragraph indentation. |
| `line-height` | Adjusts the line spacing (line height). |
| `quote` | Formats the text as a blockquote. |
| `bulleted-list` | Creates a bulleted list. |
| `numbered-list` | Creates a numbered list. |
| `bulleted-list` | Toggles the bulleted list on/off |
| `numbered-list` | Toggles the numbered list on/off |
| `link` | Inserts a hyperlink. |
| `image` | Inserts an image. |
| `line` | Inserts a horizontal line. |
Expand Down
56 changes: 56 additions & 0 deletions docs/api/events/toggle-list.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
sidebar_label: toggle-list
title: toggle-list Event
description: You can learn about the toggle-list event in the documentation of the DHTMLX JavaScript RichText library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.
---

# toggle-list

### Description

@short: Fires when the user toggles a list on the selected blocks

The `toggle-list` event powers the context-aware bulleted/numbered list buttons. Instead of inserting a new list, the event inspects the current selection and picks one of four behaviors automatically:

| Mode | When it fires | Result |
| ----------- | --------------------------------------------------------------- | ------------------------------------------------------------------- |
| **Wrap** | The selection covers only paragraphs | Each paragraph becomes a list item inside one new list container |
| **Unwrap** | Every covered item is in a list of the clicked type | The items revert to paragraphs; the list container is removed |
| **Convert** | Every covered item is in a list, but at least one of the lists is of the other type | The list flips its type (bulleted ↔ numbered) in place |
| **Mixed** | The selection mixes paragraphs and list items | Paragraphs become items and everything joins one list of the type |

### Usage

~~~jsx {}
"toggle-list": ({ type: TListType }) => boolean | void;

type TListType = "bulleted" | "numbered";
~~~

### Parameters

The callback of the `toggle-list` event can take an object with the following parameter:

- `type` - the type of the list to toggle. You can specify the following values:
- `"bulleted"` - bulleted (unordered) list
- `"numbered"` - numbered (ordered) list

:::info
To handle inner events, use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
:::

### Example

~~~jsx {5-9}
// initialize RichText
const editor = new richtext.Richtext("#root", {
// configuration properties
});
// subscribe to the "toggle-list" event
editor.api.on("toggle-list", (obj) => {
console.log(obj.type);
console.log("The list was toggled");
});
~~~

**Change log:** The event was added in v2.0.6
1 change: 1 addition & 0 deletions docs/api/overview/events_overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ You can use these events to extend functionality, track user interaction, or tri
| [](api/events/superscript.md) | @getshort(api/events/superscript.md) |
| [](api/events/toggle-fullscreen-mode.md) | @getshort(api/events/toggle-fullscreen-mode.md)|
| [](api/events/toggle-layout-mode.md) | @getshort(api/events/toggle-layout-mode.md) |
| [](api/events/toggle-list.md) | @getshort(api/events/toggle-list.md) |
| [](api/events/toggle-shortcut-info.md) | @getshort(api/events/toggle-shortcut-info.md) |
| [](api/events/undo.md) | @getshort(api/events/undo.md) |
| [](api/events/update-link.md) | @getshort(api/events/update-link.md) |
27 changes: 26 additions & 1 deletion docs/news/whats_new.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,33 @@ sidebar_label: What's new
title: What's new
description: You can explore what's new in DHTMLX RichText and its release history in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.
---
## Version 2.0.6

## Version 2.0.5
Released on May 28, 2026

### New functionality

- Context-aware OL/UL toolbar buttons that toggle or convert lists based on the selection
- Changing list nesting level with the **Indent** and **Outdent** buttons
- Exiting a list or reducing its nesting by pressing Enter in an empty list item
- Distinct color for visited links

### New API

#### New events

- [`toggle-list`](api/events/toggle-list.md) — Fires when toggling a list on the selected blocks

### Fixes

- Incorrect horizontal alignment of list markers
- Inconsistent padding between numbered and bulleted lists
- Clear formatting does not clear block-level properties
- Incorrect styling of headings and blockquotes inside list items
- Stray input element visible inside horizontal lines
- Editor freezes when inserting a horizontal line in the middle or at the end of a list

## Version 2.0.5

Released on March 6, 2026

Expand Down
Loading