@pixelmatters/markup 1.24.0 → 1.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -7
- package/dist/widget.d.ts +37 -8
- package/dist/widget.js +2510 -2209
- package/dist/widget.js.map +1 -1
- package/package.json +6 -6
- package/skills/install-markup-widget/SKILL.md +4 -4
package/README.md
CHANGED
|
@@ -37,9 +37,9 @@ CDN drop-in, no build step. Paste this just before `</body>`:
|
|
|
37
37
|
```html
|
|
38
38
|
<script type="module">
|
|
39
39
|
// Pin the exact version; esm.sh resolves it from npm
|
|
40
|
-
import { init } from 'https://esm.sh/@pixelmatters/markup@1.
|
|
40
|
+
import { init } from 'https://esm.sh/@pixelmatters/markup@1.25.1'
|
|
41
41
|
// or
|
|
42
|
-
// import { init } from 'https://esm.run/@pixelmatters/markup@1.
|
|
42
|
+
// import { init } from 'https://esm.run/@pixelmatters/markup@1.25.1'
|
|
43
43
|
|
|
44
44
|
init({
|
|
45
45
|
apiUrl: 'https://your-deployment.convex.site',
|
|
@@ -50,14 +50,14 @@ CDN drop-in, no build step. Paste this just before `</body>`:
|
|
|
50
50
|
</script>
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
> **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm, so a future major release will break your page with no warning. Always pin (`@pixelmatters/markup@1.
|
|
53
|
+
> **Why pin the version?** CDN URLs without a version (`@pixelmatters/markup`) resolve to whatever's `latest` on npm, so a future major release will break your page with no warning. Always pin (`@pixelmatters/markup@1.25.1`).
|
|
54
54
|
|
|
55
55
|
If your platform doesn't allow inline JS (some CMS / page-builder editors), use the auto-init form instead. Point a `<script src=…>` at the bundle and pass config via `data-*` attributes:
|
|
56
56
|
|
|
57
57
|
```html
|
|
58
58
|
<script
|
|
59
59
|
type="module"
|
|
60
|
-
src="https://esm.sh/@pixelmatters/markup@1.
|
|
60
|
+
src="https://esm.sh/@pixelmatters/markup@1.25.1"
|
|
61
61
|
data-markup-widget="true"
|
|
62
62
|
data-api-url="https://your-deployment.convex.site"
|
|
63
63
|
data-api-key="markup_..."
|
|
@@ -219,7 +219,9 @@ Appearance persists to the host page's `localStorage` (`markup:widget:theme`) an
|
|
|
219
219
|
|
|
220
220
|
**Show resolved threads** is off by default. Turned on, the widget also renders the route's most recently resolved threads (up to 100) as muted check-mark pins. Opening one shows the thread read-only: no replies, edits, reactions or resolve button. Reopening still happens from the dashboard.
|
|
221
221
|
|
|
222
|
-
The last two menu rows open
|
|
222
|
+
The last two menu rows open inside the menu itself, replacing the rows with a
|
|
223
|
+
reading panel and a **Back** button. `Esc` steps back to the rows, and again to
|
|
224
|
+
close.
|
|
223
225
|
|
|
224
226
|
- **Privacy & data.** A plain-language account of what the widget holds, generated from the live session rather than from a policy document: who you're posting as, what a comment sends, what sits in this site's storage, whether captures are on, and the single host the widget talks to. Anonymous visitors also get **Forget me on this site** here, with the same arm-then-confirm as the identity menu.
|
|
225
227
|
- **Keyboard shortcuts.** The table below, in the modifier vocabulary of the reader's platform. The menu is the only way in on purpose: a key binding for it (`?` being the conventional one) would compete with whatever your app already binds, and the widget can't see your handlers to know.
|
|
@@ -373,7 +375,7 @@ For a `<script>` tag drop-in (no bundler), use the inline ESM form and **pin the
|
|
|
373
375
|
|
|
374
376
|
```html
|
|
375
377
|
<script type="module">
|
|
376
|
-
import { init } from 'https://esm.sh/@pixelmatters/markup@1.
|
|
378
|
+
import { init } from 'https://esm.sh/@pixelmatters/markup@1.25.1'
|
|
377
379
|
|
|
378
380
|
init({
|
|
379
381
|
apiUrl: '...',
|
|
@@ -389,7 +391,7 @@ If inline JS is disallowed (some CMS / page-builder editors), use the auto-init
|
|
|
389
391
|
```html
|
|
390
392
|
<script
|
|
391
393
|
type="module"
|
|
392
|
-
src="https://esm.sh/@pixelmatters/markup@1.
|
|
394
|
+
src="https://esm.sh/@pixelmatters/markup@1.25.1"
|
|
393
395
|
data-markup-widget="true"
|
|
394
396
|
data-api-url="..."
|
|
395
397
|
data-api-key="..."
|
package/dist/widget.d.ts
CHANGED
|
@@ -7,28 +7,48 @@ export type WidgetTheme = 'light' | 'dark' | 'auto';
|
|
|
7
7
|
*/
|
|
8
8
|
export type WidgetFab = 'default' | 'icon-only';
|
|
9
9
|
export interface ScreenshotsConfig {
|
|
10
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Disable screenshot capture entirely.
|
|
12
|
+
*
|
|
13
|
+
* @default true
|
|
14
|
+
*/
|
|
11
15
|
enabled?: boolean;
|
|
12
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* Also masks all inputs/selects/textareas in addition to the default sensitive set.
|
|
18
|
+
*
|
|
19
|
+
* @default false
|
|
20
|
+
*/
|
|
13
21
|
strictScrub?: boolean;
|
|
14
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* Custom CSS selector — matched elements are always masked.
|
|
24
|
+
*
|
|
25
|
+
* @default undefined
|
|
26
|
+
*/
|
|
15
27
|
redactSelector?: string;
|
|
16
28
|
}
|
|
17
29
|
export interface WidgetConfig {
|
|
18
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* Convex deployment site URL, e.g. `https://your-deployment.convex.site`
|
|
32
|
+
*/
|
|
19
33
|
apiUrl: string;
|
|
20
|
-
/**
|
|
34
|
+
/**
|
|
35
|
+
* Raw API key minted from a project's settings page
|
|
36
|
+
*/
|
|
21
37
|
apiKey: string;
|
|
22
38
|
/**
|
|
23
39
|
* Initial corner for the toolbar. Defaults to bottom-right. Users can
|
|
24
40
|
* move it afterwards from the toolbar's overflow menu.
|
|
41
|
+
*
|
|
42
|
+
* @default 'bottom-right'
|
|
25
43
|
*/
|
|
26
44
|
position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
27
45
|
/**
|
|
28
46
|
* Visual theme.
|
|
29
47
|
* - `'light'` — force light palette
|
|
30
48
|
* - `'dark'` — force dark palette
|
|
31
|
-
* - `'auto'`
|
|
49
|
+
* - `'auto'` — follow the host's `prefers-color-scheme`
|
|
50
|
+
*
|
|
51
|
+
* @default 'auto'
|
|
32
52
|
*/
|
|
33
53
|
theme?: WidgetTheme;
|
|
34
54
|
/**
|
|
@@ -37,20 +57,27 @@ export interface WidgetConfig {
|
|
|
37
57
|
* `'icon-only'` describes anything the widget can render. Accepted
|
|
38
58
|
* (and dropped) so upgrading doesn't break callers that still pass it;
|
|
39
59
|
* remove it from your config. Will be deleted in the next major.
|
|
60
|
+
*
|
|
61
|
+
* @default undefined
|
|
40
62
|
*/
|
|
41
63
|
fab?: WidgetFab;
|
|
42
|
-
/**
|
|
64
|
+
/**
|
|
65
|
+
* Screenshot capture and PII-scrub options.
|
|
66
|
+
*
|
|
67
|
+
* @default undefined
|
|
68
|
+
*/
|
|
43
69
|
screenshots?: ScreenshotsConfig;
|
|
44
70
|
/**
|
|
45
71
|
* Optional dashboard URL the widget links to from the verified-user
|
|
46
72
|
* identity menu ("Account →"). When omitted the menu hides the
|
|
47
73
|
* Account entry. Useful for self-hosters whose dashboard origin
|
|
48
74
|
* isn't statically known to the widget.
|
|
75
|
+
*
|
|
76
|
+
* @default 'https://markup.pixelmatters.dev'
|
|
49
77
|
*/
|
|
50
78
|
dashboardUrl?: string;
|
|
51
79
|
/**
|
|
52
80
|
* Product telemetry — counts of widget interactions, sent to Markup.
|
|
53
|
-
* Default: enabled.
|
|
54
81
|
*
|
|
55
82
|
* What it is not: it adds no third-party script, sets no cookie and
|
|
56
83
|
* writes nothing to storage, and carries no identifier for the person
|
|
@@ -60,6 +87,8 @@ export interface WidgetConfig {
|
|
|
60
87
|
*
|
|
61
88
|
* Set `false` if your privacy policy or DPA is easier to write
|
|
62
89
|
* without it.
|
|
90
|
+
*
|
|
91
|
+
* @default true
|
|
63
92
|
*/
|
|
64
93
|
analytics?: boolean;
|
|
65
94
|
}
|