Merge branch 'master' into div/ui-customization-doc-editor

Author: divyanshu013

.github/workflows/typecheck.yml

@@ -0,0 +1,33 @@
+name: Type Check Playground Examples
+
+on:
+  pull_request:
+    paths:
+      - 'playground/**'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  typecheck:
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+          cache-dependency-path: playground/package-lock.json
+
+      - name: Install dependencies
+        working-directory: playground
+        run: npm ci
+
+      - name: Run type check
+        working-directory: playground
+        run: npm run typecheck

README.md

@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "@biomejs/biome": "^2.2.4",
+    "@biomejs/biome": "^2.3.1",
     "@eslint/js": "^9.18.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.1"

package-lock.json

@@ -0,0 +1,92 @@
+# 🎮 Interactive Playground Snippets
+
+> **Try these examples instantly in your browser** - No setup, no installation required!
+
+These are ready-to-run code snippets for the [Nutrient Web SDK](https://www.nutrient.io/web-sdk/) that you can open directly in the [Nutrient Playground](https://www.nutrient.io/playground). Each example demonstrates a specific feature with working code you can experiment with immediately.
+
+## 🚀 How to Use
+
+1. Click any example link below
+2. The Nutrient Playground opens with the code pre-loaded
+3. Modify the code and see changes instantly
+4. Copy the code into your own project
+
+---
+
+## 📋 Example Categories
+
+### 🎨 Annotations
+[**View Annotations Examples**](./web-annotations.md) — Add, customize, and manage PDF annotations including watermarks, highlighting, and bulk operations.
+
+**Popular examples:**
+- Watermark from text annotation
+- Flatten annotation on creation
+- Bulk delete all annotations
+- Straighten freeform highlights
+
+---
+
+### 🔒 Redaction
+[**View Redaction Examples**](./web-redaction.md) — Permanently remove sensitive content from PDFs.
+
+---
+
+### ✍️ Signing
+[**View Signing Examples**](./web-signing.md) — Electronic and digital signatures for PDF documents.
+
+---
+
+### 📝 Forms
+[**View Forms Examples**](./web-forms.md) — PDF form filling and management.
+
+---
+
+### 🎨 Form Creator
+[**View Form Creator Examples**](./web-form-creator.md) — Create and customize interactive PDF forms.
+
+---
+
+### 👁️ Viewer
+[**View Viewer Examples**](./web-viewer.md) — PDF viewing, navigation, and display customization.
+
+---
+
+### 📄 Document Editor
+[**View Document Editor Examples**](./web-document-editor.md) — Page manipulation, extraction, and editing.
+
+---
+
+### 💬 Comments
+[**View Comments Examples**](./web-comments.md) — Collaborative commenting workflows.
+
+---
+
+### ✏️ Content Editor
+[**View Content Editor Examples**](./web-content-editor.md) — Direct PDF content editing capabilities.
+
+---
+
+### 🎛️ Toolbars & Menus
+[**View Toolbars & Menus Examples**](./web-toolbars-menus.md) — UI customization and toolbar configuration.
+
+---
+
+### 🔍 Text Comparison
+[**View Text Comparison Examples**](./web-text-comparison.md) — Compare document versions and track changes.
+
+---
+
+## 💻 Want More?
+
+- **Full Projects**: For complete, runnable applications, see [/web](../../web) directory
+- **Framework Integration**: [React](https://github.com/PSPDFKit/nutrient-web-examples/tree/main/examples/react), [Angular](https://github.com/PSPDFKit/nutrient-web-examples/tree/main/examples/angular), [Next.js](https://github.com/PSPDFKit/nutrient-web-examples/tree/main/examples/nextjs)
+- **Documentation**: [Nutrient Guides](https://www.nutrient.io/guides/)
+- **API Reference**: [Web SDK API](https://www.nutrient.io/api/web/)
+
+---
+
+## 🤝 Need Help?
+
+- [Discord Community](https://discord.gg/Z754Pfb8bD)
+- [Support Portal](https://support.nutrient.io/hc/en-us/requests/new)
+- [Report Issues](https://github.com/PSPDFKit/awesome-nutrient/issues)

package.json

@@ -0,0 +1,40 @@
+import { baseOptions } from "../../shared/base-options";
+
+// Bulk delete ALL annotations
+window.NutrientViewer.load({
+  ...baseOptions,
+  theme: window.NutrientViewer.Theme.DARK,
+}).then((instance) => {
+  const items = instance.toolbarItems;
+
+  const deleteButton = {
+    type: "custom",
+    id: "delete-annotations",
+    title: "Delete", // or "Remove"
+    onPress: async () => {
+      try {
+        const pagesAnnotations = await Promise.all(
+          Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
+            instance.getAnnotations(pageIndex),
+          ),
+        );
+
+        const annotationIds = pagesAnnotations.flatMap((pageAnnotations) =>
+          pageAnnotations.map((annotation) => annotation.id).toArray(),
+        );
+
+        if (annotationIds.length === 0) {
+          console.info("No annotations to delete.");
+          return;
+        }
+
+        await instance.delete(annotationIds);
+        console.info(`Deleted ${annotationIds.length} annotations.`);
+      } catch (e) {
+        console.error("Failed to delete annotations:", e);
+      }
+    },
+  };
+
+  instance.setToolbarItems([...items, deleteButton]);
+});

playground/README.md

@@ -0,0 +1,6 @@
+---
+category: annotations
+title: Bulk Delete Annotations
+description: Example to bulk delete annotations from the entire document. After the viewer loads, it gathers annotations from every page, flattens their IDs, and deletes them in a single operation..
+keywords: [annoatations, delete]
+---

playground/annotations/bulk-delete-annotations/index.ts

@@ -0,0 +1,40 @@
+import type { Annotation } from "@nutrient-sdk/viewer";
+import { baseOptions } from "../../shared/base-options";
+
+const username = "Omar";
+
+window.NutrientViewer.load({
+  ...baseOptions,
+  theme: window.NutrientViewer.Theme.DARK,
+  toolbarItems: [{ type: "comment" }],
+}).then((instance) => {
+  const annotation =
+    new window.NutrientViewer.Annotations.CommentMarkerAnnotation({
+      id: "test",
+      pageIndex: 0,
+      boundingBox: new window.NutrientViewer.Geometry.Rect({
+        top: 100,
+        left: 100,
+        width: 10,
+        height: 10,
+      }),
+      customData: { circleId: "my-circle" },
+    });
+
+  const comment = new window.NutrientViewer.Comment({
+    id: "commentId",
+    rootId: "test",
+    pageIndex: 0,
+    text: { format: "plain", value: "Hello" },
+  });
+
+  instance.setAnnotationCreatorName(username);
+  instance.create([annotation, comment]);
+
+  instance.addEventListener("annotations.create", (annotations) => {
+    const firstAnnotation = annotations.first() as Annotation | undefined;
+    if (firstAnnotation) {
+      console.log(firstAnnotation.toJS());
+    }
+  });
+});

playground/annotations/bulk-delete-annotations/playground.mdx

@@ -0,0 +1,6 @@
+---
+category: annotations
+title: Create Comment Thread Programmatically
+description: Demonstrates how to programmatically create a comment marker annotation with an associated comment thread, setting the creator name and listening for annotation creation events.
+keywords: [comment, annotation, programmatic, CommentMarkerAnnotation, thread]
+---