diff --git a/docs/api/config/image-upload-url.md b/docs/api/config/image-upload-url.md
index 761b8c8..4c1c781 100644
--- a/docs/api/config/image-upload-url.md
+++ b/docs/api/config/image-upload-url.md
@@ -8,7 +8,19 @@ description: You can learn about the imageUploadUrl config in the documentation
 
 ### Description
 
-@short: Optional. Specifies the URL which will be used for image upload
+@short: Optional. Specifies the URL which will be used for image upload (from the toolbar, menubar, clipboard paste, or drag-and-drop)
+
+When the property is set, RichText uploads each inserted image to the given endpoint and inserts the URL returned by the server.
+
+When the property is omitted or set to a falsy value (`""`, `null`, `undefined`), RichText switches to **inline mode**: the image file is read on the client and embedded directly into the content as a base64 data URL — no server is required. Inline images larger than 1024×800 are proportionally downscaled to fit within these limits.
+
+:::note
+Inline (base64) images are not preserved by the built-in DOCX / PDF [export](api/events/export.md). If you rely on export, supply an `imageUploadUrl` so that images reference an external location.
+:::
+
+:::caution
+Base64 encoding increases the encoded payload by roughly one third relative to the original file. A document with several large inline images grows accordingly, which affects the size of the value returned by [`getValue()`](api/methods/get-value.md), the memory footprint of the editor, and the cost of persisting or transferring the content. Prefer a server `imageUploadUrl` for documents that contain many or large images.
+:::
 
 ### Usage
 
@@ -18,15 +30,26 @@ imageUploadUrl?: string;
 
 ### Example
 
+Upload images to a server endpoint:
+
 ~~~jsx {3}
 // initialize RichText
 new richtext.Richtext("#root", {
-    imageUploadUrl: "some URL"
+    imageUploadUrl: "https://example.com/upload"
+    // other configuration properties
+});
+~~~
+
+Insert images inline as base64 (no server required) — omit the property or pass an empty string:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    // imageUploadUrl is not set, images are inserted as base64 data URLs
     // other configuration properties
 });
 ~~~
 
-**Change log:** The property was added in v2.0
+**Change log:** The property was added in v2.0. Starting with v2.1, the property is optional: when omitted, images are inserted inline as base64 data URLs.
 
 **Related articles:** [Configuration](guides/configuration.md)
 
diff --git a/docs/api/config/trigger-template.md b/docs/api/config/trigger-template.md
new file mode 100644
index 0000000..aed2bb4
--- /dev/null
+++ b/docs/api/config/trigger-template.md
@@ -0,0 +1,68 @@
+---
+sidebar_label: triggerTemplate
+title: triggerTemplate Config
+description: You can learn about the triggerTemplate 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.
+---
+
+# triggerTemplate
+
+### Description
+
+@short: Optional. Customizes how RichText renders items in the suggestion dropdown opened by a [`triggers`](api/config/triggers.md) entry
+
+By default, the dropdown shows each item's `label` as plain text. Use `triggerTemplate` to render richer rows — for example, an avatar plus a name and an email.
+
+### Usage
+
+~~~jsx {}
+function triggerTemplate({ data, trigger }) {
+    return "HTML template of the suggestion item";
+};
+~~~
+
+### Parameters
+
+The callback function takes an object with the following parameters:
+
+- `data` - the current suggestion item (`{ id, label, url }`, plus any custom fields you add to the trigger's `data` source)
+- `trigger` - the trigger character that opened the dropdown (`"@"`, `"#"`, etc.)
+
+:::tip
+The dropdown default width is `160px`. If you need more space for your template, add the `.wx-editor` parent in front of the selector:
+
+~~~css {}
+.wx-editor .wx-suggest-anchor {
+    width: 220px;
+}
+~~~
+:::
+
+### Example
+
+The following code snippet configures two triggers: `@` for mentions and `#` for tags. Use `triggerTemplate` to expand the `trigger` value to render each dropdown differently. For the `@` dropdown the template returns a custom HTML row with an avatar (`data.image`), a nickname (`data.label`), and a full name (`data.name`). For the `#` trigger the template uses the `label`:
+
+~~~jsx {5-6,8-15}
+const { template, Richtext } = richtext;
+
+new Richtext("#root", {
+    triggers: [
+        { trigger: "@", data: people },
+        { trigger: "#", data: tags }
+    ],
+    triggerTemplate: template(obj => {
+        if (obj.trigger === "@") {
+            return `<div class="user">
+                <img class="user-avatar" src="${obj.data.image}">
+                <div class="user-nickname">${obj.data.label}</div>
+                <div class="user-name">${obj.data.name}</div>
+            </div>`;
+        }
+        // other triggers (for example, "#") use the plain label
+        return obj.data.label;
+    })
+});
+~~~
+
+**Change log:** The property was added in v2.1
+
+**Related articles:** [Mentions and tags](guides/mentions_and_tags.md)
diff --git a/docs/api/config/triggers.md b/docs/api/config/triggers.md
new file mode 100644
index 0000000..e679aa2
--- /dev/null
+++ b/docs/api/config/triggers.md
@@ -0,0 +1,241 @@
+---
+sidebar_label: triggers
+title: triggers Config
+description: You can learn about the triggers 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.
+---
+
+# triggers
+
+### Description
+
+@short: Optional. Defines dropdown triggers for inserting mentions, tags, and other tokens
+
+When a user types a configured character (for example, `@` or `#`), RichText opens a dropdown with predefined items. When the user selects an item, RichText inserts it into the document as a non-editable token (`<a data-token="..." data-token-id="...">`).
+
+### Usage
+
+~~~jsx {}
+triggers?: Array<{
+    trigger: string,
+    data: Array<{ id?: string; label?: string; url?: string }>
+        | ((query: string) =>
+            Array<{ id?: string; label?: string; url?: string }>
+            | Promise<Array<{ id?: string; label?: string; url?: string }>>),
+    showTrigger?: boolean,
+    action?: (item) => void
+}>;
+~~~
+
+### Parameters
+
+Each entry of the `triggers` array accepts the following fields:
+
+- `trigger` - (required) the character that opens the suggestion dropdown (for example, `"@"`, `"#"`, `"/"`, `"$"`)
+- `data` - (required) the data source for the dropdown; can be an array, a sync function, or an async function. See [Data source forms](#data-source-forms)
+- `showTrigger` - (optional) when `true` (default), RichText keeps the trigger character in the inserted token (for example, `@Alice`); when `false`, RichText inserts only `label` (for example, `Alice`)
+- `action` - (optional) a custom callback called when a user selects an item. When set, RichText removes the typed trigger text (the trigger character plus the query) and calls `action(item)` **instead of** inserting a token. The callback receives the picked item and can insert any content instead of the selected one. The `action` parameter takes priority over `showTrigger`, which has no effect when `action` is set. See [Custom action](#custom-action)
+
+### Data source forms
+
+* **Static array** — RichText filters the array automatically by matching the query against `label` (case-insensitive, `startsWith`):
+
+~~~jsx {3-7}
+new richtext.Richtext("#root", {
+    triggers: [{
+        trigger: "@",
+        data: [
+            { id: "alice", label: "Alice" },
+            { id: "bob",   label: "Bob"   }
+        ]
+    }]
+});
+~~~
+
+* **Sync function** — RichText calls your function with the current `query` string; you do the filtering and return the matching array:
+
+~~~jsx {3-6}
+new richtext.Richtext("#root", {
+    triggers: [{
+        trigger: "#",
+        data: query => tags.filter(t =>
+            t.label.toLowerCase().startsWith(query.toLowerCase())
+        )
+    }]
+});
+~~~
+
+* **Async function** — RichText calls your function with the current `query` string; return a `Promise` that resolves to the matching array. Useful for server-side search:
+
+~~~jsx {3-8}
+new richtext.Richtext("#root", {
+    triggers: [{
+        trigger: "+",
+        data: async query => {
+            const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);
+            const users = await res.json();
+            return users.map(u => ({ id: String(u.id), label: u.name, url: u.website }));
+        }
+    }]
+});
+~~~
+
+### Suggestion item fields
+
+Each item in `data` (or each item returned by a function) has the following fields:
+
+- `id` - (optional) unique identifier saved on the inserted token. If omitted, RichText generates an ID automatically
+- `label` - (optional) the text shown in the dropdown and inserted into the document. Required only for the default rendering; with a custom [`triggerTemplate`](api/config/trigger-template.md) you can render items from other fields (for example, `template(({ data }) => data.id)`) and omit `label`
+- `url` - (optional) URL associated with the item. RichText stores the URL as the inserted token's `href` attribute. `Ctrl+Click` on the token opens the link
+
+An item may also include any number of custom fields beyond `id`, `label`, and `url` (for example, `code` for an emoji, or `image` and `name` for an avatar). These extra fields are passed through to the [`triggerTemplate`](api/config/trigger-template.md) callback and to the `action` callback.
+
+### Rendered token
+
+When a user selects an item in the dropdown, RichText inserts a non-editable token element into the document:
+
+~~~html {}
+<a data-token="@" data-token-id="alice" href="mailto:alice@example.com">@Alice</a>
+~~~
+
+- `@` (in `data-token="@"`) - the item's `trigger`
+- `alice` (in `data-token-id="alice"`) - the item's `id`
+- `mailto:alice@example.com` (in `href="mailto:alice@example.com"`) - the item's `url`
+- `@Alice` - the combination of `trigger` and `label`; with `showTrigger: false` it would be just `Alice`
+
+Use the `data-token` and `data-token-id` attributes to target tokens with CSS, for example, to highlight all mentions of a user:
+
+~~~css {}
+.wx-editor-content a[data-token="@"][data-token-id="alice"] {
+    background: #fb8500;
+    color: #fff;
+}
+~~~
+
+### Custom action
+
+By default, when a user picks an item, RichText inserts the item into the document as a token. Set the `action` parameter to run your code instead: RichText removes the typed trigger string (the trigger character and the query) and calls the `action(item)` callback with the picked item. No token is inserted, so you can decide what to add to the document (or run your custom code). The `action` parameter takes priority over `showTrigger`. When `action` is set, `showTrigger` is ignored.
+
+#### Add emoji
+
+A common use case is inserting an emoji from a `:` trigger, where each item contains a custom `code` field. Pair `action` with [`triggerTemplate`](api/config/trigger-template.md) so the dropdown shows the emoji itself instead of just its label:
+
+~~~jsx {8,12}
+const { template, Richtext } = richtext;
+
+const editor = new Richtext("#root", {
+    triggers: [
+        {
+            trigger: ":",
+            data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...]
+            action: item => editor.insertValue(`<span>${emojiFromCode(item.code)} </span>`)
+        }
+    ],
+    // render the emoji itself (not just its label) in the dropdown
+    triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`)
+});
+
+function emojiFromCode(code) {
+    return String.fromCodePoint(parseInt(code, 16));
+}
+~~~
+
+#### Group emoji by categories
+
+When the `data` parameter is a function, you are not limited to the built-in `label` matching. You can run your own filtering and keep category headers in the dropdown. Add header items that include a `label` field and do not include `code`. The `data` function first finds the emoji that match the query, then returns emoji together with the headers of the categories that still have matches:
+
+~~~jsx {18-26,31-33,41}
+const { template, Richtext } = richtext;
+
+// header items carry no `code` field; emoji items include one
+const emoji = [
+    { id: "$smileys", label: "Smileys",                 category: 1 }, // category
+    { id: "grinning", label: "grinning", code: "1F600", category: 1 },
+    { id: "smile",    label: "smile",    code: "1F604", category: 1 },
+    { id: "$animals", label: "Animals",                 category: 2 }, // category
+    { id: "dog",      label: "dog",      code: "1F436", category: 2 },
+    { id: "cat",      label: "cat",      code: "1F431", category: 2 }
+];
+
+const editor = new Richtext("#root", {
+    triggers: [
+        {
+            trigger: ":",
+            data: query => {
+                const matched = emoji.filter(item =>
+                    item.code &&
+                    item.label.toLowerCase().startsWith(query.toLowerCase().trim())
+                );
+                const categories = new Set(matched.map(item => item.category));
+                // keep matching emoji plus the headers of categories that still match
+                return emoji.filter(item =>
+                    item.code ? matched.includes(item) : categories.has(item.category)
+                );
+            },
+            action: item => editor.insertValue(`<span>${emojiFromCode(item.code)} </span>`)
+        }
+    ],
+    // render emoji rows normally and category headers in bold
+    triggerTemplate: template(({ data }) =>
+        data.code ? `${emojiFromCode(data.code)} ${data.label}` : `<b>${data.label}</b>`
+    )
+});
+
+function emojiFromCode(code) {
+    return String.fromCodePoint(parseInt(code, 16));
+}
+
+// headers have no `code` — ignore picks on them so they are never inserted
+editor.api.intercept("insert-token", ({ data }) => !!data.code);
+~~~
+
+#### Add slash-style command menu
+
+You can use `action` to build a slash-style command menu (like `/` in Notion or Slack). Store a command name in each item's `id`, its options in a custom `config` field, and let the callback run it with [`api.exec`](api/internal/exec.md):
+
+~~~jsx {13}
+// each item stores an api.exec action name in `id` and its parameters in `config`
+const commands = [
+    { id: "set-text-style", label: "Heading 1",     config: { tag: "h1" } },
+    { id: "insert-list",    label: "Bulleted list", config: { type: "bulleted" } },
+    { id: "insert-line",    label: "Divider" } // no config → `|| {}` applies
+];
+
+const editor = new richtext.Richtext("#root", {
+    triggers: [
+        {
+            trigger: "/",
+            data: commands,
+            action: item => editor.api.exec(item.id, item.config || {})
+        }
+    ]
+});
+~~~
+
+### Example
+
+The following example sets up two triggers: `@` for mentions (each item carries a `url` that becomes the token's `href`) and `#` for tags (label only):
+
+~~~jsx {4,11}
+new richtext.Richtext("#root", {
+    triggers: [
+        {
+            trigger: "@",
+            data: [
+                { id: "alice", label: "Alice", url: "mailto:alice@example.com" },
+                { id: "bob",   label: "Bob",   url: "mailto:bob@example.com"   }
+            ]
+        },
+        {
+            trigger: "#",
+            data: [
+                { id: "css",  label: "CSS"  },
+                { id: "html", label: "HTML" }
+            ]
+        }
+    ]
+});
+~~~
+
+**Change log:** The property was added in v2.1
+
+**Related articles:** [Mentions and tags](guides/mentions_and_tags.md)
diff --git a/docs/api/events/hide-suggest.md b/docs/api/events/hide-suggest.md
new file mode 100644
index 0000000..e458359
--- /dev/null
+++ b/docs/api/events/hide-suggest.md
@@ -0,0 +1,47 @@
+---
+sidebar_label: hide-suggest
+title: hide-suggest Event
+description: You can learn about the hide-suggest 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.
+---
+
+# hide-suggest
+
+### Description
+
+@short: Fires when the suggestion dropdown closes
+
+The event fires when any of these happen:
+
+- the user picks an item from the dropdown
+- the user presses `Escape`
+- the cursor leaves the trigger context (for example, on `Backspace` past the trigger character)
+- the current query returns no matches
+
+### Usage
+
+~~~jsx {}
+"hide-suggest": () => boolean | void;
+~~~
+
+### Parameters
+
+The `hide-suggest` event callback does not receive any parameters.
+
+:::info
+To handle internal events, use [**Event Bus methods**](api/overview/event_bus_methods_overview.md).
+:::
+
+### Example
+
+~~~jsx {5-7}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+// subscribe to the "hide-suggest" event
+editor.api.on("hide-suggest", () => {
+    console.log("Suggestion dropdown closed");
+});
+~~~
+
+**Change log:** The event was added in v2.1
diff --git a/docs/api/events/insert-image.md b/docs/api/events/insert-image.md
index 7898511..ca21475 100644
--- a/docs/api/events/insert-image.md
+++ b/docs/api/events/insert-image.md
@@ -8,7 +8,7 @@ description: You can learn about the insert-image event in the documentation of
 
 ### Description
 
-@short: Fires when inserting image
+@short: Fires when inserting an image (via the toolbar, menubar, clipboard paste, or drag-and-drop)
 
 ### Usage
 
@@ -17,7 +17,7 @@ description: You can learn about the insert-image event in the documentation of
 
 interface IImageContext {
     id: TID;
-    value: string;
+    value: string;  // image source: server URL when imageUploadUrl is set, or a base64 data URL when the image is inlined
     width: number;
     height: number;
     // extra props from uploader ctx, not required for the actual action
@@ -29,6 +29,10 @@ interface IImageContext {
 }
 ~~~
 
+:::note
+The `value` field holds either an external URL (when [`imageUploadUrl`](api/config/image-upload-url.md) is configured and the upload succeeds) or a base64 data URL (when `imageUploadUrl` is omitted and the image is inlined on the client). Handlers that process the source — for example, to rewrite the URL or validate the host — must account for both formats.
+:::
+
 :::info
 For handling inner events you can use [**Event Bus methods**](api/overview/event_bus_methods_overview.md)
 :::
diff --git a/docs/api/events/insert-token.md b/docs/api/events/insert-token.md
new file mode 100644
index 0000000..dea71c5
--- /dev/null
+++ b/docs/api/events/insert-token.md
@@ -0,0 +1,59 @@
+---
+sidebar_label: insert-token
+title: insert-token Event
+description: You can learn about the insert-token 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-token
+
+### Description
+
+@short: Fires after the user picks a suggestion item and RichText inserts it as a token
+
+The `insert-token` event fires after the user picks an item from a trigger dropdown (mentions, tags, or any custom trigger you set up through the [`triggers`](api/config/triggers.md) property).
+
+### Usage
+
+~~~jsx {}
+"insert-token": ({
+    data: {
+        id?: string | number,
+        label?: string,
+        url?: string,
+        // ...any custom fields from the trigger's data source
+    },
+    trigger: string,
+    showTrigger?: boolean,
+    action?: (item) => void
+}) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the `insert-token` event receives an object with the following fields:
+
+- `data` - the picked suggestion item. Contains the `id`, `label`, and `url` of the item, as well as any custom fields you added to the trigger's `data` source
+- `trigger` - the trigger character that opened the dropdown (for example, `"@"` or `"#"`)
+- `showTrigger` - when `false`, RichText inserts only `label`; otherwise the widget also shows the trigger character (default)
+- `action` - a custom action defined for the matching [trigger](api/config/triggers.md). When set, the parameter takes priority over token insertion: RichText removes the typed text (the trigger character and the query) and calls `action(data)` instead of inserting a token. The `showTrigger` parameter has no effect in this case
+
+:::info
+To handle internal events, 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 "insert-token" event
+editor.api.on("insert-token", ({ data, trigger, showTrigger }) => {
+    console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`);
+});
+~~~
+
+**Change log:** The event was added in v2.1
+
+**Related articles:** [Mentions and tags](guides/mentions_and_tags.md)
diff --git a/docs/api/events/show-suggest.md b/docs/api/events/show-suggest.md
new file mode 100644
index 0000000..666bc8b
--- /dev/null
+++ b/docs/api/events/show-suggest.md
@@ -0,0 +1,62 @@
+---
+sidebar_label: show-suggest
+title: show-suggest Event
+description: You can learn about the show-suggest 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-suggest
+
+### Description
+
+@short: Fires when the suggestion dropdown opens for a configured trigger
+
+The `show-suggest` event fires after RichText resolves a non-empty list of items for the current trigger, just before the dropdown opens. Intercept the event to adjust the items, move the dropdown, or cancel it.
+
+### Usage
+
+~~~jsx {}
+"show-suggest": ({
+    trigger: string,
+    query: string,
+    items: Array<{
+        id?: string | number,
+        label?: string,
+        url?: string,
+        // ...any custom fields from the trigger's data source
+    }>,
+    pos: DOMRect
+}) => boolean | void;
+~~~
+
+### Parameters
+
+The callback of the `show-suggest` event receives an object with the following fields:
+
+- `trigger` - the trigger character that opened the dropdown
+- `query` - the text typed after the trigger character (used to filter `items`)
+- `items` - the resolved (and already filtered) list of suggestion items. Each item follows the [suggestion item shape](api/config/triggers.md#suggestion-item-fields): optional `id`, `label`, and `url`, plus any custom fields (such as `image` or `name`) used by [`triggerTemplate`](api/config/trigger-template.md)
+- `pos` - a `DOMRect` describing the cursor position; used to place the dropdown on screen
+
+:::info
+To handle internal events, use [**Event Bus methods**](api/overview/event_bus_methods_overview.md).
+:::
+
+### Example
+
+~~~jsx {6-11}
+// initialize RichText
+const editor = new richtext.Richtext("#root", {
+    triggers: [{ trigger: "@", data: people }]
+    // other configuration properties
+});
+// override the suggestion list before the dropdown opens
+editor.api.intercept("show-suggest", (state) => {
+    if (state.trigger === "@" && state.query === "") {
+        return { ...state, items: state.items.slice(0, 5) };
+    }
+});
+~~~
+
+**Change log:** The event was added in v2.1
+
+**Related articles:** [Mentions and tags](guides/mentions_and_tags.md)
diff --git a/docs/api/methods/get-value.md b/docs/api/methods/get-value.md
index 4ed50ae..971bd9d 100644
--- a/docs/api/methods/get-value.md
+++ b/docs/api/methods/get-value.md
@@ -18,13 +18,14 @@ 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`
+- `encoder` - (optional) a parser used to encode the RichText's content into a custom format. The following formats are available: `html` (default), `text`, and `markdown`
 
 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
+const toTextEncoder = richtext.text.toText;             // text encoder
+const toHTMLEncoder = richtext.html.toHTML;             // html encoder
+const toMarkdownEncoder = richtext.markdown.toMarkdown; // markdown encoder
 ```
 
 ### Example
diff --git a/docs/api/methods/insert-value.md b/docs/api/methods/insert-value.md
new file mode 100644
index 0000000..7f2a43b
--- /dev/null
+++ b/docs/api/methods/insert-value.md
@@ -0,0 +1,45 @@
+---
+sidebar_label: insertValue()
+title: insertValue Method
+description: You can learn about the insertValue 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.
+---
+
+# insertValue()
+
+### Description
+
+@short: Inserts text, Markdown, or HTML content at the current cursor position or replaces the selected text
+
+### Usage
+
+~~~jsx {}
+insertValue: (value: string, encoder?: any): void;
+~~~
+
+### Parameters
+
+- `value` - (required) a value to be inserted into the RichText at the current cursor position. If a selection is active, the selection is replaced with the new value
+- `encoder` - (optional) a parser used to decode the inserted value. The following formats are available: `html` (default), `text`, and `markdown`
+
+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
+const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // markdown encoder
+```
+
+### Example
+
+~~~jsx {6}
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+
+// inserts an HTML link with custom attributes at the cursor position
+editor.insertValue("<a href=\"https://example.com\" title=\"Example\">link</a>");
+~~~
+
+The inserted content is added as a single history entry and can be reverted with one **Undo** step.
+
+**Change log:** The method was added in v2.1
diff --git a/docs/api/methods/set-value.md b/docs/api/methods/set-value.md
index 5d40f94..bb80841 100644
--- a/docs/api/methods/set-value.md
+++ b/docs/api/methods/set-value.md
@@ -19,13 +19,14 @@ 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`
+- `encoder` - (optional) a custom parser used to decode the value from a custom format. The following formats are available: `html` (default), `text`, and `markdown`
 
 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
+const fromTextEncoder = richtext.text.fromText;             // text encoder
+const fromHTMLEncoder = richtext.html.fromHTML;             // html encoder
+const fromMarkdownEncoder = richtext.markdown.fromMarkdown; // markdown encoder
 ```
 
 ### Example
diff --git a/docs/api/overview/events_overview.md b/docs/api/overview/events_overview.md
index 534ad01..be3831d 100644
--- a/docs/api/overview/events_overview.md
+++ b/docs/api/overview/events_overview.md
@@ -18,12 +18,14 @@ You can use these events to extend functionality, track user interaction, or tri
 | [](api/events/cut.md)                                   | @getshort(api/events/cut.md)                   |
 | [](api/events/delete-link.md)                           | @getshort(api/events/delete-link.md)           |
 | [](api/events/export.md)                                | @getshort(api/events/export.md)                |
+| [](api/events/hide-suggest.md)                          | @getshort(api/events/hide-suggest.md)          |
 | [](api/events/import.md)                                | @getshort(api/events/import.md)                |
 | [](api/events/indent.md)                                | @getshort(api/events/indent.md)                |
 | [](api/events/insert-image.md)                          | @getshort(api/events/insert-image.md)          |
 | [](api/events/insert-line.md)                           | @getshort(api/events/insert-line.md)           |
 | [](api/events/insert-link.md)                           | @getshort(api/events/insert-link.md)           |
 | [](api/events/insert-list.md)                           | @getshort(api/events/insert-list.md)           |
+| [](api/events/insert-token.md)                          | @getshort(api/events/insert-token.md)          |
 | [](api/events/outdent.md)                               | @getshort(api/events/outdent.md)               |
 | [](api/events/paste.md)                                 | @getshort(api/events/paste.md)                 |
 | [](api/events/print.md)                                 | @getshort(api/events/print.md)                 |
@@ -36,6 +38,7 @@ You can use these events to extend functionality, track user interaction, or tri
 | [](api/events/set-text-format.md)                       | @getshort(api/events/set-text-format.md)       |
 | [](api/events/set-text-style.md)                        | @getshort(api/events/set-text-style.md)        |
 | [](api/events/show-popup.md)                            | @getshort(api/events/show-popup.md)            |
+| [](api/events/show-suggest.md)                          | @getshort(api/events/show-suggest.md)          |
 | [](api/events/subscript.md)                             | @getshort(api/events/subscript.md)             |
 | [](api/events/superscript.md)                           | @getshort(api/events/superscript.md)           |
 | [](api/events/toggle-fullscreen-mode.md)                | @getshort(api/events/toggle-fullscreen-mode.md)|
diff --git a/docs/api/overview/main_overview.md b/docs/api/overview/main_overview.md
index c89b2fc..9337cae 100644
--- a/docs/api/overview/main_overview.md
+++ b/docs/api/overview/main_overview.md
@@ -25,6 +25,7 @@ new richtext.RichText("#root", {
 | ----------------------------------------------|-------------------------------------------|
 | [](api/methods/get-value.md)                   | @getshort(api/methods/get-value.md)        |
 | [](api/methods/set-value.md)                   | @getshort(api/methods/set-value.md)        |
+| [](api/methods/insert-value.md)                | @getshort(api/methods/insert-value.md)     |
 | [](api/methods/set-config.md)                  | @getshort(api/methods/set-config.md)       |
 | [](api/methods/set-locale.md)                  | @getshort(api/methods/set-locale.md)       |
 | [](api/methods/destructor.md)                  | @getshort(api/methods/destructor.md)       |
diff --git a/docs/api/overview/methods_overview.md b/docs/api/overview/methods_overview.md
index b6b8f67..6c5c41b 100644
--- a/docs/api/overview/methods_overview.md
+++ b/docs/api/overview/methods_overview.md
@@ -14,5 +14,6 @@ Use this reference to quickly navigate to detailed descriptions of each method,
 | [](api/methods/destructor.md)                           | @getshort(api/methods/destructor.md)       |
 | [](api/methods/get-value.md)                            | @getshort(api/methods/get-value.md)        |
 | [](api/methods/set-value.md)                            | @getshort(api/methods/set-value.md)        |
+| [](api/methods/insert-value.md)                         | @getshort(api/methods/insert-value.md)     |
 | [](api/methods/set-config.md)                           | @getshort(api/methods/set-config.md)       |
 | [](api/methods/set-locale.md)                           | @getshort(api/methods/set-locale.md)       |
diff --git a/docs/api/overview/properties_overview.md b/docs/api/overview/properties_overview.md
index 255a158..e545112 100644
--- a/docs/api/overview/properties_overview.md
+++ b/docs/api/overview/properties_overview.md
@@ -18,4 +18,6 @@ They help you control layout, toolbar, value, localization, and other aspects of
 | [](api/config/locale.md)                                 | @getshort(api/config/locale.md)               |
 | [](api/config/menubar.md)                                | @getshort(api/config/menubar.md)              |
 | [](api/config/toolbar.md)                                | @getshort(api/config/toolbar.md)              |
+| [](api/config/trigger-template.md)                       | @getshort(api/config/trigger-template.md)     |
+| [](api/config/triggers.md)                               | @getshort(api/config/triggers.md)             |
 | [](api/config/value.md)                                  | @getshort(api/config/value.md)                |
diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
index 855ae27..0247c54 100644
--- a/docs/guides/configuration.md
+++ b/docs/guides/configuration.md
@@ -16,6 +16,7 @@ You can configure the RichText appearance and behavior with the following proper
 - [`locale`](api/config/locale.md) — apply a localization object on initialization
 - [`defaultStyles`](api/config/default-styles.md) — set default styles for specific block types
 - [`imageUploadUrl`](api/config/image-upload-url.md) — set the endpoint for image uploads
+- [`triggers`](api/config/triggers.md) — enable @mentions, #tags, and custom dropdown triggers (see the [Mentions and tags](guides/mentions_and_tags.md) guide)
 
 ## Layout modes
 
@@ -238,9 +239,13 @@ new richtext.Richtext("#root", {
 });
 ~~~
 
-## Configure the image upload URL
+## Configure image insertion
 
-Pass a URL to the [`imageUploadUrl`](api/config/image-upload-url.md) property to set the server endpoint for toolbar image uploads:
+RichText supports two modes for inserting images via the toolbar, menubar, paste, or drag-and-drop. The mode is selected automatically based on the [`imageUploadUrl`](api/config/image-upload-url.md) property.
+
+### Upload images to a server
+
+Pass a URL to the [`imageUploadUrl`](api/config/image-upload-url.md) property to upload each inserted image to your endpoint. RichText sends the file as `multipart/form-data` (field name `upload`) and inserts the URL returned by the server:
 
 ~~~jsx {2}
 new richtext.Richtext("#root", {
@@ -249,6 +254,23 @@ new richtext.Richtext("#root", {
 });
 ~~~
 
+### Insert images inline as base64
+
+Omit [`imageUploadUrl`](api/config/image-upload-url.md) (or set it to an empty string) to embed images directly into the document content as base64 data URLs. No server is required:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    // imageUploadUrl is not set, images are inserted inline
+    // other configuration properties
+});
+~~~
+
+Inline images larger than 1024×800 are proportionally downscaled to fit within these limits.
+
+:::note
+Inline (base64) images are not preserved by the built-in DOCX / PDF [export](api/events/export.md). If you rely on export, supply an `imageUploadUrl` so that images reference an external location.
+:::
+
 ## Configure default styles
 
 Use the [`defaultStyles`](api/config/default-styles.md) property to set default styles per block type.
diff --git a/docs/guides/mentions_and_tags.md b/docs/guides/mentions_and_tags.md
new file mode 100644
index 0000000..b0a95d2
--- /dev/null
+++ b/docs/guides/mentions_and_tags.md
@@ -0,0 +1,261 @@
+---
+sidebar_label: Mentions and tags
+title: Mentions and tags
+description: 'Learn how to configure @mentions, #tags, and custom dropdown triggers in DHTMLX RichText. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX RichText.'
+---
+
+# Mentions and tags
+
+RichText supports user-defined trigger characters that open a suggestion dropdown inside the document. When the user picks an item, RichText inserts a non-editable token into the document. Typical use cases:
+
+- `@` — mention a person
+- `#` — apply a tag
+- `/` — insert a command or template
+- `$` — insert a financial ticker or variable
+- `:` — insert an emoji
+
+Configure the behavior through the [`triggers`](api/config/triggers.md) property. Each entry binds one character to a data source.
+
+## Configure triggers
+
+Each trigger is an object `{ trigger, data, showTrigger?, action? }` within the [`triggers`](api/config/triggers.md) array. The [`data`](api/config/triggers.md#data-source-forms) field can take three forms:
+
+- A static array — RichText filters it automatically by `label` (case-insensitive, `startsWith`):
+
+~~~jsx {}
+{ trigger: "@", data: people }
+~~~
+
+- A sync function — use it to filter results yourself:
+
+~~~jsx {}
+{
+    trigger: "#",
+    data: query => tags.filter(t =>
+        t.label.toLowerCase().startsWith(query.toLowerCase())
+    )
+}
+~~~
+
+- An async function — use it for server-side search:
+
+~~~jsx {}
+{
+    trigger: "+",
+    data: async query => {
+        const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);
+        const users = await res.json();
+        return users.map(u => ({
+            id:    String(u.id),
+            label: u.name,
+            url:   u.website
+        }));
+    }
+}
+~~~
+
+## Token rendering
+
+When the user picks an item from the dropdown, RichText inserts it as an `<a>` element with two data attributes:
+
+~~~html {2-3}
+<a 
+    data-token="@" 
+    data-token-id="alice" 
+    href="mailto:alice@example.com">@Alice</a>
+~~~
+
+The token is a single non-editable node. `Backspace` deletes it in one step. RichText stores the `url` field in `href`, so `Ctrl+Click` on the token follows the link.
+
+You can style tokens with the `data-token` selector:
+
+~~~css {}
+.wx-editor-content a[data-token="@"][data-token-id="alice"] {
+    background: #fb8500;
+    color: #fff;
+    border-radius: 3px;
+    padding: 0 2px;
+}
+~~~
+
+## Hide the trigger character
+
+Set `showTrigger: false` on a trigger to insert only the item label, without the trigger symbol:
+
+~~~jsx {4}
+{
+    trigger: "/",
+    data: commands,
+    showTrigger: false
+}
+~~~
+
+## Keyboard interaction
+
+Inside the suggestion dropdown you can use the following shortcuts:
+
+- `↑` / `↓` — move between items
+- `Enter` — insert the active item
+- `Escape` — close the dropdown without inserting
+
+## Listen to suggestion events
+
+Three events expose the dropdown lifecycle through the Event Bus:
+
+- [`insert-token`](api/events/insert-token.md) — fires when a user picks an item
+- [`show-suggest`](api/events/show-suggest.md) — fires when the dropdown opens
+- [`hide-suggest`](api/events/hide-suggest.md) — fires when the dropdown closes
+
+~~~jsx {5-7}
+const editor = new richtext.Richtext("#root", {
+    triggers: [{ trigger: "@", data: people }]
+});
+
+editor.api.on("insert-token", ({ data, trigger, showTrigger }) => {
+    console.log(`Inserted ${trigger}${data.label} (id: ${data.id})`);
+});
+~~~
+
+## Customize the dropdown item
+
+By default the dropdown shows the `label` of each item. To render custom suggestions (for example, avatar, name and email) pass a template via the [`triggerTemplate`](api/config/trigger-template.md) property.
+
+### Example
+
+~~~jsx {1,4-9}
+const { template } = richtext;
+
+new richtext.Richtext("#root", {
+    triggers: [{ trigger: "@", data: people }],
+    triggerTemplate: template(({ data, trigger }) => `
+        <div class="user">
+            <div class="user-name">${trigger}${data.label}</div>
+            <div class="user-url">${data.url || ""}</div>
+        </div>
+    `)
+});
+~~~
+
+## Custom action on select
+
+By default, picking an item inserts it into the document as a token. To run your own code instead, add an `action` callback to the trigger. RichText removes the typed trigger text and calls `action(item)` with the picked item — no token is inserted, so you can decide what to add.
+
+:::note
+`action` takes priority over `showTrigger`. When `action` is set, `showTrigger` is ignored.
+:::
+
+### Add emoji
+
+A `:` trigger can insert an emoji, where each item includes a custom `code` field. Pair `action` with [`triggerTemplate`](api/config/trigger-template.md) so the dropdown shows the emoji instead of just its label:
+
+~~~jsx {18-20,24}
+const { template, Richtext } = richtext;
+
+const emoji = [
+    {
+        id: "apple", label: "apple", code: "1F34E"
+    },
+    {
+        id: "blue_car", label: "blue_car", code: "1F699"
+    },
+    {
+        id: "computer", label: "computer", code: "1F4BB"
+    }
+];
+
+const editor = new Richtext("#root", {
+    triggers: [
+        {
+            trigger: ":",
+            data: emoji, // [{ id: "apple", label: "apple", code: "1F34E" }, ...]
+            action: item => editor.insertValue(`<span>${emojiFromCode(item.code)} </span>`)
+        }
+    ],
+    // render the emoji itself (not just its label) in the dropdown
+    triggerTemplate: template(({ data }) => `${emojiFromCode(data.code)} ${data.label}`)
+});
+
+function emojiFromCode(code) {
+    return String.fromCodePoint(parseInt(code, 16));
+}
+~~~
+
+### Group emoji by categories
+
+When the `data` parameter is a function, you are not limited to the built-in `label` matching. You can run your own filtering and keep category headers in the dropdown. Add header items that include a `label` field and do not include `code`. The `data` function first finds the emoji that match the query, then returns emoji together with the headers of the categories that still have matches:
+
+~~~jsx {17-26,31-33}
+const { template, Richtext } = richtext;
+
+// header items carry no `code` field; emoji items include one
+const emoji = [
+    { id: "$smileys", label: "Smileys",                 category: 1 }, // category
+    { id: "grinning", label: "grinning", code: "1F600", category: 1 },
+    { id: "smile",    label: "smile",    code: "1F604", category: 1 },
+    { id: "$animals", label: "Animals",                 category: 2 }, // category
+    { id: "dog",      label: "dog",      code: "1F436", category: 2 },
+    { id: "cat",      label: "cat",      code: "1F431", category: 2 }
+];
+
+const editor = new Richtext("#root", {
+    triggers: [
+        {
+            trigger: ":",
+            data: query => {
+                const matched = emoji.filter(item =>
+                    item.code &&
+                    item.label.toLowerCase().startsWith(query.toLowerCase().trim())
+                );
+                const categories = new Set(matched.map(item => item.category));
+                // keep matching emoji plus the headers of categories that still match
+                return emoji.filter(item =>
+                    item.code ? matched.includes(item) : categories.has(item.category)
+                );
+            },
+            action: item => editor.insertValue(`<span>${emojiFromCode(item.code)} </span>`)
+        }
+    ],
+    // render emoji rows normally and category headers in bold
+    triggerTemplate: template(({ data }) =>
+        data.code ? `${emojiFromCode(data.code)} ${data.label}` : `<b>${data.label}</b>`
+    )
+});
+
+function emojiFromCode(code) {
+    return String.fromCodePoint(parseInt(code, 16));
+}
+
+// headers have no `code` — ignore picks on them so they are never inserted
+editor.api.intercept("insert-token", ({ data }) => !!data.code);
+~~~
+
+### Add slash-style command menu
+
+You can use `action` to build a slash-style command menu (like `/` in Notion or Slack). Store a command name in each item's `id`, its options in a custom `config` field, and let the callback run it with [`api.exec`](api/internal/exec.md):
+
+~~~jsx {13}
+// each item stores an api.exec action name in `id` and its parameters in `config`
+const commands = [
+    { id: "set-text-style", label: "Heading 1",     config: { tag: "h1" } },
+    { id: "insert-list",    label: "Bulleted list", config: { type: "bulleted" } },
+    { id: "insert-line",    label: "Divider" } // no config → `|| {}` applies
+];
+
+const editor = new richtext.Richtext("#root", {
+    triggers: [
+        {
+            trigger: "/",
+            data: commands,
+            action: item => editor.api.exec(item.id, item.config || {})
+        }
+    ]
+});
+~~~
+
+## Related API
+
+- [`triggers`](api/config/triggers.md)
+- [`triggerTemplate`](api/config/trigger-template.md)
+- [`insert-token`](api/events/insert-token.md)
+- [`show-suggest`](api/events/show-suggest.md)
+- [`hide-suggest`](api/events/hide-suggest.md)
diff --git a/docs/index.md b/docs/index.md
index d6a84fe..f624c15 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,13 +13,13 @@ description: You can have an overview of DHTMLX JavaScript RichText library in t
 
 - Two [**layout modes**](api/config/layout-mode.md)
 
-- Content serialization to both plain text and HTML
+- Content serialization to HTML, plain text, and Markdown
 
 - 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
+- Image uploading with optional server [upload](api/config/image-upload-url.md) or inline base64 embedding, 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)
 
@@ -71,7 +71,7 @@ DHTMLX RichText can work with content in "classic" and "document" modes. You can
 
 ## 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.
+The RichText editor supports [parsing](api/methods/set-value.md) and [serialization](api/methods/get-value.md) of content in the **HTML**, **plain text**, and **Markdown** formats.
 
 #### HTML format
 
@@ -85,6 +85,47 @@ The RichText editor supports [parsing](api/methods/set-value.md) and [serializat
 ![Text format](./assets/richtext/text_format.png)
 </div>
 
+#### Markdown format
+
+Pass the built-in `markdown` encoders to [`setValue()`](api/methods/set-value.md) / [`getValue()`](api/methods/get-value.md) to load or serialize content as Markdown:
+
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+    value: "Hello world"
+    // other configuration properties
+});
+
+// load Markdown into the editor
+editor.setValue("# Title\n\nParagraph", richtext.markdown.fromMarkdown);
+
+// read editor content as Markdown
+const md = editor.getValue(richtext.markdown.toMarkdown);
+~~~
+
+:::note
+Markdown support covers a limited subset of the syntax — common block and inline elements such as headings, paragraphs, line breaks, emphasis, blockquotes, lists, and links. Formatting that has no Markdown equivalent (font family, font size, colors, alignment, line height) is dropped on serialization.
+
+Nested inline structures are not supported, with the only exception of **bold inside italic**. Combinations such as bold inside a link, italic inside a list item, or multi-level (nested) lists will not render correctly.
+:::
+
+## Copy and paste
+
+The RichText editor supports clipboard operations through standard system shortcuts (`Ctrl+C` / `Ctrl+X` / `Ctrl+V` on Windows/Linux, `⌘+C` / `⌘+X` / `⌘+V` on macOS), the corresponding [toolbar](api/config/toolbar.md) buttons, and the [menubar](api/config/menubar.md) entries.
+
+When content is copied or cut, RichText writes two representations to the system clipboard:
+
+- a **plain text** version for compatibility with simple targets (terminals, code editors, plain inputs)
+- an **HTML** version that carries all inline and block formatting (bold, italic, underline, strikethrough, font family, font size, text and background color, headings, blockquotes, lists, alignment, indentation, line height, links, and images)
+
+Paste behavior depends on the source of the clipboard payload:
+
+- Pasting between two RichText instances (in the same document or on different pages) uses the HTML representation and preserves the original formatting.
+- Pasting from any external source — including browsers, word processors, and other editors — is processed as plain text. The inserted content is added as text without external formatting.
+
+:::note
+The toolbar **Paste** button uses the asynchronous Clipboard API, which exposes plain text only. To paste content copied from another RichText with its formatting preserved, use the `Ctrl+V` / `⌘+V` shortcut, which receives the full HTML payload directly from the browser's clipboard event.
+:::
+
 ## Keyboard shortcuts
 
 The RichText editor supports a set of common keyboard shortcuts for faster formatting and editing. The shortcuts follow platform conventions and are available on both **Windows/Linux** (`Ctrl`) and **macOS** (`⌘`).
diff --git a/docs/news/whats_new.md b/docs/news/whats_new.md
index 635edd4..e6dcd01 100644
--- a/docs/news/whats_new.md
+++ b/docs/news/whats_new.md
@@ -108,7 +108,7 @@ API of v1.2 is not compatible with v2.0. Refer to the [**migration guide**](news
 - **Granular toolbar configuration**  
   Take full control of the toolbar:  
   - Define [individual toolbar controls](guides/configuration.md/#default-toolbar-controls) and their order
-  - Add [custom controls](guides/configuration.md/#custom-toolbar-controls)
+  - Add [custom controls](guides/configuration.md/#add-custom-toolbar-controls)
 
 - **Optional [menubar](api/config/menubar.md)**  
   Enable a classic menu-style interface on the top of the editor
diff --git a/sidebars.js b/sidebars.js
index 4be1cb8..47a8585 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -49,6 +49,7 @@ module.exports = {
                         "api/methods/destructor",
                         "api/methods/get-value",
                         "api/methods/set-value",
+                        "api/methods/insert-value",
                         "api/methods/set-config",
                         "api/methods/set-locale"
                     ]
@@ -117,12 +118,14 @@ module.exports = {
                         "api/events/cut",
                         "api/events/delete-link",
                         "api/events/export",
+                        "api/events/hide-suggest",
                         "api/events/import",
                         "api/events/indent",
                         "api/events/insert-image",
                         "api/events/insert-line",
                         "api/events/insert-link",
                         "api/events/insert-list",
+                        "api/events/insert-token",
                         "api/events/outdent",
                         "api/events/paste",
                         "api/events/print",
@@ -135,6 +138,7 @@ module.exports = {
                         "api/events/set-text-format",
                         "api/events/set-text-style",
                         "api/events/show-popup",
+                        "api/events/show-suggest",
                         "api/events/subscript",
                         "api/events/superscript",
                         "api/events/toggle-fullscreen-mode",
@@ -162,7 +166,9 @@ module.exports = {
                         "api/config/locale",
                         "api/config/menubar",
                         "api/config/toolbar",
-                        "api/config/value"  
+                        "api/config/trigger-template",
+                        "api/config/triggers",
+                        "api/config/value"
                     ]
                 }
             ]
@@ -198,6 +204,7 @@ module.exports = {
             items: [
                 "guides/initialization",
                 "guides/configuration",
+                "guides/mentions_and_tags",
                 "guides/localization",
                 "guides/stylization",
                 "guides/typescript_support"