Fix for the Error "The AnnotationEditor is not enabled.".

[Tanmaya-Code-Library]

I am trying to open a base64 pdf string inside a customized chromium browser. I am using the viewer.html page of PDF.JS.

I could able to display the PDF from base 64 sting. All the tools of PDF.JS are visible except the Annotation Tools.

I updated the viewer.html code to display and enable these annotation buttons. But when I click any annotation button, I get the error in the browser's developer console "The AnnotationEditor is not enabled." Then I tried to enable using the following code.

PDFViewerApplication.pdfViewer.annotationEditorMode = 1

But then also I am getting the same error in the above line:- "The AnnotationEditor is not enabled." Please help me in resolving the issue.

I am using the following inline script in viewer.html of PDF.js.

<script type="module"> import { GlobalWorkerOptions } from '../build/pdf.mjs'; // Adjust path to pdf.mjs import { PDFViewerApplicationOptions } from './viewer.mjs'; import { PDFViewerApplication } from './viewer.mjs'; // Adjust path to viewer.mjs document.addEventListener('DOMContentLoaded', async () => { console.log("DOMContentLoaded loaded"); // Base64 PDF string const base64String ="Base 64 String "; // Convert Base64 to Uint8Array function base64ToUint8Array(base64) { const binaryString = atob(base64); const len = binaryString.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) { bytes[i] = binaryString.charCodeAt(i); } return bytes; } // Set up the PDF.js worker source GlobalWorkerOptions.workerSrc = '../build/pdf.worker.mjs'; // Adjust path to pdf.worker.mjs if (PDFViewerApplicationOptions) { console.log("1-PDFViewerApplicationOptions.enableAnnotationEditor is available"); PDFViewerApplicationOptions.enableAnnotationEditor = 1; } // Initialize PDFViewerApplication await PDFViewerApplication.initializedPromise; if (PDFViewerApplicationOptions) { console.log("2-PDFViewerApplicationOptions.enableAnnotationEditor is available"); PDFViewerApplicationOptions.enableAnnotationEditor = 1; } if (PDFViewerApplication.pdfViewer.annotationEditorMode) { console.log("annotationEditorMode is available"); var i = PDFViewerApplication.pdfViewer.annotationEditorMode; console.log("annotationEditorMode:-" + i); } // Check if annotations are enabled, and force-enable if not if (!PDFViewerApplication.pdfViewer.annotationEditorUIManager) { console.log('Initializing AnnotationEditorUIManager...'); PDFViewerApplication.pdfViewer.annotationEditorUIManager = { enable() { console.log('Annotations enabled.'); this._isEnabled = true; }, disable() { this._isEnabled = false; }, _isEnabled: false, isEnabled() { return this._isEnabled; }, }; } try { // Load the base64 PDF data const pdfData = base64ToUint8Array(base64String); await PDFViewerApplication.open({ data: pdfData }); // Enable the annotation system explicitly const annotationManager = PDFViewerApplication.pdfViewer.annotationEditorUIManager; if (annotationManager && !annotationManager.isEnabled()) { annotationManager.enable(); console.log('Annotation tools are now enabled.'); } else { console.log('Annotation tools are already enabled.'); } // Verify annotation system if (annotationManager.isEnabled()) { console.log('Annotations initialized successfully and are active.'); } else { console.error('Failed to activate annotations.'); } } catch (error) { console.error('Error loading PDF:', error); } enableAllEditorButtons(); if (PDFViewerApplication.annotationEditorUIManager) { console.log('PDFViewerApplication.annotationEditorUIManager is available.'); } if (PDFViewerApplication.pdfViewer.annotationEditorUIManager) { console.log('PDFViewerApplication.pdfViewer.annotationEditorUIManager is available.'); PDFViewerApplication.pdfViewer.annotationEditorUIManager.enable = true; } /*if (!PDFViewerApplication.pdfViewer.annotationManager) { console.error('PDFViewerApplication.pdfViewer.annotationManager is not available.'); }*/ }); function enableAllEditorButtons() { // List of button IDs to enable const buttonIds = ['editorHighlightButton', 'editorFreeTextButton', 'editorInkButton', 'editorStampButton']; let allButtonsFound = true; buttonIds.forEach(buttonId => { const button = document.getElementById(buttonId); if (button) { button.disabled = false; // Enable the button console.log(`Button with ID '${buttonId}' enabled.`); } else { console.log(`Button with ID '${buttonId}' not found.`); allButtonsFound = false; } }); if (!allButtonsFound) { console.log("Retrying to enable buttons..."); setTimeout(enableEditorButtons, 500); // Retry after 500ms if any button is not found } } </script>