Make programmatically added annotations visible in browser

[Excubitor]

is there currently a way to make annotations manually added to the annotationstorage visible in the pdfjs viewer?

I can’t quite grasp how to reinitialize the page so that annotation in the storage gets rendered on screen.

[calixteman]

The storage is just used to add the new properties which will be used when the pdf is printed/saved.
Originally it has been designed for forms, for example, to add a value entered by a user in a field, and then when the pdf is printed/saved the new value must be taken into account.
After it has been extended to support adding new annotations: the storage contains some serialized elements which can be deserialized (for example when on copy/paste we serialize/deserialize the annotation); for example you can have a look on:
https://github.com/mozilla/pdf.js/blob/master/src/display/editor/stamp.js#L515-L594

[lasseborly]

Yeah you need to handle that yourself. I'm just iterating through all inputs, textareas etc. and updating the value that way, so that it's the same as in the annotationstorage.

[Osiris-Team]

@calixteman I am trying to store annotations into localStorage so that I can keep them between site reloads, how would I do that?

[lasseborly]

There is no functionality for that built in. You need to manage that yourself and manually re-populate the input, textareas and whatnot.

I am just gonna share my full implementation of this for others too see. Try to look past the specificities.
I do not have time to make an easier to digest example.

/** @type {boolean} */
const userId = JSON.parse(document.getElementById("user-id").textContent);

/**
 * @typedef {Object} Character
 * @property {number} id
 * @property {string} character_name
 * @property {string} character_sheet
 * @property {Object} fields
 * @property {number} user
 */

/** @type {Character} */
const character = JSON.parse(document.getElementById("character").textContent);

/**
 * Most editing should only be enabled if the user looking
 * at the character is the one who owns it.
 */
const userOwned = character.user === userId;

// PDFViewerApplication.pdfDocument.annotationStorage
let storage;

/**
 * We need to make sure that we do not load the field values before
 * all pages have finsihed loading their annotation editor layers (inputs etc.)
 */
let editorLayersLoaded = 0;

/**
 * We store the id but need to get the DOM node from time to time.
 * @param {string} id
 * @returns
 */
function getFieldNode(id) {
  return document.querySelector(`[data-element-id="${id}"]`);
}

function setFields(fields) {
  for (const field in fields) {
    id = fields[field].id;
    node = getFieldNode(id);
    value = fields[field].value;

    if (node.type !== "checkbox") {
      node.value = value;
      storage.setValue(id, { value: value });
    }
    if (node.type === "checkbox") {
      node.checked = Boolean(value);
      storage.setValue(id, { value: Boolean(value) });
    }
  }
}

document.addEventListener("webviewerloaded", () => {
  PDFViewerApplicationOptions.set("disablePreferences", true);
  PDFViewerApplicationOptions.set("enableScripting", false);
  PDFViewerApplicationOptions.set("isEvalSupported", false);

  PDFViewerApplicationOptions.set(
    "defaultUrl",
    `/static/sheets/${character.character_sheet}.pdf`
  );

  PDFViewerApplication.initializedPromise.then(() => {
    PDFViewerApplication.eventBus.on("metadataloaded", () => {
      PDFViewerApplication.setTitle(character.character_name);

      // Sets the name of the downloaded file
      const slug = location.pathname
        .split("/")
        .filter((path) => path)
        .slice(-1)[0];
      PDFViewerApplication._contentDispositionFilename = `${slug}.pdf`;
    });

    PDFViewerApplication.eventBus.on(
      "annotationeditorlayerrendered",
      async () => {
        editorLayersLoaded += 1;
        if (editorLayersLoaded !== PDFViewerApplication.pagesCount) return;

        storage = PDFViewerApplication.pdfDocument.annotationStorage;
        setFields(character.fields);
        const field_objects =
          await PDFViewerApplication.pdfDocument.getFieldObjects();

        const fields_nodes = Object.values(field_objects).map((field) => {
          const node = getFieldNode(field[0].id);
          return node;
        });

        if (userOwned) {
          for (const node of fields_nodes) {
            if (node.value) {
              node.classList.add("annotation-layer-field__modified");
            }

            node.addEventListener("input", (event) => {
              if (event.target.value) {
                event.target.classList.add("annotation-layer-field__modified");
              } else {
                /**
                 * Keep the highlight for fields that aren't modified since it makes the
                 * fields easier to find.
                 */
                event.target.classList.remove(
                  "annotation-layer-field__modified"
                );
              }
            });

            node.setAttribute(
              "hx-post",
              `/update-character-field/${character.id}/`
            );
            if (node.type !== "checkbox") {
              node.setAttribute("hx-trigger", "keyup changed delay:250ms");
            }
            htmx.process(node);
          }
        } else {
          /**
           * If the user isn't the one who own's the character we do not want to
           * allow them to edit the fields. This is also checked in the BE to make
           * sure that the fields can't actually be changed.
           */
          for (const field of fields_nodes) {
            //there might be an official way of disabling this
            field.disabled = true;
            field.classList.add("annotation-layer-field__disabled");
          }
        }
      }
    );
  });
});

[Osiris-Team]

Thanks a lot will give it a try!

[Excubitor]

Trying to get it to work, but not making it so far.

[lasseborly]

Could you share the code you have @Excubitor ?

[Excubitor]

Not really a javascript guy. I'm trying to be able to reload annotations in a maui web view that loads the pdfjs official viewer. I can save and restore annotationstorage from the database (JSON.stringify/JSON.parse). I know I need to re-populate the inputs. I don't need to check the user. I allready know it is the correct user.

I have tried to use your code but haven't figured out what I should use for character and fields. I have a loaded a pdf and the restored data in the annotationstorage.

[Osiris-Team]

@lasseborly having the same issue, is there a way this can be turned into more like an API that provides an interface to add/remove/list/update annotations?

[Osiris-Team]

Im also not sure if this works with the latest version, especially PDFViewerApplication.eventBus.on( "annotationeditorlayerrendered", doesnt seem to trigger when a new annotation is added (or even at all).

And PDFViewerApplication.pdfDocument.getFieldObjects() seems to return nothing.

The closest thing I found is listing the editor types: pdfjsLib.AnnotationEditorLayer.#editorTypes.forEach((k,v)=>{console.log(k); console.log(v);})

[Osiris-Team]

Has anyone an idea how I can access createAndAddNewEditor(...) from annotation_editor_layer.js?

[Osiris-Team]

@Excubitor Update: Found a way to programmatically add fields/editors/annotations (however you want to call them):

/**
 * @param {number} pageNum - starts at 1, represents the page
 * @param {string} defaultContent - inital text content
 * @returns editor
 */
function addTextEditor(pageNum, defaultContent = "unset") {
    const pageEditorLayer = PDFViewerApplication.pdfViewer._pages[pageNum - 1].annotationEditorLayer.annotationEditorLayer
    pageEditorLayer.pasteEditor(pdfjsLib.AnnotationEditorType.FREETEXT, {}) // Open editor layer.
    // Workaround to update the mode, this creates an empty editor that gets removed later since it has no content

    let editor = pageEditorLayer.createAndAddNewEditor(
        { offsetX: 0, offsetY: 0 },
        /* isCentered = */ false
    );
    editor.setContentText = function (text) {
        console.log(editor.contentDiv)
        editor.contentDiv.innerHTML = `<div>` + defaultContent + `</div>`
    }
    editor.setContentText(defaultContent)

    pageEditorLayer.pasteEditor(0, {}) // Close editor layer
    return editor
}

function removeTextEditor(pageNum, editor) {
    const pageEditorLayer = PDFViewerApplication.pdfViewer._pages[pageNum - 1].annotationEditorLayer.annotationEditorLayer
    pageEditorLayer.pasteEditor(pdfjsLib.AnnotationEditorType.FREETEXT, {}) // Open editor layer.
    pageEditorLayer.remove(editor);
    pageEditorLayer.pasteEditor(0, {}) // Close editor layer
    return editor
}

/**
 * Seems like the only option since pageEditorLayer.#editors is a private field
 * thus make sure to keep track of the actual editor object if you really need it (gets returned by addTextEditor)
 * also sets/updates the editors page attribute.
 * @returns editors divs of all pages
 */
function getEditors() {
    let all = []
    let editorLayers = document.querySelectorAll("div.annotationEditorLayer")
    let pageNum = 1; // Assumes pages have ascending order, like any sane person would
    // and that there is one editorLayer per page (these both are usually the defaults),
    // otherwise pageNum will be wrong
    for (layer of editorLayers) { 
        for (editor of layer.children) {
            editor.setAttribute("page", pageNum);
            all.push(editor)
        }
        pageNum++;
    }
    return all
}

Usage: addTextEditor(1, "hello world!")

TODO for motivated people: make add function support drawings and images.

Tested on: PDF 110dd61fd57444010b1ab5ff38782f0f [1.4 pdfeTeX-1.21a / TeX] (PDF.js: 4.1.378 [a208d6b])

[Osiris-Team]

@elia-c No, since I currently don't need it, however some tipps for anyone that wants to implement that:

• Instead of pageEditorLayer.pasteEditor(pdfjsLib.AnnotationEditorType.FREETEXT use stamp
• Create another function to set the default content.

Feel free to share your code.

[ademyalcin27]

I like your solution. thank you for solution.
@Osiris-Team do you have a solution for being able to do things like deleting the object you added to the pdf, relocating it, etc., but turning off editing? when you double click it turning to edit mode.

[Osiris-Team]

@ademyalcin27 nope :/ You should be able to change the position by setting the editor.x and editor.y variables and updating the width/height in the style.

[ademyalcin27]

@Osiris-Team Actually I would like to disable editing in Freetext mode. I want to add items to PDF like HTML. and I can not contentediable. whe you double click it turning contentediable true but I want to prevent it. There is defined double click event listener in freetext.js. I want to prevent it.

[Osiris-Team]

@ademyalcin27 idk maybe you can simply add the "disabled" attribute to that editor?