@datocms/svelte 4.2.4 → 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
 
@@ -285,15 +300,27 @@ if (decoded) {
 
 ### `stripStega`
 
-Removes stega encoding from text, returning clean text:
+Removes stega encoding from any data type:
 
 ```typescript
 import { stripStega } from '@datocms/svelte';
 
-const text = "Hello, world!"; // Contains invisible stega data
-const clean = stripStega(text);
+// Works with strings
+stripStega("Hello‎World") // "HelloWorld"
+
+// Works with objects
+stripStega({ name: "John‎", age: 30 })
+
+// Works with nested structures - removes ALL stega encodings
+stripStega({
+  users: [
+    { name: "Alice‎", email: "alice‎.com" },
+    { name: "Bob‎", email: "bob‎.co" }
+  ]
+})
 
-console.log(clean); // "Hello, world!" without encoding
+// Works with arrays
+stripStega(["First‎", "Second‎", "Third‎"])
 ```
 
 These utilities are useful when you need to:

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";
@@ -78,8 +79,20 @@ export let disableTracking = true;
 let muxPlayerElementImported = false;
 let muxPlayerElement;
 let computedProps;
+let alt;
+let contentLinkSource;
 $: {
-  const { muxPlaybackId, playbackId, title, width, height, blurUpThumb } = 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) || {},
@@ -109,6 +122,7 @@ onMount(async () => {
 <mux-player
 	bind:this={muxPlayerElement}
 	stream-type="on-demand"
+	data-datocms-content-link-source={contentLinkSource}
 	{...toHTMLAttrs(computedProps)}
 	{...toHTMLAttrs($$restProps)}
 	on:abort

package/package/components/VideoPlayer/VideoPlayer.svelte.d.ts

@@ -75,6 +75,8 @@ export type MuxPlayerProps = {
 export type Video = {
     /** Title attribute (`title`) for the video */
     title?: Maybe<string>;
+    /** Alt attribute used for content link integration (passed as data-datocms-content-link-source) */
+    alt?: Maybe<string>;
     /** The height of the video */
     height?: Maybe<number>;
     /** The width of the video */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datocms/svelte",
-	"version": "4.2.4",
+	"version": "4.2.6",
 	"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
 	"license": "MIT",
 	"repository": {
@@ -66,7 +66,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@datocms/content-link": "^0.3.9",
+		"@datocms/content-link": "^0.3.10",
 		"datocms-listen": "^1.0.2",
 		"datocms-structured-text-utils": "^5.1.6",
 		"svelte-intersection-observer": "^1.0.0"