Update to content-link 0.3.7 with stripStega support

- Update dependency to @datocms/content-link ^0.3.7
- ContentLink component: always pass stripStega: true and remove enabled prop
- useContentLink hook: expose stripStega option via enabled parameter
  - enabled can now be: boolean | { stripStega: boolean }
  - true (default): preserves stega encoding
  - false: disables controller
  - { stripStega: true }: strips encoding for clean DOM
- Update documentation to reflect new API

Author: stefanoverna

docs/content-link.md

@@ -241,11 +241,10 @@ The `<ContentLink />` component accepts the following props:
 
 | Prop                | Type                                           | Default | Description                                                                                                                                            |
 | ------------------- | ---------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `enabled`           | `boolean`                                      | `true`  | Whether the controller is enabled                                                                                                                      |
 | `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                                |
-| `root`              | `React.RefObject<ParentNode>`                  | -       | Ref to limit scanning to this root element instead of the entire document                                                                              |
+| `root`              | `React.RefObject<HTMLElement>`                 | -       | Ref to limit scanning to this root element instead of the entire document                                                                              |
 
 ## Advanced usage: the `useContentLink` hook
 
@@ -268,12 +267,27 @@ const {
   flashAll,                // Highlight all editable elements
   setCurrentPath,          // Notify Web Previews plugin of current path
 } = useContentLink({
+  // enabled can be:
+  // - true (default): Enable with default settings (stega encoding preserved)
+  // - false: Disable the controller
+  // - { stripStega: true }: Enable and strip stega encoding for clean DOM
   enabled: true,
   onNavigateTo: (path) => { /* handle navigation */ },
   root: elementRef,
 });
 ```
 
+**Options:**
+
+- `enabled?: boolean | { stripStega: boolean }` - Controls whether the controller is enabled and how it handles stega encoding:
+  - `true` (default): Enables the controller with stega encoding preserved in the DOM (allows controller recreation)
+  - `false`: Disables the controller completely
+  - `{ stripStega: true }`: Enables the controller and permanently removes stega encoding from text nodes for clean `textContent` access
+- `onNavigateTo?: (path: string) => void` - Callback when Web Previews plugin requests navigation
+- `root?: React.RefObject<HTMLElement>` - Ref to limit scanning to this root element
+
+**Note:** The `<ContentLink />` component always uses `stripStega: true` for clean DOM output.
+
 ### Example: Custom editing toolbar
 
 ```jsx

package-lock.json

@@ -149,7 +149,7 @@
     "react": ">= 16.12.0 || ^19.0.0-rc"
   },
   "dependencies": {
-    "@datocms/content-link": "^0.3.6",
+    "@datocms/content-link": "^0.3.7",
     "@mux/mux-player-react": "*",
     "datocms-listen": "^0.1.9",
     "datocms-structured-text-generic-html-renderer": "^5.0.0",

package.json

@@ -6,7 +6,7 @@ import {
   useContentLink,
 } from '../useContentLink/index.js';
 
-export type ContentLinkProps = UseContentLinkOptions & {
+export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
   /** Current pathname to sync with Web Previews plugin */
   currentPath?: string;
   /** Enable click-to-edit on mount. Pass true for default behavior or an object with scrollToNearestTarget. If undefined, click-to-edit is disabled. */
@@ -84,9 +84,11 @@ export function ContentLink(props: ContentLinkProps): null {
     ...useContentLinkOptions
   } = props;
 
-  const { enableClickToEdit, setCurrentPath } = useContentLink(
-    useContentLinkOptions,
-  );
+  const { enableClickToEdit, setCurrentPath } = useContentLink({
+    ...useContentLinkOptions,
+    // Always strip stega encoding in the component for clean DOM
+    enabled: { stripStega: true },
+  });
 
   // Sync current path when it changes
   useEffect(() => {
@@ -95,7 +97,7 @@ export function ContentLink(props: ContentLinkProps): null {
     }
   }, [currentPath, setCurrentPath]);
 
-  // Optionally enable click-to-edit on mount
+  // Enable click-to-edit on mount if requested
   useEffect(() => {
     if (enableClickToEditOptions !== undefined) {
       enableClickToEdit(

src/ContentLink/index.tsx

@@ -8,12 +8,25 @@ export type { Controller } from '@datocms/content-link';
 export { decodeStega, stripStega } from '@datocms/content-link';
 
 export type UseContentLinkOptions = {
-  /** Whether the controller is enabled (default: true) */
-  enabled?: boolean;
+  /**
+   * Whether the controller is enabled, or an options object.
+   * - Pass `true` (default): Enables the controller with stega encoding preserved (allows controller recreation)
+   * - Pass `false`: Disables the controller completely
+   * - Pass `{ stripStega: true }`: Enables the controller and strips stega encoding after stamping
+   *
+   * When stripStega is false (default): Stega encoding remains in the DOM, allowing controllers
+   * to be disposed and recreated on the same page. The invisible characters don't affect display
+   * but preserve the source of truth.
+   *
+   * When stripStega is true: Stega encoding is permanently removed from text nodes, providing
+   * clean textContent for programmatic access. However, recreating a controller on the same page
+   * won't detect elements since the encoding is lost.
+   */
+  enabled?: boolean | { stripStega: boolean };
   /** Callback when Web Previews plugin requests navigation */
   onNavigateTo?: (path: string) => void;
   /** Ref to limit scanning to this root instead of document */
-  root?: React.RefObject<ParentNode>;
+  root?: React.RefObject<HTMLElement>;
 };
 
 export type UseContentLinkResult = {
@@ -75,17 +88,24 @@ export function useContentLink(
   // Create/dispose controller based on enabled flag and root only
   // The onNavigateTo callback is accessed via ref, so changes don't trigger recreation
   useEffect(() => {
-    if (!enabled) {
+    // Check if controller is disabled
+    const isEnabled = enabled === true || (typeof enabled === 'object' && enabled !== null);
+
+    if (!isEnabled) {
       if (controllerRef.current) {
         controllerRef.current.dispose();
         controllerRef.current = null;
       }
       return;
     }
 
+    // Extract stripStega option if enabled is an object
+    const stripStega = typeof enabled === 'object' ? enabled.stripStega : false;
+
     const controller = createController({
       onNavigateTo: (path: string) => onNavigateToRef.current?.(path),
       root: root?.current || undefined,
+      stripStega,
     });
 
     controllerRef.current = controller;