Upgrade @datocms/content-link to ^0.3.19 and expose hue option

Add the new `hue` option (0–359, default 17/orange) to `useContentLink`
and `<ContentLink />`, passing it through to `createController`. Update
docs accordingly.

Author: stefanoverna

docs/content-link.md

@@ -269,6 +269,7 @@ The `<ContentLink />` component accepts the following props:
 | `enableClickToEdit` | `boolean \| ClickToEditOptions` | -       | Enable click-to-edit overlays on mount. Pass `true` or an object with options. If `false`/`undefined`, click-to-edit is disabled (use Alt/Option key to toggle) |
 | `stripStega`        | `boolean`                       | -       | Whether to strip stega encoding from text nodes after stamping                                                                                                  |
 | `root`              | `React.RefObject<HTMLElement>`  | -       | Ref to limit scanning to this root element instead of the entire document                                                                                       |
+| `hue`               | `number`                        | `17`    | Hue (0–359) of the overlay accent color. Default is the DatoCMS hue (`17`). Use this to match your brand or project colors                                      |
 
 ## Advanced usage: the `useContentLink` hook
 
@@ -309,6 +310,7 @@ const {
   - `{ 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
+- `hue?: number` - Hue (0–359) of the overlay accent color (default: `17`, the DatoCMS hue)
 
 **Note:** The `<ContentLink />` component allows controlling stega stripping through the `stripStega` prop. When undefined, the underlying library's default behavior is used.
 

package-lock.json

@@ -156,7 +156,7 @@
     }
   },
   "dependencies": {
-    "@datocms/content-link": "^0.3.13",
+    "@datocms/content-link": "^0.3.19",
     "datocms-listen": "^1.0.2",
     "datocms-structured-text-generic-html-renderer": "^5.0.0",
     "datocms-structured-text-utils": "^5.1.6",

package.json

@@ -28,6 +28,11 @@ export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
   enableClickToEdit?: boolean | ClickToEditOptions;
   /** Whether to strip stega encoding from text nodes after stamping. */
   stripStega?: boolean;
+  /**
+   * Hue (0–359) of the overlay accent color.
+   * @default 17 (orange)
+   */
+  hue?: number;
 };
 
 /**
@@ -99,12 +104,14 @@ export function ContentLink(props: ContentLinkProps): null {
     currentPath,
     enableClickToEdit: enableClickToEditOptions,
     stripStega,
+    hue,
     ...useContentLinkOptions
   } = props;
 
   const { enableClickToEdit, setCurrentPath } = useContentLink({
     ...useContentLinkOptions,
     enabled: stripStega !== undefined ? { stripStega } : true,
+    hue,
   });
 
   // Sync current path when it changes

src/ContentLink/index.tsx

@@ -27,6 +27,11 @@ export type UseContentLinkOptions = {
   onNavigateTo?: (path: string) => void;
   /** Ref to limit scanning to this root instead of document */
   root?: React.RefObject<HTMLElement>;
+  /**
+   * Hue (0–359) of the overlay accent color.
+   * @default 17 (orange)
+   */
+  hue?: number;
 };
 
 export interface ClickToEditOptions {
@@ -99,7 +104,7 @@ export type UseContentLinkResult = {
 export function useContentLink(
   options: UseContentLinkOptions = {},
 ): UseContentLinkResult {
-  const { enabled = true, onNavigateTo, root } = options;
+  const { enabled = true, onNavigateTo, root, hue } = options;
 
   const controllerRef = useRef<Controller | null>(null);
   // Store the callback in a ref to avoid recreating the controller when it changes
@@ -132,6 +137,7 @@ export function useContentLink(
       onNavigateTo: (path: string) => onNavigateToRef.current?.(path),
       root: root?.current || undefined,
       stripStega,
+      hue,
     });
 
     controllerRef.current = controller;
@@ -140,7 +146,7 @@ export function useContentLink(
       controller.dispose();
       controllerRef.current = null;
     };
-  }, [enabled, root]);
+  }, [enabled, root, hue]);
 
   // Stable method references that call through to the controller
   const enableClickToEdit = useCallback((opts?: ClickToEditOptions) => {