@inkbar/svelte 0.3.0 → 0.4.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 +16 -9
- package/dist/components/InkColorMenu.svelte +242 -0
- package/dist/components/InkColorMenu.svelte.d.ts +33 -0
- package/dist/components/InkColorMenu.svelte.d.ts.map +1 -0
- package/dist/components/InkHighlightMenu.svelte +166 -0
- package/dist/components/InkHighlightMenu.svelte.d.ts +16 -0
- package/dist/components/InkHighlightMenu.svelte.d.ts.map +1 -0
- package/dist/components/InkLineStyleMenu.svelte +141 -0
- package/dist/components/InkLineStyleMenu.svelte.d.ts +15 -0
- package/dist/components/InkLineStyleMenu.svelte.d.ts.map +1 -0
- package/dist/components/InkRoot.svelte +77 -3
- package/dist/components/InkRoot.svelte.d.ts +20 -2
- package/dist/components/InkRoot.svelte.d.ts.map +1 -1
- package/dist/components/InkShapeMenu.svelte +157 -0
- package/dist/components/InkShapeMenu.svelte.d.ts +15 -0
- package/dist/components/InkShapeMenu.svelte.d.ts.map +1 -0
- package/dist/components/InkSignatureDialog.svelte +70 -0
- package/dist/components/InkSignatureDialog.svelte.d.ts +22 -0
- package/dist/components/InkSignatureDialog.svelte.d.ts.map +1 -0
- package/dist/components/InkSignatureMenu.svelte +263 -0
- package/dist/components/InkSignatureMenu.svelte.d.ts +18 -0
- package/dist/components/InkSignatureMenu.svelte.d.ts.map +1 -0
- package/dist/components/InkTextStyleMenu.svelte +225 -0
- package/dist/components/InkTextStyleMenu.svelte.d.ts +15 -0
- package/dist/components/InkTextStyleMenu.svelte.d.ts.map +1 -0
- package/dist/components/{InkNotePopover.svelte → InkThreadPopover.svelte} +37 -32
- package/dist/components/InkThreadPopover.svelte.d.ts +9 -0
- package/dist/components/InkThreadPopover.svelte.d.ts.map +1 -0
- package/dist/components/InkToolButton.svelte +23 -7
- package/dist/components/InkToolButton.svelte.d.ts.map +1 -1
- package/dist/components/InkViewport.svelte +7 -0
- package/dist/components/InkViewport.svelte.d.ts.map +1 -1
- package/dist/components/SignatureForm.svelte +219 -0
- package/dist/components/SignatureForm.svelte.d.ts +10 -0
- package/dist/components/SignatureForm.svelte.d.ts.map +1 -0
- package/dist/components/ThreadForm.svelte +4 -2
- package/dist/components/ThreadForm.svelte.d.ts +1 -0
- package/dist/components/ThreadForm.svelte.d.ts.map +1 -1
- package/dist/components/child-snippet.d.ts +8 -0
- package/dist/components/child-snippet.d.ts.map +1 -1
- package/dist/components/child-snippet.js +15 -0
- package/dist/context.d.ts +14 -2
- package/dist/context.d.ts.map +1 -1
- package/dist/hooks/useAnnotations.svelte.d.ts +1289 -71
- package/dist/hooks/useAnnotations.svelte.d.ts.map +1 -1
- package/dist/hooks/useToolOptions.svelte.d.ts +11 -0
- package/dist/hooks/useToolOptions.svelte.d.ts.map +1 -0
- package/dist/hooks/useToolOptions.svelte.js +19 -0
- package/dist/hooks/useToolStyle.svelte.d.ts +33 -0
- package/dist/hooks/useToolStyle.svelte.d.ts.map +1 -0
- package/dist/hooks/useToolStyle.svelte.js +33 -0
- package/dist/index.d.ts +20 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -1
- package/package.json +5 -5
- package/dist/components/InkNotePopover.svelte.d.ts +0 -9
- package/dist/components/InkNotePopover.svelte.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
---
|
|
22
22
|
|
|
23
|
-
Drop a PDF viewer into your Svelte app and let people highlight text, leave notes with replies and review redactions. `@inkbar/svelte` gives you components to build your own toolbars, popovers for
|
|
23
|
+
Drop a PDF viewer into your Svelte app and let people highlight text, leave notes with replies and review redactions. `@inkbar/svelte` gives you components to build your own toolbars, popovers for comment threads and suggested redactions, and hooks for anything else. `@inkbar/theme` styles them all.
|
|
24
24
|
|
|
25
25
|
Annotations are plain typed objects. Bind them with `bind:annotations` to keep them in your own state, or let Inkbar hold them with undo and redo.
|
|
26
26
|
|
|
@@ -51,7 +51,7 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
|
|
|
51
51
|
InkZoomOut,
|
|
52
52
|
InkZoomSelect,
|
|
53
53
|
InkZoomIn,
|
|
54
|
-
|
|
54
|
+
InkThreadPopover,
|
|
55
55
|
InkSuggestionCard,
|
|
56
56
|
} from '@inkbar/svelte'
|
|
57
57
|
import type { Annotation } from '@inkbar/core'
|
|
@@ -65,7 +65,7 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
|
|
|
65
65
|
|
|
66
66
|
<InkRoot src={{ url: signedUrl, key: documentId }} {assets} bind:annotations>
|
|
67
67
|
<InkToolbar>
|
|
68
|
-
<InkToolButton tool="
|
|
68
|
+
<InkToolButton tool="select-text" />
|
|
69
69
|
<InkToolButton tool="select" />
|
|
70
70
|
<InkToolButton tool="highlight" />
|
|
71
71
|
<InkToolButton tool="redact-area" />
|
|
@@ -84,7 +84,7 @@ Svelte 5.46.4 or later is a peer dependency. Add the Vite plugin from `@inkbar/c
|
|
|
84
84
|
<InkZoomSelect />
|
|
85
85
|
<InkZoomIn />
|
|
86
86
|
</InkToolbar>
|
|
87
|
-
<
|
|
87
|
+
<InkThreadPopover />
|
|
88
88
|
<InkSuggestionCard />
|
|
89
89
|
</InkRoot>
|
|
90
90
|
```
|
|
@@ -147,15 +147,21 @@ Inside `InkRoot`, `useHistory()` returns the same object. Its `batch(fn)` runs `
|
|
|
147
147
|
|
|
148
148
|
`key` identifies the document. Reuse the same key when only the signed URL changes and the document is not reloaded.
|
|
149
149
|
|
|
150
|
-
##
|
|
150
|
+
## Thread popover
|
|
151
151
|
|
|
152
|
-
`
|
|
152
|
+
`InkThreadPopover` opens the comment thread of the activated note or text markup (a highlight, underline, strikeout or squiggly). A new note or highlight has no text yet, so the form first writes its own `contents` (labelled "Comment"); after that it adds replies. A highlight with a comment shows a small marker at its end. Replies show in the thread only; the page draws just the note or highlight they answer.
|
|
153
153
|
|
|
154
|
-
A root note with no text and no replies is removed when its popover closes, or when activation moves to another annotation, so abandoned notes do not stay on the page. Locked
|
|
154
|
+
A root note with no text and no replies is removed when its popover closes, or when activation moves to another annotation, so abandoned notes do not stay on the page. A highlight stays: the mark is the point. Locked annotations are never removed. If you add notes yourself (`add({ type: 'text', ... })`), give them `contents`, or they will be removed the first time someone opens and closes them.
|
|
155
|
+
|
|
156
|
+
The highlight tool leaves `contents` free for the comment. `doc.text(page)` returns the page's text items; match the markup's `quads` against them to get the marked text. `InkHighlightMenu` is a split button for the tool: it picks the markup kind and its colour.
|
|
157
|
+
|
|
158
|
+
## Signatures
|
|
159
|
+
|
|
160
|
+
`InkSignatureMenu` lists saved signatures, picks one for the `signature` tool, removes them, and opens `InkSignatureDialog` to draw, type or upload a new one. These are marks on the page, not cryptographic signatures. Pass `signatures` to `InkRoot` to keep them somewhere: `createLocalSignatureStore(key)` from `@inkbar/core` uses `localStorage`, and without it they last until reload. `signatureFonts` lists the handwriting fonts the Type tab offers; load them with `@font-face`. A placed signature keeps its aspect ratio when resized.
|
|
155
161
|
|
|
156
162
|
## Custom rendering
|
|
157
163
|
|
|
158
|
-
Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `
|
|
164
|
+
Slots are snippets. `InkViewport` takes `loading`, `empty`, `error`, `annotation` and `pageError`. `InkThreadPopover` and `InkSuggestionCard` take `children` as a snippet that receives the popover's props. `InkToolButton` takes `children` as a snippet of `{ active, label }`. The props each receives are typed as `AnnotationSlotProps`, `ThreadPopoverSlotProps` and `SuggestionCardSlotProps`, the same types the Vue and React packages export.
|
|
159
165
|
|
|
160
166
|
`InkRoot`, `InkToolbar`, `InkToolButton`, `InkUndo`, `InkRedo`, `InkPrevPage`, `InkNextPage`, `InkZoomIn` and `InkZoomOut` take a `child` snippet to render your own element. Spread the `props` it gives you on that element. The snippet type is exported as `ChildSnippet`.
|
|
161
167
|
|
|
@@ -173,6 +179,7 @@ The scroll area takes focus. From there:
|
|
|
173
179
|
|
|
174
180
|
- With the `highlight` or `redact-area` tool active, `Enter` turns the text selection into a mark.
|
|
175
181
|
- With the `note` tool active, `Enter` places a note at the centre of the current page and opens it.
|
|
182
|
+
- With the `signature` tool active, `Enter` places the chosen signature at the centre of the current page.
|
|
176
183
|
|
|
177
184
|
On a focused annotation:
|
|
178
185
|
|
|
@@ -190,7 +197,7 @@ Components carry state on data attributes, for example `[data-annotation][data-s
|
|
|
190
197
|
|
|
191
198
|
## Hooks
|
|
192
199
|
|
|
193
|
-
`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory` and `useEmbedded` read the state of the nearest `InkRoot`. Call them during component initialisation, as you would `getContext`. Each returns an object whose reactive members are getters: read `useZoom().zoom` in your template or an effect and it tracks; destructure it (`const { zoom } = useZoom()`) and you copy the value once. Keep the object and read through it.
|
|
200
|
+
`useDocument`, `useAnnotations`, `useTool`, `useSelection`, `useZoom`, `usePage`, `useHistory` and `useEmbedded` read the state of the nearest `InkRoot`. Call them during component initialisation, as you would `getContext`. Each returns an object whose reactive members are getters: read `useZoom().zoom` in your template or an effect and it tracks; destructure it (`const { zoom } = useZoom()`) and you copy the value once. Keep the object and read through it. Tool options, such as the shape kind, last as long as `InkRoot`. The tool style that `useToolStyle` reads and sets (colours, line style, text style) belongs to the document: opening another one starts again from the theme's defaults.
|
|
194
201
|
|
|
195
202
|
## Licence
|
|
196
203
|
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import type { StyleGroup } from '@inkbar/core'
|
|
3
|
+
import type { ColorProperty } from '@inkbar/core/dom'
|
|
4
|
+
import type { Snippet } from 'svelte'
|
|
5
|
+
import type { HTMLButtonAttributes } from 'svelte/elements'
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* A colour menu for one colour property (border, fill or text) of the selection or the
|
|
9
|
+
* active tool. The trigger shows the current colour as a swatch: split when the selection
|
|
10
|
+
* disagrees, slashed for no fill. The panel is a palette grid, plus "No fill" for `fill`
|
|
11
|
+
* and "Custom…", which opens a native colour input. The menu disables when nothing
|
|
12
|
+
* supports the property.
|
|
13
|
+
*/
|
|
14
|
+
export interface InkColorMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
|
|
15
|
+
/** The colour this menu sets. */
|
|
16
|
+
property: ColorProperty
|
|
17
|
+
/** Accessible name; defaults to "Border colour", "Fill colour" or "Text colour". */
|
|
18
|
+
label?: string | undefined
|
|
19
|
+
/** Replaces the swatch. */
|
|
20
|
+
children?: Snippet | undefined
|
|
21
|
+
/**
|
|
22
|
+
* Renders the trigger outside the toolbar's roving focus, for a menu nested in another
|
|
23
|
+
* panel (the text style menu's text colour).
|
|
24
|
+
*/
|
|
25
|
+
standalone?: boolean | undefined
|
|
26
|
+
/**
|
|
27
|
+
* Scopes the menu to one style group: it shows and sets that group's colour whatever
|
|
28
|
+
* tool is active, and recolours the selection only when it is all in the group.
|
|
29
|
+
*/
|
|
30
|
+
group?: StyleGroup | undefined
|
|
31
|
+
}
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<script lang="ts">
|
|
35
|
+
import {
|
|
36
|
+
COLOR_COLUMNS,
|
|
37
|
+
colorMenuModel,
|
|
38
|
+
focusInitialMenuItem,
|
|
39
|
+
handleMenuKeys,
|
|
40
|
+
menuItems,
|
|
41
|
+
} from '@inkbar/core/dom'
|
|
42
|
+
import { Check } from '@inkbar/icons'
|
|
43
|
+
import { Popover, Toolbar } from 'bits-ui'
|
|
44
|
+
|
|
45
|
+
import { useToolStyle } from '../hooks/useToolStyle.svelte.js'
|
|
46
|
+
|
|
47
|
+
import { asBitsProps, composeHandlers } from './child-snippet.js'
|
|
48
|
+
import InkIcon from './InkIcon.svelte'
|
|
49
|
+
|
|
50
|
+
let {
|
|
51
|
+
property,
|
|
52
|
+
label,
|
|
53
|
+
class: className,
|
|
54
|
+
children,
|
|
55
|
+
standalone = false,
|
|
56
|
+
group,
|
|
57
|
+
disabled,
|
|
58
|
+
onclick,
|
|
59
|
+
onkeydown,
|
|
60
|
+
...rest
|
|
61
|
+
}: InkColorMenuProps = $props()
|
|
62
|
+
|
|
63
|
+
const style = useToolStyle(() => group)
|
|
64
|
+
let open = $state(false)
|
|
65
|
+
|
|
66
|
+
const model = $derived(colorMenuModel(property, style.current, style.supported))
|
|
67
|
+
const name = $derived(label ?? model.label)
|
|
68
|
+
const trigger = $derived(model.trigger)
|
|
69
|
+
|
|
70
|
+
let menu = $state<HTMLElement | null>(null)
|
|
71
|
+
let triggerEl = $state<HTMLButtonElement | null>(null)
|
|
72
|
+
let customInput = $state<HTMLInputElement | null>(null)
|
|
73
|
+
|
|
74
|
+
// The menu closes when the control disables (the selection cleared while it was open).
|
|
75
|
+
$effect(() => {
|
|
76
|
+
if (!model.enabled) open = false
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
/** ArrowDown opens on the first item; a click opens on the checked one. */
|
|
80
|
+
let focusFirst = false
|
|
81
|
+
// Bits runs the open-focus callback more than once, so the flag outlives it; reset on close.
|
|
82
|
+
$effect(() => {
|
|
83
|
+
if (!open) focusFirst = false
|
|
84
|
+
})
|
|
85
|
+
function onTriggerKeydown(e: KeyboardEvent): void {
|
|
86
|
+
if (e.key !== 'ArrowDown' || e.defaultPrevented || open || !model.enabled) return
|
|
87
|
+
e.preventDefault()
|
|
88
|
+
focusFirst = true
|
|
89
|
+
open = true
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const triggerAttrs = $derived({
|
|
93
|
+
class: ['ink-menu-trigger ink-color-menu', className],
|
|
94
|
+
'data-ink-color-menu': property,
|
|
95
|
+
'data-state': open ? 'open' : 'closed',
|
|
96
|
+
'data-mixed': model.mixed ? '' : undefined,
|
|
97
|
+
'aria-label': name,
|
|
98
|
+
title: name,
|
|
99
|
+
'aria-haspopup': 'menu' as const,
|
|
100
|
+
disabled: !!disabled || !model.enabled,
|
|
101
|
+
})
|
|
102
|
+
/** The trigger's handlers: the host's first, then Bits UI's and the menu's. */
|
|
103
|
+
const handlers = (props: Record<string, unknown>) => ({
|
|
104
|
+
onclick: composeHandlers(onclick, props.onclick),
|
|
105
|
+
onkeydown: composeHandlers(onkeydown, props.onkeydown, onTriggerKeydown),
|
|
106
|
+
})
|
|
107
|
+
</script>
|
|
108
|
+
|
|
109
|
+
{#snippet body()}
|
|
110
|
+
{#if children}
|
|
111
|
+
{@render children()}
|
|
112
|
+
{:else}
|
|
113
|
+
<span
|
|
114
|
+
class="ink-swatch"
|
|
115
|
+
data-ink-swatch=""
|
|
116
|
+
data-property={property}
|
|
117
|
+
data-kind={trigger.kind}
|
|
118
|
+
data-color={trigger.kind === 'color' ? trigger.color : undefined}
|
|
119
|
+
style={trigger.kind === 'color' ? `--ink-swatch: ${trigger.color}` : undefined}
|
|
120
|
+
aria-hidden="true"
|
|
121
|
+
></span>
|
|
122
|
+
{/if}
|
|
123
|
+
{/snippet}
|
|
124
|
+
|
|
125
|
+
<Popover.Root bind:open>
|
|
126
|
+
<Popover.Trigger>
|
|
127
|
+
{#snippet child({ props })}
|
|
128
|
+
{#if standalone}
|
|
129
|
+
<button
|
|
130
|
+
bind:this={triggerEl}
|
|
131
|
+
{...props}
|
|
132
|
+
{...asBitsProps(rest)}
|
|
133
|
+
{...triggerAttrs}
|
|
134
|
+
{...handlers(props)}
|
|
135
|
+
>
|
|
136
|
+
{@render body()}
|
|
137
|
+
</button>
|
|
138
|
+
{:else}
|
|
139
|
+
<Toolbar.Button
|
|
140
|
+
{...props}
|
|
141
|
+
{...asBitsProps(rest)}
|
|
142
|
+
{...triggerAttrs}
|
|
143
|
+
{...handlers(props)}
|
|
144
|
+
>
|
|
145
|
+
{@render body()}
|
|
146
|
+
</Toolbar.Button>
|
|
147
|
+
{/if}
|
|
148
|
+
{/snippet}
|
|
149
|
+
</Popover.Trigger>
|
|
150
|
+
<Popover.Portal>
|
|
151
|
+
<Popover.Content
|
|
152
|
+
bind:ref={menu}
|
|
153
|
+
role="menu"
|
|
154
|
+
aria-label={name}
|
|
155
|
+
class="ink-select-content ink-menu-content"
|
|
156
|
+
data-ink-select-content=""
|
|
157
|
+
data-ink-menu={`color-${property}`}
|
|
158
|
+
side="bottom"
|
|
159
|
+
align="start"
|
|
160
|
+
sideOffset={4}
|
|
161
|
+
collisionPadding={8}
|
|
162
|
+
onOpenAutoFocus={(e) => {
|
|
163
|
+
e.preventDefault()
|
|
164
|
+
if (menu) {
|
|
165
|
+
if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })
|
|
166
|
+
else focusInitialMenuItem(menu)
|
|
167
|
+
}
|
|
168
|
+
}}
|
|
169
|
+
onkeydown={(e) => {
|
|
170
|
+
// Nested in another panel, Escape closes this menu alone; Bits would otherwise pick
|
|
171
|
+
// the layer to close by registration order.
|
|
172
|
+
if (standalone && e.key === 'Escape') {
|
|
173
|
+
e.stopPropagation()
|
|
174
|
+
e.preventDefault()
|
|
175
|
+
open = false
|
|
176
|
+
triggerEl?.focus()
|
|
177
|
+
return
|
|
178
|
+
}
|
|
179
|
+
if (menu) handleMenuKeys(e, menu)
|
|
180
|
+
}}
|
|
181
|
+
>
|
|
182
|
+
{#if model.noFill}
|
|
183
|
+
{@const noFill = model.noFill}
|
|
184
|
+
<button
|
|
185
|
+
type="button"
|
|
186
|
+
role="menuitemradio"
|
|
187
|
+
class="ink-select-item ink-menu-item"
|
|
188
|
+
data-ink-select-item=""
|
|
189
|
+
tabindex={-1}
|
|
190
|
+
aria-checked={noFill.checked}
|
|
191
|
+
data-state={noFill.checked ? 'checked' : 'unchecked'}
|
|
192
|
+
onclick={() => style.set(noFill.patch)}
|
|
193
|
+
>
|
|
194
|
+
No fill
|
|
195
|
+
{#if noFill.checked}
|
|
196
|
+
<span class="ink-select-indicator"><InkIcon icon={Check} size={16} /></span>
|
|
197
|
+
{/if}
|
|
198
|
+
</button>
|
|
199
|
+
{/if}
|
|
200
|
+
<div
|
|
201
|
+
role="group"
|
|
202
|
+
aria-label="Colours"
|
|
203
|
+
class="ink-color-grid"
|
|
204
|
+
data-ink-menu-columns={COLOR_COLUMNS}
|
|
205
|
+
>
|
|
206
|
+
{#each model.swatches as sw (sw.key)}
|
|
207
|
+
<button
|
|
208
|
+
type="button"
|
|
209
|
+
role="menuitemradio"
|
|
210
|
+
class="ink-swatch-item"
|
|
211
|
+
tabindex={-1}
|
|
212
|
+
aria-label={sw.label}
|
|
213
|
+
aria-checked={sw.checked}
|
|
214
|
+
data-state={sw.checked ? 'checked' : 'unchecked'}
|
|
215
|
+
style={`--ink-swatch: ${sw.color}`}
|
|
216
|
+
onclick={() => style.set(sw.patch)}
|
|
217
|
+
></button>
|
|
218
|
+
{/each}
|
|
219
|
+
</div>
|
|
220
|
+
<button
|
|
221
|
+
type="button"
|
|
222
|
+
role="menuitem"
|
|
223
|
+
class="ink-select-item ink-menu-item"
|
|
224
|
+
data-ink-select-item=""
|
|
225
|
+
tabindex={-1}
|
|
226
|
+
onclick={() => customInput?.click()}
|
|
227
|
+
>
|
|
228
|
+
Custom…
|
|
229
|
+
</button>
|
|
230
|
+
</Popover.Content>
|
|
231
|
+
</Popover.Portal>
|
|
232
|
+
</Popover.Root>
|
|
233
|
+
<input
|
|
234
|
+
bind:this={customInput}
|
|
235
|
+
type="color"
|
|
236
|
+
class="ink-color-input"
|
|
237
|
+
aria-label="Custom colour"
|
|
238
|
+
data-ink-color-input={property}
|
|
239
|
+
tabindex={-1}
|
|
240
|
+
value={model.customValue.toLowerCase()}
|
|
241
|
+
onchange={(e) => style.set(model.custom(e.currentTarget.value))}
|
|
242
|
+
/>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { StyleGroup } from '@inkbar/core';
|
|
2
|
+
import type { ColorProperty } from '@inkbar/core/dom';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
5
|
+
/**
|
|
6
|
+
* A colour menu for one colour property (border, fill or text) of the selection or the
|
|
7
|
+
* active tool. The trigger shows the current colour as a swatch: split when the selection
|
|
8
|
+
* disagrees, slashed for no fill. The panel is a palette grid, plus "No fill" for `fill`
|
|
9
|
+
* and "Custom…", which opens a native colour input. The menu disables when nothing
|
|
10
|
+
* supports the property.
|
|
11
|
+
*/
|
|
12
|
+
export interface InkColorMenuProps extends Omit<HTMLButtonAttributes, 'children'> {
|
|
13
|
+
/** The colour this menu sets. */
|
|
14
|
+
property: ColorProperty;
|
|
15
|
+
/** Accessible name; defaults to "Border colour", "Fill colour" or "Text colour". */
|
|
16
|
+
label?: string | undefined;
|
|
17
|
+
/** Replaces the swatch. */
|
|
18
|
+
children?: Snippet | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* Renders the trigger outside the toolbar's roving focus, for a menu nested in another
|
|
21
|
+
* panel (the text style menu's text colour).
|
|
22
|
+
*/
|
|
23
|
+
standalone?: boolean | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* Scopes the menu to one style group: it shows and sets that group's colour whatever
|
|
26
|
+
* tool is active, and recolours the selection only when it is all in the group.
|
|
27
|
+
*/
|
|
28
|
+
group?: StyleGroup | undefined;
|
|
29
|
+
}
|
|
30
|
+
declare const InkColorMenu: import("svelte").Component<InkColorMenuProps, {}, "">;
|
|
31
|
+
type InkColorMenu = ReturnType<typeof InkColorMenu>;
|
|
32
|
+
export default InkColorMenu;
|
|
33
|
+
//# sourceMappingURL=InkColorMenu.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InkColorMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkColorMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAC/E,iCAAiC;IACjC,QAAQ,EAAE,aAAa,CAAA;IACvB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CAC/B;AA0JH,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte'
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements'
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A split button for the highlight tool. The main part activates the tool with the current
|
|
7
|
+
* markup kind and draws that kind's icon; the chevron opens a menu of the four kinds plus
|
|
8
|
+
* the markup colour. Choosing a kind switches to the tool with it. The colour is a nested
|
|
9
|
+
* `InkColorMenu` scoped to the `markup` style group, so it works whatever tool is active.
|
|
10
|
+
*/
|
|
11
|
+
export interface InkHighlightMenuProps extends Omit<
|
|
12
|
+
HTMLAttributes<HTMLDivElement>,
|
|
13
|
+
'children'
|
|
14
|
+
> {
|
|
15
|
+
/** Replaces the main button's icon. */
|
|
16
|
+
children?: Snippet | undefined
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<script lang="ts">
|
|
21
|
+
import {
|
|
22
|
+
focusInitialMenuItem,
|
|
23
|
+
handleMenuKeys,
|
|
24
|
+
highlightMenuModel,
|
|
25
|
+
MARKUP_ICONS,
|
|
26
|
+
MARKUP_KINDS,
|
|
27
|
+
menuItems,
|
|
28
|
+
type HighlightOptions,
|
|
29
|
+
type MarkupKind,
|
|
30
|
+
} from '@inkbar/core/dom'
|
|
31
|
+
import { ChevronDown } from '@inkbar/icons'
|
|
32
|
+
import { Popover, Toolbar } from 'bits-ui'
|
|
33
|
+
|
|
34
|
+
import { useTool } from '../hooks/useTool.svelte.js'
|
|
35
|
+
import { useToolOptions } from '../hooks/useToolOptions.svelte.js'
|
|
36
|
+
|
|
37
|
+
import InkColorMenu from './InkColorMenu.svelte'
|
|
38
|
+
import InkIcon from './InkIcon.svelte'
|
|
39
|
+
|
|
40
|
+
let { class: className, children, ...rest }: InkHighlightMenuProps = $props()
|
|
41
|
+
|
|
42
|
+
const current = useTool()
|
|
43
|
+
const highlight = useToolOptions<HighlightOptions>('highlight')
|
|
44
|
+
let open = $state(false)
|
|
45
|
+
|
|
46
|
+
const model = $derived(highlightMenuModel(highlight.options, MARKUP_KINDS))
|
|
47
|
+
const active = $derived(current.tool === 'highlight')
|
|
48
|
+
|
|
49
|
+
let menu = $state<HTMLElement | null>(null)
|
|
50
|
+
|
|
51
|
+
/** ArrowDown opens on the first item; a click opens on the checked one. */
|
|
52
|
+
let focusFirst = false
|
|
53
|
+
// Bits runs the open-focus callback more than once, so the flag outlives it; reset on close.
|
|
54
|
+
$effect(() => {
|
|
55
|
+
if (!open) focusFirst = false
|
|
56
|
+
})
|
|
57
|
+
function onTriggerKeydown(e: KeyboardEvent): void {
|
|
58
|
+
if (e.key !== 'ArrowDown' || e.defaultPrevented || open) return
|
|
59
|
+
e.preventDefault()
|
|
60
|
+
focusFirst = true
|
|
61
|
+
open = true
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function choose(kind: MarkupKind): void {
|
|
65
|
+
highlight.setOptions({ kind })
|
|
66
|
+
current.setTool('highlight')
|
|
67
|
+
open = false
|
|
68
|
+
}
|
|
69
|
+
</script>
|
|
70
|
+
|
|
71
|
+
<div
|
|
72
|
+
role="group"
|
|
73
|
+
aria-label="Highlight"
|
|
74
|
+
class={['ink-split-button ink-highlight-menu', className]}
|
|
75
|
+
data-ink-highlight-menu=""
|
|
76
|
+
{...rest}
|
|
77
|
+
>
|
|
78
|
+
<Toolbar.Button
|
|
79
|
+
class="ink-tool-button ink-highlight-button"
|
|
80
|
+
data-ink-tool-button=""
|
|
81
|
+
data-ink-highlight-button=""
|
|
82
|
+
data-tool="highlight"
|
|
83
|
+
data-kind={model.kind}
|
|
84
|
+
data-state={active ? 'on' : 'off'}
|
|
85
|
+
aria-pressed={active}
|
|
86
|
+
aria-label={model.label}
|
|
87
|
+
title={model.label}
|
|
88
|
+
onclick={() => current.setTool('highlight')}
|
|
89
|
+
>
|
|
90
|
+
{#if children}{@render children()}{:else}<InkIcon
|
|
91
|
+
icon={MARKUP_ICONS[model.kind]}
|
|
92
|
+
/>{/if}
|
|
93
|
+
</Toolbar.Button>
|
|
94
|
+
<Popover.Root bind:open>
|
|
95
|
+
<Popover.Trigger>
|
|
96
|
+
{#snippet child({ props })}
|
|
97
|
+
<Toolbar.Button
|
|
98
|
+
{...props}
|
|
99
|
+
class="ink-menu-trigger ink-highlight-menu-trigger"
|
|
100
|
+
data-ink-highlight-menu-trigger=""
|
|
101
|
+
data-state={open ? 'open' : 'closed'}
|
|
102
|
+
aria-label="Choose highlight"
|
|
103
|
+
title="Choose highlight"
|
|
104
|
+
aria-haspopup="menu"
|
|
105
|
+
onkeydown={onTriggerKeydown}
|
|
106
|
+
>
|
|
107
|
+
<InkIcon icon={ChevronDown} />
|
|
108
|
+
</Toolbar.Button>
|
|
109
|
+
{/snippet}
|
|
110
|
+
</Popover.Trigger>
|
|
111
|
+
<Popover.Portal>
|
|
112
|
+
<Popover.Content
|
|
113
|
+
bind:ref={menu}
|
|
114
|
+
role="menu"
|
|
115
|
+
aria-label="Highlights"
|
|
116
|
+
class="ink-select-content ink-menu-content"
|
|
117
|
+
data-ink-select-content=""
|
|
118
|
+
data-ink-menu="highlight"
|
|
119
|
+
side="bottom"
|
|
120
|
+
align="start"
|
|
121
|
+
sideOffset={4}
|
|
122
|
+
collisionPadding={8}
|
|
123
|
+
onOpenAutoFocus={(e) => {
|
|
124
|
+
e.preventDefault()
|
|
125
|
+
if (menu) {
|
|
126
|
+
if (focusFirst) menuItems(menu)[0]?.focus({ preventScroll: true })
|
|
127
|
+
else focusInitialMenuItem(menu)
|
|
128
|
+
}
|
|
129
|
+
}}
|
|
130
|
+
onkeydowncapture={(e: KeyboardEvent) => menu && handleMenuKeys(e, menu)}
|
|
131
|
+
>
|
|
132
|
+
<div role="group" aria-label="Kinds" class="ink-highlight-kinds">
|
|
133
|
+
{#each model.items as item (item.kind)}
|
|
134
|
+
<button
|
|
135
|
+
type="button"
|
|
136
|
+
role="menuitemradio"
|
|
137
|
+
class="ink-select-item ink-menu-item ink-highlight-item"
|
|
138
|
+
data-ink-select-item=""
|
|
139
|
+
tabindex={-1}
|
|
140
|
+
data-key={item.kind}
|
|
141
|
+
aria-checked={item.checked}
|
|
142
|
+
data-state={item.checked ? 'checked' : 'unchecked'}
|
|
143
|
+
onclick={() => choose(item.kind)}
|
|
144
|
+
>
|
|
145
|
+
<InkIcon icon={MARKUP_ICONS[item.kind]} size={16} />
|
|
146
|
+
{item.label}
|
|
147
|
+
</button>
|
|
148
|
+
{/each}
|
|
149
|
+
</div>
|
|
150
|
+
<div role="separator" class="ink-select-separator"></div>
|
|
151
|
+
<div role="group" aria-label="Colour" class="ink-highlight-colour">
|
|
152
|
+
<span class="ink-highlight-colour-label" aria-hidden="true">Colour</span>
|
|
153
|
+
<!-- Capture on the panel moves on from this item before its own ArrowDown opens it. -->
|
|
154
|
+
<InkColorMenu
|
|
155
|
+
property="border"
|
|
156
|
+
group="markup"
|
|
157
|
+
label="Highlight colour"
|
|
158
|
+
standalone
|
|
159
|
+
role="menuitem"
|
|
160
|
+
tabindex={-1}
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
163
|
+
</Popover.Content>
|
|
164
|
+
</Popover.Portal>
|
|
165
|
+
</Popover.Root>
|
|
166
|
+
</div>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
/**
|
|
4
|
+
* A split button for the highlight tool. The main part activates the tool with the current
|
|
5
|
+
* markup kind and draws that kind's icon; the chevron opens a menu of the four kinds plus
|
|
6
|
+
* the markup colour. Choosing a kind switches to the tool with it. The colour is a nested
|
|
7
|
+
* `InkColorMenu` scoped to the `markup` style group, so it works whatever tool is active.
|
|
8
|
+
*/
|
|
9
|
+
export interface InkHighlightMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
10
|
+
/** Replaces the main button's icon. */
|
|
11
|
+
children?: Snippet | undefined;
|
|
12
|
+
}
|
|
13
|
+
declare const InkHighlightMenu: import("svelte").Component<InkHighlightMenuProps, {}, "">;
|
|
14
|
+
type InkHighlightMenu = ReturnType<typeof InkHighlightMenu>;
|
|
15
|
+
export default InkHighlightMenu;
|
|
16
|
+
//# sourceMappingURL=InkHighlightMenu.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InkHighlightMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/InkHighlightMenu.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AA2GH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
|