@olddevs/ui 4.5.1 → 4.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/dist/editor/RichTextEditor.d.ts +2 -2
- package/dist/editor/RichTextEditor.d.ts.map +1 -1
- package/dist/editor/RichTextEditor.js +3 -0
- package/dist/editor/RichTextEditor.js.map +1 -1
- package/dist/editor/core/blockTypes.d.ts +2 -8
- package/dist/editor/core/blockTypes.d.ts.map +1 -1
- package/dist/editor/core/blockTypes.js +11 -54
- package/dist/editor/core/blockTypes.js.map +1 -1
- package/dist/editor/core/containers.d.ts.map +1 -1
- package/dist/editor/core/containers.js +1 -0
- package/dist/editor/core/containers.js.map +1 -1
- package/dist/editor/core/customMarkdown.js +1 -1
- package/dist/editor/core/customMarkdown.js.map +1 -1
- package/dist/editor/core/customTool.d.ts +6 -6
- package/dist/editor/core/customTool.d.ts.map +1 -1
- package/dist/editor/core/customToolEngine.d.ts +2 -2
- package/dist/editor/core/extensions.d.ts +7 -2
- package/dist/editor/core/extensions.d.ts.map +1 -1
- package/dist/editor/core/extensions.js +96 -64
- package/dist/editor/core/extensions.js.map +1 -1
- package/dist/editor/core/fieldNotice.d.ts +1 -1
- package/dist/editor/core/insertItems.d.ts +5 -28
- package/dist/editor/core/insertItems.d.ts.map +1 -1
- package/dist/editor/core/insertItems.js +3 -94
- package/dist/editor/core/insertItems.js.map +1 -1
- package/dist/editor/core/insertMenuTool.d.ts +13 -0
- package/dist/editor/core/insertMenuTool.d.ts.map +1 -0
- package/dist/editor/core/insertMenuTool.js +20 -0
- package/dist/editor/core/insertMenuTool.js.map +1 -0
- package/dist/editor/core/schema.d.ts +20 -5
- package/dist/editor/core/schema.d.ts.map +1 -1
- package/dist/editor/core/schema.js +18 -3
- package/dist/editor/core/schema.js.map +1 -1
- package/dist/editor/core/shortcuts.d.ts +56 -5
- package/dist/editor/core/shortcuts.d.ts.map +1 -1
- package/dist/editor/core/shortcuts.js +91 -156
- package/dist/editor/core/shortcuts.js.map +1 -1
- package/dist/editor/core/skeleton.d.ts +1 -1
- package/dist/editor/core/skeleton.d.ts.map +1 -1
- package/dist/editor/core/skeleton.js +1 -0
- package/dist/editor/core/skeleton.js.map +1 -1
- package/dist/editor/core/toolButtons.d.ts +3 -3
- package/dist/editor/core/toolDefinition.d.ts +3 -3
- package/dist/editor/core/toolDescriptor.d.ts +49 -30
- package/dist/editor/core/toolDescriptor.d.ts.map +1 -1
- package/dist/editor/core/toolDescriptor.js +2 -5
- package/dist/editor/core/toolDescriptor.js.map +1 -1
- package/dist/editor/core/toolLoader.d.ts +1 -1
- package/dist/editor/core/toolLoader.d.ts.map +1 -1
- package/dist/editor/core/toolOptions.d.ts +19 -2
- package/dist/editor/core/toolOptions.d.ts.map +1 -1
- package/dist/editor/core/toolOptions.js.map +1 -1
- package/dist/editor/core/tools.d.ts +10 -2
- package/dist/editor/core/tools.d.ts.map +1 -1
- package/dist/editor/core/tools.js +1 -0
- package/dist/editor/core/tools.js.map +1 -1
- package/dist/editor/features/builtins.d.ts +6 -8
- package/dist/editor/features/builtins.d.ts.map +1 -1
- package/dist/editor/features/builtins.js +48 -21
- package/dist/editor/features/builtins.js.map +1 -1
- package/dist/editor/features/code/codeBlockTool.d.ts +5 -6
- package/dist/editor/features/code/codeBlockTool.d.ts.map +1 -1
- package/dist/editor/features/code/codeBlockTool.js +10 -1
- package/dist/editor/features/code/codeBlockTool.js.map +1 -1
- package/dist/editor/features/color/colorTools.d.ts +14 -0
- package/dist/editor/features/color/colorTools.d.ts.map +1 -0
- package/dist/editor/features/color/colorTools.js +39 -0
- package/dist/editor/features/color/colorTools.js.map +1 -0
- package/dist/editor/features/details/details.d.ts +68 -0
- package/dist/editor/features/details/details.d.ts.map +1 -0
- package/dist/editor/features/details/details.js +237 -0
- package/dist/editor/features/details/details.js.map +1 -0
- package/dist/editor/features/details/detailsMarkdown.d.ts +17 -0
- package/dist/editor/features/details/detailsMarkdown.d.ts.map +1 -0
- package/dist/editor/features/details/detailsMarkdown.js +84 -0
- package/dist/editor/features/details/detailsMarkdown.js.map +1 -0
- package/dist/editor/features/details/detailsTool.d.ts +16 -0
- package/dist/editor/features/details/detailsTool.d.ts.map +1 -0
- package/dist/editor/features/details/detailsTool.js +39 -0
- package/dist/editor/features/details/detailsTool.js.map +1 -0
- package/dist/editor/features/emoji/emojiTool.d.ts +1 -1
- package/dist/editor/features/heading/headingTool.d.ts +18 -0
- package/dist/editor/features/heading/headingTool.d.ts.map +1 -0
- package/dist/editor/features/heading/headingTool.js +59 -0
- package/dist/editor/features/heading/headingTool.js.map +1 -0
- package/dist/editor/features/history/historyTool.d.ts +15 -0
- package/dist/editor/features/history/historyTool.d.ts.map +1 -0
- package/dist/editor/features/history/historyTool.js +28 -0
- package/dist/editor/features/history/historyTool.js.map +1 -0
- package/dist/editor/features/image/imageTool.d.ts +19 -0
- package/dist/editor/features/image/imageTool.d.ts.map +1 -0
- package/dist/editor/features/image/imageTool.js +28 -0
- package/dist/editor/features/image/imageTool.js.map +1 -0
- package/dist/editor/features/layout/layoutTool.d.ts +11 -0
- package/dist/editor/features/layout/layoutTool.d.ts.map +1 -0
- package/dist/editor/features/layout/layoutTool.js +20 -0
- package/dist/editor/features/layout/layoutTool.js.map +1 -0
- package/dist/editor/features/lists/listTools.d.ts +15 -0
- package/dist/editor/features/lists/listTools.d.ts.map +1 -0
- package/dist/editor/features/lists/listTools.js +78 -0
- package/dist/editor/features/lists/listTools.js.map +1 -0
- package/dist/editor/features/marks/markTools.d.ts +16 -0
- package/dist/editor/features/marks/markTools.d.ts.map +1 -0
- package/dist/editor/features/marks/markTools.js +43 -0
- package/dist/editor/features/marks/markTools.js.map +1 -0
- package/dist/editor/features/search/searchTool.d.ts +1 -1
- package/dist/editor/features/table/tableTool.d.ts +3 -3
- package/dist/editor/features/wrapper/wrapperTool.d.ts +11 -0
- package/dist/editor/features/wrapper/wrapperTool.d.ts.map +1 -0
- package/dist/editor/features/wrapper/wrapperTool.js +32 -0
- package/dist/editor/features/wrapper/wrapperTool.js.map +1 -0
- package/dist/editor/index.d.ts +1 -1
- package/dist/editor/index.d.ts.map +1 -1
- package/dist/editor/index.js.map +1 -1
- package/dist/editor/schema-entry.d.ts +1 -1
- package/dist/editor/styles/prose.d.ts.map +1 -1
- package/dist/editor/styles/prose.js +26 -0
- package/dist/editor/styles/prose.js.map +1 -1
- package/dist/editor/ui/EditorToolbar.d.ts.map +1 -1
- package/dist/editor/ui/EditorToolbar.js +5 -38
- package/dist/editor/ui/EditorToolbar.js.map +1 -1
- package/dist/editor/ui/SelectionBubble.d.ts.map +1 -1
- package/dist/editor/ui/SelectionBubble.js +1 -1
- package/dist/editor/ui/SelectionBubble.js.map +1 -1
- package/dist/editor/ui/ToolButtonView.d.ts.map +1 -1
- package/dist/editor/ui/ToolButtonView.js +1 -1
- package/dist/editor/ui/ToolButtonView.js.map +1 -1
- package/dist/i18n/defaults.d.ts.map +1 -1
- package/dist/i18n/defaults.js +3 -0
- package/dist/i18n/defaults.js.map +1 -1
- package/dist/i18n/messages.d.ts +16 -1
- package/dist/i18n/messages.d.ts.map +1 -1
- package/dist/icons.d.ts +8 -1
- package/dist/icons.d.ts.map +1 -1
- package/dist/icons.js +1 -1
- package/dist/icons.js.map +1 -1
- package/dist/locales/ru.d.ts.map +1 -1
- package/dist/locales/ru.js +3 -0
- package/dist/locales/ru.js.map +1 -1
- package/docs/api/editor-extension.en.md +68 -68
- package/docs/api/editor-extension.md +55 -55
- package/docs/api/messages.en.md +4 -1
- package/docs/api/messages.md +3 -0
- package/docs/api/migration-notes.en.md +11 -11
- package/docs/api/migration-notes.md +2 -2
- package/docs/api/utilities.en.md +6 -6
- package/docs/components/actions/split-button.en.md +9 -9
- package/docs/components/content/data-display.en.md +1 -1
- package/docs/components/content/layout-primitives.en.md +3 -3
- package/docs/components/content/rich-text-toc.en.md +1 -1
- package/docs/components/content/rich-text-view.en.md +23 -17
- package/docs/components/content/rich-text-view.md +17 -11
- package/docs/components/content/virtual-grid.en.md +2 -2
- package/docs/components/date-time/date-picker.en.md +1 -1
- package/docs/components/inputs/rich-text-editor.en.md +283 -230
- package/docs/components/inputs/rich-text-editor.md +139 -86
- package/docs/components/navigation/mega-menu.en.md +10 -10
- package/docs/components/overlays/menu.en.md +2 -2
- package/docs/components/overlays/shortcuts-help.en.md +1 -1
- package/docs/components/table/data-table.en.md +3 -3
- package/docs/components/table/filter-bar.en.md +1 -1
- package/docs/components/table/toolbar.en.md +1 -1
- package/docs/conventions.en.md +2 -2
- package/docs/conventions.md +1 -1
- package/docs/getting-started.en.md +9 -9
- package/docs/getting-started.md +8 -8
- package/docs/glossary.en.md +193 -133
- package/docs/glossary.md +191 -132
- package/docs/icons.en.md +12 -9
- package/docs/icons.md +3 -0
- package/docs/palette.en.md +3 -3
- package/docs/theming.en.md +6 -6
- package/package.json +2 -1
- package/src/editor/RichTextEditor.tsx +9 -6
- package/src/editor/core/atomText.ts +2 -2
- package/src/editor/core/blockTypes.ts +19 -83
- package/src/editor/core/containers.ts +4 -2
- package/src/editor/core/customMarkdown.ts +2 -2
- package/src/editor/core/customTool.ts +6 -6
- package/src/editor/core/customToolEngine.ts +9 -9
- package/src/editor/core/extensions.ts +165 -110
- package/src/editor/core/fieldNotice.ts +1 -1
- package/src/editor/core/handle.ts +2 -2
- package/src/editor/core/insertItems.ts +12 -158
- package/src/editor/core/insertMenuTool.ts +32 -0
- package/src/editor/core/jsonDocument.ts +1 -1
- package/src/editor/core/schema.ts +42 -7
- package/src/editor/core/shortcuts.ts +116 -177
- package/src/editor/core/skeleton.ts +4 -3
- package/src/editor/core/toolButtons.ts +3 -3
- package/src/editor/core/toolDefinition.ts +4 -4
- package/src/editor/core/toolDescriptor.ts +65 -52
- package/src/editor/core/toolLoader.ts +3 -3
- package/src/editor/core/toolOptions.ts +21 -2
- package/src/editor/core/tools.ts +10 -1
- package/src/editor/core/viewIsland.ts +1 -1
- package/src/editor/features/builtins.ts +76 -41
- package/src/editor/features/code/codeBlockTool.ts +16 -8
- package/src/editor/features/color/colorTools.ts +68 -0
- package/src/editor/features/details/details.ts +389 -0
- package/src/editor/features/details/detailsMarkdown.ts +158 -0
- package/src/editor/features/details/detailsTool.ts +69 -0
- package/src/editor/features/emoji/emojiTool.tsx +1 -1
- package/src/editor/features/heading/headingTool.ts +96 -0
- package/src/editor/features/history/historyTool.ts +42 -0
- package/src/editor/features/image/imageTool.ts +49 -0
- package/src/editor/features/layout/layoutTool.ts +40 -0
- package/src/editor/features/lists/listTools.ts +112 -0
- package/src/editor/features/marks/markTools.ts +78 -0
- package/src/editor/features/search/searchTool.ts +1 -1
- package/src/editor/features/table/tableTool.ts +3 -3
- package/src/editor/features/toc/tocTool.ts +1 -1
- package/src/editor/features/wrapper/wrapperTool.ts +52 -0
- package/src/editor/index.ts +1 -0
- package/src/editor/schema-entry.ts +1 -1
- package/src/editor/styles/prose.ts +49 -0
- package/src/editor/ui/EditorToolbar.tsx +7 -50
- package/src/editor/ui/SelectionBubble.tsx +2 -5
- package/src/editor/ui/ToolButtonView.tsx +2 -1
- package/src/i18n/defaults.ts +3 -0
- package/src/i18n/messages.ts +14 -1
- package/src/icons.ts +7 -0
- package/src/locales/ru.ts +3 -0
package/docs/glossary.md
CHANGED
|
@@ -5,6 +5,33 @@
|
|
|
5
5
|
получают составное имя («примитив палитры», «слой оверлея»), а голое слово остаётся за одним
|
|
6
6
|
из них.
|
|
7
7
|
|
|
8
|
+
Понятие, пришедшее из индустрии, называется словом первоисточника: движка Tiptap, WAI-ARIA,
|
|
9
|
+
React Aria, Radix, Material 3, Storybook, Node.js. Английский термин берётся оттуда, а русский
|
|
10
|
+
переводится от английского, не наоборот: обратный перевод с русского возвращает другое слово, и
|
|
11
|
+
читатель не находит понятие поиском. Своё имя заводится только для понятия, которого у индустрии нет.
|
|
12
|
+
|
|
13
|
+
Для этого правила у каждой таблицы два столбца. «Источник» — откуда взято английское слово:
|
|
14
|
+
первоисточник, «общее» (обычное слово индустрии без одного хозяина) или «свой» (имя кита). «Также
|
|
15
|
+
ищут» — слова, которыми то же понятие зовут в других системах: по ним строку находят поиском, в
|
|
16
|
+
тексте их не пишут.
|
|
17
|
+
|
|
18
|
+
Публичное имя (проп, функция, тип) берётся из английского термина. Переименование идёт по semver
|
|
19
|
+
(раздел «Versions» в `AGENTS.md` кита): новое имя приходит алиасом в минорной версии, старое
|
|
20
|
+
помечается `@deprecated` и уходит в следующем мажоре.
|
|
21
|
+
|
|
22
|
+
Первоисточники: [Tiptap](https://tiptap.dev/docs), [ProseMirror](https://prosemirror.net/docs/guide/),
|
|
23
|
+
[WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/), [React Aria](https://react-spectrum.adobe.com/react-aria/),
|
|
24
|
+
[Radix](https://www.radix-ui.com), [M3](https://m3.material.io),
|
|
25
|
+
[DTCG](https://www.designtokens.org) (формат токенов W3C), [Storybook](https://storybook.js.org),
|
|
26
|
+
[Chromatic](https://www.chromatic.com/docs/), [Node.js](https://nodejs.org/api/packages.html),
|
|
27
|
+
[MDN](https://developer.mozilla.org), [BlockNote](https://www.blocknotejs.org),
|
|
28
|
+
[Carbon](https://carbondesignsystem.com), [MUI](https://mui.com), [Polaris](https://polaris.shopify.com),
|
|
29
|
+
[Apple HIG](https://developer.apple.com/design/human-interface-guidelines/),
|
|
30
|
+
[CKEditor](https://ckeditor.com/docs/ckeditor5/latest/features/source-editing.html),
|
|
31
|
+
[Astro](https://docs.astro.build/en/concepts/islands/),
|
|
32
|
+
[text-mask](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#guide),
|
|
33
|
+
[Ben Kamens](https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown) (menu aim).
|
|
34
|
+
|
|
8
35
|
Общие термины в тексте пишутся как обычные слова, со строчной: «потребитель», «роль»,
|
|
9
36
|
«витрина». Термины Редактора — с большой буквы («Блок», «Панель»): их легко спутать с
|
|
10
37
|
обиходным словом, и заглавная показывает, что слово значит ровно то, что в таблице.
|
|
@@ -18,60 +45,60 @@
|
|
|
18
45
|
|
|
19
46
|
## Кит и потребитель
|
|
20
47
|
|
|
21
|
-
| Термин | Значение | Не путать с |
|
|
22
|
-
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
23
|
-
| **Кит** | Дизайн-система `@olddevs/ui`: токены, темы, доступные компоненты и их документация | Пакетом: тот — то, как кит доставляется. Библиотекой: так кит не называется, слово занято сторонними зависимостями (react-aria, Radix, Tiptap) |
|
|
24
|
-
| **Пакет** | npm-артефакт `@olddevs/ui` со входами и `styles.css`; публикуется в npm | Китом: у одного кита один пакет, но кит — ещё и решения, витрина и макет |
|
|
25
|
-
| **Вход** | Путь импорта, который пакет объявляет в `exports`: `@olddevs/ui`, `/icons`, `/color`, `/editor`, `/editor/schema`, `/editor/highlight`, `/locales/ru`, `/locales/en`. Всё, что не вход, — не публичный API | Путём в `src/`: он может смениться в любой версии |
|
|
26
|
-
| **Публичный контракт** | Экспорты входов, их типы, документированное поведение и `styles.css` | Исходниками: они доказывают поведение, но импортировать их нельзя |
|
|
27
|
-
| **Потребитель** | Приложение, которое ставит пакет и собирает из кита свои экраны | Пользователем: тот работает с экраном, а не с API |
|
|
28
|
-
| **Экран** | Страница или форма приложения потребителя. Доменные тексты, запросы, словари статусов и раскладка экрана принадлежат ему, а не киту | Компонентом кита |
|
|
29
|
-
| **Экран-заказчик** | Экран потребителя, которому компонент нужен сейчас. Компонент без него в работу не берут, кроме отступлений из ADR-0048; в тексте коротко — «заказчик» | Потребителем: тот — приложение целиком, а заказчик — один его экран |
|
|
30
|
-
| **Примитив** | Компонент кита, из которого собраны другие и экраны потребителя: `Toolbar` — примитив Панели Редактора. Не заменяется ручной разметкой | Примитивом палитры — цветовым токеном слоя 1 |
|
|
31
|
-
| **Семья компонентов** | Компоненты одного назначения с общими экспортами (`MobileTabBar` и `MobileTabBarItem`), описанные на одной странице справочника | Семьёй цвета — рядом примитивов палитры одного оттенка |
|
|
32
|
-
| **Категория** | Раздел справочника и папка исходников: `actions`, `app-shell`, `content`, `date-time`, `inputs`, `navigation`, `overlays`, `table`. Компонент лежит в той же категории в `docs/components/` и в `src/components/` | Семьёй компонентов: категория собирает несколько семей |
|
|
33
|
-
| **Ядро** | Компоненты, для которых обязателен полный обряд проверки: поведенческие тесты, покрытие классов, axe, снимки (ADR-0014) | Периферией |
|
|
34
|
-
| **Периферия** | Обёртки над готовым поведением `react-aria-components`: для них хватает сокращённого набора проверок | Ядром |
|
|
35
|
-
| **Каталог сообщений** | Строки интерфейса кита, которые `UiProvider` отдаёт компонентам: готовые каталоги — входы `locales/ru` и `locales/en`, без провайдера работает английский фолбэк в коде. Проп компонента переопределяет строку точечно ([i18n.md](i18n.md)) | Каталогом компонентов. Текстами экрана: их кит не переводит |
|
|
36
|
-
| **Каталог компонентов** | Указатель всех публичных компонентов по категориям — [components/index.md](components/index.md) | Каталогом сообщений |
|
|
48
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
49
|
+
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------- |
|
|
50
|
+
| **Кит** | Дизайн-система `@olddevs/ui`: токены, темы, доступные компоненты и их документация | Пакетом: тот — то, как кит доставляется. Библиотекой: так кит не называется, слово занято сторонними зависимостями (react-aria, Radix, Tiptap) | общее | UI kit, design system, component library |
|
|
51
|
+
| **Пакет** | npm-артефакт `@olddevs/ui` со входами и `styles.css`; публикуется в npm | Китом: у одного кита один пакет, но кит — ещё и решения, витрина и макет | npm | — |
|
|
52
|
+
| **Вход** | Путь импорта, который пакет объявляет в `exports`: `@olddevs/ui`, `/icons`, `/color`, `/editor`, `/editor/schema`, `/editor/highlight`, `/locales/ru`, `/locales/en`. Всё, что не вход, — не публичный API | Путём в `src/`: он может смениться в любой версии | Node.js | subpath export |
|
|
53
|
+
| **Публичный контракт** | Экспорты входов, их типы, документированное поведение и `styles.css` | Исходниками: они доказывают поведение, но импортировать их нельзя | semver | public API |
|
|
54
|
+
| **Потребитель** | Приложение, которое ставит пакет и собирает из кита свои экраны | Пользователем: тот работает с экраном, а не с API | общее | library user |
|
|
55
|
+
| **Экран** | Страница или форма приложения потребителя. Доменные тексты, запросы, словари статусов и раскладка экрана принадлежат ему, а не киту | Компонентом кита | свой | page, view |
|
|
56
|
+
| **Экран-заказчик** | Экран потребителя, которому компонент нужен сейчас. Компонент без него в работу не берут, кроме отступлений из ADR-0048; в тексте коротко — «заказчик» | Потребителем: тот — приложение целиком, а заказчик — один его экран | свой | — |
|
|
57
|
+
| **Примитив** | Компонент кита, из которого собраны другие и экраны потребителя: `Toolbar` — примитив Панели Редактора. Не заменяется ручной разметкой | Примитивом палитры — цветовым токеном слоя 1 | Radix | building block |
|
|
58
|
+
| **Семья компонентов** | Компоненты одного назначения с общими экспортами (`MobileTabBar` и `MobileTabBarItem`), описанные на одной странице справочника | Семьёй цвета — рядом примитивов палитры одного оттенка | свой | compound component |
|
|
59
|
+
| **Категория** | Раздел справочника и папка исходников: `actions`, `app-shell`, `content`, `date-time`, `inputs`, `navigation`, `overlays`, `table`. Компонент лежит в той же категории в `docs/components/` и в `src/components/` | Семьёй компонентов: категория собирает несколько семей | свой | — |
|
|
60
|
+
| **Ядро** | Компоненты, для которых обязателен полный обряд проверки: поведенческие тесты, покрытие классов, axe, снимки (ADR-0014) | Периферией | свой | — |
|
|
61
|
+
| **Периферия** | Обёртки над готовым поведением `react-aria-components`: для них хватает сокращённого набора проверок | Ядром | свой | — |
|
|
62
|
+
| **Каталог сообщений** | Строки интерфейса кита, которые `UiProvider` отдаёт компонентам: готовые каталоги — входы `locales/ru` и `locales/en`, без провайдера работает английский фолбэк в коде. Проп компонента переопределяет строку точечно ([i18n.md](i18n.md)) | Каталогом компонентов. Текстами экрана: их кит не переводит | общее | locale messages, translations |
|
|
63
|
+
| **Каталог компонентов** | Указатель всех публичных компонентов по категориям — [components/index.md](components/index.md) | Каталогом сообщений | свой | component index |
|
|
37
64
|
|
|
38
65
|
## Документация и проверка
|
|
39
66
|
|
|
40
|
-
| Термин | Значение | Не путать с |
|
|
41
|
-
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
42
|
-
| **Справочник** | Markdown в `docs/` пакета: страницы компонентов, API и соглашения — источник правды о публичном контракте. Едет в пакете и показывается на сайте без правок | Вики: та пересказывает для людей и при расхождении неправа. ADR: те объясняют, почему так решено |
|
|
43
|
-
| **Витрина** | Storybook кита: истории, снимки и проверки доступности; публикуется на GitHub Pages | Сайтом документации: витрина — мастерская, а не текст для читателя. Полкой мегаменю |
|
|
44
|
-
| **Снимок** | Эталонная картинка истории витрины в `tests-visual/`; снимается и сверяется только локально (ADR-0013) | Скриншотом для документации: он ничего не проверяет |
|
|
45
|
-
| **Гейт** | Одна автоматическая проверка, которая роняет прогон: гейт контраста (`npm run contrast`), гейт i18n, `format:check` | Воротами: гейт — одна проверка из их списка |
|
|
46
|
-
| **Ворота** | Полный список проверок перед слиянием и релизом — раздел «Checks» в `AGENTS.md`. Запускаются локально: CI пуши не проверяет | Воркфлоу GitHub Actions: те публикуют витрину и пакет, но не проверяет |
|
|
47
|
-
| **Зеркало** | Файл Figma `Olddevs UI DS`: повторяет кит, но источником правды не является; при расхождении меняется Figma (ADR-0015) | Макетом, по которому пишут код: исключение — только компонент, которого в коде ещё нет |
|
|
48
|
-
| **Волна** | Набор изменений, который планировался и выпускался вместе; ADR и комментарии ссылаются на номер волны | Версией пакета: номер волны с номером релиза не связан |
|
|
67
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
68
|
+
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------- | ---------------------------- |
|
|
69
|
+
| **Справочник** | Markdown в `docs/` пакета: страницы компонентов, API и соглашения — источник правды о публичном контракте. Едет в пакете и показывается на сайте без правок | Вики: та пересказывает для людей и при расхождении неправа. ADR: те объясняют, почему так решено | общее | API reference |
|
|
70
|
+
| **Витрина** | Storybook кита: истории, снимки и проверки доступности; публикуется на GitHub Pages | Сайтом документации: витрина — мастерская, а не текст для читателя. Полкой мегаменю | Storybook | Storybook, workshop |
|
|
71
|
+
| **Снимок** | Эталонная картинка истории витрины в `tests-visual/`; снимается и сверяется только локально (ADR-0013) | Скриншотом для документации: он ничего не проверяет | Chromatic | visual regression test |
|
|
72
|
+
| **Гейт** | Одна автоматическая проверка, которая роняет прогон: гейт контраста (`npm run contrast`), гейт i18n, `format:check` | Воротами: гейт — одна проверка из их списка | общее | quality gate, required check |
|
|
73
|
+
| **Ворота** | Полный список проверок перед слиянием и релизом — раздел «Checks» в `AGENTS.md`. Запускаются локально: CI пуши не проверяет | Воркфлоу GitHub Actions: те публикуют витрину и пакет, но не проверяет | свой | — |
|
|
74
|
+
| **Зеркало** | Файл Figma `Olddevs UI DS`: повторяет кит, но источником правды не является; при расхождении меняется Figma (ADR-0015) | Макетом, по которому пишут код: исключение — только компонент, которого в коде ещё нет | свой | Figma library |
|
|
75
|
+
| **Волна** | Набор изменений, который планировался и выпускался вместе; ADR и комментарии ссылаются на номер волны | Версией пакета: номер волны с номером релиза не связан | свой | milestone |
|
|
49
76
|
|
|
50
77
|
## Токены и темы
|
|
51
78
|
|
|
52
|
-
| Термин | Значение | Не путать с |
|
|
53
|
-
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
|
|
54
|
-
| **Слой токенов** | Одна из четырёх ступеней цепочки цвета: примитивы палитры → роли → компонентные токены → бренд. Слой ниже не знает о слое выше ([theming.md](theming.md#четыре-слоя)) | Слоем оверлея — ступенью z-index |
|
|
55
|
-
| **Примитив палитры** | Токен слоя 1 `--od-<семья>-<шаг>`: цвет как значение, без роли и без темы. Потребитель его не переопределяет | Примитивом — компонентом кита |
|
|
56
|
-
| **Семья цвета** | Ряд примитивов палитры одного оттенка: нейтрали `slate`, `cloud`, `navy` и семь тоновых. Шаг внутри семьи растёт по светлоте, 1 — самый тёмный | Семьёй компонентов |
|
|
57
|
-
| **Роль** | Токен слоя 2: что чем красится — `--surface-*`, `--text-*`, `--accent*`, тона. Тема меняет только роли | Классом Tailwind: тот стоит на роли, а не наоборот |
|
|
58
|
-
| **Компонентный токен** | Токен слоя 3 — отличие одной семьи компонентов от общей роли (`--overlay-scrim`, `--topbar-bg`). Список закрытый | Ролью |
|
|
59
|
-
| **Тема** | Набор значений ролей на `<html data-theme>`: `dark` (по умолчанию), `light`, `dim` | Акцентом: это независимая ось. Листом Редактора |
|
|
60
|
-
| **Акцент** | Цвет действия и выделения на `<html data-accent>`: `blue` (по умолчанию), `violet` | Тоном `accent`: тот берёт значение акцента, но это ось компонента |
|
|
61
|
-
| **Бренд** | Слой 4: блок бренда `[data-brand]` поверх ролей и компонентных токенов — своя палитра потребителя одним блоком CSS | Темой: бренд работает в любой теме |
|
|
62
|
-
| **Поверхность** | Роль фона: `--surface-app`, `--surface-panel`, `--surface-elevated` и соседние; в компонентах — алиасы `--bg-0…4` | Пропом `surface` Редактора: тот выбирает Лист |
|
|
63
|
-
| **Инверсная поверхность** | Группа ролей для плашки прямо на Документе, которая отличается от него знаком, а не шагом: светлая в `dark` и `dim`, тёмная в `light` (`--surface-inverse`, `--text-on-inverse`) | Поверхностью `--surface-contrast`: та — шаг той же темы |
|
|
64
|
-
| **Тон** | Смысловой цвет из словаря `Tone`: `neutral`, `accent`, `success`, `warning`, `danger`. У тона две роли: `--<тон>` — заливка под текстом, `--<тон>-strong` — текст и рамка на фоне | Вариантом (`variant`): тот отвечает, насколько тон заметен |
|
|
65
|
-
| **Плотность** | Умолчание вертикального ритма таблиц через `UiProvider`: `comfortable` или `compact`; проп таблицы его перекрывает | Размером (`size`): тот — ось одного компонента |
|
|
66
|
-
| **Шкала движения** | Закрытые ступени длительности (`--duration-fast` … `--duration-slow`) и три кривые (`--ease-standard`, `-enter`, `-exit`). Имена по роли, а не по значению (ADR-0047) | Шагом семьи цвета |
|
|
79
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
80
|
+
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------- | -------------------------------- |
|
|
81
|
+
| **Слой токенов** | Одна из четырёх ступеней цепочки цвета: примитивы палитры → роли → компонентные токены → бренд. Слой ниже не знает о слое выше ([theming.md](theming.md#четыре-слоя)) | Слоем оверлея — ступенью z-index | DTCG | token tier |
|
|
82
|
+
| **Примитив палитры** | Токен слоя 1 `--od-<семья>-<шаг>`: цвет как значение, без роли и без темы. Потребитель его не переопределяет | Примитивом — компонентом кита | DTCG | primitive token, base token |
|
|
83
|
+
| **Семья цвета** | Ряд примитивов палитры одного оттенка: нейтрали `slate`, `cloud`, `navy` и семь тоновых. Шаг внутри семьи растёт по светлоте, 1 — самый тёмный | Семьёй компонентов | Radix | color family, color ramp |
|
|
84
|
+
| **Роль** | Токен слоя 2: что чем красится — `--surface-*`, `--text-*`, `--accent*`, тона. Тема меняет только роли | Классом Tailwind: тот стоит на роли, а не наоборот | M3 | color role, semantic token |
|
|
85
|
+
| **Компонентный токен** | Токен слоя 3 — отличие одной семьи компонентов от общей роли (`--overlay-scrim`, `--topbar-bg`). Список закрытый | Ролью | DTCG | — |
|
|
86
|
+
| **Тема** | Набор значений ролей на `<html data-theme>`: `dark` (по умолчанию), `light`, `dim` | Акцентом: это независимая ось. Листом Редактора | общее | color scheme, appearance (Radix) |
|
|
87
|
+
| **Акцент** | Цвет действия и выделения на `<html data-accent>`: `blue` (по умолчанию), `violet` | Тоном `accent`: тот берёт значение акцента, но это ось компонента | Radix | accent color |
|
|
88
|
+
| **Бренд** | Слой 4: блок бренда `[data-brand]` поверх ролей и компонентных токенов — своя палитра потребителя одним блоком CSS | Темой: бренд работает в любой теме | свой | — |
|
|
89
|
+
| **Поверхность** | Роль фона: `--surface-app`, `--surface-panel`, `--surface-elevated` и соседние; в компонентах — алиасы `--bg-0…4` | Пропом `surface` Редактора: тот выбирает Лист | M3 | — |
|
|
90
|
+
| **Инверсная поверхность** | Группа ролей для плашки прямо на Документе, которая отличается от него знаком, а не шагом: светлая в `dark` и `dim`, тёмная в `light` (`--surface-inverse`, `--text-on-inverse`) | Поверхностью `--surface-contrast`: та — шаг той же темы | M3 | — |
|
|
91
|
+
| **Тон** | Смысловой цвет из словаря `Tone`: `neutral`, `accent`, `success`, `warning`, `danger`. У тона две роли: `--<тон>` — заливка под текстом, `--<тон>-strong` — текст и рамка на фоне | Вариантом (`variant`): тот отвечает, насколько тон заметен | Polaris | status color, intent |
|
|
92
|
+
| **Плотность** | Умолчание вертикального ритма таблиц через `UiProvider`: `comfortable` или `compact`; проп таблицы его перекрывает | Размером (`size`): тот — ось одного компонента | MUI | compact mode |
|
|
93
|
+
| **Шкала движения** | Закрытые ступени длительности (`--duration-fast` … `--duration-slow`) и три кривые (`--ease-standard`, `-enter`, `-exit`). Имена по роли, а не по значению (ADR-0047) | Шагом семьи цвета | M3 | motion tokens, duration, easing |
|
|
67
94
|
|
|
68
95
|
## Оси пропсов
|
|
69
96
|
|
|
70
|
-
| Термин | Значение | Не путать с |
|
|
71
|
-
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
72
|
-
| **Ось** | Независимый проп с закрытым набором значений, общим на весь кит: `size`, `tone`, `variant`. Ось включается явным пропом | Состоянием (`selected`, `disabled`, `loading`): оно булево и называется положительно |
|
|
73
|
-
| **Подача** | Ось `variant`: насколько заметен тон — `solid`, `soft`, `outline`, `ghost`, один набор на весь кит | Формой варианта (`appearance`) |
|
|
74
|
-
| **Форма варианта** | Проп `appearance` вне осей: другая форма того же компонента — `appearance="card"` даёт рамку, индикатор и описание внутри подписи | Подачей: та меняет заметность тона, а не форму |
|
|
97
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
98
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | -------- | ---------- |
|
|
99
|
+
| **Ось** | Независимый проп с закрытым набором значений, общим на весь кит: `size`, `tone`, `variant`. Ось включается явным пропом | Состоянием (`selected`, `disabled`, `loading`): оно булево и называется положительно | свой | — |
|
|
100
|
+
| **Подача** | Ось `variant`: насколько заметен тон — `solid`, `soft`, `outline`, `ghost`, один набор на весь кит | Формой варианта (`appearance`) | Radix | — |
|
|
101
|
+
| **Форма варианта** | Проп `appearance` вне осей: другая форма того же компонента — `appearance="card"` даёт рамку, индикатор и описание внутри подписи | Подачей: та меняет заметность тона, а не форму | свой | — |
|
|
75
102
|
|
|
76
103
|
Смысл каждой оси и пропсы вне осей (`appearance`, `active`, `level`) — в
|
|
77
104
|
[семантическом словаре пропсов](conventions.md#семантический-словарь-пропсов).
|
|
@@ -80,105 +107,137 @@
|
|
|
80
107
|
|
|
81
108
|
Слова, которыми страницы описывают, как компонентом управляют мышью, пальцем и клавиатурой.
|
|
82
109
|
|
|
83
|
-
| Термин | Значение | Не путать с |
|
|
84
|
-
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
|
85
|
-
| **Зона нажатия** | Область, которая принимает нажатие; бывает больше видимого контрола. Нижний порог — WCAG 2.5.8, 24 × 24 px | Размером (`size`): тот меняет вид, а зона может остаться прежней |
|
|
86
|
-
| **Ручка перетаскивания** | Отдельная кнопка строки, за которую строку переносят мышью, пальцем или с клавиатуры: `SortableList`, `EditableList` | Ручкой Блока Редактора и ручкой высоты |
|
|
87
|
-
| **Ручка высоты** | Полоса у нижнего края поля с `resizable`, за которую меняют его высоту; с клавиатуры — как ползунок | Ручкой перетаскивания |
|
|
88
|
-
| **Трафарет маски** | Маска, которую пустое поле `MaskedInput` показывает целиком (`__.__.____`) и которую ввод заменяет символ за символом. Украшение: `aria-hidden` | Скелетом Редактора — видом поля до Готовности |
|
|
89
|
-
| **Элемент коллекции** | Одна запись `items` у компонента-коллекции: пункт меню, строка списка, узел дерева | Элементом разметки (DOM): так и пишем — «элемент разметки» |
|
|
90
|
-
| **Недоступный** | Состояние `disabled`: действие сейчас выполнить нельзя, контрол приглушён и нажатие не срабатывает | Только для чтения (`readOnly`): значение видно и копируется, но не меняется |
|
|
91
|
-
| **Выборка** | Записи, которые остались после фильтров; считает её потребитель | Выделением |
|
|
92
|
-
| **Выделение** | Записи, которые отметил пользователь (`selectedKeys`) | Выборкой: фильтр сужает выборку, а выделение — то, что отмечено внутри неё |
|
|
110
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
111
|
+
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- | ---------------------------- |
|
|
112
|
+
| **Зона нажатия** | Область, которая принимает нажатие; бывает больше видимого контрола. Нижний порог — WCAG 2.5.8, 24 × 24 px | Размером (`size`): тот меняет вид, а зона может остаться прежней | общее | touch target, target size |
|
|
113
|
+
| **Ручка перетаскивания** | Отдельная кнопка строки, за которую строку переносят мышью, пальцем или с клавиатуры: `SortableList`, `EditableList` | Ручкой Блока Редактора и ручкой высоты | общее | grip |
|
|
114
|
+
| **Ручка высоты** | Полоса у нижнего края поля с `resizable`, за которую меняют его высоту; с клавиатуры — как ползунок | Ручкой перетаскивания | общее | — |
|
|
115
|
+
| **Трафарет маски** | Маска, которую пустое поле `MaskedInput` показывает целиком (`__.__.____`) и которую ввод заменяет символ за символом. Украшение: `aria-hidden` | Скелетом Редактора — видом поля до Готовности | text-mask | mask placeholder |
|
|
116
|
+
| **Элемент коллекции** | Одна запись `items` у компонента-коллекции: пункт меню, строка списка, узел дерева | Элементом разметки (DOM): так и пишем — «элемент разметки» | React Aria | — |
|
|
117
|
+
| **Недоступный** | Состояние `disabled`: действие сейчас выполнить нельзя, контрол приглушён и нажатие не срабатывает | Только для чтения (`readOnly`): значение видно и копируется, но не меняется | MDN | — |
|
|
118
|
+
| **Выборка** | Записи, которые остались после фильтров; считает её потребитель | Выделением | общее | result set, filtered results |
|
|
119
|
+
| **Выделение** | Записи, которые отметил пользователь (`selectedKeys`) | Выборкой: фильтр сужает выборку, а выделение — то, что отмечено внутри неё | React Aria | — |
|
|
93
120
|
|
|
94
121
|
## Слои поверх
|
|
95
122
|
|
|
96
|
-
| Термин | Значение | Не путать с |
|
|
97
|
-
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
|
|
98
|
-
| **Оверлей** | Элемент кита поверх страницы: окно, ящик, меню, поповер, подсказка, список подсказок | Порталом: оверлей может лежать и в DOM владельца, как плавающая Панель Редактора |
|
|
99
|
-
| **Слой оверлея** | Именованная ступень z-index из `OVERLAY_LAYER`: `modal` — затемнение и окно, `alert` — подтверждение над окном, `popover` — меню, поповеры, списки. Числа z-index вне этой шкалы не пишутся (ADR-0041) | Слоем токенов |
|
|
100
|
-
| **Стек Escape** | Стек открытых оверлеев кита (`src/lib/overlay-layer.ts`), общий для оверлеев на Radix и на react-aria: Escape обрабатывает только верхний, вложенные закрываются по одному | Слоем оверлея: верхний в стеке определяется положением в документе, а не z-index |
|
|
123
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
124
|
+
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- | -------- | ------------------------- |
|
|
125
|
+
| **Оверлей** | Элемент кита поверх страницы: окно, ящик, меню, поповер, подсказка, список подсказок | Порталом: оверлей может лежать и в DOM владельца, как плавающая Панель Редактора | общее | — |
|
|
126
|
+
| **Слой оверлея** | Именованная ступень z-index из `OVERLAY_LAYER`: `modal` — затемнение и окно, `alert` — подтверждение над окном, `popover` — меню, поповеры, списки. Числа z-index вне этой шкалы не пишутся (ADR-0041) | Слоем токенов | свой | z-index scale |
|
|
127
|
+
| **Стек Escape** | Стек открытых оверлеев кита (`src/lib/overlay-layer.ts`), общий для оверлеев на Radix и на react-aria: Escape обрабатывает только верхний, вложенные закрываются по одному | Слоем оверлея: верхний в стеке определяется положением в документе, а не z-index | свой | dismissable layer (Radix) |
|
|
101
128
|
|
|
102
129
|
## Компоненты в тексте
|
|
103
130
|
|
|
104
131
|
Как компонент называется по-русски в прозе. Слова после «Не пишем:» в тексте не употребляются: читатель
|
|
105
132
|
ищет по одному слову.
|
|
106
133
|
|
|
107
|
-
| Термин | Значение | Не путать с
|
|
108
|
-
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
109
|
-
| **Окно** | `Dialog`: модальная поверхность с затемнением | Ящиком. Окном браузера — его так и называем: «окно браузера». Не пишем: модалка
|
|
110
|
-
| **Ящик** | `Drawer`: модальная панель, которая выезжает от края | Окном. Не пишем: шторка, выдвижная панель
|
|
111
|
-
| **Поповер** | `Popover`: немодальная панель у кнопки, которая её открыла | Подсказкой: в той нет интерактива. Не пишем: попап
|
|
112
|
-
| **Подсказка** | `Tooltip`: короткий текст при наведении и фокусе | Поповером. Не пишем: тултип
|
|
113
|
-
| **Пояснение** | `hint` у `FormField` и соседних полей: текст под полем, который помогает его заполнить | Подсказкой (`Tooltip`) и плейсхолдером. Не пишем: подсказка поля
|
|
114
|
-
| **Плейсхолдер** | `placeholder`: пример значения, который виден в пустом поле и исчезает при вводе | Пояснением и подсказкой. Не пишем: подсказка в поле
|
|
115
|
-
| **Тост** | Глобальное уведомление `toast()` в `Toaster` | Сообщением поля Редактора: то привязано к полю
|
|
116
|
-
| **Флажок** | `Checkbox`: выбор «да / нет» в наборе | Переключателем `Toggle` (`role="switch"`): одно булево свойство, а не выбор в наборе. Не пишем: чекбокс |
|
|
117
|
-
| **Полоса над таблицей** | Слот `toolbar` у `DataTable`, обычно `TableToolbar` | Панелью Редактора и примитивом `Toolbar`. Не пишем: тулбар
|
|
118
|
-
| **Раскрыватель** | Кнопка, которая раскрывает меню: правая часть `SplitButton`, кнопка `Menu` | Поповером: тот — сама раскрывшаяся панель. Не пишем: disclosure, стрелка-меню
|
|
119
|
-
| **Сегментированный выбор** | `Segmented`: ряд кнопок, из которых выбрана ровно одна | Вкладками `Tabs` (те переключают панели) и `ToggleGroup` (там выбрано ноль или несколько)
|
|
120
|
-
| **Тег** | `Tag` в `TagGroup` и `TagInput`: компактный элемент с текстом и необязательной кнопкой удаления | Меткой Редактора (`Mark`) и подписью
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
134
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
135
|
+
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ---------- | ------------------------------ |
|
|
136
|
+
| **Окно** | `Dialog`: модальная поверхность с затемнением | Ящиком. Окном браузера — его так и называем: «окно браузера». Не пишем: модалка | WAI-ARIA | modal |
|
|
137
|
+
| **Ящик** | `Drawer`: модальная панель, которая выезжает от края | Окном. Не пишем: шторка, выдвижная панель | MUI | sheet, side panel |
|
|
138
|
+
| **Поповер** | `Popover`: немодальная панель у кнопки, которая её открыла | Подсказкой: в той нет интерактива. Не пишем: попап | Radix | — |
|
|
139
|
+
| **Подсказка** | `Tooltip`: короткий текст при наведении и фокусе | Поповером. Не пишем: тултип | WAI-ARIA | — |
|
|
140
|
+
| **Пояснение** | `hint` у `FormField` и соседних полей: текст под полем, который помогает его заполнить | Подсказкой (`Tooltip`) и плейсхолдером. Не пишем: подсказка поля | общее | helper text, description |
|
|
141
|
+
| **Плейсхолдер** | `placeholder`: пример значения, который виден в пустом поле и исчезает при вводе | Пояснением и подсказкой. Не пишем: подсказка в поле | MDN | — |
|
|
142
|
+
| **Тост** | Глобальное уведомление `toast()` в `Toaster` | Сообщением поля Редактора: то привязано к полю | React Aria | snackbar |
|
|
143
|
+
| **Флажок** | `Checkbox`: выбор «да / нет» в наборе | Переключателем `Toggle` (`role="switch"`): одно булево свойство, а не выбор в наборе. Не пишем: чекбокс | WAI-ARIA | — |
|
|
144
|
+
| **Полоса над таблицей** | Слот `toolbar` у `DataTable`, обычно `TableToolbar` | Панелью Редактора и примитивом `Toolbar`. Не пишем: тулбар | Carbon | table bar, batch actions bar |
|
|
145
|
+
| **Раскрыватель** | Кнопка, которая раскрывает меню: правая часть `SplitButton`, кнопка `Menu` | Поповером: тот — сама раскрывшаяся панель. Не пишем: disclosure, стрелка-меню | WAI-ARIA | menu trigger |
|
|
146
|
+
| **Сегментированный выбор** | `Segmented`: ряд кнопок, из которых выбрана ровно одна | Вкладками `Tabs` (те переключают панели) и `ToggleGroup` (там выбрано ноль или несколько) | Apple HIG | segmented button, toggle group |
|
|
147
|
+
| **Тег** | `Tag` в `TagGroup` и `TagInput`: компактный элемент с текстом и необязательной кнопкой удаления | Меткой Редактора (`Mark`) и подписью поля, Чипом: его переключают, а не удаляют. Не пишем: таг | React Aria | removable chip |
|
|
148
|
+
| **Чип** | `Chip`: компактная кнопка-фильтр, которую включают и выключают (`selected`, `aria-pressed`), с необязательным счётчиком `count` | Тегом: тег удаляют, а чип переключают. Сегментированным выбором: там выбирают один вариант из нескольких | M3 | filter chip, toggle button |
|
|
149
|
+
| **Кнопка закрытия** | Кнопка с иконкой «×», которая закрывает окно, ящик, поповер или уведомление; у поля поиска — **кнопка очистки** | Кнопкой «Отмена». Не пишем: крестик | WAI-ARIA | — |
|
|
150
|
+
| **Свод сочетаний** | `ShortcutsHelp`: окно со списком сочетаний клавиш | Справочником Редактора: тот открывается из Панели и описывает сочетания Редактора | общее | shortcut list, cheat sheet |
|
|
151
|
+
| **Мегаменю** | `MegaMenu`: Столбец категорий и Полка наведённой Категории — каталог в духе Amazon | `Menu`: тот для команд, а не для навигации. Не пишем: мега-дропдаун | общее | — |
|
|
152
|
+
| **Категория** | `MegaMenuCategory`: строка Столбца с подписью, иконкой и своей Полкой | Пунктом меню (`MenuItem`) | свой | department |
|
|
153
|
+
| **Столбец категорий** | Вертикальный список Категорий Мегаменю | `SideNav`: тот раскрывает ветки на месте | свой | — |
|
|
154
|
+
| **Полка** | Область рядом со Столбцом с содержимым открытой Категории: колонки ссылок, промо. До 4.3.0 — «Витрина»; проп ширины по-прежнему `showcaseWidth` | Витриной — это Storybook кита; Панелью Редактора и поповером | общее | — |
|
|
155
|
+
| **Прицел** | Отложенная смена Категории, пока курсор идёт наискосок к открытой Полке | Задержкой открытия: прямое наведение Прицел не тормозит | Ben Kamens | aim, safe triangle |
|
|
128
156
|
|
|
129
157
|
## Редактор
|
|
130
158
|
|
|
131
159
|
Термины `RichTextEditor` и `RichTextView` (вход `@olddevs/ui/editor`). Здесь особенно легко
|
|
132
160
|
взять слово из соседнего редактора (плагин, сервис, нода) — оно заводит второй смысл.
|
|
133
161
|
|
|
134
|
-
| Термин | Значение | Не путать с
|
|
135
|
-
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
136
|
-
| **Редактор** | `RichTextEditor` — поле ввода форматированного текста | Редактором кода: его в ките нет, показ кода — `CodeView`
|
|
137
|
-
| **Просмотр** | `RichTextView` — только чтение сохранённого Документа | `readOnly`-режимом Редактора: тот держит движок, Просмотр — нет
|
|
138
|
-
| **Оглавление** | `RichTextToc`: список заголовков Документа рядом с Просмотром или Редактором. Свёрнуто — полоса штрихов, раскрыто — список, клик по пункту ведёт к заголовку | `Heading` кита и навигацией сайта документации
|
|
139
|
-
| **Документ** | Значение Редактора: HTML-строка, ограниченная Схемой | JSON-деревом ProseMirror в движке — оно внутреннее; наружу оно выходит только JSON-конвертом
|
|
140
|
-
| **JSON-конверт** | Документ как JSON для файла и шаблона: `{ format: "olddevs-rich-text", version, doc }` (`getJSON()`, `setJSON()`, `defaultValue`), без потерь и через Схему | Значением Редактора — значение остаётся HTML; голым деревом `editor.getJSON()` без конверта
|
|
141
|
-
| **Схема** | Белый список Блоков, Меток и атрибутов, которые Редактор принимает и отдаёт | Санитизацией на сервере — её делает потребитель (`sanitizeRichText`)
|
|
142
|
-
| **Блок** | Структурный элемент Документа: абзац, заголовок, список, таблица, картинка… | Меткой
|
|
143
|
-
| **Метка** | Строчное форматирование внутри Блока: жирный, ссылка, цвет… | Блоком
|
|
144
|
-
| **Атом** | Блок или строчный элемент, который выделяется, переносится и удаляется целиком: картинка (подпись внутри неё правится), разделитель, мягкий перенос, упоминание. Всегда делает поле непустым | Пустым Блоком: абзац без текста — не Атом и содержимым не считается
|
|
145
|
-
| **Текст атома** | Строка, которой Атом представлен в тексте Документа: её отдают `getText` и `getSelectedText`, её длина — вес Атома в `maxLength`, ею Атом выгружается в Markdown без своих правил. У картинки — текст подписи, у разделителя — пустая строка | Атрибутом Блока
|
|
146
|
-
| **Раскладка** | Блок из колонок (Инструмент `layout`): шесть вариантов — от одной до четырёх равных колонок, 60/40 и 40/60. Только верхнего уровня, в себя не вкладывается; колонка для своих Блоков — то же, что Документ | Таблицей: у той строки и ячейки данных, а колонки Раскладки — вёрстка Документа. `Grid` кита — сеткой экрана, а не Блоком
|
|
147
|
-
| **Обёртка** | Блок, который собирает группу Блоков (Инструмент `wrapper`, `div` с `data-block="wrapper"`): их двигают, дублируют и удаляют одним Блоком. Без Тона Обёртки своего вида нет — пунктир только в Редакторе. Обёртка и Раскладка в Обёртку не вкладываются | Цитатой: у той свой вид и смысл в Документе, а Обёртка без тона — только группировка
|
|
148
|
-
| **Тон Обёртки** | Оформление Обёртки заметкой (`data-tone`): фон и полоса слева одного из пяти тонов словаря `Tone` — «Заметка», «Совет», «Важно», «Внимание», «Осторожно». Выбирается в «Тон ›» Ручки Блока, одинаков в Редакторе и Просмотре, в Markdown выгружается GitHub alert (то, что GitHub и Notion называют callout) | Тоном Сообщения поля (`status` или `error`). Смыслом: ролей и `aria-*` тон не несёт, смысл заметки пишется словом в тексте
|
|
149
|
-
|
|
|
150
|
-
|
|
|
151
|
-
| **Меню
|
|
152
|
-
|
|
|
153
|
-
|
|
|
154
|
-
|
|
|
155
|
-
|
|
|
156
|
-
|
|
|
157
|
-
|
|
|
158
|
-
|
|
|
159
|
-
|
|
|
160
|
-
|
|
|
161
|
-
|
|
|
162
|
-
|
|
|
163
|
-
|
|
|
164
|
-
|
|
|
165
|
-
|
|
|
166
|
-
|
|
|
167
|
-
|
|
|
168
|
-
|
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
162
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
163
|
+
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------ |
|
|
164
|
+
| **Редактор** | `RichTextEditor` — поле ввода форматированного текста | Редактором кода: его в ките нет, показ кода — `CodeView` | Tiptap | rich text editor, WYSIWYG |
|
|
165
|
+
| **Просмотр** | `RichTextView` — только чтение сохранённого Документа | `readOnly`-режимом Редактора: тот держит движок, Просмотр — нет | свой | renderer |
|
|
166
|
+
| **Оглавление** | `RichTextToc`: список заголовков Документа рядом с Просмотром или Редактором. Свёрнуто — полоса штрихов, раскрыто — список, клик по пункту ведёт к заголовку | `Heading` кита и навигацией сайта документации | общее | TOC, outline |
|
|
167
|
+
| **Документ** | Значение Редактора: HTML-строка, ограниченная Схемой | JSON-деревом ProseMirror в движке — оно внутреннее; наружу оно выходит только JSON-конвертом | ProseMirror | doc, content |
|
|
168
|
+
| **JSON-конверт** | Документ как JSON для файла и шаблона: `{ format: "olddevs-rich-text", version, doc }` (`getJSON()`, `setJSON()`, `defaultValue`), без потерь и через Схему | Значением Редактора — значение остаётся HTML; голым деревом `editor.getJSON()` без конверта | свой | getJSON |
|
|
169
|
+
| **Схема** | Белый список Блоков, Меток и атрибутов, которые Редактор принимает и отдаёт | Санитизацией на сервере — её делает потребитель (`sanitizeRichText`) | ProseMirror | allowlist |
|
|
170
|
+
| **Блок** | Структурный элемент Документа: абзац, заголовок, список, таблица, картинка… | Меткой | ProseMirror | block node |
|
|
171
|
+
| **Метка** | Строчное форматирование внутри Блока: жирный, ссылка, цвет… | Блоком | ProseMirror | — |
|
|
172
|
+
| **Атом** | Блок или строчный элемент, который выделяется, переносится и удаляется целиком: картинка (подпись внутри неё правится), разделитель, мягкий перенос, упоминание. Всегда делает поле непустым | Пустым Блоком: абзац без текста — не Атом и содержимым не считается | ProseMirror | atom node |
|
|
173
|
+
| **Текст атома** | Строка, которой Атом представлен в тексте Документа: её отдают `getText` и `getSelectedText`, её длина — вес Атома в `maxLength`, ею Атом выгружается в Markdown без своих правил. У картинки — текст подписи, у разделителя — пустая строка | Атрибутом Блока | Tiptap | renderText, leafText |
|
|
174
|
+
| **Раскладка** | Блок из колонок (Инструмент `layout`): шесть вариантов — от одной до четырёх равных колонок, 60/40 и 40/60. Только верхнего уровня, в себя не вкладывается; колонка для своих Блоков — то же, что Документ | Таблицей: у той строки и ячейки данных, а колонки Раскладки — вёрстка Документа. `Grid` кита — сеткой экрана, а не Блоком | BlockNote | columns, layout |
|
|
175
|
+
| **Обёртка** | Блок, который собирает группу Блоков (Инструмент `wrapper`, `div` с `data-block="wrapper"`): их двигают, дублируют и удаляют одним Блоком. Без Тона Обёртки своего вида нет — пунктир только в Редакторе. Обёртка и Раскладка в Обёртку не вкладываются | Цитатой: у той свой вид и смысл в Документе, а Обёртка без тона — только группировка | свой | container, group |
|
|
176
|
+
| **Тон Обёртки** | Оформление Обёртки заметкой (`data-tone`): фон и полоса слева одного из пяти тонов словаря `Tone` — «Заметка», «Совет», «Важно», «Внимание», «Осторожно». Выбирается в «Тон ›» Ручки Блока, одинаков в Редакторе и Просмотре, в Markdown выгружается GitHub alert (то, что GitHub и Notion называют callout) | Тоном Сообщения поля (`status` или `error`). Смыслом: ролей и `aria-*` тон не несёт, смысл заметки пишется словом в тексте | GitHub | callout, alert, admonition |
|
|
177
|
+
| **Сворачиваемый Блок** | Блок из заголовка и содержимого, которое раскрывают и сворачивают (Инструмент `details`, расширение Details из Tiptap; теги `details` и `summary`). Содержимое — Блоки, Раскладки и Обёртки в нём нет. Открытость пишет в Документ только Опция `persist` | Обёрткой: та группирует Блоки и ничего не прячет. `Accordion` кита: тот — компонент экрана, а не Блок Документа | Tiptap | details, toggle block, accordion |
|
|
178
|
+
| **Панель** | Набор кнопок форматирования; вид задаёт `toolbar`. **Фиксированная** (`fixed`, по умолчанию) — над полем, липнет при прокрутке; **плавающая** (`floating`) — те же кнопки над непустым выделением. При `bubble` Панели нет — её место занимает Меню выделения, при `none` нет ни того, ни другого. На сенсорном экране Панель всегда фиксированная | `Toolbar` кита — Примитивом, из которого Панель собрана | общее | formatting toolbar, fixed menu |
|
|
179
|
+
| **Меню вставки** | Список «Добавить» и «Превратить в»: открывается по `/` в тексте и по кнопке «+» | Контекстным меню браузера | BlockNote | insert menu, slash command |
|
|
180
|
+
| **Меню выделения** | Компактная плашка на инверсной поверхности над непустым выделением: «¶», списки, жирный, курсив, подчёркнутый, цвет, «…», ссылка, эмодзи; состав задан китом. Стоит вместо Панели при `toolbar="bubble"` и поверх фиксированной Панели — там её выключает `selectionMenu={false}`. На сенсорном экране её нет | Плавающей Панелью: у той полный набор кнопок | Tiptap | selection menu, BubbleMenu |
|
|
181
|
+
| **Ручка Блока** | «⋮» у Блока с кареткой и её меню действий над Блоком целиком: «Добавить ›», «Формат ›», «Вверх», «Вниз», «Дублировать», «Удалить» | Панелью: та работает с выделением, а не с Блоком | BlockNote | drag handle, side menu |
|
|
182
|
+
| **Пункт вставки** | Строка Меню вставки: вставляет Блок или превращает текущий. Один пункт виден и по `/`, и по «+», и в Ручке Блока | Кнопкой Панели | BlockNote | suggestion item |
|
|
183
|
+
| **Действие над Блоком** | Пункт меню Ручки Блока, который работает с Блоком целиком, например «Дублировать» | Кнопкой: та работает с выделением | свой | block menu |
|
|
184
|
+
| **Справочник сочетаний** | Поповер «команда — сочетание» только для чтения за последней кнопкой фиксированной Панели. Строки — команды включённых Инструментов, своих тоже; на телефоне кнопки нет | `CommandPalette` кита: строки Справочника сочетаний не нажимаются. `ShortcutsHelp` кита: тот — сочетания экрана, а не Редактора | общее | shortcuts reference, cheat sheet |
|
|
185
|
+
| **HTML-режим** | Режим Инструмента `source`: кнопка «HTML» на фиксированной Панели заменяет Документ полем с его HTML. Текст поля проходит Схему и становится Документом одной правкой — при выходе из режима, `blur`, отправке формы и чтении через Хэндл | HTML-соглашением: то — форма своего в Документе, а не режим. `CodeView`: тот показывает код, а поле HTML правится | CKEditor | HTML mode, source editing |
|
|
186
|
+
| **Стекло** | Полупрозрачная заливка с размытием фона у всего, что Редактор показывает поверх Документа: плавающая Панель, Меню выделения, меню, поповеры, Карточка у текста. Цвет — токен своей поверхности; при `prefers-reduced-transparency`, `prefers-contrast: more` и на iOS заливка сплошная | `Menu` и `Popover` кита вне Редактора: те остаются сплошными | общее | glassmorphism, frosted glass |
|
|
187
|
+
| **UI-запись** | Элемент интерфейса своего Инструмента, описанный данными: кнопка, Пункт вставки, Действие над Блоком или Карточка у текста. Рисует её кит в Отведённом месте; выключенный Инструмент убирает и свои записи | React-узлом в интерфейсе: произвольный React допускается только в содержимом поповера кнопки и Карточки у текста | свой | — |
|
|
188
|
+
| **Отведённое место** | Одно место на поверхности, где стоят записи своих Инструментов, в порядке `tools`: группа Панели перед «Отменить», конец раздела Меню вставки, секция Ручки Блока перед «Удалить» | Позицией относительно встроенной кнопки: id встроенных публичным API не являются | свой | — |
|
|
189
|
+
| **Пресет** | Готовый набор встроенных Инструментов: `full` или `basic` (`RICH_TEXT_PRESETS`). Не замороженный список: новый встроенный приходит в него minor-версией | Точным списком `tools`: его состав меняет только экран | Tiptap | StarterKit |
|
|
190
|
+
| **Инструмент** | Одна возможность Редактора: её Блоки и Метки, их правила в Схеме и место в интерфейсе, например `table`. Встроенный задаётся именем, свой — описанием | Кнопкой: выключенный Инструмент убирает и Блок из Схемы. Плагином Redactor: тот — класс поведения над DOM без Схемы | свой | extension, plugin |
|
|
191
|
+
| **Свой Инструмент** | Инструмент, который описывает потребитель (`CustomTool`): правила Схемы данными, Extensions и UI-записи. Его передают в `tools` вперемешку с именами кита | Внутренним описанием кита: то — надмножество публичной формы для встроенных, наружу не экспортируется | свой | custom extension |
|
|
192
|
+
| **Опции Инструмента** | Что экран задаёт Инструменту до создания движка: стартовые флажки Поиска, `offsetVar`, `levels` и `listWidth` Оглавления, `defaults` своего Инструмента (`defineTool`). Экран задаёт их записью `tool(…)`, кит читает один раз, при создании движка | `options` у расширения Tiptap: те задаёт сам автор расширения и читает само расширение, а Опции задаёт экран и читает кит. Пропами Редактора (`preset`, `maxHeight`): те настраивают поле, а не Инструмент | Tiptap | options, configure |
|
|
193
|
+
| **Настроенный Инструмент** | Запись `tools`, которую возвращает `tool(name, options)` или `tool(definition, options)`: Инструмент вместе с его Опциями. Включает Инструмент без имени в `tools` и побеждает голое имя из Пресета | Определением `defineTool`: то описывает Инструмент, а Настроенный Инструмент — его включение с Опциями. Описанием встроенного: оно наружу не выходит, запись лишь называет Инструмент и несёт Опции | Tiptap | configure |
|
|
194
|
+
| **Состояние Инструмента** | Снимок данных, который экран читает хуком `useRichTextToolState(ref, name)`: у Поиска — открыта ли панель, запрос, число совпадений и текущее, у Оглавления — заголовки и текущий раздел. Перерисовка только при смене снимка | `storage` у расширения Tiptap: то — изменяемое хранилище внутри движка, а Состояние только читается. `useRichTextEditorState`: тот берёт срез живого `editor` Tiptap, а не контракт Инструмента | Tiptap | storage |
|
|
195
|
+
| **Команды Инструмента** | Что экран вызывает у Инструмента через `handle.tool(name)`: `tool("search")?.open()`, `tool("toc")?.jumpTo(2)`. Каждая возвращает `boolean`; `null` вместо объекта Команд — Инструмента нет в наборе, у него нет Команд или движок ещё не создан | Методами Хэндла (`insertHTML`, `focus`): те общие для любого `tools`, а Команды есть, только пока Инструмент включён. `editor.commands` и `commands` у Tiptap: те — команды движка, они следуют его мажору | Tiptap | commands |
|
|
196
|
+
| **Префикс потребителя** | Начало имени всего своего — Инструмента, его Блоков, Меток и атрибутов — до подчёркивания: `acme_mergeTag`, `data-acme_size`. В именах кита подчёркивания нет, поэтому своё и встроенное не совпадают ни в наборе, ни в Документе | Пресетом: тот — набор встроенных Инструментов, а не пространство имён | свой | namespace |
|
|
197
|
+
| **HTML-соглашение** | Форма своего в Документе: Блок — `div` или `span` с `data-block`, Метка — `span` с `data-mark`, атрибуты — `data-<префикс>_<имя>`. Заморожено: расширяется только добавлением | Тегами Схемы кита (`p`, `table`, `img`): свой Блок их занять не может | свой | parseHTML, renderHTML |
|
|
198
|
+
| **Признак Блока** | Свойство Блока, которое понимает только кит, а не движок: «контейнер» (детям своя Ручка), «можно превратить в», «Атом без меню форматирования» | Атрибутом Блока: тот хранится в Документе | свой | NodeSpec |
|
|
199
|
+
| **Extensions** | Расширения Tiptap в описании Инструмента (поле `engine`): Node, Mark, Extension, плагины ProseMirror, NodeView. Передаются сразу или через Загрузчик | Правилами Схемы: те — данные, их читают сервер и Просмотр без движка. «Часть для движка» — прежнее название (так в ADR-0058) | Tiptap | extensions |
|
|
200
|
+
| **Загрузчик** | Функция с динамическим импортом вместо самих Extensions: `engine: () => import(…)`. Так же грузятся тяжёлые встроенные вне `basic` — Блок кода и таблица | Предзагрузкой (`modulepreload`): её кит не публикует, ставит потребитель | свой | lazy loading, dynamic import |
|
|
201
|
+
| **Хэндл** | Императивный доступ кода экрана к Редактору через `ref`: вставка у каретки, чтение, фокус, история, Команды Инструментов (`tool(name)`) | Сервисами Redactor: те — внутренности движка, а не API экрана | React | imperative handle, ref |
|
|
202
|
+
| **Готовность** | Момент, когда движок создан и Загрузчики всех включённых Инструментов, своих и встроенных, отработали: с него методы Хэндла действуют, а не молчат. Наступает один раз за монтаж, о нём сообщает `onReady` | Гидратацией: после неё движок может ещё ждать Загрузчики | свой | onCreate |
|
|
203
|
+
| **Фокус поля** | Фокус внутри Редактора целиком: Документ, Панель, поповеры кита, поле HTML. Переход между ними Фокус поля не теряет; `onFocus` и `onBlur` — о нём | Фокусом Документа (`focus` и `blur` движка): клик в Панель его снимает | общее | focus within |
|
|
204
|
+
| **Правка автора** | Изменение Документа, равное набору с клавиатуры: шаг истории, `onChange` после задержки, предел символов действует. Сюда же вставка, отмена и повтор из Хэндла | Заменой снаружи | свой | — |
|
|
205
|
+
| **Замена снаружи** | Подмена Документа целиком (`value`, `clear()`, `setMarkdown()`, `setJSON()`): предел символов не режет; `onChange` сразу у `clear()`, `setMarkdown()` и `setJSON()`, на новый `value` не вызывается | Правкой автора | Tiptap | setContent |
|
|
206
|
+
| **Скелет** | Вид Редактора до Готовности: рамка поля, место Панели и Документ: очищенный Схемой, он выведен статичным HTML с тем же классом и ритмом, что Документ движка, без ввода. На сервере — рамка без Документа. Сбой Загрузчика превращает Скелет в ошибку поля с «Повторить» | Просмотром: тот — отдельный компонент только для чтения, а Скелет — состояние Редактора, которое сменяется движком. Компонентом `Skeleton` кита — заглушкой загрузки | общее | skeleton screen, loading placeholder |
|
|
207
|
+
| **Строка статуса** | Строка внутри рамки поля под Документом: слева содержимое экрана (`status`: число слов, «Сохранено», соавтор), справа счётчик символов кита | Сообщением поля: строка показывает длительное состояние экрана, а не событие | общее | status line, footer |
|
|
208
|
+
| **Сообщение поля** | Одно событие, привязанное к полю (`showNotice`): тон `status` (только озвучивается) или `error` (видимая строка под полем до следующей Правки автора). Новое заменяет прежнее | Тостом кита: тот глобален и к полю не привязан | свой | field message, error message |
|
|
209
|
+
| **Карточка у текста** | Немодальная карточка под диапазоном Документа, который объявил свой Инструмент (`textCards`): комментарий, подсказка по результатам проверки текста. Открывается кареткой или щелчком, фокус остаётся в тексте | Поповером кнопки: его открывает кнопка, а Карточку — место Документа | свой | comment, annotation |
|
|
210
|
+
| **Символ-триггер** | Свой символ Инструмента (`trigger`), набор которого в начале Блока или после пробела открывает список пунктов у каретки, как `/`: `@` для упоминаний, `#` для тегов. Выбор заменяет набранное `@запрос` своим узлом | Меню вставки по `/`: то — встроенное, а свой символ задаёт Инструмент | Tiptap | suggestion char, mention |
|
|
211
|
+
| **Лист** | Светлая область Документа в любой теме приложения (`surface="paper"`) — для текста, который уйдёт из приложения светлым: письмо, печать, PDF. Панель, меню и рамка поля остаются в теме приложения; Просмотр с тем же `surface` показывает тот же Лист | Темой `light`: та меняет всё приложение, Лист — только Документ | свой | page, canvas |
|
|
212
|
+
| **Остров** | Клиентский кусок Просмотра, который после монтирования оживляет Блок в уже показанном HTML: кнопка «Копировать» у Блока кода, `island` своего Блока | Видом узла: тот живёт только в движке Редактора | Astro | islands architecture |
|
|
213
|
+
| **Гнездо** | Место в показанном HTML, куда Остров монтирует живой элемент: шапка Блока кода, в которую встаёт кнопка «Копировать» | Отведённым местом: то — место в интерфейсе Редактора для записей Инструментов | React | — |
|
|
214
|
+
|
|
215
|
+
## Tiptap
|
|
216
|
+
|
|
217
|
+
Слова движка [Tiptap](https://tiptap.dev), на котором стоит Редактор. Их пишут по-английски и не
|
|
218
|
+
переводят: русская калька («нода», «плагин») завела бы второй смысл рядом с Блоком и
|
|
219
|
+
Инструментом. Автор своего Инструмента пишет Extensions на Tiptap и читает документацию Tiptap —
|
|
220
|
+
таблица связывает слово движка со словом кита. В колонке «Значение» сначала смысл в Tiptap, затем то,
|
|
221
|
+
что ему соответствует у кита.
|
|
222
|
+
|
|
223
|
+
| Термин | Значение | Не путать с | Источник | Также ищут |
|
|
224
|
+
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ---------- |
|
|
225
|
+
| **Extension** | Единица движка Tiptap: узлы, Метки, команды, сочетания клавиш и плагины ProseMirror в одном классе (`Extension.create`; `Node` и `Mark` — её виды). У кита то же слово: Extensions Инструмента — это его расширения Tiptap, а возможность целиком — это Инструмент. Extension без Схемы — Инструмент без Блока (`search`, `toc`) | Инструментом: тот несёт ещё правила для Схемы, Markdown и Просмотра, а также UI-записи, а Extension — только движок. Расширение Tiptap в `tools` не передают: его кладут в Extensions своего Инструмента | Tiptap | — |
|
|
226
|
+
| **Node** | Тип узла в Схеме Tiptap: абзац, заголовок, таблица, картинка; бывает блочным и строчным. У кита блочному соответствует Блок, строчному без содержимого — строчный Атом (упоминание) | Блоком целиком: Блок — это правила Схемы данными и Признаки Блока, которые читают сервер и Просмотр, а Node — одно из его Extensions. Русского слова «нода» в ките нет | Tiptap | — |
|
|
227
|
+
| **Mark** | Строчное форматирование в Схеме Tiptap: жирный, ссылка, цвет. У кита — Метка: правила Схемы данными и `Mark` в Extensions | Тегом `mark`: его рисует только Метка `highlight`. Text Style Tiptap (пустой `span` под стили) — основа Метки `color`, а не отдельный Инструмент | Tiptap | — |
|
|
228
|
+
| **StarterKit**, **Kit** | Набор расширений Tiptap одним пакетом: StarterKit, ListKit, TableKit, TextStyleKit; каждое расширение набора настраивается или выключается ключом в `configure`. У кита StarterKit — внутренняя деталь сборки движка: описание каждого встроенного Инструмента вносит свою долю ключей (`starterKit`), доли сливаются в один `StarterKit.configure`, а ключ без доли выключен. Наружу выходит Пресет | Пресетом (`full`, `basic`): тот — набор Инструментов, а не расширений движка, и не замороженный. Китом словаря — дизайн-системой `@olddevs/ui`: слово Kit в названиях Tiptap к ней отношения не имеет. Подключить `StarterKit` через `tools` нельзя | Tiptap | bundle |
|
|
229
|
+
| **options** (`configure`) | Настройки расширения Tiptap: автор объявляет их в `addOptions`, потребитель меняет вызовом `configure({…})`. У кита — Опции Инструмента: `tool(name, options)` у `search` и `toc`, `defaults` и `tool(definition, options)` у своего Инструмента (`defineTool`). Слияние как у `configure` в Tiptap v3: вложенные объекты сливаются, массивы и функции заменяются | Опциями расширений Tiptap внутри Extensions: встроенные Extensions кит собирает сам, и экрану они не открыты. Пропами Редактора (`preset`, `maxHeight`): те настраивают поле, а не Инструмент | Tiptap | — |
|
|
230
|
+
| **storage** | Изменяемое хранилище расширения внутри движка (`editor.storage.<имя>`): результаты поиска, счётчик символов. У кита — Состояние Инструмента: снимок, который экран читает хуком `useRichTextToolState(ref, name)`; свой Инструмент объявляет его функцией `state` в `defineTool` | `editor.storage`: Состояние только читается, а storage меняет само расширение. Хранилище — часть движка и следует его мажору | Tiptap | — |
|
|
231
|
+
| **commands** | Команды расширения Tiptap (`addCommands`): `editor.commands`, цепочка `editor.chain()`, проверка `editor.can()`. У кита — Команды Инструмента: `handle.tool(name)`, каждая возвращает `boolean`; свой Инструмент объявляет их функцией `commands` в `defineTool` | `editor.commands` и `chain()`: те — команды движка и следуют его мажору. Методами Хэндла (`insertHTML`, `focus`): те общие для любого `tools`, а Команды Инструмента есть, только пока он включён | Tiptap | — |
|
|
232
|
+
| **`extend`** | Способ изменить существующее расширение Tiptap: `Bold.extend({…})`. У кита аналога нет: встроенный Инструмент не подменяется (ADR-0058, п. 1.5). Если нужно другое поведение, выключите встроенный и поставьте свой под именем с Префиксом потребителя | `configure`: тот меняет Опции, а не поведение; его аналог у кита есть — Опции Инструмента. Своим Инструментом «вместо» встроенного: у того собственное имя, свои Блоки и Метки | Tiptap | — |
|
|
233
|
+
| **`priority`** | Число у расширения Tiptap: чем оно больше, тем раньше расширение в очереди и тем раньше опрашиваются его плагины. У кита числа нет: порядок встроенных Инструментов задаёт сам кит (от него зависят ранг Меток, а с ним их вложенность в HTML, вставка и клавиши), а свои идут после встроенных в порядке `tools`, и их обработчики вставки и drop опрашиваются раньше встроенных | Порядком записей на Панели и в Меню вставки: его задаёт кит, а UI-записи своих Инструментов стоят в Отведённом месте в порядке `tools`. `priority` правила `parseHTML`: то — очередность правил разбора одного узла | Tiptap | — |
|
|
234
|
+
| **NodeView** | Свой вид узла в Редакторе: вместо `renderHTML` узел рисуется кодом на JavaScript или React. У кита — вид узла в Extensions; в Просмотре, где движка нет, ему соответствует Остров | Островом: тот оживляет Блок в уже показанном HTML без движка, а NodeView живёт только в Редакторе. `renderHTML`: он даёт HTML Документа, а NodeView — лишь вид на экране | Tiptap | — |
|
|
235
|
+
| **MarkView** | То же для Метки: свой вид Метки в Редакторе. У кита — вид Метки в Extensions; Острова у Метки нет, в Просмотре она остаётся очищенным HTML | NodeView: тот рисует узел целиком, а MarkView — отрезок текста с Меткой. Островом: Остров бывает только у Блока | Tiptap | — |
|
|
236
|
+
| **Decoration** | Оформление поверх Документа, которое его не меняет: подсветка, класс на узле, виджет (`Decoration` ProseMirror). У кита то же слово: Decoration живёт в Extensions и в Документ не попадает — так устроены подсветка кода, совпадения Поиска и индикатор загрузки картинки | Меткой: Метка хранится в Документе и уходит в `value`, Decoration — нет. Атрибутом Блока | ProseMirror | — |
|
|
237
|
+
| **Input rule** | Правило ввода: набранный текст по шаблону заменяется узлом или Меткой (`# ` — заголовок, `**…**` — жирный). У кита отдельного термина нет: правило лежит в Extensions Блока или Метки, а автор текста видит его как Markdown-сокращение при наборе | Markdown-выгрузкой (`getMarkdown`, `setMarkdown`): та переводит весь Документ, а правило ввода срабатывает на набранном фрагменте. Пунктом вставки | Tiptap | — |
|
|
238
|
+
| **Paste rule** | Правило вставки: при вставке или drop совпавший с шаблоном текст (чаще всего ссылка) становится узлом или Меткой. У кита то же: правило в Extensions Инструмента | Разбором вставки по Схеме: тот срезает то, чего Схема не знает, а Paste rule превращает совпавший текст в узел. Правилом разбора `parseHTML`: то относится к HTML, а не к тексту | Tiptap | — |
|
|
239
|
+
| **Schema** | Описание допустимых узлов и Меток в ProseMirror: какие бывают и что внутри чего; Tiptap собирает его из расширений. У кита Схема — то же самое плюс белый список для санитайзера и Просмотра: правила лежат в описании Инструмента данными, их читают сервер и Просмотр без движка, а Schema движка собирается из Extensions | Санитизацией на сервере: её делает потребитель (`sanitizeRichText`). JSON-деревом ProseMirror: оно внутреннее | ProseMirror | — |
|
|
240
|
+
| **Transaction** | Одно изменение состояния движка ProseMirror: шаги над Документом, выделение и метаданные; цепочка `chain().run()` — одна транзакция. У кита слова нет: Состояние Инструмента пересчитывается на каждой транзакции, а правка из `run` Действия над Блоком — одна транзакция, то есть одна отмена | Правкой автора: та — изменение Документа, равное набору, а транзакция бывает и без изменения Документа (выделение, метаданные). Перерисовкой: Состояние перерисовывает экран, только когда сменился снимок, а не на каждой транзакции | ProseMirror | — |
|
|
241
|
+
| **BubbleMenu** | Меню Tiptap над выделенным текстом (расширение Bubble Menu). У кита на нём стоят Меню выделения (`toolbar="bubble"`) и плавающая Панель (`toolbar="floating"`): условие показа и позиция у них общие | FloatingMenu: то меню стоит у пустой строки. Значение `floating` у кита — плавающая Панель над выделением, а не FloatingMenu Tiptap | Tiptap | — |
|
|
242
|
+
| **FloatingMenu** | Меню Tiptap у пустой строки: появляется, когда каретка стоит в пустом Блоке (расширение Floating Menu). У кита такого меню нет: Меню вставки открывается по `/` и кнопкой «+» Панели | Плавающей Панелью (`toolbar="floating"`): та всплывает над выделением и стоит на BubbleMenu | Tiptap | — |
|
|
243
|
+
| **Suggestion** | Утилита Tiptap для списка по символу (`@tiptap/suggestion`): набранный `char` открывает список у каретки, выбор пункта заменяет набранное. У кита на ней стоят Меню вставки на `/` и Символ-триггер своего Инструмента | Меню вставки целиком: его открывает и кнопка «+», без символа | Tiptap | — |
|