@olddevs/ui 4.3.0 → 4.5.0

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 (182) hide show
  1. package/CHANGELOG.md +36 -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 +124 -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 -5
  24. package/dist/editor/core/handle.d.ts.map +1 -1
  25. package/dist/editor/core/handle.js +2 -13
  26. package/dist/editor/core/handle.js.map +1 -1
  27. package/dist/editor/core/handleWatchers.d.ts +36 -0
  28. package/dist/editor/core/handleWatchers.d.ts.map +1 -0
  29. package/dist/editor/core/handleWatchers.js +29 -0
  30. package/dist/editor/core/handleWatchers.js.map +1 -0
  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 +10 -3
  59. package/dist/editor/core/tools.d.ts.map +1 -1
  60. package/dist/editor/core/tools.js +2 -1
  61. package/dist/editor/core/tools.js.map +1 -1
  62. package/dist/editor/core/viewIsland.d.ts.map +1 -1
  63. package/dist/editor/core/viewIsland.js +2 -1
  64. package/dist/editor/core/viewIsland.js.map +1 -1
  65. package/dist/editor/features/builtins.d.ts +9 -4
  66. package/dist/editor/features/builtins.d.ts.map +1 -1
  67. package/dist/editor/features/builtins.js +36 -7
  68. package/dist/editor/features/builtins.js.map +1 -1
  69. package/dist/editor/features/search/SearchPanel.d.ts.map +1 -1
  70. package/dist/editor/features/search/SearchPanel.js +26 -12
  71. package/dist/editor/features/search/SearchPanel.js.map +1 -1
  72. package/dist/editor/features/search/revealMatch.d.ts +16 -0
  73. package/dist/editor/features/search/revealMatch.d.ts.map +1 -1
  74. package/dist/editor/features/search/revealMatch.js +22 -0
  75. package/dist/editor/features/search/revealMatch.js.map +1 -1
  76. package/dist/editor/features/search/searchPlugin.d.ts +8 -3
  77. package/dist/editor/features/search/searchPlugin.d.ts.map +1 -1
  78. package/dist/editor/features/search/searchPlugin.js +17 -6
  79. package/dist/editor/features/search/searchPlugin.js.map +1 -1
  80. package/dist/editor/features/search/searchSnapshot.d.ts +14 -0
  81. package/dist/editor/features/search/searchSnapshot.d.ts.map +1 -0
  82. package/dist/editor/features/search/searchSnapshot.js +17 -0
  83. package/dist/editor/features/search/searchSnapshot.js.map +1 -0
  84. package/dist/editor/features/search/searchTool.d.ts +3 -0
  85. package/dist/editor/features/search/searchTool.d.ts.map +1 -1
  86. package/dist/editor/features/search/searchTool.js +30 -1
  87. package/dist/editor/features/search/searchTool.js.map +1 -1
  88. package/dist/editor/features/toc/RichTextToc.d.ts +91 -0
  89. package/dist/editor/features/toc/RichTextToc.d.ts.map +1 -0
  90. package/dist/editor/features/toc/RichTextToc.js +417 -0
  91. package/dist/editor/features/toc/RichTextToc.js.map +1 -0
  92. package/dist/editor/features/toc/documentHeadings.d.ts +30 -0
  93. package/dist/editor/features/toc/documentHeadings.d.ts.map +1 -0
  94. package/dist/editor/features/toc/documentHeadings.js +20 -0
  95. package/dist/editor/features/toc/documentHeadings.js.map +1 -0
  96. package/dist/editor/features/toc/headings.d.ts +35 -0
  97. package/dist/editor/features/toc/headings.d.ts.map +1 -0
  98. package/dist/editor/features/toc/headings.js +27 -0
  99. package/dist/editor/features/toc/headings.js.map +1 -0
  100. package/dist/editor/features/toc/stickyOffset.d.ts +3 -0
  101. package/dist/editor/features/toc/stickyOffset.d.ts.map +1 -0
  102. package/dist/editor/features/toc/stickyOffset.js +14 -0
  103. package/dist/editor/features/toc/stickyOffset.js.map +1 -0
  104. package/dist/editor/features/toc/tocSnapshot.d.ts +10 -0
  105. package/dist/editor/features/toc/tocSnapshot.d.ts.map +1 -0
  106. package/dist/editor/features/toc/tocSnapshot.js +8 -0
  107. package/dist/editor/features/toc/tocSnapshot.js.map +1 -0
  108. package/dist/editor/features/toc/tocTool.d.ts +6 -0
  109. package/dist/editor/features/toc/tocTool.d.ts.map +1 -0
  110. package/dist/editor/features/toc/tocTool.js +21 -0
  111. package/dist/editor/features/toc/tocTool.js.map +1 -0
  112. package/dist/editor/hooks/useRichTextToolState.d.ts +43 -0
  113. package/dist/editor/hooks/useRichTextToolState.d.ts.map +1 -0
  114. package/dist/editor/hooks/useRichTextToolState.js +77 -0
  115. package/dist/editor/hooks/useRichTextToolState.js.map +1 -0
  116. package/dist/editor/index.d.ts +10 -0
  117. package/dist/editor/index.d.ts.map +1 -1
  118. package/dist/editor/index.js +4 -0
  119. package/dist/editor/index.js.map +1 -1
  120. package/dist/i18n/defaults.d.ts.map +1 -1
  121. package/dist/i18n/defaults.js +1 -0
  122. package/dist/i18n/defaults.js.map +1 -1
  123. package/dist/i18n/messages.d.ts +5 -0
  124. package/dist/i18n/messages.d.ts.map +1 -1
  125. package/dist/locales/ru.d.ts.map +1 -1
  126. package/dist/locales/ru.js +1 -0
  127. package/dist/locales/ru.js.map +1 -1
  128. package/docs/api/editor-extension.en.md +223 -23
  129. package/docs/api/editor-extension.md +224 -22
  130. package/docs/api/messages.en.md +743 -0
  131. package/docs/api/messages.md +1 -0
  132. package/docs/api/migration-notes.en.md +36 -1
  133. package/docs/api/migration-notes.md +35 -0
  134. package/docs/api/utilities.en.md +233 -0
  135. package/docs/components/content/rich-text-toc.en.md +132 -0
  136. package/docs/components/content/rich-text-toc.md +131 -0
  137. package/docs/components/index.en.md +3 -2
  138. package/docs/components/index.md +2 -1
  139. package/docs/components/inputs/rich-text-editor.en.md +277 -43
  140. package/docs/components/inputs/rich-text-editor.md +247 -11
  141. package/docs/conventions.en.md +318 -0
  142. package/docs/getting-started.en.md +7 -7
  143. package/docs/getting-started.md +6 -6
  144. package/docs/glossary.en.md +52 -47
  145. package/docs/glossary.md +51 -46
  146. package/docs/index.en.md +53 -0
  147. package/llms.txt +1 -0
  148. package/package.json +1 -1
  149. package/src/editor/RichTextEditor.tsx +197 -38
  150. package/src/editor/RichTextView.tsx +2 -1
  151. package/src/editor/core/containers.ts +8 -6
  152. package/src/editor/core/customTool.ts +8 -2
  153. package/src/editor/core/customToolEngine.ts +20 -1
  154. package/src/editor/core/extensions.ts +2 -1
  155. package/src/editor/core/handle.ts +26 -23
  156. package/src/editor/core/handleWatchers.ts +72 -0
  157. package/src/editor/core/nodeNames.ts +7 -0
  158. package/src/editor/core/schema.ts +5 -2
  159. package/src/editor/core/toolCommands.ts +85 -0
  160. package/src/editor/core/toolDefinition.ts +208 -0
  161. package/src/editor/core/toolDescriptor.ts +94 -3
  162. package/src/editor/core/toolOptions.ts +211 -0
  163. package/src/editor/core/toolState.ts +56 -0
  164. package/src/editor/core/tools.ts +12 -3
  165. package/src/editor/core/viewIsland.ts +5 -4
  166. package/src/editor/features/builtins.ts +72 -13
  167. package/src/editor/features/search/SearchPanel.tsx +38 -14
  168. package/src/editor/features/search/revealMatch.ts +45 -0
  169. package/src/editor/features/search/searchPlugin.ts +40 -11
  170. package/src/editor/features/search/searchSnapshot.ts +29 -0
  171. package/src/editor/features/search/searchTool.ts +51 -1
  172. package/src/editor/features/toc/RichTextToc.tsx +810 -0
  173. package/src/editor/features/toc/documentHeadings.ts +59 -0
  174. package/src/editor/features/toc/headings.ts +77 -0
  175. package/src/editor/features/toc/stickyOffset.ts +21 -0
  176. package/src/editor/features/toc/tocSnapshot.ts +24 -0
  177. package/src/editor/features/toc/tocTool.ts +41 -0
  178. package/src/editor/hooks/useRichTextToolState.ts +153 -0
  179. package/src/editor/index.ts +21 -0
  180. package/src/i18n/defaults.ts +1 -0
  181. package/src/i18n/messages.ts +5 -0
  182. package/src/locales/ru.ts +1 -0
@@ -1,5 +1,5 @@
1
1
  ---
2
- sourceHash: eb21f7a757f6
2
+ sourceHash: 5cc549fe1c76
3
3
  ---
4
4
 
5
5
  # Glossary of `@olddevs/ui`
@@ -136,49 +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
- | **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 |
144
- | **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 |
145
- | **Schema** | An allowlist of Blocks, Marks and attributes that the Editor accepts and returns | Server-side sanitization — the consumer does it (`sanitizeRichText`) |
146
- | **Block** | A structural element of a Document: paragraph, heading, list, table, image… | A Mark |
147
- | **Mark** | Inline formatting inside a Block: bold, link, color… | A Block |
148
- | **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 |
149
- | **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 |
150
- | **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 |
151
- | **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 |
152
- | **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 |
153
- | **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 |
154
- | **Insert menu** | The "Insert" and "Turn into" list: opens on `/` in the text and on the "+" button | The browser context menu |
155
- | **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 |
156
- | **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 |
157
- | **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 |
158
- | **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 |
159
- | **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 |
160
- | **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 |
161
- | **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 |
162
- | **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 |
163
- | **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 |
164
- | **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 |
165
- | **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 |
166
- | **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 |
167
- | **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 |
168
- | **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 |
169
- | **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 |
170
- | **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 |
171
- | **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 |
172
- | **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 |
173
- | **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 |
174
- | **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 |
175
- | **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 |
176
- | **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 |
177
- | **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 |
178
- | **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 |
179
- | **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 |
180
- | **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 |
181
- | **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 |
182
- | **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 |
183
- | **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 |
184
- | **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 |