[Bug]: editorFreeHighlightThickness is null

[okoeller]

Attach (recommended) or Link to PDF file

I am using pdfjs dist version 4.6.82 build '9b541910f' in a Drupal 10 CMS to display PDFs in a non-printable manner.
The viewer.html is displayed but I am facing this error of:

Uncaught (in promise) TypeError: editorFreeHighlightThickness is null annotation_editor_params.js:87:4
#bindListeners annotation_editor_params.js:87
AnnotationEditorParams annotation_editor_params.js:39
_initializeViewerComponents app.js:527
initialize app.js:253
run app.js:675
webViewerLoad viewer.js:254
viewer.js:265

So the pdf itself is NOT displayed.

`/* Copyright 2022 Mozilla Foundation
*

• Licensed under the Apache License, Version 2.0 (the "License");
• you may not use this file except in compliance with the License.
• You may obtain a copy of the License at

• http://www.apache.org/licenses/LICENSE-2.0
  

• Unless required by applicable law or agreed to in writing, software
• distributed under the License is distributed on an "AS IS" BASIS,
• WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
• See the License for the specific language governing permissions and
• limitations under the License.
  */

/** @typedef {import("./event_utils.js").EventBus} EventBus */

import { AnnotationEditorParamsType } from "pdfjs-lib";

/**

• @typedef {Object} AnnotationEditorParamsOptions
• @Property {HTMLInputElement} editorFreeTextFontSize
• @Property {HTMLInputElement} editorFreeTextColor
• @Property {HTMLInputElement} editorInkColor
• @Property {HTMLInputElement} editorInkThickness
• @Property {HTMLInputElement} editorInkOpacity
• @Property {HTMLButtonElement} editorStampAddImage
• @Property {HTMLInputElement} editorFreeHighlightThickness
• @Property {HTMLButtonElement} editorHighlightShowAll
  */

class AnnotationEditorParams {
/**

• @param {AnnotationEditorParamsOptions} options
• @param {EventBus} eventBus
  */
  constructor(options, eventBus) {
  this.eventBus = eventBus;
  this.#bindListeners(options);
  }

/**

• @param {AnnotationEditorParamsOptions} options
  */
  #bindListeners({
  editorFreeTextFontSize,
  editorFreeTextColor,
  editorInkColor,
  editorInkThickness,
  editorInkOpacity,
  editorStampAddImage,
  editorFreeHighlightThickness,
  editorHighlightShowAll,
  }) {
  const dispatchEvent = (typeStr, value) => {
  this.eventBus.dispatch("switchannotationeditorparams", {
  source: this,
  type: AnnotationEditorParamsType[typeStr],
  value,
  });
  };
  editorFreeTextFontSize.addEventListener("input", function () {
  dispatchEvent("FREETEXT_SIZE", this.valueAsNumber);
  });
  editorFreeTextColor.addEventListener("input", function () {
  dispatchEvent("FREETEXT_COLOR", this.value);
  });
  editorInkColor.addEventListener("input", function () {
  dispatchEvent("INK_COLOR", this.value);
  });
  editorInkThickness.addEventListener("input", function () {
  dispatchEvent("INK_THICKNESS", this.valueAsNumber);
  });
  editorInkOpacity.addEventListener("input", function () {
  dispatchEvent("INK_OPACITY", this.valueAsNumber);
  });
  editorStampAddImage.addEventListener("click", () => {
  this.eventBus.dispatch("reporttelemetry", {
  source: this,
  details: {
  type: "editing",
  data: { action: "pdfjs.image.add_image_click" },
  },
  });
  dispatchEvent("CREATE");
  });
  editorFreeHighlightThickness.addEventListener("input", function () {
  dispatchEvent("HIGHLIGHT_THICKNESS", this.valueAsNumber);
  });
  editorHighlightShowAll.addEventListener("click", function () {
  const checked = this.getAttribute("aria-pressed") === "true";
  this.setAttribute("aria-pressed", !checked);
  dispatchEvent("HIGHLIGHT_SHOW_ALL", !checked);
  });

this.eventBus._on("annotationeditorparamschanged", evt => {
  for (const [type, value] of evt.details) {
    switch (type) {
      case AnnotationEditorParamsType.FREETEXT_SIZE:
        editorFreeTextFontSize.value = value;
        break;
      case AnnotationEditorParamsType.FREETEXT_COLOR:
        editorFreeTextColor.value = value;
        break;
      case AnnotationEditorParamsType.INK_COLOR:
        editorInkColor.value = value;
        break;
      case AnnotationEditorParamsType.INK_THICKNESS:
        editorInkThickness.value = value;
        break;
      case AnnotationEditorParamsType.INK_OPACITY:
        editorInkOpacity.value = value;
        break;
      case AnnotationEditorParamsType.HIGHLIGHT_THICKNESS:
        editorFreeHighlightThickness.value = value;
        break;
      case AnnotationEditorParamsType.HIGHLIGHT_FREE:
        editorFreeHighlightThickness.disabled = !value;
        break;
      case AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL:
        editorHighlightShowAll.setAttribute("aria-pressed", value);
        break;
    }
  }
});

}
}

export { AnnotationEditorParams };`

Web browser and its version

firefox 130.0.1

Operating system and its version

Windows 11

PDF.js version

4.6.82

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

implementing the pfdjs dist web and build folders and using the corresponding viewer.mjs

What is the expected behavior?

to see the pdf

What went wrong?

the above described error occured in annotation_editor_params.js

Link to a viewer

No response

Additional context

No response