diff --git a/docs/api/config/default-styles.md b/docs/api/config/default-styles.md
new file mode 100644
index 0000000..314dfe7
--- /dev/null
+++ b/docs/api/config/default-styles.md
@@ -0,0 +1,144 @@
+---
+sidebar_label: defaultStyles
+title: defaultStyles Config
+description: You can learn about the defaultStyles config 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.
+---
+
+# defaultStyles
+
+### Description
+
+@short: Optional. Specifies default style values for specific block types
+
+### Usage
+
+~~~jsx {}
+defaultStyles?: {
+ "*"?: { // affects all blocks, allowing you to set common properties for all of these blocks
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ p?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ blockquote?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h1?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h2?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h3?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h4?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h5?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h6?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ }
+};
+~~~
+
+:::important
+The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately:
+
+```jsx title="index.js"
+new richtext.Richtext("#root", {
+ defaultStyles: {
+ h2: {
+ "font-family": "Roboto",
+ "font-size": "28px",
+ color: "purple",
+ background: "#FFC0CB"
+ }
+ }
+});
+```
+
+```css title="index.css"
+
+```
+
+In this example, all `h2` blocks are assigned to the `"Roboto"` font-family with a font-size of 28px with both the foreground and the background colors changed as well. Css styles assigned to `h2` blocks as well.
+:::
+
+### Default config
+
+~~~jsx
+const defaultStyles = {
+ "*": { "font-family": "Arial" },
+ p: { "font-size": "14px" },
+ blockquote: { "font-size": "14px" },
+ h1: { "font-size": "32px" },
+ h2: { "font-size": "24px" },
+ h3: { "font-size": "18px" },
+ h4: { "font-size": "16px" },
+ h5: { "font-size": "14px" },
+ h6: { "font-size": "12px" }
+};
+~~~
+
+### Example
+
+~~~jsx {3-13}
+// initialize RichText
+new richtext.Richtext("#root", {
+ defaultStyles: {
+ h4: {
+ "font-family": "Roboto"
+ },
+ h5: {
+ "font-family": "Roboto"
+ },
+ h6: {
+ "font-family": "Roboto"
+ }
+ },
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was updated in v2.0
+
+**Related articles:** [Configuration](guides/configuration.md)
+
+**Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s)
diff --git a/docs/api/config/fullscreen-mode.md b/docs/api/config/fullscreen-mode.md
new file mode 100644
index 0000000..f00a837
--- /dev/null
+++ b/docs/api/config/fullscreen-mode.md
@@ -0,0 +1,39 @@
+---
+sidebar_label: fullscreenMode
+title: fullscreenMode Config
+description: You can learn about the fullscreenMode config 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.
+---
+
+# fullscreenMode
+
+### Description
+
+@short: Optional. Enables the RichText fullscreen mode
+
+### Usage
+
+~~~jsx {}
+fullscreenMode?: boolean;
+~~~
+
+### Default config
+
+~~~jsx
+fullscreenMode: false;
+~~~
+
+### Example
+
+~~~jsx {3}
+// initialize RichText
+new richtext.Richtext("#root", {
+ fullscreenMode: true
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was added in v2.0
+
+**Related articles:** [Configuration](guides/configuration.md)
+
+**Related sample:** [RichText. Full toolbar](https://snippet.dhtmlx.com/ziynafp7)
diff --git a/docs/api/config/image-upload-url.md b/docs/api/config/image-upload-url.md
new file mode 100644
index 0000000..b58b734
--- /dev/null
+++ b/docs/api/config/image-upload-url.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: imageUploadUrl
+title: imageUploadUrl Config
+description: You can learn about the imageUploadUrl config 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.
+---
+
+# imageUploadUrl
+
+### Description
+
+@short: Optional. Specifies the URL which will be used for image upload
+
+### Usage
+
+~~~jsx {}
+imageUploadUrl?: string;
+~~~
+
+### Example
+
+~~~jsx {3}
+// initialize RichText
+new richtext.Richtext("#root", {
+ imageUploadUrl: "some URL"
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was added in v2.0
+
+**Related articles:** [Configuration](guides/configuration.md)
+
+**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy)
diff --git a/docs/api/config/layout-mode.md b/docs/api/config/layout-mode.md
new file mode 100644
index 0000000..50e6e51
--- /dev/null
+++ b/docs/api/config/layout-mode.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: layoutMode
+title: layoutMode Config
+description: You can learn about the layoutMode config 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.
+---
+
+# layoutMode
+
+### Description
+
+@short: Optional. Specifies the layout mode for the main editor area
+
+### Usage
+
+~~~jsx {}
+layoutMode: "classic" | "document";
+~~~
+
+The `"classic"` mode represents the edit area that fits the entire page. The `"document"` mode closely represent the real document sizes (sizes used: A4, A5, A6, A7).
+
+### Default config
+
+~~~jsx
+layoutMode: "classic";
+~~~
+
+### Example
+
+~~~jsx {3}
+// initialize RichText
+new richtext.Richtext("#root", {
+ layoutMode: "document" // initializes RichText with "document" mode by default
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was added in v2.0 instead of the removed `mode` property
+
+**Related articles:** [Configuration](guides/configuration.md)
+
+**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy)
diff --git a/docs/api/config/locale.md b/docs/api/config/locale.md
new file mode 100644
index 0000000..b3fb296
--- /dev/null
+++ b/docs/api/config/locale.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: locale
+title: locale Config
+description: You can learn about the locale config 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.
+---
+
+# locale
+
+### Description
+
+@short: Optional. An object that includes localization labels of RichText
+
+:::info
+The **locale** object needs to include all labels of RichText with the corresponding translations.
+:::
+
+### Usage
+
+~~~jsx {}
+locale?: object;
+~~~
+
+### Default config
+
+By default, RichText uses the **English** locale. You can set it to the custom locale as well.
+
+:::tip
+To change the current locale dynamically, you can use the [**setLocale()**](api/methods/set-locale.md) method of RichText
+:::
+
+### Example
+
+~~~jsx {3}
+// initialize RichText
+const editor = new richtext.RichText("#root", {
+ locale: richtext.locales.cn // the Chineese locale will be set initially
+ // locale: richtext.locales.en // the English locale will be set initially
+ // locale: richtext.locales.de // the Germany locale will be set initially
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was added in v2.0
+
+**Related articles:** [Localization](guides/localization.md)
+
+**Related sample:** [RichText. Localization](https://snippet.dhtmlx.com/zxjrin3i)
diff --git a/docs/api/config/menubar.md b/docs/api/config/menubar.md
new file mode 100644
index 0000000..90318b4
--- /dev/null
+++ b/docs/api/config/menubar.md
@@ -0,0 +1,33 @@
+---
+sidebar_label: menubar
+title: menubar Config
+description: You can learn about the menubar config 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.
+---
+
+# menubar
+
+### Description
+
+@short: Optional. Enables the top menubar of RichText
+
+### Usage
+
+~~~jsx {}
+menubar?: boolean;
+~~~
+
+### Example
+
+~~~jsx {3}
+// initialize RichText
+new richtext.Richtext("#root", {
+ menubar: true
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was added in v2.0
+
+**Related articles:** [Configuration](guides/configuration.md)
+
+**Related sample:** [RichText. Initialization with menubar](https://snippet.dhtmlx.com/tjryzka7)
diff --git a/docs/api/config/toolbar.md b/docs/api/config/toolbar.md
new file mode 100644
index 0000000..1016e54
--- /dev/null
+++ b/docs/api/config/toolbar.md
@@ -0,0 +1,219 @@
+---
+sidebar_label: toolbar
+title: toolbar Config
+description: You can learn about the toolbar config 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.
+---
+
+# toolbar
+
+### Description
+
+@short: Optional. Enables toolbar and allows users to specify/configure buttons displayed within toolbar
+
+### Usage
+
+~~~jsx {}
+toolbar?: boolean | Array any }>;
+~~~
+
+#### Available buttons within Toolbar
+
+You can specify the following buttons in the RichText toolbar:
+
+| Button | Description |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo` | Reverts the most recent user action. |
+| `redo` | Reapplies the previously undone action. |
+| `style` | Allows selection of text styles (e.g., headings, paragraph, etc.). |
+| `font-family` | Changes the font of the selected text. |
+| `font-size` | Adjusts the size of the selected text. |
+| `bold` | Applies bold formatting to the selected text. |
+| `italic` | Applies italic formatting to the selected text. |
+| `underline` | Underlines the selected text. |
+| `strike` | Applies strikethrough formatting. |
+| `subscript` | Formats the text as subscript. |
+| `superscript` | Formats the text as superscript. |
+| `text-color` | Changes the text color. |
+| `background-color` | Changes the background (highlight) color of the text. |
+| `align` | Sets text alignment (left, center, right, justified). |
+| `indent` | Increases text block indentation. |
+| `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. |
+| `link` | Inserts a hyperlink. |
+| `image` | Inserts an image. |
+| `line` | Inserts a horizontal line. |
+| `clear` | Removes all formatting from the selected text. |
+| `print` | Opens the print dialog. |
+| `fullscreen` | Toggles fullscreen mode. |
+| `mode` | switches between [layout modes](api/config/layout-mode.md) (classic/document)|
+| `shortcuts` | Displays a list of available keyboard shortcuts. |
+| `separator` | Adds a visual separator between toolbar groups. |
+
+You can use these strings to configure toolbar buttons as follows:
+
+~~~jsx {2-7}
+new richtext.Richtext("#root", {
+ toolbar: [
+ "bold",
+ "italic",
+ "separator",
+ // other buttons
+ ],
+ // other configuration properties
+});
+~~~
+
+#### Custom buttons within Toolbar
+
+You can specify custom buttons as objects with the following parameters:
+
+- `type` - (required) specifies a custom control type. The following types are available: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` - (optional) a custom control ID (cannot overlap with existing control ID)
+- `label` - (optional) a button label (combines with icon)
+- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from "label")
+- `css` - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
+- `handler` - (optional) a callback function that executes when the button is clicked
+
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+ toolbar: [
+ // buttons (strings represent buttons only)
+ "bold",
+ "italic",
+ // predefined buttons (user cannot define any other options for these (no labels, tooltips, options, etc.), so only ({ type: "button", id: string })
+ {
+ type: "button",
+ id: "fullscreen",
+ },
+ // user must specify the correct type if they want to use a predefined control (e.g. richselect/colorpicker)
+ // non-matching types will be ignored (not added to the toolbar)
+ {
+ type: "richselect", // type: "button" - incorrect, will be ignored
+ id: "mode",
+ },
+ // custom buttons (supported options are below)
+ // user can only define custom buttons (no richselect/colorpicker support atm)
+ {
+ type: "button",
+ id: "some",
+ label: "Some",
+ handler: () => {/* custom logic */}
+ },
+ {
+ type: "button",
+ id: "other",
+ icon: "wxo-help",
+ label: "Other",
+ tooltip: "Some tooltip",
+ handler: () => {/* custom logic */}
+ }
+ ],
+ // other configuration properties
+});
+~~~
+
+#### Hide Toolbar
+
+If you need to hide toolbar, set the `toolbar` property to `false` as follows:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+ toolbar: false
+ // other configuration properties
+});
+~~~
+
+### Default config
+
+~~~jsx
+const defaultToolbarButtons = {
+ "undo",
+ "redo",
+ "separator",
+ "style",
+ "separator",
+ "font-family",
+ "font-size",
+ "separator",
+ "bold",
+ "italic",
+ "underline",
+ "strike",
+ "separator",
+ "text-color",
+ "background-color",
+ "separator",
+ "align",
+ "line-height",
+ "outdent",
+ "indent",
+ "separator",
+ "bulleted-list",
+ "numbered-list",
+ "quote",
+ "separator",
+ "link",
+ "image",
+ "separator",
+ "clear",
+ "separator",
+ "fullscreen",
+ "mode"
+};
+~~~
+
+:::tip
+Default toolbar controls are exported by the RichText widget and can be accessed via `richtext.defaultToolbarButtons`.
+
+```jsx{4}
+// initialize RichText
+new richtext.Richtext("#root", {
+ toolbar: [
+ ...richtext.defaultToolbarButtons,
+ {
+ type: "button",
+ id: "btn1", // button id (cannot overlap with existing button ids if you want to apply custom logic)
+ icon: "wxo-help", // button icon (combines with label)
+ css: "rounded", // css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
+ label: "Custom button", // button label (combines with icon)
+ tooltip: "Some tooltip", // tooltip displayed on hover (if not specified, uses the value from "label")
+ }
+ ]
+ // other configuration properties
+});
+```
+:::
+
+### Example
+
+~~~jsx {3-18}
+// initialize RichText
+new richtext.Richtext("#root", {
+ toolbar: [
+ "bold",
+ "italic",
+ "separator",
+ // custom buttons (all supported options are used below)
+ // user can only define custom buttons (no richselect/colorpicker support at the moment)
+ {
+ type: "button",
+ id: "btn1", // button id (cannot overlap with existing button ids if you want to apply custom logic)
+ icon: "wxo-help", // button icon (combines with label)
+ css: "rounded", // css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
+ label: "Custom button", // button label (combines with icon)
+ tooltip: "Some tooltip", // tooltip displayed on hover (if not specified, uses the value from "label")
+ handler: () => ..., // custom logic attached to this button
+ }
+ ]
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was added in v2.0
+
+**Related articles:** [Configuration](guides/configuration.md)
+
+**Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih)
diff --git a/docs/api/config/value.md b/docs/api/config/value.md
new file mode 100644
index 0000000..f7005d5
--- /dev/null
+++ b/docs/api/config/value.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: value
+title: value Config
+description: You can learn about the value config 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.
+---
+
+# value
+
+### Description
+
+@short: Optional. Specifies the initial value (content) displayed within the editor area of RichText
+
+:::tip
+If you want to set the value (content) using custom format, use the built-in [`setValue()`](api/methods/set-value.md) method.
+:::
+
+### Usage
+
+~~~jsx {}
+value?: string;
+~~~
+
+### Example
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+ value: "
some value
" // sets the default value (HTML format)
+ // other configuration properties
+});
+~~~
+
+**Change log:** The property was added in v2.0
+
+**Related articles:** [Configuration](guides/configuration.md)
+
+**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/t55alxiy)
diff --git a/docs/api/editor_api_methods.md b/docs/api/editor_api_methods.md
deleted file mode 100644
index b47c286..0000000
--- a/docs/api/editor_api_methods.md
+++ /dev/null
@@ -1,426 +0,0 @@
----
-sidebar_label: Editor API methods
-title: Editor API methods
-description: Become acquainted with DHTMLX Rich Text Editor API parameters, types, and their detailed descriptions.
----
-
-## `add`
-
-Adds a new text into the editor
-
-`void add(string|object config, [object selection] );`
-
-| Parameter | Type | Description |
-| ----------- | --------------- | --------------------------------------|
-| `config` | `string,object` | a string with a text or a text block as an object. Check the details |
-| `selection` | `object` | optional, text selection (its position relative to all other text). Check the details |
-
-
-```js
-// adding simple text
-richtext.getEditorAPI().add("text");
-// or
-richtext.getEditorAPI().add({type:"text",data:"text"});
-
-// adding a text node with style into the predefined position
-richtext.getEditorAPI().add({
- type: "textnode",
- data: {
- text: "Hello world",
- style: {
- bold: true
- }
- }
-}, {
- left: {
- blockIndex: 0,
- textIndex: 0,
- offset: 0
- },
- range: false
-});
-
-// adding a data model
-richtext.getEditorAPI().add({type:"full",data:[
- {
- "style": {
- "style": "h1"
- },
- "textNodes": [
- {
- "style": {},
- "text": "Hello "
- },
- {
- "style": {
- "italic": true
- },
- "text": "world"
- },
- {
- "style": {},
- "text": "!"
- }
- ]
- }
-]});
-```
-
-**Related samples:** [RichText. Add](https://snippet.dhtmlx.com/6dmccf0l)
-
-#### Details
-
-Check the detailed description of parameters:
-
-
-
-
-
Parameter
-
Type
-
Description
-
-
-
-
-
config
-
string|object
-
a string with a text or a text block as an object.If set as an object, the parameter includes:
type - (string) the type of a text block: "text" (a string) | "textnode" (a text node) | "full" (a data model);
data - (string|object|array) the content of a text block. It can be:
a simple string with text;
a text node as an object that includes:
a text as a string;
an object with style properties.
a data model as an array. It contains objects with styles and text nodes. Each text node includes:
an array with text nodes objects (each of them contains two key:value values for a text string and an object with style settings, as described above)
a style object
-
-
-
selection
-
object
-
optional, text selection (its position relative to all other text). Includes the following attributes:
range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
left - (object) the left coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the first character within a text node in the selection.
right - (object) the right coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.
-
-
-
-
-___
-
-## `getModel`
-
-Returns the data model of the entered text in the JSON format
-
-`array getModel();`
-
-**Returns:**
-
-| Type | Description |
-| ------- | ---------------------------------- |
-| `array` | the data model of the entered text |
-
-
-```js
-var model = richtext.getEditorAPI().getModel();
-```
-
-**Related samples:** [RichText. Get Model](https://snippet.dhtmlx.com/ef6uolvq)
-
-#### Details:
-
-The returned value is an array of the following type:
-
-```js
-[
- {
- "style": {
- "style": "h1"
- },
- "textNodes": [
- {
- "style": {},
- "text": "Hello "
- },
- {
- "style": {
- "italic": true
- },
- "text": "world"
- },
- {
- "style": {},
- "text": "!"
- }
- ]
- }
-]
-```
-
-It contains objects with styles and text nodes. Each text node includes:
-
-- an array with text nodes objects (each of them contains two key:value pairs for a text string and an object with style settings)
-- a style object
-___
-
-## `getPosition`
-
-Returns the position of text selection relative to the browser window
-
-`object getPosition();`
-
-**Returns:**
-
-| Type | Description |
-| -------- | ------------------------------------------------------------- |
-| `object` | the position of text selection relative to the browser window |
-
-```js
-var position = richtext.getEditorAPI().getPosition();
-```
-
-**Related samples:** [RichText. Get Position](https://snippet.dhtmlx.com/nv42vsjg)
-
-#### Details
-
-The returned value is an object of the following type:
-
-~~~js
-{
- "xStart": 402.5,
- "yStart": 172,
- "xEnd": 461.5,
- "yEnd": 172
-}
-~~~
-
-where:
-
-- `xStart` - the X coordinate of the selection start
-- `yStart` - the Y coordinate of the selection start
-- `xEnd` - the X coordinate of the selection end
-- `yEnd` - the Y coordinate of the selection end
-___
-
-## `getSelection`
-
-Returns the position of text selection relative to all other text
-
-`object getSelection();`
-
-**Returns:**
-
-| Type | Description |
-| -------- | --------------------------------------------------------- |
-| `object` | the position of text selection relative to all other text |
-
-
-```js
-var selection = richtext.getEditorAPI().getSelection();
-```
-
-**Related samples:** [RichText. Get Selection](https://snippet.dhtmlx.com/se4p4vin)
-
-#### Details
-
-The returned value is an object of the following type:
-
-~~~js
-{
- "left": {
- "blockIndex": 0,
- "textIndex": 0,
- "offset": 8
- },
- "right": {
- "blockIndex": 0,
- "textIndex": 0,
- "offset": 12
- },
- "range": true
-}
-~~~
-
-where:
-
-
-
-
range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
left - (object) the left coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the first character within a text node in the selection.
right - (object) the right coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.
-
-
-
-___
-
-## `remove`
-
-Removes a selected text
-
-`void remove( [object selection] );`
-
-| Parameter | Type | Description |
-| ----------- | -------- | ------------------------------------------------------------------------------------- |
-| `selection` | `object` | optional, text selection (its position relative to all other text). Check the details |
-
-
-```js
-var api = richtext.getEditorAPI();
-
-richtext.getEditorAPI().remove(api.getSelection());
-```
-
-**Related samples:** [RichText. Remove](https://snippet.dhtmlx.com/0vzuwyk1)
-
-#### Details
-
-Check the detailed description of the parameter:
-
-
-
-
-
selection
-
object
-
optional, text selection (its position relative to all other text). Includes the following attributes:
range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
left - (object) the left coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the first character within a text node in the selection.
right - (object) the right coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.
-
-
-
-
-___
-
-## `setModel`
-
-Sets a structured text with styles (a data model as JSON) for the editor
-
-`void setModel(array structure, [object selection] );`
-
-| Parameter | Type | Description |
-| ----------- | -------- | ------------------------------------------------------------------------------------- |
-| `structure` | `array` | an array of objects with styles and text nodes. Check the details |
-| `selection` | `object` | optional, text selection (its position relative to all other text). Check the details |
-
-
-```js
-richtext.getEditorAPI().setModel([
- {
- "style": {
- "style": "h1"
- },
- "textNodes": [
- {
- "style": {},
- "text": "Hello "
- },
- {
- "style": {
- "italic": true
- },
- "text": "world"
- },
- {
- "style": {},
- "text": "!"
- }
- ]
- }
-]);
-```
-
-**Related samples:** [RichText. Set Model](https://snippet.dhtmlx.com/37ffpg6t)
-
-#### Details
-
-Check the detailed description of parameters:
-
-
-
-
-
structure
-
array
-
an array of objects with styles and text nodes. Each text node includes:
an array with text nodes objects (each of them contains two key:value pairs for a text string and an object with style settings)
a style object
-
-
-
selection
-
object
-
optional, text selection (its position relative to all other text). Includes the following attributes:
range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
left - (object) the left coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the first character within a text node in the selection.
right - (object) the right coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.
-
-
-
-
-___
-
-## `setSelection`
-
-Applies selection to the specified text position
-
-`void setSelection(object selection);`
-
-| Parameter | Type | Description |
-| ----------- | -------- | --------------------------------------------------------- |
-| `selection` | `object` | the position of text selection relative to all other text |
-
-
-~~~js
-richtext.getEditorAPI().setSelection({
- "left": {
- "blockIndex": 0,
- "textIndex": 0,
- "offset": 0
- },
- "right": {
- "blockIndex": 0,
- "textIndex": 0,
- "offset": 9
- },
- "range": true
-});
-~~~
-
-**Related samples:** [RichText. Set Selection](https://snippet.dhtmlx.com/2uvls0y9)
-
-#### Details
-
-Check the detailed description of the parameter:
-
-
-
-
-
selection
-
object
-
the position of text selection relative to all other text. Includes the following attributes:
range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
left - (object) the left coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the first character within a text node in the selection.
right - (object) the right coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.
-
-
-
-
-___
-
-## `update`
-
-Modifies the entered text
-
-`void update(object config, [object selection] );`
-
-| Parameter | Type | Description |
-| ----------- | -------- | ------------------------------------------------------------------------------------- |
-| `config` | `object` | an object with details of updating. Check the details |
-| `selection` | `object` | optional, text selection (its position relative to all other text). Check the details |
-
-
-```js
-var api = richtext.getEditorAPI();
-
-richtext.getEditorAPI().update(
- {
- modifier: "color",
- value: "#BB2B1A"
- },
- api.getSelection()
-);
-```
-
-**Related samples:** [RichText. Update](https://snippet.dhtmlx.com/6kf43fmz)
-
-#### Details:
-
-Check the detailed description of parameters:
-
-
-
-
-
config
-
object
-
an object with details of updating. It contains two parameters:
modifier - (object) an object with a set of styling options that will be updated;
value - (any) the value of the modifier.
-
-
-
selection
-
object
-
optional, text selection (its position relative to all other text). Includes the following attributes:
range - (boolean) defines whether the selection includes one character (false), or a range of them (true).
left - (object) the left coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the first character within a text node in the selection.
right - (object) the right coordinate of selection, contains the following properties:
blockIndex - (number) the index of a text block (a text line), enumeration starts from 0;
textIndex - (number) the index of a text node (a text with common styling), enumeration starts from 0;
offset - (number) the number of the last character within a text node in the selection. You can also call the getSelection method instead of passing the second parameter.
-
-
-
diff --git a/docs/api/events.md b/docs/api/events.md
deleted file mode 100644
index 5150541..0000000
--- a/docs/api/events.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-sidebar_label: Events
-title: Events
-description: Examine the list of events triggered by user actions that can take place in DHTMLX Rich Text Editor.
----
-
-:::info
-Check **Related samples** [RichText Events](https://snippet.dhtmlx.com/sb5qipjz)
-:::
-
-## `Action`
-
-Fires on any action in the editor
-
-`void Action(string action, [any data, boolean restoreFocus]){ ... };`
-
-| Parameter | Type | Description |
-| -------------- | --------- | -------------------------------------------------- |
-| `action` | `string` | the name of an action |
-| `data` | `any` | optional, the edited data |
-| `restoreFocus` | `boolean` | optional, defines whether focus should be restored |
-
-
-```js
-richtext.events.on("Action", function(action){
- console.log("The " + action + " action is implemented");
-});
-```
-
-#### Details
-The list of possible actions is given below:
-
-- **add** - add a character
-- **remove** - remove a character
-- **update** - update styles of text
-- **undo** - revert the last action
-- **redo** - re-apply the last reverted action
-- **copy** - copy text
-- **paste** - paste text
-- **cut** - cut text
-- **clear** - clear the editor
-- **parse** - parse text
-- **selectAll** - select all text
-___
-
-## `Change`
-
-Fires on any change in the editor
-
-`void Change(string action, boolean canUndo, boolean canRedo){ ... };`
-
-| Parameter | Type | Description |
-| --------- | --------- | -------------------------------------------- |
-| `action` | `string` | the name of an action |
-| `canUndo` | `boolean` | defines whether the change can be reverted |
-| `canRedo` | `boolean` | defines whether the change can be re-applied |
-
-
-```js
-richtext.events.on("Change", function(action){
- console.log("The data have been changed by the following action: "+ action);;
-});
-```
-
-#### Details
-
-The list of possible actions is given below:
-
-- **add** - add a character
-- **remove** - remove a character
-- **update** - update styles of text
-- **undo** - revert the last action
-- **redo** - re-apply the last reverted action
-- **copy** - copy text
-- **paste** - paste text
-- **cut** - cut text
-- **clear** - clear the editor
-- **parse** - parse text
-- **selectAll** - select all text
-___
-
-## `selectionChange`
-
-Fires on change of text selection made by a user
-
-`void selectionChange(object state){ ... };`
-
-| Parameter | Type | Description |
-| --------- | -------- | ---------------------- |
-| `state` | `object` | the state of selection |
-
-
-```js
-richtext.events.on("selectionChange", function(state){
- console.log("The current selection state is ", state);
-});
-```
-
-#### Details
-
-The `state` object represents a hash of the following *key:value* properties:
-
-- `range` - (*boolean*) defines whether the selection includes one character (*false*), or a range of them (*true*)
-- `left` - (*object*) the left coordinate of selection, contains the following properties:
- - `blockIndex` - (*number*) the index of a text block (a text line), enumeration starts from 0
- - `textIndex` - (*number*) the index of a text node (a text with common styling), enumeration starts from 0
- - `offset` - (*number*) the number of the first character within a text node in the selection
-- `right` - (*object*) the right coordinate of selection, contains the following properties:
- - `blockIndex` - (*number*) the index of a text block (a text line), enumeration starts from 0
- - `textIndex` - (*number*) the index of a text node (a text with common styling), enumeration starts from 0
- - `offset` - (*number*) the number of the last character within a text node in the selection
-
-For example:
-
-```js
-richtext.events.on("selectionChange", function({
- "left":{"blockIndex":0,"textIndex":1,"offset":0},
- "right":{"blockIndex":0,"textIndex":1,"offset":5},
- "range":true}){
- // your code here
-});
-```
-
-___
-
-## `selectionRefresh`
-
-Fires on automatic change of selection
-
-`void selectionRefresh(){ ... };`
-
-```js
-richtext.events.on("selectionRefresh", function(){
- console.log("Selection is refreshed");
-});
-```
-
-
diff --git a/docs/api/events/align.md b/docs/api/events/align.md
new file mode 100644
index 0000000..c46be2f
--- /dev/null
+++ b/docs/api/events/align.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: align
+title: align Event
+description: You can learn about the align 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.
+---
+
+# align
+
+### Description
+
+@short: Fires when text alignment is changed via the menubar/toolbar or Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"align": ({
+ align: "left" | "center" | "right" | "justify"
+}) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **align** event can take an object with the following parameter:
+
+- `align` - a text alignment. You can specify one of the following values: `"left" | "center" | "right" | "justify"`
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-12}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "align" event
+editor.api.on("align", (obj) => {
+ console.log(`Align to: ${obj.align}`);
+});
+// align the text to the left
+editor.api.exec("align", {
+ align: "left"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/clear-text-format.md b/docs/api/events/clear-text-format.md
new file mode 100644
index 0000000..feda55d
--- /dev/null
+++ b/docs/api/events/clear-text-format.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: clear-text-format
+title: clear-text-format Event
+description: You can learn about the clear-text-format 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.
+---
+
+# clear-text-format
+
+### Description
+
+@short: Fires when a text format is cleared via the menubar/toolbar or Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"clear-text-format": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "clear-text-format" event
+editor.api.on("clear-text-format", () => {
+ console.log("Text format was cleared");
+});
+// clear text format
+editor.api.exec("clear-text-format", {});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/copy.md b/docs/api/events/copy.md
new file mode 100644
index 0000000..5d74562
--- /dev/null
+++ b/docs/api/events/copy.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: copy
+title: copy Event
+description: You can learn about the copy 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.
+---
+
+# copy
+
+### Description
+
+@short: Fires when copying selected text
+
+### Usage
+
+~~~jsx {}
+"copy": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "copy" event
+editor.api.on("copy", () => {
+ console.log("Selected text was copied");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/create-new.md b/docs/api/events/create-new.md
new file mode 100644
index 0000000..eb4676b
--- /dev/null
+++ b/docs/api/events/create-new.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: create-new
+title: create-new Event
+description: You can learn about the create-new 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.
+---
+
+# create-new
+
+### Description
+
+@short: Fires when pressing the "New" option within the menubar or via Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"create-new": ({ reset?: boolean }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **create-new** event can take an object with the following parameter:
+
+- `reset` - resets the history when creating a new file
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "create-new" event
+editor.api.on("create-new", ({ reset }) => {
+ console.log(`Document has been cleared. History has ${reset ? "" : "not"} been reset.`);
+});
+// create new file and reset the history
+editor.api.exec("create-new", { reset: true });
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/cut.md b/docs/api/events/cut.md
new file mode 100644
index 0000000..54a44d3
--- /dev/null
+++ b/docs/api/events/cut.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: cut
+title: cut Event
+description: You can learn about the cut 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.
+---
+
+# cut
+
+### Description
+
+@short: Fires when cutting selected text
+
+### Usage
+
+~~~jsx {}
+"cut": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "cut" event
+editor.api.on("cut", () => {
+ console.log("Selected text was cut");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/delete-link.md b/docs/api/events/delete-link.md
new file mode 100644
index 0000000..9b4abb6
--- /dev/null
+++ b/docs/api/events/delete-link.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: delete-link
+title: delete-link Event
+description: You can learn about the delete-link 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.
+---
+
+# delete-link
+
+### Description
+
+@short: Fires when deleting a link
+
+### Usage
+
+~~~jsx {}
+"delete-link": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "delete-link" event
+editor.api.on("delete-link", () => {
+ console.log("The link was deleted");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/export.md b/docs/api/events/export.md
new file mode 100644
index 0000000..0691bd5
--- /dev/null
+++ b/docs/api/events/export.md
@@ -0,0 +1,59 @@
+---
+sidebar_label: export
+title: export Event
+description: You can learn about the export 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.
+---
+
+# export
+
+### Description
+
+@short: Fires after pressing the "Export" option in the menubar or via Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"export": ({ options: IExportOptions; result?: any }) => boolean | void;
+
+interface IExportOptions {
+ format?: "docx" | "pdf";
+ url?: string;
+ download?: boolean;
+ fileName?: string;
+}
+~~~
+
+### Parameters
+
+The callback of **export** event can take an object with the following parameters:
+
+- `format` - a file format
+- `url` - a base URL for file export
+- `download` - allows a user to specify if he wants to download the file after receiving the response back from the server. If the property is set to "false", the file will not download, but the user will instead be able to get blob data from the event object (see the `result` prop in the event definition)
+- `fileName` - a file name to be exported
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-15}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "export" event
+editor.api.on("export", (obj) => {
+ console.log(obj);
+ console.log("The file was exported");
+});
+// export value as pdf file
+editor.api.exec("export", {
+ format: "pdf",
+ download: false,
+ fileName: "some file"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/import.md b/docs/api/events/import.md
new file mode 100644
index 0000000..d3dd7e2
--- /dev/null
+++ b/docs/api/events/import.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: import
+title: import Event
+description: You can learn about the import 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.
+---
+
+# import
+
+### Description
+
+@short: Fires after pressing the "Import" option in the menubar or via Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"import": ({ html?: string }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of **import** event can take an object with the following parameter:
+
+- `html` - a text value in the html format
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "import" event
+editor.api.on("import", (obj) => {
+ console.log(obj.html);
+ console.log("The new value was imported");
+});
+// import new value
+editor.api.exec("import", {
+ html: "
some value
" // simply calls setValue
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/indent.md b/docs/api/events/indent.md
new file mode 100644
index 0000000..4d400de
--- /dev/null
+++ b/docs/api/events/indent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: indent
+title: indent Event
+description: You can learn about the indent 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.
+---
+
+# indent
+
+### Description
+
+@short: Fires when increasing block indention
+
+### Usage
+
+~~~jsx {}
+"indent": ({ step: number }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **indent** event can take an object with the following parameters:
+
+- `step` - the step by which indentation was increased
+
+:::info
+For handling inner events you can 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 "indent" event
+editor.api.on("indent", (obj) => {
+ console.log(obj);
+ console.log("The indention was increased");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md
new file mode 100644
index 0000000..7898511
--- /dev/null
+++ b/docs/api/events/insert-image.md
@@ -0,0 +1,50 @@
+---
+sidebar_label: insert-image
+title: insert-image Event
+description: You can learn about the insert-image 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.
+---
+
+# insert-image
+
+### Description
+
+@short: Fires when inserting image
+
+### Usage
+
+~~~jsx {}
+"insert-image": (IImageContext) => boolean | void;
+
+interface IImageContext {
+ id: TID;
+ value: string;
+ width: number;
+ height: number;
+ // extra props from uploader ctx, not required for the actual action
+ name?: string;
+ file?: File;
+ status?: string;
+ selected: (ctx: IImageContext) => void;
+ uploaded: (ctx: IImageContext) => void;
+}
+~~~
+
+:::info
+For handling inner events you can 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 "insert-image" event
+editor.api.on("insert-image", (obj) => {
+ console.log(obj);
+ console.log("The image was inserted");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/insert-line.md b/docs/api/events/insert-line.md
new file mode 100644
index 0000000..ee1a518
--- /dev/null
+++ b/docs/api/events/insert-line.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: insert-line
+title: insert-line Event
+description: You can learn about the insert-line 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.
+---
+
+# insert-line
+
+### Description
+
+@short: Fires when inserting horizontal line
+
+### Usage
+
+~~~jsx {}
+"insert-line": () => boolean | void;
+~~~
+
+:::info
+For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "insert-line" event
+editor.api.on("insert-line", () => {
+ console.log("The horizontal line was inserted");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/insert-link.md b/docs/api/events/insert-link.md
new file mode 100644
index 0000000..1db8b8d
--- /dev/null
+++ b/docs/api/events/insert-link.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: insert-link
+title: insert-link Event
+description: You can learn about the insert-link 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.
+---
+
+# insert-link
+
+### Description
+
+@short: Fires when inserting link
+
+### Usage
+
+~~~jsx {}
+"insert-link": ({ url: string }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **update-link** event can take an object with the following parameter:
+
+- `url` - the url to be inserted
+
+:::info
+For handling inner events you can 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 "insert-link" event
+editor.api.on("insert-link", (obj) => {
+ console.log(obj)
+ console.log("The following link was inserted: " + obj.url);
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/insert-list.md b/docs/api/events/insert-list.md
new file mode 100644
index 0000000..3be5f19
--- /dev/null
+++ b/docs/api/events/insert-list.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: insert-list
+title: insert-list Event
+description: You can learn about the insert-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.
+---
+
+# insert-list
+
+### Description
+
+@short: Fires when inserting list
+
+### Usage
+
+~~~jsx {}
+"insert-list": ({ type: TListType }) => boolean | void;
+
+type TListType = "bulleted" | "numbered";
+~~~
+
+### Parameters
+
+The callback of the **insert-list** event can take an object with the following parameter:
+
+- `type` - the type of the inserted list. You can specify the following values:
+ - `"bulleted"` - bulleted list
+ - `"numbered"` - numbered list
+
+:::info
+For handling inner events you can 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 "insert-list" event
+editor.api.on("insert-list", (obj) => {
+ console.log(obj.type);
+ console.log("The list was inserted");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/outdent.md b/docs/api/events/outdent.md
new file mode 100644
index 0000000..94f6245
--- /dev/null
+++ b/docs/api/events/outdent.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: outdent
+title: outdent Event
+description: You can learn about the outdent 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.
+---
+
+# outdent
+
+### Description
+
+@short: Fires when decreasing block indention
+
+### Usage
+
+~~~jsx {}
+"outdent": ({ step: number }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **outdent** event can take an object with the following parameters:
+
+- `step` - the step by which indentation was decreased
+
+:::info
+For handling inner events you can 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 "outdent" event
+editor.api.on("outdent", (obj) => {
+ console.log(obj);
+ console.log("The indention was decreased");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/paste.md b/docs/api/events/paste.md
new file mode 100644
index 0000000..fcd7ca9
--- /dev/null
+++ b/docs/api/events/paste.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: paste
+title: paste Event
+description: You can learn about the paste 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.
+---
+
+# paste
+
+### Description
+
+@short: Fires when pasting content
+
+### Usage
+
+~~~jsx {}
+"paste": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "paste" event
+editor.api.on("paste", () => {
+ console.log("Content was pasted");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/print.md b/docs/api/events/print.md
new file mode 100644
index 0000000..21a9247
--- /dev/null
+++ b/docs/api/events/print.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: print
+title: print Event
+description: You can learn about the print 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.
+---
+
+# print
+
+### Description
+
+@short: Fires when printing document
+
+### Usage
+
+~~~jsx {}
+"print": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+// configuration properties
+});
+// subscribe to the "print" event
+editor.api.on("print", () => {
+ console.log("The document is printing");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/redo.md b/docs/api/events/redo.md
new file mode 100644
index 0000000..06ff24b
--- /dev/null
+++ b/docs/api/events/redo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: redo
+title: redo Event
+description: You can learn about the redo 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.
+---
+
+# redo
+
+### Description
+
+@short: Fires when pressing the "Redo" button in the menubar/toolbar or via Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"redo": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "redo" event
+editor.api.on("redo", () => {
+ console.log("Redo operation was performed");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/resize-image.md b/docs/api/events/resize-image.md
new file mode 100644
index 0000000..9db126e
--- /dev/null
+++ b/docs/api/events/resize-image.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: resize-image
+title: resize-image Event
+description: You can learn about the resize-image 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.
+---
+
+# resize-image
+
+### Description
+
+@short: Fires when resizing image
+
+### Usage
+
+~~~jsx {}
+"resize-image": ({ id: number, width: number, height: number }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **resize-image** event can take an object with the following parameters:
+
+- `id` - the image ID
+- `width` - the image width
+- `height` - the image height
+
+:::info
+For handling inner events you can 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 "resize-image" event
+editor.api.on("resize-image", (obj) => {
+ console.log(obj);
+ console.log("The image was resized")
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/set-font-family.md b/docs/api/events/set-font-family.md
new file mode 100644
index 0000000..9626bd7
--- /dev/null
+++ b/docs/api/events/set-font-family.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-family
+title: set-font-family Event
+description: You can learn about the set-font-family 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.
+---
+
+# set-font-family
+
+### Description
+
+@short: Fires when setting a font family
+
+### Usage
+
+~~~jsx {}
+"set-font-family": ({ fontFamily: string }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **set-font-family** event can take an object with the following parameter:
+
+- `fontFamily` - a font family to be applied. The following fonts are available: `"Roboto" | "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"`
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "set-font-family" event
+editor.api.on("set-font-family", (obj) => {
+ console.log(obj.fontFamily);
+ console.log("The font family was changed");
+});
+// apply new font family
+editor.api.exec("set-font-family", {
+ fontFamily: "Roboto"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/set-font-size.md b/docs/api/events/set-font-size.md
new file mode 100644
index 0000000..3c68fa6
--- /dev/null
+++ b/docs/api/events/set-font-size.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-font-size
+title: set-font-size Event
+description: You can learn about the set-font-size 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.
+---
+
+# set-font-size
+
+### Description
+
+@short: Fires when setting a font size
+
+### Usage
+
+~~~jsx {}
+"set-font-size": ({ fontSize: string }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **set-font-size** event can take an object with the following parameter:
+
+- `fontSize` - a font size to be applied
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "set-font-size" event
+editor.api.on("set-font-size", (obj) => {
+ console.log(obj.fontSize);
+ console.log("The font size was changed");
+});
+// apply new font size
+editor.api.exec("set-font-size", {
+ fontSize: "11px"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/set-line-height.md b/docs/api/events/set-line-height.md
new file mode 100644
index 0000000..0dc8832
--- /dev/null
+++ b/docs/api/events/set-line-height.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: set-line-height
+title: set-line-height Event
+description: You can learn about the set-line-height 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.
+---
+
+# set-line-height
+
+### Description
+
+@short: Fires when setting a line height
+
+### Usage
+
+~~~jsx {}
+"set-line-height": ({ lineHeight: string }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **set-line-height** event can take an object with the following parameter:
+
+- `lineHeight` - a line height
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "set-line-height" event
+editor.api.on("set-line-height", (obj) => {
+ console.log(obj);
+ console.log("The line height was changed");
+});
+// apply a new line height
+editor.api.exec("set-line-height", {
+ lineHeight: "15px"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/set-text-color.md b/docs/api/events/set-text-color.md
new file mode 100644
index 0000000..b846db2
--- /dev/null
+++ b/docs/api/events/set-text-color.md
@@ -0,0 +1,54 @@
+---
+sidebar_label: set-text-color
+title: set-text-color Event
+description: You can learn about the set-text-color 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.
+---
+
+# set-text-color
+
+### Description
+
+@short: Fires when setting a text color and/or a background text color
+
+### Usage
+
+~~~jsx {}
+"set-text-color": (ITextColor) => boolean | void;
+
+interface ITextColor {
+ color?: string;
+ background?: string;
+}
+~~~
+
+### Parameters
+
+The callback of the **set-text-color** event can take an object with the following parameters:
+
+- `color` - a text color
+- `background` - a text background color
+
+:::info
+For handling the inner events you can use the [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-14}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "set-text-color" event
+editor.api.on("set-text-color", (obj) => {
+ console.log(obj);
+ console.log("The text color and/or background text color were changed");
+});
+// apply text color and background
+editor.api.exec("set-text-color", {
+ color: "red",
+ background: "blue"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/set-text-format.md b/docs/api/events/set-text-format.md
new file mode 100644
index 0000000..f3c2cd2
--- /dev/null
+++ b/docs/api/events/set-text-format.md
@@ -0,0 +1,58 @@
+---
+sidebar_label: set-text-format
+title: set-text-format Event
+description: You can learn about the set-text-format 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.
+---
+
+# set-text-format
+
+### Description
+
+@short: Fires when setting a text format
+
+### Usage
+
+~~~jsx {}
+"set-text-format": (ITextFormat) => boolean | void;
+
+interface ITextFormat {
+ bold?: boolean;
+ italic?: boolean;
+ strike?: boolean;
+ underline?: boolean;
+}
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Parameters
+
+The callback of the **set-text-format** event can take an object with the following parameters:
+
+- `bold` - a bold text format
+- `italic` - an italic text format
+- `strike` - a strike text format
+- `underline` - an underline text format
+
+### Example
+
+~~~jsx {5-14}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "set-text-format" event
+editor.api.on("set-text-format", (obj) => {
+ console.log(obj);
+ console.log("The text format was changed");
+});
+// apply the "italic" and bold text format
+editor.api.exec("set-text-format", {
+ italic: true,
+ bold: true
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/set-text-style.md b/docs/api/events/set-text-style.md
new file mode 100644
index 0000000..102eb5b
--- /dev/null
+++ b/docs/api/events/set-text-style.md
@@ -0,0 +1,49 @@
+---
+sidebar_label: set-text-style
+title: set-text-style Event
+description: You can learn about the set-text-style 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.
+---
+
+# set-text-style
+
+### Description
+
+@short: Fires when setting a text style
+
+### Usage
+
+~~~jsx {}
+"set-text-style": ({ tag: TBlockType }) => boolean | void;
+
+type TBlockType = "p" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+~~~
+
+### Parameters
+
+The callback of the **set-text-style** event can take an object with the following parameters:
+
+- `tag` - a text style
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "set-text-style" event
+editor.api.on("set-text-style", (obj) => {
+ console.log(obj.tag);
+ console.log("The text style was changed");
+});
+// apply new text style
+editor.api.exec("set-text-style", {
+ tag: "blockquote"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/show-popup.md b/docs/api/events/show-popup.md
new file mode 100644
index 0000000..3ecf004
--- /dev/null
+++ b/docs/api/events/show-popup.md
@@ -0,0 +1,53 @@
+---
+sidebar_label: show-popup
+title: show-popup Event
+description: You can learn about the show-popup 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.
+---
+
+# show-popup
+
+### Description
+
+@short: Fires when a popup is shown/hidden
+
+### Usage
+
+~~~jsx {}
+"show-popup": (IPopupConfig) => boolean | void;
+
+interface IPopupConfig {
+ type: "link" | null;
+ image?: boolean;
+}
+~~~
+
+### Parameters
+
+The callback of the **show-popup** event can take an object with the following parameters:
+
+- `type` - a type of the popup
+- `image` - provides access to additional context (is the current cursor pointing at an image or not)
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-13}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "show-popup" event
+editor.api.on("show-popup", (obj) => {
+ console.log(obj);
+ console.log("The popup was shown/hidden");
+});
+// show-popup the text to the left
+editor.api.exec("show-popup", {
+ type: "link"
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/subscript.md b/docs/api/events/subscript.md
new file mode 100644
index 0000000..b268b3f
--- /dev/null
+++ b/docs/api/events/subscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: subscript
+title: subscript Event
+description: You can learn about the subscript 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.
+---
+
+# subscript
+
+### Description
+
+@short: Fires when pressing the "Subscript" button in the menubar/toolbar or via Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"subscript": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "subscript" event
+editor.api.on("subscript", () => {
+ console.log("Subscript was applied");
+});
+// trigger the "subscript" event
+editor.api.exec("subscript", {});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/superscript.md b/docs/api/events/superscript.md
new file mode 100644
index 0000000..ed283b4
--- /dev/null
+++ b/docs/api/events/superscript.md
@@ -0,0 +1,38 @@
+---
+sidebar_label: superscript
+title: superscript Event
+description: You can learn about the superscript 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.
+---
+
+# superscript
+
+### Description
+
+@short: Fires when pressing the "Superscript" button in the menubar/toolbar or via Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"superscript": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can 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 "superscript" event
+editor.api.on("superscript", () => {
+ console.log("Superscript was applied");
+});
+// trigger the "superscript" event
+editor.api.exec("superscript", {});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/toggle-fullscreen-mode.md b/docs/api/events/toggle-fullscreen-mode.md
new file mode 100644
index 0000000..ad49e57
--- /dev/null
+++ b/docs/api/events/toggle-fullscreen-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-fullscreen-mode
+title: toggle-fullscreen-mode Event
+description: You can learn about the toggle-fullscreen-mode 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-fullscreen-mode
+
+### Description
+
+@short: Fires when toggling the full screen mode
+
+### Usage
+
+~~~jsx {}
+"toggle-fullscreen-mode": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **toggle-fullscreen-mode** event can take an object with the following parameter:
+
+- `mode` - enables a fullscreen mode
+
+:::info
+For handling the inner events you can use the [**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-fullscreen-mode" event
+editor.api.on("toggle-fullscreen-mode", (obj) => {
+ console.log(obj);
+ console.log("The full screen mode was changed");
+});
+// enable the full screen mode
+editor.api.exec("toggle-fullscreen-mode", { mode: true });
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/toggle-layout-mode.md b/docs/api/events/toggle-layout-mode.md
new file mode 100644
index 0000000..e71b2df
--- /dev/null
+++ b/docs/api/events/toggle-layout-mode.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-layout-mode
+title: toggle-layout-mode Event
+description: You can learn about the toggle-layout-mode 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-layout-mode
+
+### Description
+
+@short: Fires when toggling the layout mode
+
+### Usage
+
+~~~jsx {}
+"toggle-layout-mode": ({ mode?: "classic" | "document" }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **toggle-layout-mode** event can take an object with the following parameters:
+
+- `mode` - the layout mode. The following modes are available: `"classic" | "document"`
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-11}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "toggle-layout-mode" event
+editor.api.on("toggle-layout-mode", (obj) => {
+ console.log(obj);
+ console.log("The layout mode was changed");
+});
+// set the "document" layout mode
+editor.api.exec("toggle-layout-mode", { mode: "document" });
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/toggle-shortcut-info.md b/docs/api/events/toggle-shortcut-info.md
new file mode 100644
index 0000000..4bc2ec6
--- /dev/null
+++ b/docs/api/events/toggle-shortcut-info.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: toggle-shortcut-info
+title: toggle-shortcut-info Event
+description: You can learn about the toggle-shortcut-info 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-shortcut-info
+
+### Description
+
+@short: Fires when toggling the shortcut info
+
+### Usage
+
+~~~jsx {}
+"toggle-shortcut-info": ({ mode?: boolean }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **toggle-shortcut-info** event can take an object with the following parameter:
+
+- `mode` - enables a shortcut info; `true` to show shortcut info popup, `false` to hide shortcut info popup
+
+:::info
+For handling inner events you can 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-shortcut-info" event
+editor.api.on("toggle-shortcut-info", (obj) => {
+ console.log(obj);
+ console.log("The shortcut info was shown");
+});
+// enable the shortcut info
+editor.api.exec("toggle-shortcut-info", { mode: true });
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/undo.md b/docs/api/events/undo.md
new file mode 100644
index 0000000..ea701da
--- /dev/null
+++ b/docs/api/events/undo.md
@@ -0,0 +1,36 @@
+---
+sidebar_label: undo
+title: undo Event
+description: You can learn about the undo 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.
+---
+
+# undo
+
+### Description
+
+@short: Fires when pressing the "Undo" button in the menubar/toolbar or via Event Bus methods
+
+### Usage
+
+~~~jsx {}
+"undo": () => boolean | void;
+~~~
+
+:::info
+For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "undo" event
+editor.api.on("undo", () => {
+ console.log("Undo operation was performed");
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events/update-link.md b/docs/api/events/update-link.md
new file mode 100644
index 0000000..01072fb
--- /dev/null
+++ b/docs/api/events/update-link.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: update-link
+title: update-link Event
+description: You can learn about the update-link 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.
+---
+
+# update-link
+
+### Description
+
+@short: Fires when updating link
+
+### Usage
+
+~~~jsx {}
+"update-link": ({ id: number, url: string }) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the **update-link** event can take an object with the following parameters:
+
+- `id` - the link ID
+- `url` - the modified url
+
+:::info
+For handling inner events you can 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 "update-link" event
+editor.api.on("update-link", (obj) => {
+ console.log(obj);
+ console.log("The following link was updated:" + obj.url);
+});
+~~~
+
+**Change log:** The event was added in v2.0
diff --git a/docs/api/events_bus.md b/docs/api/events_bus.md
deleted file mode 100644
index eb3994b..0000000
--- a/docs/api/events_bus.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-sidebar_label: Event Bus methods
-title: Event Bus methods
-description: Learn how to use event bus for handling various events in DHTMLX Rich Text Editor.
----
-
-
-## `detach`
-
-Detaches a handler from an event (which was attached before by the `on()` method)
-
-`void detach(string name, [any context] );`
-
-| Parameter | Type | Description |
-| --------- | -------- | --------------------------- |
-| `name` | `string` | the name of event to detach |
-| `context` | `any` | a context marker |
-
-```js
-richtext.events.on("Change", function(action, canUndo, canRedo){
- // your code here
-});
-
-richtext.events.detach("Change");
-```
-
-#### Details
-
-By default `detach()` removes all event handlers from the target event. You can detach particular event handlers by using the context marker.
-
-```js
-var marker = "any"; // you can use any string|object value
-
-richtext.events.on("Change", handler1);
-richtext.events.on("Change", handler2, marker);
-// the next command will delete only handler2
-richtext.events.detach("Change", marker);
-```
-___
-
-## `fire`
-
-Triggers an inner even
-
-`boolean fire(string name, array params);`
-
-| Parameter | Type | Description |
-| --------- | -------- | ---------------------------------- |
-| `name` | `string` | the event's name, case-insensitive |
-| `params` | `array` | an array of the event-related data |
-
-**Returns**
-
-| Type | Description |
-| --------- | ------------------------------------------------------------------------ |
-| `boolean` | *false*, if some of the event handlers return *false*. Otherwise, *true* |
-
-```js
-richtext.events.on("CustomEvent", function(param1, param2){
- return true;
-});
-
-var res = richtext.events.fire("CustomEvent", [12, "abc"]);
-```
-
-#### Details
-Normally, events are called automatically and you don't need to use this method.
-___
-
-## `on`
-
-Attaches a handler to an inner event of RichText
-
-`void on(string name, function handler, [any context]);`
-
-| Parameter | Type | Description |
-| --------- | --------- | ------------------------------------------------------------------ |
-| `name` | `string` | the event's name, case-insensitive |
-| `handler` | `handler` | the handler function |
-| `context` | `any` | the value will be accessible as "this" inside of the event handler |
-
-```js
-richtext.events.on("Change", function(action, canUndo, canRedo){
- // your code here
-});
-```
-
-#### Details
-
-[See the list of Richtext events](api/events.md).
-
-You can attach several handlers to the same event and all of them will be executed. If some of handlers return *false*, the related operations will be blocked. Event handlers are processed in the same order that they are attached.
\ No newline at end of file
diff --git a/docs/api/internal/detach.md b/docs/api/internal/detach.md
new file mode 100644
index 0000000..4992e37
--- /dev/null
+++ b/docs/api/internal/detach.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: api.detach()
+title: on Method
+description: You can learn about the on method 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.
+---
+
+# api.detach()
+
+### Description
+
+@short: Allows removing/detaching event handlers
+
+### Usage
+
+~~~jsx {}
+api.detach( tag: string ): void;
+~~~
+
+### Parameters
+
+- `tag` - (required) the name of the action tag
+
+### Events
+
+:::info
+The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
+:::
+
+### Example
+
+~~~jsx {6-8,10}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+
+editor.api.on("set-font-size", (obj) => {
+ console.log(obj.fontSize);
+}, { tag: "track" });
+
+editor.api.detach("track");
+~~~
+
+**Change log:** The method was updated in v2.0. The `name` and `context` parameters were removed
diff --git a/docs/api/internal/exec.md b/docs/api/internal/exec.md
new file mode 100644
index 0000000..ba0bcd0
--- /dev/null
+++ b/docs/api/internal/exec.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.exec()
+title: exec Method
+description: You can learn about the exec method 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.
+---
+
+# api.exec()
+
+### Description
+
+@short: Allows triggering inner events
+
+### Usage
+
+~~~jsx {}
+api.exec(
+ event: string,
+ config: object
+): void;
+~~~
+
+### Parameters
+
+- `event` - (required) an event to be fired
+- `config` - (required) the config object with parameters (see the event to be fired)
+
+### Events
+
+:::info
+The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// set the text font size
+editor.api.exec("set-font-size", {
+ fontSize: "16px"
+});
+~~~
+
+**Change log:** The method was added in v2.0
diff --git a/docs/api/internal/get-reactive-state.md b/docs/api/internal/get-reactive-state.md
new file mode 100644
index 0000000..3fc3830
--- /dev/null
+++ b/docs/api/internal/get-reactive-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getReactiveState()
+title: getReactiveState Method
+description: You can learn about the getReactiveState method 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.
+---
+
+# api.getReactiveState()
+
+### Description
+
+@short: Returns an object with the reactive properties of RichText
+
+### Usage
+
+~~~jsx {}
+api.getReactiveState(): object;
+~~~
+
+### Returns
+
+The method returns an object with the following parameters:
+
+~~~jsx {}
+{
+ cursorState: { subscribe: any },
+ defaultStyles {...},
+ document {...},
+ fullscreen {...},
+ history {...},
+ layoutMode {...},
+ popup {...},
+ selection {...}
+}
+~~~
+
+### Example
+
+~~~jsx {5-7}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// get the Reactive State of RichText
+const reactive_state = editor.api.getReactiveState();
+console.log(reactive_state)
+~~~
+
+**Change log:** The method was added in v2.0
diff --git a/docs/api/internal/get-state.md b/docs/api/internal/get-state.md
new file mode 100644
index 0000000..f666c91
--- /dev/null
+++ b/docs/api/internal/get-state.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.getState()
+title: getState Method
+description: You can learn about the getState method 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.
+---
+
+# api.getState()
+
+### Description
+
+@short: Returns an object with the StateStore properties of RichText
+
+### Usage
+
+~~~jsx {}
+api.getState(): object;
+~~~
+
+### Returns
+
+The method returns an object with the following parameters:
+
+~~~jsx {}
+{
+ cursorState: {},
+ defaultStyles: {},
+ document: {},
+ fullscreen: boolean,
+ history: []
+ layoutMode: string,
+ popup: any,
+ selection: {}
+}
+~~~
+
+### Example
+
+~~~jsx {5-7}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// get the State of RichText
+const state = editor.api.getState();
+console.log(state);
+~~~
+
+**Change log:** The method was added in v2.0
diff --git a/docs/api/internal/intercept.md b/docs/api/internal/intercept.md
new file mode 100644
index 0000000..4700950
--- /dev/null
+++ b/docs/api/internal/intercept.md
@@ -0,0 +1,48 @@
+---
+sidebar_label: api.intercept()
+title: intercept Method
+description: You can learn about the intercept method 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.
+---
+
+# api.intercept()
+
+### Description
+
+@short: Allows intercepting and preventing the inner events
+
+### Usage
+
+~~~jsx {}
+api.intercept(
+ event: string,
+ callback: function
+): void;
+~~~
+
+### Parameters
+
+- `event` - (required) an event to be fired
+- `callback` - (required) a callback to be performed (the callback arguments will depend on the event to be fired)
+
+### Events
+
+:::info
+The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-10}
+// create RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// forbid changing the font size
+editor.api.intercept("set-font-size", (obj) => {
+ if(obj.fontSize !== "36px" ){
+ return false;
+ }
+});
+~~~
+
+**Change log:** The method was added in v2.0
diff --git a/docs/api/internal/on.md b/docs/api/internal/on.md
new file mode 100644
index 0000000..165aaa2
--- /dev/null
+++ b/docs/api/internal/on.md
@@ -0,0 +1,46 @@
+---
+sidebar_label: api.on()
+title: on Method
+description: You can learn about the on method 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.
+---
+
+# api.on()
+
+### Description
+
+@short: Allows attaching a handler to the inner events
+
+### Usage
+
+~~~jsx {}
+api.on(
+ event: string,
+ handler: function
+): void;
+~~~
+
+### Parameters
+
+- `event` - (required) an event to be fired
+- `handler` - (required) a handler to be attached (the handler arguments will depend on the event to be fired)
+
+### Events
+
+:::info
+The full list of RichText internal events can be found [**here**](api/overview/events_overview.md)
+:::
+
+### Example
+
+~~~jsx {5-8}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+// subscribe to the "set-font-size" event
+editor.api.on("set-font-size", (obj) => {
+ console.log(obj.fontSize);
+});
+~~~
+
+**Change log:** The method was updated in v2.0. The `context` parameter were removed
diff --git a/docs/api/internal/set-next.md b/docs/api/internal/set-next.md
new file mode 100644
index 0000000..8a4d3f1
--- /dev/null
+++ b/docs/api/internal/set-next.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: api.setNext()
+title: setNext Method
+description: You can learn about the setNext method 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.
+---
+
+# api.setNext()
+
+### Description
+
+@short: Allows adding some action into the Event Bus order
+
+### Usage
+
+~~~jsx {}
+api.setNext(next: any): void;
+~~~
+
+### Parameters
+
+- `next` - (required) the action to be included into the **Event Bus** order
+
+### Example
+
+~~~jsx {10-11}
+const server = "https://some-backend-url";
+// Assume that you have a custom server service class named someServerService
+const someServerService = new ServerDataService(server);
+
+fetch(server + "/data").then((res) => res.json()).then((data) => {
+ const editor = new richtext.Richtext("#root", {
+ value: data
+ });
+
+ // Integrate someServerService into the Event Bus order of widget
+ editor.api.setNext(someServerService);
+});
+~~~
+
+**Change log:** The method was added in v2.0
diff --git a/docs/api/methods.md b/docs/api/methods.md
deleted file mode 100644
index ba3ea1e..0000000
--- a/docs/api/methods.md
+++ /dev/null
@@ -1,240 +0,0 @@
----
-sidebar_label: Methods
-title: Methods
-description: Explore the list of methods that can be utilized for performing various manipulations with the configuration of DHTMLX Rich Text Editor.
----
-
-
-## `destructor`
-
-Releases occupied resources
-
-`void destructor();`
-
-```js
-richtext.destructor();
-```
-___
-
-## `exitFullScreen`
-
-Exits the full screen mode
-
-`void exitFullScreen();`
-
-
-```js
-richtext.exitFullScreen();
-```
-___
-
-## `fullScreen`
-
-Enters the full screen mode
-
-`void fullScreen();`
-
-```js
-richtext.fullScreen();
-```
-___
-
-
-## `getEditorAPI`
-
-Returns an object with editor API methods
-
-`object getEditorAPI();`
-
-**Returns:**
-
-| Type | Description |
-| -------- | ---------------------------------------- |
-| `object` | an object with API methods of the editor |
-
-
-```js
-var EditorAPI = richtext.getEditorAPI();
-```
-
-#### Details
-The returned object contains a list of methods you can use to apply different operations to the editor. Check the list of editor API methods:
-
-- [add()](api/editor_api_methods.md#add)
-- [getModel()](api/editor_api_methods.md#getmodel)
-- [getPosition()](api/editor_api_methods.md#getposition)
-- [getSelection()](api/editor_api_methods.md#getselection)
-- [remove()](api/editor_api_methods.md#remove)
-- [setModel()](api/editor_api_methods.md#setmodel)
-- [setSelection()](api/editor_api_methods.md#setselection)
-- [update()](api/editor_api_methods.md#update)
-
-___
-
-## `getStats`
-
-Returns statistics about the entered content
-
-`object getStats();`
-
-**Returns:**
-
-| Type | Description |
-| -------- | ----------------------------------------------------------- |
-| `object` | an object with available statistical data about edited text |
-
-
-```js
-var chars = richtext.getStats();
-// -> {chars: 467, words: 80, charsExlSpace: 393}
-```
-
-**Related samples:** [Get Stats](https://snippet.dhtmlx.com/3qdbktwo)
-
-#### Details
-
-### Getting separate statistical data fields
-
-You can get each field of statistical data separately, as it's described below.
-
-**Characters**
-
-To return the count of characters typed into the editor, use the `chars` property of the `getStats()` method.
-
-```js
-var chars = richtext.getStats().chars;
-```
-
-**Words**
-
-To return the count of words typed into the editor, use the `words` property of the `getStats()` method.
-
-```js
-var words = richtext.getStats().words;
-```
-
-**Characters without spaces**
-
-To return the count of characters typed into the editor excluding the number of spaces, use the `charsExlSpace` property of the `getStats()` method.
-
-```js
-var chars = richtext.getStats().charsExlSpace;
-```
-
-### Getting custom statistics
-
-It is also possible to return a value of the custom statistical parameter set via the `customStats` configuration option, e.g. the number of sentences. For that, use the name of the custom property as a property of the `getStats()` method:
-
-```js
-var richtext = new dhx.Richtext("rich", {
- customStats: [
- {
- name: "chars"
- },
- {
- name: "words"
- },
- {
- name: "sentences",
- cb: function(text) {
- var rawSentences = text.split(/[.?!]+/);
- var count = 0;
- for (var i=0; i 0) {
- count += 1;
- }
- }
- return count;
- }
- }
- ],
- toolbarBlocks: ["default", "stats"]
-});
-
-// return the number of sentences typed into the editor
-var sentences = richtext.getStats().sentences;
-```
-
-___
-
-## `getValue`
-
-Returns the content of the RichText editor in the chosen format
-
-`string getValue( [string mode] );`
-
-
-| Parameter | Type | Description |
-| --------- | -------- | --------------------------------------------------------------------------- |
-| `mode` | `string` | the format of returned content:`"html"` (default), `"markdown"` or `"text"` |
-
-**Returns:**
-
-| Type | Description |
-| -------- | ---------------------------------- |
-| `string` | the content of the RichText editor |
-
-
-
-```js
-// getting content in the markdown format
-var content = richtext.getValue("markdown");
-```
-
-**Related samples:** [Get Value](https://snippet.dhtmlx.com/ujx3c71j)
-
-___
-
-## `paint`
-
-Repaints RichText
-
-`void paint();`
-
-```js
-richtext.paint();
-```
-___
-
-## `setValue`
-
-Adds content into the RichText editor
-
-`void setValue(string value,string mode);`
-
-| Parameter | Type | Description |
-| --------- | -------- | ----------------------------------------------------------------------------- |
-| `value` | `string` | the context you want to add into the editor in either HTML or Markdown format |
-| `mode` | `string` | optional, the format of text parsing: `"html"` or `"markdown"` |
-
-```js
-var htmlText = `
Meet DHTMLX Rich Text Editor!
` +
-`
This demo will show you a customizable JavaScript rich text editor.
.`
-
-// adding HTML content
-richtext.setValue(htmlText);
-```
-
-**Related samples:** [Setting HTML content](https://snippet.dhtmlx.com/57v7n2kp)
-
-#### Details
-
-An example of adding Markdown content is given below:
-
-```js
-var mdText = `# Meet DHTMLX Rich Text Editor!
-
-This demo will show you a customizable **JavaScript rich text editor**.
-
-*To learn more, read [documentation](https://docs.dhtmlx.com/richtext/)*.`
-
-richtext.setValue(mdText,"markdown");
-```
-
-**Related samples:** [Setting Markdown Value](https://snippet.dhtmlx.com/9jf91qn9)
-
-
-:::note
-Note, that for a text in the Markdown format you need to define paragraphs by empty lines.
-:::
diff --git a/docs/api/methods/destructor.md b/docs/api/methods/destructor.md
new file mode 100644
index 0000000..58973c0
--- /dev/null
+++ b/docs/api/methods/destructor.md
@@ -0,0 +1,28 @@
+---
+sidebar_label: destructor()
+title: destructor Method
+description: You can learn about the destructor method 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.
+---
+
+# destructor()
+
+### Description
+
+@short: Removes all HTML elements of RichText, and detaches all related events
+
+### Usage
+
+~~~jsx {}
+destructor(): void;
+~~~
+
+### Example
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+
+// remove RichText
+editor.destructor();
+~~~
diff --git a/docs/api/methods/get-value.md b/docs/api/methods/get-value.md
new file mode 100644
index 0000000..4ed50ae
--- /dev/null
+++ b/docs/api/methods/get-value.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: getValue()
+title: getValue Method
+description: You can learn about the getValue method 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.
+---
+
+# getValue()
+
+### Description
+
+@short: Returns the RichText value
+
+### Usage
+
+~~~jsx {}
+getValue(encoder?: any): string;
+~~~
+
+### Parameters
+
+- `encoder` - (optional) a parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text`
+
+You can get the required encoder in the following way:
+
+```jsx
+const toTextEncoder = richtext.text.toText; // text encoder
+const toHTMLEncoder = richtext.html.toHTML; // html encoder
+```
+
+### Example
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+ value: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos." // sets the default value (HTML format)
+ // other configuration properties
+});
+
+const toTextEncoder = richtext.text.toText;
+const editor_value = editor.getValue(toTextEncoder);
+console.log(editor_value);
+~~~
+
+**Change log:** The method was updated in v2.0. The `mode` parameter was removed. The `encoder` parameter was added
diff --git a/docs/api/methods/set-config.md b/docs/api/methods/set-config.md
new file mode 100644
index 0000000..d54fef0
--- /dev/null
+++ b/docs/api/methods/set-config.md
@@ -0,0 +1,40 @@
+---
+sidebar_label: setConfig()
+title: setConfig Method
+description: You can learn about the setConfig method 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.
+---
+
+# setConfig()
+
+### Description
+
+@short: Applies new configuration parameters to RichText
+
+### Usage
+
+~~~jsx {}
+setConfig(config: { [key:any]: any }): void;
+~~~
+
+### Parameters
+
+- `config` - (required) the object of RichText configuration parameters. See the full list of properties [here](api/overview/properties_overview.md)
+
+:::note
+The `setConfig()` method preserves all the previously set parameters that are not explicitly provided in the `setConfig()` method call.
+:::
+
+### Example
+
+~~~jsx {6-8}
+const editor = new richtext.Richtext("#root", {
+ value: "
Some text
",
+ // other configuration properties
+});
+
+editor.setConfig({
+ layoutMode: "document"
+});
+~~~
+
+**Change log:** The method was added in v2.0
diff --git a/docs/api/methods/set-locale.md b/docs/api/methods/set-locale.md
new file mode 100644
index 0000000..55610c6
--- /dev/null
+++ b/docs/api/methods/set-locale.md
@@ -0,0 +1,41 @@
+---
+sidebar_label: setLocale()
+title: setLocale Method
+description: You can learn about the setLocale method 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.
+---
+
+# setLocale()
+
+### Description
+
+@short: Applies a new locale to RichText
+
+### Usage
+
+~~~jsx {}
+setLocale(null | locale?: object): void;
+~~~
+
+### Parameters
+
+- `null` - (optional) resets to the default locale (*English*)
+- `locale` - (optional) the object of data of the new locale to be applied
+
+:::info
+Use the `setLocale()` method to apply a new locale to RichText. To reset RichText to the default locale, call the `setLocale()` method without arguments (or with a *null* value).
+:::
+
+### Example
+
+~~~jsx {5-6}
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+
+// apply the "de" locale to RichText
+editor.setLocale(de);
+~~~
+
+**Change log:** The method was added in v2.0
+
+**Related articles:** [Localization](guides/localization.md)
diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md
new file mode 100644
index 0000000..5d40f94
--- /dev/null
+++ b/docs/api/methods/set-value.md
@@ -0,0 +1,44 @@
+---
+sidebar_label: setValue()
+title: setValue Method
+description: You can learn about the setValue method 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.
+---
+
+# setValue()
+
+### Description
+
+@short: Applies a new value to RichText
+
+### Usage
+
+~~~jsx {}
+setValue: (value: string, encoder?: any): void;
+~~~
+
+### Parameters
+
+- `value` - (required) a value to be inserted into the RichText
+- `encoder` - (optional) a custom parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default) and `text`
+
+You can get the required encoder in the following way:
+
+```jsx
+const fromTextEncoder = richtext.text.fromText; // text encoder
+const fromHTMLEncoder = richtext.html.fromHTML; // html encoder
+```
+
+### Example
+
+~~~jsx {7-8}
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
+});
+
+const editor_value = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos."
+
+const fromTextEncoder = richtext.text.fromText;
+editor.setValue(editor_value, fromTextEncoder);
+~~~
+
+**Change log:** The method was updated in v2.0. The `mode` parameter was removed. The `encoder` parameter was added
diff --git a/docs/api/overview.md b/docs/api/overview.md
deleted file mode 100644
index 0e51fb0..0000000
--- a/docs/api/overview.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-sidebar_label: API overview
-title: API overview
-description: Become familiar with a range of objects, methods, and events available in the DHTMLX Rich Text Editor API for working with configuration and behavior.
----
-
-### Constructor
-
-~~~js
-var richtext = new dhx.Richtext("richtext_container", {
- mode:"document"
-});
-~~~
-
-**Parameters**:
-
-- an HTML container (or the ID of an HTML container)
-- an object with configuration properties (check below)
-
-### Methods
-
-| Name | Description |
-| ----------------------------------------------- | -------------------------------------------------- |
-| [destructor](api/methods.md#destructor) | releases occupied resources |
-| [exitFullScreen](api/methods.md#exitfullscreen) | exits the full screen mode |
-| [fullScreen](api/methods.md#fullscreen) | enters the full screen mode |
-| [getEditorAPI](api/methods.md#geteditorapi) | returns the full list of the editor API |
-| [getValue](api/methods.md#getvalue) | gets the content entered into the RichText editor |
-| [getStats](api/methods.md#getstats) | returns statistics on the entered content |
-| [paint](api/methods.md#paint) | repaints RichText |
-| [setValue](api/methods.md#setvalue) | sets the provided content into the RichText editor |
-
-### Event Bus methods
-
-| Name | Description |
-| ---------------------------------- | -------------------------------|
-| [detach](api/events_bus.md#detach) | detaches a handler from an event (which was attached before by the `on()` method) |
-| [fire](api/events_bus.md#fire) | triggers an inner event |
-| [on](api/events_bus.md#on) | attaches a handler to an inner event of Vault |
-
-### Events
-
-| Name | Description |
-| -------------------------------------------------- | ------------------------------------------------------ |
-| [Action](api/events.md#action) | fires on any action in the editor |
-| [Change](api/events.md#change) | fires on any change in the editor |
-| [selectionChange](api/events.md#selectionchange) | fires on change of selection by a user |
-| [selectionRefresh](api/events.md#selectionrefresh) | fires on automatic returning of cursor into the editor |
-
-### Properties
-
-| Name | Description |
-| ------------------------------------------------ | ---------------- |
-| [customStats](api/properties.md#customstats) | defines the logic of displaying custom statistics |
-| [mode](api/properties.md#mode) | the working mode of the RichText editor |
-| [toolbarBlocks](api/properties.md#toolbarblocks) | specifies blocks of buttons that will be shown in the Richtext toolbar |
-
-### Editor API methods
-
-```js
-var EditorAPI = richtext.getEditorAPI();
-```
-
-| Name | Description |
-| ------------------------------------------------------ | ------------------------------|
-| [add](api/editor_api_methods.md#add) | adds a new text into the editor |
-| [getModel](api/editor_api_methods.md#getmodel) | returns the data model of the entered text in the JSON format |
-| [getPosition](api/editor_api_methods.md#getposition) | returns the position of text selection relative to the browser window |
-| [getSelection](api/editor_api_methods.md#getselection) | returns the position of text selection relative to all other text |
-| [remove](api/editor_api_methods.md#remove) | removes a selected text |
-| [setModel](api/editor_api_methods.md#setmodel) | sets a structured text with styles (a data model as JSON) for the editor |
-| [setSelection](api/editor_api_methods.md#setselection) | applies selection to the specified text position |
-| [update](api/editor_api_methods.md#update) | modifies the entered text |
-
-### Toolbar methods
-
-| Name | Description |
-|-----------------------------------------|----------------------------------------------|
-| [add](api/toolbar_methods.md#add) | adds a new control to the toolbar |
-| [remove](api/toolbar_methods.md#remove) | removes a control from the toolbar |
-| [update](api/toolbar_methods.md#update) | updates configuration options of the control |
-
-### Toolbar controls
-
-Besides using the [default](guides/customization.md#default-controls) controls of the toolbar, you can customize the toolbar by adding the following controls:
-
-| Name | Description |
-|------------------------------------------------------|--------------------------------------------------------------|
-| [Button](api/toolbar_controls.md#button) | a simple button that can have an icon |
-| [Custom HTML](api/toolbar_controls.md#custom-html) | an item that contains any custom HTML content (for example, an image, icon or other element) |
-| [ImageButton](api/toolbar_controls.md#imagebutton) | a button with an image |
-| [SelectButton](api/toolbar_controls.md#selectbutton) | a button that contains a drop-down list of options |
-| [Separator](api/toolbar_controls.md#separator) | a horizontal (between menu options) or vertical (between toolbar controls) line separating items/groups of items from each other |
-| [Spacer](api/toolbar_controls.md#spacer) | the item takes space on the toolbar and is used for aligning controls |
\ No newline at end of file
diff --git a/docs/api/overview/event_bus_methods_overview.md b/docs/api/overview/event_bus_methods_overview.md
new file mode 100644
index 0000000..367bf7d
--- /dev/null
+++ b/docs/api/overview/event_bus_methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Event Bus methods
+title: Event Bus Methods
+description: You can have an Internal Event Bus methods overview of JavaScript RichText 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.
+---
+
+# Event Bus methods
+
+This page provides a list of methods related to the internal Event Bus used by the DHTMLX RichText editor.
+These methods are designed for advanced integrations and custom behavior based on the internal event system.
+
+| Name | Description |
+| ------------------------------------------------- | -------------------------------------------- |
+| [](../internal/detach.md) | @getshort(../internal/detach.md) |
+| [](../internal/exec.md) | @getshort(../internal/exec.md) |
+| [](../internal/intercept.md) | @getshort(../internal/intercept.md) |
+| [](../internal/on.md) | @getshort(../internal/on.md) |
+| [](../internal/set-next.md) | @getshort(../internal/set-next.md) |
diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md
new file mode 100644
index 0000000..12e92be
--- /dev/null
+++ b/docs/api/overview/events_overview.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: Events overview
+title: Events Overview
+description: You can have an Events overview of JavaScript RichText 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.
+---
+
+# Events overview
+
+This page lists all events emitted by the DHTMLX RichText editor.
+You can use these events to extend functionality, track user interaction, or trigger custom behavior.
+
+| Name | Description |
+| ------------------------------------------------------ | --------------------------------------------- |
+| [](../events/align.md) | @getshort(../events/align.md) |
+| [](../events/clear-text-format.md) | @getshort(../events/clear-text-format.md) |
+| [](../events/copy.md) | @getshort(../events/copy.md) |
+| [](../events/create-new.md) | @getshort(../events/create-new.md) |
+| [](../events/cut.md) | @getshort(../events/cut.md) |
+| [](../events/delete-link.md) | @getshort(../events/delete-link.md) |
+| [](../events/export.md) | @getshort(../events/export.md) |
+| [](../events/import.md) | @getshort(../events/import.md) |
+| [](../events/indent.md) | @getshort(../events/indent.md) |
+| [](../events/insert-image.md) | @getshort(../events/insert-image.md) |
+| [](../events/insert-line.md) | @getshort(../events/insert-line.md) |
+| [](../events/insert-link.md) | @getshort(../events/insert-link.md) |
+| [](../events/insert-list.md) | @getshort(../events/insert-list.md) |
+| [](../events/outdent.md) | @getshort(../events/outdent.md) |
+| [](../events/paste.md) | @getshort(../events/paste.md) |
+| [](../events/print.md) | @getshort(../events/print.md) |
+| [](../events/redo.md) | @getshort(../events/redo.md) |
+| [](../events/resize-image.md) | @getshort(../events/resize-image.md) |
+| [](../events/set-font-family.md) | @getshort(../events/set-font-family.md) |
+| [](../events/set-font-size.md) | @getshort(../events/set-font-size.md) |
+| [](../events/set-line-height.md) | @getshort(../events/set-line-height.md) |
+| [](../events/set-text-color.md) | @getshort(../events/set-text-color.md) |
+| [](../events/set-text-format.md) | @getshort(../events/set-text-format.md) |
+| [](../events/set-text-style.md) | @getshort(../events/set-text-style.md) |
+| [](../events/show-popup.md) | @getshort(../events/show-popup.md) |
+| [](../events/subscript.md) | @getshort(../events/subscript.md) |
+| [](../events/superscript.md) | @getshort(../events/superscript.md) |
+| [](../events/toggle-fullscreen-mode.md) | @getshort(../events/toggle-fullscreen-mode.md)|
+| [](../events/toggle-layout-mode.md) | @getshort(../events/toggle-layout-mode.md) |
+| [](../events/toggle-shortcut-info.md) | @getshort(../events/toggle-shortcut-info.md) |
+| [](../events/undo.md) | @getshort(../events/undo.md) |
+| [](../events/update-link.md) | @getshort(../events/update-link.md) |
diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md
new file mode 100644
index 0000000..e9e746f
--- /dev/null
+++ b/docs/api/overview/main_overview.md
@@ -0,0 +1,97 @@
+---
+sidebar_label: API overview
+title: API Overview
+description: You can have an API overview of JavaScript RichText 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.
+---
+
+# API overview
+
+## RichText constructor
+
+~~~js
+new richtext.RichText("#root", {
+ // configuration parameters
+});
+~~~
+
+**Parameters**:
+
+- an HTML container (e.g., CSS selector or DOM element)
+- a configuration object ([see properties](api/overview/properties_overview.md))
+
+## RichText methods
+
+| Name | Description |
+| ----------------------------------------------|-------------------------------------------|
+| [](../methods/get-value.md) | @getshort(../methods/get-value.md) |
+| [](../methods/set-value.md) | @getshort(../methods/set-value.md) |
+| [](../methods/set-config.md) | @getshort(../methods/set-config.md) |
+| [](../methods/set-locale.md) | @getshort(../methods/set-locale.md) |
+| [](../methods/destructor.md) | @getshort(../methods/destructor.md) |
+
+## Event Bus methods
+
+| Name | Description |
+| ----------------------------------------------|-------------------------------------------|
+| [](../internal/exec.md) | @getshort(../internal/exec.md) |
+| [](../internal/intercept.md) | @getshort(../internal/intercept.md) |
+| [](../internal/on.md) | @getshort(../internal/on.md) |
+| [](../internal/detach.md) | @getshort(../internal/detach.md) |
+| [](../internal/set-next.md) | @getshort(../internal/set-next.md) |
+
+## State methods
+
+| Name | Description |
+| ----------------------------------------------|-------------------------------------------|
+| [](../internal/get-state.md) | @getshort(../internal/get-state.md) |
+| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) |
+
+## Events
+
+| Name | Description |
+| ----------------------------------------------|-------------------------------------------|
+| [](../events/align.md) | @getshort(../events/align.md) |
+| [](../events/clear-text-format.md) | @getshort(../events/clear-text-format.md) |
+| [](../events/copy.md) | @getshort(../events/copy.md) |
+| [](../events/create-new.md) | @getshort(../events/create-new.md) |
+| [](../events/cut.md) | @getshort(../events/cut.md) |
+| [](../events/delete-link.md) | @getshort(../events/delete-link.md) |
+| [](../events/export.md) | @getshort(../events/export.md) |
+| [](../events/import.md) | @getshort(../events/import.md) |
+| [](../events/indent.md) | @getshort(../events/indent.md) |
+| [](../events/insert-image.md) | @getshort(../events/insert-image.md) |
+| [](../events/insert-line.md) | @getshort(../events/insert-line.md) |
+| [](../events/insert-link.md) | @getshort(../events/insert-link.md) |
+| [](../events/insert-list.md) | @getshort(../events/insert-list.md) |
+| [](../events/outdent.md) | @getshort(../events/outdent.md) |
+| [](../events/paste.md) | @getshort(../events/paste.md) |
+| [](../events/print.md) | @getshort(../events/print.md) |
+| [](../events/redo.md) | @getshort(../events/redo.md) |
+| [](../events/resize-image.md) | @getshort(../events/resize-image.md) |
+| [](../events/set-font-family.md) | @getshort(../events/set-font-family.md) |
+| [](../events/set-font-size.md) | @getshort(../events/set-font-size.md) |
+| [](../events/set-line-height.md) | @getshort(../events/set-line-height.md) |
+| [](../events/set-text-color.md) | @getshort(../events/set-text-color.md) |
+| [](../events/set-text-format.md) | @getshort(../events/set-text-format.md) |
+| [](../events/set-text-style.md) | @getshort(../events/set-text-style.md) |
+| [](../events/show-popup.md) | @getshort(../events/show-popup.md) |
+| [](../events/subscript.md) | @getshort(../events/subscript.md) |
+| [](../events/superscript.md) | @getshort(../events/superscript.md) |
+| [](../events/toggle-fullscreen-mode.md) | @getshort(../events/toggle-fullscreen-mode.md) |
+| [](../events/toggle-layout-mode.md) | @getshort(../events/toggle-layout-mode.md) |
+| [](../events/toggle-shortcut-info.md) | @getshort(../events/toggle-shortcut-info.md) |
+| [](../events/undo.md) | @getshort(../events/undo.md) |
+| [](../events/update-link.md) | @getshort(../events/update-link.md) |
+
+## Properties
+
+| Name | Description |
+| ----------------------------------------------|-------------------------------------------|
+| [](../config/default-styles.md) | @getshort(../config/default-styles.md) |
+| [](../config/fullscreen-mode.md) | @getshort(../config/fullscreen-mode.md) |
+| [](../config/image-upload-url.md) | @getshort(../config/image-upload-url.md) |
+| [](../config/layout-mode.md) | @getshort(../config/layout-mode.md) |
+| [](../config/locale.md) | @getshort(../config/locale.md) |
+| [](../config/menubar.md) | @getshort(../config/menubar.md) |
+| [](../config/toolbar.md) | @getshort(../config/toolbar.md) |
+| [](../config/value.md) | @getshort(../config/value.md) |
diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md
new file mode 100644
index 0000000..a1850f7
--- /dev/null
+++ b/docs/api/overview/methods_overview.md
@@ -0,0 +1,18 @@
+---
+sidebar_label: Methods overview
+title: Methods Overview
+description: You can have a Methods overview of JavaScript RichText 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.
+---
+
+# Methods overview
+
+This page provides a summary of the core methods available in the DHTMLX RichText editor.
+Use this reference to quickly navigate to detailed descriptions of each method, understand their purpose, and see usage examples.
+
+| Name | Description |
+| ------------------------------------------------------ | ----------------------------------------- |
+| [](../methods/destructor.md) | @getshort(../methods/destructor.md) |
+| [](../methods/get-value.md) | @getshort(../methods/get-value.md) |
+| [](../methods/set-value.md) | @getshort(../methods/set-value.md) |
+| [](../methods/set-config.md) | @getshort(../methods/set-config.md) |
+| [](../methods/set-locale.md) | @getshort(../methods/set-locale.md) |
diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md
new file mode 100644
index 0000000..1d89cf7
--- /dev/null
+++ b/docs/api/overview/properties_overview.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: Properties overview
+title: Properties Overview
+description: You can have a Properties overview of JavaScript RichText 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.
+---
+
+# Properties overview
+
+This page lists all configuration properties that can be used when initializing the DHTMLX RichText editor.
+They help you control layout, toolbar, value, localization, and other aspects of the editor.
+
+| Name | Description |
+| --------------------------------------------------------|----------------------------------------------|
+| [](../config/default-styles.md) | @getshort(../config/default-styles.md) |
+| [](../config/fullscreen-mode.md) | @getshort(../config/fullscreen-mode.md) |
+| [](../config/image-upload-url.md) | @getshort(../config/image-upload-url.md) |
+| [](../config/layout-mode.md) | @getshort(../config/layout-mode.md) |
+| [](../config/locale.md) | @getshort(../config/locale.md) |
+| [](../config/menubar.md) | @getshort(../config/menubar.md) |
+| [](../config/toolbar.md) | @getshort(../config/toolbar.md) |
+| [](../config/value.md) | @getshort(../config/value.md) |
diff --git a/docs/api/overview/state_methods_overview.md b/docs/api/overview/state_methods_overview.md
new file mode 100644
index 0000000..79ffabb
--- /dev/null
+++ b/docs/api/overview/state_methods_overview.md
@@ -0,0 +1,15 @@
+---
+sidebar_label: State methods
+title: State Methods
+description: You can have an Internal State methods overview of JavaScript RichText 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.
+---
+
+# State methods
+
+This page lists methods for accessing and working with the internal state of the DHTMLX RichText editor.
+These methods are useful for debugging, integrating with reactive systems, or implementing advanced custom logic.
+
+| Name | Description |
+| ----------------------------------------------------------- | ------------------------------------------------ |
+| [](../internal/get-reactive-state.md) | @getshort(../internal/get-reactive-state.md) |
+| [](../internal/get-state.md) | @getshort(../internal/get-state.md) |
diff --git a/docs/api/properties.md b/docs/api/properties.md
deleted file mode 100644
index 53ee1c9..0000000
--- a/docs/api/properties.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-sidebar_label: Properties
-title: Properties
-description: Get insight into configuration properties utilized for working with text statistics, setting editor mode, and customizing the toolbar in DHTMLX Rich Text Editor.
----
-
-## `customStats`
-
-Defines the logic of displaying custom statistics
-
-`customStats?: array;`
-
-~~~jsx
-var richtext = new dhx.Richtext("richtext_container", {
- customStats: [
- {
- name: "chars"
- },
- {
- name: "words"
- },
- {
- name: "sentences",
- cb: function(text) {
- var rawSentences = text.split(/[.?!]+/);
- var count = 0;
- for (var i=0; i 0) {
- count += 1;
- }
- }
- return count;
- }
- }
- ],
- toolbarBlocks: ["default", "stats"]
-});
-~~~
-
-**Related sample:** [Custom stats](https://snippet.dhtmlx.com/u1734epz)
-
-#### Details
-
-Each field of statistical data represents an object with two properties:
-
-- `name` - (*string*) the name of the field that should be displayed
-- `callback` - (*function*) a function that implements the logic of counting entries of the specified field
-
-____
-
-## `defaultStyles`
-
-Defines default values of the toolbar selection controls
-
-`defaultStyles?: object;`
-
-~~~jsx {2-5}
-var richtext = new dhx.Richtext("richtext_container", {
- defaultStyles: {
- "font-size": "14px"
- "font-family": "Tahoma"
- }
-});
-~~~
-
-**Default value**:
-
-~~~jsx
-var defaultStyles = {
- "font-family": "Roboto",
- "font-size": "14px",
- "color": "#4D4D4D",
- "background": "#FFFFFF",
- "bold": false,
- "italic": false,
- "strike": false,
- "underline": false,
- "align": "left", // "left" | "center" | "right" | false
-};
-~~~
-
-**Related sample:** [RichText. Default styles](https://snippet.dhtmlx.com/pqqq1e5d)
-____
-
-## `mode`
-
-The working mode of the RichText editor
-
-`mode?: string;`
-
-**Values**: "default", "document"
-
-~~~jsx
-var richtext = new dhx.RichText("richtext_container", {
- mode: "document"
-});
-~~~
-
-**Default value**: "default"
-
-**Related sample:** [RichText. Modes](https://snippet.dhtmlx.com/pdh5buvg)
-
-____
-
-## `toolbarBlocks`
-
-Specifies blocks of buttons that will be shown in the Richtext toolbar
-
-`toolbarBlocks?: array;`
-
-~~~jsx
-// default toolbar blocks
-var richtext = new dhx.RichText("richtext_container", {
- toolbarBlocks: ["undo", "style", "decoration", "colors", "align", "link"]
-});
-~~~
-
-**Default value**: `["undo", "style", "decoration", "colors", "align", "link"]`
-
-**Related sample:** [RichText. Initialization](https://snippet.dhtmlx.com/32jtemtm)
-
-#### Details
-
-### Full toolbar
-
-The full toolbar contains several more blocks: `"clear"`, `"fullscreen"`, and `"stats"`:
-
-~~~jsx
-var richtext = new dhx.RichText(document.body, {
- // full toolbar
- toolbarBlocks: [
- "undo", "style", "decoration", "colors", "align",
- "link", "clear", "stats", "fullscreen"
- ]
-});
-~~~
-
-**Related sample:** [RichText. Full Toolbar](https://snippet.dhtmlx.com/5yga5ce1)
-
-### Short toolbar definition
-
-The default set of buttons can be specified via the `"default"` definition in the `toolbarBlocks` array, like this:
-
-~~~jsx
-var richtext = new dhx.RichText(document.body, {
- // full toolbar
- toolbarBlocks: ["default", "clear", "stats", "fullscreen"]
-});
-~~~
-
-### Custom toolbar
-
-It is also possible to create a custom toolbar by setting desired blocks in the random order:
-
-~~~jsx
-var richtext = new dhx.RichText(document.body, {
- toolbarBlocks: ["clear", "colors", "align", "decoration",
- "undo", "fullscreen", "link"
- ]
-});
-~~~
-
-**Related sample:** [Toolbar Blocks](https://snippet.dhtmlx.com/yp7en22d)
diff --git a/docs/api/toolbar_controls.md b/docs/api/toolbar_controls.md
deleted file mode 100644
index fe965ec..0000000
--- a/docs/api/toolbar_controls.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-sidebar_label: Toolbar controls
-title: Toolbar controls
-description: Learn how to add custom toolbar controls and configure them to your requirements using the available API properties of DHTMLX Rich Text Editor.
----
-
-Besides using the [default](guides/customization.md#default-controls) controls of the toolbar, you can customize the toolbar by adding the following controls:
-
-## `Button`
-
-A simple button that can have an icon
-
-| Properties | Type | Description |
-| ------------ | --------- | -----------------------------------------|
-| `type` | `string` | the type of a button, set it to "button" |
-| `id` | `string` | the id of a button, auto-generated if not set |
-| `icon` | `string` | the name of an icon from the used icon font |
-| `hotkey` | `string` | the name of the hot key for a button |
-| `value` | `string` | the value of a button |
-| `tooltip` | `string` | the tooltip of a button |
-| `count` | `number` | the counter of a button |
-| `countColor` | `string` | the color of a badge with number: "danger","secondary","primary","success" |
-| `items` | `array` | an array of nested controls. You can find the full list of all available controls [here](https://docs.dhtmlx.com/suite/menu/configuring_menu_items/). If the type of a nested control is not specified, the *menuItem* type will be applied by default. |
-| `group` | `string` | defines the name of a group of controls a button belongs to. If one of the buttons in the group becomes active, all others automatically become inactive. |
-| `multiClick` | `boolean` | defines the behavior of the Undo/Redo buttons:
*true* - all the actions are reverted/re-applied one by one when the Undo/Redo button is clicked and held
*false* - one action is reverted/re-applied on each click of the Undo/Redo button
|
-| `view` | `string` | defines the look of a button: "flat","link" |
-| `color` | `string` | defines the color scheme of a button: "danger","secondary","primary","success" |
-| `size` | `string` | defines the size of a button: "small","medium" |
-| `circle` | `boolean` | makes the corners of a button round |
-| `loading` | `boolean` | adds a spinner into a button |
-| `hidden` | `boolean` | defines whether a button is hidden |
-| `disabled` | `boolean` | defines whether a button is disabled |
-
-
-```js
-richtext.toolbar.data.add({
- type: "button",
- id: "button-id",
- value: "Some value",
- icon: "icon-name"
-}, 2);
-```
-___
-
-## `Custom HTML`
-
-An item that contains any custom HTML content (for example, an image, icon or other element)
-
-| Properties | Type | Description |
-| ---------- | ----------------- | -------------------------------------------------------- |
-| `type` | `string` | the item type, set it to "customHTML" |
-| `id` | `string` | the id of a an item, auto-generated if not set |
-| `html` | `string` | a string with HTML that should be inserted into the item |
-| `css` | `string,string[]` | adds style classes |
-| `hidden` | `boolean` | defines whether an item is hidden |
-
-```js
-richtext.toolbar.data.add({
- type: "customHTML",
- id: "htmlbutton-id",
- value: "Some value",
- icon: "icon-name"
-}, 2);
-```
-___
-
-## `ImageButton`
-
-A button with an image
-
-| Properties | Type | Description |
-| ------------ | ----------------- | -------------------------------------------------------------------------- |
-| `type` | `string` | the type of an item, set it to "imageButton" |
-| `id` | `string` | the id of a control, auto-generated if not set |
-| `src` | `string` | the path to the image |
-| `css` | `string,string[]` | adds style classes to a button |
-| `hotkey` | `string` | the name of the hot key for the button |
-| `tooltip` | `string` | a tooltip for the button |
-| `count` | `number` | a badge with a number |
-| `countColor` | `string` | the color of a badge with number: "danger","secondary","primary","success" |
-| `hidden` | `boolean` | defines whether a button is hidden |
-| `disabled` | `boolean` | defines whether a button is disabled |
-
-
-```js
-richtext.toolbar.data.add({
- type: "imageButton",
- count: 10,
- src: "../img/avatar.png"
-}, 3);
-```
-
-___
-
-## `SelectButton`
-
-A button that contains a drop-down list of options
-
-| Properties | Type | Description |
-|--------------|-------------------|---------------------------|
-| `type` | `string` | the type of an item, set it to "selectButton" |
-| `id` | `string` | the id of a control, auto-generated if not set |
-| `value` | `string` | a value of the button |
-| `css` | `string,string[]` | adds style classes to a button |
-| `icon` | `string` | the name of an icon from the used icon font |
-| `items` | `array` | an array of nested controls. You can find the full list of all available controls [here](https://docs.dhtmlx.com/suite/menu/configuring_menu_items/). If the type of a nested control is not specified, the *menuItem* type will be applied by default. |
-| `tooltip` | `string` | a tooltip for the control |
-| `count` | `number` | a badge with a number |
-| `countColor` | `string` | the color of a badge with number: "danger","secondary","primary","success" |
-| `hidden` | `boolean` | defines whether a button is hidden |
-| `disabled` | `boolean` | defines whether a button is disabled |
-
-
-```js
-richtext.toolbar.data.add({
- id: "select_button",
- type: "selectButton",
- value: "1",
- items: [
- {
- value: "1",
- hotkey: "alt+1"
- },
- {
- value: "2",
- hotkey: "alt+2"
- },
- {
- value: "3",
- hotkey: "alt+3"
- }
- ]
-}, 3);
-```
-
-## `Separator`
-
-A horizontal (between menu options) or vertical (between toolbar controls) line separating items/groups of items from each other
-
-
-| Properties | Type | Description |
-| ---------- | -------- | ---------------------------------------------- |
-| `type` | `string` | the type of an item, set it to "separator" |
-| `id` | `string` | the id of a control, auto-generated if not set |
-
-```js
-richtext.toolbar.data.add({
- type:"separator"
-}, 4);
-```
-
-## `Spacer`
-
-The item takes space on the toolbar and is used for aligning controls
-
-
-| Properties | Type | Description |
-|------------|----------|------------------------------------------------|
-| `type` | `string` | the type of an item, set it to "spacer" |
-| `id` | `string` | the id of a control, auto-generated if not set |
-
-```js
-richtext.toolbar.data.add({
- type:"spacer"
-}, 4);
-```
\ No newline at end of file
diff --git a/docs/api/toolbar_methods.md b/docs/api/toolbar_methods.md
deleted file mode 100644
index f39f5a5..0000000
--- a/docs/api/toolbar_methods.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-sidebar_label: Toolbar methods
-title: Toolbar methods
-description: Check the list of API methods of DHTMLX Rich Text Editor enabling you to add and remove toolbar controls as well as update their configuration.
----
-
-
-## `add`
-
-Adds a new control to the toolbar
-
-`void add(object config, number index, string parent);`
-
-
-| Parameter | Type | Description |
-| --------- | -------- | ---------------------------------------------------- |
-| `config` | `object` | an object with the control config |
-| `index` | `number` | the index of the position to place the control into |
-| `parent` | `string` | the id of a parent control (for the *menuItem* type) |
-
-
-```js
-richtext.toolbar.data.add({
- type: "button",
- value: "Count Characters",
- id: "calc"
-}, 24);
-```
-
-**Related samples:** [Custom Button](https://snippet.dhtmlx.com/xlpa1tj7)
-
-___
-
-## `remove`
-
-Removes a control from the toolbar
-
-`void remove(string id);`
-
-| Parameter | Type | Description |
-| --------- | -------- | ----------------------------------------------- |
-| `id` | `string` | the id of the control |
-
-```js
-richtext.toolbar.data.remove("undo");
-```
-___
-
-## `update`
-
-Updates configuration options of the control
-
-`void update(string id, object new_config);`
-
-| Parameter | Type | Description |
-| --------- | -------- | ----------------------------------------------- |
-| `id` | `string` | the id of the control |
-| `config` | `object` | an object with new configuration of the control |
-
-
-
-```js
-var icons = [
- ["bold", "fas fa-bold"],
- ["underline", "fas fa-underline"],
- ["italic", "fas fa-italic"],
- ["strike", "fas fa-strikethrough"]
-];
-
-for (var i=0; i
-
-~~~
-
-
-## Initialization
-
-There are two possible scenarios of initializing RichText inside an Angular application. One consists in isolating RichText structure and data inside of the Angular component and another one suggests
-separating view and data parts with the possibility of interaction between them.
-
-### Scenario 1. Isolating RichText in an Angular component
-
-In this variant RichText configuration and data are held inside of the Angular component with no bonds with the external part of the application.
-
-#### RichText initialization
-
-- Create a `RichText.ts` file, where you will define a Component. Each component must have a template assigned, for RichText it will be a plain DIV tag with a named reference.
-
-~~~js title="RichText.ts"
-@Component({
- template: ``
-})
-~~~
-
-- Use the `new Richtext` constructor to initialize RichText inside of the container that you've set above:
-
-~~~js title="RichText.ts"
-export class RichtextComponent implements OnInit, OnDestroy {
- @ViewChild('widget') container: ElementRef;
- richtext: Richtext;
-
- ngOnInit() {
- this.richtext = new Richtext(this.container.nativeElement, {
- toolbarBlocks: ['default', 'clear', 'fullscreen']
- });
- }
-}
-~~~
-
-#### Changing config
-
-- Next you can do some actions, e.g. add a new control into the toolbar:
-
-~~~js title="RichText.ts"
-export class RichtextComponent implements OnInit, OnDestroy {
- @ViewChild('widget') container: ElementRef;
- richtext: Richtext;
-
- ngOnInit() {
- this.richtext = new Richtext(this.container.nativeElement, {
- toolbarBlocks: ['default', 'clear', 'fullscreen']
- });
-
- this.richtext.toolbar.data.add({
- value: 'MyAction'
- });
- }
-}
-~~~
-
-
-### Scenario 2. Exposing RichText data and config
-
-This variant adds flexibility in the control over RichText data and configuration by allowing access to them from other parts of the application.
-
-#### RichText initialization
-
-- The first step is the same. Create a file, let it be `RichText2.ts` this time, and add a container for the RichText:
-
-~~~js title="RichText2.ts"
-@Component({
- template: ``
-})
-~~~
-
-- Then initialize RichText with the `new RichText` constructor and define the configuration properties of RichText in the object passed as a second parameter of the constructor:
-
-~~~js title="RichText2.ts"
-export class RichtextComponent implements OnInit, OnDestroy {
- @ViewChild('widget') container: ElementRef;
- richtext: Richtext;
-
- ngOnInit() {
- this.richtext = new Richtext(this.container.nativeElement, {
- mode: this.mode
- });
- }
-}
-~~~
-
-#### Working with configuration options
-
-- Set the list of used RichText configuration properties and their types before the initialization function:
-
-~~~js title="RichText2.ts"
-export class RichtextComponent implements OnInit, OnDestroy {
- @ViewChild('widget') container: ElementRef;
- richtext: Richtext;
-
- @Input() mode: 'document' | 'classic' = 'classic';
- @Input() value: string;
- @Input() dataType: 'html' | 'markdown';
-
-
- ngOnInit() {
- this.richtext = new Richtext(this.container.nativeElement, {
- mode: this.mode
- });
- }
-}
-~~~
-
-The properties of RichText are exposed and available to work with outside the component. In the example below the `"document"` mode is specified for richtext:
-
-~~~js title="BasicSample.ts"
-@Component({
- template: `
-
-
-
`
-})
-~~~
-
-#### Working with RichText API
-
-This variant of using RichText in a Angular application allows working with its API moving all calls of methods and event handlers into a separate file.
-
-First, you can add a couple of wrappers for convenient work with RichText API. The example below shows how you can wrap actions for setting RichText value and handling the `change` event taking into account the type of data:
-
-~~~js title="RichText2.ts"
-export class RichtextComponent implements OnInit, OnDestroy {
- @ViewChild('widget') container: ElementRef;
- richtext: Richtext;
-
- ngOnInit() {
- this.richtext = new Richtext(this.container.nativeElement, {
- mode: this.mode
- });
-
- if (this.value) {
- this.richtext.setValue(this.value, this.dataType);
- }
-
- this.richtext.events.on('change', () => {
- this.change.emit(this.richtext.getValue(this.dataType));
- });
- }
-}
-~~~
-
-After that you can use the ready wrappers in other parts of application.
-
-- Create a `DataSample.ts` file and describe the methods you want to use while working with the richtext. In the example below the `updateMarkdown` and `updateHTML` methods are added for updating the content of the RichText editor:
-
-~~~js title="DataSample.ts"
-export class RichtextDataSampleComponent {
- @Input() html = '';
- @Input() markdown = ``;
- updateMarkdown(value) {
- this.markdown = value;
- }
- updateHTML(value) {
- this.html = value;
- }
-}
-~~~
-
-- Use the above methods to update the Richtext content depending on the type of entered data when some changes are made:
-
-~~~js title="DataSample.ts"
-@Component({
- template: `
-
-
-
-
`
-})
-~~~
-
diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
index dca11a0..4f2eb72 100644
--- a/docs/guides/configuration.md
+++ b/docs/guides/configuration.md
@@ -1,160 +1,283 @@
---
sidebar_label: Configuration
title: Configuration
-description: This guide helps to configure the DHTMLX Rich Text Editor according to your requirements, enable the required working mode in the editor, and define its toolbar structure.
+description: You can learn about the configuration 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.
---
-With RichText configuration options, you can make your work with text even more comfortable. It is possible to define the desired working mode and set the blocks of toolbar buttons you need in the order you want.
+# Configuration
-Working modes
----------------
+You can configure RichText appearance and functionality via the corresponding API. The available parameters will allow you to:
-There are two modes of RichText editor between which you can select to get the best working place for creating your perfect texts. The modes are:
+- Show/hide **menubar** using the [`menubar`](api/config/menubar.md) property
+- Configure **toolbar** using the [`toolbar`](api/config/toolbar.md) property
+- Enable the **fullscreen mode** using the [`fullscreenMode`](api/config/fullscreen-mode.md) property
+- Toggle the **layout** between "classic" and "document" modes using the [`layoutMode`](api/config/layout-mode.md) property
+- Specify **initial value** using the [`value`](api/config/value.md) property
+- Specify **initial locale** using the [`locale`](api/config/locale.md) property
+- Apply **initial styles** using the [`defaultStyles`](api/config/default-styles.md) property
-- "classic"
+## Layout modes
-
+There are two layout modes of RichText editor between which you can select to get the best working place for creating your perfect content:
-- "document"
+- **"classic"**
-
+
-To specify the desired mode, you need to define it in the [mode](api/properties.md#mode) option of the Richtext configuration object during initialization of the component:
+- **"document"**
-~~~js
-var richtext = new dhx.Richtext("richtext_container", {
- mode: "document"
-});
-~~~
-
-**Related sample:** [Modes](https://snippet.dhtmlx.com/pdh5buvg)
-
-Toolbar
-------------
-
-### Default toolbar
+
-The RichText toolbar consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar:
+To specify the desired mode, you need to define it in the [`layoutMode`](api/config/layout-mode.md) property of the RichText configuration object during initialization of the component:
-- `"undo"` - to undo/redo recent actions
-- `"style"` - to change the font, font size, turn plain text into a heading and vice versa, and make a quote out of the text
-- `"decoration"` - to make text bold, italic, underlined or strike-through
-- `"colors"` - to change the color of the text or its background
-- `"align"` - to adjust the alignment of the text on a page
-- `"link"` - to add a link into the text
-
-The structure of toolbar is defined via the [toolbarBlocks](api/properties.md#toolbarblocks) configuration option of the component, which is an array with strings presenting the names of controls.
-
-~~~js
-var richtext = new dhx.Richtext(document.body, {
- // default toolbar
- toolbarBlocks: [
- "undo", "style", "decoration", "colors",
- "align", "link"
- ]
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+ layoutMode: "document"
});
~~~
-
-
-**Related sample:** [Initialization](https://snippet.dhtmlx.com/32jtemtm)
-
-You can add several more blocks to make the full toolbar:
-
-- `"clear"` - to clear formatting applied to the text
-- `"fullscreen"` - to enter/exit the full screen mode
-- `"stats"` - to display statistics about the text: the count of words, characters and characters excluding spaces or some custom statistical data
-
-~~~js
-var richtext = new dhx.Richtext(document.body, {
- // full toolbar
- toolbarBlocks: [
- "undo", "style", "decoration", "colors", "align",
- "link", "clear", "stats", "fullscreen"
- ]
+## Toolbar
+
+The RichText toolbar consists of several blocks of controls that can be changed according to your needs.
+
+### Default toolbar controls
+
+You can specify the following buttons and controls in the RichText toolbar:
+
+| Button | Description |
+|---------------------|-----------------------------------------------------------------------------|
+| `undo` | Reverts the most recent user action |
+| `redo` | Reapplies the previously undone action |
+| `style` | Allows selection of text styles (e.g., headings, paragraph, etc.) |
+| `font-family` | Changes the font of the selected text |
+| `font-size` | Adjusts the size of the selected text |
+| `bold` | Applies bold formatting to the selected text |
+| `italic` | Applies italic formatting to the selected text |
+| `underline` | Underlines the selected text |
+| `strike` | Applies strikethrough formatting |
+| `subscript` | Formats the text as subscript |
+| `superscript` | Formats the text as superscript |
+| `text-color` | Changes the text color |
+| `background-color` | Changes the background (highlight) color of the text |
+| `align` | Sets text alignment (left, center, right, justified) |
+| `indent` | Increases paragraph indentation |
+| `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 |
+| `link` | Inserts or edits a hyperlink |
+| `image` | Inserts an image |
+| `line` | Inserts a horizontal line |
+| `clear` | Removes all formatting from the selected text |
+| `print` | Opens the print dialog |
+| `fullscreen` | Toggles fullscreen mode |
+| `mode` | Switches between 2 view modes: Classic/ Document |
+| `shortcuts` | Displays a list of available keyboard shortcuts |
+| `separator` | Adds a visual separator between controls |
+
+The toolbar structure is defined using the [`toolbar`](api/config/toolbar.md) property, which is an array with strings presenting the names of controls.
+
+~~~jsx {2-36}
+new richtext.Richtext("#root", {
+ toolbar: [
+ "undo",
+ "redo",
+ "separator",
+ "style",
+ "separator",
+ "font-family",
+ "font-size",
+ "separator",
+ "bold",
+ "italic",
+ "underline",
+ "strike",
+ "separator",
+ "text-color",
+ "background-color",
+ "separator",
+ "align",
+ "line-height",
+ "outdent",
+ "indent",
+ "separator",
+ "bulleted-list",
+ "numbered-list",
+ "quote",
+ "separator",
+ "link",
+ "image",
+ "separator",
+ "clear",
+ "separator",
+ "fullscreen",
+ "mode"
+ // other buttons
+ ],
+ // other configuration properties
});
~~~
-
-
+**Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih)
-**Related sample:** [Full Toolbar](https://snippet.dhtmlx.com/5yga5ce1)
+### Custom toolbar controls
-### Short toolbar definition
+You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property with the following parameters:
-There is also a possibility to specify the default set of buttons via the `"default"` definition in the `toolbarBlocks` array, like this:
+- `type` - (required) specifies a custom control type. The following types are available: `"button"`, `"richselect"`, `"colorpicker"`
+- `id` - (optional) a custom control ID (cannot overlap with existing control ID)
+- `label` - (optional) a button label (combines with icon)
+- `tooltip` - (optional) a tooltip displayed on hover (if not specified, uses the value from "label")
+- `css` - (optional) a css class name assigned to the control (default supported classes: wx-primary, wx-secondary)
+- `handler` - (optional) a callback function that executes when the button is clicked
-~~~js
-var richtext = new dhx.Richtext(document.body, {
- // full toolbar
- toolbarBlocks: ["default", "clear", "stats", "fullscreen"]
+~~~jsx {6-32}
+new richtext.Richtext("#root", {
+ toolbar: [
+ // buttons (strings represent buttons only)
+ "bold",
+ "italic",
+ // predefined buttons (user cannot define any other options for these (no labels, tooltips, options, etc.), so only ({ type: "button", id: string })
+ {
+ type: "button",
+ id: "fullscreen",
+ },
+ // user must specify the correct type if they want to use a predefined control (e.g. richselect/colorpicker)
+ // non-matching types will be ignored (not added to the toolbar)
+ {
+ type: "richselect", // type: "button" - incorrect, will be ignored
+ id: "mode",
+ },
+ // custom buttons (supported options are below)
+ // user can only define custom buttons (no richselect/colorpicker support atm)
+ {
+ type: "button",
+ id: "some",
+ label: "Some",
+ handler: () => {/* custom logic */}
+ },
+ {
+ type: "button",
+ id: "other",
+ icon: "wxo-help",
+ label: "Other",
+ tooltip: "Some tooltip",
+ handler: () => {/* custom logic */}
+ }
+ ],
+ // other configuration properties
});
~~~
-where the "default" string includes the default set of controls: `"undo"`, `"style"`, `"decoration"`, `"colors"`, `"align"` and `"link"`.
+**Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih)
+### Hide Toolbar
-### Custom toolbar
+If you need to hide toolbar, set the [`toolbar`](api/config/toolbar.md) property to `false` as follows:
-You can specify your own structure of the toolbar by enumerating the necessary elements of the `toolbarBlocks` array in the desired order, for example:
-
-~~~js
-var richtext = new dhx.Richtext(document.body, {
- toolbarBlocks: ["clear", "colors", "align","decoration",
- "undo", "fullscreen","link"
- ]
+~~~jsx {2}
+new richtext.Richtext("#root", {
+ toolbar: false,
+ // other configuration properties
});
~~~
-
-
-**Related sample:** [Toolbar Blocks](https://snippet.dhtmlx.com/yp7en22d)
-
-### Custom statistics in the toolbar
-
-The default statistics shown in the toolbar includes the following data about the text: the count of words, characters and characters excluding spaces.
-
-
-
-But you can display any custom data via the [customStats](api/properties.md#customstats) configuration option. Set an array with necessary statistical parameters as a value of this option.
-Each parameter represents an object with two properties:
+## Default styles
+
+You can apply default style values for specific block types in the editor using the [`defaultStyles`](api/config/default-styles.md) property.
+
+~~~jsx {}
+defaultStyles?: boolean | {
+ "*"?: { // affects all blocks, allowing you to set common properties for all of these blocks
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ p?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ blockquote?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h1?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h2?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h3?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h4?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h5?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ },
+ h6?: {
+ "font-family"?: string; // "Roboto"| "Arial" | "Georgia" | "Tahoma" | "Times New Roman" | "Verdana"
+ "font-size"?: string; // "12px" | "14px" | "16px" | "18px" | "20px" | "24px" | "28px" | "32px" | "36px"
+ color?: string;
+ background?: string;
+ }
+};
+~~~
-- `name` - (*string*) the name of the field that should be displayed
-- `callback` - (*function*) a function that implements the logic of counting entries of the specified field
+The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately:
-In the example below the editor shows the number of sentences together with the count of characters and words:
+```html title="index.html"
+
+```
-~~~js
-var richtext = new dhx.Richtext("richtext_container", {
- customStats: [
- {
- name: "chars"
- },
- {
- name: "words"
- },
- {
- name: "sentences",
- cb: function(text) {
- var rawSentences = text.split(/[.?!]+/);
- var count = 0;
- for (var i=0; i 0) {
- count += 1;
- }
- }
- return count;
- }
+```jsx {2-9} title="index.js"
+const editor = new richtext.Richtext("#root", {
+ defaultStyles: {
+ h2: {
+ "font-family": "Roboto",
+ "font-size": "28px",
+ color: "purple",
+ background: "#FFC0CB"
}
- ],
- toolbarBlocks: ["default", "stats"]
+ }
});
-~~~
-
-
-
-**Related sample:** [Custom Stats](https://snippet.dhtmlx.com/u1734epz)
+```
+```css title="index.css"
+#root h2 {
+ font-family: Roboto;
+ font-size: 28px;
+ color: purple;
+ background: #FFC0CB;
+}
+```
-Toolbar is [highly customizable](guides/customization.md). You can add new controls, change the icons of controls and apply the desired icon pack.
+In this example, all `h2` blocks are assigned to the `"Roboto"` font-family with a font-size of 28px with both the foreground and the background colors changed as well. Css styles are assigned to `h2` blocks as well.
+**Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s)
diff --git a/docs/guides/customization.md b/docs/guides/customization.md
deleted file mode 100644
index 86a2576..0000000
--- a/docs/guides/customization.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-sidebar_label: Customization
-title: Customization
-description: This guide explains how to customize the DHTMLX Rich Text Editor's toolbar, reconfigure controls, and replace default icons used in the editor with custom ones.
----
-
-You can customize the appearance and structure of toolbar, change the settings of controls and use any icon pack instead of the default one.
-
-Icons
-----------
-
-DHTMLX Richtext uses the [Material Design](https://pictogrammers.com/library/mdi/?welcome)-based icons by default. However, you can use any other icon font pack, if necessary. For this, you need to include the desired icon font on a page and apply icons for Toolbar controls.
-
-For example, you can use the [Font Awesome](https://fontawesome.com/) icon pack by including [link to its CDN](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css) after the source files of DHTMLX Richtext as follows:
-
-~~~html
-
-
-
-
-~~~
-
-**Related sample:** [Custom Icons](https://snippet.dhtmlx.com/oxu04enu)
-
-Then you can use the name of the icon as the value of the `icon` property in the object with the control parameters for toolbar. See details below.
-
-Controls
--------------
-
-### Types
-
-There are the following types of controls you can add: `button`, `customHTML`, `imageButton`, `selectButton`, `separator` and `spacer`.
-
-#### Button
-
-The `button` object has the following properties:
-
-- `type` - (*string*) the type of a button, set it to "button"
-- `id` - (*string*) the id of a button, auto-generated if not set
-- `icon` - (*string*) the name of an icon from the used icon font
-- `hotkey` - (*string*) the name of the hot key for a button
-- `value` - (*string*) the value of a button
-- `tooltip` - (string) the tooltip of a button
-- `count` - (*number*) the counter of a button
-- `countColor` - (*string*) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
-- `items` - (*array*) an array of nested controls. You can find the full list of all available controls [here](https://docs.dhtmlx.com/suite/menu/configuring_menu_items/). If the type of a nested control is not specified, the *menuItem* type will be applied by default.
-- `group` - (*string*) defines the name of a group of controls a button belongs to. If one of the buttons in the group becomes active, all others automatically become inactive
-- `multiClick` - (*boolean*) defines the behavior of the Undo/Redo buttons:
- - *true* - all the actions are reverted/re-applied one by one when the Undo/Redo button is clicked and held
- - *false* - one action is reverted/re-applied on each click of the Undo/Redo button
-- `view` - (*string*) defines the look of a button: "flat"|"link"
-- `color` - (*string*) defines the color scheme of a button: "danger"|"secondary"|"primary"|"success"
-- `size` - (*string*) defines the size of a button: "small"|"medium"
-- `circle` - (*boolean*) makes the corners of a button round
-- `loading` - (*boolean*) adds a spinner into a button
-- `hidden` - (*boolean*) defines whether a button is hidden
-- `disabled` - (*boolean*) defines whether a button is disabled
-
-#### Custom HTML
-
-The `customHTML` object has the following properties:
-
-- `type` - (*string*) the item type, set it to "customHTML"
-- `id` - (*string*) the id of a an item, auto-generated if not set
-- `html` - (*string*) a string with HTML that should be inserted into the item
-- `css` - (*string|string[]*) adds style classes
-- `hidden` - (*boolean*) defines whether an item is hidden
-
-#### ImageButton
-
-The `imageButton` object has the following properties:
-
-- `type` - (*string*) the type of an item, set it to "imageButton"
-- `id` - (*string*) the id of a control, auto-generated if not set
-- `src` - (*string*) the path to the image
-- `css` - (*string|string[]*) adds style classes to a button
-- `hotkey` - (*string*) the name of the hot key for the button
-- `tooltip` - (*string*) a tooltip for the button
-- `count` - (*number*) a badge with a number
-- `countColor` - (*string*) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
-- `hidden` - (*boolean*) defines whether a button is hidden
-- `disabled` - (*boolean*) defines whether a button is disabled
-
-#### SelectButton
-
-The `selectButton` object has the following properties:
-
-- `type` - (*string*) the type of a control, set it to "selectButton"
-- `id` - (*string*) the id of a control, auto-generated if not set
-- `value` - (*string*) a value of the button
-- `css` - (*string|string[]*) adds style classes to a button
-- `icon` - (*string*) the name of an icon from the used icon font
-- `items` - (*array*) an array of nested controls. You can find the full list of all available controls [here](https://docs.dhtmlx.com/suite/menu/configuring_menu_items/). If the type of a nested control is not specified, the *menuItem* type will be applied by default.
-- `tooltip` - (*string*) a tooltip for the control
-- `count` - (*number*) a badge with a number
-- `countColor` - (*string*) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
-- `hidden` - (*boolean*) defines whether a button is hidden
-- `disabled` - (*boolean*) defines whether a button is disabled
-
-#### Separator
-
-The `separator` object has the following properties:
-
-- `type` - (*string*) the item type, set it to "separator"
-- `id` - (*string*) the id of a control, auto-generated if not set
-
-#### Spacer
-
-The `spacer` object has the following properties:
-
-- `type` - (*string*) the item type, set it to "spacer"
-- `id` - (*string*) the id of a control, auto-generated if not set
-
-### Work with controls
-
-The data collection API of the `toolbar` allows you to manipulate the controls, namely to add custom controls, remove the controls you don't need, or update the controls, e.g. change their icons.
-
-#### Adding controls
-
-To add a new control, apply the `richtext.{name}.data.add()` method. It takes the parameters below:
-
-- `config` - (*object*) an object with the control config
-- `index` - (*number*) the index of the position to place the control into
-- `parent` - (*string*) the id of a parent control (for the *menuItem* type)
-
-For a button:
-
-~~~js
-richtext.toolbar.data.add({
- type: "button",
- id: "button-id",
- value: "Some value",
- icon: "icon-name"
-}, 2);
-~~~
-
-For a custom button:
-
-~~~js
-richtext.toolbar.data.add({
- type: "customHTML",
- id: "htmlbutton-id",
- value: "Some value",
- icon: "icon-name"
-}, 2);
-~~~
-
-#### Updating controls
-
-You can change the icon of the control and its other config options via the
-`richtext.{name}.data.update()` method. It takes two parameters:
-
-- the id of the control
-- an object with new configuration of the control
-
-~~~js
-richtext.toolbar.data.update("add", {
- icon: "icon_name"
-});
-~~~
-
-#### Deleting controls
-
-To remove a control, make use of the `richtext.{name}.data.remove()` method. Pass the id of the control that should be removed to the method:
-
-~~~js
-richtext.toolbar.data.remove("control-id");
-~~~
-
-Below you will find detailed examples.
-
-Toolbar
----------
-
-### Default controls
-
-The [default toolbar](../../#toolbar-structure) contains the following blocks of controls:
-
-- the **Undo** block
- - the *Undo* button (id:"undo")
- - the *Redo* button (id:"redo")
-- the **Style** block
- - the *Font family* button (id:"font-family")
- - the *Font size* button (id:"font-size")
- - the *Style* button (id:"style")
- - the *Base text* option (id:"style-p")
- - the *Heading 1* option (id:"style-h1")
- - the *Heading 2* option (id:"style-h2")
- - the *Heading 3* option (id:"style-h3")
- - the *Heading 4* option (id:"style-h4")
- - the *Heading 5* option (id:"style-h5")
- - the *Heading 6* option (id:"style-h6")
- - the *Block quote* button (id:"blockquote")
-- the **Decoration** block
- - the *Bold* button (id:"bold")
- - the *Italic* button (id:"italic")
- - the *Strike* button (id:"strike")
- - the *Underline* button (id:"underline")
-- the **Colors** block
- - the *Text color* button (id:"color")
- - the *Background color* button (id:"background")
-- the **Align** block
- - the *Align left* button (id: "align-left")
- - the *Align center* button (id: "align-center")
- - the *Align right* button (id: "align-right")
-- the **Link** block
- - the *Link* button (id:"link")
-
-
-It is also possible to add the blocks enumerated below to get the full toolbar:
-
-- the **Clear format** block
- - the *Clear format* button (id:"clear-style")
-- the **Full screen** block
- - the *Fullscreen* button (id:"fullscreen")
-- the **Statistics** block
- - the **Statistics** button (id:"stats")
-
-
-### Adding controls
-
-In the example below a new button named **Count Characters** is added into the toolbar:
-
-
-
-~~~js
-richtext.toolbar.data.add({
- type: "button",
- value: "Count Characters",
- id: "calc"
-}, 24);
-~~~
-
-**Related sample:** [Custom Button](https://snippet.dhtmlx.com/xlpa1tj7)
-
-
-### Updating controls
-
-
-In the example below the default icons of the buttons of the **Decoration** block are changed to Font Awesome ones:
-
-
-
-~~~js
-var icons = [
- ["bold", "fas fa-bold"],
- ["underline", "fas fa-underline"],
- ["italic", "fas fa-italic"],
- ["strike", "fas fa-strikethrough"]
-];
-
-for (var i=0; i
-
-
- How to Start with DHTMLX Richtext
-
-
-
-
-
-
-
-
-~~~
-
-Including source files
------------------------
+## Including source files
[Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project.
-To create dhtmlxRichText, you need to include 2 source files on your page:
+To create RichText, you need to include 2 source files on your page:
-- **richtext.js**
-- **richtext.css**
+- *richtext.js*
+- *richtext.css*
-Make sure that you set correct relative paths to these files:
+Make sure that you set correct relative paths to the source files:
~~~html title="index.html"
-
-
+
+
~~~
-The structure of the RichText package is the following:
-
-- **sources** - the source code files of the library; they are easy-to-read and are mostly intended for debugging;
-- **codebase** - the obfuscated code files of the library; they are much smaller and intended for use in production. **Include these files in your apps when they are ready**;
-- **samples** - the code samples.
+## Creating container
+Add a container for RichText and give it an ID, for example *"root"*:
-Creating container
------------------
-
-Add a container for RichText and give it an id, for example "richtext_container":
-
-~~~html title="index.html"
-
+~~~jsx title="index.html"
+
~~~
-Initializing RichText
-----------------------
+## Initializing RichText
-Initialize RichText with the `dhx.Richtext` object constructor. The constructor has two parameters:
+Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters:
-- the HTML container for RichText. The one we have created at the previous step.
-- an object with configuration properties. [See the full list below](#configuration-properties).
+- an HTML container (the ID of the HTML container)
+- an object with configuration properties. [See the full list here](#configuration-properties)
-
-~~~js title="index.html"
-// creating RichText
-var richtext = new dhx.Richtext("richtext_container", {
- // config options
+~~~jsx title="index.html"
+// create RichText
+const editor = new richtext.Richtext("#root", {
+ // configuration properties
});
~~~
-### Configuration properties
-
-This is a list of properties that you can specify in the Richtext configuration object:
-
-- [**mode**](guides/configuration.md#working-modes) - (string) the working mode of RichText. Can be either `default` or `document`.
-- [**toolbarBlocks**](guides/configuration.md#toolbar) - (array) specifies blocks of buttons that will be shown in the Richtext toolbar
-- [**customStats**](guides/configuration.md#custom-statistics-in-the-toolbar) - (array) defines the logic of displaying custom statistics
+### Configuration properties
-You can set configuration options during initialization as the second parameter of the constructor:
-
-~~~js
-var richtext = new dhx.Richtext("richtext_container", {
- mode:"document"
-});
-~~~
+:::note
+The full list of properties to configure **RichText** can be found [**here**](api/overview/properties_overview.md).
+:::
-**Related sample:** [Modes](https://snippet.dhtmlx.com/pdh5buvg)
+## Example
+In this snippet you can see how to initialize **RichText** with the initial data:
+
diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md
new file mode 100644
index 0000000..e277f84
--- /dev/null
+++ b/docs/guides/integration_with_angular.md
@@ -0,0 +1,300 @@
+---
+sidebar_label: Integration with Angular
+title: Integration with Angular
+description: You can learn about the integration with Angular 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.
+---
+
+# Integration with Angular
+
+:::tip
+You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://angular.io/docs).
+:::
+
+DHTMLX RichText is compatible with **Angular**. We have prepared code examples on how to use DHTMLX RichText with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
+
+## Creating a project
+
+:::info
+Before you start to create a new project, install [**Angular CLI**](https://angular.io/cli) and [**Node.js**](https://nodejs.org/en/).
+:::
+
+Create a new **my-angular-richtext-app** project using Angular CLI. Run the following command for this purpose:
+
+~~~json
+ng new my-angular-richtext-app
+~~~
+
+:::note
+If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
+:::
+
+The command above installs all the necessary tools, so you don't need to run any additional commands.
+
+### Installation of dependencies
+
+Go to the new created app directory:
+
+~~~json
+cd my-angular-richtext-app
+~~~
+
+Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager:
+
+~~~json
+yarn
+yarn start
+~~~
+
+The app should run on a localhost (for instance `http://localhost:3000`).
+
+## Creating RichText
+
+Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
+
+### Step 1. Package installation
+
+Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only.
+
+### Step 2. Component creation
+
+Now you need to create an Angular component, to add Richtext into the application. Create the **richtext** folder in the **src/app/** directory, add a new file into it and name it **richtext.component.ts**.
+
+#### Import source files
+
+Open the **richtext.component.ts** file and import RichText source files. Note that:
+
+- if you use PRO version and install the RichText package from a local folder, the imported path looks like this:
+
+~~~jsx
+import { Richtext} from 'dhx-richtext-package';
+~~~
+
+- if you use the trial version of RichText, specify the following path:
+
+~~~jsx
+import { Richtext} from '@dhx/trial-richtext';
+~~~
+
+In this tutorial you can see how to configure the **trial** version of RichText.
+
+#### Set containers and initialize the Richtext
+
+To display RichText on the page, you need to set a container for RichText, and initialize the component using the corresponding constructor:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: "richtext", // a template name used in the "app.component.ts" file as
+ styleUrls: ["./richtext.component.css"], // include the css file
+ template: `
+
+
`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+ // initialize container for RichText
+ @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+ private _editor!: Richtext;
+
+ ngOnInit() {
+ // initialize the RichText component
+ this._editor = new Richtext(this.richtext_container.nativeElement, {});
+ }
+
+ ngOnDestroy(): void {
+ this._editor.destructor(); // destruct RichText
+ }
+}
+~~~
+
+#### Adding styles
+
+To display RichText correctly, you need to provide the corresponding styles. For this purpose, you can create the **richtext.component.css** file in the **src/app/richtext/** directory and specify important styles for RichText and its container:
+
+~~~css title="richtext.component.css"
+/* import RichText styles */
+@import "@dhx/trial-richtext/dist/richtext.css";
+
+/* specify styles for initial page */
+html,
+body{
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+/* specify styles for RichText container */
+.component_container {
+ height: 100%;
+ margin: 0 auto;
+}
+
+/* specify styles for RichText widget */
+.widget {
+ height: calc(100% - 56px);
+}
+~~~
+
+#### Loading data
+
+To add data into RichText, you need to provide a data set. You can create the **data.ts** file in the **src/app/richtext/** directory and add some data into it:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+ const value = `
+
`;
+ return { value };
+}
+~~~
+
+Then open the ***richtext.component.ts*** file. Import the file with data and specify the corresponding data properties to the configuration object of RichText within the `ngOnInit()` method, as shown below:
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // import data
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: "richtext",
+ styleUrls: ["./richtext.component.css"],
+ template: `
+
+
`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+ @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+ private _editor!: RichText;
+
+ ngOnInit() {
+ const { value } = getData(); // initialize data property
+ this._editor = new Richtext(this.richtext_container.nativeElement, {
+ value
+ // other configuration properties
+ });
+ }
+
+ ngOnDestroy(): void {
+ this._editor.destructor();
+ }
+}
+~~~
+
+You can also use the [`setValue()`](api/methods/set-value.md) method inside the `ngOnInit()` method of Angular to load data into RichText.
+
+~~~jsx {} title="richtext.component.ts"
+import { Richtext} from '@dhx/trial-richtext';
+import { getData } from "./data"; // import data
+import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';
+
+@Component({
+ encapsulation: ViewEncapsulation.None,
+ selector: "richtext",
+ styleUrls: ["./richtext.component.css"],
+ template: `
+
+
`
+})
+
+export class RichTextComponent implements OnInit, OnDestroy {
+ @ViewChild("richtext_container", { static: true }) richtext_container!: ElementRef;
+
+ private _editor!: RichText;
+
+ ngOnInit() {
+ const { value } = getData(); // initialize data property
+ this._editor = new Richtext(this.richtext_container.nativeElement, {
+ // other configuration properties
+ });
+
+ // apply the data via the setValue() method
+ this._editor.setValue({ value });
+ }
+
+ ngOnDestroy(): void {
+ this._editor.destructor();
+ }
+}
+~~~
+
+Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties.
+
+#### Handling events
+
+When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
+
+Open the **richtext.component.ts** file and complete the `ngOnInit()` method in the following way:
+
+~~~jsx {} title="richtext.component.ts"
+// ...
+ngOnInit() {
+ this._editor = new Richtext(this.richtext_container.nativeElement, {});
+
+ this._editor.api.on("print", () => {
+ console.log("The document is printing");
+ });
+}
+
+ngOnDestroy(): void {
+ this._editor.destructor();
+}
+~~~
+
+### Step 3. Adding RichText into the app
+
+To add the ***RichTextComponent*** component into your app, open the ***src/app/app.component.ts*** file and replace the default code with the following one:
+
+~~~jsx {} title="app.component.ts"
+import { Component } from "@angular/core";
+
+@Component({
+ selector: "app-root",
+ template: ``
+})
+export class AppComponent {
+ name = "";
+}
+~~~
+
+Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *RichTextComponent* as shown below:
+
+~~~jsx {} title="app.module.ts"
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+
+import { AppComponent } from "./app.component";
+import { RichTextComponent } from "./richtext/richtext.component";
+
+@NgModule({
+ declarations: [AppComponent, RichTextComponent],
+ imports: [BrowserModule],
+ bootstrap: [AppComponent]
+})
+export class AppModule {}
+~~~
+
+The last step is to open the ***src/main.ts*** file and replace the existing code with the following one:
+
+~~~jsx title="main.ts"
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app/app.module";
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch((err) => console.error(err));
+~~~
+
+After that, you can start the app to see RichText loaded with data on a page.
+
+
+
+Now you know how to integrate DHTMLX RichText with Angular. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/angular-richtext-demo).
diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md
new file mode 100644
index 0000000..2913c8d
--- /dev/null
+++ b/docs/guides/integration_with_react.md
@@ -0,0 +1,253 @@
+---
+sidebar_label: Integration with React
+title: Integration with React
+description: You can learn about the integration with React 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.
+---
+
+# Integration with React
+
+:::tip
+You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://reactjs.org/docs/getting-started.html).
+:::
+
+DHTMLX RichText is compatible with **React**. We have prepared code examples on how to use DHTMLX RichText with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-richtext-demo).
+
+## Creating a project
+
+:::info
+Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
+:::
+
+You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-richtext-app**:
+
+~~~json
+npx create-react-app my-react-richtext-app
+~~~
+
+### Installation of dependencies
+
+Go to the new created app directory:
+
+~~~json
+cd my-react-richtext-app
+~~~
+
+Install dependencies and start the dev server. For this, use a package manager:
+
+- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- if you use [**npm**](https://www.npmjs.com/), run the following commands:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+The app should run on a localhost (for instance `http://localhost:3000`).
+
+## Creating RichText
+
+Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
+
+### Step 1. Package installation
+
+Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only.
+
+### Step 2. Component creation
+
+Now you need to create a React component, to add a RichText into the application. Create a new file in the ***src/*** directory and name it ***Richtext.jsx***.
+
+#### Importing source files
+
+Open the ***Richtext.jsx*** file and import RichText source files. Note that:
+
+- if you use PRO version and install the RichText package from a local folder, the import paths look like this:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from 'dhx-richtext-package';
+import 'dhx-richtext-package/dist/richtext.css';
+~~~
+
+- if you use the trial version of RichText, specify the following paths:
+
+~~~jsx title="Richtext.jsx"
+import { Richtext} from '@dhx/trial-richtext';
+import "@dhx/trial-richtext/dist/richtext.css";
+~~~
+
+In this tutorial you can see how to configure the **trial** version of RichText.
+
+#### Setting containers and adding Richtext
+
+To display RichText on the page, you need to create container for RichText and initialize the component using the corresponding constructors:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from '@dhx/trial-richtext';
+import '@dhx/trial-richtext/dist/richtext.css'; // include RichText styles
+
+export default function RichTextComponent(props) {
+ let richtext_container = useRef(); // initialize container for RichText
+
+ useEffect(() => {
+ // initialize the RichText component
+ const editor = new Richtext(richtext_container.current, {});
+
+ return () => {
+ editor.destructor(); // destruct RichText
+ };
+ }, []);
+
+ return
+
+
+}
+~~~
+
+#### Adding styles
+
+To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project:
+
+~~~css title="index.css"
+/* specify styles for initial page */
+html,
+body,
+#root {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+/* specify styles for RichText container */
+.component_container {
+ height: 100%;
+ margin: 0 auto;
+}
+
+/* specify styles for RichText widget */
+.widget {
+ height: calc(100% - 56px);
+}
+~~~
+
+#### Loading data
+
+To add data into the RichText, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
+
+~~~jsx {} title="data.js"
+export function getData() {
+ const value = `
+
`;
+ return { value };
+}
+~~~
+
+Then open the ***App.js*** file and import data. After this you can pass data into the new created `` components as **props**:
+
+~~~jsx {2,5-6} title="App.js"
+import RichText from "./Richtext";
+import { getData } from "./data";
+
+function App() {
+ const { value } = getData();
+ return ;
+}
+
+export default App;
+~~~
+
+Go to the ***Richtext.jsx*** file and apply the passed **props** to the RichText configuration object:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+ let richtext_container = useRef();
+
+ useEffect(() => {
+ const editor = new Richtext(richtext_container.current, {
+ value: props.value, // apply value
+ // other configuration properties
+ });
+
+ return () => {
+ editor.destructor();
+ };
+ }, []);
+
+ return
+
+
+}
+~~~
+
+You can also use the [`setValue()`](api/methods/set-value.md) method inside the `useEffect()` method of React to load data into RichText:
+
+~~~jsx {} title="Richtext.jsx"
+import { useEffect, useRef } from "react";
+import { Richtext} from "@dhx/trial-richtext";
+import "@dhx/trial-richtext/dist/richtext.css";
+
+export default function RichTextComponent(props) {
+ let richtext_container = useRef();
+
+ let value = props.value;
+
+ useEffect(() => {
+ const editor = new Richtext(richtext_container.current, {
+ // configuration properties
+ });
+
+ editor.setValue(value);
+
+ return () => {
+ editor.destructor();
+ };
+ }, []);
+
+ return
+
+
+}
+~~~
+
+Now the RichText component is ready. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties.
+
+#### Handling events
+
+When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
+
+Open ***Richtext.jsx*** and complete the `useEffect()` method in the following way:
+
+~~~jsx {} title="Richtext.jsx"
+// ...
+useEffect(() => {
+ const editor = new Richtext(richtext_container.current, {});
+
+ editor.api.on("print", () => {
+ console.log("The document is printing");
+ });
+
+ return () => {
+ editor.destructor();
+ };
+}, []);
+// ...
+~~~
+
+After that, you can start the app to see RichText loaded with data on a page.
+
+
+
+Now you know how to integrate DHTMLX RichText with React. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/react-richtext-demo).
diff --git a/docs/guides/integration_with_svelte.md b/docs/guides/integration_with_svelte.md
new file mode 100644
index 0000000..db9839f
--- /dev/null
+++ b/docs/guides/integration_with_svelte.md
@@ -0,0 +1,263 @@
+---
+sidebar_label: Integration with Svelte
+title: Integration with Svelte
+description: You can learn about the integration with Svelte 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.
+---
+
+# Integration with Svelte
+
+:::tip
+You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/).
+:::
+
+DHTMLX RichText is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX RichText with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
+
+## Creating a project
+
+:::info
+Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
+:::
+
+There are several ways of creating a **Svelte** project:
+
+- you can use the [**SvelteKit**](https://kit.svelte.dev/)
+
+or
+
+- you can also use **Svelte with Vite** (but without SvelteKit):
+
+~~~json
+npm create vite@latest
+~~~
+
+Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
+
+### Installation of dependencies
+
+Let's name the project as **my-svelte-richtext-app** and go to the app directory:
+
+~~~json
+cd my-svelte-richtext-app
+~~~
+
+Install dependencies and start the dev server. For this, use a package manager:
+
+- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- if you use [**npm**](https://www.npmjs.com/), run the following commands:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+The app should run on a localhost (for instance `http://localhost:3000`).
+
+## Creating RichText
+
+Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
+
+### Step 1. Package installation
+
+Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only.
+
+### Step 2. Component creation
+
+Now you need to create a Svelte component, to add a RichText into the application. Let's create a new file in the ***src/*** directory and name it ***Richtext.svelte***.
+
+#### Importing source files
+
+Open the ***Richtext.svelte*** file and import RichText source files. Note that:
+
+- if you use PRO version and install the RichText package from a local folder, the import paths look like this:
+
+~~~html title="Richtext.svelte"
+
+~~~
+
+- if you use the trial version of RichText, specify the following paths:
+
+~~~html title="Richtext.svelte"
+
+
+
+
+
+~~~
+
+#### Loading data
+
+To add data into the RichText, we need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+ const value = `
+
`;
+ return { value };
+}
+~~~
+
+Then open the ***App.svelte*** file, import data, and pass it into the new created `` components as **props**:
+
+~~~html {} title="App.svelte"
+
+
+
+~~~
+
+Go to the ***Richtext.svelte*** file and apply the passed **props** to the RichText configuration object:
+
+~~~html {} title="Richtext.svelte"
+
+
+
+
+
+~~~
+
+You can also use the [`setValue()`](/api/methods/set-value.md) method inside the `onMount()` method of Svelte to load data into RichText:
+
+~~~html {} title="Richtext.svelte"
+
+
+
+
+
+~~~
+
+Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties.
+
+#### Handling events
+
+When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
+
+Open ***Richtext.svelte*** and complete the `onMount()` method in the following way:
+
+~~~html {} title="Richtext.svelte"
+
+
+// ...
+~~~
+
+### Step 3. Adding RichText into the app
+
+To add the component into the app, open the **App.svelte** file and replace the default code with the following one:
+
+~~~html title="App.svelte"
+
+
+
+~~~
+
+After that, you can start the app to see RichText loaded with data on a page.
+
+
+
+Now you know how to integrate DHTMLX RichText with Svelte. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/svelte-richtext-demo).
diff --git a/docs/guides/integration_with_vue.md b/docs/guides/integration_with_vue.md
new file mode 100644
index 0000000..46db308
--- /dev/null
+++ b/docs/guides/integration_with_vue.md
@@ -0,0 +1,279 @@
+---
+sidebar_label: Integration with Vue
+title: Integration with Vue
+description: You can learn about the integration with Vue 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.
+---
+
+# Integration with Vue
+
+:::tip
+You should be familiar with the basic concepts and patterns of [**Vue**](https://vuejs.org/) before reading this documentation. To refresh your knowledge, please refer to the [**Vue 3 documentation**](https://vuejs.org/guide/introduction.html#getting-started).
+:::
+
+DHTMLX RichText is compatible with **Vue**. We have prepared code examples on how to use DHTMLX RichText with **Vue 3**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
+
+## Creating a project
+
+:::info
+Before you start to create a new project, install [**Node.js**](https://nodejs.org/en/).
+:::
+
+To create a **Vue** project, run the following command:
+
+~~~json
+npm create vue@latest
+~~~
+
+This command installs and executes `create-vue`, the official **Vue** project scaffolding tool. Check the details in the [Vue.js Quick Start](https://vuejs.org/guide/quick-start.html#creating-a-vue-application).
+
+Let's name the project as **my-vue-richtext-app**.
+
+### Installation of dependencies
+
+Go to the app directory:
+
+~~~json
+cd my-vue-richtext-app
+~~~
+
+Install dependencies and start the dev server. For this, use a package manager:
+
+- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
+
+~~~jsx
+yarn
+yarn start // or yarn dev
+~~~
+
+- if you use [**npm**](https://www.npmjs.com/), run the following commands:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+The app should run on a localhost (for instance `http://localhost:3000`).
+
+## Creating RichText
+
+Now you should get the DHTMLX RichText source code. First of all, stop the app and proceed with installing the RichText package.
+
+### Step 1. Package installation
+
+Download the [**trial RichText package**](/how_to_start/#installing-richtext-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial RichText is available 30 days only.
+
+### Step 2. Component creation
+
+Now you need to create a Vue component, to add RichText into the application. Create a new file in the ***src/components/*** directory and name it ***Richtext.vue***.
+
+#### Import source files
+
+Open the ***Richtext.vue*** file and import RichText source files. Note that:
+
+- if you use PRO version and install the RichText package from a local folder, the import paths look like this:
+
+~~~html title="Richtext.vue"
+
+~~~
+
+- if you use the trial version of RichText, specify the following paths:
+
+~~~html title="Richtext.vue"
+
+~~~
+
+In this tutorial you can see how to configure the **trial** version of RichText.
+
+#### Setting containers and adding Richtext
+
+To display Richtext on the page, you need to create a container for RichText and initialize the component using the corresponding constructor:
+
+~~~html {} title="Richtext.vue"
+
+
+
+
+
+
+
+~~~
+
+#### Adding styles
+
+To display RichText correctly, you need to specify important styles for RichText and its container in the main css file of the project:
+
+~~~css title="main.css"
+/* specify styles for initial page */
+html,
+body,
+#app { /* make sure that you use the #app root container */
+ height: 100%;
+ padding: 0;
+ margin: 0;
+}
+
+/* specify styles for RichText container */
+.component_container {
+ height: 100%;
+ margin: 0 auto;
+}
+
+/* specify styles for RichText widget */
+.widget {
+ height: calc(100% - 56px);
+}
+~~~
+
+#### Loading data
+
+To add data into the RichText, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
+
+~~~jsx {} title="data.ts"
+export function getData() {
+ const value = `
+
`;
+ return { value };
+}
+~~~
+
+Then open the ***App.vue*** file, import data, and initialize it via the inner `data()` method. After this you can pass data into the new created `` component as **props**:
+
+~~~html {} title="App.vue"
+
+
+
+
+
+~~~
+
+Go to the ***Richtext.vue*** file and apply the passed **props** to the RichText configuration object:
+
+~~~html {} title="Richtext.vue"
+
+
+
+
+
+
+
+~~~
+
+You can also use the [`setValue()`](api/methods/set-value.md) method inside the `mounted()` method of Vue to load data into RichText:
+
+~~~html {} title="Richtext.vue"
+
+
+
+
+
+
+
+~~~
+
+Now the RichText component is ready to use. When the element will be added to the page, it will initialize the RichText with data. You can provide necessary configuration settings as well. Visit our [RichText API docs](api/overview/main_overview.md) to check the full list of available properties.
+
+#### Handling events
+
+When a user makes some action in the RichText, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
+
+Open ***Richtext.vue*** and complete the `mounted()` method:
+
+~~~html {} title="Richtext.vue"
+
+
+// ...
+~~~
+
+After that, you can start the app to see RichText loaded with data on a page.
+
+
+
+Now you know how to integrate DHTMLX RichText with Vue. You can customize the code according to your specific requirements. The final advanced example you can find on [**GitHub**](https://github.com/DHTMLX/vue-richtext-demo).
diff --git a/docs/guides/loading_data.md b/docs/guides/loading_data.md
deleted file mode 100644
index 57584a7..0000000
--- a/docs/guides/loading_data.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-sidebar_label: Setting content
-title: Setting content
-description: This guide sheds light on how to add content in the DHTMLX Rich Text Editor and display it in HTML and Markdown.
----
-
-DHTMLX Richtext editor allows loading content in the HTML and Markdown formats. Thus, besides entering text right into the editor, you can load ready content in the supported format and edit it with the help of the RichText
-set of controls.
-
-Format of content
-------------------
-
-### HTML format
-
-Rich Text supports standard HTML format, so you can use all habitual formatting tags. The image below presents the result of parsing a text in the HTML format into the Rich Text editor:
-
-
-
-### Markdown format
-
-For parsing of a Markdown-formatted text, DHTMLX Richtext uses the [Marked.js](https://github.com/markedjs/marked) markdown parser.
-For now the component supports basic formatting elements of the Markdown syntax. Check the cheat sheet below:
-
-
-
-The following image demonstrates the result of parsing a text in the Markdown format into the Rich Text editor:
-
-
-
-Adding content into editor
-------------------
-
-In order to add some text content into the RichText, make use of the [setValue()](api/methods.md#setvalue) method. The method takes two parameters:
-
-- `value` - (*string*) a string with the content you want to add into the editor in either HTML or Markdown format
-- `mode` - (*string*) optional, the format of text parsing: `"html"` (default) or `"markdown"`
-
-Below you can find examples of loading text in both available formats:
-
-- adding HTML content
-
-~~~js
-var htmlText = `
Meet DHTMLX Rich Text Editor!
` +
-`
This demo will show you a customizable JavaScript rich text editor.
- );
- }
-}
-~~~
-
-- After that use the `new Richtext` constructor to initialize RichText in the container created above:
-
-~~~js title="RichText.js"
-class RichText extends Component {
- componentDidMount() {
- this.richtext = new Richtext(this.el, {
- toolbarBlocks: ["default", "clear", "fullscreen"]
- });
- }
-}
-~~~
-
-
-#### Changing config
-
-- Next you can do some actions, e.g. add a new control into the toolbar:
-
-~~~js title="RichText.js"
-class RichText extends Component {
- componentDidMount() {
- this.richtext = new Richtext(this.el, {
- toolbarBlocks: ["default", "clear", "fullscreen"]
- });
- this.richtext.toolbar.data.add({
- value:"MyAction"
- });
- }
-}
-~~~
-
-
-### Scenario 2. Exposing RichText data and config
-
-This variant adds flexibility in the control over RichText data and configuration by allowing access to them from other parts of the application.
-
-#### RichText initialization
-
-- The first step is the same. Create a file, let it be `RichText2.js` this time, and add the `RichText` class and use the `new RichText` constructor to initialize RichText.
-
-~~~js title="RichText2.js"
-class RichTextComponent extends Component {
- componentDidMount() {
- this.richtext = new Richtext(this.el, {
- // config here
- });
- }
-}
-~~~
-
-- Define the configuration properties of RichText in the object passed as a second parameter of the constructor:
-
-~~~js
-class RichTextComponent extends Component {
- componentDidMount() {
- this.richtext = new Richtext(this.el, {
- mode: this.props.mode
- });
- }
-}
-~~~
-
-Thus the `props` configuration option will be applied to the RichText widget configuration.
-
-- Then create a container for RichText using the `render()` function:
-
-~~~js title="RichText2.js"
-render() {
- return (
-
- );
-}
-~~~
-
-#### Working with configuration options
-
-- Set the list of used RichText configuration properties and their types in the `props` configuration option:
-
-~~~js title="RichText2.js"
-class RichtextComponent extends Component {
- componentDidMount() {
- this.richtext = new Richtext(this.el, {
- mode: this.props.mode
- });
- }
-}
-RichtextComponent.propTypes = {
- mode: PropTypes.string,
- value: PropTypes.string,
- dataType: PropTypes.string,
- onChange: PropTypes.func
-};
-RichtextComponent.defaultProps = {
- mode: "classic",
- dataType: "html"
-}
-~~~
-
-Since the properties of RichText are exposed they are available to work with outside the component. In the example below the `"document"` mode is set for the richtext:
-
-~~~js title="BasicSample.js"
-
-
-
-~~~
-
-
-#### Working with RichText API
-
-This variant of using RichText in a React application allows working with its API moving all calls of methods and event handlers into a separate file.
-
-First, you can add a couple of wrappers for convenient work with RichText API. The example below shows how you can wrap actions for setting RichText value and handling the `change` event taking into account the type of data:
-
-~~~js title="RichText2.js"
-class RichtextComponent extends Component {
- componentDidMount() {
- this.richtext = new Richtext(this.el, {
- mode: this.props.mode
- });
-
- if (this.props.value) {
- this.richtext.setValue(this.props.value, this.props.dataType);
- }
- if (this.props.onChange) {
- this.richtext.events.on("change", () => {
- this.props.onChange(this.richtext.getValue(this.props.dataType));
- });
- }
- }
-}
-~~~
-
-After that you can use the ready wrappers in other parts of application.
-
-- Create a `DataSample.js` file and describe the methods you want to use while working with the richtext. In the example below the `updateMarkdown` and `updateHTML` methods are added for updating the the content of the RichText editor:
-
-~~~js title="DataSample.js"
-class DataSample extends Component {
- constructor(props) {
- super(props);
- this.state = {
- html: '',
- markdown: ``
- }
- }
- updateMarkdown(value) {
- this.setState({...this.state, markdown: value});
- }
- updateHTML(value) {
- this.setState({...this.state, html: value});
- }
-}
-~~~
-
-- Use the above methods to update the Richtext content depending on the type of entered data when some changes are made:
-
-~~~js title="DataSample.js"
-class DataSample extends Component {
- ...
- render() {
- return (
-
-
HTML serialize
- this.updateHTML(val)}>
-
-
-
Markdown serialize
- this.updateMarkdown(val)}>
-
- );
- ...
- }
-}
-~~~
-
-
diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md
new file mode 100644
index 0000000..e14c464
--- /dev/null
+++ b/docs/guides/stylization.md
@@ -0,0 +1,89 @@
+---
+title: Styling
+sidebar_label: Styling
+description: You can learn about the styling 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.
+---
+
+# Styling
+
+You can fully customize the appearance of DHTMLX RichText by overriding CSS variables and applying custom styles to specific parts of the widget.
+
+This guide shows how to apply a **dark theme** and use available class names to style the editor’s menubar, toolbar, popup, and content area.
+
+## Default structure and class names
+
+RichText uses the following core classes to structure its UI:
+
+| Class name | Description |
+|------------------------|---------------------------------------------|
+| `.wx-richtext` | Root container of the RichText widget |
+| `.wx-richtext-menubar` | Container for menubar |
+| `.wx-richtext-menu` | Container for menubar dropdown menu |
+| `.wx-richtext-toolbar` | Container for toolbar |
+| `.wx-editor-area` | Container for main editable content area |
+
+You can use these classes in your custom CSS selectors to override the appearance of the RichText editor.
+
+## Overriding default styles
+
+You can override RichText's default styles by redefining CSS variables on the `#root` container or on specific sub-elements:
+
+```html
+
+
+
+```
+
+:::note
+These styles will apply a dark background, adjust button and icon colors, and improve visibility for dark UI themes.
+:::
+
+## List of supported CSS variables
+
+| Variable name | Description |
+| ---------------------------- | ------------------------------------ |
+| `--wx-background` | Background color of editor and popup |
+| `--wx-background-alt` | Alternate background for menubar |
+| `--wx-color-primary` | Accent color for links, blockquotes, and borders of resizing pictures |
+| `--wx-color-font` | Main font color (for editor, menubar, and toolbar)|
+| `--wx-color-font-alt` | Alternate font color |
+| `--wx-color-font-disabled` | Disabled text color (for menubar and toolbar elements)|
+| `--wx-border` | Border style used across the editor |
+| `--wx-color-secondary-hover` | Hover state background for buttons within menubar and toolbar |
+| `--wx-button-active` | Active state background for buttons within menubar and toolbar |
+| `--wx-icon-color` | Color for toolbar arrow icons used for dropdown |
+| `--wx-popup-border` | Border for popup elements |
+
+## Best practices
+
+* Use `color-scheme: dark` to improve native input styling in dark mode
+* Avoid changing layout-related properties (like `display`, `position`) unless necessary
+
+## Live demo
+
+In this snippet you can see how to apply a custom style to RichText:
+
+
+
+**Related articles:** [Customization](guides/configuration.md)
diff --git a/docs/guides/typescript_support.md b/docs/guides/typescript_support.md
new file mode 100644
index 0000000..40d0317
--- /dev/null
+++ b/docs/guides/typescript_support.md
@@ -0,0 +1,21 @@
+---
+sidebar_label: TypeScript support
+title: TypeScript support
+description: You can learn about using typescript with the DHTMLX JavaScript RichText library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.
+---
+
+# TypeScript support
+
+Starting from v2.0, the library of DHTMLX RichText provides an ability to use TypeScript definitions. The built-in support of TypeScript works out of the box.
+
+:::note
+You can try out the functionality right in our Snippet Tool.
+:::
+
+## Advantages of using TypeScript
+
+Why do you need to use DHTMLX RichText with TypeScript?
+
+The main benefit of TypeScript is that it allows you to significantly increase the efficiency of the development process.
+
+The way of building an application becomes more robust as checking the types together with autocompletion allow you to avoid potential mistakes. Besides, TypeScript provides you with information about types of data you should use while working with the API of the DHTMLX RichText library.
diff --git a/docs/guides/vuejs_integration.md b/docs/guides/vuejs_integration.md
deleted file mode 100644
index d6eda27..0000000
--- a/docs/guides/vuejs_integration.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-sidebar_label: Integration with Vue.js
-title: Integration with Vue.js
-description: This guide provides explanations on possible ways of adding and initializing DHTMLX Rich Text Editor in Vue-based web apps.
----
-
-You can use DHTMLX Richtext in an application created with the [Vue.js](https://vuejs.org/) framework. [Check the demo on Github](https://github.com/DHTMLX/vuejs-widgets).
-
-:::note
-Note, that the implementation provided below is not the only way to use DHTMLX Richtext in a Vue.js-based application. It gives you initial schema of integration and implies further
-extension of the app functionality depending on your goals.
-:::
-
-## Including source files
-
-To add RichText package into your Vue.js-based app you need to [download the component package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project.
-
-Then include `richtext.js` and `richtext.css` files into a page.
-Make sure that you set correct relative paths to these files:
-
-~~~html title="index.html"
-
-
-~~~
-
-## Initialization
-
-There are two possible scenarios of initializing RichText inside a Vue application. One consists in isolating RichText structure and data inside of the Vue component and another one suggests
-separating view and data parts with the possibility of interaction between them.
-
-### Scenario 1. Isolating RichText in a Vue component
-
-In this variant RichText configuration and data are held inside of the Vie component with no bonds with the external part of the application.
-
-#### RichText initialization
-
-- Create a `RichText.vue` file and add a container for RichText inside the `` tags. Define the name of the container in the `ref` attribute:
-
-~~~js title="RichText.vue"
-
-
-
-~~~
-
-- Define the JS part of the Vue component and use the `new RichText` constructor to initialize RichText inside of the container that you've set above:
-
-~~~js title="RichText.vue"
-
-~~~
-
-#### Changing config
-
-- Next you can do some actions, e.g. add a new control into the toolbar:
-
-~~~js title="RichText.vue"
-
-~~~
-
-
-### Scenario 2. Exposing RichText data and config
-
-This variant adds flexibility in the control over RichText data and configuration by allowing access to them from other parts of the application.
-
-#### RichText initialization
-
-- The first step is the same. Create a file, let it be `RichText2.vue` this time, and add a container for the RichText inside the `` tags:
-
-~~~js title="RichText.vue"
-
-
-
-~~~
-
-- Then initialize RichText with the `new RichText` constructor and define the configuration properties of RichText in the object passed as a second parameter of the constructor:
-
-~~~js title="RichText.vue"
-
-~~~
-
-#### Working with configuration options
-
-- Set the list of used RichText configuration properties and their types in the `props` configuration option:
-
-~~~js title="RichText.vue"
-
-~~~
-
-The properties of RichText are exposed and available to work with outside the component. For example, you can:
-
-- Create another file and change the configuration of RichText from there. In the example below the mode of a richtext id changed to "document":
-
-~~~js title="BasicSample.vue"
-
-
-
-
-
-~~~
-
-
-#### Working with RichText API
-
-This variant of using RichText in a Vue.js application allows working with its API moving all calls of methods and event handlers into a separate file.
-
-First, you can add a couple of wrappers for convenient work with RichText API. The example below shows how you can wrap actions for setting RichText value and handling the `change` event taking into account the type of data:
-
-~~~js title="RichText2.vue"
-export default {
- props: {
- css: String,
- mode: {type: String, default: "classic"},
- value: String,
- dataType: {type: String, default: "html"}
- },
- mounted: function() {
- this.richtext = new Richtext(this.$refs.container, {
- mode: this.mode,
- css: this.css
- });
- if (this.value) {
- this.richtext.setValue(this.value, this.dataType);
- }
- this.richtext.events.on("change", () => {
- this.$emit("change", this.richtext.getValue(this.dataType));
- });
- }
-}
-~~~
-
-After that you can use the ready wrappers in other parts of application.
-
-- Create a `DataSample.vue` file and describe the methods you want to use while working with the richtext. In the example below the `updateMarkdown` and `updateHTML` methods are added for updating the
-the content of the RichText editor:
-
-~~~js title="DataSample.vue"
-
-~~~
-
-- Use the above methods to update the Richtext content depending on the type of entered data when some changes are made:
-
-~~~js title="DataSample.vue"
-
-
-
HTML serialize
-
-
Markdown serialize
-
-
-
-~~~
-
-
-
-
-
-
-
-
diff --git a/docs/guides/working_with_richtext.md b/docs/guides/working_with_richtext.md
deleted file mode 100644
index 4bc8de2..0000000
--- a/docs/guides/working_with_richtext.md
+++ /dev/null
@@ -1,171 +0,0 @@
----
-sidebar_label: Working with RichText
-title: Working with RichText
-description: This guide covers the main aspects of working with DHTMLX Rich Text Editor such as saving the edited text, displaying statistics, enabling/disabling the fullscreen mode, and the editor API.
----
-
-The API of DHTMLX Richtext includes a basic set of methods that let you perform operations on the component. You can serialize edited text into either HTML or Markdown formats, get the number of the typed characters and enter/exit the full screen mode of the editor on the fly.
-
-Getting content from editor
--------------------
-
-After you've entered the necessary text into the editor and formatted it to your taste, you can save the result in any of [supported formats](guides/loading_data.md#format-of-content).
-
-To save the edited text, make use of the [getValue()](api/methods.md#getvalue) method. The method takes an only parameter:
-
-- `mode` - (*string*) the format the text should be saved in: `"html"`, `"markdown"` or `"text"` (for a plain text); `"html"` is used by default
-
-~~~js
-// getting content in the Markdown format
-var content = richtext.getValue("markdown");
-~~~
-
-**Related sample:** [Get Value](https://snippet.dhtmlx.com/ujx3c71j)
-
-If you are in two minds about how to add content into the RichText editor, there is the [Setting Content](guides/loading_data.md) article.
-
-Statistics
----------------------
-
-RichText editor allows you to show statistics about the edited text. There is the **Statistics** control in the toolbar that serves for this purpose:
-
-
-
-### Getting statistics
-
-You can provide users with information about the number of characters, words and characters excluding spaces with the help of the [getStats()](api/methods.md#getstats) method.
-
-~~~js
-var stats = richtext.getStats();
-~~~
-
-The method returns an object with available statistical data about the text edited in the RichText editor. For example:
-
-~~~js
-{chars: 467, words: 80, charsExlSpace: 393}
-~~~
-
-**Related sample:** [Get Stats](https://snippet.dhtmlx.com/3qdbktwo)
-
-You can also get each field of statistical data separately, as it described below.
-
-#### Characters
-
-To return the count of characters typed into the editor, use the `chars` property of the `getStats()` method:
-
-~~~js
-var chars = richtext.getStats().chars;
-~~~
-
-#### Words
-
-To return the count of words typed into the editor, use the `words` property of the `getStats()` method:
-
-~~~js
-var words = richtext.getStats().words;
-~~~
-
-#### Characters without spaces
-
-To return the count of characters typed into the editor excluding the number of spaces, use the `charsExlSpace` property of the `getStats()` method:
-
-~~~js
-var chars = richtext.getStats().charsExlSpace;
-~~~
-
-#### Custom statistics
-
-It is also possible to return a value of the custom statistical parameter set via the [customStats](api/properties.md#customstats) configuration option, e.g. the number of sentences. For that, use the name of the custom property as a property of the `getStats()` method:
-
-```js
-var richtext = new dhx.Richtext("rich", {
- customStats: [
- {
- name: "chars"
- },
- {
- name: "words"
- },
- {
- name: "sentences",
- cb: function(text) {
- var rawSentences = text.split(/[.?!]+/);
- var count = 0;
- for (var i=0; i 0) {
- count += 1;
- }
- }
- return count;
- }
- }
- ],
- toolbarBlocks: ["default", "stats"]
-});
-
-// return the number of sentences typed into the editor
-var sentences = richtext.getStats().sentences;
-```
-
-### How to display statistics
-
-Using the [getStats()](api/methods.md#getstats) method you can display info on the number of entered characters in any part of your application. For example, in a separate container by a click on a button:
-
-~~~js
-
-
-
- The count of characters:
-
-
-function calc() {
- document.getElementById('characters-amount').innerText = richtext.getStats().chars;
-}
-~~~
-
-**Related sample:** [Get Stats](https://snippet.dhtmlx.com/3qdbktwo)
-
-Full screen mode
--------------------
-
-You can enter/exit the full screen mode for the Rich text editor with the help of the corresponding API methods: [fullScreen()](api/methods.md#fullscreen) and [exitFullScreen()](api/methods.md#exitfullscreen):
-
-~~~js
-// enter full screen
-richtext.fullScreen();
-
-// exit full screen
-richtext.exitFullScreen();
-~~~
-
-Editor API
------------
-
-The editor of RichText contains a set of methods that make it easy to work with text on the fly. In order to get access to the API of the editor, call the [getEditorAPI()](api/methods.md#geteditorapi) method.
-It returns an object with all available methods.
-
-~~~js
-var EditorAPI = richtext.getEditorAPI();
-~~~
-
-The list of methods included into the object returned by the `getEditorAPI()` method is the following:
-
-- [add()](api/editor_api_methods.md#add)
-- [getModel()](api/editor_api_methods.md#getmodel)
-- [getPosition()](api/editor_api_methods.md#getposition)
-- [getSelection()](api/editor_api_methods.md#getselection)
-- [remove()](api/editor_api_methods.md#remove)
-- [setModel()](api/editor_api_methods.md#setmodel)
-- [setSelection()](api/editor_api_methods.md#setselection)
-- [update()](api/editor_api_methods.md#update)
-
-For example, to add a text into the RichText editor, use the following code:
-
-~~~js
-richtext.getEditorAPI().add("text");
-~~~
-
-**Related sample:** [Add](https://snippet.dhtmlx.com/6dmccf0l)
-
-
-
diff --git a/docs/how_to_start.md b/docs/how_to_start.md
index b04c9fc..2227c79 100644
--- a/docs/how_to_start.md
+++ b/docs/how_to_start.md
@@ -1,86 +1,109 @@
---
sidebar_label: How to start
title: How to start
-description: Learn how to quickly create DHTMLX Rich Text Editor on a page and set up its basic configuration in four simple steps.
+description: You can explore how to start working with DHTMLX RichText 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.
---
-RichText editor will make text editing quick and comfortable due to the inbuilt set of handy formatting tools.
-Follow this comprehensive and easy-to-reproduce tutorial to create RichText editor on a page and start working with it.
+# How to start
-
+This clear and comprehensive tutorial will guide your through the steps you need to take in order to get a fully functional RichText on a page.
-Step 1. Include source files
---------------------------
+
-First create an HTML file with the name `index.html`. Then include the source files of DHTMLX Richtext into this file.
-[Have a look at the structure of RichText package](guides/initialization.md#including-source-files).
+## Step 1. Including source files
-You need to include the following two files:
+Start from creating an HTML file and call it *index.html*. Then proceed to include RichText source files into the created file.
-- the JS file of DHTMLX Richtext
-- the CSS file of DHTMLX Richtext
+There are two necessary files:
-~~~html title="index.html"
+- the JS file of RichText
+- the CSS file of RichText
+
+~~~html {5-6} title="index.html"
-
- How to Start with DHTMLX Richtext
-
-
-
-
-
-
+
+ How to Start with RichText
+
+
+
+
+
+
~~~
-Step 2. Create RichText
---------------------------
+### Installing RichText via npm or yarn
-At this step you can add RichText on a page. There are two easy steps:
+You can import JavaScript RichText into your project using **yarn** or **npm** package manager.
-- Open the `index.html` file and create a DIV container in it.
-- Initialize DHTMLX Richtext in the container with the help of the `dhx.Richtext` constructor. As parameters of the constructor function, pass the container you've created above and the configuration object of RichText:
+#### Installing trial RichText via npm or yarn
-~~~html title="index.html"
-
-
-
- How to Start with DHTMLX Richtext
-
-
-
-
-
-
-
-
-~~~
+:::info
+If you want to use trial version of RichText, download the [**trial RichText package**](https://dhtmlx.com/docs/products/dhtmlxRichtext/download.shtml) and follow steps mentioned in the *README* file. Note that trial RichText is available 30 days only.
+:::
-Step 3. Configure RichText
-------------------------------
+#### Installing PRO RichText via npm or yarn
-Now it's time to define the desired configuration options to make RichText meet you needs.
+:::info
+You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Please note that access to the private **npm** is available only while your proprietary RichText license is active.
+:::
-RichText provides several options that let you adjust the toolbar appearance and behavior as well as choose the most suitable mode of work with a document. [Learn all the available settings](api/properties.md).
+## Step 2. Creating RichText
-For example, you can specify the `"document"` mode of RichText displaying:
+Now you are ready to add RichText to the page. First, let's create the `
` container for RichText. So, take the following steps:
-~~~js
-var rich = new dhx.Richtext("richtext_container", {
- mode: "document"
-});
+- specify a DIV container in the *index.html* file
+- initialize RichText using the `richtext.Richtext` constructor
+
+As parameters, the constructor takes any valid CSS selector of HTML container where the RichText will be placed into, as well as corresponding configuration objects.
+
+~~~html {9,12-14} title="index.html"
+
+
+
+ How to Start with RichText
+
+
+
+
+
+
+
+
+
~~~
-There is a [detailed description of available RichText configuration settings](guides/configuration.md).
+## Step 3. Configuring RichText
+
+Next you can specify configuration properties you want the RichText component to have when initialized.
+
+To start working with RichText, first you need to provide the initial data for editor via the [`value`](api/config/value.md) property. Beside this, you can enable [**menubar**](api/config/menubar.md), customize [**toolbar**](api/config/toolbar.md), specify [**fullscreen**](api/config/fullscreen-mode.md) and [**layout**](api/config/layout-mode.md) modes, apply new [**locale**](api/config/locale.md) as well as [**default styles**](api/config/default-styles.md).
+
+~~~jsx {2-12}
+const editor = new richtext.Richtext("#root", {
+ menubar: true,
+ toolbar: false,
+ fullscreenMode: true,
+ layoutMode: "document",
+ locale: richtext.locales.cn
+ defaultStyles: {
+ h4: {
+ "font-family": "Roboto"
+ },
+ // other settings
+ }
+});
+~~~
-Step 4. Set content (optional)
--------------------------
+## What's next
-If necessary, you can parse some text in the HTML or Markdown format on the RichText initialization. Read more about this feature in the [related article](guides/loading_data.md).
\ No newline at end of file
+That's all. Just three simple steps and you have a handy tool for editing content. Now you can start working with your content or keep exploring the inner world of JavaScript RichText.
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..d6a84fe
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,126 @@
+---
+sidebar_label: RichText overview
+title: RichText overview
+slug: /
+description: You can have an overview of DHTMLX JavaScript RichText library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.
+---
+
+# RichText overview
+
+**DHTMLX RichText** is a flexible and lightweight WYSIWYG editor built with JavaScript. Designed to provide a seamless editing experience in modern web applications, RichText offers a clean UI, rich formatting capabilities, and full control over content rendering. Whether you're building a CMS, an internal admin tool, or an embedded document editor, RichText can be easily integrated and customized to match your needs.
+
+**DHTMLX RichText** component includes the following features:
+
+- Two [**layout modes**](api/config/layout-mode.md)
+
+- Content serialization to both plain text and HTML
+
+- Configurable [**toolbar**](api/config/toolbar.md) with built-in and custom buttons
+
+- Static [**menubar**](api/config/menubar.md) that can be shown or hidden
+
+- Image uploading, rich formatting, custom styling, and full screen mode
+
+- [Full API access](api/overview/main_overview.md) for [event handling](api/overview/event_bus_methods_overview.md), [content manipulation](api/overview/methods_overview.md), and [reactive state management](api/overview/state_methods_overview.md)
+
+RichText is framework-agnostic and can be easily integrated with [React](guides/integration_with_react.md), [Angular](guides/integration_with_angular.md), [Vue](guides/integration_with_vue.md), and [Svelte](guides/integration_with_svelte.md) frameworks, making it suitable for a wide range of front-end ecosystems.
+
+This documentation provides detailed guidance on installation, configuration, usage, and customization. You'll find examples for common scenarios, [full API references](api/overview/main_overview.md), and best practices for embedding RichText into your application.
+
+## RichText structure
+
+### Menubar
+
+The RichText menubar provides access to editing actions such as creating a new document, printing, importing/exporting content, and more. It is hidden by default.
+
+Use the [`menubar`](api/config/menubar.md) property to toggle its visibility. While the menubar can be enabled or disabled, its contents are not configurable at this time.
+
+
+
+
+
+### Toolbar
+
+The RichText toolbar provides quick access to text formatting and structural editing features. By default, the [toolbar](api/config/toolbar.md#default-config) is enabled and displays a predefined set of commonly used controls such as bold, italic, font settings, list formatting, and more.
+
+The [`toolbar`](api/config/toolbar.md) property allows you to fully customize the toolbar’s content and layout. You can enable or disable toolbar, rearrange default controls, or define a fully custom toolbar using an array of predefined button identifiers and custom button objects.
+
+
+
+
+
+### Editor
+
+The RichText editor is the central area where users create and format content. You can control the editor’s appearance and behavior through configuration options such as [`value`](api/config/value.md), [`layoutMode`](api/config/layout-mode.md), and [`defaultStyles`](api/config/default-styles.md). RichText also supports custom styling, image embedding, and responsive layout adjustments to match the needs of your application.
+
+#### Two working modes
+
+DHTMLX RichText can work with content in "classic" and "document" modes. You can choose the most suitable mode to feel comfortable while editing text. Use the [`layoutMode`](api/config/layout-mode.md) property to switch modes programatically.
+
+- **"classic"**
+
+
+
+## Supported formats
+
+The RichText editor supports [parsing](api/methods/set-value.md) and [serialization](api/methods/get-value.md) of content in the **HTML** and plain text formats.
+
+#### HTML format
+
+