Paged.js

When rendering HTML with React and paginating using Paged.js, click handlers on elements may stop working. To resolve this, we suggest associating editDialog parameters with a data-uhuu attribute on target elements, then selecting these elements with the [data-uhuu] selector. Example:

<div data-uhuu={JSON.stringify({ path: 'title' })}>{title}</div>

The following JavaScript snippet adds click event listeners to elements with the data-uhuu attribute. When clicked, it retrieves the data from this attribute and passes it to the $uhuu.editDialog function for dialog-based editing:

// After paged.js preview render
document.querySelectorAll("[data-uhuu]").forEach(item => {
    item.addEventListener('click', function() {
        let jsonString = this.getAttribute("data-uhuu");
        let value = JSON.parse(jsonString);
        $uhuu.editDialog(value);
    });
});

Visual Indicators for Dialog Interaction

Add the following CSS to visually indicate clickable dialog elements in your template:

@media screen {
  [data-uhuu] { 
      @apply cursor-pointer hover:outline outline-[#ff44cc] hover:outline-dashed hover:rounded relative;
  }
  [data-uhuu]:before {
      content: ' ';
      @apply absolute w-4 h-4 bg-[#ff44cc] rounded-t-full rounded-r-full top-0 ml-1 mt-1 opacity-20 transition;
  }
  [data-uhuu]:hover:before { 
      @apply opacity-100 transition;
  }
}

Note: The hover indicators appear only on screens, as they are enclosed within @media screen { ... }, keeping PDFs clean of these visual cues.