jsreport forum

alexey-boiko

Yeah, inline script worked out. Thanks

alexey-boiko

From backend I receive payload that contains rich text fields. The problem is that I need to update properties for links included in these texts.
I was thinking to use DOMParser like so:

  const parsed = new DOMParser().parseFromString(this.innerHtml, "text/html");

  const links = parsed.getElementsByTagName("a");

  Array.from(links).forEach((link) => {
    link.setAttribute("href", "#");
    link.style.textDecoration = "none";
    link.style.color = "inherit";
    link.style.cursor = "text";
    link.onclick = (event) => event.preventDefault();
  });

However, when I try to run such code, I receive error message that DOMParser is not defined .

Then, I tried to use jsdom, but statement

const { JSDOM } = require('jsdom');

produces error "Unable to require module jsdom. resolveModulePath is not a function". I have 24.0.0 version of jsdom and 21.6.2 version of Node installed.

If you know, could you, please, help me to find solution for this problem. I understand that using regex is always an option, but usually pretty unreliable one when it comes to parsing HTML. So, I'd prefer to avoid it if there are better alternatives

alexey-boiko

No problem. We already have duplicate code that I wanted to simplify. Thanks for quick responses ;)

alexey-boiko

https://playground.jsreport.net/w/anon/93Nis6oZ

alexey-boiko

Awesome. Thank you
One more question, if possible:
I implemented everything according to your example. Though I used childTemplate helper instead of component because it didn't seem to work properly with component

async function componentWithChildren(name, opts) {
  const children = await jsreport.templatingEngines.waitForAsyncHelper(opts.fn())
  return childTemplate.call({
    ...opts.data,
    children
  }, name, opts)
}

However, I face a problem when some templates and components aren't rendered and there is just "undefined" text instead of them. Do you have any ideas why it might be happening? These components/templates were successfully rendering before I used componentWithChildren helper and some of their neighbors are rendered properly.
Frankly, I'm not sure how exactly it works under then hood, but I tried:

rendering components with no logic at all instead of broken ones and didn't succeed
swapping working and broken components and surprisingly working ones remained working whereas broken remained broken. It probably means that there is something with the setup of those components. Though I have no clue what exactly
tried the same approach with different template and faced the same problem. Basically 2 child templates were properly rendered whereas others were "undefined"

alexey-boiko

Thank you. Is it possible to have it working with components passed as children like so

{{#templateWithChildren "wrapper"}}
   {{component "first-component"}}
   {{component "second-component"}}
   {{component "third-component"}}
{{/templateWithChildren}}

And ideally to have components properly rendered inside of "wrapper" like so

<!-- wrapper.hbs -->
<body>
  <div id="root">
      {{component "wrapper-header"}}
     {{{children}}}
      {{component "wrapper-footer"}}
  </div>
</body>

I.e. in the end it should render:

<body>
  <div id="root">
      {{component "wrapper-header"}}

      {{component "first-component"}}
      {{component "second-component"}}
      {{component "third-component"}}

      {{component "wrapper-footer"}}
  </div>
</body>

alexey-boiko

What helpers/strategies are recommended by jsreport to pass children like in React?
So, it could be used like so

{{#templateWithChildren "wrapper"}}
<div>I'm going to be passed as children</div>
{{/templateWithChildren}}

(here "wrapper" is template name that's gonna receive children prop)

I tried the following, but it doesn't seem to pass context:

Handlebars.registerHelper("templateWithChildren", function (name, opts) {
const children = opts.fn(this);
return component.call({...this, children}, name, opts)
})

alexey-boiko

The best. Thanks again

alexey-boiko

Is there a way to use pdfDest helper function in helpers.js?

alexey-boiko

Thank you!

alexey-boiko

I have a main template to which I attached header-footer. I want to have a link to one of sections of main template in footer. Namely, table of contents, so users would be able to get back to it from every page. However, if I follow normal flow:

assign id "table-of-contents" to the container for "Table of Contents"
add <a href="#table-of-contents">Link to ToC</a> into footer

it's not working when you click on link from footer.

Could you, please, let me know whether:

it's possible to have a link to element from main template from header-footer
if yes, how it can be achieved

Posts made by alexey-boiko