@datocms/svelte 4.2.3 → 4.2.4

package/README.md

@@ -37,6 +37,7 @@ A set of components to work faster with [DatoCMS](https://www.datocms.com/) in S
 
 Components:
 
+- [`<ContentLink />` for Visual Editing with click-to-edit overlays](src/lib/components/ContentLink)
 - [`<Image />` and `<NakedImage />`](src/lib/components/Image)
 - [`<VideoPlayer />`](src/lib/components/VideoPlayer)
 - [`<StructuredText />`](src/lib/components/StructuredText)

package/package/components/ContentLink/ContentLink.svelte

@@ -0,0 +1,40 @@
+<script>import { createController } from "@datocms/content-link";
+import { onDestroy, onMount } from "svelte";
+export let onNavigateTo = void 0;
+export let currentPath = void 0;
+export let enableClickToEdit = void 0;
+export let stripStega = void 0;
+export let root = void 0;
+let controller = null;
+let onNavigateToCallback = onNavigateTo;
+$:
+  onNavigateToCallback = onNavigateTo;
+onMount(() => {
+  controller = createController({
+    // Handle navigation requests from the Web Previews plugin
+    // Inside Visual mode, users can navigate to different URLs (like a browser bar)
+    // and the plugin will request the preview to navigate accordingly
+    // The callback is accessed via variable, so changes don't trigger recreation
+    onNavigateTo: onNavigateToCallback ? (path) => onNavigateToCallback?.(path) : void 0,
+    // Optionally limit scanning to a specific root
+    root,
+    // Control stega encoding stripping behavior
+    ...stripStega !== void 0 ? { stripStega } : {}
+  });
+  if (enableClickToEdit !== void 0) {
+    controller.enableClickToEdit(
+      enableClickToEdit === true ? void 0 : enableClickToEdit
+    );
+  }
+});
+$:
+  if (currentPath !== void 0 && controller) {
+    controller.setCurrentPath(currentPath);
+  }
+onDestroy(() => {
+  if (controller) {
+    controller.dispose();
+    controller = null;
+  }
+});
+</script>

package/package/components/ContentLink/ContentLink.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * Callback invoked when the Web Previews plugin requests navigation to a different URL.
+             * This is used for client-side routing integration.
+             *
+             * Example with SvelteKit: onNavigateTo={(path) => goto(path)}
+             */ onNavigateTo?: ((path: string) => void) | undefined;
+        /**
+             * Current pathname to sync with the Web Previews plugin.
+             * This keeps the plugin in sync with the current page being previewed.
+             *
+             * Example with SvelteKit: currentPath={$page.url.pathname}
+             */ currentPath?: string | undefined;
+        /**
+             * Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget.
+             * If undefined, click-to-edit is disabled and editors can use Alt/Option key for temporary activation.
+             */ enableClickToEdit?: true | {
+            scrollToNearestTarget: true;
+        } | undefined;
+        /**
+             * Whether to strip stega encoding from text nodes after stamping.
+             */ stripStega?: boolean | undefined;
+        /**
+             * Ref to limit scanning to this root instead of document.
+             * Useful for limiting the scope of content link detection to a specific container.
+             */ root?: ParentNode | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContentLinkProps = typeof __propDef.props;
+export type ContentLinkEvents = typeof __propDef.events;
+export type ContentLinkSlots = typeof __propDef.slots;
+export default class ContentLink extends SvelteComponent<ContentLinkProps, ContentLinkEvents, ContentLinkSlots> {
+}
+export {};

package/package/components/ContentLink/README.md

@@ -0,0 +1,360 @@
+# ContentLink component for Visual Editing
+
+`<ContentLink />` is a Svelte component that enables **Visual Editing** for your DatoCMS content. It provides click-to-edit overlays that allow editors to click on any content element on your website to instantly open the DatoCMS editor and modify that specific field.
+
+This component is built on top of the [`@datocms/content-link`](https://www.npmjs.com/package/@datocms/content-link) library and provides a seamless integration for Svelte and SvelteKit projects.
+
+## What is Visual Editing?
+
+Visual Editing transforms how content editors interact with your website. Instead of navigating through forms and fields in a CMS, editors can:
+
+1. **See their content in context** - Preview exactly how content appears on the live site
+2. **Click to edit** - Click directly on any text, image, or field to open the editor
+3. **Navigate seamlessly** - Jump between pages in the preview, and the CMS follows along
+4. **Get instant feedback** - Changes in the CMS are reflected immediately in the preview
+
+This drastically improves the editing experience, especially for non-technical users who can now edit content without understanding the underlying CMS structure.
+
+## Out-of-the-box features
+
+- **Click-to-edit overlays**: Visual indicators showing which content is editable
+- **Stega decoding**: Automatically detects and decodes editing metadata embedded in content
+- **Keyboard shortcuts**: Hold Alt/Option to temporarily enable editing mode
+- **Flash-all highlighting**: Show all editable areas at once for quick orientation
+- **Bidirectional navigation**: Sync navigation between preview and DatoCMS editor
+- **Framework-agnostic**: Works with SvelteKit or any routing solution
+- **StructuredText integration**: Special support for complex structured content fields
+- **[Web Previews plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews) integration**: Seamless integration with DatoCMS's editing interface
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Installation](#installation)
+- [Basic Setup](#basic-setup)
+  - [1. Fetch content with stega encoding](#1-fetch-content-with-stega-encoding)
+  - [2. Add ContentLink component to your app](#2-add-contentlink-component-to-your-app)
+- [SvelteKit integration](#sveltekit-integration)
+- [Enabling click-to-edit](#enabling-click-to-edit)
+- [Flash-all highlighting](#flash-all-highlighting)
+- [Props](#props)
+- [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)
+- [Low-level utilities](#low-level-utilities)
+  - [`decodeStega`](#decodestega)
+  - [`stripStega`](#stripstega)
+- [Troubleshooting](#troubleshooting)
+  - [Click-to-edit overlays not appearing](#click-to-edit-overlays-not-appearing)
+  - [Navigation not syncing with Web Previews plugin](#navigation-not-syncing-with-web-previews-plugin)
+  - [StructuredText blocks not clickable](#structuredtext-blocks-not-clickable)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Installation
+
+```bash
+npm install --save @datocms/svelte
+```
+
+The package includes `@datocms/content-link` as a dependency, which provides the underlying controller for Visual Editing functionality.
+
+## Basic Setup
+
+Visual Editing requires two steps:
+
+### 1. Fetch content with stega encoding
+
+When fetching content from DatoCMS, enable stega encoding to embed editing metadata:
+
+```js
+import { executeQuery } from '@datocms/cda-client';
+
+const query = `
+  query {
+    page {
+      title
+      content
+    }
+  }
+`;
+
+const result = await executeQuery(query, {
+  token: 'YOUR_API_TOKEN',
+  environment: 'main',
+  // Enable stega encoding
+  contentLink: 'v1',
+  // Set your site's base URL for editing links
+  baseEditingUrl: 'https://your-project.admin.datocms.com',
+});
+```
+
+The `contentLink` option encodes invisible metadata into text fields, while `baseEditingUrl` tells DatoCMS where your preview is hosted.
+
+### 2. Add ContentLink component to your app
+
+Add the `<ContentLink />` component to your app. It doesn't render any visible output but sets up the click-to-edit functionality:
+
+```svelte
+<script>
+  import { ContentLink } from '@datocms/svelte';
+</script>
+
+<ContentLink />
+
+<!-- Your content here -->
+```
+
+That's it! The component will automatically detect editable content and create interactive overlays.
+
+## SvelteKit integration
+
+For SvelteKit projects, you can integrate with the routing system to enable full Web Previews plugin support:
+
+```svelte
+<script>
+  import { ContentLink } from '@datocms/svelte';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+</script>
+
+<ContentLink
+  onNavigateTo={(path) => goto(path)}
+  currentPath={$page.url.pathname}
+/>
+
+<!-- Your content here -->
+```
+
+This integration enables:
+- **Navigation from plugin**: When editors navigate to a different URL in the Visual Editing mode, your preview updates accordingly
+- **Current path sync**: The plugin knows which page is currently being previewed
+
+## Enabling click-to-edit
+
+Click-to-edit overlays are **not enabled by default**. Instead, editors can:
+
+- **Hold Alt/Option key**: Temporarily enable click-to-edit mode while the key is held down
+- **Release the key**: Disable click-to-edit mode when released
+
+If you prefer to enable click-to-edit programmatically on mount, set the `enableClickToEdit` prop:
+
+```svelte
+<ContentLink enableClickToEdit={true} />
+```
+
+Or with scroll-to-nearest option:
+
+```svelte
+<ContentLink enableClickToEdit={{ scrollToNearestTarget: true }} />
+```
+
+## Flash-all highlighting
+
+The flash-all feature provides visual feedback by highlighting all editable elements on the page. This is useful for:
+- Showing editors what content they can edit
+- Debugging to verify Visual Editing is working correctly
+- Onboarding new content editors
+
+When you enable click-to-edit with the `scrollToNearestTarget` option, it triggers the flash-all effect:
+
+```svelte
+<ContentLink enableClickToEdit={{ scrollToNearestTarget: true }} />
+```
+
+The `scrollToNearestTarget` parameter scrolls to the nearest editable element, useful on long pages.
+
+## Props
+
+| Prop                | Type                                      | Default | Description                                                                                                                                            |
+| ------------------- | ----------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `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 |
+| `currentPath`       | `string`                                  | -       | Current pathname to sync with [Web Previews plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews)                         |
+| `enableClickToEdit` | `true \| { scrollToNearestTarget: true }` | -       | Enable click-to-edit overlays on mount. Pass `true` or an object with options. If undefined, click-to-edit is disabled                                |
+| `stripStega`        | `boolean`                                 | -       | Whether to strip stega encoding from text nodes after stamping                                                                                         |
+| `root`              | `ParentNode`                              | -       | Root element to limit scanning to instead of the entire document                                                                                       |
+
+## StructuredText integration
+
+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.
+
+### Edit groups with `data-datocms-content-link-group`
+
+Wrap your StructuredText component with a container that has the `data-datocms-content-link-group` attribute. This makes the entire area clickable to edit the structured text field:
+
+```svelte
+<script>
+  import { StructuredText } from '@datocms/svelte';
+</script>
+
+<div data-datocms-content-link-group>
+  <StructuredText data={content.structuredTextField} />
+</div>
+```
+
+This allows editors to click anywhere within the structured text content to edit it, rather than targeting small span elements.
+
+### Edit boundaries with `data-datocms-content-link-boundary`
+
+When your Structured Text contains embedded blocks, you'll want those blocks to open their own specific record editor instead of the structured text field editor. Use the `data-datocms-content-link-boundary` attribute to stop the upward traversal:
+
+```svelte
+<script>
+  import { StructuredText } from '@datocms/svelte';
+  import BlockComponent from './BlockComponent.svelte';
+</script>
+
+<div data-datocms-content-link-group>
+  <StructuredText
+    data={content.structuredTextField}
+    blocks={{
+      // Render custom blocks
+      myBlock: (props) => ({
+        component: BlockComponent,
+        props: {
+          block: props.record,
+          // Wrap the block with a boundary
+          useBoundary: true,
+        }
+      })
+    }}
+  />
+</div>
+
+<!-- In BlockComponent.svelte -->
+<div data-datocms-content-link-boundary>
+  <h2>{block.title}</h2>
+  <p>{block.description}</p>
+</div>
+```
+
+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`
+
+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.
+
+The recommended approach is to use the `_editingUrl` field available on all records:
+
+```graphql
+query {
+  product {
+    id
+    price
+    isActive
+    _editingUrl
+  }
+}
+```
+
+Then add the attribute to your element:
+
+```svelte
+<span data-datocms-content-link-url={product._editingUrl}>
+  ${product.price}
+</span>
+
+<span data-datocms-content-link-url={product._editingUrl}>
+  {product.isActive ? 'Active' : 'Inactive'}
+</span>
+```
+
+This ensures the URL format is always correct and adapts automatically to any future changes.
+
+## Low-level utilities
+
+The `@datocms/svelte` package re-exports utility functions from `@datocms/content-link` for working with stega-encoded content:
+
+### `decodeStega`
+
+Decodes stega-encoded content to extract editing metadata:
+
+```typescript
+import { decodeStega } from '@datocms/svelte';
+
+const text = "Hello, world!"; // Contains invisible stega data
+const decoded = decodeStega(text);
+
+if (decoded) {
+  console.log('Editing URL:', decoded.url);
+  console.log('Clean text:', decoded.cleanText);
+}
+```
+
+### `stripStega`
+
+Removes stega encoding from text, returning clean text:
+
+```typescript
+import { stripStega } from '@datocms/svelte';
+
+const text = "Hello, world!"; // Contains invisible stega data
+const clean = stripStega(text);
+
+console.log(clean); // "Hello, world!" without encoding
+```
+
+These utilities are useful when you need to:
+- Extract clean text for meta tags or social sharing
+- Check if content has stega encoding
+- Debug Visual Editing issues
+- Process stega-encoded content programmatically
+
+## Troubleshooting
+
+### Click-to-edit overlays not appearing
+
+**Problem**: Overlays don't appear when clicking on content.
+
+**Solutions**:
+1. Verify stega encoding is enabled in your API calls:
+   ```js
+   const result = await executeQuery(query, {
+     token: 'YOUR_API_TOKEN',
+     contentLink: 'v1',
+     baseEditingUrl: 'https://your-project.admin.datocms.com',
+   });
+   ```
+
+2. Check that `<ContentLink />` is mounted in your component tree
+
+3. Ensure you've enabled click-to-edit mode:
+   ```svelte
+   <ContentLink enableClickToEdit={true} />
+   ```
+   Or hold Alt/Option key while browsing
+
+4. Check browser console for errors
+
+### Navigation not syncing with Web Previews plugin
+
+**Problem**: When you navigate in your preview, the DatoCMS editor doesn't follow along.
+
+**Solutions**:
+1. Ensure you're providing both `onNavigateTo` and `currentPath` props:
+   ```svelte
+   <ContentLink
+     onNavigateTo={(path) => goto(path)}
+     currentPath={$page.url.pathname}
+   />
+   ```
+
+2. Verify `currentPath` updates when navigation occurs
+
+3. Check that `baseEditingUrl` in your API calls matches your preview URL
+
+### StructuredText blocks not clickable
+
+**Problem**: Content within StructuredText blocks doesn't have click-to-edit overlays.
+
+**Solutions**:
+1. Wrap StructuredText with `data-datocms-content-link-group`:
+   ```svelte
+   <div data-datocms-content-link-group>
+     <StructuredText data={content} />
+   </div>
+   ```
+
+2. Add `data-datocms-content-link-boundary` to custom blocks to prevent them from bubbling to the parent field

package/package/components/Head/Head.svelte.d.ts

@@ -46,7 +46,7 @@ export type FaviconTag = SeoMetaTag | SeoLinkTag;
 export type SeoOrFaviconTag = SeoTag | FaviconTag;
 declare const __propDef: {
     props: {
-        data?: (GenericTag | SeoOrFaviconTag)[] | undefined;
+        data?: Array<GenericTag | SeoOrFaviconTag>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/Image/Image.svelte.d.ts

@@ -4,17 +4,17 @@ import { type ResponsiveImageType } from '../NakedImage/utils';
 declare const __propDef: {
     props: {
         /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */ data: ResponsiveImageType;
-        /** Additional CSS className for root node */ class?: string | null | undefined;
-        /** Additional CSS class for the `<picture />` tag */ pictureClass?: string | null | undefined;
-        /** Additional CSS class for the image inside the `<picture />` tag */ imgClass?: string | null | undefined;
-        /** Additional CSS class for the placeholder element */ placeholderClass?: string | null | undefined;
-        /** Duration (in ms) of the fade-in transition effect upoad image loading */ fadeInDuration?: number | undefined;
-        /** Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible */ intersectionThreshold?: number | undefined;
-        /** Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections */ intersectionMargin?: string | undefined;
-        /** Additional CSS rules to add to the root node */ style?: string | null | undefined;
-        /** Additional CSS rules to add to the `<picture />` tag */ pictureStyle?: string | null | undefined;
-        /** Additional CSS rules to add to the image inside the `<picture />` tag */ imgStyle?: string | null | undefined;
-        /** Additional CSS rules to add to the placeholder element */ placeholderStyle?: string | null | undefined;
+        /** Additional CSS className for root node */ class?: string | null;
+        /** Additional CSS class for the `<picture />` tag */ pictureClass?: string | null;
+        /** Additional CSS class for the image inside the `<picture />` tag */ imgClass?: string | null;
+        /** Additional CSS class for the placeholder element */ placeholderClass?: string | null;
+        /** Duration (in ms) of the fade-in transition effect upoad image loading */ fadeInDuration?: number;
+        /** Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible */ intersectionThreshold?: number;
+        /** Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections */ intersectionMargin?: string;
+        /** Additional CSS rules to add to the root node */ style?: string | null;
+        /** Additional CSS rules to add to the `<picture />` tag */ pictureStyle?: string | null;
+        /** Additional CSS rules to add to the image inside the `<picture />` tag */ imgStyle?: string | null;
+        /** Additional CSS rules to add to the placeholder element */ placeholderStyle?: string | null;
         /**
              * The layout behavior of the image as the viewport changes size
              *
@@ -24,33 +24,33 @@ declare const __propDef: {
              * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
              * * `responsive`: the image will scale the dimensions down for smaller viewports and scale up for larger viewports
              * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
-             **/ layout?: "fill" | "intrinsic" | "fixed" | "responsive" | undefined;
-        /** Defines how the image will fit into its parent container when using layout="fill" */ objectFit?: CSS.PropertiesHyphen['object-fit'];
-        /** Defines how the image is positioned within its parent element when using layout="fill". */ objectPosition?: CSS.PropertiesHyphen['object-position'];
-        /** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean | undefined;
+             **/ layout?: "intrinsic" | "fixed" | "responsive" | "fill";
+        /** Defines how the image will fit into its parent container when using layout="fill" */ objectFit?: CSS.PropertiesHyphen["object-fit"];
+        /** Defines how the image is positioned within its parent element when using layout="fill". */ objectPosition?: CSS.PropertiesHyphen["object-position"];
+        /** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean;
         /**
              * The HTML5 `sizes` attribute for the image
              *
              * Learn more about srcset and sizes:
              * -> https://web.dev/learn/design/responsive-images/#sizes
              * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
-             **/ sizes?: string | null | undefined;
+             **/ sizes?: HTMLImageElement["sizes"] | null;
         /**
              * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
              * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
              * Should only be used when the image is visible above the fold.
-             **/ priority?: boolean | undefined;
+             **/ priority?: boolean;
         /**
              * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
              *
              * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
-             **/ srcSetCandidates?: number[] | undefined;
+             **/ srcSetCandidates?: number[];
         /**
              * Defines which referrer is sent when fetching the image
              * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
              *
              * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
-             **/ referrerPolicy?: ReferrerPolicy | undefined;
+             **/ referrerPolicy?: ReferrerPolicy;
     };
     events: {
         load: CustomEvent<any>;

package/package/components/NakedImage/NakedImage.svelte.d.ts

@@ -3,34 +3,34 @@ import { type ResponsiveImageType } from './utils';
 declare const __propDef: {
     props: {
         /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */ data: ResponsiveImageType;
-        /** Additional CSS className for the root <picture> tag */ pictureClass?: string | null | undefined;
-        /** Additional CSS rules to add to the root <picture> tag */ pictureStyle?: string | null | undefined;
-        /** Additional CSS className for the <img> tag */ imgClass?: string | null | undefined;
-        /** Additional CSS rules to add to the <img> tag */ imgStyle?: string | null | undefined;
-        /** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean | undefined;
+        /** Additional CSS className for the root <picture> tag */ pictureClass?: string | null;
+        /** Additional CSS rules to add to the root <picture> tag */ pictureStyle?: string | null;
+        /** Additional CSS className for the <img> tag */ imgClass?: string | null;
+        /** Additional CSS rules to add to the <img> tag */ imgStyle?: string | null;
+        /** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean;
         /**
              * The HTML5 `sizes` attribute for the image
              *
              * Learn more about srcset and sizes:
              * -> https://web.dev/learn/design/responsive-images/#sizes
              * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
-             **/ sizes?: string | null | undefined;
+             **/ sizes?: HTMLImageElement["sizes"] | null;
         /**
              * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
              * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
              * Should only be used when the image is visible above the fold.
-             **/ priority?: boolean | undefined;
+             **/ priority?: boolean;
         /**
              * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
              *
              * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
-             **/ srcSetCandidates?: number[] | undefined;
+             **/ srcSetCandidates?: number[];
         /**
              * Defines which referrer is sent when fetching the image
              * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
              *
              * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
-             **/ referrerPolicy?: ReferrerPolicy | undefined;
+             **/ referrerPolicy?: ReferrerPolicy;
     };
     events: {
         load: CustomEvent<any>;

package/package/components/StructuredText/Node.svelte.d.ts

@@ -5,10 +5,10 @@ import type { PredicateComponentTuple } from '../..';
 declare const __propDef: {
     props: {
         node: Node;
-        blocks: StructuredText['blocks'];
-        inlineBlocks: StructuredText['inlineBlocks'];
-        links: StructuredText['links'];
-        components?: PredicateComponentTuple[] | undefined;
+        blocks: StructuredText["blocks"];
+        inlineBlocks: StructuredText["inlineBlocks"];
+        links: StructuredText["links"];
+        components?: PredicateComponentTuple[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/StructuredText/StructuredText.svelte.d.ts

@@ -4,7 +4,7 @@ import type { PredicateComponentTuple } from '../..';
 declare const __propDef: {
     props: {
         /** The actual field value you get from DatoCMS **/ data?: StructuredText | Document | DastNode | null | undefined;
-        components?: PredicateComponentTuple[] | undefined;
+        components?: PredicateComponentTuple[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/StructuredText/utils/Lines.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        lines?: string[] | undefined;
+        lines?: string[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -94,7 +94,7 @@ export declare const toNativeAttrValue: (propValue: any, propName: string) => an
 import type MuxPlayerElement from '@mux/mux-player';
 declare const __propDef: {
     props: Partial<MuxPlayerProps> & {
-        data?: Video | undefined;
+        data?: Video;
     };
     events: {
         abort: UIEvent;
@@ -120,8 +120,8 @@ declare const __propDef: {
         suspend: Event;
         ended: Event;
         error: ErrorEvent;
-        cuepointchange: Event | UIEvent | ProgressEvent<EventTarget> | ErrorEvent | ClipboardEvent | DragEvent | MouseEvent | FocusEvent | AnimationEvent | InputEvent | CompositionEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
-        cuepointschange: Event | UIEvent | ProgressEvent<EventTarget> | ErrorEvent | ClipboardEvent | DragEvent | MouseEvent | FocusEvent | AnimationEvent | InputEvent | CompositionEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        cuepointchange: Event | UIEvent | ProgressEvent<EventTarget> | ErrorEvent | ClipboardEvent | DragEvent | MouseEvent | PointerEvent | FocusEvent | AnimationEvent | InputEvent | ToggleEvent | CompositionEvent | FormDataEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
+        cuepointschange: Event | UIEvent | ProgressEvent<EventTarget> | ErrorEvent | ClipboardEvent | DragEvent | MouseEvent | PointerEvent | FocusEvent | AnimationEvent | InputEvent | ToggleEvent | CompositionEvent | FormDataEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/index.d.ts

@@ -1,12 +1,15 @@
 import type { Node, CdaStructuredTextValue, CdaStructuredTextRecord, TypesafeCdaStructuredTextValue, Document as StructuredTextDocument } from 'datocms-structured-text-utils';
 export { default as NakedImage } from './components/NakedImage/NakedImage.svelte';
 export type { ResponsiveImageType } from './components/NakedImage/utils';
+export { default as ContentLink } from './components/ContentLink/ContentLink.svelte';
 export { default as Head } from './components/Head/Head.svelte';
 export { default as Image } from './components/Image/Image.svelte';
 export { default as StructuredText } from './components/StructuredText/StructuredText.svelte';
 export { default as VideoPlayer } from './components/VideoPlayer/VideoPlayer.svelte';
 export * from './stores/querySubscription';
-export type { StructuredTextDocument, CdaStructuredTextValue, TypesafeCdaStructuredTextValue, CdaStructuredTextRecord, };
+export type { Controller } from '@datocms/content-link';
+export { decodeStega, stripStega } from '@datocms/content-link';
+export type { StructuredTextDocument, CdaStructuredTextValue, TypesafeCdaStructuredTextValue, CdaStructuredTextRecord };
 export type PredicateComponentTuple = [
     (n: Node) => boolean,
     any

package/package/index.js

@@ -1,6 +1,8 @@
 export { default as NakedImage } from './components/NakedImage/NakedImage.svelte';
+export { default as ContentLink } from './components/ContentLink/ContentLink.svelte';
 export { default as Head } from './components/Head/Head.svelte';
 export { default as Image } from './components/Image/Image.svelte';
 export { default as StructuredText } from './components/StructuredText/StructuredText.svelte';
 export { default as VideoPlayer } from './components/VideoPlayer/VideoPlayer.svelte';
 export * from './stores/querySubscription';
+export { decodeStega, stripStega } from '@datocms/content-link';

package/package/stores/querySubscription/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import { type ChannelErrorData, type ConnectionStatus, type Options } from 'datocms-listen';
 export type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, 'onStatusChange' | 'onUpdate' | 'onChannelError'>;
 export type EnabledQuerySubscriptionOptions<QueryResult, QueryVariables> = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datocms/svelte",
-	"version": "4.2.3",
+	"version": "4.2.4",
 	"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
 	"license": "MIT",
 	"repository": {
@@ -45,6 +45,7 @@
 		"@testing-library/svelte": "^4.1.0",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
+		"@types/node": "^25.0.10",
 		"csstype": "^3.1.3",
 		"datocms-structured-text-generic-html-renderer": "^5.0.0",
 		"doctoc": "^2.0.0",
@@ -59,18 +60,24 @@
 		"svelte": "^4.0.0",
 		"svelte-check": "^3.6.2",
 		"tslib": "^2.6.2",
-		"typescript": "^5.0.0",
+		"typescript": "^5.9.3",
 		"vite": "^5.0.0",
 		"vitest": "^1.0.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"datocms-listen": "^0.1.15",
+		"@datocms/content-link": "^0.3.9",
+		"datocms-listen": "^1.0.2",
 		"datocms-structured-text-utils": "^5.1.6",
 		"svelte-intersection-observer": "^1.0.0"
 	},
 	"exports": {
 		"./package.json": "./package.json",
+		"./components/ContentLink/ContentLink.svelte": {
+			"types": "./package/components/ContentLink/ContentLink.svelte.d.ts",
+			"svelte": "./package/components/ContentLink/ContentLink.svelte",
+			"default": "./package/components/ContentLink/ContentLink.svelte"
+		},
 		"./components/Head/Head.svelte": {
 			"types": "./package/components/Head/Head.svelte.d.ts",
 			"svelte": "./package/components/Head/Head.svelte",
@@ -173,6 +180,9 @@
 	"svelte": "./package/index.js",
 	"typesVersions": {
 		">4.0": {
+			"components/ContentLink/ContentLink.svelte": [
+				"./package/components/ContentLink/ContentLink.svelte.d.ts"
+			],
 			"components/Head/Head.svelte": [
 				"./package/components/Head/Head.svelte.d.ts"
 			],