@datocms/astro 0.6.5 → 0.6.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@datocms/astro",
   "description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
   "type": "module",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "sideEffects": false,
   "repository": {
     "type": "git",

package/src/ContentLink/ContentLink.astro

@@ -34,7 +34,7 @@ export interface Props {
    *
    * - `true`: Enable click-to-edit mode immediately
    * - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
-   * - `undefined`: Don't enable automatically (use Alt/Option key to toggle)
+   * - `false` or `undefined`: Don't enable automatically (use Alt/Option key to toggle)
    *
    * @example
    * ```astro
@@ -145,8 +145,8 @@ const enableClickToEditValue =
       document.addEventListener('astro:page-load', this.pageLoadHandler);
 
       // Enable click-to-edit mode if requested via prop
-      if (enableClickToEdit !== undefined) {
-        if (typeof enableClickToEdit === 'boolean') {
+      if (enableClickToEdit) {
+        if (enableClickToEdit === true) {
           this.controller.enableClickToEdit();
         } else {
           this.controller.enableClickToEdit(enableClickToEdit);

package/src/ContentLink/README.md

@@ -34,8 +34,11 @@ Visual Editing transforms how editors interact with your content by letting them
 - [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)
+  - [`stripStega()` works with any data type](#stripstega-works-with-any-data-type)
 - [Troubleshooting](#troubleshooting)
   - [Click-to-edit overlays not appearing](#click-to-edit-overlays-not-appearing)
   - [Navigation not syncing in Web Previews plugin](#navigation-not-syncing-in-web-previews-plugin)
@@ -78,7 +81,7 @@ const result = await executeQuery(query, {
 ---
 ```
 
-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.
+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.
 
 ### Step 2: Add the ContentLink component
 
@@ -202,13 +205,13 @@ This ensures:
 - Clicking the main text opens the Structured Text field editor
 - Clicking an embedded block opens that specific block's editor
 
-## Manual overlays with `data-datocms-content-link-url`
+## Manual overlays
 
-Text-based fields automatically include stega-encoded metadata. However, non-text fields (booleans, numbers, dates, JSON) cannot contain stega encoding.
+In some cases, you may want to manually create click-to-edit overlays for content that doesn't have stega encoding.
 
-For these fields, manually specify the edit URL using the `data-datocms-content-link-url` attribute:
+### Using `data-datocms-content-link-url`
 
-**1. Request the `_editingUrl` field in your GraphQL query:**
+You can add the `data-datocms-content-link-url` attribute with a DatoCMS editing URL:
 
 ```graphql
 query {
@@ -222,17 +225,7 @@ query {
 }
 ```
 
-**2. Add the attribute to your HTML element:**
-
 ```astro
----
-const { product } = await executeQuery(query, {
-  token: import.meta.env.DATOCMS_API_TOKEN,
-  contentLink: 'v1',
-  baseEditingUrl: 'https://your-project.admin.datocms.com',
-});
----
-
 <div>
   <span data-datocms-content-link-url={product._editingUrl}>
     ${product.price}
@@ -244,7 +237,19 @@ const { product } = await executeQuery(query, {
 </div>
 ```
 
-The `_editingUrl` field ensures the URL format is always correct and adapts to future changes automatically.
+### 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:
+
+```astro
+<!-- product.asset.video.alt contains stega-encoded info -->
+<video
+  src={product.asset.video.url}
+  data-datocms-content-link-source={product.asset.video.alt}
+  controls></video>
+```
+
+This is useful for structural elements like `<video>`, `<audio>`, or `<iframe>` where stega encoding in visible text would be problematic.
 
 ## Low-level utilities
 
@@ -272,6 +277,29 @@ const cleanText = stripStega(text);
 - **Programmatic text processing**: Remove invisible characters before string operations
 - **Debugging**: Use `decodeStega()` to inspect what editing URLs are embedded in content
 
+### `stripStega()` works with any data type
+
+The `stripStega()` function handles strings, objects, arrays, and primitives:
+
+```js
+// 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' },
+  ],
+});
+
+// Works with arrays
+stripStega(['First‎', 'Second‎', 'Third‎']);
+```
+
 ## Troubleshooting
 
 ### Click-to-edit overlays not appearing