feat: add highlight required fields example

Author: InosRahul

playground/forms/highlight-required-fields/index.ts

@@ -0,0 +1,65 @@
+import type {
+  AnnotationsUnion,
+  FormField,
+  Instance,
+  RendererConfiguration,
+} from "@nutrient-sdk/viewer";
+import { baseOptions } from "../../shared/base-options";
+
+let requiredFormFields: ReturnType<
+  typeof window.NutrientViewer.Immutable.List<FormField>
+>;
+
+window.NutrientViewer.load({
+  ...baseOptions,
+  theme: window.NutrientViewer.Theme.DARK,
+  customRenderers: {
+    Annotation: ({
+      annotation,
+    }: {
+      annotation: AnnotationsUnion;
+    }): RendererConfiguration | null => {
+      if (
+        !(
+          annotation instanceof
+          window.NutrientViewer.Annotations.WidgetAnnotation
+        )
+      ) {
+        return null;
+      }
+
+      const isRequiredField =
+        requiredFormFields &&
+        requiredFormFields.size > 0 &&
+        requiredFormFields.find(
+          (formField: FormField) => formField.name === annotation.formFieldName,
+        );
+
+      if (isRequiredField) {
+        const node = document.createElement("div");
+        node.classList.add("required-form-field");
+
+        return {
+          node,
+          append: true,
+        };
+      }
+
+      return null;
+    },
+  },
+}).then(async (instance: Instance) => {
+  const formFields = await instance.getFormFields();
+
+  const changes = formFields.map((formField: FormField) =>
+    formField.set("required", true),
+  );
+
+  await instance.update(changes.toArray());
+
+  const updatedFormFields = await instance.getFormFields();
+
+  requiredFormFields = updatedFormFields.filter(
+    (formField: FormField) => formField.required,
+  );
+});

playground/forms/highlight-required-fields/playground.mdx

@@ -0,0 +1,6 @@
+---
+category: forms
+title: Highlight Required Fields
+description: Mark form fields as required and visually highlight them with a custom renderer overlay.
+keywords: [forms, required, validation, custom-renderer, widget]
+---

playground/forms/highlight-required-fields/styles.css

@@ -0,0 +1,10 @@
+/* Add your CSS here */
+.required-form-field:after {
+  content: " *";
+  color: red;
+  font-weight: bold;
+  position: absolute;
+  right: -12px;
+  top: 35%;
+  transform: translateY(-50%);
+}