[update] screenshots

Author: serhiipylypchuk1991

docs/assets/trial_richtext.png

@@ -293,6 +293,8 @@ platformBrowserDynamic()
 
 After that, you can start the app to see RichText loaded with data on a page.
 
-[TODO]
+<div className="img_border">
+![RichText initialization](../assets/trial_richtext.png)
+</div>
 
 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).

docs/guides/integration_with_angular.md

@@ -248,6 +248,8 @@ useEffect(() => {
 
 After that, you can start the app to see RichText loaded with data on a page.
 
-[TODO]
+<div className="img_border">
+![RichText initialization](../assets/trial_richtext.png)
+</div>
 
 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).

docs/guides/integration_with_react.md

@@ -258,6 +258,8 @@ To add the component into the app, open the **App.svelte** file and replace the
 
 After that, you can start the app to see RichText loaded with data on a page.
 
-[TODO]
+<div className="img_border">
+![RichText initialization](../assets/trial_richtext.png)
+</div>
 
 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).

docs/guides/integration_with_svelte.md

@@ -274,6 +274,8 @@ export default {
 
 After that, you can start the app to see RichText loaded with data on a page.
 
-[TODO]
+<div className="img_border">
+![RichText initialization](../assets/trial_richtext.png)
+</div>
 
 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).

docs/guides/integration_with_vue.md

@@ -33,15 +33,19 @@ The RichText toolbar provides quick access to text formatting and structural edi
 
 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.
 
+<div className="img_border">
 ![Toolbar](./assets/richtext/toolbar.png)
+</div>
 
 ### Menubar
 
 The RichText menubar provides access to high-level 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.
 
+<div className="img_border">
 ![Menubar](./assets/richtext/menubar.png)
+</div>
 
 ### Editor
 
@@ -53,20 +57,28 @@ DHTMLX RichText can work with content in "classic" and "document" modes. You can
 
 - **"classic"**
 
+<div className="img_border">
 ![Classic mode](./assets/richtext/classic_mode.png)
+</div>
 
 - **"document"**
 
+<div className="img_border">
 ![Document mode](./assets/richtext/document_mode.png)
+</div>
 
 ### Supported formats
 
 The RichText editor supports [parsing](guides/loading_data.md#adding-content-into-editor) and [serialization](guides/working_with_richtext.md#getting-content-from-editor) of content in the [HTML and Markdown formats](guides/loading_data.md#format-of-content).
 
 #### HTML format
 
+<div className="img_border">
 ![HTML format](./assets/richtext/html_format.png)
+</div>
 
 #### Text format
 
+<div className="img_border">
 ![Text format](./assets/richtext/text_format.png)
+</div>

docs/index.md

@@ -1,17 +1,15 @@
 /* stylelint-disable docusaurus/copyright-header */
 
-
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
 
-
 /* You can override the default Infima variables here. */
 
 :root {
-  --ifm-color-primary: #0288D1;
+  --ifm-color-primary: #0288d1;
   --ifm-color-primary-dark: rgb(33, 175, 144);
   --ifm-color-primary-darker: rgb(31, 165, 136);
   --ifm-color-primary-darkest: rgb(26, 136, 112);
@@ -20,7 +18,7 @@
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
   --ifm-color-feedback-background: #fff;
-  --dhx-color-brand: #2095F3;
+  --dhx-color-brand: #2095f3;
   --ifm-hr-border-color: var(--ifm-color-emphasis-200);
   --ifm-list-item-margin: 0.7rem;
 }
@@ -30,7 +28,7 @@
 /* h1 */
 
 .docTitle_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem- {
-  font-size: 2rem!important;
+  font-size: 2rem !important;
 }
 
 .markdown > h1 {
@@ -39,19 +37,18 @@
 
 /* h2 */
 
-.markdown>h2 {
+.markdown > h2 {
   --ifm-h2-font-size: 2rem;
 }
 
 /* h3 */
 
-.markdown>h3 {
+.markdown > h3 {
   --ifm-h3-font-size: 1.5rem;
 }
 
 /* end typography */
 
-
 /* Search input styles */
 
 .rel_date {
@@ -62,7 +59,7 @@
 
 .DocSearch-Button {
   order: -1;
-  margin-right: 10px!important;
+  margin-right: 10px !important;
 }
 
 .DocSearch-Button-Placeholder {
@@ -99,18 +96,17 @@
 
 /* end imgs */
 
-
 /* Change the appearance of mobile navigation */
 
 @media (max-width: 996px) {
   .navbar__toggle {
-      display: block;
+    display: block;
   }
   .menu--responsive .menu__button {
-      border-radius: 100px;
-      padding: 15px;
-      background: var(--dhx-color-brand);
-      color: var(--ifm-color-feedback-background);
+    border-radius: 100px;
+    padding: 15px;
+    background: var(--dhx-color-brand);
+    color: var(--ifm-color-feedback-background);
   }
 }
 
@@ -119,105 +115,108 @@
 /* for Code Snippet iframe */
 
 .snippet_iframe {
-    border: 1px solid var(--ifm-hr-border-color);
-    margin-bottom: var(--ifm-leading);
-    border-radius: 5px; 
+  border: 1px solid var(--ifm-hr-border-color);
+  margin-bottom: var(--ifm-leading);
+  border-radius: 5px;
 }
 
 /* end for Code Snippet iframe */
 
 /* small code block */
 
 code {
-    border-radius: 5px;
-    padding: 2px 8px;
-    font-weight: 600;
+  border-radius: 5px;
+  padding: 2px 8px;
+  font-weight: 600;
 }
 
 /* end small code block */
 
 /* styles for block of code */
 
-
-  /* specify code box background */
+/* specify code box background */
 .codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module {
   /*background-color: rgb(90, 86, 86);*/
 }
-  /* specify the comment text color */
+/* specify the comment text color */
 span.token.comment {
-    color: rgb(12, 121, 8) !important;
-}    
-  /* specify the comment background color */
+  color: rgb(12, 121, 8) !important;
+}
+/* specify the comment background color */
 span.token-line.theme-code-block-highlighted-line {
-    background-color: rgba(225, 212, 212, 0.075);
+  background-color: rgba(225, 212, 212, 0.075);
 }
 
 /* end styles for block of code */
 
 /* list */
 
 .markdown ul li {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    line-height: 2;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  line-height: 2;
 }
 
 ::marker {
-    color: #9c9c9c;
+  color: #9c9c9c;
 }
 
 /* end list */
 
 /* buttons */
 
-.support_btn{
-    font-size: 16pt;
-    color: rgb(53, 148, 243);
-    background-color: transparent;
-    border: 1px solid rgba(53, 148, 243, 0.692);;
-    border-radius: 5px;
-    width: 280px;
-    height: 50px;
-    margin-bottom: 30px;
+.support_btn {
+  font-size: 16pt;
+  color: rgb(53, 148, 243);
+  background-color: transparent;
+  border: 1px solid rgba(53, 148, 243, 0.692);
+  border-radius: 5px;
+  width: 280px;
+  height: 50px;
+  margin-bottom: 30px;
 }
 
-.support_btn:hover{
-    background-color: rgba(53, 148, 243, 0.692);
-    color: white;
+.support_btn:hover {
+  background-color: rgba(53, 148, 243, 0.692);
+  color: white;
 }
 
 .support_btn > a {
-    text-decoration: none;
-    color: inherit;
+  text-decoration: none;
+  color: inherit;
 }
 
 /* buttons end */
 
-
 /* styles for tables */
 
 table {
-    width: 100%;
-    display: inline-table;
+  width: 100%;
+  display: inline-table;
 }
 table th:first-child {
-    width: 25%;
+  width: 25%;
 }
 
 /* end styles for tables */
 
 /* styles for infoblock */
 
 .admonition-content > p {
-    line-height: 5;
+  line-height: 5;
 }
 
 .admonition {
-    margin-top: 15px;
+  margin-top: 15px;
 }
 
 /* end styles for infoblock */
 
 p {
-    line-height: 2;
-}
+  line-height: 2;
+}
+.img_border {
+  border: 1px solid rgb(215, 212, 212);
+  max-width: 100%;
+  padding: 2px;
+}