Update contentStateCallback documentation.

Author: mathewjordan

docs/components/CallToAction.tsx

@@ -8,16 +8,20 @@ type StyledCallToActionVariants = VariantProps<typeof StyledCallToAction>;
 interface CallToActionProps {
   href: string;
   text: string;
+  id?: HTMLElement["id"];
+  target?: HTMLAnchorElement["target"];
 }
 
 const CallToAction: React.FC<
   CallToActionProps & StyledCallToActionVariants
-> = ({ href, size, text }) => {
+> = ({ href, size, text, id, target }) => {
   return (
     <StyledCallToAction
       className="nx-bg-primary-400/10"
       href={href}
       size={size}
+      id={id}
+      target={target}
     >
       {text} <span>→</span>
     </StyledCallToAction>

pages/docs/viewer.mdx

@@ -8,6 +8,13 @@ import { Bleed } from "nextra-theme-docs";
 import { Tabs, Tab } from "nextra/components";
 import { Steps } from "nextra/components";
 
+export const handleContentStateCallback = ({ encoded, json }) => {
+  console.log({
+    encoded, // base64 encoded JSON
+    json, // raw JSON
+  });
+};
+
 # Viewer
 
 A UI component that renders a multicanvas IIIF item viewer with pan-zoom support for `Image` via [OpenSeadragon](https://openseadragon.github.io/) and `Video` and `Sound` content resources using the [HTML video element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
@@ -147,6 +154,7 @@ const MyCustomViewer = () => {
 | `iiifContent`                    | `string`                                                                                                                                         | Yes      |                                          |
 | `iiifContentSearchQuery`         | [See Content Search](#content-search)                                                                                                            | No       |                                          |
 | `canvasIdCallback`               | `function`                                                                                                                                       | No       |                                          |
+| `contentStateCallback`           | [See IIIF Content State](#iiif-content-state)                                                                                                    | No       |                                          |
 | `customDisplays`                 | [See Custom Displays](#custom-displays)                                                                                                          | No       |                                          |
 | `customTheme`                    | `object`                                                                                                                                         | No       |                                          |
 | `plugins`                        | [See Plugins](#plugins)                                                                                                                          | No       |                                          |
@@ -284,9 +292,56 @@ Clients may wish to use their own display components (for example a PDF Viewer,
 | `customDisplays.target.canvasId`        | `string[]`   | No       |         |
 | `customDisplays.target.paintingFormat`  | `string[]`   | No       |         |
 
-### Content search
+### IIIF Content State
+
+Clover supports IIIF Content State in multiple ways. This specifications allows you to render a provided state to the Viewer component, including the active canvas, a `xywh` or `t` selector, and body which might be textual content. The Clover Viewer can both provide the current state of a component and render a given state.
+
+#### Content State Callback
+
+You can use the `contentStateCallback` prop to receive the current content state as a base64 encoded JSON string and as raw JSON. Using this, you can provide a consuming application the view of the user. This could helpful for sharing or storing the state for later use by a user. To review this further, see [Content State](viewer/content-state).
+
+<Tabs items={["Code", "Preview"]}>
+  {/* prettier-ignore */}
+  <Tab>
+    ```jsx
+      const handleContentStateCallback = ({ encoded, json }) => {
+        console.log({
+          encoded, // base64 encoded JSON
+          json, // raw JSON
+        });
+      };
+
+      <Viewer
+        iiifContent="https://iiif.harvardartmuseums.org/manifests/object/299837"
+        contentStateCallback={handleContentStateCallback}
+      />;
+    ```
+
+  </Tab>
+  {/* prettier-ignore */}
+  <Tab>
+    **Note:** Inspect the page to track your console log.
+    
+    <div style={{ position: "relative", height: "700px", zIndex: "0" }}>
+      <Viewer
+        iiifContent="https://iiif.harvardartmuseums.org/manifests/object/299837"
+        contentStateCallback={handleContentStateCallback}
+        options={{
+          showTitle: false,
+          informationPanel: {
+            open: "false",
+            renderAbout: false,
+            renderToggle: false,
+          }
+        }}
+      />
+    </div>
+  </Tab>
+</Tabs>
 
-Clover supports IIIF content search v2. In order to display content search in the information panel, add a content search service to the manifest.
+### IIIF Content Search
+
+Clover supports IIIF Content Search v2. In order to display content search in the information panel, add a content search service to the manifest.
 
 ```json
 {
@@ -478,11 +533,13 @@ Additional CSS classes are made available on structural HTML elements in the Vie
   - [Ruby](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ruby) (`<ruby/>`) and [Ruby Text](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rt) (`<rt/>`)
 
 - Several WebVTT-specific tags are processed in special ways:
+
   - Voice Tags (e.g., `<v speaker>Caption</v>`) are wrapped in `<span title="speaker"/>` and can be styled using the CSS selector `.webvtt-cue span[title="speaker"]`
   - Class Tags (e.g., `<c.classToAdd>Caption</c>`) are wrapped in `<span class="classtoAdd"/>` and can be styled using the CSS selector `.webvtt-cue span.classToAdd`
   - Language Tags (e.g., `<lang.en-US>English Caption</lang>`) are handled the same as Class Tags - wrapped in `<span class="en-US"/>` and can be styled using the CSS selector `.webvtt-cue span.en-US`
 
 - WebVTT CSS extensions (`STYLE` blocks and `::cue` pseudo-elements) are not supported
+
 ---
 
 ### Request Headers

pages/docs/viewer/content-state.mdx

@@ -86,11 +86,21 @@ This is a helper page to demonstrate the retrieving the current IIIF Content Sta
 
 ### Current Content State
 
-This section displays the raw JSON and base64 encoded JSON of the IIIF Content State for this Viewer instance. <a href="#" id="content-state-preview">Preview</a> the current content state of the Viewer component, which
+This section displays the raw JSON and base64 encoded JSON of the IIIF Content State for this Viewer instance. Preview the current content state of the Viewer component, which
 includes information about the currently displayed canvas, zoom level, and other
 relevant details. This can be useful for debugging or for saving the state of
 the viewer.
 
+<div style={{ marginTop: "1rem" }}>
+  <CallToAction
+    href="/docs/viewer"
+    text="Preview Content State"
+    size="small"
+    id="content-state-preview"
+    target="_blank"
+  />
+</div>
+
 <div
   style={{
     display: "flex",
@@ -113,7 +123,7 @@ the viewer.
         fontSize: "0.833rem",
         resize: "none",
       }}
-      placeholder='Enter any body text here to see how it is displayed in the viewer'
+      placeholder='Enter any body text here to see how it is displayed in the viewer. Note that character lenghts longer than a few hundred characters may not display correctly in the viewer due to limitations in browser maxchar lengths.'
     ></textarea>
   </div>
   <div style={{ width: "33.33%" }}>