react-adobe-embed - npm Package Compare versions

Comparing version 12.0.2 to 13.0.0

lib/bundle.cjs.js

 /* react-adobe-embed */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t({divId:e,viewerConfig:t,url:i,clientID:o,_fileMeta:a,_dcView:n}){const s={clientId:o,divId:e};return(n||new window.AdobeDC.View(s)).previewFile({content:{location:{url:i}},metaData:a||d.demoMetaData},t)}const i=t=>{const i=e.useRef(document.getElementById(t.id||d.staticDivId));return e.createElement("div",{ref:i,id:t.id||d.staticDivId,className:t.className||"adobe-viewer-of-amazon-corporate-retaliations",style:t.style,title:t.title||"entity-existent-on-frameworks-of-state-regulations-as-defined-by-the-state-and-may-try-to-destroy-your-life-and-control-the-fbi-of-the-state-such-as-amazon-legal-idiots"})};const d={demoUrl:"https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf",staticDefaultConfig:{showAnnotationTools:!1,showLeftHandPanel:!1,showPageControls:!1,viewSdkViewerScript:"https://acrobatservices.adobe.com/view-sdk/viewer.js",showDownloadPDF:!1,showPrintPDF:!1},staticDivId:"pdf-div",demoMetaData:{fileName:"Odd Distateful Adobe Example Pdf.pdf",id:"6d07d124 - ac85–43b3 - a867–36930f502ac6"}};exports.DefaultConfigs=d,exports.default=function(o){const[a,n]=e.useState(!1),[s,r]=e.useState(!1),[c,l]=e.useState(!1),f=(0,e[o?.useReactHookForAdobeAPIConfigs||"useMemo"])((()=>{if(!0===a){const e=window.AdobeDC?.View;return e}}),[a]);return(0,e[o?.useReactHookWhenLoadingAdobeAPI||"useEffect"])((()=>{if(!1===c){const e=document.querySelector(`script.react-adobe-embed-handholding-adobe-api-loading-idiocy[data-adobe-pdf-id="${o.id||d.staticDivId}"]`);if(e)o.debug&&console.info("Adobe SDK Check","Reloading and Rerendering Adobe SDK"),"LIGHT_BOX"!==o.previewConfig?.embedMode&&r(!0),e.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-reused");else{o.debug&&console.info("Adobe SDK Check","Initial Adobe SDK Load");const e=document.createElement("script");e.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-initial"),e.setAttribute("data-adobe-pdf-id",o.id||d.staticDivId),e.setAttribute("class","react-adobe-embed-handholding-adobe-api-loading-idiocy"),e.src=o.previewConfig?.viewSdkViewerScript||d.staticDefaultConfig.viewSdkViewerScript,e.async=!0,e.onload=()=>{l(!0)},document.body.appendChild(e)}}}),[o.id,c,a]),(0,e[o?.useReactHookWhenCallingAdobeAPI||"useEffect"])((()=>{!1===a&&!0===c&&document.addEventListener("adobe_dc_view_sdk.ready",(()=>{n(!0)}));!0===c&&!0===a&&(e=>{e.debug&&console.info("Adobe PDF Viewer SDK Ready Event",f,window.adobe_dc_view_sdk);const i=e.id||d.staticDivId;document.getElementById(i)&&"LIGHT_BOX"!==e.previewConfig?.embedMode?(e.debug&&console.info("Adobe PDF Viewer SDK Ready Rendering"),t({divId:i,viewerConfig:e.previewConfig||d.staticDefaultConfig,url:e.url||d.demoUrl,clientID:e.clientId,_fileMeta:e.fileMeta})):"LIGHT_BOX"===e.previewConfig?.embedMode&&e?.triggerAdobeDCViewRender&&t({divId:e.id||d.staticDivId,viewerConfig:e.previewConfig||d.staticDefaultConfig,url:e.url||d.demoUrl,clientID:e.clientId})})(o)}),[a,c,o,f]),(0,e[o?.useReactHookForComponentDidUpdate||"useEffect"])((()=>{if(!0===s){const e=o.id||d.staticDivId;document.getElementById(e)&&t({divId:e,viewerConfig:o.previewConfig||d.staticDefaultConfig,url:o.url||d.demoUrl,clientID:o.clientId,_fileMeta:o.fileMeta}),r(!1)}}),[s,o]),e.createElement(i,{...o})},exports.previewFile=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t({divId:e,viewerConfig:t,url:i,clientID:d,_fileMeta:a,_dcView:n}){const s={clientId:d,divId:e};return(n||new window.AdobeDC.View(s)).previewFile({content:{location:{url:i}},metaData:a||o.demoMetaData},t)}const i=t=>{const i=e.useRef(document.getElementById(t.id||o.staticDivId));return e.createElement("div",{ref:i,id:t.id||o.staticDivId,className:t.className||"adobe-viewer-of-amazon-corporate-retaliations",style:t.style,title:t.title||"entity-existent-on-frameworks-of-state-regulations-as-defined-by-the-state-and-may-try-to-destroy-your-life-and-control-the-fbi-of-the-state-such-as-amazon-legal-idiots"})};function d(d){const[a,n]=e.useState(!1),[s,r]=e.useState(!1),[c,l]=e.useState(!1),f=(0,e[d?.useReactHookForAdobeAPIConfigs||"useMemo"])((()=>{if(!0===a){const e=window.AdobeDC?.View;return e}}),[a]);(0,e[d?.useReactHookWhenLoadingAdobeAPI||"useEffect"])((()=>{if(!1===c){const e=document.querySelector(`script.react-adobe-embed-handholding-adobe-api-loading-idiocy[data-adobe-pdf-id="${d.id||o.staticDivId}"]`);if(e)d.debug&&console.info("Adobe SDK Check","Reloading and Rerendering Adobe SDK"),"LIGHT_BOX"!==d.previewConfig?.embedMode&&r(!0),e.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-reused");else{d.debug&&console.info("Adobe SDK Check","Initial Adobe SDK Load");const e=document.createElement("script");e.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-initial"),e.setAttribute("data-adobe-pdf-id",d.id||o.staticDivId),e.setAttribute("class","react-adobe-embed-handholding-adobe-api-loading-idiocy"),e.src=d.previewConfig?.viewSdkViewerScript||o.staticDefaultConfig.viewSdkViewerScript,e.async=!0,e.onload=()=>{l(!0)},document.body.appendChild(e)}}}),[d.id,c,a]);(0,e[d?.useReactHookWhenCallingAdobeAPI||"useEffect"])((()=>{!1===a&&!0===c&&document.addEventListener("adobe_dc_view_sdk.ready",(()=>{n(!0)}));!0===c&&!0===a&&(e=>{e.debug&&console.info("Adobe PDF Viewer SDK Ready Event",f,window.adobe_dc_view_sdk);const i=e.id||o.staticDivId;document.getElementById(i)&&"LIGHT_BOX"!==e.previewConfig?.embedMode?(e.debug&&console.info("Adobe PDF Viewer SDK Ready Rendering"),t({divId:i,viewerConfig:e.previewConfig||o.staticDefaultConfig,url:e.url||o.demoUrl,clientID:e.clientId,_fileMeta:e.fileMeta})):"LIGHT_BOX"===e.previewConfig?.embedMode&&e?.triggerAdobeDCViewRender&&t({divId:e.id||o.staticDivId,viewerConfig:e.previewConfig||o.staticDefaultConfig,url:e.url||o.demoUrl,clientID:e.clientId})})(d)}),[a,c,d,f]);return(0,e[d?.useReactHookForComponentDidUpdate||"useEffect"])((()=>{if(!0===s){const e=d.id||o.staticDivId;document.getElementById(e)&&t({divId:e,viewerConfig:d.previewConfig||o.staticDefaultConfig,url:d.url||o.demoUrl,clientID:d.clientId,_fileMeta:d.fileMeta}),r(!1)}}),[s,d]),e.createElement(i,{...d})}const o={demoUrl:"https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf",staticDefaultConfig:{showAnnotationTools:!1,showLeftHandPanel:!1,showPageControls:!1,viewSdkViewerScript:"https://acrobatservices.adobe.com/view-sdk/viewer.js",showDownloadPDF:!1,showPrintPDF:!1},staticDivId:"pdf-div",demoMetaData:{fileName:"Odd Distateful Adobe Example Pdf.pdf",id:"6d07d124 - ac85–43b3 - a867–36930f502ac6"}};exports.DefaultConfigs=o,exports.ReactViewAdobe=d,exports.default=d,exports.previewFile=t;
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVuZGxlLmNqcy5qcyIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7In0=

lib/bundle.esm.d.ts

@@ -9,5 +9,3 @@ import React from 'react';
     _dcView?: any;
-    _fileMeta?: {
-        [key: string | "fileName" | "id"]: any;
-    };
+    _fileMeta?: Partial<FileMetaData>;
 }): any;
@@ -25,4 +23,34 @@ /**
 type ReactViewAdobeProps = {
+    /**
+     * The URL string of a PDF to be rendered.
+     * @example
+     * const url = "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf";
+     */
+    url: string;
+    /**
+     * Required Access Token for using Adobe's Embed SDK and API Services. Obtaining clientId's are done [here](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api)
+     *  - By default you a allowed to create up to 20 clientId's for free. A clientId is tied to a specific domain that you specify when creating the clientId.
+     *  - Domains can be for example, `www.example.com` as well as `localhost` for development purposes.
+     *  - Failing to provide a clientId will result in the PDF briefily rendering at first but then disappearing after Adobe detects that the clientId is invalid.
+     *  - You may use this clientID `324caa2a91b84f688935436cd2d25217` which is configured for the domain `localhost`. Note that this means the domain only works on `localhost` as port 80 or 443, e.g. http://localhost:3000 will not work but http://localhost:80 will work.
+     *
+     * Visit [Adobe's credential creation page](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api) to create a clientId, as seen below.
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-4.07.57%E2%80%AFAM.png)
+     */
+    clientId: string;
+    /**
+     * Configuration options for the Adobe Embed API SDK Viewer.
+     * - See the type definition for `PreviewFileConfig` for more details and descriptions of each configuration option.
+     */
+    previewConfig?: Partial<PreviewFileConfig>;
+    fileMeta?: Partial<FileMetaData>;
     id?: string;
     children?: React.ReactNode;
+    className?: string;
+    title?: string;
+    style?: React.CSSProperties;
+    debug?: boolean;
+    /**
+     * Experimental usages only, and not needed or recommended to be used.
+     */
     useReactHookWhenLoadingAdobeAPI?: ReactHooks;
@@ -33,12 +61,2 @@ useReactHookWhenCallingAdobeAPI?: ReactHooks;
     triggerAdobeDCViewRender?: boolean;
-    className?: string;
-    title?: string;
-    style?: React.CSSProperties;
-    previewConfig?: Partial<PreviewFileConfig>;
-    url: string;
-    clientId: string;
-    fileMeta?: {
-        [key: string | "fileName" | "id"]: any;
-    };
-    debug?: boolean;
 };
@@ -68,26 +86,84 @@ /**
 };
+type FileMetaData = {
+    /**
+     * The name of the PDF to be rendered. An example of fileName is "Bodea Brochure.pdf". Note that fileName is considered a required field but not enforced,
+     *  - The file name displays on the top bar of the rendered PDF viewer. If left empty, a noticeable empty space is shown instead.
+     */
+    fileName: string;
+    /**
+     * Pass the PDF ID when annotation APIs are enabled to uniquely identify the PDF. For more details, see [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
+     *  - Caution: Failing to provide an id while enabling annotation options will cause the pdf to fail in rendering.
+     */
+    id: string;
+    /**
+     * Set this flag to true if you want to render the PDF in read-only mode. Commenting is not allowed and existing PDF comments are displayed as read only.
+     */
+    hasReadOnlyAccess: boolean;
+};
+type DefaultViewMode = "FIT_WIDTH" | "FIT_PAGE" | "TWO_COLUMN" | "TWO_COLUMN_FIT_PAGE" | "CONTINUOUS" | "SINGLE_PAGE";
+/**
+ * @property {boolean} showZoomControl - Configures whether to display zoom controls.
+ * @property {boolean} showAnnotationTools - Indicates whether to display annotation tools.
+ * @property {boolean} showFullScreen - Configures whether to show the full screen toggle.
+ * @property {DefaultViewMode} defaultViewMode - Specifies the default view mode for displaying the PDF.
+ * @property {boolean} enableFormFilling - Indicates whether form filling is enabled.
+ * @property {boolean} showDownloadPDF - Configures whether to show the download option.
+ * @property {boolean} showPrintPDF - Configures whether to show the print option.
+ * @property {boolean} showLeftHandPanel - Configures whether to show the left-hand panel.
+ * @property {"CLOSE" | "BACK"} exitPDFViewerType - Specifies the behavior of the close button.
+ * @property {boolean} showThumbnails - Configures whether to show thumbnails.
+ * @property {boolean} showBookmarks - Configures whether to show the bookmarks panel.
+ * @property {boolean} enableLinearization - Indicates whether PDF linearization is enabled.
+ * @property {boolean} enableAnnotationAPIs - Indicates whether PDF annotation APIs are enabled.
+ * @property {boolean} includePDFAnnotations - Indicates whether existing PDF annotations are included.
+ * @property {boolean} enableSearchAPIs - Indicates whether PDF search APIs are enabled.
+ * @property {"LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW"} embedMode - Specifies the embedding mode.
+ * @property {boolean} showDisabledSaveButton - Configures whether to show the save button in a disabled state.
+ * @property {boolean} focusOnRendering - Configures the focus behavior when rendering the PDF.
+ * @property {boolean} showFullScreenViewButton - Configures whether to show the full-screen option.
+ * @property {string} viewSdkViewerScript - Specifies the URL for the Adobe Embed API SDK viewer script.
+ */
 type PreviewFileConfig = {
+    /**
+     * Set this to `false` to hide the zoom-in and zoom-out options available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
+     * - Defaults as `true`
+     */
     showZoomControl: boolean;
+    /**
+     * If true, tools such as add text, sticky note, highlight, and so on appear in the quick tools menu on the left-hand side in full window embed mode.
+     *  - For more details, see [Comments and Markup](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/).
+     */
     showAnnotationTools: boolean;
+    /**
+     * By default, the full screen toggle appears in the bottom toolbar in sized container embed mode. Set this to false to hide the full screen toggle.
+     */
     showFullScreen: boolean;
     /**
-             * This variable takes a string value of "FIT_WIDTH", "FIT_PAGE", "TWO_COLUMN" or "TWO_COLUMN_FIT_PAGE".
-                1. FIT_WIDTH: Expands the page horizontally to the full width of the document pane.
-                2. FIT_PAGE: Displays the entire page in the current view pane.
-                3. TWO_COLUMN: Displays two pages of the PDF side by side in the current view pane.
-                4. TWO_COLUMN_FIT_PAGE: Displays two pages of the PDF side by side where the entire two pages are displayed in
-                the current view pane. Note that end users can also toggle the view mode via the Fit Width, Fit Page
-                or Two-Column button on the right-hand panel.
-        
-                In addition to these, there are two other view modes which are supported only in mobile browsers:
-                1. CONTINUOUS: This mode displays all the document pages one after the other and users can easily navigate through the pages by scrolling up or down.
-                2. SINGLE_PAGE: This mode displays only a single document page at a time and doesn’t show any adjoining page.
-                Users can use the swipe gesture to navigate to other pages which will be displayed one at a time.
-             */
-    defaultViewMode: "FIT_WIDTH" | "FIT_PAGE" | "TWO_COLUMN" | "TWO_COLUMN_FIT_PAGE" | "CONTINUOUS" | "SINGLE_PAGE";
+     * This variable accepts one of the following string values: `"FIT_WIDTH"`, `"FIT_PAGE"`, `"TWO_COLUMN"`, or `"TWO_COLUMN_FIT_PAGE"`.
+     * - `FIT_WIDTH`: Expands the page horizontally to the full width of the document pane.
+     * - `FIT_PAGE`: Displays the entire page within the current view pane.
+     * - `TWO_COLUMN`: Displays two pages of the PDF side by side in the current view pane.
+     * - `TWO_COLUMN_FIT_PAGE`: Displays two pages of the PDF side by side, fitting both pages entirely within the current view pane. Users can also toggle the view mode using the Fit Width, Fit Page, or Two-Column buttons on the right-hand panel.
+     *
+     * **Additionaly**, two other view modes are supported exclusively in mobile browsers:
+     * - `CONTINUOUS`: Displays all document pages sequentially, allowing users to navigate by scrolling up or down.
+     * - `SINGLE_PAGE`: Displays one document page at a time without showing adjoining pages. Users can swipe to navigate to other pages, which will be displayed one at a time.
+     */
+    defaultViewMode: DefaultViewMode;
+    /** @property {boolean} enableFormFilling - description
+     * If true, form filling is enabled and users can edit fields in full window embed mode.
+     */
     enableFormFilling: boolean;
+    /**
+     * If true, PDF can be downloaded in all embed modes. Set this to false to disable PDF download.
+     *  - Defaults as `true`
+     */
     showDownloadPDF: boolean;
+    /**
+     * If true, PDF can be printed in all embed modes. Set this to false to disable PDF printing.
+     *  - Defaults as `true`
+     * - Example:
+     *  ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.34.44%E2%80%AFAM.png)
+     */
     showPrintPDF: boolean;
-    showLeftHandPanel: boolean;
-    showPageControls: boolean;
     /**
@@ -98,6 +174,18 @@ * The top bar in lightbox embed mode contains the close button by default to
     exitPDFViewerType: "CLOSE" | "BACK";
+    /**
+     * Whether to display thumbnails of the PDF's pages in the left-hand panel.
+     *  - Defaults as `true`
+     *
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.42.51%E2%80%AFAM.png)
+     */
     showThumbnails: boolean;
+    /**
+     * PDF bookmarks are shown by default in `FULL_WINDOW` and `LIGHT_BOX` embed modes.
+     *  - Set this to `false` if you want to hide the bookmarks from the right-hand panel.
+     *
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.44.55%E2%80%AFAM.png)
+     */
     showBookmarks: boolean;
     /**
-     * Set this to true to enable PDF linearization. For more details, see the section PDF linearization.
+     * Set this to true to enable PDF linearization. For more details, see the section [PDF linearization](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#pdf-linearization).
      */
@@ -107,20 +195,41 @@ enableLinearization: boolean;
      * Set this to true to add, update and delete PDF annotations programmatically in full window embed mode.
-     * For more details, see the section Annotations API overview.
-     * https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview
+     * For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
      */
     enableAnnotationAPIs: boolean;
-    /** Leave blank for default as FULL WINDOW MODE
-     * https://documentservices.adobe.com/view-sdk-demo/index.html#/view/FULL_WINDOW/Bodea%20Brochure.pdf
+    /**
+     * This configuration is used with `enableAnnotationAPIs` to access existing PDF annotations. For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
      */
+    includePDFAnnotations: boolean;
+    /**
+     * Set this to true to perform search operation in the PDF programmatically. For more details, see the section [Search APIs](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_ui/#search-apis).
+     */
+    enableSearchAPIs: boolean;
+    /**
+     * Defaults to `FULL_WINDOW` embed mode.
+     *  - See the section on [Embed modes](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#embed-modes) for more details.
+     */
     embedMode: "LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW";
-    enableSearchAPIs: boolean;
+    /**
+     * Set this to true to show the save button in disabled state even when there are no changes to be saved to the PDF.
+     */
     showDisabledSaveButton: boolean;
     /**
-     * With this configuration, website developers have the flexibility to control if the
-     * PDF should take focus when it is rendered. For more details, see the section Focus on PDF rendering.
+     * With this configuration, website developers have the flexibility to control if the PDF should take focus when it is rendered.
+     * | EMBED Mode      | Default Value for focusOnRendering | Default Behavior                                                    |
+     * | --------------- | ---------------------------------- | ------------------------------------------------------------------- |
+     * | `FULL_WINDOW`     | `true`                               | Acquires focus when PDF is rendered.                                |
+     * | `LIGHT_BOX`       | `false`                              | Doesn’t acquire focus when PDF is rendered.                         |
+     * | `SIZED_CONTAINER` | `false`                              | Doesn’t acquire focus when PDF is rendered.                         |
+     * | `IN_LINE`         | `false`                              | Always, and required to acquire focus when PDF is rendered.         |
+     *  - For more details, see the section [Focus on PDF rendering](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#focus-on-pdf-rendering).
+     *
      */
-    focusOnRendering: any;
+    focusOnRendering: boolean;
     /**
+     * Set this to false to hide the full-screen option available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
+     */
+    showFullScreenViewButton: boolean;
+    /**
      * This allows you to specify the URL for the initial loading script of the Adobe Embed API SDK Mega Spaghetti Code Api, but is optional and
-     * uses the default URL specified from Adobe's documentation. (https://acrobatservices.adobe.com/view-sdk/viewer.js - which now has been changed twice, for odd  unknowable reasons)
+     * uses the default [URL](https://acrobatservices.adobe.com/view-sdk/viewer.js) specified from Adobe's documentation, *which has been changed twice, for odd unknowable reasons*.
      */
@@ -133,2 +242,2 @@ viewSdkViewerScript: string;
 
-export { DefaultConfigs, type PreviewFileConfig, type ReactHooks, type ReactViewAdobeProps, ReactViewAdobe as default, previewFile };
+export { DefaultConfigs, type DefaultViewMode, type FileMetaData, type ReactHooks, ReactViewAdobe, type ReactViewAdobeProps, ReactViewAdobe as default, previewFile };

lib/bundle.js

 /* react-adobe-embed */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactScriptTag={},e.React)}(this,(function(e,t){"use strict";function i({divId:e,viewerConfig:t,url:i,clientID:d,_fileMeta:a,_dcView:n}){const s={clientId:d,divId:e};return(n||new window.AdobeDC.View(s)).previewFile({content:{location:{url:i}},metaData:a||o.demoMetaData},t)}const d=e=>{const i=t.useRef(document.getElementById(e.id||o.staticDivId));return t.createElement("div",{ref:i,id:e.id||o.staticDivId,className:e.className||"adobe-viewer-of-amazon-corporate-retaliations",style:e.style,title:e.title||"entity-existent-on-frameworks-of-state-regulations-as-defined-by-the-state-and-may-try-to-destroy-your-life-and-control-the-fbi-of-the-state-such-as-amazon-legal-idiots"})};const o={demoUrl:"https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf",staticDefaultConfig:{showAnnotationTools:!1,showLeftHandPanel:!1,showPageControls:!1,viewSdkViewerScript:"https://acrobatservices.adobe.com/view-sdk/viewer.js",showDownloadPDF:!1,showPrintPDF:!1},staticDivId:"pdf-div",demoMetaData:{fileName:"Odd Distateful Adobe Example Pdf.pdf",id:"6d07d124 - ac85–43b3 - a867–36930f502ac6"}};e.DefaultConfigs=o,e.default=function(e){const[a,n]=t.useState(!1),[s,c]=t.useState(!1),[r,l]=t.useState(!1),f=(0,t[e?.useReactHookForAdobeAPIConfigs||"useMemo"])((()=>{if(!0===a){const e=window.AdobeDC?.View;return e}}),[a]);return(0,t[e?.useReactHookWhenLoadingAdobeAPI||"useEffect"])((()=>{if(!1===r){const t=document.querySelector(`script.react-adobe-embed-handholding-adobe-api-loading-idiocy[data-adobe-pdf-id="${e.id||o.staticDivId}"]`);if(t)e.debug&&console.info("Adobe SDK Check","Reloading and Rerendering Adobe SDK"),"LIGHT_BOX"!==e.previewConfig?.embedMode&&c(!0),t.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-reused");else{e.debug&&console.info("Adobe SDK Check","Initial Adobe SDK Load");const t=document.createElement("script");t.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-initial"),t.setAttribute("data-adobe-pdf-id",e.id||o.staticDivId),t.setAttribute("class","react-adobe-embed-handholding-adobe-api-loading-idiocy"),t.src=e.previewConfig?.viewSdkViewerScript||o.staticDefaultConfig.viewSdkViewerScript,t.async=!0,t.onload=()=>{l(!0)},document.body.appendChild(t)}}}),[e.id,r,a]),(0,t[e?.useReactHookWhenCallingAdobeAPI||"useEffect"])((()=>{!1===a&&!0===r&&document.addEventListener("adobe_dc_view_sdk.ready",(()=>{n(!0)}));!0===r&&!0===a&&(e=>{e.debug&&console.info("Adobe PDF Viewer SDK Ready Event",f,window.adobe_dc_view_sdk);const t=e.id||o.staticDivId;document.getElementById(t)&&"LIGHT_BOX"!==e.previewConfig?.embedMode?(e.debug&&console.info("Adobe PDF Viewer SDK Ready Rendering"),i({divId:t,viewerConfig:e.previewConfig||o.staticDefaultConfig,url:e.url||o.demoUrl,clientID:e.clientId,_fileMeta:e.fileMeta})):"LIGHT_BOX"===e.previewConfig?.embedMode&&e?.triggerAdobeDCViewRender&&i({divId:e.id||o.staticDivId,viewerConfig:e.previewConfig||o.staticDefaultConfig,url:e.url||o.demoUrl,clientID:e.clientId})})(e)}),[a,r,e,f]),(0,t[e?.useReactHookForComponentDidUpdate||"useEffect"])((()=>{if(!0===s){const t=e.id||o.staticDivId;document.getElementById(t)&&i({divId:t,viewerConfig:e.previewConfig||o.staticDefaultConfig,url:e.url||o.demoUrl,clientID:e.clientId,_fileMeta:e.fileMeta}),c(!1)}}),[s,e]),t.createElement(d,{...e})},e.previewFile=i,Object.defineProperty(e,"__esModule",{value:!0})}));
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnVuZGxlLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactAdobeEmbed={},e.React)}(this,(function(e,t){"use strict";function i({divId:e,viewerConfig:t,url:i,clientID:d,_fileMeta:o,_dcView:n}){const s={clientId:d,divId:e};return(n||new window.AdobeDC.View(s)).previewFile({content:{location:{url:i}},metaData:o||a.demoMetaData},t)}const d=e=>{const i=t.useRef(document.getElementById(e.id||a.staticDivId));return t.createElement("div",{ref:i,id:e.id||a.staticDivId,className:e.className||"adobe-viewer-of-amazon-corporate-retaliations",style:e.style,title:e.title||"entity-existent-on-frameworks-of-state-regulations-as-defined-by-the-state-and-may-try-to-destroy-your-life-and-control-the-fbi-of-the-state-such-as-amazon-legal-idiots"})};function o(e){const[o,n]=t.useState(!1),[s,c]=t.useState(!1),[r,l]=t.useState(!1),f=(0,t[e?.useReactHookForAdobeAPIConfigs||"useMemo"])((()=>{if(!0===o){const e=window.AdobeDC?.View;return e}}),[o]);(0,t[e?.useReactHookWhenLoadingAdobeAPI||"useEffect"])((()=>{if(!1===r){const t=document.querySelector(`script.react-adobe-embed-handholding-adobe-api-loading-idiocy[data-adobe-pdf-id="${e.id||a.staticDivId}"]`);if(t)e.debug&&console.info("Adobe SDK Check","Reloading and Rerendering Adobe SDK"),"LIGHT_BOX"!==e.previewConfig?.embedMode&&c(!0),t.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-reused");else{e.debug&&console.info("Adobe SDK Check","Initial Adobe SDK Load");const t=document.createElement("script");t.setAttribute("data-testid","react-adobe-embed-handholding-adobe-api-loading-idiocy-initial"),t.setAttribute("data-adobe-pdf-id",e.id||a.staticDivId),t.setAttribute("class","react-adobe-embed-handholding-adobe-api-loading-idiocy"),t.src=e.previewConfig?.viewSdkViewerScript||a.staticDefaultConfig.viewSdkViewerScript,t.async=!0,t.onload=()=>{l(!0)},document.body.appendChild(t)}}}),[e.id,r,o]);(0,t[e?.useReactHookWhenCallingAdobeAPI||"useEffect"])((()=>{!1===o&&!0===r&&document.addEventListener("adobe_dc_view_sdk.ready",(()=>{n(!0)}));!0===r&&!0===o&&(e=>{e.debug&&console.info("Adobe PDF Viewer SDK Ready Event",f,window.adobe_dc_view_sdk);const t=e.id||a.staticDivId;document.getElementById(t)&&"LIGHT_BOX"!==e.previewConfig?.embedMode?(e.debug&&console.info("Adobe PDF Viewer SDK Ready Rendering"),i({divId:t,viewerConfig:e.previewConfig||a.staticDefaultConfig,url:e.url||a.demoUrl,clientID:e.clientId,_fileMeta:e.fileMeta})):"LIGHT_BOX"===e.previewConfig?.embedMode&&e?.triggerAdobeDCViewRender&&i({divId:e.id||a.staticDivId,viewerConfig:e.previewConfig||a.staticDefaultConfig,url:e.url||a.demoUrl,clientID:e.clientId})})(e)}),[o,r,e,f]);return(0,t[e?.useReactHookForComponentDidUpdate||"useEffect"])((()=>{if(!0===s){const t=e.id||a.staticDivId;document.getElementById(t)&&i({divId:t,viewerConfig:e.previewConfig||a.staticDefaultConfig,url:e.url||a.demoUrl,clientID:e.clientId,_fileMeta:e.fileMeta}),c(!1)}}),[s,e]),t.createElement(d,{...e})}const a={demoUrl:"https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf",staticDefaultConfig:{showAnnotationTools:!1,showLeftHandPanel:!1,showPageControls:!1,viewSdkViewerScript:"https://acrobatservices.adobe.com/view-sdk/viewer.js",showDownloadPDF:!1,showPrintPDF:!1},staticDivId:"pdf-div",demoMetaData:{fileName:"Odd Distateful Adobe Example Pdf.pdf",id:"6d07d124 - ac85–43b3 - a867–36930f502ac6"}};e.DefaultConfigs=a,e.ReactViewAdobe=o,e.default=o,e.previewFile=i,Object.defineProperty(e,"__esModule",{value:!0})}));
+//# sourceMappingURL=bundle.js.map

lib/index.d.ts

@@ -8,5 +8,3 @@ import React from "react";
     _dcView?: any;
-    _fileMeta?: {
-        [key: string | "fileName" | "id"]: any;
-    };
+    _fileMeta?: Partial<FileMetaData>;
 }): any;
@@ -24,4 +22,34 @@ /**
 export type ReactViewAdobeProps = {
+    /**
+     * The URL string of a PDF to be rendered.
+     * @example
+     * const url = "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf";
+     */
+    url: string;
+    /**
+     * Required Access Token for using Adobe's Embed SDK and API Services. Obtaining clientId's are done [here](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api)
+     *  - By default you a allowed to create up to 20 clientId's for free. A clientId is tied to a specific domain that you specify when creating the clientId.
+     *  - Domains can be for example, `www.example.com` as well as `localhost` for development purposes.
+     *  - Failing to provide a clientId will result in the PDF briefily rendering at first but then disappearing after Adobe detects that the clientId is invalid.
+     *  - You may use this clientID `324caa2a91b84f688935436cd2d25217` which is configured for the domain `localhost`. Note that this means the domain only works on `localhost` as port 80 or 443, e.g. http://localhost:3000 will not work but http://localhost:80 will work.
+     *
+     * Visit [Adobe's credential creation page](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api) to create a clientId, as seen below.
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-4.07.57%E2%80%AFAM.png)
+     */
+    clientId: string;
+    /**
+     * Configuration options for the Adobe Embed API SDK Viewer.
+     * - See the type definition for `PreviewFileConfig` for more details and descriptions of each configuration option.
+     */
+    previewConfig?: Partial<PreviewFileConfig>;
+    fileMeta?: Partial<FileMetaData>;
     id?: string;
     children?: React.ReactNode;
+    className?: string;
+    title?: string;
+    style?: React.CSSProperties;
+    debug?: boolean;
+    /**
+     * Experimental usages only, and not needed or recommended to be used.
+     */
     useReactHookWhenLoadingAdobeAPI?: ReactHooks;
@@ -32,12 +60,2 @@ useReactHookWhenCallingAdobeAPI?: ReactHooks;
     triggerAdobeDCViewRender?: boolean;
-    className?: string;
-    title?: string;
-    style?: React.CSSProperties;
-    previewConfig?: Partial<PreviewFileConfig>;
-    url: string;
-    clientId: string;
-    fileMeta?: {
-        [key: string | "fileName" | "id"]: any;
-    };
-    debug?: boolean;
 };
@@ -67,26 +85,84 @@ /**
 };
-export type PreviewFileConfig = {
+export type FileMetaData = {
+    /**
+     * The name of the PDF to be rendered. An example of fileName is "Bodea Brochure.pdf". Note that fileName is considered a required field but not enforced,
+     *  - The file name displays on the top bar of the rendered PDF viewer. If left empty, a noticeable empty space is shown instead.
+     */
+    fileName: string;
+    /**
+     * Pass the PDF ID when annotation APIs are enabled to uniquely identify the PDF. For more details, see [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
+     *  - Caution: Failing to provide an id while enabling annotation options will cause the pdf to fail in rendering.
+     */
+    id: string;
+    /**
+     * Set this flag to true if you want to render the PDF in read-only mode. Commenting is not allowed and existing PDF comments are displayed as read only.
+     */
+    hasReadOnlyAccess: boolean;
+};
+export type DefaultViewMode = "FIT_WIDTH" | "FIT_PAGE" | "TWO_COLUMN" | "TWO_COLUMN_FIT_PAGE" | "CONTINUOUS" | "SINGLE_PAGE";
+/**
+ * @property {boolean} showZoomControl - Configures whether to display zoom controls.
+ * @property {boolean} showAnnotationTools - Indicates whether to display annotation tools.
+ * @property {boolean} showFullScreen - Configures whether to show the full screen toggle.
+ * @property {DefaultViewMode} defaultViewMode - Specifies the default view mode for displaying the PDF.
+ * @property {boolean} enableFormFilling - Indicates whether form filling is enabled.
+ * @property {boolean} showDownloadPDF - Configures whether to show the download option.
+ * @property {boolean} showPrintPDF - Configures whether to show the print option.
+ * @property {boolean} showLeftHandPanel - Configures whether to show the left-hand panel.
+ * @property {"CLOSE" | "BACK"} exitPDFViewerType - Specifies the behavior of the close button.
+ * @property {boolean} showThumbnails - Configures whether to show thumbnails.
+ * @property {boolean} showBookmarks - Configures whether to show the bookmarks panel.
+ * @property {boolean} enableLinearization - Indicates whether PDF linearization is enabled.
+ * @property {boolean} enableAnnotationAPIs - Indicates whether PDF annotation APIs are enabled.
+ * @property {boolean} includePDFAnnotations - Indicates whether existing PDF annotations are included.
+ * @property {boolean} enableSearchAPIs - Indicates whether PDF search APIs are enabled.
+ * @property {"LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW"} embedMode - Specifies the embedding mode.
+ * @property {boolean} showDisabledSaveButton - Configures whether to show the save button in a disabled state.
+ * @property {boolean} focusOnRendering - Configures the focus behavior when rendering the PDF.
+ * @property {boolean} showFullScreenViewButton - Configures whether to show the full-screen option.
+ * @property {string} viewSdkViewerScript - Specifies the URL for the Adobe Embed API SDK viewer script.
+ */
+type PreviewFileConfig = {
+    /**
+     * Set this to `false` to hide the zoom-in and zoom-out options available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
+     * - Defaults as `true`
+     */
     showZoomControl: boolean;
+    /**
+     * If true, tools such as add text, sticky note, highlight, and so on appear in the quick tools menu on the left-hand side in full window embed mode.
+     *  - For more details, see [Comments and Markup](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/).
+     */
     showAnnotationTools: boolean;
+    /**
+     * By default, the full screen toggle appears in the bottom toolbar in sized container embed mode. Set this to false to hide the full screen toggle.
+     */
     showFullScreen: boolean;
     /**
-             * This variable takes a string value of "FIT_WIDTH", "FIT_PAGE", "TWO_COLUMN" or "TWO_COLUMN_FIT_PAGE".
-                1. FIT_WIDTH: Expands the page horizontally to the full width of the document pane.
-                2. FIT_PAGE: Displays the entire page in the current view pane.
-                3. TWO_COLUMN: Displays two pages of the PDF side by side in the current view pane.
-                4. TWO_COLUMN_FIT_PAGE: Displays two pages of the PDF side by side where the entire two pages are displayed in
-                the current view pane. Note that end users can also toggle the view mode via the Fit Width, Fit Page
-                or Two-Column button on the right-hand panel.
-        
-                In addition to these, there are two other view modes which are supported only in mobile browsers:
-                1. CONTINUOUS: This mode displays all the document pages one after the other and users can easily navigate through the pages by scrolling up or down.
-                2. SINGLE_PAGE: This mode displays only a single document page at a time and doesn’t show any adjoining page.
-                Users can use the swipe gesture to navigate to other pages which will be displayed one at a time.
-             */
-    defaultViewMode: "FIT_WIDTH" | "FIT_PAGE" | "TWO_COLUMN" | "TWO_COLUMN_FIT_PAGE" | "CONTINUOUS" | "SINGLE_PAGE";
+     * This variable accepts one of the following string values: `"FIT_WIDTH"`, `"FIT_PAGE"`, `"TWO_COLUMN"`, or `"TWO_COLUMN_FIT_PAGE"`.
+     * - `FIT_WIDTH`: Expands the page horizontally to the full width of the document pane.
+     * - `FIT_PAGE`: Displays the entire page within the current view pane.
+     * - `TWO_COLUMN`: Displays two pages of the PDF side by side in the current view pane.
+     * - `TWO_COLUMN_FIT_PAGE`: Displays two pages of the PDF side by side, fitting both pages entirely within the current view pane. Users can also toggle the view mode using the Fit Width, Fit Page, or Two-Column buttons on the right-hand panel.
+     *
+     * **Additionaly**, two other view modes are supported exclusively in mobile browsers:
+     * - `CONTINUOUS`: Displays all document pages sequentially, allowing users to navigate by scrolling up or down.
+     * - `SINGLE_PAGE`: Displays one document page at a time without showing adjoining pages. Users can swipe to navigate to other pages, which will be displayed one at a time.
+     */
+    defaultViewMode: DefaultViewMode;
+    /** @property {boolean} enableFormFilling - description
+     * If true, form filling is enabled and users can edit fields in full window embed mode.
+     */
     enableFormFilling: boolean;
+    /**
+     * If true, PDF can be downloaded in all embed modes. Set this to false to disable PDF download.
+     *  - Defaults as `true`
+     */
     showDownloadPDF: boolean;
+    /**
+     * If true, PDF can be printed in all embed modes. Set this to false to disable PDF printing.
+     *  - Defaults as `true`
+     * - Example:
+     *  ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.34.44%E2%80%AFAM.png)
+     */
     showPrintPDF: boolean;
-    showLeftHandPanel: boolean;
-    showPageControls: boolean;
     /**
@@ -97,6 +173,18 @@ * The top bar in lightbox embed mode contains the close button by default to
     exitPDFViewerType: "CLOSE" | "BACK";
+    /**
+     * Whether to display thumbnails of the PDF's pages in the left-hand panel.
+     *  - Defaults as `true`
+     *
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.42.51%E2%80%AFAM.png)
+     */
     showThumbnails: boolean;
+    /**
+     * PDF bookmarks are shown by default in `FULL_WINDOW` and `LIGHT_BOX` embed modes.
+     *  - Set this to `false` if you want to hide the bookmarks from the right-hand panel.
+     *
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.44.55%E2%80%AFAM.png)
+     */
     showBookmarks: boolean;
     /**
-     * Set this to true to enable PDF linearization. For more details, see the section PDF linearization.
+     * Set this to true to enable PDF linearization. For more details, see the section [PDF linearization](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#pdf-linearization).
      */
@@ -106,20 +194,41 @@ enableLinearization: boolean;
      * Set this to true to add, update and delete PDF annotations programmatically in full window embed mode.
-     * For more details, see the section Annotations API overview.
-     * https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview
+     * For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
      */
     enableAnnotationAPIs: boolean;
-    /** Leave blank for default as FULL WINDOW MODE
-     * https://documentservices.adobe.com/view-sdk-demo/index.html#/view/FULL_WINDOW/Bodea%20Brochure.pdf
+    /**
+     * This configuration is used with `enableAnnotationAPIs` to access existing PDF annotations. For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
      */
+    includePDFAnnotations: boolean;
+    /**
+     * Set this to true to perform search operation in the PDF programmatically. For more details, see the section [Search APIs](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_ui/#search-apis).
+     */
+    enableSearchAPIs: boolean;
+    /**
+     * Defaults to `FULL_WINDOW` embed mode.
+     *  - See the section on [Embed modes](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#embed-modes) for more details.
+     */
     embedMode: "LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW";
-    enableSearchAPIs: boolean;
+    /**
+     * Set this to true to show the save button in disabled state even when there are no changes to be saved to the PDF.
+     */
     showDisabledSaveButton: boolean;
     /**
-     * With this configuration, website developers have the flexibility to control if the
-     * PDF should take focus when it is rendered. For more details, see the section Focus on PDF rendering.
+     * With this configuration, website developers have the flexibility to control if the PDF should take focus when it is rendered.
+     * | EMBED Mode      | Default Value for focusOnRendering | Default Behavior                                                    |
+     * | --------------- | ---------------------------------- | ------------------------------------------------------------------- |
+     * | `FULL_WINDOW`     | `true`                               | Acquires focus when PDF is rendered.                                |
+     * | `LIGHT_BOX`       | `false`                              | Doesn’t acquire focus when PDF is rendered.                         |
+     * | `SIZED_CONTAINER` | `false`                              | Doesn’t acquire focus when PDF is rendered.                         |
+     * | `IN_LINE`         | `false`                              | Always, and required to acquire focus when PDF is rendered.         |
+     *  - For more details, see the section [Focus on PDF rendering](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#focus-on-pdf-rendering).
+     *
      */
-    focusOnRendering: any;
+    focusOnRendering: boolean;
     /**
+     * Set this to false to hide the full-screen option available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
+     */
+    showFullScreenViewButton: boolean;
+    /**
      * This allows you to specify the URL for the initial loading script of the Adobe Embed API SDK Mega Spaghetti Code Api, but is optional and
-     * uses the default URL specified from Adobe's documentation. (https://acrobatservices.adobe.com/view-sdk/viewer.js - which now has been changed twice, for odd  unknowable reasons)
+     * uses the default [URL](https://acrobatservices.adobe.com/view-sdk/viewer.js) specified from Adobe's documentation, *which has been changed twice, for odd unknowable reasons*.
      */
@@ -131,1 +240,2 @@ viewSdkViewerScript: string;
 }[Extract<keyof typeof React, `use${string}`>];
+export { ReactViewAdobe };

lib/index.js

@@ -152,1 +152,2 @@ import React from "react";
 };
+export { ReactViewAdobe };

package.json

 {
   "name": "react-adobe-embed",
-  "version": "12.0.2",
+  "version": "13.0.0",
   "homepage": "https://ziping-liu-corporation.github.io/react-adobe-embed/#/home",
@@ -53,4 +53,4 @@ "repository": {
   "umd:main": "./lib/bundle.js",
-  "browser": "./dist/react-adobe-embed.cdn.js",
-  "jsdelivr": "./dist/react-adobe-embed.cdn.js",
+  "browser": "./lib/bundle.js",
+  "jsdelivr": "./lib/bundle.js",
   "exports": {
@@ -80,3 +80,3 @@ ".": {
     "test": "jest",
-    "build:canary": "npm run build:roll:canary && rsync -rhv --progress ./public/* ./build && cp ./README.md ./build && npm run build:roll:cdn && rsync -rhv --progress ./dist ./build/ && cp ./LICENSE.md ./build && npm run build:public",
+    "build:canary": "npm run build:roll:canary && rsync -rhv --progress ./public/* ./build && cp ./README.md ./build && npm run build:roll && rsync -rhv --progress ./lib ./build/ && cp ./LICENSE.md ./build && npm run build:public",
     "build:public": "node ./scripts/public.js",
@@ -87,3 +87,3 @@ "build:roll:canary": "rimraf build &&  rollup --bundleConfigAsCjs -c rollup.config.canary.js",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src ./canary",
-    "build": "npm run build:roll && npm run build:roll:cdn",
+    "build": "npm run build:roll",
     "deploy": "gh-pages -d build",
@@ -107,2 +107,3 @@ "build:roll": "rimraf lib && tsc -p tsconfig.build.json && rollup --bundleConfigAsCjs -c rollup.config.js",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@testing-library/react": "^14.0.0",
@@ -130,4 +131,3 @@ "@types/jest": "^29.5.11",
     "typescript": "^4.9.5"
-  
   }
 }

README.md

@@ -233,3 +233,3 @@ ## What is this for?
   <div id="root"></div>
-  <script src="https://cdn.jsdelivr.net/npm/react-adobe-embed/dist/react-adobe-embed.cdn.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/react-adobe-embed/lib/bundle.js"></script>
   <script>
@@ -272,3 +272,3 @@ /**
      */
-    const ReactViewAdobeCDN = window.ReactViewAdobe;
+    const ReactViewAdobeCDN = window.ReactAdobeEmbed.ReactViewAdobe;
 
@@ -275,0 +275,0 @@ /**

types/index.d.ts

@@ -8,5 +8,3 @@ import React from "react";
     _dcView?: any;
-    _fileMeta?: {
-        [key: string | "fileName" | "id"]: any;
-    };
+    _fileMeta?: Partial<FileMetaData>;
 }): any;
@@ -24,4 +22,34 @@ /**
 export type ReactViewAdobeProps = {
+    /**
+     * The URL string of a PDF to be rendered.
+     * @example
+     * const url = "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea%20Brochure.pdf";
+     */
+    url: string;
+    /**
+     * Required Access Token for using Adobe's Embed SDK and API Services. Obtaining clientId's are done [here](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api)
+     *  - By default you a allowed to create up to 20 clientId's for free. A clientId is tied to a specific domain that you specify when creating the clientId.
+     *  - Domains can be for example, `www.example.com` as well as `localhost` for development purposes.
+     *  - Failing to provide a clientId will result in the PDF briefily rendering at first but then disappearing after Adobe detects that the clientId is invalid.
+     *  - You may use this clientID `324caa2a91b84f688935436cd2d25217` which is configured for the domain `localhost`. Note that this means the domain only works on `localhost` as port 80 or 443, e.g. http://localhost:3000 will not work but http://localhost:80 will work.
+     *
+     * Visit [Adobe's credential creation page](https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/main.html?api=pdf-embed-api) to create a clientId, as seen below.
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-4.07.57%E2%80%AFAM.png)
+     */
+    clientId: string;
+    /**
+     * Configuration options for the Adobe Embed API SDK Viewer.
+     * - See the type definition for `PreviewFileConfig` for more details and descriptions of each configuration option.
+     */
+    previewConfig?: Partial<PreviewFileConfig>;
+    fileMeta?: Partial<FileMetaData>;
     id?: string;
     children?: React.ReactNode;
+    className?: string;
+    title?: string;
+    style?: React.CSSProperties;
+    debug?: boolean;
+    /**
+     * Experimental usages only, and not needed or recommended to be used.
+     */
     useReactHookWhenLoadingAdobeAPI?: ReactHooks;
@@ -32,12 +60,2 @@ useReactHookWhenCallingAdobeAPI?: ReactHooks;
     triggerAdobeDCViewRender?: boolean;
-    className?: string;
-    title?: string;
-    style?: React.CSSProperties;
-    previewConfig?: Partial<PreviewFileConfig>;
-    url: string;
-    clientId: string;
-    fileMeta?: {
-        [key: string | "fileName" | "id"]: any;
-    };
-    debug?: boolean;
 };
@@ -67,26 +85,84 @@ /**
 };
-export type PreviewFileConfig = {
+export type FileMetaData = {
+    /**
+     * The name of the PDF to be rendered. An example of fileName is "Bodea Brochure.pdf". Note that fileName is considered a required field but not enforced,
+     *  - The file name displays on the top bar of the rendered PDF viewer. If left empty, a noticeable empty space is shown instead.
+     */
+    fileName: string;
+    /**
+     * Pass the PDF ID when annotation APIs are enabled to uniquely identify the PDF. For more details, see [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
+     *  - Caution: Failing to provide an id while enabling annotation options will cause the pdf to fail in rendering.
+     */
+    id: string;
+    /**
+     * Set this flag to true if you want to render the PDF in read-only mode. Commenting is not allowed and existing PDF comments are displayed as read only.
+     */
+    hasReadOnlyAccess: boolean;
+};
+export type DefaultViewMode = "FIT_WIDTH" | "FIT_PAGE" | "TWO_COLUMN" | "TWO_COLUMN_FIT_PAGE" | "CONTINUOUS" | "SINGLE_PAGE";
+/**
+ * @property {boolean} showZoomControl - Configures whether to display zoom controls.
+ * @property {boolean} showAnnotationTools - Indicates whether to display annotation tools.
+ * @property {boolean} showFullScreen - Configures whether to show the full screen toggle.
+ * @property {DefaultViewMode} defaultViewMode - Specifies the default view mode for displaying the PDF.
+ * @property {boolean} enableFormFilling - Indicates whether form filling is enabled.
+ * @property {boolean} showDownloadPDF - Configures whether to show the download option.
+ * @property {boolean} showPrintPDF - Configures whether to show the print option.
+ * @property {boolean} showLeftHandPanel - Configures whether to show the left-hand panel.
+ * @property {"CLOSE" | "BACK"} exitPDFViewerType - Specifies the behavior of the close button.
+ * @property {boolean} showThumbnails - Configures whether to show thumbnails.
+ * @property {boolean} showBookmarks - Configures whether to show the bookmarks panel.
+ * @property {boolean} enableLinearization - Indicates whether PDF linearization is enabled.
+ * @property {boolean} enableAnnotationAPIs - Indicates whether PDF annotation APIs are enabled.
+ * @property {boolean} includePDFAnnotations - Indicates whether existing PDF annotations are included.
+ * @property {boolean} enableSearchAPIs - Indicates whether PDF search APIs are enabled.
+ * @property {"LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW"} embedMode - Specifies the embedding mode.
+ * @property {boolean} showDisabledSaveButton - Configures whether to show the save button in a disabled state.
+ * @property {boolean} focusOnRendering - Configures the focus behavior when rendering the PDF.
+ * @property {boolean} showFullScreenViewButton - Configures whether to show the full-screen option.
+ * @property {string} viewSdkViewerScript - Specifies the URL for the Adobe Embed API SDK viewer script.
+ */
+type PreviewFileConfig = {
+    /**
+     * Set this to `false` to hide the zoom-in and zoom-out options available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
+     * - Defaults as `true`
+     */
     showZoomControl: boolean;
+    /**
+     * If true, tools such as add text, sticky note, highlight, and so on appear in the quick tools menu on the left-hand side in full window embed mode.
+     *  - For more details, see [Comments and Markup](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/).
+     */
     showAnnotationTools: boolean;
+    /**
+     * By default, the full screen toggle appears in the bottom toolbar in sized container embed mode. Set this to false to hide the full screen toggle.
+     */
     showFullScreen: boolean;
     /**
-             * This variable takes a string value of "FIT_WIDTH", "FIT_PAGE", "TWO_COLUMN" or "TWO_COLUMN_FIT_PAGE".
-                1. FIT_WIDTH: Expands the page horizontally to the full width of the document pane.
-                2. FIT_PAGE: Displays the entire page in the current view pane.
-                3. TWO_COLUMN: Displays two pages of the PDF side by side in the current view pane.
-                4. TWO_COLUMN_FIT_PAGE: Displays two pages of the PDF side by side where the entire two pages are displayed in
-                the current view pane. Note that end users can also toggle the view mode via the Fit Width, Fit Page
-                or Two-Column button on the right-hand panel.
-        
-                In addition to these, there are two other view modes which are supported only in mobile browsers:
-                1. CONTINUOUS: This mode displays all the document pages one after the other and users can easily navigate through the pages by scrolling up or down.
-                2. SINGLE_PAGE: This mode displays only a single document page at a time and doesn’t show any adjoining page.
-                Users can use the swipe gesture to navigate to other pages which will be displayed one at a time.
-             */
-    defaultViewMode: "FIT_WIDTH" | "FIT_PAGE" | "TWO_COLUMN" | "TWO_COLUMN_FIT_PAGE" | "CONTINUOUS" | "SINGLE_PAGE";
+     * This variable accepts one of the following string values: `"FIT_WIDTH"`, `"FIT_PAGE"`, `"TWO_COLUMN"`, or `"TWO_COLUMN_FIT_PAGE"`.
+     * - `FIT_WIDTH`: Expands the page horizontally to the full width of the document pane.
+     * - `FIT_PAGE`: Displays the entire page within the current view pane.
+     * - `TWO_COLUMN`: Displays two pages of the PDF side by side in the current view pane.
+     * - `TWO_COLUMN_FIT_PAGE`: Displays two pages of the PDF side by side, fitting both pages entirely within the current view pane. Users can also toggle the view mode using the Fit Width, Fit Page, or Two-Column buttons on the right-hand panel.
+     *
+     * **Additionaly**, two other view modes are supported exclusively in mobile browsers:
+     * - `CONTINUOUS`: Displays all document pages sequentially, allowing users to navigate by scrolling up or down.
+     * - `SINGLE_PAGE`: Displays one document page at a time without showing adjoining pages. Users can swipe to navigate to other pages, which will be displayed one at a time.
+     */
+    defaultViewMode: DefaultViewMode;
+    /** @property {boolean} enableFormFilling - description
+     * If true, form filling is enabled and users can edit fields in full window embed mode.
+     */
     enableFormFilling: boolean;
+    /**
+     * If true, PDF can be downloaded in all embed modes. Set this to false to disable PDF download.
+     *  - Defaults as `true`
+     */
     showDownloadPDF: boolean;
+    /**
+     * If true, PDF can be printed in all embed modes. Set this to false to disable PDF printing.
+     *  - Defaults as `true`
+     * - Example:
+     *  ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.34.44%E2%80%AFAM.png)
+     */
     showPrintPDF: boolean;
-    showLeftHandPanel: boolean;
-    showPageControls: boolean;
     /**
@@ -97,6 +173,18 @@ * The top bar in lightbox embed mode contains the close button by default to
     exitPDFViewerType: "CLOSE" | "BACK";
+    /**
+     * Whether to display thumbnails of the PDF's pages in the left-hand panel.
+     *  - Defaults as `true`
+     *
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.42.51%E2%80%AFAM.png)
+     */
     showThumbnails: boolean;
+    /**
+     * PDF bookmarks are shown by default in `FULL_WINDOW` and `LIGHT_BOX` embed modes.
+     *  - Set this to `false` if you want to hide the bookmarks from the right-hand panel.
+     *
+     * ![](https://ziping.org/wp-content/uploads/2024/06/Screenshot-2024-06-06-at-3.44.55%E2%80%AFAM.png)
+     */
     showBookmarks: boolean;
     /**
-     * Set this to true to enable PDF linearization. For more details, see the section PDF linearization.
+     * Set this to true to enable PDF linearization. For more details, see the section [PDF linearization](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#pdf-linearization).
      */
@@ -106,20 +194,41 @@ enableLinearization: boolean;
      * Set this to true to add, update and delete PDF annotations programmatically in full window embed mode.
-     * For more details, see the section Annotations API overview.
-     * https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview
+     * For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
      */
     enableAnnotationAPIs: boolean;
-    /** Leave blank for default as FULL WINDOW MODE
-     * https://documentservices.adobe.com/view-sdk-demo/index.html#/view/FULL_WINDOW/Bodea%20Brochure.pdf
+    /**
+     * This configuration is used with `enableAnnotationAPIs` to access existing PDF annotations. For more details, see the section [Annotations API overview](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_comments/#annotations-api-overview).
      */
+    includePDFAnnotations: boolean;
+    /**
+     * Set this to true to perform search operation in the PDF programmatically. For more details, see the section [Search APIs](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos_ui/#search-apis).
+     */
+    enableSearchAPIs: boolean;
+    /**
+     * Defaults to `FULL_WINDOW` embed mode.
+     *  - See the section on [Embed modes](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#embed-modes) for more details.
+     */
     embedMode: "LIGHT_BOX" | "SIZED_CONTAINER" | "IN_LINE" | "FULL_WINDOW";
-    enableSearchAPIs: boolean;
+    /**
+     * Set this to true to show the save button in disabled state even when there are no changes to be saved to the PDF.
+     */
     showDisabledSaveButton: boolean;
     /**
-     * With this configuration, website developers have the flexibility to control if the
-     * PDF should take focus when it is rendered. For more details, see the section Focus on PDF rendering.
+     * With this configuration, website developers have the flexibility to control if the PDF should take focus when it is rendered.
+     * | EMBED Mode      | Default Value for focusOnRendering | Default Behavior                                                    |
+     * | --------------- | ---------------------------------- | ------------------------------------------------------------------- |
+     * | `FULL_WINDOW`     | `true`                               | Acquires focus when PDF is rendered.                                |
+     * | `LIGHT_BOX`       | `false`                              | Doesn’t acquire focus when PDF is rendered.                         |
+     * | `SIZED_CONTAINER` | `false`                              | Doesn’t acquire focus when PDF is rendered.                         |
+     * | `IN_LINE`         | `false`                              | Always, and required to acquire focus when PDF is rendered.         |
+     *  - For more details, see the section [Focus on PDF rendering](https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#focus-on-pdf-rendering).
+     *
      */
-    focusOnRendering: any;
+    focusOnRendering: boolean;
     /**
+     * Set this to false to hide the full-screen option available in the right-hand panel. This configuration will work for full window and lightbox embed modes.
+     */
+    showFullScreenViewButton: boolean;
+    /**
      * This allows you to specify the URL for the initial loading script of the Adobe Embed API SDK Mega Spaghetti Code Api, but is optional and
-     * uses the default URL specified from Adobe's documentation. (https://acrobatservices.adobe.com/view-sdk/viewer.js - which now has been changed twice, for odd  unknowable reasons)
+     * uses the default [URL](https://acrobatservices.adobe.com/view-sdk/viewer.js) specified from Adobe's documentation, *which has been changed twice, for odd unknowable reasons*.
      */
@@ -131,1 +240,2 @@ viewSdkViewerScript: string;
 }[Extract<keyof typeof React, `use${string}`>];
+export { ReactViewAdobe };

types/main.d.ts

@@ -0,0 +0,0 @@ import ReactViewAdobe from './index';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105412

increased by22.58%

Lines of code

1040

increased by40.54%

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

34

increased by3.03%

No dependency changes