react-datocms 8.0.0-0 → 8.0.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 +35 -15
- package/dist/cjs/ContentLink/index.js +104 -0
- package/dist/cjs/ContentLink/index.js.map +1 -0
- package/dist/cjs/Image/index.js +3 -3
- package/dist/cjs/Image/index.js.map +1 -1
- package/dist/cjs/Image/utils.js +3 -3
- package/dist/cjs/Image/utils.js.map +1 -1
- package/dist/cjs/SRCImage/index.js +3 -4
- package/dist/cjs/SRCImage/index.js.map +1 -1
- package/dist/cjs/SRCImage/utils.js +4 -4
- package/dist/cjs/SRCImage/utils.js.map +1 -1
- package/dist/cjs/Seo/nextUtils.js +1 -2
- package/dist/cjs/Seo/nextUtils.js.map +1 -1
- package/dist/cjs/Seo/remixUtils.js +2 -3
- package/dist/cjs/Seo/remixUtils.js.map +1 -1
- package/dist/cjs/Seo/renderMetaTags.js +1 -2
- package/dist/cjs/Seo/renderMetaTags.js.map +1 -1
- package/dist/cjs/Seo/renderMetaTagsToString.js +1 -2
- package/dist/cjs/Seo/renderMetaTagsToString.js.map +1 -1
- package/dist/cjs/StructuredText/index.js +34 -11
- package/dist/cjs/StructuredText/index.js.map +1 -1
- package/dist/cjs/VideoPlayer/index.js +45 -14
- package/dist/cjs/VideoPlayer/index.js.map +1 -1
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/useContentLink/index.js +111 -0
- package/dist/cjs/useContentLink/index.js.map +1 -0
- package/dist/cjs/useQuerySubscription/index.js +1 -2
- package/dist/cjs/useQuerySubscription/index.js.map +1 -1
- package/dist/cjs/useSiteSearch/index.js +3 -10
- package/dist/cjs/useSiteSearch/index.js.map +1 -1
- package/dist/esm/ContentLink/index.js +101 -0
- package/dist/esm/ContentLink/index.js.map +1 -0
- package/dist/esm/Image/index.js +3 -3
- package/dist/esm/Image/index.js.map +1 -1
- package/dist/esm/SRCImage/index.js +2 -2
- package/dist/esm/SRCImage/index.js.map +1 -1
- package/dist/esm/StructuredText/index.js +22 -4
- package/dist/esm/StructuredText/index.js.map +1 -1
- package/dist/esm/VideoPlayer/index.js +30 -9
- package/dist/esm/VideoPlayer/index.js.map +1 -1
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/useContentLink/index.js +105 -0
- package/dist/esm/useContentLink/index.js.map +1 -0
- package/dist/esm/useSiteSearch/index.js +2 -8
- package/dist/esm/useSiteSearch/index.js.map +1 -1
- package/dist/types/ContentLink/index.d.ts +88 -0
- package/dist/types/Image/index.d.ts +8 -1
- package/dist/types/Image/utils.d.ts +0 -1
- package/dist/types/SRCImage/index.d.ts +10 -3
- package/dist/types/SRCImage/utils.d.ts +1 -2
- package/dist/types/Seo/renderMetaTags.d.ts +0 -1
- package/dist/types/StructuredText/index.d.ts +20 -9
- package/dist/types/VideoPlayer/index.d.ts +6 -6
- package/dist/types/index.d.ts +2 -0
- package/dist/types/useContentLink/index.d.ts +91 -0
- package/dist/types/useSiteSearch/index.d.ts +3 -1
- package/dist/types/useVideoPlayer/index.d.ts +2 -2
- package/package.json +32 -17
- package/src/ContentLink/index.tsx +134 -0
- package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +20 -0
- package/src/Image/index.tsx +11 -1
- package/src/SRCImage/__tests__/__snapshots__/index.test.tsx.snap +7 -0
- package/src/SRCImage/index.tsx +11 -2
- package/src/SRCImage/utils.tsx +1 -1
- package/src/StructuredText/__tests__/__snapshots__/index.test.tsx.snap +17 -0
- package/src/StructuredText/__tests__/index.test.tsx +27 -1
- package/src/StructuredText/index.tsx +80 -15
- package/src/VideoPlayer/index.tsx +43 -17
- package/src/index.ts +3 -0
- package/src/useContentLink/index.ts +187 -0
- package/src/useSiteSearch/index.tsx +6 -5
- package/src/useVideoPlayer/index.ts +2 -2
- package/dist/cjs/VideoPlayer/lazy.js +0 -35
- package/dist/cjs/VideoPlayer/lazy.js.map +0 -1
- package/dist/esm/VideoPlayer/lazy.js +0 -9
- package/dist/esm/VideoPlayer/lazy.js.map +0 -1
- package/dist/types/VideoPlayer/lazy.d.ts +0 -6
- package/src/VideoPlayer/lazy.tsx +0 -26
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
3
|
var t = {};
|
|
4
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -17,22 +17,43 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
17
17
|
// The React player written by MUX is an adapter for a web component.
|
|
18
18
|
//
|
|
19
19
|
// [1]: https://www.mux.com/player
|
|
20
|
-
import React, { forwardRef } from
|
|
20
|
+
import React, { forwardRef } from 'react';
|
|
21
21
|
// React MUX player is made available in two flavours: eager and lazy loaded. We
|
|
22
|
-
// choose to use the
|
|
23
|
-
//
|
|
24
|
-
|
|
22
|
+
// choose to use the lazy version to avoid loading the web component uselessly.
|
|
23
|
+
// MUX player lazy version loads internally the eager version using
|
|
24
|
+
// `React.lazy()`.
|
|
25
|
+
import MuxPlayer from '@mux/mux-player-react/lazy';
|
|
25
26
|
// The core of this component is the `useVideoPlayer` hook: it takes
|
|
26
27
|
// data from DatoCMS GraphQL API and returns props as expected by the
|
|
27
28
|
// `<MuxPlayer />` component.
|
|
28
|
-
import {
|
|
29
|
+
import { decodeStega } from '@datocms/content-link';
|
|
30
|
+
import { useVideoPlayer } from '../useVideoPlayer/index.js';
|
|
29
31
|
export const VideoPlayer = forwardRef((props, ref) => {
|
|
30
|
-
const { data = {}, disableCookies = true, preload =
|
|
32
|
+
const { data = {}, disableCookies = true, disableTracking = true, preload = 'metadata', style: styleFromProps } = props, rest = __rest(props, ["data", "disableCookies", "disableTracking", "preload", "style"]);
|
|
31
33
|
const { title, playbackId, style: styleFromHook, placeholder, } = useVideoPlayer({
|
|
32
34
|
data,
|
|
33
35
|
});
|
|
34
36
|
const style = Object.assign(Object.assign({}, styleFromHook), styleFromProps);
|
|
35
|
-
|
|
37
|
+
// Extract alt for DatoCMS Content Link integration
|
|
38
|
+
// See: https://github.com/datocms/content-link
|
|
39
|
+
const { alt } = data;
|
|
40
|
+
// Only include data-datocms-content-link-source if alt contains stega encoding
|
|
41
|
+
const contentLinkSource = alt && decodeStega(alt) ? alt : undefined;
|
|
42
|
+
// Note: Custom data-* attributes can be passed to the underlying <mux-player> web component
|
|
43
|
+
// in two ways:
|
|
44
|
+
//
|
|
45
|
+
// 1. Kebab-case (passes through as-is):
|
|
46
|
+
// <VideoPlayer data-player-id="my-player" />
|
|
47
|
+
//
|
|
48
|
+
// 2. CamelCase (auto-converts to kebab-case):
|
|
49
|
+
// <VideoPlayer dataPlayerId="my-player" />
|
|
50
|
+
//
|
|
51
|
+
// Both result in: <mux-player data-player-id="my-player">
|
|
52
|
+
//
|
|
53
|
+
// The MuxPlayer React component transforms camelCase props to kebab-case to match
|
|
54
|
+
// web component attribute conventions. Any props not explicitly handled by VideoPlayer
|
|
55
|
+
// are spread via {...rest} and forwarded to MuxPlayer, which then applies them to
|
|
56
|
+
// the underlying <mux-player> element.
|
|
57
|
+
return (React.createElement(MuxPlayer, Object.assign({ ref: ref, streamType: "on-demand", preload: preload, title: title, disableCookies: disableCookies, disableTracking: disableTracking, playbackId: playbackId, style: style, placeholder: placeholder, "data-datocms-content-link-source": contentLinkSource }, rest)));
|
|
36
58
|
});
|
|
37
|
-
export default VideoPlayer;
|
|
38
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAO1C,gFAAgF;AAChF,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VideoPlayer/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;AAEb,gFAAgF;AAChF,8EAA8E;AAC9E,2EAA2E;AAC3E,EAAE;AACF,qEAAqE;AACrE,EAAE;AACF,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAO1C,gFAAgF;AAChF,+EAA+E;AAC/E,mEAAmE;AACnE,kBAAkB;AAElB,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,oEAAoE;AACpE,qEAAqE;AACrE,6BAA6B;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAuC5D,MAAM,CAAC,MAAM,WAAW,GAEY,UAAU,CAG5C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,MAAM,EACJ,IAAI,GAAG,EAAE,EACT,cAAc,GAAG,IAAI,EACrB,eAAe,GAAG,IAAI,EACtB,OAAO,GAAG,UAAU,EACpB,KAAK,EAAE,cAAc,KAEnB,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,iEAOL,CAAQ,CAAC;IAEV,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EAAE,aAAa,EACpB,WAAW,GACZ,GAAG,cAAc,CAAC;QACjB,IAAI;KACL,CAAC,CAAC;IAEH,MAAM,KAAK,mCACN,aAAa,GACb,cAAc,CAClB,CAAC;IAEF,mDAAmD;IACnD,+CAA+C;IAC/C,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAErB,+EAA+E;IAC/E,MAAM,iBAAiB,GAAG,GAAG,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,4FAA4F;IAC5F,eAAe;IACf,EAAE;IACF,wCAAwC;IACxC,gDAAgD;IAChD,EAAE;IACF,8CAA8C;IAC9C,8CAA8C;IAC9C,EAAE;IACF,0DAA0D;IAC1D,EAAE;IACF,kFAAkF;IAClF,uFAAuF;IACvF,kFAAkF;IAClF,uCAAuC;IAEvC,OAAO,CACL,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,WAAW,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,sCACU,iBAAiB,IAC/C,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -6,4 +6,6 @@ export * from './VideoPlayer/index.js';
|
|
|
6
6
|
export * from './useQuerySubscription/index.js';
|
|
7
7
|
export * from './useSiteSearch/index.js';
|
|
8
8
|
export * from './useVideoPlayer/index.js';
|
|
9
|
+
export * from './ContentLink/index.js';
|
|
10
|
+
export * from './useContentLink/index.js';
|
|
9
11
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AAEvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AAEvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createController } from '@datocms/content-link';
|
|
3
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
4
|
+
// Re-export types and utilities from @datocms/content-link for convenience
|
|
5
|
+
export { decodeStega, stripStega } from '@datocms/content-link';
|
|
6
|
+
/**
|
|
7
|
+
* Hook to control the ContentLink controller for Visual Editing.
|
|
8
|
+
*
|
|
9
|
+
* This hook provides low-level access to the @datocms/content-link controller,
|
|
10
|
+
* allowing you to programmatically control click-to-edit overlays and
|
|
11
|
+
* communicate with the DatoCMS Web Previews plugin.
|
|
12
|
+
*
|
|
13
|
+
* @param options - Configuration options for the controller
|
|
14
|
+
* @returns An object containing the controller instance and its methods
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* import { useContentLink } from 'react-datocms';
|
|
19
|
+
*
|
|
20
|
+
* function MyComponent() {
|
|
21
|
+
* const { enableClickToEdit, flashAll } = useContentLink({
|
|
22
|
+
* onNavigateTo: (path) => router.push(path),
|
|
23
|
+
* });
|
|
24
|
+
*
|
|
25
|
+
* return (
|
|
26
|
+
* <button onClick={() => enableClickToEdit({ scrollToNearestTarget: true })}>
|
|
27
|
+
* Enable Editing
|
|
28
|
+
* </button>
|
|
29
|
+
* );
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export function useContentLink(options = {}) {
|
|
34
|
+
const { enabled = true, onNavigateTo, root } = options;
|
|
35
|
+
const controllerRef = useRef(null);
|
|
36
|
+
// Store the callback in a ref to avoid recreating the controller when it changes
|
|
37
|
+
const onNavigateToRef = useRef(onNavigateTo);
|
|
38
|
+
// Keep the callback ref up to date
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
onNavigateToRef.current = onNavigateTo;
|
|
41
|
+
}, [onNavigateTo]);
|
|
42
|
+
// Create/dispose controller based on enabled flag and root only
|
|
43
|
+
// The onNavigateTo callback is accessed via ref, so changes don't trigger recreation
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
// Check if controller is disabled
|
|
46
|
+
const isEnabled = enabled === true || (typeof enabled === 'object' && enabled !== null);
|
|
47
|
+
if (!isEnabled) {
|
|
48
|
+
if (controllerRef.current) {
|
|
49
|
+
controllerRef.current.dispose();
|
|
50
|
+
controllerRef.current = null;
|
|
51
|
+
}
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
// Extract stripStega option if enabled is an object
|
|
55
|
+
const stripStega = typeof enabled === 'object' ? enabled.stripStega : false;
|
|
56
|
+
const controller = createController({
|
|
57
|
+
onNavigateTo: (path) => { var _a; return (_a = onNavigateToRef.current) === null || _a === void 0 ? void 0 : _a.call(onNavigateToRef, path); },
|
|
58
|
+
root: (root === null || root === void 0 ? void 0 : root.current) || undefined,
|
|
59
|
+
stripStega,
|
|
60
|
+
});
|
|
61
|
+
controllerRef.current = controller;
|
|
62
|
+
return () => {
|
|
63
|
+
controller.dispose();
|
|
64
|
+
controllerRef.current = null;
|
|
65
|
+
};
|
|
66
|
+
}, [enabled, root]);
|
|
67
|
+
// Stable method references that call through to the controller
|
|
68
|
+
const enableClickToEdit = useCallback((opts) => {
|
|
69
|
+
var _a;
|
|
70
|
+
// If hoverOnly is true, check if the device supports hover
|
|
71
|
+
if ((opts === null || opts === void 0 ? void 0 : opts.hoverOnly) &&
|
|
72
|
+
(typeof window === 'undefined' ||
|
|
73
|
+
!window.matchMedia('(hover: hover)').matches)) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
(_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.enableClickToEdit((opts === null || opts === void 0 ? void 0 : opts.scrollToNearestTarget)
|
|
77
|
+
? { scrollToNearestTarget: opts.scrollToNearestTarget }
|
|
78
|
+
: undefined);
|
|
79
|
+
}, []);
|
|
80
|
+
const disableClickToEdit = useCallback(() => {
|
|
81
|
+
var _a;
|
|
82
|
+
(_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.disableClickToEdit();
|
|
83
|
+
}, []);
|
|
84
|
+
const isClickToEditEnabled = useCallback(() => {
|
|
85
|
+
var _a, _b;
|
|
86
|
+
return (_b = (_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.isClickToEditEnabled()) !== null && _b !== void 0 ? _b : false;
|
|
87
|
+
}, []);
|
|
88
|
+
const flashAll = useCallback((scrollToNearestTarget) => {
|
|
89
|
+
var _a;
|
|
90
|
+
(_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.flashAll(scrollToNearestTarget);
|
|
91
|
+
}, []);
|
|
92
|
+
const setCurrentPath = useCallback((path) => {
|
|
93
|
+
var _a;
|
|
94
|
+
(_a = controllerRef.current) === null || _a === void 0 ? void 0 : _a.setCurrentPath(path);
|
|
95
|
+
}, []);
|
|
96
|
+
return {
|
|
97
|
+
controller: controllerRef.current,
|
|
98
|
+
enableClickToEdit,
|
|
99
|
+
disableClickToEdit,
|
|
100
|
+
isClickToEditEnabled,
|
|
101
|
+
flashAll,
|
|
102
|
+
setCurrentPath,
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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;AAEvD,2EAA2E;AAC3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAiEhE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,cAAc,CAC5B,UAAiC,EAAE;IAEnC,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;IAEvD,MAAM,aAAa,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACtD,iFAAiF;IACjF,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAE7C,mCAAmC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,GAAG,YAAY,CAAC;IACzC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,gEAAgE;IAChE,qFAAqF;IACrF,SAAS,CAAC,GAAG,EAAE;QACb,kCAAkC;QAClC,MAAM,SAAS,GACb,OAAO,KAAK,IAAI,IAAI,CAAC,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,IAAI,CAAC,CAAC;QAExE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC1B,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAChC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/B,CAAC;YACD,OAAO;QACT,CAAC;QAED,oDAAoD;QACpD,MAAM,UAAU,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;QAE5E,MAAM,UAAU,GAAG,gBAAgB,CAAC;YAClC,YAAY,EAAE,CAAC,IAAY,EAAE,EAAE,WAAC,OAAA,MAAA,eAAe,CAAC,OAAO,gEAAG,IAAI,CAAC,CAAA,EAAA;YAC/D,IAAI,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,KAAI,SAAS;YAChC,UAAU;SACX,CAAC,CAAC;QAEH,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC;QAEnC,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,OAAO,EAAE,CAAC;YACrB,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,+DAA+D;IAC/D,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,IAAyB,EAAE,EAAE;;QAClE,2DAA2D;QAC3D,IACE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS;YACf,CAAC,OAAO,MAAM,KAAK,WAAW;gBAC5B,CAAC,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,EAC/C,CAAC;YACD,OAAO;QACT,CAAC;QAED,MAAA,aAAa,CAAC,OAAO,0CAAE,iBAAiB,CACtC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB;YACzB,CAAC,CAAC,EAAE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EAAE;YACvD,CAAC,CAAC,SAAS,CACd,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;;QAC1C,MAAA,aAAa,CAAC,OAAO,0CAAE,kBAAkB,EAAE,CAAC;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;;QAC5C,OAAO,MAAA,MAAA,aAAa,CAAC,OAAO,0CAAE,oBAAoB,EAAE,mCAAI,KAAK,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,qBAA+B,EAAE,EAAE;;QAC/D,MAAA,aAAa,CAAC,OAAO,0CAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;;QAClD,MAAA,aAAa,CAAC,OAAO,0CAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,UAAU,EAAE,aAAa,CAAC,OAAO;QACjC,iBAAiB;QACjB,kBAAkB;QAClB,oBAAoB;QACpB,QAAQ;QACR,cAAc;KACf,CAAC;AACJ,CAAC"}
|
|
@@ -37,19 +37,12 @@ export function useSiteSearch(config) {
|
|
|
37
37
|
}
|
|
38
38
|
setResponse(undefined);
|
|
39
39
|
const request = {
|
|
40
|
-
filter: {
|
|
41
|
-
query: state.query,
|
|
42
|
-
locale: state.locale,
|
|
43
|
-
build_trigger_id: config.buildTriggerId,
|
|
44
|
-
},
|
|
40
|
+
filter: Object.assign({ query: state.query, locale: state.locale, build_trigger_id: config.buildTriggerId, search_index_id: config.searchIndexId }, (config.fuzzySearch === true ? { fuzzy: true } : {})),
|
|
45
41
|
page: {
|
|
46
42
|
limit: resultsPerPage,
|
|
47
43
|
offset: resultsPerPage * state.page,
|
|
48
44
|
},
|
|
49
45
|
};
|
|
50
|
-
if (config.fuzzySearch) {
|
|
51
|
-
request.fuzzy = 'true';
|
|
52
|
-
}
|
|
53
46
|
const response = yield config.client.searchResults.rawList(request);
|
|
54
47
|
if (!isCancelled) {
|
|
55
48
|
setResponse(response);
|
|
@@ -75,6 +68,7 @@ export function useSiteSearch(config) {
|
|
|
75
68
|
resultsPerPage,
|
|
76
69
|
state,
|
|
77
70
|
config.buildTriggerId,
|
|
71
|
+
config.searchIndexId,
|
|
78
72
|
config.fuzzySearch,
|
|
79
73
|
config.client.config.apiToken,
|
|
80
74
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useSiteSearch/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;AAEb,yDAAyD;AACzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useSiteSearch/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { type ClickToEditOptions, type UseContentLinkOptions } from '../useContentLink/index.js';
|
|
2
|
+
export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
|
|
3
|
+
/** Current pathname to sync with Web Previews plugin */
|
|
4
|
+
currentPath?: string;
|
|
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;
|
|
21
|
+
/** Whether to strip stega encoding from text nodes after stamping. */
|
|
22
|
+
stripStega?: boolean;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* ContentLink component for Visual Editing with DatoCMS.
|
|
26
|
+
*
|
|
27
|
+
* This component enables Visual Editing by:
|
|
28
|
+
* - Detecting stega-encoded metadata in content and creating click-to-edit overlays
|
|
29
|
+
* - Integrating with DatoCMS Web Previews plugin for in-editor editing
|
|
30
|
+
* - Supporting Alt/Option key for temporary click-to-edit mode
|
|
31
|
+
* - Providing bidirectional communication between preview and DatoCMS editor
|
|
32
|
+
*
|
|
33
|
+
* ## Basic Usage (Standalone Website with Click-to-Edit)
|
|
34
|
+
*
|
|
35
|
+
* For standalone websites with click-to-edit overlays:
|
|
36
|
+
*
|
|
37
|
+
* ```tsx
|
|
38
|
+
* import { ContentLink } from 'react-datocms';
|
|
39
|
+
*
|
|
40
|
+
* function App() {
|
|
41
|
+
* return (
|
|
42
|
+
* <>
|
|
43
|
+
* <ContentLink enableClickToEdit={true} />
|
|
44
|
+
* {/* Your content with stega-encoded data *\/}
|
|
45
|
+
* </>
|
|
46
|
+
* );
|
|
47
|
+
* }
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* ## Web Previews Plugin Integration (Next.js Example)
|
|
51
|
+
*
|
|
52
|
+
* For integration with DatoCMS Web Previews plugin, provide navigation callbacks:
|
|
53
|
+
*
|
|
54
|
+
* ```tsx
|
|
55
|
+
* 'use client';
|
|
56
|
+
* import { ContentLink } from 'react-datocms';
|
|
57
|
+
* import { useRouter, usePathname } from 'next/navigation';
|
|
58
|
+
*
|
|
59
|
+
* export function VisualEditing() {
|
|
60
|
+
* const router = useRouter();
|
|
61
|
+
* const pathname = usePathname();
|
|
62
|
+
*
|
|
63
|
+
* return (
|
|
64
|
+
* <ContentLink
|
|
65
|
+
* onNavigateTo={(path) => router.push(path)}
|
|
66
|
+
* currentPath={pathname}
|
|
67
|
+
* />
|
|
68
|
+
* );
|
|
69
|
+
* }
|
|
70
|
+
* ```
|
|
71
|
+
*
|
|
72
|
+
* ## How Visual Editing Works
|
|
73
|
+
*
|
|
74
|
+
* 1. **Fetch content with stega encoding**: Use the `contentLink` and `baseEditingUrl` options
|
|
75
|
+
* when fetching content from DatoCMS to embed editing metadata.
|
|
76
|
+
*
|
|
77
|
+
* 2. **Add ContentLink component**: Place this component in your app to scan for encoded
|
|
78
|
+
* content and create overlays.
|
|
79
|
+
*
|
|
80
|
+
* 3. **Enable editing**: Either set `enableClickToEdit={true}` prop or hold Alt/Option key
|
|
81
|
+
* for temporary editing mode.
|
|
82
|
+
*
|
|
83
|
+
* 4. **Click to edit**: Click on any content to open the DatoCMS editor at that field.
|
|
84
|
+
*
|
|
85
|
+
* @param props - Configuration props for ContentLink
|
|
86
|
+
* @returns null - This component has no visual output
|
|
87
|
+
*/
|
|
88
|
+
export declare function ContentLink(props: ContentLinkProps): null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { HTMLAttributeReferrerPolicy } from 'react';
|
|
2
2
|
import { type CSSProperties } from 'react';
|
|
3
3
|
type Maybe<T> = T | null;
|
|
4
4
|
export type ResponsiveImageType = {
|
|
@@ -91,6 +91,13 @@ export type ImagePropTypes = {
|
|
|
91
91
|
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
|
|
92
92
|
**/
|
|
93
93
|
srcSetCandidates?: number[];
|
|
94
|
+
/**
|
|
95
|
+
* Defines which referrer is sent when fetching the image
|
|
96
|
+
* Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
|
|
97
|
+
*
|
|
98
|
+
* Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
|
|
99
|
+
**/
|
|
100
|
+
referrerPolicy?: HTMLAttributeReferrerPolicy;
|
|
94
101
|
};
|
|
95
102
|
export declare const Image: React.ForwardRefExoticComponent<ImagePropTypes & React.RefAttributes<HTMLDivElement>>;
|
|
96
103
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ResponsiveImageType } from '../Image';
|
|
1
|
+
import React, { HTMLAttributeReferrerPolicy } from 'react';
|
|
2
|
+
import type { ResponsiveImageType } from '../Image/index.js';
|
|
3
3
|
export type SRCImagePropTypes = {
|
|
4
4
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
|
|
5
5
|
data: ResponsiveImageType;
|
|
@@ -33,5 +33,12 @@ export type SRCImagePropTypes = {
|
|
|
33
33
|
* Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
|
|
34
34
|
**/
|
|
35
35
|
srcSetCandidates?: number[];
|
|
36
|
+
/**
|
|
37
|
+
* Defines which referrer is sent when fetching the image
|
|
38
|
+
* Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
|
|
39
|
+
*
|
|
40
|
+
* Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
|
|
41
|
+
**/
|
|
42
|
+
referrerPolicy?: HTMLAttributeReferrerPolicy;
|
|
36
43
|
};
|
|
37
|
-
export declare function SRCImage({ pictureClassName, pictureStyle, imgClassName, imgStyle, data, usePlaceholder, priority, sizes, srcSetCandidates, }: SRCImagePropTypes): JSX.Element;
|
|
44
|
+
export declare function SRCImage({ pictureClassName, pictureStyle, imgClassName, imgStyle, data, usePlaceholder, priority, sizes, srcSetCandidates, referrerPolicy, }: SRCImagePropTypes): JSX.Element;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import type { ResponsiveImageType } from '../Image';
|
|
1
|
+
import type { ResponsiveImageType } from '../Image/index.js';
|
|
3
2
|
export declare function priorityProp(fetchPriority?: string): Record<string, string | undefined>;
|
|
4
3
|
export declare const buildSrcSetFromSrc: (src: string | null | undefined, width: number | undefined, candidateMultipliers: number[]) => string | undefined;
|
|
5
4
|
export declare function buildWebpSource(data: ResponsiveImageType, sizes: HTMLImageElement['sizes'] | undefined): "" | JSX.Element | null | undefined;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { type RenderMarkRule, type TransformMetaFn, type TransformedMeta, renderMarkRule, renderNodeRule } from 'datocms-structured-text-generic-html-renderer';
|
|
2
|
-
import { type Node, RenderError, type RenderResult, type RenderRule, type Document as StructuredTextDocument, type StructuredText as StructuredTextGraphQlResponse, type Record as StructuredTextGraphQlResponseRecord, type TypesafeStructuredText as TypesafeStructuredTextGraphQlResponse } from 'datocms-structured-text-utils';
|
|
2
|
+
import { type CdaStructuredTextRecord, type CdaStructuredTextValue, type Node, RenderError, type RenderResult, type RenderRule, type Document as StructuredTextDocument, type StructuredText as StructuredTextGraphQlResponse, type Record as StructuredTextGraphQlResponseRecord, type TypesafeCdaStructuredTextValue, type TypesafeStructuredText as TypesafeStructuredTextGraphQlResponse } from 'datocms-structured-text-utils';
|
|
3
3
|
import { type ReactElement } from 'react';
|
|
4
4
|
export { renderNodeRule, renderMarkRule, RenderError };
|
|
5
|
-
export {
|
|
6
|
-
export type { StructuredTextGraphQlResponse, TypesafeStructuredTextGraphQlResponse, StructuredTextDocument, StructuredTextGraphQlResponseRecord, };
|
|
5
|
+
export type { StructuredTextDocument, CdaStructuredTextValue, TypesafeCdaStructuredTextValue, CdaStructuredTextRecord, };
|
|
7
6
|
type AdapterReturn = ReactElement | string | null;
|
|
8
7
|
export declare const defaultAdapter: {
|
|
9
8
|
renderNode: (...args: any) => AdapterReturn;
|
|
@@ -25,19 +24,21 @@ export type RenderRecordLinkContext<R extends StructuredTextGraphQlResponseRecor
|
|
|
25
24
|
export type RenderBlockContext<R extends StructuredTextGraphQlResponseRecord> = {
|
|
26
25
|
record: R;
|
|
27
26
|
};
|
|
28
|
-
export type StructuredTextPropTypes<
|
|
27
|
+
export type StructuredTextPropTypes<BlockRecord extends StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord, LinkRecord extends StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord, InlineBlockRecord extends StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord> = {
|
|
29
28
|
/** The actual field value you get from DatoCMS **/
|
|
30
|
-
data: StructuredTextGraphQlResponse<
|
|
29
|
+
data: StructuredTextGraphQlResponse<BlockRecord, LinkRecord, InlineBlockRecord> | StructuredTextDocument | Node | null | undefined;
|
|
31
30
|
/** A set of additional rules to convert nodes to JSX **/
|
|
32
31
|
customNodeRules?: RenderRule<H, T, F>[];
|
|
33
32
|
/** A set of additional rules to convert marks to JSX **/
|
|
34
33
|
customMarkRules?: RenderMarkRule<H, T, F>[];
|
|
35
34
|
/** Fuction that converts an 'inlineItem' node into React **/
|
|
36
|
-
renderInlineRecord?: (context: RenderInlineRecordContext<
|
|
35
|
+
renderInlineRecord?: (context: RenderInlineRecordContext<LinkRecord>) => ReactElement | null;
|
|
37
36
|
/** Fuction that converts an 'itemLink' node into React **/
|
|
38
|
-
renderLinkToRecord?: (context: RenderRecordLinkContext<
|
|
37
|
+
renderLinkToRecord?: (context: RenderRecordLinkContext<LinkRecord>) => ReactElement | null;
|
|
39
38
|
/** Fuction that converts a 'block' node into React **/
|
|
40
|
-
renderBlock?: (context: RenderBlockContext<
|
|
39
|
+
renderBlock?: (context: RenderBlockContext<BlockRecord>) => ReactElement | null;
|
|
40
|
+
/** Fuction that converts an 'inlineBlock' node into React **/
|
|
41
|
+
renderInlineBlock?: (context: RenderBlockContext<InlineBlockRecord>) => ReactElement | null;
|
|
41
42
|
/** Function that converts 'link' and 'itemLink' `meta` into HTML props */
|
|
42
43
|
metaTransformer?: TransformMetaFn;
|
|
43
44
|
/** Fuction that converts a simple string text into React **/
|
|
@@ -49,4 +50,14 @@ export type StructuredTextPropTypes<R1 extends StructuredTextGraphQlResponseReco
|
|
|
49
50
|
/** @deprecated use customNodeRules **/
|
|
50
51
|
customRules?: RenderRule<H, T, F>[];
|
|
51
52
|
};
|
|
52
|
-
export declare function StructuredText<
|
|
53
|
+
export declare function StructuredText<BlockRecord extends StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord, LinkRecord extends StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord, InlineBlockRecord extends StructuredTextGraphQlResponseRecord = StructuredTextGraphQlResponseRecord>({ data, renderInlineRecord, renderLinkToRecord, renderBlock, renderInlineBlock, renderText, renderNode, renderFragment, customMarkRules, customRules, customNodeRules, metaTransformer, }: StructuredTextPropTypes<BlockRecord, LinkRecord, InlineBlockRecord>): ReactElement | null;
|
|
54
|
+
/**
|
|
55
|
+
* @deprecated Use renderNodeRule instead
|
|
56
|
+
*/
|
|
57
|
+
export { renderNodeRule as renderRule };
|
|
58
|
+
/** @deprecated Use CdaStructuredTextValue */
|
|
59
|
+
export type { StructuredTextGraphQlResponse };
|
|
60
|
+
/** @deprecated Use TypesafeCdaStructuredTextValue */
|
|
61
|
+
export type { TypesafeStructuredTextGraphQlResponse };
|
|
62
|
+
/** @deprecated Use CdaStructuredTextRecord */
|
|
63
|
+
export type { StructuredTextGraphQlResponseRecord };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import type { MuxPlayerProps } from "@mux/mux-player-react";
|
|
1
|
+
import type { MuxPlayerProps } from '@mux/mux-player-react';
|
|
2
|
+
import MuxPlayer from '@mux/mux-player-react/lazy';
|
|
4
3
|
type Maybe<T> = T | null;
|
|
5
4
|
type Possibly<T> = Maybe<T> | undefined;
|
|
6
5
|
export type Video = {
|
|
7
6
|
/** Title attribute (`title`) for the video */
|
|
8
7
|
title?: Possibly<string>;
|
|
8
|
+
/** Alt attribute used for content link integration (passed as data-datocms-content-link-source) */
|
|
9
|
+
alt?: Possibly<string>;
|
|
9
10
|
/** The height of the video */
|
|
10
11
|
height?: Possibly<number>;
|
|
11
12
|
/** The width of the video */
|
|
@@ -23,6 +24,5 @@ export type VideoPlayerProps = MuxPlayerProps & {
|
|
|
23
24
|
/** The actual response you get from a DatoCMS `video` GraphQL query */
|
|
24
25
|
data?: Video;
|
|
25
26
|
};
|
|
26
|
-
|
|
27
|
-
export
|
|
28
|
-
export default VideoPlayer;
|
|
27
|
+
export declare const VideoPlayer: (props: VideoPlayerProps) => ReturnType<typeof MuxPlayer>;
|
|
28
|
+
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { type Controller } from '@datocms/content-link';
|
|
2
|
+
export { decodeStega, stripStega } from '@datocms/content-link';
|
|
3
|
+
export type { Controller } from '@datocms/content-link';
|
|
4
|
+
export type UseContentLinkOptions = {
|
|
5
|
+
/**
|
|
6
|
+
* Whether the controller is enabled, or an options object.
|
|
7
|
+
* - Pass `true` (default): Enables the controller with stega encoding preserved (allows controller recreation)
|
|
8
|
+
* - Pass `false`: Disables the controller completely
|
|
9
|
+
* - Pass `{ stripStega: true }`: Enables the controller and strips stega encoding after stamping
|
|
10
|
+
*
|
|
11
|
+
* When stripStega is false (default): Stega encoding remains in the DOM, allowing controllers
|
|
12
|
+
* to be disposed and recreated on the same page. The invisible characters don't affect display
|
|
13
|
+
* but preserve the source of truth.
|
|
14
|
+
*
|
|
15
|
+
* When stripStega is true: Stega encoding is permanently removed from text nodes, providing
|
|
16
|
+
* clean textContent for programmatic access. However, recreating a controller on the same page
|
|
17
|
+
* won't detect elements since the encoding is lost.
|
|
18
|
+
*/
|
|
19
|
+
enabled?: boolean | {
|
|
20
|
+
stripStega: boolean;
|
|
21
|
+
};
|
|
22
|
+
/** Callback when Web Previews plugin requests navigation */
|
|
23
|
+
onNavigateTo?: (path: string) => void;
|
|
24
|
+
/** Ref to limit scanning to this root instead of document */
|
|
25
|
+
root?: React.RefObject<HTMLElement>;
|
|
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
|
+
}
|
|
50
|
+
export type UseContentLinkResult = {
|
|
51
|
+
/** The controller instance, or null if disabled */
|
|
52
|
+
controller: Controller | null;
|
|
53
|
+
/** Enable click-to-edit overlays */
|
|
54
|
+
enableClickToEdit: (options?: ClickToEditOptions) => void;
|
|
55
|
+
/** Disable click-to-edit overlays */
|
|
56
|
+
disableClickToEdit: () => void;
|
|
57
|
+
/** Check if click-to-edit is enabled */
|
|
58
|
+
isClickToEditEnabled: () => boolean;
|
|
59
|
+
/** Highlight all editable elements */
|
|
60
|
+
flashAll: (scrollToNearestTarget?: boolean) => void;
|
|
61
|
+
/** Notify Web Previews plugin of current path */
|
|
62
|
+
setCurrentPath: (path: string) => void;
|
|
63
|
+
};
|
|
64
|
+
/**
|
|
65
|
+
* Hook to control the ContentLink controller for Visual Editing.
|
|
66
|
+
*
|
|
67
|
+
* This hook provides low-level access to the @datocms/content-link controller,
|
|
68
|
+
* allowing you to programmatically control click-to-edit overlays and
|
|
69
|
+
* communicate with the DatoCMS Web Previews plugin.
|
|
70
|
+
*
|
|
71
|
+
* @param options - Configuration options for the controller
|
|
72
|
+
* @returns An object containing the controller instance and its methods
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* ```tsx
|
|
76
|
+
* import { useContentLink } from 'react-datocms';
|
|
77
|
+
*
|
|
78
|
+
* function MyComponent() {
|
|
79
|
+
* const { enableClickToEdit, flashAll } = useContentLink({
|
|
80
|
+
* onNavigateTo: (path) => router.push(path),
|
|
81
|
+
* });
|
|
82
|
+
*
|
|
83
|
+
* return (
|
|
84
|
+
* <button onClick={() => enableClickToEdit({ scrollToNearestTarget: true })}>
|
|
85
|
+
* Enable Editing
|
|
86
|
+
* </button>
|
|
87
|
+
* );
|
|
88
|
+
* }
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
export declare function useContentLink(options?: UseContentLinkOptions): UseContentLinkResult;
|
|
@@ -9,6 +9,7 @@ type SearchResultInstancesHrefSchema = {
|
|
|
9
9
|
fuzzy?: boolean;
|
|
10
10
|
query: string;
|
|
11
11
|
build_trigger_id?: string;
|
|
12
|
+
search_index_id?: string;
|
|
12
13
|
locale?: string;
|
|
13
14
|
[k: string]: unknown;
|
|
14
15
|
};
|
|
@@ -45,7 +46,8 @@ declare class GenericClient {
|
|
|
45
46
|
type Highlighter = (match: string, key: string, context: 'title' | 'bodyExcerpt') => React.ReactNode;
|
|
46
47
|
export type UseSiteSearchConfig<Client extends GenericClient> = {
|
|
47
48
|
client: Client;
|
|
48
|
-
buildTriggerId
|
|
49
|
+
buildTriggerId?: string;
|
|
50
|
+
searchIndexId?: string;
|
|
49
51
|
fuzzySearch?: boolean;
|
|
50
52
|
resultsPerPage?: number;
|
|
51
53
|
highlightMatch?: Highlighter;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { MuxPlayerProps } from '@mux/mux-player-react
|
|
2
|
-
import type { Video } from '../VideoPlayer';
|
|
1
|
+
import type { MuxPlayerProps } from '@mux/mux-player-react';
|
|
2
|
+
import type { Video } from '../VideoPlayer/index.js';
|
|
3
3
|
type Style = MuxPlayerProps['style'];
|
|
4
4
|
type Title = MuxPlayerProps['title'];
|
|
5
5
|
type PlaybackId = MuxPlayerProps['playbackId'];
|