Add Role column to permissions table and move it below the header

- Added the Role column (Price Editor, Reviewer, Commenter, Editor, Viewer)
  to the user permissions table
- Moved the table to the toolbar area right after the sample header with a
  full-width layout
- Cleaned up region marker comments and a redundant empty branch in app.ts

Co-authored-by: suriyaprakasamr <302142999+suriyaprakasamr@users.noreply.github.com>
Bold-Create-Session: https://app.boldcreate.ai/agent/chat/?threadId=12b07b78-1832-49fa-8f4a-31352769b404

Author: Bold Create Agent

document-protection/src/app/app.ts

@@ -76,9 +76,7 @@ let currentUser: UserPermission = users[0];
 
 documentEditor.open(JSON.stringify((<any>documentProtectionData)));
 applyUserPermissions(currentUser);
-// endregion
 
-// region: User selection dropdown and permissions table
 const userSelect: HTMLSelectElement = document.getElementById('userSelect') as HTMLSelectElement;
 users.forEach(function (user: UserPermission): void {
     const option: HTMLOptionElement = document.createElement('option');
@@ -96,9 +94,7 @@ userSelect.addEventListener('change', function (): void {
         applyUserPermissions(currentUser);
     }
 });
-// endregion
 
-// region: Apply per-user protection and restrictions
 /**
  * Enforces the document protection for the selected user.
  * The Document Editor checks `documentHelper.isDocumentProtected` along with
@@ -113,9 +109,7 @@ function applyUserPermissions(user: UserPermission): void {
     // Reset read-only restriction of the container (used for Laura)
     documentEditor.isReadOnly = false;
     documentEditor.currentUser = user.email;
-    if (user.protectionType === 'NoProtection') {
-        // Michael: full editing, no protection applied
-    } else {
+    if (user.protectionType !== 'NoProtection') {
         // Enforces ReadOnly, RevisionsOnly or CommentsOnly without a password
         documentEditor.editorModule.enforceProtection('', user.protectionType);
     }
@@ -128,9 +122,7 @@ function applyUserPermissions(user: UserPermission): void {
     documentEditor.documentHelper.restrictEditingPane.showHideRestrictPane(false);
     updatePermissionBanner(user);
 }
-// endregion
 
-// region: Approval workflow - block accept/reject revisions for Andrew
 /**
  * Andrew works in `RevisionsOnly` protection: every edit is tracked, but the
  * built-in accept/reject actions are blocked, so a reviewer with approval
@@ -142,9 +134,7 @@ documentEditor.beforeAcceptRejectChanges = function (args: any): void {
         args.cancel = true;
     }
 };
-// endregion
 
-// region: Export DOCX and PDF (Laura's permissions)
 /**
  * Exports the current document content as PDF through the online demo web
  * service `Export` action.
@@ -188,13 +178,10 @@ const exportPdfButton: HTMLButtonElement = document.getElementById('exportPdf')
 exportPdfButton.addEventListener('click', function (): void {
     formatSave('Pdf');
 });
-// endregion
 
-// region: Permission details panel
 function updatePermissionBanner(user: UserPermission): void {
     const banner: HTMLElement | null = document.getElementById('permissionBanner');
     if (banner) {
         banner.textContent = 'Signed in as ' + user.name + ' (' + user.email + ') - ' + user.role;
     }
-}
-// endregion
+}

document-protection/src/index.html

@@ -17,57 +17,64 @@ <h1>User based restrict editing and approval workflow in JavaScript DOCX Editor<
         </p>
     </div>
     <div class="sample-toolbar">
-        <label for="userSelect">Signed in user:</label>
-        <select id="userSelect" title="Choose the user whose permissions are applied"></select>
-        <span id="permissionBanner" class="permission-banner"></span>
-        <span class="toolbar-spacer"></span>
-        <button id="exportDocx" class="export-button" title="Export as Word document (*.docx)">Export as DOCX</button>
-        <button id="exportPdf" class="export-button" title="Export as PDF">Export as PDF</button>
-    </div>
-    <div class="sample-content">
-        <div class="editor-holder">
-            <!-- Element which will render as Document Editor -->
-            <div id="DocumentEditor"></div>
-        </div>
         <div class="permission-holder">
-            <h4>User permissions</h4>
             <table class="permission-table">
                 <thead>
                     <tr>
                         <th>User</th>
+                        <th>Role</th>
                         <th>Email</th>
                         <th>Permissions</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
                         <td>Nancy</td>
+                        <td>Price Editor</td>
                         <td>nancy@example.com</td>
                         <td>Can edit only the price values (marked editable ranges)</td>
                     </tr>
                     <tr>
                         <td>Andrew</td>
+                        <td>Reviewer</td>
                         <td>andrew@example.com</td>
                         <td>All edits are tracked; cannot accept/reject revisions</td>
                     </tr>
                     <tr>
                         <td>Steven</td>
+                        <td>Commenter</td>
                         <td>steven@example.com</td>
                         <td>Can insert comments only; cannot edit content</td>
                     </tr>
                     <tr>
                         <td>Michael</td>
+                        <td>Editor</td>
                         <td>michael@example.com</td>
                         <td>Full editing (approves the tracked changes)</td>
                     </tr>
                     <tr>
                         <td>Laura</td>
+                        <td>Viewer</td>
                         <td>laura@example.com</td>
                         <td>Read-only; can export as DOCX and PDF only</td>
                     </tr>
                 </tbody>
             </table>
         </div>
     </div>
+    <div class="sample-toolbar">
+        <label for="userSelect">Signed in user:</label>
+        <select id="userSelect" title="Choose the user whose permissions are applied"></select>
+        <span id="permissionBanner" class="permission-banner"></span>
+        <span class="toolbar-spacer"></span>
+        <button id="exportDocx" class="export-button" title="Export as Word document (*.docx)">Export as DOCX</button>
+        <button id="exportPdf" class="export-button" title="Export as PDF">Export as PDF</button>
+    </div>
+    <div class="sample-content">
+        <div class="editor-holder">
+            <!-- Element which will render as Document Editor -->
+            <div id="DocumentEditor"></div>
+        </div>
+    </div>
 </body>
 </html>

document-protection/src/styles/styles.css

@@ -85,19 +85,8 @@ body {
 }
 
 .permission-holder {
-    width: 320px;
-    padding: 16px;
-    background-color: #ffffff;
-    border-left: 1px solid #e0e0e0;
-    min-height: 560px;
-    box-sizing: border-box;
-}
-
-.permission-holder h4 {
-    margin: 0 0 12px;
-    font-size: 15px;
-    font-weight: 600;
-    color: #1a202c;
+    flex: 1;
+    padding: 0;
 }
 
 .permission-table {
@@ -108,7 +97,7 @@ body {
 
 .permission-table th,
 .permission-table td {
-    padding: 8px 6px;
+    padding: 6px 8px;
     border: 1px solid #e0e0e0;
     text-align: left;
     vertical-align: top;
@@ -120,6 +109,6 @@ body {
     color: #1a202c;
 }
 
-.permission-table td:nth-child(2) {
+.permission-table td:nth-child(3) {
     word-break: break-all;
 }