@datocms/svelte 4.2.10 → 4.2.12
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.
|
@@ -7,6 +7,7 @@ export let currentPath = void 0;
|
|
|
7
7
|
export let enableClickToEdit = void 0;
|
|
8
8
|
export let stripStega = void 0;
|
|
9
9
|
export let root = void 0;
|
|
10
|
+
export let hue = void 0;
|
|
10
11
|
let controller = null;
|
|
11
12
|
let onNavigateToCallback = onNavigateTo;
|
|
12
13
|
$:
|
|
@@ -21,7 +22,9 @@ onMount(() => {
|
|
|
21
22
|
// Optionally limit scanning to a specific root
|
|
22
23
|
root,
|
|
23
24
|
// Control stega encoding stripping behavior
|
|
24
|
-
...stripStega !== void 0 ? { stripStega } : {}
|
|
25
|
+
...stripStega !== void 0 ? { stripStega } : {},
|
|
26
|
+
// Optionally customize the overlay accent color
|
|
27
|
+
...hue !== void 0 ? { hue } : {}
|
|
25
28
|
});
|
|
26
29
|
if (enableClickToEdit && typeof window !== "undefined" && window.self === window.top && (enableClickToEdit === true || !enableClickToEdit.hoverOnly || window.matchMedia("(hover: hover)").matches)) {
|
|
27
30
|
controller.enableClickToEdit(
|
|
@@ -61,6 +61,11 @@ declare const __propDef: {
|
|
|
61
61
|
* Ref to limit scanning to this root instead of document.
|
|
62
62
|
* Useful for limiting the scope of content link detection to a specific container.
|
|
63
63
|
*/ root?: ParentNode | undefined;
|
|
64
|
+
/**
|
|
65
|
+
* Hue (0–359) of the overlay accent color.
|
|
66
|
+
*
|
|
67
|
+
* @default 17 (orange)
|
|
68
|
+
*/ hue?: number | undefined;
|
|
64
69
|
};
|
|
65
70
|
events: {
|
|
66
71
|
[evt: string]: CustomEvent<any>;
|
|
@@ -38,12 +38,19 @@ This drastically improves the editing experience, especially for non-technical u
|
|
|
38
38
|
- [Flash-all highlighting](#flash-all-highlighting)
|
|
39
39
|
- [Props](#props)
|
|
40
40
|
- [ClickToEditOptions](#clicktoeditoptions)
|
|
41
|
-
- [
|
|
42
|
-
- [
|
|
43
|
-
|
|
44
|
-
- [
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
- [Data attributes reference](#data-attributes-reference)
|
|
42
|
+
- [Developer-specified attributes](#developer-specified-attributes)
|
|
43
|
+
- [`data-datocms-content-link-url`](#data-datocms-content-link-url)
|
|
44
|
+
- [`data-datocms-content-link-source`](#data-datocms-content-link-source)
|
|
45
|
+
- [`data-datocms-content-link-group`](#data-datocms-content-link-group)
|
|
46
|
+
- [`data-datocms-content-link-boundary`](#data-datocms-content-link-boundary)
|
|
47
|
+
- [Library-managed attributes](#library-managed-attributes)
|
|
48
|
+
- [`data-datocms-contains-stega`](#data-datocms-contains-stega)
|
|
49
|
+
- [`data-datocms-auto-content-link-url`](#data-datocms-auto-content-link-url)
|
|
50
|
+
- [How group and boundary resolution works](#how-group-and-boundary-resolution-works)
|
|
51
|
+
- [Structured Text fields](#structured-text-fields)
|
|
52
|
+
- [Rule 1: Always wrap the Structured Text component in a group](#rule-1-always-wrap-the-structured-text-component-in-a-group)
|
|
53
|
+
- [Rule 2: Wrap embedded blocks, inline blocks, and inline records in a boundary](#rule-2-wrap-embedded-blocks-inline-blocks-and-inline-records-in-a-boundary)
|
|
47
54
|
- [Low-level utilities](#low-level-utilities)
|
|
48
55
|
- [`decodeStega`](#decodestega)
|
|
49
56
|
- [`stripStega`](#stripstega)
|
|
@@ -51,6 +58,7 @@ This drastically improves the editing experience, especially for non-technical u
|
|
|
51
58
|
- [Click-to-edit overlays not appearing](#click-to-edit-overlays-not-appearing)
|
|
52
59
|
- [Navigation not syncing with Web Previews plugin](#navigation-not-syncing-with-web-previews-plugin)
|
|
53
60
|
- [StructuredText blocks not clickable](#structuredtext-blocks-not-clickable)
|
|
61
|
+
- [Layout issues caused by stega encoding](#layout-issues-caused-by-stega-encoding)
|
|
54
62
|
|
|
55
63
|
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
56
64
|
|
|
@@ -173,124 +181,310 @@ The `scrollToNearestTarget` parameter scrolls to the nearest editable element, u
|
|
|
173
181
|
|
|
174
182
|
## Props
|
|
175
183
|
|
|
176
|
-
| Prop | Type
|
|
177
|
-
| ------------------- |
|
|
178
|
-
| `onNavigateTo` | `(path: string) => void`
|
|
179
|
-
| `currentPath` | `string`
|
|
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
|
|
181
|
-
| `stripStega` | `boolean`
|
|
182
|
-
| `root` | `ParentNode`
|
|
184
|
+
| Prop | Type | Default | Description |
|
|
185
|
+
| ------------------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
186
|
+
| `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 |
|
|
187
|
+
| `currentPath` | `string` | - | Current pathname to sync with [Web Previews plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews) |
|
|
188
|
+
| `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 |
|
|
189
|
+
| `stripStega` | `boolean` | - | Whether to strip stega encoding from text nodes after stamping |
|
|
190
|
+
| `root` | `ParentNode` | - | Root element to limit scanning to instead of the entire document |
|
|
191
|
+
| `hue` | `number` | `17` | Hue (0–359) of the overlay accent color. Default is the DatoCMS hue (`17`). Use this to match your brand or project colors |
|
|
183
192
|
|
|
184
193
|
### ClickToEditOptions
|
|
185
194
|
|
|
186
195
|
When passing an object to `enableClickToEdit`, the following options are available:
|
|
187
196
|
|
|
188
|
-
| Option | Type | Default | Description
|
|
189
|
-
| ----------------------- | --------- | ------- |
|
|
197
|
+
| Option | Type | Default | Description |
|
|
198
|
+
| ----------------------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
190
199
|
| `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
200
|
| `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
201
|
|
|
193
|
-
##
|
|
202
|
+
## Data attributes reference
|
|
194
203
|
|
|
195
|
-
|
|
204
|
+
This library uses several `data-datocms-*` attributes. Some are **developer-specified** (you add them to your markup), and some are **library-managed** (added automatically during DOM stamping). Here's a complete reference.
|
|
196
205
|
|
|
197
|
-
###
|
|
206
|
+
### Developer-specified attributes
|
|
198
207
|
|
|
199
|
-
|
|
208
|
+
These attributes are added by you in your templates/components to control how editable regions behave.
|
|
209
|
+
|
|
210
|
+
#### `data-datocms-content-link-url`
|
|
211
|
+
|
|
212
|
+
Manually marks an element as editable with an explicit edit URL. Use this for non-text fields (booleans, numbers, dates, JSON) that cannot contain stega encoding. The recommended approach is to use the `_editingUrl` field available on all records:
|
|
213
|
+
|
|
214
|
+
```graphql
|
|
215
|
+
query {
|
|
216
|
+
product {
|
|
217
|
+
id
|
|
218
|
+
price
|
|
219
|
+
isActive
|
|
220
|
+
_editingUrl
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
```
|
|
200
224
|
|
|
201
225
|
```svelte
|
|
202
|
-
<
|
|
203
|
-
|
|
204
|
-
</
|
|
226
|
+
<span data-datocms-content-link-url={product._editingUrl}>
|
|
227
|
+
${product.price}
|
|
228
|
+
</span>
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
#### `data-datocms-content-link-source`
|
|
232
|
+
|
|
233
|
+
Attaches stega-encoded metadata without the need to render it as content. Useful for structural elements that cannot contain text (like `<video>`, `<audio>`, `<iframe>`, etc.) or when stega encoding in visible text would be problematic:
|
|
234
|
+
|
|
235
|
+
```svelte
|
|
236
|
+
<div data-datocms-content-link-source={video.alt}>
|
|
237
|
+
<video src={video.url} poster={video.posterImage.url} controls />
|
|
238
|
+
</div>
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
The value must be a stega-encoded string (any text field from the API will work). The library decodes the stega metadata from the attribute value and makes the element clickable to edit.
|
|
242
|
+
|
|
243
|
+
#### `data-datocms-content-link-group`
|
|
244
|
+
|
|
245
|
+
Expands the clickable area to a parent element. When the library encounters stega-encoded content, by default it makes the immediate parent of the text node clickable to edit. Adding this attribute to an ancestor makes that ancestor the clickable target instead:
|
|
246
|
+
|
|
247
|
+
```svelte
|
|
248
|
+
<article data-datocms-content-link-group>
|
|
249
|
+
<!-- product.title contains stega encoding -->
|
|
250
|
+
<h2>{product.title}</h2>
|
|
251
|
+
<p>${product.price}</p>
|
|
252
|
+
</article>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
Here, clicking anywhere in the `<article>` opens the editor, rather than requiring users to click precisely on the `<h2>`.
|
|
256
|
+
|
|
257
|
+
**Important:** A group should contain only one stega-encoded source. If multiple stega strings resolve to the same group, the library logs a collision warning and only the last URL wins.
|
|
258
|
+
|
|
259
|
+
#### `data-datocms-content-link-boundary`
|
|
260
|
+
|
|
261
|
+
Stops the upward DOM traversal that looks for a `data-datocms-content-link-group`, making the element where stega was found the clickable target instead. This creates an independent editable region that won't merge into a parent group (see [How group and boundary resolution works](#how-group-and-boundary-resolution-works) below for details):
|
|
262
|
+
|
|
263
|
+
```svelte
|
|
264
|
+
<div data-datocms-content-link-group>
|
|
265
|
+
<!-- page.title contains stega encoding → resolves to URL A -->
|
|
266
|
+
<h1>{page.title}</h1>
|
|
267
|
+
<section data-datocms-content-link-boundary>
|
|
268
|
+
<!-- page.author contains stega encoding → resolves to URL B -->
|
|
269
|
+
<span>{page.author}</span>
|
|
270
|
+
</section>
|
|
271
|
+
</div>
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
Without the boundary, clicking `page.author` would open URL A (the outer group). With the boundary, the `<span>` becomes the clickable target opening URL B.
|
|
275
|
+
|
|
276
|
+
The boundary can also be placed directly on the element that contains the stega text:
|
|
277
|
+
|
|
278
|
+
```svelte
|
|
279
|
+
<div data-datocms-content-link-group>
|
|
280
|
+
<!-- page.title contains stega encoding → resolves to URL A -->
|
|
281
|
+
<h1>{page.title}</h1>
|
|
282
|
+
<!-- page.author contains stega encoding → resolves to URL B -->
|
|
283
|
+
<span data-datocms-content-link-boundary>{page.author}</span>
|
|
284
|
+
</div>
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
Here, the `<span>` has the boundary and directly contains the stega text, so the `<span>` itself becomes the clickable target (since the starting element and the boundary element are the same).
|
|
288
|
+
|
|
289
|
+
### Library-managed attributes
|
|
290
|
+
|
|
291
|
+
These attributes are added automatically by the library during DOM stamping. You do not need to add them yourself, but you can target them in CSS or JavaScript.
|
|
292
|
+
|
|
293
|
+
#### `data-datocms-contains-stega`
|
|
294
|
+
|
|
295
|
+
Added to elements whose text content contains stega-encoded invisible characters. This attribute is only present when `stripStega` is `false` (the default), since with `stripStega: true` the characters are removed entirely. Useful for CSS workarounds — the zero-width characters can sometimes cause unexpected letter-spacing or text overflow:
|
|
296
|
+
|
|
297
|
+
```css
|
|
298
|
+
[data-datocms-contains-stega] {
|
|
299
|
+
letter-spacing: 0 !important;
|
|
300
|
+
}
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
#### `data-datocms-auto-content-link-url`
|
|
304
|
+
|
|
305
|
+
Added automatically to elements that the library has identified as editable targets (through stega decoding and group/boundary resolution). Contains the resolved edit URL.
|
|
306
|
+
|
|
307
|
+
This is the automatic counterpart to the developer-specified `data-datocms-content-link-url`. The library adds `data-datocms-auto-content-link-url` wherever it can extract an edit URL from stega encoding, while `data-datocms-content-link-url` is needed for non-text fields (booleans, numbers, dates, etc.) where stega encoding cannot be embedded. Both attributes are used by the click-to-edit overlay system to determine which elements are clickable and where they link to.
|
|
308
|
+
|
|
309
|
+
## How group and boundary resolution works
|
|
310
|
+
|
|
311
|
+
When the library encounters stega-encoded content inside an element, it walks up the DOM tree from that element:
|
|
312
|
+
|
|
313
|
+
1. If it finds a `data-datocms-content-link-group`, it stops and stamps **that** element as the clickable target.
|
|
314
|
+
2. If it finds a `data-datocms-content-link-boundary`, it stops and stamps the **starting element** as the clickable target — further traversal is prevented.
|
|
315
|
+
3. If it reaches the root without finding either, it stamps the **starting element**.
|
|
316
|
+
|
|
317
|
+
Here are some concrete examples to illustrate:
|
|
318
|
+
|
|
319
|
+
**Example 1: Nested groups**
|
|
320
|
+
|
|
321
|
+
```svelte
|
|
322
|
+
<div data-datocms-content-link-group>
|
|
323
|
+
<!-- page.title contains stega encoding → resolves to URL A -->
|
|
324
|
+
<h1>{page.title}</h1>
|
|
325
|
+
<div data-datocms-content-link-group>
|
|
326
|
+
<!-- page.subtitle contains stega encoding → resolves to URL B -->
|
|
327
|
+
<p>{page.subtitle}</p>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
- **`page.title`**: walks up from `<h1>`, finds the outer group → the **outer `<div>`** becomes clickable (opens URL A).
|
|
333
|
+
- **`page.subtitle`**: walks up from `<p>`, finds the inner group first → the **inner `<div>`** becomes clickable (opens URL B). The outer group is never reached.
|
|
334
|
+
|
|
335
|
+
Each nested group creates an independent clickable region. The innermost group always wins for its own content.
|
|
205
336
|
|
|
337
|
+
**Example 2: Boundary preventing group propagation**
|
|
338
|
+
|
|
339
|
+
```svelte
|
|
340
|
+
<div data-datocms-content-link-group>
|
|
341
|
+
<!-- page.title contains stega encoding → resolves to URL A -->
|
|
342
|
+
<h1>{page.title}</h1>
|
|
343
|
+
<section data-datocms-content-link-boundary>
|
|
344
|
+
<!-- page.author contains stega encoding → resolves to URL B -->
|
|
345
|
+
<span>{page.author}</span>
|
|
346
|
+
</section>
|
|
347
|
+
</div>
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
- **`page.title`**: walks up from `<h1>`, finds the outer group → the **outer `<div>`** becomes clickable (opens URL A).
|
|
351
|
+
- **`page.author`**: walks up from `<span>`, hits the `<section>` boundary → traversal stops, the **`<span>`** itself becomes clickable (opens URL B). The outer group is not reached.
|
|
352
|
+
|
|
353
|
+
**Example 3: Boundary inside a group**
|
|
354
|
+
|
|
355
|
+
```svelte
|
|
356
|
+
<div data-datocms-content-link-group>
|
|
357
|
+
<!-- page.description contains stega encoding → resolves to URL A -->
|
|
358
|
+
<p>{page.description}</p>
|
|
359
|
+
<div data-datocms-content-link-boundary>
|
|
360
|
+
<!-- page.footnote contains stega encoding → resolves to URL B -->
|
|
361
|
+
<p>{page.footnote}</p>
|
|
362
|
+
</div>
|
|
363
|
+
</div>
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
- **`page.description`**: walks up from `<p>`, finds the outer group → the **outer `<div>`** becomes clickable (opens URL A).
|
|
367
|
+
- **`page.footnote`**: walks up from `<p>`, hits the boundary → traversal stops, the **`<p>`** itself becomes clickable (opens URL B). The outer group is not reached.
|
|
368
|
+
|
|
369
|
+
**Example 4: Multiple stega strings without groups (collision warning)**
|
|
370
|
+
|
|
371
|
+
```svelte
|
|
372
|
+
<p>
|
|
373
|
+
<!-- Both product.name and product.tagline contain stega encoding -->
|
|
374
|
+
{product.name}
|
|
375
|
+
{product.tagline}
|
|
376
|
+
</p>
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
Both stega-encoded strings resolve to the same `<p>` element. The library logs a console warning and the last URL wins. To fix this, wrap each piece of content in its own element:
|
|
380
|
+
|
|
381
|
+
```svelte
|
|
382
|
+
<p>
|
|
383
|
+
<span>{product.name}</span>
|
|
384
|
+
<span>{product.tagline}</span>
|
|
385
|
+
</p>
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
## Structured Text fields
|
|
389
|
+
|
|
390
|
+
Structured Text fields require special attention because of how stega encoding works within them:
|
|
391
|
+
|
|
392
|
+
- The DatoCMS API encodes stega information inside a single `<span>` within the structured text output. Without any configuration, only that small span would be clickable.
|
|
393
|
+
- Structured Text fields can contain **embedded blocks** and **inline records**, each with their own editing URL that should open a different record in the editor.
|
|
394
|
+
|
|
395
|
+
Here are the rules to follow:
|
|
396
|
+
|
|
397
|
+
### Rule 1: Always wrap the Structured Text component in a group
|
|
398
|
+
|
|
399
|
+
This makes the entire structured text area clickable, instead of just the tiny stega-encoded span:
|
|
400
|
+
|
|
401
|
+
```svelte
|
|
206
402
|
<div data-datocms-content-link-group>
|
|
207
|
-
<StructuredText data={content
|
|
403
|
+
<StructuredText data={page.content} />
|
|
208
404
|
</div>
|
|
209
405
|
```
|
|
210
406
|
|
|
211
|
-
|
|
407
|
+
### Rule 2: Wrap embedded blocks, inline blocks, and inline records in a boundary
|
|
212
408
|
|
|
213
|
-
|
|
409
|
+
Embedded blocks, inline blocks, and inline records each have their own edit URL (pointing to the block/record). Without a boundary, clicking them would bubble up to the parent group and open the structured text field editor instead. Add `data-datocms-content-link-boundary` to the root element of your custom components to prevent them from merging into the parent group.
|
|
214
410
|
|
|
215
|
-
|
|
411
|
+
**Note on record links (item links):** Record links (`isItemLink`) typically do **not** need a boundary. They render as `<a>` tags wrapping text that already belongs to the surrounding structured text. Unlike embedded blocks or inline records, record links don't introduce a separate editing target with its own stega-encoded URL, so there's no URL collision and no reason to isolate them from the parent group. When an editor clicks on that text, it correctly opens the structured text field editor (the parent group). Only add a boundary to a record link if you specifically want clicking it to open the linked record's editor instead.
|
|
216
412
|
|
|
217
413
|
```svelte
|
|
218
414
|
<script>
|
|
219
415
|
import { StructuredText } from '@datocms/svelte';
|
|
220
|
-
import
|
|
416
|
+
import { isBlock, isInlineBlock, isInlineItem, isItemLink } from 'datocms-structured-text-utils';
|
|
417
|
+
import Block from './Block.svelte';
|
|
418
|
+
import InlineBlock from './InlineBlock.svelte';
|
|
419
|
+
import InlineItem from './InlineItem.svelte';
|
|
420
|
+
import ItemLink from './ItemLink.svelte';
|
|
221
421
|
</script>
|
|
222
422
|
|
|
223
423
|
<div data-datocms-content-link-group>
|
|
224
424
|
<StructuredText
|
|
225
|
-
data={content
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
// Wrap the block with a boundary
|
|
233
|
-
useBoundary: true,
|
|
234
|
-
}
|
|
235
|
-
})
|
|
236
|
-
}}
|
|
425
|
+
data={page.content}
|
|
426
|
+
components={[
|
|
427
|
+
[isBlock, Block],
|
|
428
|
+
[isInlineBlock, InlineBlock],
|
|
429
|
+
[isInlineItem, InlineItem],
|
|
430
|
+
[isItemLink, ItemLink],
|
|
431
|
+
]}
|
|
237
432
|
/>
|
|
238
433
|
</div>
|
|
434
|
+
```
|
|
435
|
+
|
|
436
|
+
Then, in your custom components, wrap the root element with `data-datocms-content-link-boundary`:
|
|
437
|
+
|
|
438
|
+
```svelte
|
|
439
|
+
<!-- Block.svelte -->
|
|
440
|
+
<script>
|
|
441
|
+
export let block;
|
|
442
|
+
</script>
|
|
239
443
|
|
|
240
|
-
<!-- In BlockComponent.svelte -->
|
|
241
444
|
<div data-datocms-content-link-boundary>
|
|
242
445
|
<h2>{block.title}</h2>
|
|
243
446
|
<p>{block.description}</p>
|
|
244
447
|
</div>
|
|
245
448
|
```
|
|
246
449
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
In some cases, you may want to manually create click-to-edit overlays for content that doesn't have stega encoding.
|
|
254
|
-
|
|
255
|
-
### Using `data-datocms-content-link-url`
|
|
256
|
-
|
|
257
|
-
You can add the `data-datocms-content-link-url` attribute with a DatoCMS editing URL:
|
|
450
|
+
```svelte
|
|
451
|
+
<!-- InlineBlock.svelte -->
|
|
452
|
+
<script>
|
|
453
|
+
export let block;
|
|
454
|
+
</script>
|
|
258
455
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
id
|
|
263
|
-
price
|
|
264
|
-
isActive
|
|
265
|
-
_editingUrl
|
|
266
|
-
}
|
|
267
|
-
}
|
|
456
|
+
<span data-datocms-content-link-boundary>
|
|
457
|
+
<em>{block.username}</em>
|
|
458
|
+
</span>
|
|
268
459
|
```
|
|
269
460
|
|
|
270
461
|
```svelte
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
462
|
+
<!-- InlineItem.svelte -->
|
|
463
|
+
<script>
|
|
464
|
+
export let link;
|
|
465
|
+
</script>
|
|
274
466
|
|
|
275
|
-
<span data-datocms-content-link-
|
|
276
|
-
{
|
|
467
|
+
<span data-datocms-content-link-boundary>
|
|
468
|
+
{link.title}
|
|
277
469
|
</span>
|
|
278
470
|
```
|
|
279
471
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
For elements without visible stega-encoded content, use the [`data-datocms-content-link-source`](https://github.com/datocms/content-link?tab=readme-ov-file#stamping-elements-via-data-datocms-content-link-source) attribute to attach stega metadata directly:
|
|
472
|
+
Record links don't need a boundary — their content belongs to the surrounding structured text:
|
|
283
473
|
|
|
284
474
|
```svelte
|
|
285
|
-
<!--
|
|
286
|
-
<
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
475
|
+
<!-- ItemLink.svelte -->
|
|
476
|
+
<script>
|
|
477
|
+
export let link;
|
|
478
|
+
</script>
|
|
479
|
+
|
|
480
|
+
<a href={`/posts/${link.slug}`}>
|
|
481
|
+
<slot />
|
|
482
|
+
</a>
|
|
291
483
|
```
|
|
292
484
|
|
|
293
|
-
|
|
485
|
+
With this setup:
|
|
486
|
+
- Clicking the main text (paragraphs, headings, lists) — including record links — opens the **structured text field editor**
|
|
487
|
+
- Clicking an embedded block, inline block, or inline record opens **that record's editor**
|
|
294
488
|
|
|
295
489
|
## Low-level utilities
|
|
296
490
|
|
|
@@ -398,4 +592,22 @@ These utilities are useful when you need to:
|
|
|
398
592
|
</div>
|
|
399
593
|
```
|
|
400
594
|
|
|
401
|
-
2. Add `data-datocms-content-link-boundary` to custom blocks to prevent them from bubbling to the parent field
|
|
595
|
+
2. Add `data-datocms-content-link-boundary` to custom blocks, inline blocks, and inline records to prevent them from bubbling to the parent field (record links typically don't need a boundary)
|
|
596
|
+
|
|
597
|
+
### Layout issues caused by stega encoding
|
|
598
|
+
|
|
599
|
+
**Problem**: The invisible zero-width characters can cause unexpected letter-spacing or text breaking out of containers.
|
|
600
|
+
|
|
601
|
+
**Solutions**:
|
|
602
|
+
1. Use the `stripStega` prop to remove stega encoding after processing:
|
|
603
|
+
```svelte
|
|
604
|
+
<ContentLink stripStega={true} />
|
|
605
|
+
```
|
|
606
|
+
|
|
607
|
+
2. Use CSS to reset letter-spacing on elements with stega-encoded content:
|
|
608
|
+
```css
|
|
609
|
+
[data-datocms-contains-stega] {
|
|
610
|
+
letter-spacing: 0 !important;
|
|
611
|
+
}
|
|
612
|
+
```
|
|
613
|
+
This attribute is automatically added to elements with stega-encoded content when `stripStega: false` (the default)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@datocms/svelte",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.12",
|
|
4
4
|
"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@mux/mux-player": "^
|
|
39
|
-
"@mux/playback-core": "^0.
|
|
38
|
+
"@mux/mux-player": "^3.11.4",
|
|
39
|
+
"@mux/playback-core": "^0.33.1",
|
|
40
40
|
"@sveltejs/adapter-auto": "^3.0.0",
|
|
41
41
|
"@sveltejs/kit": "^2.0.0",
|
|
42
42
|
"@sveltejs/package": "^2.0.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
},
|
|
67
67
|
"type": "module",
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@datocms/content-link": "^0.3.
|
|
69
|
+
"@datocms/content-link": "^0.3.19",
|
|
70
70
|
"datocms-listen": "^1.0.2",
|
|
71
71
|
"datocms-structured-text-utils": "^5.1.6",
|
|
72
72
|
"svelte-intersection-observer": "^1.0.0"
|