@datocms/svelte 4.2.6 → 4.2.8
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.
|
@@ -21,7 +21,7 @@ onMount(() => {
|
|
|
21
21
|
// Control stega encoding stripping behavior
|
|
22
22
|
...stripStega !== void 0 ? { stripStega } : {}
|
|
23
23
|
});
|
|
24
|
-
if (enableClickToEdit
|
|
24
|
+
if (enableClickToEdit) {
|
|
25
25
|
controller.enableClickToEdit(enableClickToEdit === true ? void 0 : enableClickToEdit);
|
|
26
26
|
}
|
|
27
27
|
});
|
|
@@ -14,11 +14,20 @@ declare const __propDef: {
|
|
|
14
14
|
* Example with SvelteKit: currentPath={$page.url.pathname}
|
|
15
15
|
*/ currentPath?: string | undefined;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
* Whether to enable click-to-edit overlays on mount, or options to configure them.
|
|
18
|
+
*
|
|
19
|
+
* - `true`: Enable click-to-edit mode immediately
|
|
20
|
+
* - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
|
|
21
|
+
* - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
|
|
22
|
+
* - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```svelte
|
|
26
|
+
* <ContentLink enableClickToEdit={true} />
|
|
27
|
+
* <ContentLink enableClickToEdit={{ scrollToNearestTarget: true }} />
|
|
28
|
+
* <ContentLink enableClickToEdit={{ hoverOnly: true, scrollToNearestTarget: true }} />
|
|
29
|
+
* ```
|
|
30
|
+
*/ enableClickToEdit?: boolean | ClickToEditOptions | undefined;
|
|
22
31
|
/**
|
|
23
32
|
* Whether to strip stega encoding from text nodes after stamping.
|
|
24
33
|
*/ stripStega?: boolean | undefined;
|
|
@@ -37,6 +37,7 @@ This drastically improves the editing experience, especially for non-technical u
|
|
|
37
37
|
- [Enabling click-to-edit](#enabling-click-to-edit)
|
|
38
38
|
- [Flash-all highlighting](#flash-all-highlighting)
|
|
39
39
|
- [Props](#props)
|
|
40
|
+
- [ClickToEditOptions](#clicktoeditoptions)
|
|
40
41
|
- [StructuredText integration](#structuredtext-integration)
|
|
41
42
|
- [Edit groups with `data-datocms-content-link-group`](#edit-groups-with-data-datocms-content-link-group)
|
|
42
43
|
- [Edit boundaries with `data-datocms-content-link-boundary`](#edit-boundaries-with-data-datocms-content-link-boundary)
|
|
@@ -145,12 +146,16 @@ If you prefer to enable click-to-edit programmatically on mount, set the `enable
|
|
|
145
146
|
<ContentLink enableClickToEdit={true} />
|
|
146
147
|
```
|
|
147
148
|
|
|
148
|
-
Or with
|
|
149
|
+
Or with options:
|
|
149
150
|
|
|
150
151
|
```svelte
|
|
151
152
|
<ContentLink enableClickToEdit={{ scrollToNearestTarget: true }} />
|
|
153
|
+
<ContentLink enableClickToEdit={{ hoverOnly: true }} />
|
|
154
|
+
<ContentLink enableClickToEdit={{ hoverOnly: true, scrollToNearestTarget: true }} />
|
|
152
155
|
```
|
|
153
156
|
|
|
157
|
+
The `hoverOnly` option is useful to avoid showing overlays on touch devices where they may interfere with normal scrolling and tapping behavior. When set to `true` on a touch-only device, click-to-edit will not be automatically enabled, but users can still toggle it manually using the Alt/Option key.
|
|
158
|
+
|
|
154
159
|
## Flash-all highlighting
|
|
155
160
|
|
|
156
161
|
The flash-all feature provides visual feedback by highlighting all editable elements on the page. This is useful for:
|
|
@@ -172,10 +177,19 @@ The `scrollToNearestTarget` parameter scrolls to the nearest editable element, u
|
|
|
172
177
|
| ------------------- | ----------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
173
178
|
| `onNavigateTo` | `(path: string) => void` | - | Callback when [Web Previews plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews) requests navigation to a different page |
|
|
174
179
|
| `currentPath` | `string` | - | Current pathname to sync with [Web Previews plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews) |
|
|
175
|
-
| `enableClickToEdit` | `
|
|
180
|
+
| `enableClickToEdit` | `boolean \| ClickToEditOptions` | - | Enable click-to-edit overlays on mount. Pass `true` or an object with options. If undefined or false, click-to-edit is disabled |
|
|
176
181
|
| `stripStega` | `boolean` | - | Whether to strip stega encoding from text nodes after stamping |
|
|
177
182
|
| `root` | `ParentNode` | - | Root element to limit scanning to instead of the entire document |
|
|
178
183
|
|
|
184
|
+
### ClickToEditOptions
|
|
185
|
+
|
|
186
|
+
When passing an object to `enableClickToEdit`, the following options are available:
|
|
187
|
+
|
|
188
|
+
| Option | Type | Default | Description |
|
|
189
|
+
| ----------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
190
|
+
| `scrollToNearestTarget` | `boolean` | `false` | Automatically scroll to the nearest editable element if none is currently visible in the viewport when click-to-edit mode is enabled. Also triggers the flash-all highlighting effect. |
|
|
191
|
+
| `hoverOnly` | `boolean` | `false` | Only enable click-to-edit on devices that support hover (non-touch devices). Uses `window.matchMedia('(hover: hover)')` to detect hover capability. Useful to avoid overlays interfering with touch scrolling. |
|
|
192
|
+
|
|
179
193
|
## StructuredText integration
|
|
180
194
|
|
|
181
195
|
When rendering Structured Text fields, you'll want to make the entire structured text area clickable rather than just specific spans. DatoCMS provides special HTML attributes to control this behavior.
|
package/package/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Node, CdaStructuredTextValue, CdaStructuredTextRecord, TypesafeCdaStructuredTextValue, Document as StructuredTextDocument } from 'datocms-structured-text-utils';
|
|
2
2
|
export { default as NakedImage } from './components/NakedImage/NakedImage.svelte';
|
|
3
3
|
export type { ResponsiveImageType } from './components/NakedImage/utils';
|
|
4
|
-
export { default as ContentLink } from './components/ContentLink/ContentLink.svelte';
|
|
4
|
+
export { default as ContentLink, type ClickToEditOptions } from './components/ContentLink/ContentLink.svelte';
|
|
5
5
|
export { default as Head } from './components/Head/Head.svelte';
|
|
6
6
|
export { default as Image } from './components/Image/Image.svelte';
|
|
7
7
|
export { default as StructuredText } from './components/StructuredText/StructuredText.svelte';
|