[update] RichText 2.0

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"
+<style>
+    #root h2 {
+        font-family: Roboto;
+        font-size: 28px;
+        color: purple;
+        background: #FFC0CB;
+    }
+</style>
+```
+
+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)

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)

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)

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)

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)

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)