From cff1bce6cd5443eb4c96e64ae2b3beb21cbeab44 Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 28 May 2026 20:24:23 +0300 Subject: [PATCH 1/3] [add] docs for toggle-list event and v2.0.6 notes - new toggle-list event page describing wrap/unwrap/convert/mixed modes - toggle-list added to events overview table - toolbar bulleted-list/numbered-list descriptions updated to reflect toggle behavior - v2.0.6 section in What's new with new functionality, new event and fixes --- docs/api/config/toolbar.md | 4 +- docs/api/events/toggle-list.md | 56 ++++++++++++++++++++++++++++ docs/api/overview/events_overview.md | 1 + docs/news/whats_new.md | 27 +++++++++++++- 4 files changed, 85 insertions(+), 3 deletions(-) create mode 100644 docs/api/events/toggle-list.md diff --git a/docs/api/config/toolbar.md b/docs/api/config/toolbar.md index 79e2fe3..3485546 100644 --- a/docs/api/config/toolbar.md +++ b/docs/api/config/toolbar.md @@ -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 a bulleted list for the selected blocks (wrap/unwrap/convert). | +| `numbered-list` | Toggles a numbered list for the selected blocks (wrap/unwrap/convert). | | `link` | Inserts a hyperlink. | | `image` | Inserts an image. | | `line` | Inserts a horizontal line. | diff --git a/docs/api/events/toggle-list.md b/docs/api/events/toggle-list.md new file mode 100644 index 0000000..9fb23a8 --- /dev/null +++ b/docs/api/events/toggle-list.md @@ -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 toggling a list on the selected blocks + +The **toggle-list** event powers the context-aware bulleted/numbered list buttons. Instead of inserting a new list, еру 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 a parent list is 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 diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md index 957e228..534ad01 100644 --- a/docs/api/overview/events_overview.md +++ b/docs/api/overview/events_overview.md @@ -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) | diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md index 27dc4f3..987a54c 100644 --- a/docs/news/whats_new.md +++ b/docs/news/whats_new.md @@ -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 From e4eed88c295535e7be3456f1b973da1eefc9d0dd Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 28 May 2026 20:25:38 +0300 Subject: [PATCH 2/3] [fix] correct toggle-list event description MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - replaced stray Cyrillic "еру" with "the" - use inline code formatting for "toggle-list" instead of bold --- docs/api/events/toggle-list.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/events/toggle-list.md b/docs/api/events/toggle-list.md index 9fb23a8..648f8f5 100644 --- a/docs/api/events/toggle-list.md +++ b/docs/api/events/toggle-list.md @@ -10,7 +10,7 @@ description: You can learn about the toggle-list event in the documentation of t @short: Fires when toggling a list on the selected blocks -The **toggle-list** event powers the context-aware bulleted/numbered list buttons. Instead of inserting a new list, еру event inspects the current selection and picks one of four behaviors automatically: +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 | | ----------- | --------------------------------------------------------------- | ------------------------------------------------------------------- | From 795f66be063134e99e5be62edfe598b5048dc5bb Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Thu, 28 May 2026 22:55:35 +0300 Subject: [PATCH 3/3] [fix] address review comments in list docs - toolbar: simplify bulleted/numbered-list descriptions, drop internal wrap/unwrap/convert terms - toggle-list: fix @short subject (the user toggles), restore "at least one of the lists" wording for Convert mode --- docs/api/config/toolbar.md | 4 ++-- docs/api/events/toggle-list.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/api/config/toolbar.md b/docs/api/config/toolbar.md index 3485546..1a48461 100644 --- a/docs/api/config/toolbar.md +++ b/docs/api/config/toolbar.md @@ -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` | Toggles a bulleted list for the selected blocks (wrap/unwrap/convert). | -| `numbered-list` | Toggles a numbered list for the selected blocks (wrap/unwrap/convert). | +| `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. | diff --git a/docs/api/events/toggle-list.md b/docs/api/events/toggle-list.md index 648f8f5..cc21788 100644 --- a/docs/api/events/toggle-list.md +++ b/docs/api/events/toggle-list.md @@ -8,7 +8,7 @@ description: You can learn about the toggle-list event in the documentation of t ### Description -@short: Fires when toggling a list on the selected blocks +@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: @@ -16,7 +16,7 @@ The `toggle-list` event powers the context-aware bulleted/numbered list buttons. | ----------- | --------------------------------------------------------------- | ------------------------------------------------------------------- | | **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 a parent list is the other type | The list flips its type (bulleted ↔ numbered) in place | +| **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