react-datocms 7.2.9 → 7.2.11
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/dist/cjs/ContentLink/index.js.map +1 -1
- package/dist/cjs/useContentLink/index.js +14 -1
- package/dist/cjs/useContentLink/index.js.map +1 -1
- package/dist/esm/ContentLink/index.js.map +1 -1
- package/dist/esm/useContentLink/index.js +14 -1
- package/dist/esm/useContentLink/index.js.map +1 -1
- package/dist/types/ContentLink/index.d.ts +17 -5
- package/dist/types/useContentLink/index.d.ts +24 -3
- package/package.json +1 -1
- package/src/ContentLink/index.tsx +17 -2
- package/src/useContentLink/index.ts +47 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;AAgGb,kCAmCC;AAjID,iCAAkC;AAClC,yDAIoC;AAyBpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,WAAW,EACX,iBAAiB,EAAE,wBAAwB,EAC3C,UAAU,KAER,KAAK,EADJ,qBAAqB,UACtB,KAAK,EALH,kDAKL,CAAQ,CAAC;IAEV,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,IAAA,yBAAc,kCACvD,qBAAqB,KACxB,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,IACzD,CAAC;IAEH,oCAAoC;IACpC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,cAAc,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAElC,6CAA6C;IAC7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IACE,wBAAwB,KAAK,SAAS;YACtC,wBAAwB,KAAK,KAAK,EAClC,CAAC;YACD,iBAAiB,CACf,wBAAwB,KAAK,IAAI;gBAC/B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,wBAAwB,CAC7B,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElD,OAAO,IAAI,CAAC;AACd,CAAC"}
|
|
@@ -72,7 +72,20 @@ function useContentLink(options = {}) {
|
|
|
72
72
|
// Stable method references that call through to the controller
|
|
73
73
|
const enableClickToEdit = (0, react_1.useCallback)((opts) => {
|
|
74
74
|
var _a;
|
|
75
|
-
|
|
75
|
+
// Never enable click-to-edit inside an iframe
|
|
76
|
+
if (typeof window !== 'undefined' && window.parent !== window) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
// If hoverOnly is true, check if the device supports hover
|
|
80
|
+
if (opts === null || opts === void 0 ? void 0 : opts.hoverOnly) {
|
|
81
|
+
const supportsHover = typeof window !== 'undefined' &&
|
|
82
|
+
window.matchMedia('(hover: hover)').matches;
|
|
83
|
+
if (!supportsHover) {
|
|
84
|
+
// Don't enable click-to-edit on touch-only devices
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
(_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.enableClickToEdit((opts === null || opts === void 0 ? void 0 : opts.scrollToNearestTarget) ? { scrollToNearestTarget: true } : undefined);
|
|
76
89
|
}, []);
|
|
77
90
|
const disableClickToEdit = (0, react_1.useCallback)(() => {
|
|
78
91
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ContentLink/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAGL,cAAc,GACf,MAAM,4BAA4B,CAAC;AAyBpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,WAAW,EACX,iBAAiB,EAAE,wBAAwB,EAC3C,UAAU,KAER,KAAK,EADJ,qBAAqB,UACtB,KAAK,EALH,kDAKL,CAAQ,CAAC;IAEV,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,cAAc,iCACvD,qBAAqB,KACxB,OAAO,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,IACzD,CAAC;IAEH,oCAAoC;IACpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,cAAc,CAAC,WAAW,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;IAElC,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,IACE,wBAAwB,KAAK,SAAS;YACtC,wBAAwB,KAAK,KAAK,EAClC,CAAC;YACD,iBAAiB,CACf,wBAAwB,KAAK,IAAI;gBAC/B,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,wBAAwB,CAC7B,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElD,OAAO,IAAI,CAAC;AACd,CAAC"}
|
|
@@ -66,7 +66,20 @@ export function useContentLink(options = {}) {
|
|
|
66
66
|
// Stable method references that call through to the controller
|
|
67
67
|
const enableClickToEdit = useCallback((opts) => {
|
|
68
68
|
var _a;
|
|
69
|
-
|
|
69
|
+
// Never enable click-to-edit inside an iframe
|
|
70
|
+
if (typeof window !== 'undefined' && window.parent !== window) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
// If hoverOnly is true, check if the device supports hover
|
|
74
|
+
if (opts === null || opts === void 0 ? void 0 : opts.hoverOnly) {
|
|
75
|
+
const supportsHover = typeof window !== 'undefined' &&
|
|
76
|
+
window.matchMedia('(hover: hover)').matches;
|
|
77
|
+
if (!supportsHover) {
|
|
78
|
+
// Don't enable click-to-edit on touch-only devices
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
(_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.enableClickToEdit((opts === null || opts === void 0 ? void 0 : opts.scrollToNearestTarget) ? { scrollToNearestTarget: true } : undefined);
|
|
70
83
|
}, []);
|
|
71
84
|
const disableClickToEdit = useCallback(() => {
|
|
72
85
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAmB,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useContentLink/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,23 @@
|
|
|
1
|
-
import { type UseContentLinkOptions } from '../useContentLink/index.js';
|
|
1
|
+
import { type ClickToEditOptions, type UseContentLinkOptions } from '../useContentLink/index.js';
|
|
2
2
|
export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
|
|
3
3
|
/** Current pathname to sync with Web Previews plugin */
|
|
4
4
|
currentPath?: string;
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Whether to enable click-to-edit overlays on mount, or options to configure them.
|
|
7
|
+
*
|
|
8
|
+
* - `true`: Enable click-to-edit mode immediately
|
|
9
|
+
* - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
|
|
10
|
+
* - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
|
|
11
|
+
* - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <ContentLink enableClickToEdit={true} />
|
|
16
|
+
* <ContentLink enableClickToEdit={{ scrollToNearestTarget: true }} />
|
|
17
|
+
* <ContentLink enableClickToEdit={{ hoverOnly: true, scrollToNearestTarget: true }} />
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
enableClickToEdit?: boolean | ClickToEditOptions;
|
|
9
21
|
/** Whether to strip stega encoding from text nodes after stamping. */
|
|
10
22
|
stripStega?: boolean;
|
|
11
23
|
};
|
|
@@ -24,13 +24,34 @@ export type UseContentLinkOptions = {
|
|
|
24
24
|
/** Ref to limit scanning to this root instead of document */
|
|
25
25
|
root?: React.RefObject<HTMLElement>;
|
|
26
26
|
};
|
|
27
|
+
export interface ClickToEditOptions {
|
|
28
|
+
/**
|
|
29
|
+
* Whether to automatically scroll to the nearest editable element if none
|
|
30
|
+
* is currently visible in the viewport when click-to-edit mode is enabled.
|
|
31
|
+
*
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
scrollToNearestTarget?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Only enable click-to-edit on devices that support hover (i.e., non-touch devices).
|
|
37
|
+
* Uses `window.matchMedia('(hover: hover)')` to detect hover capability.
|
|
38
|
+
*
|
|
39
|
+
* This is useful to avoid showing overlays on touch devices where they may
|
|
40
|
+
* interfere with normal scrolling and tapping behavior.
|
|
41
|
+
*
|
|
42
|
+
* When set to `true` on a touch-only device, click-to-edit will not be
|
|
43
|
+
* automatically enabled, but users can still toggle it manually using
|
|
44
|
+
* the Alt/Option key.
|
|
45
|
+
*
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
hoverOnly?: boolean;
|
|
49
|
+
}
|
|
27
50
|
export type UseContentLinkResult = {
|
|
28
51
|
/** The controller instance, or null if disabled */
|
|
29
52
|
controller: Controller | null;
|
|
30
53
|
/** Enable click-to-edit overlays */
|
|
31
|
-
enableClickToEdit: (options?:
|
|
32
|
-
scrollToNearestTarget: boolean;
|
|
33
|
-
}) => void;
|
|
54
|
+
enableClickToEdit: (options?: ClickToEditOptions) => void;
|
|
34
55
|
/** Disable click-to-edit overlays */
|
|
35
56
|
disableClickToEdit: () => void;
|
|
36
57
|
/** Check if click-to-edit is enabled */
|
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { useEffect } from 'react';
|
|
4
4
|
import {
|
|
5
|
+
type ClickToEditOptions,
|
|
5
6
|
type UseContentLinkOptions,
|
|
6
7
|
useContentLink,
|
|
7
8
|
} from '../useContentLink/index.js';
|
|
@@ -9,8 +10,22 @@ import {
|
|
|
9
10
|
export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
|
|
10
11
|
/** Current pathname to sync with Web Previews plugin */
|
|
11
12
|
currentPath?: string;
|
|
12
|
-
/**
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Whether to enable click-to-edit overlays on mount, or options to configure them.
|
|
15
|
+
*
|
|
16
|
+
* - `true`: Enable click-to-edit mode immediately
|
|
17
|
+
* - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
|
|
18
|
+
* - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
|
|
19
|
+
* - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <ContentLink enableClickToEdit={true} />
|
|
24
|
+
* <ContentLink enableClickToEdit={{ scrollToNearestTarget: true }} />
|
|
25
|
+
* <ContentLink enableClickToEdit={{ hoverOnly: true, scrollToNearestTarget: true }} />
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
enableClickToEdit?: boolean | ClickToEditOptions;
|
|
14
29
|
/** Whether to strip stega encoding from text nodes after stamping. */
|
|
15
30
|
stripStega?: boolean;
|
|
16
31
|
};
|
|
@@ -29,11 +29,36 @@ export type UseContentLinkOptions = {
|
|
|
29
29
|
root?: React.RefObject<HTMLElement>;
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
+
export interface ClickToEditOptions {
|
|
33
|
+
/**
|
|
34
|
+
* Whether to automatically scroll to the nearest editable element if none
|
|
35
|
+
* is currently visible in the viewport when click-to-edit mode is enabled.
|
|
36
|
+
*
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
scrollToNearestTarget?: boolean;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* Only enable click-to-edit on devices that support hover (i.e., non-touch devices).
|
|
43
|
+
* Uses `window.matchMedia('(hover: hover)')` to detect hover capability.
|
|
44
|
+
*
|
|
45
|
+
* This is useful to avoid showing overlays on touch devices where they may
|
|
46
|
+
* interfere with normal scrolling and tapping behavior.
|
|
47
|
+
*
|
|
48
|
+
* When set to `true` on a touch-only device, click-to-edit will not be
|
|
49
|
+
* automatically enabled, but users can still toggle it manually using
|
|
50
|
+
* the Alt/Option key.
|
|
51
|
+
*
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
hoverOnly?: boolean;
|
|
55
|
+
}
|
|
56
|
+
|
|
32
57
|
export type UseContentLinkResult = {
|
|
33
58
|
/** The controller instance, or null if disabled */
|
|
34
59
|
controller: Controller | null;
|
|
35
60
|
/** Enable click-to-edit overlays */
|
|
36
|
-
enableClickToEdit: (options?:
|
|
61
|
+
enableClickToEdit: (options?: ClickToEditOptions) => void;
|
|
37
62
|
/** Disable click-to-edit overlays */
|
|
38
63
|
disableClickToEdit: () => void;
|
|
39
64
|
/** Check if click-to-edit is enabled */
|
|
@@ -118,12 +143,27 @@ export function useContentLink(
|
|
|
118
143
|
}, [enabled, root]);
|
|
119
144
|
|
|
120
145
|
// Stable method references that call through to the controller
|
|
121
|
-
const enableClickToEdit = useCallback(
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
146
|
+
const enableClickToEdit = useCallback((opts?: ClickToEditOptions) => {
|
|
147
|
+
// Never enable click-to-edit inside an iframe
|
|
148
|
+
if (typeof window !== 'undefined' && window.parent !== window) {
|
|
149
|
+
return;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// If hoverOnly is true, check if the device supports hover
|
|
153
|
+
if (opts?.hoverOnly) {
|
|
154
|
+
const supportsHover =
|
|
155
|
+
typeof window !== 'undefined' &&
|
|
156
|
+
window.matchMedia('(hover: hover)').matches;
|
|
157
|
+
if (!supportsHover) {
|
|
158
|
+
// Don't enable click-to-edit on touch-only devices
|
|
159
|
+
return;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
controllerRef.current?.enableClickToEdit(
|
|
164
|
+
opts?.scrollToNearestTarget ? { scrollToNearestTarget: true } : undefined,
|
|
165
|
+
);
|
|
166
|
+
}, []);
|
|
127
167
|
|
|
128
168
|
const disableClickToEdit = useCallback(() => {
|
|
129
169
|
controllerRef.current?.disableClickToEdit();
|