applying feedback

- corrected the example's code and link
- added `NutrientViewer`

Author: 0mar-K

playground/forms/custom-toolbar-radio-button/index.ts

@@ -4,42 +4,42 @@ import { baseOptions } from "../../shared/base-options";
 let instance: Instance | null = null;
 
 const createGroupedRadioButtons = async (instance: Instance | null) => {
-  const radioWidget1 = new window.NutrientViewer.Annotations.WidgetAnnotation({
-    id: window.NutrientViewer.generateInstantId(),
+  const radioWidget1 = new NutrientViewer.Annotations.WidgetAnnotation({
+    id: NutrientViewer.generateInstantId(),
     pageIndex: 0,
     formFieldName: "MyFormField",
-    boundingBox: new window.NutrientViewer.Geometry.Rect({
+    boundingBox: new NutrientViewer.Geometry.Rect({
       left: 100,
       top: 100,
       width: 20,
       height: 20,
     }),
   });
 
-  const radioWidget2 = new window.NutrientViewer.Annotations.WidgetAnnotation({
-    id: window.NutrientViewer.generateInstantId(),
+  const radioWidget2 = new NutrientViewer.Annotations.WidgetAnnotation({
+    id: NutrientViewer.generateInstantId(),
     pageIndex: 0,
     formFieldName: "MyFormField",
-    boundingBox: new window.NutrientViewer.Geometry.Rect({
+    boundingBox: new NutrientViewer.Geometry.Rect({
       left: 130,
       top: 100,
       width: 20,
       height: 20,
     }),
   });
 
-  const formField = new window.NutrientViewer.FormFields.RadioButtonFormField({
+  const formField = new NutrientViewer.FormFields.RadioButtonFormField({
     name: "MyFormField",
-    annotationIds: window.NutrientViewer.Immutable.List([
+    annotationIds: new NutrientViewer.Immutable.List([
       radioWidget1.id,
       radioWidget2.id,
     ]),
-    options: window.NutrientViewer.Immutable.List([
-      new window.NutrientViewer.FormOption({
+    options: new NutrientViewer.Immutable.List([
+      new NutrientViewer.FormOption({
         label: "Option 1",
         value: "1",
       }),
-      new window.NutrientViewer.FormOption({
+      new NutrientViewer.FormOption({
         label: "Option 2",
         value: "2",
       }),
@@ -57,11 +57,11 @@ const item: ToolbarItem = {
   onPress: () => createGroupedRadioButtons(instance),
 };
 
-window.NutrientViewer.load({
+NutrientViewer.load({
   ...baseOptions,
-  theme: window.NutrientViewer.Theme.DARK,
+  theme: NutrientViewer.Theme.DARK,
   toolbarItems: [
-    ...window.NutrientViewer.defaultToolbarItems,
+    ...NutrientViewer.defaultToolbarItems,
     { type: "form-creator" },
   ],
 }).then((_instance: Instance) => {

playground/forms/custom-toolbar-radio-button/playground.url

@@ -1,2 +1,2 @@
 [InternetShortcut]
-URL=https://playground.pspdfkit.com/?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYifSwianMiOiJsZXQgaW5zdGFuY2UgPSBudWxsO1xuXG5jb25zdCBpdGVtID0ge1xuICB0eXBlOiBcImN1c3RvbVwiLFxuICBpZDogXCJhZGQtcmFkaW8tZ3JvdXBcIixcbiAgdGl0bGU6IFwiQWRkIFJhZGlvIEdyb3VwXCIsXG4gIG9uUHJlc3M6IGFzeW5jICgpID0%252BIHtcbiAgICBjb25zdCByYWRpb1dpZGdldDEgPSBuZXcgTnV0cmllbnRWaWV3ZXIuQW5ub3RhdGlvbnMuV2lkZ2V0QW5ub3RhdGlvbih7XG4gIGlkOiBOdXRyaWVudFZpZXdlci5nZW5lcmF0ZUluc3RhbnRJZCgpLFxuICBwYWdlSW5kZXg6IDAsXG4gIGZvcm1GaWVsZE5hbWU6IFwiTXlGb3JtRmllbGRcIixcbiAgYm91bmRpbmdCb3g6IG5ldyBOdXRyaWVudFZpZXdlci5HZW9tZXRyeS5SZWN0KHtcbiAgICBsZWZ0OiAxMDAsXG4gICAgdG9wOiAxMDAsXG4gICAgd2lkdGg6IDIwLFxuICAgIGhlaWdodDogMjBcbiAgfSlcbn0pO1xuY29uc3QgcmFkaW9XaWRnZXQyID0gbmV3IE51dHJpZW50Vmlld2VyLkFubm90YXRpb25zLldpZGdldEFubm90YXRpb24oe1xuICBpZDogTnV0cmllbnRWaWV3ZXIuZ2VuZXJhdGVJbnN0YW50SWQoKSxcbiAgcGFnZUluZGV4OiAwLFxuICBmb3JtRmllbGROYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gIGJvdW5kaW5nQm94OiBuZXcgTnV0cmllbnRWaWV3ZXIuR2VvbWV0cnkuUmVjdCh7XG4gICAgbGVmdDogMTMwLFxuICAgIHRvcDogMTAwLFxuICAgIHdpZHRoOiAyMCxcbiAgICBoZWlnaHQ6IDIwXG4gIH0pXG59KTtcbmNvbnN0IGZvcm1GaWVsZCA9IG5ldyBOdXRyaWVudFZpZXdlci5Gb3JtRmllbGRzLlJhZGlvQnV0dG9uRm9ybUZpZWxkKHtcbiAgbmFtZTogXCJNeUZvcm1GaWVsZFwiLFxuICBhbm5vdGF0aW9uSWRzOiBuZXcgTnV0cmllbnRWaWV3ZXIuSW1tdXRhYmxlLkxpc3QoW3JhZGlvV2lkZ2V0MS5pZCwgcmFkaW9XaWRnZXQyLmlkXSksXG4gIG9wdGlvbnM6IG5ldyBOdXRyaWVudFZpZXdlci5JbW11dGFibGUuTGlzdChbXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMVwiLCB2YWx1ZTogXCIxXCIgfSksXG4gICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMlwiLCB2YWx1ZTogXCIyXCIgfSlcbiAgXSksXG4gIGRlZmF1bHRWYWx1ZTogXCIxXCJcbn0pO1xuYXdhaXQgaW5zdGFuY2UuY3JlYXRlKFtyYWRpb1dpZGdldDEsIHJhZGlvV2lkZ2V0MiwgZm9ybUZpZWxkXSk7XG4gIH1cbn07XG5cblxuXG5cblxuXG5cbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG4gIHRvb2xiYXJJdGVtczogWy4uLk51dHJpZW50Vmlld2VyLmRlZmF1bHRUb29sYmFySXRlbXMsIHsgdHlwZTogXCJmb3JtLWNyZWF0b3JcIiB9XVxufSkudGhlbigoX2luc3RhbmNlKSA9PiB7XG4gICAgaW5zdGFuY2UgPSBfaW5zdGFuY2U7XG4gICAgaW5zdGFuY2Uuc2V0VG9vbGJhckl0ZW1zKChpdGVtcykgPT4gWy4uLml0ZW1zLCBpdGVtXSk7XG5cbn0pO1xuXHQifQ%253D%253D
+URL=https://www.nutrient.io/demo/sandbox?p=eyJqcyI6ImxldCBpbnN0YW5jZSA9IG51bGw7XG5cbmNvbnN0IGl0ZW0gPSB7XG4gIHR5cGU6IFwiY3VzdG9tXCIsXG4gIGlkOiBcImFkZC1yYWRpby1ncm91cFwiLFxuICB0aXRsZTogXCJBZGQgUmFkaW8gR3JvdXBcIixcbiAgb25QcmVzczogYXN5bmMgKCkgPT4ge1xuICAgIGNvbnN0IHJhZGlvV2lkZ2V0MSA9IG5ldyBOdXRyaWVudFZpZXdlci5Bbm5vdGF0aW9ucy5XaWRnZXRBbm5vdGF0aW9uKHtcbiAgICAgIGlkOiBOdXRyaWVudFZpZXdlci5nZW5lcmF0ZUluc3RhbnRJZCgpLFxuICAgICAgcGFnZUluZGV4OiAwLFxuICAgICAgZm9ybUZpZWxkTmFtZTogXCJNeUZvcm1GaWVsZFwiLFxuICAgICAgYm91bmRpbmdCb3g6IG5ldyBOdXRyaWVudFZpZXdlci5HZW9tZXRyeS5SZWN0KHtcbiAgICAgICAgbGVmdDogMTAwLFxuICAgICAgICB0b3A6IDEwMCxcbiAgICAgICAgd2lkdGg6IDIwLFxuICAgICAgICBoZWlnaHQ6IDIwLFxuICAgICAgfSksXG4gICAgfSk7XG4gICAgY29uc3QgcmFkaW9XaWRnZXQyID0gbmV3IE51dHJpZW50Vmlld2VyLkFubm90YXRpb25zLldpZGdldEFubm90YXRpb24oe1xuICAgICAgaWQ6IE51dHJpZW50Vmlld2VyLmdlbmVyYXRlSW5zdGFudElkKCksXG4gICAgICBwYWdlSW5kZXg6IDAsXG4gICAgICBmb3JtRmllbGROYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gICAgICBib3VuZGluZ0JveDogbmV3IE51dHJpZW50Vmlld2VyLkdlb21ldHJ5LlJlY3Qoe1xuICAgICAgICBsZWZ0OiAxMzAsXG4gICAgICAgIHRvcDogMTAwLFxuICAgICAgICB3aWR0aDogMjAsXG4gICAgICAgIGhlaWdodDogMjAsXG4gICAgICB9KSxcbiAgICB9KTtcbiAgICBjb25zdCBmb3JtRmllbGQgPSBuZXcgTnV0cmllbnRWaWV3ZXIuRm9ybUZpZWxkcy5SYWRpb0J1dHRvbkZvcm1GaWVsZCh7XG4gICAgICBuYW1lOiBcIk15Rm9ybUZpZWxkXCIsXG4gICAgICBhbm5vdGF0aW9uSWRzOiBuZXcgTnV0cmllbnRWaWV3ZXIuSW1tdXRhYmxlLkxpc3QoW1xuICAgICAgICByYWRpb1dpZGdldDEuaWQsXG4gICAgICAgIHJhZGlvV2lkZ2V0Mi5pZCxcbiAgICAgIF0pLFxuICAgICAgb3B0aW9uczogbmV3IE51dHJpZW50Vmlld2VyLkltbXV0YWJsZS5MaXN0KFtcbiAgICAgICAgbmV3IE51dHJpZW50Vmlld2VyLkZvcm1PcHRpb24oeyBsYWJlbDogXCJPcHRpb24gMVwiLCB2YWx1ZTogXCIxXCIgfSksXG4gICAgICAgIG5ldyBOdXRyaWVudFZpZXdlci5Gb3JtT3B0aW9uKHsgbGFiZWw6IFwiT3B0aW9uIDJcIiwgdmFsdWU6IFwiMlwiIH0pLFxuICAgICAgXSksXG4gICAgICBkZWZhdWx0VmFsdWU6IFwiMVwiLFxuICAgIH0pO1xuICAgIGF3YWl0IGluc3RhbmNlPy5jcmVhdGUoW3JhZGlvV2lkZ2V0MSwgcmFkaW9XaWRnZXQyLCBmb3JtRmllbGRdKTtcbiAgfSxcbn07XG5cbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbiAgdGhlbWU6IE51dHJpZW50Vmlld2VyLlRoZW1lLkRBUkssXG4gIHRvb2xiYXJJdGVtczogW1xuICAgIC4uLk51dHJpZW50Vmlld2VyLmRlZmF1bHRUb29sYmFySXRlbXMsXG4gICAgeyB0eXBlOiBcImZvcm0tY3JlYXRvclwiIH0sXG4gIF0sXG59KS50aGVuKChfaW5zdGFuY2UpID0%2BIHtcbiAgaW5zdGFuY2UgPSBfaW5zdGFuY2U7XG4gIGluc3RhbmNlLnNldFRvb2xiYXJJdGVtcygoaXRlbXMpID0%2BIFsuLi5pdGVtcywgaXRlbV0pO1xufSk7XG4iLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwic2V0dGluZ3MiOnsiZmlsZU5hbWUiOiJiYXNpYy5wZGYiLCJ1c2VEeW5hbWljRm9udHMiOnRydWUsImN1c3RvbUZvbnRGaWxlTmFtZXMiOltdfSwidiI6MX0%3D

playground/types/global.d.ts

@@ -1,8 +1,9 @@
-import type NutrientViewer from "@nutrient-sdk/viewer";
+import type NutrientViewerType from "@nutrient-sdk/viewer";
 
 declare global {
+  var NutrientViewer: typeof NutrientViewerType;
+
   interface Window {
-    // Nutrient Web SDK loaded via CDN
-    NutrientViewer: typeof NutrientViewer;
+    NutrientViewer: typeof NutrientViewerType;
   }
 }