arrows icon indicating copy to clipboard operation
arrows copied to clipboard

Importing markup with certain characters breaks UI interactions

Open mtchllbrrn opened this issue 6 years ago • 1 comments

If I import the following markup, the UI interactions for dragging nodes breaks. That is, once I click the node, it is stuck to my cursor until I refresh the page.

<ul class="graph-diagram-markup" data-internal-scale="1" data-external-scale="1">
   <li class="node" data-node-id="1" data-x="-2004.7363147735596" data-y="-1026.3858366012573">
      <span class="caption">Dataset File</span>
      <dl class="properties">
         <dt>uuid</dt>
         <dd>"cefc4ef8-3ba5-45e9-b616-b1bf9523ff7e"</dd>
         <dt>templateVersion</dt>
         <dd>"0.1"</dd>
         <dt>creation</dt>
         <dd>"2003-11-24T08:15:00Z"</dd>
         <dt>fileName</dt>
         <dd>"funkystuff.xls"</dd>
         <dt>importStartRow</dt>
         <dd>3</dd>
         <dt>startTimeZone</dt>
         <dd>UTC−06 CST Central Standard Time (North America)</dd>
         <dt>endTimeZone</dt>
         <dd>UTC−05 EST Eastern Standard Time (North America)</dd>
      </dl>
   </li>
</ul>

However, if I strip the special characters from the startTimeZone and endTimeZone props, everything works as expected:

<ul class="graph-diagram-markup" data-internal-scale="1" data-external-scale="1">
   <li class="node" data-node-id="1" data-x="-2004.7363147735596" data-y="-1026.3858366012573">
      <span class="caption">Dataset File</span>
      <dl class="properties">
         <dt>uuid</dt>
         <dd>"cefc4ef8-3ba5-45e9-b616-b1bf9523ff7e"</dd>
         <dt>templateVersion</dt>
         <dd>"0.1"</dd>
         <dt>creation</dt>
         <dd>"2003-11-24T08:15:00Z"</dd>
         <dt>fileName</dt>
         <dd>"funkystuff.xls"</dd>
         <dt>importStartRow</dt>
         <dd>3</dd>
         <dt>startTimeZone</dt>
         <dd>UTC 06 CST Central Standard Time North America</dd>
         <dt>endTimeZone</dt>
         <dd>UTC 05 EST Eastern Standard Time North America</dd>
      </dl>
   </li>
</ul>

Interestingly, if I import the functioning markup, I can add those special characters back in with the graphical editor and everything still works as expected. That seems to imply that something is breaking upon import of markup with those characters.

I'm using Chrome v69.0.3497.100 (current), but I see the same behavior in Safari.

mtchllbrrn avatar Sep 27 '18 17:09 mtchllbrrn

Hi @mtchllbrrn , same issue hier. This is breaking the editor:

<li class="node" data-node-id="10" data-x="-466.00863808045267" data-y="337.93979099444095">
    <span class="caption">MLFB</span>
	<dl class="properties">
		<dt>order_no</dt><dd>"3AH5314–4UC20–2AH2–ZF20"</dd>
	</dl>
</li>

I used your workaround and it worked! Thanks for sharing it.

pauldj54 avatar Sep 25 '20 15:09 pauldj54