Html codes are being escaped when applying a diff with a special character

[gdxn96]

e.g.

var root_element = document.getElementByID("test");
var html = "<div id="test">&#8594;</div>"
var dom_differ = new DiffDOM();

var diff = dom_differ.diff(root_element, html);
dom_differ.apply(root_element, diff);

is rendering

→

and inspecting the html gives

→

It should render "→" I think

[jeremy21212121]

It looks like an already-encoded HTML entity is being encoded again.

The easiest fix might be to ensure that there are no encoded HTML entities in the html string. The following function achieves that using the DOM API (will only work in browser)

const ensureHTMLEntitiesAreDecoded = (string) => {
  const container = document.createElement('div');
  container.innerHTML = string;
  return container.innerHTML;
}

and you would use it like so:

var html = ensureHTMLEntitiesAreDecoded('<div id="test">&#8594;</div>');

And that should resolve your issue. It's not an ideal fix, but I took a quick look through the library code and couldn't immediately figure out where the problem is. Hopefully this work-around is good enough for your use case.

FYI, there is a syntax error on the second line.

[gdxn96]

Yep that snippet was just for demonstration. I ended up just learning React as I ended up running into another issue where the library threw an error when calculating the diff. Unfortunately I couldn't find the minimum version to reproduce otherwise I would have posted it. Cheers for the response, the above looks like a valid workaround 👍