@datocms/svelte 4.2.5 → 4.2.6

package/package/components/ContentLink/ContentLink.svelte

@@ -22,9 +22,7 @@ onMount(() => {
     ...stripStega !== void 0 ? { stripStega } : {}
   });
   if (enableClickToEdit !== void 0) {
-    controller.enableClickToEdit(
-      enableClickToEdit === true ? void 0 : enableClickToEdit
-    );
+    controller.enableClickToEdit(enableClickToEdit === true ? void 0 : enableClickToEdit);
   }
 });
 $:

package/package/components/ContentLink/README.md

@@ -40,7 +40,9 @@ This drastically improves the editing experience, especially for non-technical u
 - [StructuredText integration](#structuredtext-integration)
   - [Edit groups with `data-datocms-content-link-group`](#edit-groups-with-data-datocms-content-link-group)
   - [Edit boundaries with `data-datocms-content-link-boundary`](#edit-boundaries-with-data-datocms-content-link-boundary)
-- [Manual overlays with `data-datocms-content-link-url`](#manual-overlays-with-data-datocms-content-link-url)
+- [Manual overlays](#manual-overlays)
+  - [Using `data-datocms-content-link-url`](#using-data-datocms-content-link-url)
+  - [Using `data-datocms-content-link-source`](#using-data-datocms-content-link-source)
 - [Low-level utilities](#low-level-utilities)
   - [`decodeStega`](#decodestega)
   - [`stripStega`](#stripstega)
@@ -89,7 +91,7 @@ const result = await executeQuery(query, {
 });
 ```
 
-The `contentLink` option encodes invisible metadata into text fields, while `baseEditingUrl` tells DatoCMS where your preview is hosted.
+The `contentLink: 'v1'` option enables stega encoding, which embeds invisible metadata into text fields. The `baseEditingUrl` tells DatoCMS where your project is located so edit URLs can be generated correctly. Both options are required.
 
 ### 2. Add ContentLink component to your app
 
@@ -232,11 +234,13 @@ In this example:
 - Clicking on the main structured text content opens the structured text field editor
 - Clicking on an embedded block opens that specific block's record editor
 
-## Manual overlays with `data-datocms-content-link-url`
+## Manual overlays
 
-For non-text fields like booleans, numbers, dates, and JSON, the DatoCMS API cannot embed stega-encoded metadata. In these cases, you can manually specify the edit URL using the `data-datocms-content-link-url` attribute.
+In some cases, you may want to manually create click-to-edit overlays for content that doesn't have stega encoding.
 
-The recommended approach is to use the `_editingUrl` field available on all records:
+### Using `data-datocms-content-link-url`
+
+You can add the `data-datocms-content-link-url` attribute with a DatoCMS editing URL:
 
 ```graphql
 query {
@@ -249,8 +253,6 @@ query {
 }
 ```
 
-Then add the attribute to your element:
-
 ```svelte
 <span data-datocms-content-link-url={product._editingUrl}>
   ${product.price}
@@ -261,7 +263,20 @@ Then add the attribute to your element:
 </span>
 ```
 
-This ensures the URL format is always correct and adapts automatically to any future changes.
+### Using `data-datocms-content-link-source`
+
+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:
+
+```svelte
+<!-- product.asset.video.alt contains stega-encoded info -->
+<video
+  src={product.asset.video.url}
+  data-datocms-content-link-source={product.asset.video.alt}
+  controls
+/>
+```
+
+This is useful for structural elements like `<video>`, `<audio>`, or `<iframe>` where stega encoding in visible text would be problematic.
 
 ## Low-level utilities
 

package/package/components/VideoPlayer/README.md

@@ -80,6 +80,9 @@ const query = gql`
           # if provided, it shows a blurred placeholder for the video
           blurUpThumb
 
+          # if provided, it enables DatoCMS Content Link for click-to-edit overlays
+          alt
+
           # you can include more data here: they will be ignored by the component
         }
       }

package/package/components/VideoPlayer/VideoPlayer.svelte

@@ -70,6 +70,7 @@ const toHTMLAttrs = (props = {}) => {
 </script>
 
 <script>import { onMount } from "svelte";
+import { decodeStega } from "@datocms/content-link";
 export let data = {};
 export let style = void 0;
 export let preload = "metadata";
@@ -79,9 +80,19 @@ let muxPlayerElementImported = false;
 let muxPlayerElement;
 let computedProps;
 let alt;
+let contentLinkSource;
 $: {
-  const { muxPlaybackId, playbackId, title, width, height, blurUpThumb, alt: dataAlt } = data || {};
+  const {
+    muxPlaybackId,
+    playbackId,
+    title,
+    width,
+    height,
+    blurUpThumb,
+    alt: dataAlt
+  } = data || {};
   alt = dataAlt;
+  contentLinkSource = alt && decodeStega(alt) ? alt : void 0;
   computedProps = {
     ...computedTitle(title) || {},
     ...computedPlaybackId(muxPlaybackId, playbackId) || {},
@@ -111,7 +122,7 @@ onMount(async () => {
 <mux-player
 	bind:this={muxPlayerElement}
 	stream-type="on-demand"
-	data-datocms-content-link-source={alt}
+	data-datocms-content-link-source={contentLinkSource}
 	{...toHTMLAttrs(computedProps)}
 	{...toHTMLAttrs($$restProps)}
 	on:abort

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datocms/svelte",
-	"version": "4.2.5",
+	"version": "4.2.6",
 	"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
 	"license": "MIT",
 	"repository": {