@intlayer/docs 5.8.0-canary.0 → 5.8.1-canary.0

package/docs/ru/formatters.md

@@ -2,7 +2,7 @@
 createdAt: 2024-08-13
 updatedAt: 2025-08-20
 title: Форматтеры
-description: Утилиты для форматирования с учетом локали на основе Intl для чисел, процентов, валюты, дат, относительного времени, единиц измерения и компактной записи. Включает кешированный помощник Intl.
+description: Утилиты для форматирования с учётом локали на основе Intl для чисел, процентов, валюты, дат, относительного времени, единиц измерения и компактной записи. Включает кешированный помощник Intl.
 keywords:
   - Форматтеры
   - Intl
@@ -13,6 +13,7 @@ keywords:
   - Относительное время
   - Единицы измерения
   - Компактный формат
+  - Список
   - Интернационализация
 slugs:
   - doc
@@ -23,7 +24,7 @@ slugs:
 
 ## Обзор
 
-Intlayer предоставляет набор легковесных помощников, построенных поверх нативных API `Intl`, а также кешированный обертку `Intl`, чтобы избежать повторного создания тяжелых форматтеров. Эти утилиты полностью учитывают локаль и могут использоваться из основного пакета `intlayer`.
+Intlayer предоставляет набор лёгких помощников, построенных поверх нативных API `Intl`, а также кешированный обёртку `Intl`, чтобы избежать многократного создания тяжёлых форматтеров. Эти утилиты полностью учитывают локаль и могут использоваться из основного пакета `intlayer`.
 
 ### Импорт
 
@@ -37,6 +38,18 @@ import {
   relativeTime,
   units,
   compact,
+  list,
+  getLocaleName,
+  getLocaleLang,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  getLocalizedUrl,
+  getHTMLTextDir,
+  getContent,
+  getLocalisedContent,
+  getTranslation,
+  getIntlayer,
+  getIntlayerAsync,
 } from "intlayer";
 ```
 
@@ -44,33 +57,283 @@ import {
 
 ## Кешированный Intl
 
-Экспортируемый `Intl` — это тонкая кешированная обертка вокруг глобального `Intl`. Она мемоизирует экземпляры `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, что позволяет избежать повторного создания одного и того же форматтера.
+Экспортируемый `Intl` — это тонкая кешированная обёртка вокруг глобального `Intl`. Он мемоизирует экземпляры `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` и `PluralRules`, что позволяет избежать повторного создания одного и того же форматтера.
 
-Поскольку создание форматтера относительно дорогостоящее, такое кеширование улучшает производительность без изменения поведения. Обертка предоставляет тот же API, что и нативный `Intl`, поэтому использование идентично.
+Поскольку создание форматтера относительно дорогостоящее, такое кеширование улучшает производительность без изменения поведения. Обёртка предоставляет тот же API, что и нативный `Intl`, поэтому использование идентично.
 
 - Кеширование происходит на уровне процесса и прозрачно для вызывающих.
 
 > Если `Intl.DisplayNames` недоступен в среде, выводится одно предупреждение только для разработчиков (рекомендуется использовать полифилл).
 
-Пример:
+Примеры:
 
 ```ts
 import { Intl } from "intlayer";
 
+// Форматирование чисел
 const numberFormat = new Intl.NumberFormat("en-GB", {
   style: "currency",
   currency: "GBP",
 });
 numberFormat.format(1234.5); // "£1,234.50"
+
+// Отображение названий языков, регионов и т.д.
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Сортировка с учётом локали
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (равны)
+
+// Правила множественного числа
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
+## Дополнительные утилиты Intl
+
+Помимо помощников для форматтеров, вы также можете использовать кешированную обёртку Intl напрямую для других возможностей Intl:
+
+### `Intl.DisplayNames`
+
+Для локализованных названий языков, регионов, валют и систем письма:
+
+```ts
+import { Intl } from "intlayer";
+
+const languageNames = new Intl.DisplayNames("en", { type: "language" });
+languageNames.of("fr"); // "French"
+
+const regionNames = new Intl.DisplayNames("fr", { type: "region" });
+regionNames.of("US"); // "États-Unis"
+```
+
+### `Intl.Collator`
+
+Для локализованного сравнения и сортировки строк:
+
+```ts
+import { Intl } from "intlayer";
+
+const collator = new Intl.Collator("de", {
+  sensitivity: "base",
+  numeric: true,
+});
+
+const words = ["äpfel", "zebra", "100", "20"];
+words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
+```
+
+### `Intl.PluralRules`
+
+Для определения форм множественного числа в разных локалях:
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
+## Утилиты локалей
+
+### `getLocaleName(displayLocale, targetLocale?)`
+
+Получает локализованное название локали на другом языке:
+
+```ts
+import { getLocaleName } from "intlayer";
+
+getLocaleName("fr", "en"); // "French"
+getLocaleName("en", "fr"); // "anglais"
+getLocaleName("de", "es"); // "alemán"
+```
+
+- **displayLocale**: Локаль, для которой нужно получить название
+- **targetLocale**: Локаль, на которой будет отображаться название (по умолчанию displayLocale)
+
+### `getLocaleLang(locale?)`
+
+Извлекает код языка из строки локали:
+
+```ts
+import { getLocaleLang } from "intlayer";
+
+getLocaleLang("en-US"); // "en"
+getLocaleLang("fr-CA"); // "fr"
+getLocaleLang("de"); // "de"
+```
+
+- **locale**: Локаль, из которой нужно извлечь язык (по умолчанию текущая локаль)
+
+### `getLocaleFromPath(inputUrl)`
+
+Извлекает сегмент локали из URL или пути:
+
+```ts
+import { getLocaleFromPath } from "intlayer";
+
+getLocaleFromPath("/en/dashboard"); // "en"
+getLocaleFromPath("/fr/dashboard"); // "fr"
+getLocaleFromPath("/dashboard"); // "en" (локаль по умолчанию)
+getLocaleFromPath("https://example.com/es/about"); // "es"
 ```
 
+- **inputUrl**: Полная строка URL или путь для обработки
+- **returns**: Обнаруженная локаль или локаль по умолчанию, если локаль не найдена
+
+### `getPathWithoutLocale(inputUrl, locales?)`
+
+Удаляет сегмент локали из URL или пути:
+
+```ts
+import { getPathWithoutLocale } from "intlayer";
+
+getPathWithoutLocale("/en/dashboard"); // "/dashboard"
+getPathWithoutLocale("/fr/dashboard"); // "/dashboard"
+getPathWithoutLocale("https://example.com/en/about"); // "https://example.com/about"
+```
+
+- **inputUrl**: Полная строка URL или путь для обработки
+- **locales**: Необязательный массив поддерживаемых локалей (по умолчанию используется настроенный список локалей)
+- **returns**: URL без сегмента локали
+
+### `getLocalizedUrl(url, currentLocale, locales?, defaultLocale?, prefixDefault?)`
+
+Генерирует локализованный URL для текущей локали:
+
+```ts
+import { getLocalizedUrl } from "intlayer";
+
+getLocalizedUrl("/about", "fr", ["en", "fr"], "en", false); // "/fr/about"
+getLocalizedUrl("/about", "en", ["en", "fr"], "en", false); // "/about"
+getLocalizedUrl("https://example.com/about", "fr", ["en", "fr"], "en", true); // "https://example.com/fr/about"
+```
+
+- **url**: Исходный URL для локализации
+- **currentLocale**: Текущая локаль
+- **locales**: Необязательный массив поддерживаемых локалей (по умолчанию используется настроенный список локалей)
+- **defaultLocale**: Необязательная локаль по умолчанию (по умолчанию используется настроенная локаль по умолчанию)
+- **prefixDefault**: Добавлять ли префикс для локали по умолчанию (по умолчанию используется настроенное значение)
+
+### `getHTMLTextDir(locale?)`
+
+Возвращает направление текста для локали:
+
+```ts
+import { getHTMLTextDir } from "intlayer";
+
+getHTMLTextDir("en-US"); // "ltr"
+getHTMLTextDir("ar"); // "rtl"
+getHTMLTextDir("he"); // "rtl"
+```
+
+- **locale**: Локаль, для которой нужно получить направление текста (по умолчанию текущая локаль)
+- **returns**: `"ltr"`, `"rtl"` или `"auto"`
+
+## Утилиты для обработки контента
+
+### `getContent(node, nodeProps, locale?)`
+
+Преобразует узел контента со всеми доступными плагинами (перевод, перечисление, вставка и т.д.):
+
+```ts
+import { getContent } from "intlayer";
+
+const content = getContent(
+  contentNode,
+  { dictionaryKey: "common", dictionaryPath: "/path/to/dict" },
+  "fr"
+);
+```
+
+- **node**: Узел контента для преобразования
+- **nodeProps**: Свойства для контекста преобразования
+- **locale**: Необязательная локаль (по умолчанию используется настроенная локаль по умолчанию)
+
+### `getLocalisedContent(node, locale, nodeProps, fallback?)`
+
+Преобразует узел контента, используя только плагин перевода:
+
+```ts
+import { getLocalisedContent } from "intlayer";
+
+const content = getLocalisedContent(
+  contentNode,
+  "fr",
+  { dictionaryKey: "common" },
+  true // возврат к локали по умолчанию, если перевод отсутствует
+);
+```
+
+- **node**: Узел контента для преобразования
+- **locale**: Локаль, используемая для перевода
+- **nodeProps**: Свойства для контекста преобразования
+- **fallback**: Использовать ли резервный вариант с локалью по умолчанию (по умолчанию false)
+
+### `getTranslation(languageContent, locale?, fallback?)`
+
+Извлекает контент для конкретной локали из объекта с языковым содержимым:
+
+```ts
+import { getTranslation } from "intlayer";
+
+const content = getTranslation(
+  {
+    en: "Hello",
+    fr: "Bonjour",
+    de: "Hallo",
+  },
+  "fr",
+  true
+); // "Bonjour"
+```
+
+- **languageContent**: Объект, сопоставляющий локали с контентом
+- **locale**: Целевая локаль (по умолчанию используется настроенная локаль по умолчанию)
+- **fallback**: Использовать ли резервный вариант с локалью по умолчанию (по умолчанию true)
+
+### `getIntlayer(dictionaryKey, locale?, plugins?)`
+
+Получает и преобразует контент из словаря по ключу:
+
+```ts
+import { getIntlayer } from "intlayer";
+
+const content = getIntlayer("common", "fr");
+const nestedContent = getIntlayer("common", "fr", customPlugins);
+```
+
+- **dictionaryKey**: Ключ словаря для получения
+- **locale**: Необязательная локаль (по умолчанию используется настроенная локаль по умолчанию)
+- **plugins**: Необязательный массив пользовательских плагинов трансформации
+
+### `getIntlayerAsync(dictionaryKey, locale?, plugins?)`
+
+Асинхронно получает контент из удалённого словаря:
+
+```ts
+import { getIntlayerAsync } from "intlayer";
+
+const content = await getIntlayerAsync("common", "fr");
+```
+
+- **dictionaryKey**: Ключ словаря для получения
+- **locale**: Необязательная локаль (по умолчанию используется настроенная локаль по умолчанию)
+- **plugins**: Необязательный массив пользовательских плагинов трансформации
+
 ## Форматтеры
 
-Все приведённые ниже помощники экспортируются из `intlayer`.
+Все ниже перечисленные помощники экспортируются из `intlayer`.
 
 ### `number(value, options?)`
 
-Форматирует числовое значение с учётом локальных правил группировки и десятичных знаков.
+Форматирует числовое значение с учетом локали, группировки и десятичных знаков.
 
 - **value**: `number | string`
 - **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
@@ -81,7 +344,7 @@ numberFormat.format(1234.5); // "£1,234.50"
 import { number } from "intlayer";
 
 number(123456.789); // "123,456.789" (в en-US)
-number("1000000", { locale: "fr" }); // "1 000 000"
+number("1000000", { locale: "fr" }); // "1 000 000"
 number(1234.5, { minimumFractionDigits: 2 }); // "1,234.50"
 ```
 
@@ -118,7 +381,7 @@ percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
 import { currency } from "intlayer";
 
 currency(1234.5, { currency: "EUR" }); // "€1,234.50"
-currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
+currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); // "5 000,00 CAD"
 ```
 
 ### `date(date, optionsOrPreset?)`
@@ -142,11 +405,11 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
 
 Форматирует относительное время между двумя моментами с помощью `Intl.RelativeTimeFormat`.
 
-- Передайте "now" в качестве первого аргумента, а целевое время — вторым, чтобы получить естественную формулировку.
+- Передайте "now" в качестве первого аргумента и целевой момент вторым, чтобы получить естественную формулировку.
 - **from**: `Date | string | number`
 - **to**: `Date | string | number` (по умолчанию `new Date()`)
 - **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
-  - По умолчанию `unit` — `"second"`.
+  - По умолчанию `unit` равен `"second"`.
 
 Примеры:
 
@@ -181,7 +444,7 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (зависи
 
 ### `compact(value, options?)`
 
-Форматирует число, используя компактную нотацию (например, `1.2K`, `1M`).
+Форматирует число с использованием компактной нотации (например, `1.2K`, `1M`).
 
 - **value**: `number | string`
 - **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (использует `notation: 'compact'` под капотом)
@@ -192,48 +455,195 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (зависи
 import { compact } from "intlayer";
 
 compact(1200); // "1.2K"
-compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 миллион"
+compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 ```
 
-## Примечания
+### `list(values, options?)`
 
-- Все вспомогательные функции принимают входные данные в виде `string`; они внутренне приводятся к числам или датам.
-- Локаль по умолчанию берется из вашей настройки `internationalization.defaultLocale`, если не указана явно.
-- Эти утилиты являются тонкими обертками; для расширенного форматирования используйте стандартные опции `Intl`.
+Форматирует массив значений в локализованную строку списка с использованием `Intl.ListFormat`.
 
-## Точки входа и реэкспорты (`@index.ts`)
-
-Форматтеры находятся в основном пакете и реэкспортируются из пакетов более высокого уровня для удобства импорта в разных средах выполнения:
+- **values**: `(string | number)[]`
+- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
+  - Общие поля: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
+  - Значения по умолчанию: `type: 'conjunction'`, `style: 'long'`
 
 Примеры:
 
 ```ts
-// Код приложения (рекомендуется)
-import { number, currency, date, Intl } from "intlayer";
+import { list } from "intlayer";
+
+list(["apple", "banana", "orange"]); // "apple, banana, and orange"
+list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge, vert ou bleu"
+list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
+## Заметки
+
+/// Все вспомогательные функции принимают входные данные в виде `string`; они внутренне приводятся к числам или датам.
+/// Локаль по умолчанию берется из вашей настройки `internationalization.defaultLocale`, если не указана явно.
+/// Эти утилиты являются тонкими обертками; для расширенного форматирования используйте стандартные опции `Intl`.
+///
+/// ## Точки входа и реэкспорты (`@index.ts`)
+///
+/// Форматтеры находятся в основном пакете и реэкспортируются из пакетов более высокого уровня для удобства импорта в разных средах выполнения:
+///
+/// Примеры:
+///
+/// ```ts
+/// // Код приложения (рекомендуется)
+/// import {
+/// number,
+/// currency,
+/// date,
+/// relativeTime,
+/// units,
+/// compact,
+/// list,
+/// Intl,
+/// getLocaleName,
+/// getLocaleLang,
+/// getLocaleFromPath,
+/// getPathWithoutLocale,
+/// getLocalizedUrl,
+/// getHTMLTextDir,
+/// getContent,
+/// getLocalisedContent,
+/// getTranslation,
+/// getIntlayer,
+/// getIntlayerAsync,
+///
+} from "intlayer";
+
+````
+
 ### React
 
 Клиентские компоненты:
 
-```ts
-import { useNumber, useCurrency, useDate } from "react-intlayer/format";
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
 // или в приложениях Next.js
-import { useNumber, useCurrency, useDate } from "next-intlayer/client/format";
-```
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "next-intlayer/client/format";
+
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
+
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
+      <p>{unit(123456.789, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
+````
 
 Серверные компоненты (или React Server runtime):
 
 ```ts
-import { useNumber, useCurrency, useDate } from "intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/server/format";
 // или в приложениях Next.js
-import { useNumber, useCurrency, useDate } from "next-intlayer/server/format";
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "next-intlayer/server/format";
 ```
 
 > Эти хуки будут учитывать локаль из `IntlayerProvider` или `IntlayerServerProvider`
 
+### Vue
+
+Клиентские компоненты:
+
+```ts
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+```
+
+> Эти композиции будут учитывать локаль из внедренного `IntlayerProvider`
+
 ## История документации
 
 | Версия | Дата       | Изменения                             |
 | ------ | ---------- | ------------------------------------- |
+| 5.8.0  | 2025-08-20 | Добавлены форматтеры для Vue          |
 | 5.8.0  | 2025-08-18 | Добавлена документация по форматтерам |
+
+Компоненты клиента:
+
+```ts
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+```
+
+> Эти композиционные функции будут учитывать локаль из внедренного `IntlayerProvider`
+
+## История документации
+
+| Версия | Дата       | Изменения                                                                                |
+| ------ | ---------- | ---------------------------------------------------------------------------------------- |
+| 5.8.0  | 2025-08-20 | Добавлены форматтеры списка                                                              |
+| 5.8.0  | 2025-08-20 | Добавлены дополнительные утилиты Intl (DisplayNames, Collator, PluralRules)              |
+| 5.8.0  | 2025-08-20 | Добавлены утилиты локали (getLocaleName, getLocaleLang, getLocaleFromPath и др.)         |
+| 5.8.0  | 2025-08-20 | Добавлены утилиты для работы с контентом (getContent, getTranslation, getIntlayer и др.) |

package/docs/ru/how_works_intlayer.md

@@ -25,8 +25,8 @@ slugs:
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 Для этого роль Intlayer заключается в том, чтобы находить все ваши `файлы с объявлением контента` во всех различных форматах, присутствующих в вашем проекте, а затем генерировать из них `словари`.
@@ -45,12 +45,10 @@ slugs:
 - с использованием плагинов приложения, таких как пакет [`vite-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/vite-intlayer/index.md), или их эквивалентов для [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/index.md). При использовании одного из этих плагинов Intlayer автоматически создаст ваши словари при запуске (dev) или сборке (prod) вашего приложения.
 
 1. Объявление файлов контента
-
    - Файлы контента могут быть определены в различных форматах, таких как TypeScript, ECMAScript, CommonJS или JSON.
    - Файлы контента могут быть определены в любом месте проекта, что позволяет улучшить обслуживание и масштабируемость. Важно соблюдать соглашения о расширениях файлов для файлов контента. По умолчанию это расширение `*.content.{js|cjs|mjs|ts|tsx|json}`, но его можно изменить в [файле конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
 2. Генерация `словарей`
-
    - Словари генерируются из файлов контента. По умолчанию словари Intlayer генерируются в директории `.intlayer/dictionaries` проекта.
    - Эти словари генерируются в различных форматах, чтобы удовлетворить все потребности и оптимизировать производительность приложения.
 
@@ -59,7 +57,7 @@ slugs:
 
 - Типы словарей генерируются из `файлов декларации контента` Intlayer. По умолчанию типы словарей Intlayer генерируются в директории `.intlayer/types` проекта.
 
-- [Расширение модулей](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) Intlayer — это функция TypeScript, которая позволяет вам определять дополнительные типы для Intlayer. Это упрощает процесс разработки, предлагая доступные или обязательные аргументы.
+- [Расширение модулей](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) Intlayer - это функция TypeScript, которая позволяет вам определять дополнительные типы для Intlayer. Это упрощает процесс разработки, предлагая доступные или обязательные аргументы.
   Среди сгенерированных типов добавляются типы словарей Intlayer или даже типы конфигурации языка в файл `types/intlayer.d.ts` и используются другими пакетами. Для этого необходимо, чтобы файл `tsconfig.json` был настроен на включение директории `types` проекта.
 
 ### Этап интерпретации словарей
@@ -91,8 +89,8 @@ Intlayer также предоставляет визуальный редакт
 
 ![визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
 
-- Сервер — это простое приложение на Express, которое прослушивает запросы от клиента и получает контент вашего приложения, такой как `dictionaries` и конфигурация, чтобы сделать его доступным на стороне клиента.
-- С другой стороны, клиент — это приложение на React, которое используется для взаимодействия с вашим контентом через визуальный интерфейс.
+- Сервер - это простое приложение на Express, которое прослушивает запросы от клиента и получает контент вашего приложения, такой как `dictionaries` и конфигурация, чтобы сделать его доступным на стороне клиента.
+- С другой стороны, клиент - это приложение на React, которое используется для взаимодействия с вашим контентом через визуальный интерфейс.
   Когда вы вызываете ваш контент с помощью `useIntlayer` и редактор включен, строки автоматически оборачиваются в объект Proxy с именем `IntlayerNode`. Этот узел использует `window.postMessage` для связи с обернутым iframe, содержащим интерфейс визуального редактора.  
   Со стороны редактора, редактор прослушивает эти сообщения и имитирует реальное взаимодействие с вашим контентом, позволяя редактировать текст напрямую в контексте вашего приложения.
 

package/docs/ru/index.md

@@ -32,7 +32,7 @@ Intlayer предлагает гибкий, современный подход
   Получите обзор того, как работает Intlayer, его основных функций и почему он меняет правила игры в области i18n.
 
 - **[Как работает Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/how_works_intlayer.md)**  
-  Погрузитесь в архитектурный дизайн и узнайте, как Intlayer обрабатывает все — от объявления контента до доставки перевода.
+  Погрузитесь в архитектурный дизайн и узнайте, как Intlayer обрабатывает все - от объявления контента до доставки перевода.
 
 - **[Конфигурация](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md)**  
   Настройте Intlayer под нужды вашего проекта. Изучите варианты промежуточного программного обеспечения, структуру каталогов и расширенные настройки.