Merge pull request #36 from DHTMLX/next

Rewrite guides using ai skills

Author: serhiipylypchuk1991

docs/api/config/layout-mode.md

@@ -16,7 +16,7 @@ description: You can learn about the layoutMode config in the documentation of t
 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).
+The `"classic"` mode fills the entire edit area. The `"document"` mode displays the edit area as a document page.
 
 ### Default config
 

docs/guides/configuration.md

@@ -6,33 +6,34 @@ description: You can learn about the configuration in the documentation of the D
 
 # Configuration
 
-You can configure RichText appearance and functionality via the corresponding API. The available parameters will allow you to:
+You can configure the RichText appearance and behavior with the following properties:
 
-- 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
+- [`menubar`](api/config/menubar.md) — show or hide the top menubar
+- [`toolbar`](api/config/toolbar.md) — configure toolbar visibility and buttons
+- [`fullscreenMode`](api/config/fullscreen-mode.md) — start the editor in fullscreen
+- [`layoutMode`](api/config/layout-mode.md) — switch between the `"classic"` and `"document"` layouts
+- [`value`](api/config/value.md) — set the initial HTML content
+- [`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
 
 ## 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:
+RichText supports two layout modes for the editing area:
 
-- **"classic"**
+- **"classic"** — the edit area fills the entire page
 
 <div className="img_border">
 ![Classic mode](./../assets/richtext/classic_mode.png)
 </div>
 
-- **"document"**
+- **"document"** — the edit area mimics a document page
 
 <div className="img_border">
 ![Document mode](./../assets/richtext/document_mode.png)
 </div>
 
-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:
+Set the [`layoutMode`](api/config/layout-mode.md) property during initialization to choose the mode:
 
 ~~~jsx
 const editor = new richtext.Richtext("#root", {
@@ -42,17 +43,17 @@ const editor = new richtext.Richtext("#root", {
 
 ## Toolbar
 
-The RichText toolbar consists of several blocks of controls that can be changed according to your needs.
+The RichText toolbar groups controls into several blocks that you can customize.
 
 ### Default toolbar controls
 
-You can specify the following buttons and controls in the RichText toolbar:
+You can include 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.)           |
+| `style`             | Selects a text style (e.g., heading, paragraph, blockquote)                 |
 | `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                                |
@@ -76,11 +77,11 @@ You can specify the following buttons and controls in the RichText toolbar:
 | `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                            |
+| `mode`              | Switches between two layout modes: `classic` and `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.
+Use the [`toolbar`](api/config/toolbar.md) property to define the toolbar as an array of control name strings:
 
 ~~~jsx {2-36}
 new richtext.Richtext("#root", {
@@ -125,36 +126,38 @@ new richtext.Richtext("#root", {
 
 **Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
 
-### Custom toolbar controls
+### Add custom toolbar controls
 
-You can also specify custom controls as objects in the [`toolbar`](api/config/toolbar.md) property with the following parameters:
+Pass an object to the [`toolbar`](api/config/toolbar.md) array with one of these fields:
 
-- `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
+- `type: string` — required. Control type: `"button"`, `"richselect"`, or `"colorpicker"`
+- `id: string` — optional. Custom control ID; cannot overlap with existing control IDs
+- `icon: string` — optional. Icon class name; combines with the label
+- `label: string` — optional. Button label; combines with the icon
+- `tooltip: string` — optional. Tooltip that appears on hover; defaults to `label` if not set
+- `css: string` — optional. CSS class for the control. Built-in classes: `wx-primary`, `wx-secondary`
+- `handler: () => void` — optional. Callback that runs on click
+
+The example below combines built-in buttons, a predefined control with the `richselect` type, and two custom buttons:
 
 ~~~jsx {6-32}
 new richtext.Richtext("#root", {
     toolbar: [
-        // buttons (strings represent buttons only)
+        // string entries represent built-in buttons
         "bold",
         "italic",
-        // predefined buttons (user cannot define any other options for these (no labels, tooltips, options, etc.), so only ({ type: "button", id: string })
+        // predefined buttons accept 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)
+        // for predefined richselect/colorpicker controls, set the matching type
+        // entries with a non-matching type are ignored
         {
-            type: "richselect", // type: "button" - incorrect, will be ignored
+            type: "richselect", // type: "button" would be ignored here
             id: "mode",
         },
-        // custom buttons (supported options are below)
-        // user can only define custom buttons (no richselect/colorpicker support atm)
+        // custom buttons (richselect/colorpicker are not supported for custom controls)
         {
             type: "button",
             id: "some",
@@ -176,9 +179,9 @@ new richtext.Richtext("#root", {
 
 **Related sample:** [RichText. Custom control and simplified toolbar](https://snippet.dhtmlx.com/wda202ih?tag=richtext)
 
-### Hide Toolbar
+### Hide the toolbar
 
-If you need to hide toolbar, set the [`toolbar`](api/config/toolbar.md) property to `false` as follows:
+Set the [`toolbar`](api/config/toolbar.md) property to `false` to hide the toolbar:
 
 ~~~jsx {2}
 new richtext.Richtext("#root", {
@@ -187,13 +190,74 @@ new richtext.Richtext("#root", {
 });
 ~~~
 
-## Default styles
+## Show the menubar
+
+Enable the [`menubar`](api/config/menubar.md) property to render the top menubar above the toolbar. The default value is `false`.
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    menubar: true
+    // other configuration properties
+});
+~~~
+
+## Set the initial content
+
+Use the [`value`](api/config/value.md) property to pass initial HTML content into the editor on initialization:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    value: "<h1>some value</h1>"
+    // other configuration properties
+});
+~~~
+
+To replace the content after initialization, or to load it in a non-HTML format with a custom encoder, call the [`setValue()`](api/methods/set-value.md) method.
+
+## Set the initial locale
+
+Use the [`locale`](api/config/locale.md) property to apply a localization object on initialization:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    locale: richtext.locales.cn
+    // other configuration properties
+});
+~~~
+
+For details and dynamic locale switching with [`setLocale()`](api/methods/set-locale.md), see the [Localization](guides/localization.md) guide.
+
+## Start in fullscreen mode
+
+Set the [`fullscreenMode`](api/config/fullscreen-mode.md) property to `true` to open the editor in fullscreen on initialization. The default value is `false`.
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    fullscreenMode: true
+    // other configuration properties
+});
+~~~
+
+## Configure the image upload URL
+
+Pass a URL to the [`imageUploadUrl`](api/config/image-upload-url.md) property to set the server endpoint for toolbar image uploads:
+
+~~~jsx {2}
+new richtext.Richtext("#root", {
+    imageUploadUrl: "https://example.com/upload"
+    // other configuration properties
+});
+~~~
+
+## Configure default styles
+
+Use the [`defaultStyles`](api/config/default-styles.md) property to set default styles per block type.
 
-You can apply default style values for specific block types in the editor using the [`defaultStyles`](api/config/default-styles.md) property.
+The [`defaultStyles`](api/config/default-styles.md) property has the following type signature:
 
 ~~~jsx {}
 defaultStyles?: boolean | {
-    "*"?: { // affects all blocks, allowing you to set common properties for all of these blocks
+    "*"?: { // applies to all blocks; sets common properties for every block
         "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;
@@ -250,7 +314,7 @@ defaultStyles?: boolean | {
 };
 ~~~
 
-The `defaultStyles` property DOES NOT set the actual CSS to the affected blocks. CSS styles have to be applied separately:
+The [`defaultStyles`](api/config/default-styles.md) property does not apply CSS to the affected blocks. Apply matching CSS styles separately:
 
 ```html title="index.html"
 <div id="root"></div>
@@ -278,6 +342,6 @@ const editor = new richtext.Richtext("#root", {
 }
 ```
 
-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.
+In this example, all `h2` blocks use the `"Roboto"` font family at 28px with purple text on a pink background. The matching CSS rule applies the same values to the rendered `h2` elements.
 
 **Related sample:** [RichText. Changing the default value for typography (font, font size, etc.)](https://snippet.dhtmlx.com/6u3ti01s?tag=richtext)

docs/guides/initialization.md

@@ -6,58 +6,73 @@ description: You can learn about the initialization in the documentation of the
 
 # Initialization
 
-This guide will give you detailed instructions on how to create RichText on a page to enrich your application with features of the RichText editor. Take the following steps to get a ready-to-use component:
+This guide explains how to add RichText to a page. Follow these steps to get a ready-to-use editor:
 
-1. [Include the RichText source files on a page](#including-source-files).
-2. [Create a container for RichText](#creating-container).
-3. [Initialize RichText with the object constructor](#initializing-richtext).
+1. [Include the source files on a page](#include-the-source-files).
+2. [Create a container for RichText](#create-a-container).
+3. [Initialize RichText](#initialize-richtext).
 
-## Including source files
+## Include the source files
 
-[Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project.
+Add the RichText JavaScript and CSS files to your project. [Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack the contents into your project folder.
 
-To create RichText, you need to include 2 source files on your page:
+To create RichText, include two source files on your page:
 
 - *richtext.js*
 - *richtext.css*
 
-Make sure that you set correct relative paths to the source files:
+Reference the files in your HTML. Adjust the relative paths to match your folder layout:
 
 ~~~html title="index.html"
 <script type="text/javascript" src="./codebase/richtext.js"></script>  
 <link rel="stylesheet" href="./codebase/richtext.css">
 ~~~
 
-## Creating container
+## Create a container
 
-Add a container for RichText and give it an ID, for example *"root"*:
+Add a container for RichText with an ID such as *"root"*:
 
 ~~~jsx title="index.html"
 <div id="root"></div>
 ~~~
 
-## Initializing RichText
+## Initialize RichText
 
 Initialize RichText with the `richtext.Richtext` constructor. The constructor takes two parameters:
 
-- an HTML container (the ID of the HTML container)
-- an object with configuration properties. [See the full list here](#configuration-properties)
+- a container — a CSS selector or a DOM element
+- a configuration object with the editor properties. See the [full list of properties](#configuration-properties) below
+
+The example below initializes RichText in the `#root` container:
 
 ~~~jsx title="index.html"
-// create RichText
 const editor = new richtext.Richtext("#root", {
     // configuration properties  
 });
 ~~~
 
 ### Configuration properties
 
+Add configuration options as keys of the configuration object.
+
 :::note
-The full list of properties to configure **RichText** can be found [**here**](api/overview/properties_overview.md).
+For the full list of configuration properties, see the [Properties overview](api/overview/properties_overview.md).
 :::
 
+## Destroy the RichText instance
+
+Call the [`destructor()`](api/methods/destructor.md) method to remove the RichText HTML and detach all related events:
+
+~~~jsx
+const editor = new richtext.Richtext("#root", {
+    // configuration properties
+});
+
+editor.destructor();
+~~~
+
 ## Example
 
-In this snippet you can see how to initialize **RichText** with the initial data:
+The example below initializes RichText with the menubar enabled:
 
 <iframe src="https://snippet.dhtmlx.com/tjryzka7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>