@inkbar/react 0.4.0 → 0.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.
- package/README.md +3 -5
- package/dist/index.d.mts +816 -1261
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +392 -427
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
---
|
|
22
22
|
|
|
23
|
-
Drop a PDF viewer into your React app and let people highlight text, leave notes with replies and
|
|
23
|
+
Drop a PDF viewer into your React app and let people highlight text, leave notes with replies and redact. `@inkbar/react` gives you components and hooks to build your own toolbars, plus a popover for comment threads, all styled by `@inkbar/theme`.
|
|
24
24
|
|
|
25
25
|
Annotations are plain typed objects. Control them from your own state, or let Inkbar hold them with undo and redo.
|
|
26
26
|
|
|
@@ -50,7 +50,6 @@ import {
|
|
|
50
50
|
InkNextPage,
|
|
51
51
|
InkZoomSelect,
|
|
52
52
|
InkThreadPopover,
|
|
53
|
-
InkSuggestionCard,
|
|
54
53
|
} from '@inkbar/react'
|
|
55
54
|
import type { Annotation } from '@inkbar/core'
|
|
56
55
|
import { assets } from 'virtual:inkbar-assets'
|
|
@@ -90,7 +89,6 @@ export function Review({
|
|
|
90
89
|
<InkZoomSelect />
|
|
91
90
|
</InkToolbar>
|
|
92
91
|
<InkThreadPopover />
|
|
93
|
-
<InkSuggestionCard />
|
|
94
92
|
</InkRoot>
|
|
95
93
|
)
|
|
96
94
|
}
|
|
@@ -155,7 +153,7 @@ The highlight tool leaves `contents` free for the comment. `doc.text(page)` retu
|
|
|
155
153
|
|
|
156
154
|
## Custom rendering
|
|
157
155
|
|
|
158
|
-
Slots are render props. `InkViewport` takes `loading`, `empty`, `error`, `renderAnnotation` and `renderPageError`; `InkThreadPopover`
|
|
156
|
+
Slots are render props. `InkViewport` takes `loading`, `empty`, `error`, `renderAnnotation` and `renderPageError`; `InkThreadPopover` takes a function as `children`; `InkToolButton` takes a node or a function of `{ active, label }`. The props each receives are typed as `AnnotationSlotProps` and `ThreadPopoverSlotProps`, the same types the Vue package exports.
|
|
159
157
|
|
|
160
158
|
`InkRoot`, `InkToolbar`, `InkToolButton`, `InkUndo`, `InkRedo`, `InkPrevPage`, `InkNextPage`, `InkZoomIn` and `InkZoomOut` take `asChild` to render your own element in place of theirs, such as a button from your design system. Pass that element as the only child. The control keeps its behaviour and accessible name.
|
|
161
159
|
|
|
@@ -169,7 +167,7 @@ The scroll area takes focus. From there:
|
|
|
169
167
|
|
|
170
168
|
On a focused annotation:
|
|
171
169
|
|
|
172
|
-
- `Enter` or `Space` selects and activates it. A note
|
|
170
|
+
- `Enter` or `Space` selects and activates it. A note or text markup opens its thread; other types are only selected.
|
|
173
171
|
- `ArrowUp` and `ArrowDown` move to the previous or next annotation on the page.
|
|
174
172
|
- `Shift` + arrow moves it by 1 pt, or by 10 pt with `Alt` as well.
|
|
175
173
|
- `Ctrl` or `Cmd` + `Shift` + arrow resizes an area redaction, text box or shape.
|