DOCX Viewer

1"use client";
2 
3import * as React from "react";
4 
5import { clearDocxDocumentResource } from "@/lib/docx-document-resource";
6import { isResourceError, isViewerFormatError } from "@/lib/viewer-errors";
7import {
8  createViewerResource,
9  type ViewerResource,
10} from "@/lib/viewer-resource";
11import { useIsClient } from "@/components/ui/use-is-client";
12import { ViewerErrorBoundary } from "@/components/ui/viewer-error";
13 
14import { DocxViewerFallback } from "./docx-viewer-chrome";
15import { DocxViewerContent } from "./docx-viewer-content";
16import type {
17  DocxResourceContentProps,
18  DocxViewerHandle,
19  DocxViewerProps,
20} from "./docx-viewer-types";
21 
22export type {
23  DocxDocumentSource,
24  DocxResourceContentProps,
25  DocxTarget,
26  DocxViewerHandle,
27  DocxViewerProps,
28} from "./docx-viewer-types";
29 
30export type DocxViewerProviderProps = {
31  children: React.ReactNode;
32  resource: ViewerResource;
33};
34 
35export type DocxViewerDocumentProps = Omit<
36  DocxResourceContentProps,
37  "resource"
38>;
39 
40export const DocxViewer = React.forwardRef<DocxViewerHandle, DocxViewerProps>(
41  function DocxViewer(props, ref) {
42    const { source, ...resourceProps } = props;
43    const resource = React.useMemo(
44      () => createViewerResource(source),
45      [source],
46    );
47    return (
48      <DocxResourceContent {...resourceProps} ref={ref} resource={resource} />
49    );
50  },
51);
52 
53const DocxViewerResourceContext = React.createContext<ViewerResource | null>(
54  null,
55);
56 
57export function DocxViewerProvider({
58  children,
59  resource,
60}: DocxViewerProviderProps) {
61  return (
62    <DocxViewerResourceContext.Provider value={resource}>
63      {children}
64    </DocxViewerResourceContext.Provider>
65  );
66}
67 
68function useDocxViewerResource(): ViewerResource {
69  const resource = React.useContext(DocxViewerResourceContext);
70  if (!resource) {
71    throw new Error(
72      "DocxViewerDocument must be used within DocxViewerProvider.",
73    );
74  }
75  return resource;
76}
77 
78export const DocxViewerDocument = React.forwardRef<
79  DocxViewerHandle,
80  DocxViewerDocumentProps
81>(function DocxViewerDocument(props, ref) {
82  const resource = useDocxViewerResource();
83  return <DocxResourceContent {...props} ref={ref} resource={resource} />;
84});
85 
86export const DocxResourceContent = React.forwardRef<
87  DocxViewerHandle,
88  DocxResourceContentProps
89>(function DocxResourceContent(props, ref) {
90  const isClient = useIsClient();
91  const resource = props.resource;
92  if (!isClient) {
93    return (
94      <DocxViewerFallback
95        bare={props.bare}
96// … truncated