@olddevs/ui 4.4.0 → 4.5.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.
Files changed (159) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/editor/RichTextEditor.d.ts +11 -4
  3. package/dist/editor/RichTextEditor.d.ts.map +1 -1
  4. package/dist/editor/RichTextEditor.js +90 -60
  5. package/dist/editor/RichTextEditor.js.map +1 -1
  6. package/dist/editor/RichTextView.d.ts +2 -1
  7. package/dist/editor/RichTextView.d.ts.map +1 -1
  8. package/dist/editor/RichTextView.js.map +1 -1
  9. package/dist/editor/core/containers.d.ts +2 -6
  10. package/dist/editor/core/containers.d.ts.map +1 -1
  11. package/dist/editor/core/containers.js +2 -1
  12. package/dist/editor/core/containers.js.map +1 -1
  13. package/dist/editor/core/customTool.d.ts +8 -2
  14. package/dist/editor/core/customTool.d.ts.map +1 -1
  15. package/dist/editor/core/customTool.js.map +1 -1
  16. package/dist/editor/core/customToolEngine.d.ts +9 -1
  17. package/dist/editor/core/customToolEngine.d.ts.map +1 -1
  18. package/dist/editor/core/customToolEngine.js +12 -0
  19. package/dist/editor/core/customToolEngine.js.map +1 -1
  20. package/dist/editor/core/extensions.d.ts.map +1 -1
  21. package/dist/editor/core/extensions.js +1 -1
  22. package/dist/editor/core/extensions.js.map +1 -1
  23. package/dist/editor/core/handle.d.ts +18 -1
  24. package/dist/editor/core/handle.d.ts.map +1 -1
  25. package/dist/editor/core/handle.js +2 -1
  26. package/dist/editor/core/handle.js.map +1 -1
  27. package/dist/editor/core/handleWatchers.d.ts +30 -0
  28. package/dist/editor/core/handleWatchers.d.ts.map +1 -1
  29. package/dist/editor/core/handleWatchers.js +15 -0
  30. package/dist/editor/core/handleWatchers.js.map +1 -1
  31. package/dist/editor/core/nodeNames.d.ts +7 -0
  32. package/dist/editor/core/nodeNames.d.ts.map +1 -0
  33. package/dist/editor/core/nodeNames.js +2 -0
  34. package/dist/editor/core/nodeNames.js.map +1 -0
  35. package/dist/editor/core/schema.d.ts.map +1 -1
  36. package/dist/editor/core/schema.js +4 -2
  37. package/dist/editor/core/schema.js.map +1 -1
  38. package/dist/editor/core/toolCommands.d.ts +78 -0
  39. package/dist/editor/core/toolCommands.d.ts.map +1 -0
  40. package/dist/editor/core/toolCommands.js +2 -0
  41. package/dist/editor/core/toolCommands.js.map +1 -0
  42. package/dist/editor/core/toolDefinition.d.ts +139 -0
  43. package/dist/editor/core/toolDefinition.d.ts.map +1 -0
  44. package/dist/editor/core/toolDefinition.js +28 -0
  45. package/dist/editor/core/toolDefinition.js.map +1 -0
  46. package/dist/editor/core/toolDescriptor.d.ts +71 -2
  47. package/dist/editor/core/toolDescriptor.d.ts.map +1 -1
  48. package/dist/editor/core/toolDescriptor.js +6 -2
  49. package/dist/editor/core/toolDescriptor.js.map +1 -1
  50. package/dist/editor/core/toolOptions.d.ts +157 -0
  51. package/dist/editor/core/toolOptions.d.ts.map +1 -0
  52. package/dist/editor/core/toolOptions.js +21 -0
  53. package/dist/editor/core/toolOptions.js.map +1 -0
  54. package/dist/editor/core/toolState.d.ts +46 -0
  55. package/dist/editor/core/toolState.d.ts.map +1 -0
  56. package/dist/editor/core/toolState.js +2 -0
  57. package/dist/editor/core/toolState.js.map +1 -0
  58. package/dist/editor/core/tools.d.ts +3 -1
  59. package/dist/editor/core/tools.d.ts.map +1 -1
  60. package/dist/editor/core/tools.js.map +1 -1
  61. package/dist/editor/core/viewIsland.d.ts.map +1 -1
  62. package/dist/editor/core/viewIsland.js +2 -1
  63. package/dist/editor/core/viewIsland.js.map +1 -1
  64. package/dist/editor/features/builtins.d.ts +9 -4
  65. package/dist/editor/features/builtins.d.ts.map +1 -1
  66. package/dist/editor/features/builtins.js +36 -7
  67. package/dist/editor/features/builtins.js.map +1 -1
  68. package/dist/editor/features/search/SearchPanel.d.ts.map +1 -1
  69. package/dist/editor/features/search/SearchPanel.js +26 -12
  70. package/dist/editor/features/search/SearchPanel.js.map +1 -1
  71. package/dist/editor/features/search/revealMatch.d.ts +16 -0
  72. package/dist/editor/features/search/revealMatch.d.ts.map +1 -1
  73. package/dist/editor/features/search/revealMatch.js +22 -0
  74. package/dist/editor/features/search/revealMatch.js.map +1 -1
  75. package/dist/editor/features/search/searchPlugin.d.ts +8 -3
  76. package/dist/editor/features/search/searchPlugin.d.ts.map +1 -1
  77. package/dist/editor/features/search/searchPlugin.js +17 -6
  78. package/dist/editor/features/search/searchPlugin.js.map +1 -1
  79. package/dist/editor/features/search/searchSnapshot.d.ts +14 -0
  80. package/dist/editor/features/search/searchSnapshot.d.ts.map +1 -0
  81. package/dist/editor/features/search/searchSnapshot.js +17 -0
  82. package/dist/editor/features/search/searchSnapshot.js.map +1 -0
  83. package/dist/editor/features/search/searchTool.d.ts +3 -0
  84. package/dist/editor/features/search/searchTool.d.ts.map +1 -1
  85. package/dist/editor/features/search/searchTool.js +30 -1
  86. package/dist/editor/features/search/searchTool.js.map +1 -1
  87. package/dist/editor/features/toc/RichTextToc.d.ts +29 -1
  88. package/dist/editor/features/toc/RichTextToc.d.ts.map +1 -1
  89. package/dist/editor/features/toc/RichTextToc.js +64 -12
  90. package/dist/editor/features/toc/RichTextToc.js.map +1 -1
  91. package/dist/editor/features/toc/documentHeadings.d.ts +30 -0
  92. package/dist/editor/features/toc/documentHeadings.d.ts.map +1 -0
  93. package/dist/editor/features/toc/documentHeadings.js +20 -0
  94. package/dist/editor/features/toc/documentHeadings.js.map +1 -0
  95. package/dist/editor/features/toc/headings.d.ts +6 -2
  96. package/dist/editor/features/toc/headings.d.ts.map +1 -1
  97. package/dist/editor/features/toc/headings.js +4 -2
  98. package/dist/editor/features/toc/headings.js.map +1 -1
  99. package/dist/editor/features/toc/tocSnapshot.d.ts +10 -0
  100. package/dist/editor/features/toc/tocSnapshot.d.ts.map +1 -0
  101. package/dist/editor/features/toc/tocSnapshot.js +8 -0
  102. package/dist/editor/features/toc/tocSnapshot.js.map +1 -0
  103. package/dist/editor/features/toc/tocTool.d.ts +6 -0
  104. package/dist/editor/features/toc/tocTool.d.ts.map +1 -0
  105. package/dist/editor/features/toc/tocTool.js +21 -0
  106. package/dist/editor/features/toc/tocTool.js.map +1 -0
  107. package/dist/editor/hooks/useRichTextToolState.d.ts +43 -0
  108. package/dist/editor/hooks/useRichTextToolState.d.ts.map +1 -0
  109. package/dist/editor/hooks/useRichTextToolState.js +77 -0
  110. package/dist/editor/hooks/useRichTextToolState.js.map +1 -0
  111. package/dist/editor/index.d.ts +8 -0
  112. package/dist/editor/index.d.ts.map +1 -1
  113. package/dist/editor/index.js +3 -0
  114. package/dist/editor/index.js.map +1 -1
  115. package/docs/api/editor-extension.en.md +223 -23
  116. package/docs/api/editor-extension.md +224 -22
  117. package/docs/api/migration-notes.en.md +36 -1
  118. package/docs/api/migration-notes.md +35 -0
  119. package/docs/components/content/rich-text-toc.en.md +13 -11
  120. package/docs/components/content/rich-text-toc.md +12 -10
  121. package/docs/components/index.en.md +2 -2
  122. package/docs/components/index.md +1 -1
  123. package/docs/components/inputs/rich-text-editor.en.md +227 -11
  124. package/docs/components/inputs/rich-text-editor.md +228 -10
  125. package/docs/getting-started.en.md +7 -7
  126. package/docs/getting-started.md +6 -6
  127. package/docs/glossary.en.md +52 -48
  128. package/docs/glossary.md +51 -47
  129. package/package.json +1 -1
  130. package/src/editor/RichTextEditor.tsx +94 -39
  131. package/src/editor/RichTextView.tsx +2 -1
  132. package/src/editor/core/containers.ts +8 -6
  133. package/src/editor/core/customTool.ts +8 -2
  134. package/src/editor/core/customToolEngine.ts +20 -1
  135. package/src/editor/core/extensions.ts +2 -1
  136. package/src/editor/core/handle.ts +25 -1
  137. package/src/editor/core/handleWatchers.ts +45 -0
  138. package/src/editor/core/nodeNames.ts +7 -0
  139. package/src/editor/core/schema.ts +5 -2
  140. package/src/editor/core/toolCommands.ts +85 -0
  141. package/src/editor/core/toolDefinition.ts +208 -0
  142. package/src/editor/core/toolDescriptor.ts +94 -3
  143. package/src/editor/core/toolOptions.ts +211 -0
  144. package/src/editor/core/toolState.ts +56 -0
  145. package/src/editor/core/tools.ts +3 -1
  146. package/src/editor/core/viewIsland.ts +5 -4
  147. package/src/editor/features/builtins.ts +72 -13
  148. package/src/editor/features/search/SearchPanel.tsx +38 -14
  149. package/src/editor/features/search/revealMatch.ts +45 -0
  150. package/src/editor/features/search/searchPlugin.ts +40 -11
  151. package/src/editor/features/search/searchSnapshot.ts +29 -0
  152. package/src/editor/features/search/searchTool.ts +51 -1
  153. package/src/editor/features/toc/RichTextToc.tsx +122 -13
  154. package/src/editor/features/toc/documentHeadings.ts +59 -0
  155. package/src/editor/features/toc/headings.ts +10 -3
  156. package/src/editor/features/toc/tocSnapshot.ts +24 -0
  157. package/src/editor/features/toc/tocTool.ts +41 -0
  158. package/src/editor/hooks/useRichTextToolState.ts +153 -0
  159. package/src/editor/index.ts +19 -0
@@ -1,5 +1,5 @@
1
1
  ---
2
- sourceHash: 88701a1373b4
2
+ sourceHash: 5cc549fe1c76
3
3
  ---
4
4
 
5
5
  # Glossary of `@olddevs/ui`
@@ -136,50 +136,54 @@ Terms of `RichTextEditor` and `RichTextView` (the `@olddevs/ui/editor` entry poi
136
136
  especially easy to borrow a word from a neighboring editor (plugin, service, node) — and that
137
137
  introduces a second meaning.
138
138
 
139
- | Term | Meaning | Not to be confused with |
140
- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
141
- | **Editor** | `RichTextEditor` — a rich text input field | A code editor: the kit has none, code is displayed with `CodeView` |
142
- | **View** | `RichTextView` — read-only display of a saved Document | The Editor's `readOnly` mode: that one carries the engine, the View does not |
143
- | **Table of contents** | `RichTextToc`: the list of a Document's headings next to the View or the Editor. Collapsed, it is a strip of strokes; expanded, a list; a click on an item goes to the heading | The kit's `Heading` and the navigation of the documentation site |
144
- | **Document** | The Editor's value: an HTML string constrained by the Schema | The ProseMirror JSON tree in the engine — it is internal; it comes out only as a JSON envelope |
145
- | **JSON envelope** | A Document as JSON for a file and a template: `{ format: "olddevs-rich-text", version, doc }` (`getJSON()`, `setJSON()`, `defaultValue`), lossless and through the Schema | The Editor's value — the value stays HTML; the bare tree `editor.getJSON()` without an envelope |
146
- | **Schema** | An allowlist of Blocks, Marks and attributes that the Editor accepts and returns | Server-side sanitization — the consumer does it (`sanitizeRichText`) |
147
- | **Block** | A structural element of a Document: paragraph, heading, list, table, image… | A Mark |
148
- | **Mark** | Inline formatting inside a Block: bold, link, color… | A Block |
149
- | **Atom** | A Block or inline element that is selected, moved and deleted as a whole: an image (the caption inside it is editable), a divider, a soft break, a mention. Always makes the field non-empty | An empty Block: a paragraph without text is not an Atom and does not count as content |
150
- | **Atom text** | The string that represents an Atom in the Document's text: `getText` and `getSelectedText` return it, its length is the Atom's weight in `maxLength`, and it is how the Atom is exported to Markdown without rules of its own. For an image it is the caption text, for a divider an empty string | A Block attribute |
151
- | **Layout** | A Block of columns (the `layout` Tool): six variants — from one to four equal columns, 60/40 and 40/60. Top level only, does not nest into itself; a column for its Blocks is the same as a Document | A table: it has data rows and cells, while the columns of a Layout are the Document's page structure. The kit's `Grid`: a screen grid, not a Block |
152
- | **Wrapper** | A Block that gathers a group of Blocks (the `wrapper` Tool, a `div` with `data-block="wrapper"`): they are moved, duplicated and deleted as one Block. Without a Wrapper tone it has no look of its own — the dashed outline exists only in the Editor. Neither a Wrapper nor a Layout nests into a Wrapper | A quote: it has its own look and meaning in the Document, while a Wrapper without a tone is only grouping |
153
- | **Wrapper tone** | The styling of a Wrapper as a note (`data-tone`): a background and a stripe on the left in one of five tones of the `Tone` vocabulary — "Note", "Tip", "Important", "Warning", "Caution". Chosen in the "Tone ›" item of the Block handle, the same in the Editor and the View, exported to Markdown as a GitHub alert (what GitHub and Notion call a callout) | The tone of a Field notice (`status` or `error`). Meaning: the tone carries no roles or `aria-*`; the meaning of a note is written as a word in the text |
154
- | **Toolbar** | A set of formatting buttons; its look is set by `toolbar`. **Fixed** (`fixed`, the default) — above the field, sticks on scroll; **floating** (`floating`) — the same buttons above a non-empty selection. With `bubble` there is no Toolbar — the Selection menu takes its place, with `none` there is neither. On a touch screen the Toolbar is always fixed | The kit's `Toolbar` — the primitive that the Toolbar is built from |
155
- | **Insert menu** | The "Insert" and "Turn into" list: opens on `/` in the text and on the "+" button | The browser context menu |
156
- | **Selection menu** | A compact pill on an inverse surface above a non-empty selection: "¶", lists, bold, italic, underline, color, "…", link, emoji; its contents are fixed by the kit. Appears in place of the Toolbar with `toolbar="bubble"` and on top of the fixed Toolbar — there `selectionMenu={false}` turns it off. Absent on a touch screen | The floating Toolbar: it has the full set of buttons |
157
- | **Block handle** | The "⋮" on the Block that holds the caret, and its menu of actions on the whole Block: "Add ›", "Format ›", "Move up", "Move down", "Duplicate", "Delete" | The Toolbar: it works with the selection, not with a Block |
158
- | **Insert item** | A row of the Insert menu: inserts a Block or turns the current one into another. One item is visible on `/`, on "+" and in the Block handle | A Toolbar button |
159
- | **Block action** | An item of the Block handle menu that works with the whole Block, for example "Duplicate" | A button: it works with the selection |
160
- | **Shortcuts reference** | A read-only "command — shortcut" popover behind the last button of the fixed Toolbar. The rows are the commands of the enabled Tools, including custom ones; on a phone there is no button | The kit's `CommandPalette`: the rows of the Shortcuts reference are not clickable. The kit's `ShortcutsHelp`: it lists screen shortcuts, not Editor ones |
161
- | **HTML mode** | The mode of the `source` Tool: the "HTML" button on the fixed Toolbar replaces the Document with a field holding its HTML. The field text passes through the Schema and becomes the Document in a single edit — on leaving the mode, on `blur`, on form submit and on reading through the Handle | The HTML convention: that is the form of custom content in a Document, not a mode. `CodeView`: it displays code, while the HTML field is editable |
162
- | **Glass** | A semi-transparent background that blurs what is behind it on everything the Editor shows above the Document: the floating Toolbar, the Selection menu, menus, popovers, the Text card. The color is the token of its own surface; with `prefers-reduced-transparency`, `prefers-contrast: more` and on iOS the background is solid | The kit's `Menu` and `Popover` outside the Editor: they stay solid |
163
- | **UI contribution** | A UI element of a custom Tool, described as data: a button, an Insert item, a Block action or a Text card. The kit renders it in a Slot; a disabled Tool removes its UI contributions as well | A React node in the interface: arbitrary React is allowed only inside the content of a button popover and a Text card |
164
- | **Slot** | One place on a surface where the UI contributions of custom Tools appear, in `tools` order: the Toolbar group before "Undo", the end of an Insert menu section, the Block handle section before "Delete" | A position relative to a built-in button: the ids of built-ins are not public API |
165
- | **Preset** | A ready-made set of built-in Tools: `full` or `basic` (`RICH_TEXT_PRESETS`). Not a frozen list: a new built-in arrives in it in a minor version | An exact `tools` list: only the screen changes its composition |
166
- | **Tool** | One capability of the Editor: its Blocks and Marks, their rules in the Schema and their place in the UI, for example `table`. A built-in one is set by name, a custom one by a description | A button: disabling a Tool also removes its Block from the Schema. A Redactor plugin: that is a class of behavior over the DOM without a Schema |
167
- | **custom Tool** | A Tool that the consumer describes (`CustomTool`): Schema rules as data, an Engine part and UI contributions. Passed in `tools` mixed in with the kit's names | The kit's internal description: that is a superset of the public shape for built-ins and is not exported |
168
- | **Consumer prefix** | The start of the name of everything custom — a Tool, its Blocks, Marks and attributes — up to the underscore: `acme_mergeTag`, `data-acme_size`. Kit names have no underscore, so custom names and built-in ones never collide, either in a set or in a Document | A Preset: that is a set of built-in Tools, not a namespace |
169
- | **HTML convention** | The form of custom content in a Document: a Block is a `div` or `span` with `data-block`, a Mark is a `span` with `data-mark`, attributes are `data-<prefix>_<name>`. Frozen: extended only by adding | The kit's Schema tags (`p`, `table`, `img`): a custom Block cannot take them |
170
- | **Block trait** | A Block property that only the kit understands, not the engine: "container" (children get their own handle), "can be turned into", "Atom without a formatting menu" | A Block attribute: that one is stored in the Document |
171
- | **Engine part** | The part of a Tool description needed only by the live Editor: Tiptap extensions and the node view. Supplied immediately or through a Loader | Schema rules: those are data, read by the server and the View without an engine |
172
- | **Loader** | A function with a dynamic import in place of the Engine part: `engine: () => import(…)`. The heavy built-ins outside `basic` load the same way — the code Block and the table | Preloading (`modulepreload`): the kit does not publish it, the consumer sets it up |
173
- | **Handle** | Imperative access from screen code to the Editor through `ref`: insert at the caret, read, focus, history | Redactor services: those are engine internals, not screen API |
174
- | **Readiness** | The moment when the engine is created and the Loaders of all enabled Tools, custom and built-in, have finished: from then on Handle methods take effect instead of doing nothing. Happens once per mount; `onReady` reports it | Hydration: after it the engine may still be waiting for Loaders |
175
- | **Field focus** | Focus inside the Editor as a whole: the Document, the Toolbar, the kit's popovers, the HTML field. Moving between them does not lose Field focus; `onFocus` and `onBlur` are about it | Document focus (the engine's `focus` and `blur`): a click in the Toolbar removes it |
176
- | **Author edit** | A change to the Document equal to typing on a keyboard: a history step, `onChange` after a delay, the character limit applies. This also covers insert, undo and redo from the Handle | An External replacement |
177
- | **External replacement** | Replacing the whole Document (`value`, `clear()`, `setMarkdown()`, `setJSON()`): the character limit does not truncate it; `onChange` fires immediately for `clear()`, `setMarkdown()` and `setJSON()`, but not for a new `value` | An Author edit |
178
- | **Skeleton** | The Editor's look before Readiness: the field frame, a placeholder for the Toolbar and a Document: sanitized by the Schema, it is rendered as static HTML with the same class and rhythm as the engine's Document, without input. On the server — the frame without a Document. A Loader failure turns the Skeleton into a field error with "Retry" | The View: that is a separate read-only component, while the Skeleton is a state of the Editor that the engine replaces. The kit's `Skeleton` component: a loading placeholder |
179
- | **Status line** | A line inside the field frame under the Document: on the left the screen's content (`status`: word count, "Saved", co-author), on the right the kit's character counter | A Field notice: the line shows a lasting state of the screen, not an event |
180
- | **Field notice** | One event tied to the field (`showNotice`): tone `status` (only announced) or `error` (a visible line under the field until the next Author edit). A new one replaces the previous one | The kit's toast: that one is global and not tied to a field |
181
- | **Text card** | A non-modal card under a range of the Document, declared by a custom Tool (`textCards`): a comment, a hint from checking the text. Opens when the caret enters it or on click, focus stays in the text | A button popover: a button opens that one, while a Text card is opened by a place in the Document |
182
- | **Trigger character** | A character of a custom Tool (`trigger`) that opens a list of items at the caret when typed at the start of a Block or after a space, like `/`: `@` for mentions, `#` for tags. Picking an item replaces the typed `@query` with a custom node | The Insert menu on `/`: that one is built in, while a custom character is set by a Tool |
183
- | **Paper** | A light area of the Document in any app theme (`surface="paper"`) — for text that leaves the app on a light background: an email, print, PDF. The Toolbar, menus and field frame stay in the app theme; the View with the same `surface` shows the same Paper | The `light` theme: it changes the whole app, the Paper only the Document |
184
- | **Island** | A client-side piece of the View that, after mounting, brings a Block in already rendered HTML to life: the "Copy" button on a code Block, the `island` of a custom Block | A node view: it lives only in the Editor engine |
185
- | **Mount point** | A place in already rendered HTML where an Island mounts a live element: the code Block header that receives the "Copy" button | A Slot: that is a place in the Editor UI for the UI contributions of Tools |
139
+ | Term | Meaning | Not to be confused with |
140
+ | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
141
+ | **Editor** | `RichTextEditor` — a rich text input field | A code editor: the kit has none, code is displayed with `CodeView` |
142
+ | **View** | `RichTextView` — read-only display of a saved Document | The Editor's `readOnly` mode: that one carries the engine, the View does not |
143
+ | **Table of contents** | `RichTextToc`: the list of a Document's headings next to the View or the Editor. Collapsed, it is a strip of strokes; expanded, a list; a click on an item goes to the heading | The kit's `Heading` and the navigation of the documentation site |
144
+ | **Document** | The Editor's value: an HTML string constrained by the Schema | The ProseMirror JSON tree in the engine — it is internal; it comes out only as a JSON envelope |
145
+ | **JSON envelope** | A Document as JSON for a file and a template: `{ format: "olddevs-rich-text", version, doc }` (`getJSON()`, `setJSON()`, `defaultValue`), lossless and through the Schema | The Editor's value — the value stays HTML; the bare tree `editor.getJSON()` without an envelope |
146
+ | **Schema** | An allowlist of Blocks, Marks and attributes that the Editor accepts and returns | Server-side sanitization — the consumer does it (`sanitizeRichText`) |
147
+ | **Block** | A structural element of a Document: paragraph, heading, list, table, image… | A Mark |
148
+ | **Mark** | Inline formatting inside a Block: bold, link, color… | A Block |
149
+ | **Atom** | A Block or inline element that is selected, moved and deleted as a whole: an image (the caption inside it is editable), a divider, a soft break, a mention. Always makes the field non-empty | An empty Block: a paragraph without text is not an Atom and does not count as content |
150
+ | **Atom text** | The string that represents an Atom in the Document's text: `getText` and `getSelectedText` return it, its length is the Atom's weight in `maxLength`, and it is how the Atom is exported to Markdown without rules of its own. For an image it is the caption text, for a divider an empty string | A Block attribute |
151
+ | **Layout** | A Block of columns (the `layout` Tool): six variants — from one to four equal columns, 60/40 and 40/60. Top level only, does not nest into itself; a column for its Blocks is the same as a Document | A table: it has data rows and cells, while the columns of a Layout are the Document's page structure. The kit's `Grid`: a screen grid, not a Block |
152
+ | **Wrapper** | A Block that gathers a group of Blocks (the `wrapper` Tool, a `div` with `data-block="wrapper"`): they are moved, duplicated and deleted as one Block. Without a Wrapper tone it has no look of its own — the dashed outline exists only in the Editor. Neither a Wrapper nor a Layout nests into a Wrapper | A quote: it has its own look and meaning in the Document, while a Wrapper without a tone is only grouping |
153
+ | **Wrapper tone** | The styling of a Wrapper as a note (`data-tone`): a background and a stripe on the left in one of five tones of the `Tone` vocabulary — "Note", "Tip", "Important", "Warning", "Caution". Chosen in the "Tone ›" item of the Block handle, the same in the Editor and the View, exported to Markdown as a GitHub alert (what GitHub and Notion call a callout) | The tone of a Field notice (`status` or `error`). Meaning: the tone carries no roles or `aria-*`; the meaning of a note is written as a word in the text |
154
+ | **Toolbar** | A set of formatting buttons; its look is set by `toolbar`. **Fixed** (`fixed`, the default) — above the field, sticks on scroll; **floating** (`floating`) — the same buttons above a non-empty selection. With `bubble` there is no Toolbar — the Selection menu takes its place, with `none` there is neither. On a touch screen the Toolbar is always fixed | The kit's `Toolbar` — the primitive that the Toolbar is built from |
155
+ | **Insert menu** | The "Insert" and "Turn into" list: opens on `/` in the text and on the "+" button | The browser context menu |
156
+ | **Selection menu** | A compact pill on an inverse surface above a non-empty selection: "¶", lists, bold, italic, underline, color, "…", link, emoji; its contents are fixed by the kit. Appears in place of the Toolbar with `toolbar="bubble"` and on top of the fixed Toolbar — there `selectionMenu={false}` turns it off. Absent on a touch screen | The floating Toolbar: it has the full set of buttons |
157
+ | **Block handle** | The "⋮" on the Block that holds the caret, and its menu of actions on the whole Block: "Add ›", "Format ›", "Move up", "Move down", "Duplicate", "Delete" | The Toolbar: it works with the selection, not with a Block |
158
+ | **Insert item** | A row of the Insert menu: inserts a Block or turns the current one into another. One item is visible on `/`, on "+" and in the Block handle | A Toolbar button |
159
+ | **Block action** | An item of the Block handle menu that works with the whole Block, for example "Duplicate" | A button: it works with the selection |
160
+ | **Shortcuts reference** | A read-only "command — shortcut" popover behind the last button of the fixed Toolbar. The rows are the commands of the enabled Tools, including custom ones; on a phone there is no button | The kit's `CommandPalette`: the rows of the Shortcuts reference are not clickable. The kit's `ShortcutsHelp`: it lists screen shortcuts, not Editor ones |
161
+ | **HTML mode** | The mode of the `source` Tool: the "HTML" button on the fixed Toolbar replaces the Document with a field holding its HTML. The field text passes through the Schema and becomes the Document in a single edit — on leaving the mode, on `blur`, on form submit and on reading through the Handle | The HTML convention: that is the form of custom content in a Document, not a mode. `CodeView`: it displays code, while the HTML field is editable |
162
+ | **Glass** | A semi-transparent background that blurs what is behind it on everything the Editor shows above the Document: the floating Toolbar, the Selection menu, menus, popovers, the Text card. The color is the token of its own surface; with `prefers-reduced-transparency`, `prefers-contrast: more` and on iOS the background is solid | The kit's `Menu` and `Popover` outside the Editor: they stay solid |
163
+ | **UI contribution** | A UI element of a custom Tool, described as data: a button, an Insert item, a Block action or a Text card. The kit renders it in a Slot; a disabled Tool removes its UI contributions as well | A React node in the interface: arbitrary React is allowed only inside the content of a button popover and a Text card |
164
+ | **Slot** | One place on a surface where the UI contributions of custom Tools appear, in `tools` order: the Toolbar group before "Undo", the end of an Insert menu section, the Block handle section before "Delete" | A position relative to a built-in button: the ids of built-ins are not public API |
165
+ | **Preset** | A ready-made set of built-in Tools: `full` or `basic` (`RICH_TEXT_PRESETS`). Not a frozen list: a new built-in arrives in it in a minor version | An exact `tools` list: only the screen changes its composition |
166
+ | **Tool** | One capability of the Editor: its Blocks and Marks, their rules in the Schema and their place in the UI, for example `table`. A built-in one is set by name, a custom one by a description | A button: disabling a Tool also removes its Block from the Schema. A Redactor plugin: that is a class of behavior over the DOM without a Schema |
167
+ | **custom Tool** | A Tool that the consumer describes (`CustomTool`): Schema rules as data, an Engine part and UI contributions. Passed in `tools` mixed in with the kit's names | The kit's internal description: that is a superset of the public shape for built-ins and is not exported |
168
+ | **Tool options** | What the screen sets on a Tool before the engine is created: the starting flags of Find, `offsetVar`, `levels` and `listWidth` of the Table of contents, the `defaults` of a custom Tool (`defineTool`). The screen sets them with a `tool(…)` entry and the kit reads them once, when the engine is created | `options` of a Tiptap extension: the extension's author sets those and the Engine part reads them, while Tool options are set by the screen and read by the kit. The Editor's props (`preset`, `maxHeight`): those configure the field, not a Tool |
169
+ | **Configured Tool** | An entry of `tools` returned by `tool(name, options)` or `tool(definition, options)`: a Tool together with its options. It switches a Tool on without the name in `tools` and wins over a bare name from a Preset | A `defineTool` definition: that describes a Tool, while a Configured Tool is its activation with options. The description of a built-in Tool: it is not exported, and the entry only names the Tool and carries the options |
170
+ | **Tool state** | A data snapshot the screen reads with the `useRichTextToolState(ref, name)` hook: for Find, whether the panel is open, the query, the number of matches and the current one; for the Table of contents, the headings and the current section. The screen re-renders only when the snapshot changes | `storage` of a Tiptap extension: that is a mutable store inside the engine, while Tool state is read-only. `useRichTextEditorState`: that takes a slice of the live Tiptap `editor`, not a Tool's contract |
171
+ | **Tool commands** | What the screen calls on a Tool through `handle.tool(name)`: `tool("search")?.open()`, `tool("toc")?.jumpTo(2)`. Each returns a `boolean`; `null` instead of the commands object means the Tool is not in the set, has no commands, or the engine has not been created yet | Handle methods (`insertHTML`, `focus`): those are common to any `tools`, while Tool commands exist only while the Tool is enabled. `editor.commands` and `commands` in Tiptap: those are engine commands and follow its major |
172
+ | **Consumer prefix** | The start of the name of everything custom — a Tool, its Blocks, Marks and attributes — up to the underscore: `acme_mergeTag`, `data-acme_size`. Kit names have no underscore, so custom names and built-in ones never collide, either in a set or in a Document | A Preset: that is a set of built-in Tools, not a namespace |
173
+ | **HTML convention** | The form of custom content in a Document: a Block is a `div` or `span` with `data-block`, a Mark is a `span` with `data-mark`, attributes are `data-<prefix>_<name>`. Frozen: extended only by adding | The kit's Schema tags (`p`, `table`, `img`): a custom Block cannot take them |
174
+ | **Block trait** | A Block property that only the kit understands, not the engine: "container" (children get their own handle), "can be turned into", "Atom without a formatting menu" | A Block attribute: that one is stored in the Document |
175
+ | **Engine part** | The part of a Tool description needed only by the live Editor: Tiptap extensions and the node view. Supplied immediately or through a Loader | Schema rules: those are data, read by the server and the View without an engine |
176
+ | **Loader** | A function with a dynamic import in place of the Engine part: `engine: () => import(…)`. The heavy built-ins outside `basic` load the same way — the code Block and the table | Preloading (`modulepreload`): the kit does not publish it, the consumer sets it up |
177
+ | **Handle** | Imperative access from screen code to the Editor through `ref`: insert at the caret, read, focus, history, the commands of Tools (`tool(name)`) | Redactor services: those are engine internals, not screen API |
178
+ | **Readiness** | The moment when the engine is created and the Loaders of all enabled Tools, custom and built-in, have finished: from then on Handle methods take effect instead of doing nothing. Happens once per mount; `onReady` reports it | Hydration: after it the engine may still be waiting for Loaders |
179
+ | **Field focus** | Focus inside the Editor as a whole: the Document, the Toolbar, the kit's popovers, the HTML field. Moving between them does not lose Field focus; `onFocus` and `onBlur` are about it | Document focus (the engine's `focus` and `blur`): a click in the Toolbar removes it |
180
+ | **Author edit** | A change to the Document equal to typing on a keyboard: a history step, `onChange` after a delay, the character limit applies. This also covers insert, undo and redo from the Handle | An External replacement |
181
+ | **External replacement** | Replacing the whole Document (`value`, `clear()`, `setMarkdown()`, `setJSON()`): the character limit does not truncate it; `onChange` fires immediately for `clear()`, `setMarkdown()` and `setJSON()`, but not for a new `value` | An Author edit |
182
+ | **Skeleton** | The Editor's look before Readiness: the field frame, a placeholder for the Toolbar and a Document: sanitized by the Schema, it is rendered as static HTML with the same class and rhythm as the engine's Document, without input. On the server — the frame without a Document. A Loader failure turns the Skeleton into a field error with "Retry" | The View: that is a separate read-only component, while the Skeleton is a state of the Editor that the engine replaces. The kit's `Skeleton` component: a loading placeholder |
183
+ | **Status line** | A line inside the field frame under the Document: on the left the screen's content (`status`: word count, "Saved", co-author), on the right the kit's character counter | A Field notice: the line shows a lasting state of the screen, not an event |
184
+ | **Field notice** | One event tied to the field (`showNotice`): tone `status` (only announced) or `error` (a visible line under the field until the next Author edit). A new one replaces the previous one | The kit's toast: that one is global and not tied to a field |
185
+ | **Text card** | A non-modal card under a range of the Document, declared by a custom Tool (`textCards`): a comment, a hint from checking the text. Opens when the caret enters it or on click, focus stays in the text | A button popover: a button opens that one, while a Text card is opened by a place in the Document |
186
+ | **Trigger character** | A character of a custom Tool (`trigger`) that opens a list of items at the caret when typed at the start of a Block or after a space, like `/`: `@` for mentions, `#` for tags. Picking an item replaces the typed `@query` with a custom node | The Insert menu on `/`: that one is built in, while a custom character is set by a Tool |
187
+ | **Paper** | A light area of the Document in any app theme (`surface="paper"`) — for text that leaves the app on a light background: an email, print, PDF. The Toolbar, menus and field frame stay in the app theme; the View with the same `surface` shows the same Paper | The `light` theme: it changes the whole app, the Paper only the Document |
188
+ | **Island** | A client-side piece of the View that, after mounting, brings a Block in already rendered HTML to life: the "Copy" button on a code Block, the `island` of a custom Block | A node view: it lives only in the Editor engine |
189
+ | **Mount point** | A place in already rendered HTML where an Island mounts a live element: the code Block header that receives the "Copy" button | A Slot: that is a place in the Editor UI for the UI contributions of Tools |
package/docs/glossary.md CHANGED
@@ -131,50 +131,54 @@
131
131
  Термины `RichTextEditor` и `RichTextView` (вход `@olddevs/ui/editor`). Здесь особенно легко
132
132
  взять слово из соседнего редактора (плагин, сервис, нода) — оно заводит второй смысл.
133
133
 
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
- | **Панель** | Набор кнопок форматирования; вид задаёт `toolbar`. **Фиксированная** (`fixed`, по умолчанию) — над полем, липнет при прокрутке; **плавающая** (`floating`) — те же кнопки над непустым выделением. При `bubble` Панели нет — её место занимает Меню выделения, при `none` нет ни того, ни другого. На сенсорном экране Панель всегда фиксированная | `Toolbar` кита — Примитивом, из которого Панель собрана |
150
- | **Меню вставки** | Список «Добавить» и «Превратить в»: открывается по `/` в тексте и по кнопке «+» | Контекстным меню браузера |
151
- | **Меню выделения** | Компактная плашка на инверсной поверхности над непустым выделением: «¶», списки, жирный, курсив, подчёркнутый, цвет, «…», ссылка, эмодзи; состав задан китом. Стоит вместо Панели при `toolbar="bubble"` и поверх фиксированной Панели — там её выключает `selectionMenu={false}`. На сенсорном экране её нет | Плавающей Панелью: у той полный набор кнопок |
152
- | **Ручка Блока** | «⋮» у Блока с кареткой и её меню действий над Блоком целиком: «Добавить ›», «Формат ›», «Вверх», «Вниз», «Дублировать», «Удалить» | Панелью: та работает с выделением, а не с Блоком |
153
- | **Пункт вставки** | Строка Меню вставки: вставляет Блок или превращает текущий. Один пункт виден и по `/`, и по «+», и в Ручке Блока | Кнопкой Панели |
154
- | **Действие над Блоком** | Пункт меню Ручки Блока, который работает с Блоком целиком, например «Дублировать» | Кнопкой: та работает с выделением |
155
- | **Справочник сочетаний** | Поповер «команда — сочетание» только для чтения за последней кнопкой фиксированной Панели. Строки — команды включённых Инструментов, своих тоже; на телефоне кнопки нет | `CommandPalette` кита: строки Справочника сочетаний не нажимаются. `ShortcutsHelp` кита: тот — сочетания экрана, а не Редактора |
156
- | **HTML-режим** | Режим Инструмента `source`: кнопка «HTML» на фиксированной Панели заменяет Документ полем с его HTML. Текст поля проходит Схему и становится Документом одной правкой — при выходе из режима, `blur`, отправке формы и чтении через Хэндл | HTML-соглашением: то — форма своего в Документе, а не режим. `CodeView`: тот показывает код, а поле HTML правится |
157
- | **Стекло** | Полупрозрачная заливка с размытием фона у всего, что Редактор показывает поверх Документа: плавающая Панель, Меню выделения, меню, поповеры, Карточка у текста. Цвет — токен своей поверхности; при `prefers-reduced-transparency`, `prefers-contrast: more` и на iOS заливка сплошная | `Menu` и `Popover` кита вне Редактора: те остаются сплошными |
158
- | **UI-запись** | Элемент интерфейса своего Инструмента, описанный данными: кнопка, Пункт вставки, Действие над Блоком или Карточка у текста. Рисует её кит в Отведённом месте; выключенный Инструмент убирает и свои записи | React-узлом в интерфейсе: произвольный React допускается только в содержимом поповера кнопки и Карточки у текста |
159
- | **Отведённое место** | Одно место на поверхности, где стоят записи своих Инструментов, в порядке `tools`: группа Панели перед «Отменить», конец раздела Меню вставки, секция Ручки Блока перед «Удалить» | Позицией относительно встроенной кнопки: id встроенных публичным API не являются |
160
- | **Пресет** | Готовый набор встроенных Инструментов: `full` или `basic` (`RICH_TEXT_PRESETS`). Не замороженный список: новый встроенный приходит в него minor-версией | Точным списком `tools`: его состав меняет только экран |
161
- | **Инструмент** | Одна возможность Редактора: её Блоки и Метки, их правила в Схеме и место в интерфейсе, например `table`. Встроенный задаётся именем, свой — описанием | Кнопкой: выключенный Инструмент убирает и Блок из Схемы. Плагином Redactor: тот — класс поведения над DOM без Схемы |
162
- | **Свой Инструмент** | Инструмент, который описывает потребитель (`CustomTool`): правила Схемы данными, Часть для движка и UI-записи. Передаётся в `tools` вперемешку с именами кита | Внутренним описанием кита: то — надмножество публичной формы для встроенных, наружу не экспортируется |
163
- | **Префикс потребителя** | Начало имени всего своего — Инструмента, его Блоков, Меток и атрибутов — до подчёркивания: `acme_mergeTag`, `data-acme_size`. В именах кита подчёркивания нет, поэтому своё и встроенное не совпадают ни в наборе, ни в Документе | Пресетом: тот — набор встроенных Инструментов, а не пространство имён |
164
- | **HTML-соглашение** | Форма своего в Документе: Блок — `div` или `span` с `data-block`, Метка — `span` с `data-mark`, атрибуты — `data-<префикс>_<имя>`. Заморожено: расширяется только добавлением | Тегами Схемы кита (`p`, `table`, `img`): свой Блок их занять не может |
165
- | **Признак Блока** | Свойство Блока, которое понимает только кит, а не движок: «контейнер» (детям своя Ручка), «можно превратить в», «Атом без меню форматирования» | Атрибутом Блока: тот хранится в Документе |
166
- | **Часть для движка** | То в описании Инструмента, что нужно только живому Редактору: расширения Tiptap и вид узла. Подаётся сразу или Загрузчиком | Правилами Схемы: те — данные, их читают сервер и Просмотр без движка |
167
- | **Загрузчик** | Функция с динамическим импортом вместо Части для движка: `engine: () => import(…)`. Так же грузятся тяжёлые встроенные вне `basic` — Блок кода и таблица | Предзагрузкой (`modulepreload`): её кит не публикует, ставит потребитель |
168
- | **Хэндл** | Императивный доступ кода экрана к Редактору через `ref`: вставка у каретки, чтение, фокус, история | Сервисами Redactor: те — внутренности движка, а не API экрана |
169
- | **Готовность** | Момент, когда движок создан и Загрузчики всех включённых Инструментов, своих и встроенных, отработали: с него методы Хэндла действуют, а не молчат. Наступает один раз за монтаж, о нём сообщает `onReady` | Гидратацией: после неё движок может ещё ждать Загрузчики |
170
- | **Фокус поля** | Фокус внутри Редактора целиком: Документ, Панель, поповеры кита, поле HTML. Переход между ними Фокус поля не теряет; `onFocus` и `onBlur` — о нём | Фокусом Документа (`focus` и `blur` движка): клик в Панель его снимает |
171
- | **Правка автора** | Изменение Документа, равное набору с клавиатуры: шаг истории, `onChange` после задержки, предел символов действует. Сюда же вставка, отмена и повтор из Хэндла | Заменой снаружи |
172
- | **Замена снаружи** | Подмена Документа целиком (`value`, `clear()`, `setMarkdown()`, `setJSON()`): предел символов не режет; `onChange` сразу у `clear()`, `setMarkdown()` и `setJSON()`, на новый `value` не вызывается | Правкой автора |
173
- | **Скелет** | Вид Редактора до Готовности: рамка поля, место Панели и Документ: очищенный Схемой, он выведен статичным HTML с тем же классом и ритмом, что Документ движка, без ввода. На сервере — рамка без Документа. Сбой Загрузчика превращает Скелет в ошибку поля с «Повторить» | Просмотром: тот — отдельный компонент только для чтения, а Скелет — состояние Редактора, которое сменяется движком. Компонентом `Skeleton` кита — заглушкой загрузки |
174
- | **Строка статуса** | Строка внутри рамки поля под Документом: слева содержимое экрана (`status`: число слов, «Сохранено», соавтор), справа счётчик символов кита | Сообщением поля: строка показывает длительное состояние экрана, а не событие |
175
- | **Сообщение поля** | Одно событие, привязанное к полю (`showNotice`): тон `status` (только озвучивается) или `error` (видимая строка под полем до следующей Правки автора). Новое заменяет прежнее | Тостом кита: тот глобален и к полю не привязан |
176
- | **Карточка у текста** | Немодальная карточка под диапазоном Документа, который объявил свой Инструмент (`textCards`): комментарий, подсказка по результатам проверки текста. Открывается кареткой или щелчком, фокус остаётся в тексте | Поповером кнопки: его открывает кнопка, а Карточку — место Документа |
177
- | **Символ-триггер** | Свой символ Инструмента (`trigger`), набор которого в начале Блока или после пробела открывает список пунктов у каретки, как `/`: `@` для упоминаний, `#` для тегов. Выбор заменяет набранное `@запрос` своим узлом | Меню вставки по `/`: то — встроенное, а свой символ задаёт Инструмент |
178
- | **Лист** | Светлая область Документа в любой теме приложения (`surface="paper"`) — для текста, который уйдёт из приложения светлым: письмо, печать, PDF. Панель, меню и рамка поля остаются в теме приложения; Просмотр с тем же `surface` показывает тот же Лист | Темой `light`: та меняет всё приложение, Лист — только Документ |
179
- | **Остров** | Клиентский кусок Просмотра, который после монтирования оживляет Блок в уже показанном HTML: кнопка «Копировать» у Блока кода, `island` своего Блока | Видом узла: тот живёт только в движке Редактора |
180
- | **Гнездо** | Место в показанном HTML, куда Остров монтирует живой элемент: шапка Блока кода, в которую встаёт кнопка «Копировать» | Отведённым местом: то — место в интерфейсе Редактора для записей Инструментов |
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
+ | **Панель** | Набор кнопок форматирования; вид задаёт `toolbar`. **Фиксированная** (`fixed`, по умолчанию) — над полем, липнет при прокрутке; **плавающая** (`floating`) — те же кнопки над непустым выделением. При `bubble` Панели нет — её место занимает Меню выделения, при `none` нет ни того, ни другого. На сенсорном экране Панель всегда фиксированная | `Toolbar` кита — Примитивом, из которого Панель собрана |
150
+ | **Меню вставки** | Список «Добавить» и «Превратить в»: открывается по `/` в тексте и по кнопке «+» | Контекстным меню браузера |
151
+ | **Меню выделения** | Компактная плашка на инверсной поверхности над непустым выделением: «¶», списки, жирный, курсив, подчёркнутый, цвет, «…», ссылка, эмодзи; состав задан китом. Стоит вместо Панели при `toolbar="bubble"` и поверх фиксированной Панели — там её выключает `selectionMenu={false}`. На сенсорном экране её нет | Плавающей Панелью: у той полный набор кнопок |
152
+ | **Ручка Блока** | «⋮» у Блока с кареткой и её меню действий над Блоком целиком: «Добавить ›», «Формат ›», «Вверх», «Вниз», «Дублировать», «Удалить» | Панелью: та работает с выделением, а не с Блоком |
153
+ | **Пункт вставки** | Строка Меню вставки: вставляет Блок или превращает текущий. Один пункт виден и по `/`, и по «+», и в Ручке Блока | Кнопкой Панели |
154
+ | **Действие над Блоком** | Пункт меню Ручки Блока, который работает с Блоком целиком, например «Дублировать» | Кнопкой: та работает с выделением |
155
+ | **Справочник сочетаний** | Поповер «команда — сочетание» только для чтения за последней кнопкой фиксированной Панели. Строки — команды включённых Инструментов, своих тоже; на телефоне кнопки нет | `CommandPalette` кита: строки Справочника сочетаний не нажимаются. `ShortcutsHelp` кита: тот — сочетания экрана, а не Редактора |
156
+ | **HTML-режим** | Режим Инструмента `source`: кнопка «HTML» на фиксированной Панели заменяет Документ полем с его HTML. Текст поля проходит Схему и становится Документом одной правкой — при выходе из режима, `blur`, отправке формы и чтении через Хэндл | HTML-соглашением: то — форма своего в Документе, а не режим. `CodeView`: тот показывает код, а поле HTML правится |
157
+ | **Стекло** | Полупрозрачная заливка с размытием фона у всего, что Редактор показывает поверх Документа: плавающая Панель, Меню выделения, меню, поповеры, Карточка у текста. Цвет — токен своей поверхности; при `prefers-reduced-transparency`, `prefers-contrast: more` и на iOS заливка сплошная | `Menu` и `Popover` кита вне Редактора: те остаются сплошными |
158
+ | **UI-запись** | Элемент интерфейса своего Инструмента, описанный данными: кнопка, Пункт вставки, Действие над Блоком или Карточка у текста. Рисует её кит в Отведённом месте; выключенный Инструмент убирает и свои записи | React-узлом в интерфейсе: произвольный React допускается только в содержимом поповера кнопки и Карточки у текста |
159
+ | **Отведённое место** | Одно место на поверхности, где стоят записи своих Инструментов, в порядке `tools`: группа Панели перед «Отменить», конец раздела Меню вставки, секция Ручки Блока перед «Удалить» | Позицией относительно встроенной кнопки: id встроенных публичным API не являются |
160
+ | **Пресет** | Готовый набор встроенных Инструментов: `full` или `basic` (`RICH_TEXT_PRESETS`). Не замороженный список: новый встроенный приходит в него minor-версией | Точным списком `tools`: его состав меняет только экран |
161
+ | **Инструмент** | Одна возможность Редактора: её Блоки и Метки, их правила в Схеме и место в интерфейсе, например `table`. Встроенный задаётся именем, свой — описанием | Кнопкой: выключенный Инструмент убирает и Блок из Схемы. Плагином Redactor: тот — класс поведения над DOM без Схемы |
162
+ | **Свой Инструмент** | Инструмент, который описывает потребитель (`CustomTool`): правила Схемы данными, Часть для движка и UI-записи. Передаётся в `tools` вперемешку с именами кита | Внутренним описанием кита: то — надмножество публичной формы для встроенных, наружу не экспортируется |
163
+ | **Опции Инструмента** | Что экран задаёт Инструменту до создания движка: стартовые флажки Поиска, `offsetVar`, `levels` и `listWidth` Оглавления, `defaults` своего Инструмента (`defineTool`). Экран задаёт их записью `tool(…)`, кит читает один раз, при создании движка | `options` у расширения Tiptap: те задаёт сам автор расширения и читает Часть для движка, а Опции задаёт экран и читает кит. Пропами Редактора (`preset`, `maxHeight`): те настраивают поле, а не Инструмент |
164
+ | **Настроенный Инструмент** | Запись `tools`, которую возвращает `tool(name, options)` или `tool(definition, options)`: Инструмент вместе с его Опциями. Включает Инструмент без имени в `tools` и побеждает голое имя из Пресета | Определением `defineTool`: то описывает Инструмент, а Настроенный Инструмент — его включение с Опциями. Описанием встроенного: оно наружу не выходит, запись лишь называет Инструмент и несёт Опции |
165
+ | **Состояние Инструмента** | Снимок данных, который экран читает хуком `useRichTextToolState(ref, name)`: у Поиска — открыта ли панель, запрос, число совпадений и текущее, у Оглавления — заголовки и текущий раздел. Перерисовка только при смене снимка | `storage` у расширения Tiptap: то — изменяемое хранилище внутри движка, а Состояние только читается. `useRichTextEditorState`: тот берёт срез живого `editor` Tiptap, а не контракт Инструмента |
166
+ | **Команды Инструмента** | Что экран вызывает у Инструмента через `handle.tool(name)`: `tool("search")?.open()`, `tool("toc")?.jumpTo(2)`. Каждая возвращает `boolean`; `null` вместо объекта Команд — Инструмента нет в наборе, у него нет Команд или движок ещё не создан | Методами Хэндла (`insertHTML`, `focus`): те общие для любого `tools`, а Команды есть, только пока Инструмент включён. `editor.commands` и `commands` у Tiptap: те — команды движка, они следуют его мажору |
167
+ | **Префикс потребителя** | Начало имени всего своего — Инструмента, его Блоков, Меток и атрибутов — до подчёркивания: `acme_mergeTag`, `data-acme_size`. В именах кита подчёркивания нет, поэтому своё и встроенное не совпадают ни в наборе, ни в Документе | Пресетом: тот — набор встроенных Инструментов, а не пространство имён |
168
+ | **HTML-соглашение** | Форма своего в Документе: Блок — `div` или `span` с `data-block`, Метка — `span` с `data-mark`, атрибуты — `data-<префикс>_<имя>`. Заморожено: расширяется только добавлением | Тегами Схемы кита (`p`, `table`, `img`): свой Блок их занять не может |
169
+ | **Признак Блока** | Свойство Блока, которое понимает только кит, а не движок: «контейнер» (детям своя Ручка), «можно превратить в», «Атом без меню форматирования» | Атрибутом Блока: тот хранится в Документе |
170
+ | **Часть для движка** | То в описании Инструмента, что нужно только живому Редактору: расширения Tiptap и вид узла. Подаётся сразу или Загрузчиком | Правилами Схемы: те — данные, их читают сервер и Просмотр без движка |
171
+ | **Загрузчик** | Функция с динамическим импортом вместо Части для движка: `engine: () => import(…)`. Так же грузятся тяжёлые встроенные вне `basic` — Блок кода и таблица | Предзагрузкой (`modulepreload`): её кит не публикует, ставит потребитель |
172
+ | **Хэндл** | Императивный доступ кода экрана к Редактору через `ref`: вставка у каретки, чтение, фокус, история, Команды Инструментов (`tool(name)`) | Сервисами Redactor: те — внутренности движка, а не API экрана |
173
+ | **Готовность** | Момент, когда движок создан и Загрузчики всех включённых Инструментов, своих и встроенных, отработали: с него методы Хэндла действуют, а не молчат. Наступает один раз за монтаж, о нём сообщает `onReady` | Гидратацией: после неё движок может ещё ждать Загрузчики |
174
+ | **Фокус поля** | Фокус внутри Редактора целиком: Документ, Панель, поповеры кита, поле HTML. Переход между ними Фокус поля не теряет; `onFocus` и `onBlur` — о нём | Фокусом Документа (`focus` и `blur` движка): клик в Панель его снимает |
175
+ | **Правка автора** | Изменение Документа, равное набору с клавиатуры: шаг истории, `onChange` после задержки, предел символов действует. Сюда же вставка, отмена и повтор из Хэндла | Заменой снаружи |
176
+ | **Замена снаружи** | Подмена Документа целиком (`value`, `clear()`, `setMarkdown()`, `setJSON()`): предел символов не режет; `onChange` сразу у `clear()`, `setMarkdown()` и `setJSON()`, на новый `value` не вызывается | Правкой автора |
177
+ | **Скелет** | Вид Редактора до Готовности: рамка поля, место Панели и Документ: очищенный Схемой, он выведен статичным HTML с тем же классом и ритмом, что Документ движка, без ввода. На сервере — рамка без Документа. Сбой Загрузчика превращает Скелет в ошибку поля с «Повторить» | Просмотром: тот — отдельный компонент только для чтения, а Скелет — состояние Редактора, которое сменяется движком. Компонентом `Skeleton` кита — заглушкой загрузки |
178
+ | **Строка статуса** | Строка внутри рамки поля под Документом: слева содержимое экрана (`status`: число слов, «Сохранено», соавтор), справа счётчик символов кита | Сообщением поля: строка показывает длительное состояние экрана, а не событие |
179
+ | **Сообщение поля** | Одно событие, привязанное к полю (`showNotice`): тон `status` (только озвучивается) или `error` (видимая строка под полем до следующей Правки автора). Новое заменяет прежнее | Тостом кита: тот глобален и к полю не привязан |
180
+ | **Карточка у текста** | Немодальная карточка под диапазоном Документа, который объявил свой Инструмент (`textCards`): комментарий, подсказка по результатам проверки текста. Открывается кареткой или щелчком, фокус остаётся в тексте | Поповером кнопки: его открывает кнопка, а Карточку — место Документа |
181
+ | **Символ-триггер** | Свой символ Инструмента (`trigger`), набор которого в начале Блока или после пробела открывает список пунктов у каретки, как `/`: `@` для упоминаний, `#` для тегов. Выбор заменяет набранное `@запрос` своим узлом | Меню вставки по `/`: то — встроенное, а свой символ задаёт Инструмент |
182
+ | **Лист** | Светлая область Документа в любой теме приложения (`surface="paper"`) — для текста, который уйдёт из приложения светлым: письмо, печать, PDF. Панель, меню и рамка поля остаются в теме приложения; Просмотр с тем же `surface` показывает тот же Лист | Темой `light`: та меняет всё приложение, Лист — только Документ |
183
+ | **Остров** | Клиентский кусок Просмотра, который после монтирования оживляет Блок в уже показанном HTML: кнопка «Копировать» у Блока кода, `island` своего Блока | Видом узла: тот живёт только в движке Редактора |
184
+ | **Гнездо** | Место в показанном HTML, куда Остров монтирует живой элемент: шапка Блока кода, в которую встаёт кнопка «Копировать» | Отведённым местом: то — место в интерфейсе Редактора для записей Инструментов |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@olddevs/ui",
3
- "version": "4.4.0",
3
+ "version": "4.5.1",
4
4
  "description": "Olddevs UI — design system: tokens, themes and accessible UI primitives",
5
5
  "license": "MIT",
6
6
  "private": false,