Skip to content

Test the /article-grammar skill on RichText guides #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
serhiipylypchuk1991 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Test the /article-grammar skill on RichText guides #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions docs/guides/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ 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 appearance and functionality of RichText through its API. The available parameters let you:

- 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
- Show or hide the **menubar** with the [`menubar`](api/config/menubar.md) property
- Configure the **toolbar** with the [`toolbar`](api/config/toolbar.md) property
- Enable **fullscreen mode** with the [`fullscreenMode`](api/config/fullscreen-mode.md) property
- Toggle the **layout** between "classic" and "document" modes with the [`layoutMode`](api/config/layout-mode.md) property
- Set the **initial value** with the [`value`](api/config/value.md) property
- Set the **initial locale** with the [`locale`](api/config/locale.md) property
- Apply **initial styles** with the [`defaultStyles`](api/config/default-styles.md) property

## 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:
The RichText editor provides two layout modes:

- **"classic"**

Expand All @@ -32,7 +32,7 @@ There are two layout modes of RichText editor between which you can select to ge
![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:
To set the mode, define the [`layoutMode`](api/config/layout-mode.md) property of the RichText configuration object when initializing the component:

~~~jsx
const editor = new richtext.Richtext("#root", {
Expand All @@ -42,7 +42,7 @@ 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 consists of several blocks of controls that you can customize.

### Default toolbar controls

Expand Down
10 changes: 5 additions & 5 deletions docs/guides/initialization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ 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:
To add the RichText editor to a page, follow these steps:

1. [Include the RichText source files on a page](#including-source-files).
2. [Create a container for RichText](#creating-container).
Expand All @@ -16,12 +16,12 @@ This guide will give you detailed instructions on how to create RichText on a pa

[Download the package](https://dhtmlx.com/docs/products/dhtmlxRichText/download.shtml) and unpack it into a folder of your project.

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:
Use correct relative paths to the source files:

~~~html title="index.html"
<script type="text/javascript" src="./codebase/richtext.js"></script>
Expand Down Expand Up @@ -53,11 +53,11 @@ const editor = new richtext.Richtext("#root", {
### Configuration properties

:::note
The full list of properties to configure **RichText** can be found [**here**](api/overview/properties_overview.md).
See the [full list of **RichText** properties](api/overview/properties_overview.md).
:::

## Example

In this snippet you can see how to initialize **RichText** with the initial data:
The snippet below shows how to initialize **RichText** with initial data:

<iframe src="https://snippet.dhtmlx.com/tjryzka7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
14 changes: 7 additions & 7 deletions docs/guides/localization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ description: You can learn about the localization in the documentation of the DH

# Localization

You can localize all labels in the interface of JavaScript RichText. For this you need to create a new locale or modify a built-in one and apply it to RichText.
You can localize all labels of the JavaScript RichText interface. To do that, create a new locale or modify a built-in one and apply it to RichText.

## Default locale

The **English** locale is used by default:
RichText uses the **English** locale by default:

~~~jsx
const en = {
Expand Down Expand Up @@ -158,7 +158,7 @@ const en = {
~~~

:::info
Besides the default ***en*** locale (*English*), RichText also includes the built-in ***de*** (*German*) and ***cn*** (*Chinese*) ones.
Besides the default ***en*** (*English*) locale, RichText includes the built-in ***de*** (*German*) and ***cn*** (*Chinese*) locales.
:::

<details>
Expand Down Expand Up @@ -461,14 +461,14 @@ const cn = {

## Custom locale

To apply a custom locale you need to:
To apply a custom locale:

- create a custom locale (or modify the default one) and provide translations for all text labels (it can be any language you need)
- create a custom locale (or modify the default one) and provide translations for all text labels

- apply the new locale to **RichText** via its [`locale`](api/config/locale.md) property or use the [`setLocale()`](api/methods/set-locale.md) method
- apply the new locale to **RichText** through the [`locale`](api/config/locale.md) property or the [`setLocale()`](api/methods/set-locale.md) method

## Example

In this snippet you can see how to switch through several locales:
The snippet below shows how to switch between locales:

<iframe src="https://snippet.dhtmlx.com/zxjrin3i?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
10 changes: 5 additions & 5 deletions docs/guides/stylization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ description: You can learn about the styling in the documentation of the DHTMLX

# Styling

You can fully customize the appearance of DHTMLX RichText by overriding CSS variables and applying custom styles to specific parts of the widget.
You can 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.
This guide shows how to apply a **dark theme** and use the built-in class names to style the editor’s menubar, toolbar, popup, and content area.

## Default structure and class names

Expand All @@ -18,7 +18,7 @@ RichText uses the following core classes to structure its UI:
|------------------------|---------------------------------------------|
| `.wx-richtext` | Root container of the RichText widget |
| `.wx-richtext-menubar` | Container for menubar |
| `.wx-richtext-menu` | Container for menubar dropdown menu |
| `.wx-richtext-menu` | Container for menubar dropdown menu |
| `.wx-richtext-toolbar` | Container for toolbar |
| `.wx-editor-area` | Container for main editable content area |

Expand Down Expand Up @@ -56,7 +56,7 @@ You can override RichText's default styles by redefining CSS variables on the `#
```

:::note
These styles will apply a dark background, adjust button and icon colors, and improve visibility for dark UI themes.
These styles apply a dark background and adjust button, icon, and text colors for dark UI themes.
:::

## List of supported CSS variables
Expand All @@ -82,7 +82,7 @@ These styles will apply a dark background, adjust button and icon colors, and im

## Live demo

In this snippet you can see how to apply a custom style to RichText:
The snippet below shows how to apply a custom style to RichText:

<iframe src="https://snippet.dhtmlx.com/q8j4qqq9?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>

Expand Down
10 changes: 3 additions & 7 deletions docs/guides/typescript_support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,12 @@ description: You can learn about using typescript with the DHTMLX JavaScript Ric

# 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.
Starting from v2.0, the DHTMLX RichText library ships with built-in TypeScript definitions.

:::note
You can try out the functionality right in our <a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext" target="_blank">Snippet Tool</a>.
You can try it out in our <a href="https://snippet.dhtmlx.com/ziynafp7?tag=richtext" target="_blank">Snippet Tool</a>.
:::

## 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.
TypeScript helps you write more reliable code and speeds up development. Type checking and autocompletion catch potential mistakes during development, and the type definitions document the data shapes expected by the DHTMLX RichText API.