Skip to content

Commit 7f1eade

Browse files
committed
Add data-datocms-content-link-source documentation to ContentLink manual overlays
1 parent 7c41458 commit 7f1eade

1 file changed

Lines changed: 21 additions & 2 deletions

File tree

docs/content-link.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ Visual Editing works by:
3535
- [Edit boundaries for embedded blocks](#edit-boundaries-for-embedded-blocks)
3636
- [Complete example with both attributes](#complete-example-with-both-attributes)
3737
- [Manual overlays](#manual-overlays)
38+
- [Using `data-datocms-content-link-url`](#using-data-datocms-content-link-url)
39+
- [Using `data-datocms-content-link-source`](#using-data-datocms-content-link-source)
3840
- [Low-level utilities](#low-level-utilities)
3941
- [`decodeStega`](#decodestega)
4042
- [`stripStega`](#stripstega)
@@ -474,7 +476,11 @@ function BlogPost({ post }) {
474476

475477
## Manual overlays
476478

477-
In some cases, you may want to manually create click-to-edit overlays for content that doesn't have stega encoding. You can do this by adding the `data-datocms-content-link-url` attribute with a DatoCMS editing URL:
479+
In some cases, you may want to manually create click-to-edit overlays for content that doesn't have stega encoding.
480+
481+
### Using `data-datocms-content-link-url`
482+
483+
You can add the `data-datocms-content-link-url` attribute with a DatoCMS editing URL:
478484

479485
```jsx
480486
function ManualOverlay({ record }) {
@@ -500,7 +506,20 @@ query {
500506
}
501507
```
502508

503-
This creates a clickable overlay even if the `title` and `description` fields don't have stega encoding.
509+
### Using `data-datocms-content-link-source`
510+
511+
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:
512+
513+
```jsx
514+
// product.asset.video.alt contains stega-encoded info
515+
<video
516+
src={product.asset.video.url}
517+
data-datocms-content-link-source={product.asset.video.alt}
518+
controls
519+
/>
520+
```
521+
522+
This is useful for structural elements like `<video>`, `<audio>`, or `<iframe>` where stega encoding in visible text would be problematic.
504523

505524
## Low-level utilities
506525

0 commit comments

Comments
 (0)