Cannot handle new lines when playing SVG

[cyberalien]

Describe the bug

Diff fails to handle new lines when rendering SVG, resulting in rather messy replay.

SVG file and .retypewriter file to test:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4">
		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;loop.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop.begin+2s;loop.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop.begin+1.2s;loop.begin+3.2s;loop.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5" begin="loop.begin+1.8s" />
			<set attributeName="d" to="M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5" begin="loop.begin+3.8s" />
			<set attributeName="d" to="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5" begin="loop.begin+5.8s" />
		</path>
		<path d="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5">
			<animate id="loop2" attributeName="stroke-dashoffset" values="4;0" begin="1.1s;loop2.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop2.begin+2s;loop2.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop2.begin+1.2s;loop2.begin+3.2s;loop2.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5" begin="loop2.begin+1.8s" />
			<set attributeName="d" to="M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5" begin="loop2.begin+3.8s" />
			<set attributeName="d" to="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5" begin="loop2.begin+5.8s" />
		</path>
		<path d="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5">
			<animate id="loop3" attributeName="stroke-dashoffset" values="4;0" begin="2.9s;loop3.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop3.begin+2s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop3.begin+1.2s;loop3.begin+3.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5" begin="loop3.begin+1.8s" />
			<set attributeName="d" to="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5" begin="loop3.begin+5.8s" />
		</path>
	</g>
	<g fill="currentColor" fill-opacity="0.3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(0 22)">
		<path d="M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z">
			<animateMotion path="M0 0v-22" calcMode="linear" dur="0.6s" fill="freeze" />
		</path>
	</g>
</svg>

reTypewriter Snapshots v1

--01----------
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
</svg>

--02----------
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4">
		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;loop.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop.begin+2s;loop.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop.begin+1.2s;loop.begin+3.2s;loop.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5" begin="loop.begin+1.8s" />
			<set attributeName="d" to="M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5" begin="loop.begin+3.8s" />
			<set attributeName="d" to="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5" begin="loop.begin+5.8s" />
		</path>
		<path d="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5">
			<animate id="loop2" attributeName="stroke-dashoffset" values="4;0" begin="1.1s;loop2.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop2.begin+2s;loop2.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop2.begin+1.2s;loop2.begin+3.2s;loop2.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5" begin="loop2.begin+1.8s" />
			<set attributeName="d" to="M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5" begin="loop2.begin+3.8s" />
			<set attributeName="d" to="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5" begin="loop2.begin+5.8s" />
		</path>
		<path d="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5">
			<animate id="loop3" attributeName="stroke-dashoffset" values="4;0" begin="2.9s;loop3.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop3.begin+2s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop3.begin+1.2s;loop3.begin+3.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5" begin="loop3.begin+1.8s" />
			<set attributeName="d" to="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5" begin="loop3.begin+5.8s" />
		</path>
	</g>
</svg>

--03----------
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4">
		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;loop.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop.begin+2s;loop.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop.begin+1.2s;loop.begin+3.2s;loop.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M12 5h1.5M12 5h-1.5M12 5v1.5M12 5v-1.5" begin="loop.begin+1.8s" />
			<set attributeName="d" to="M12 4h1.5M12 4h-1.5M12 4v1.5M12 4v-1.5" begin="loop.begin+3.8s" />
			<set attributeName="d" to="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5" begin="loop.begin+5.8s" />
		</path>
		<path d="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5">
			<animate id="loop2" attributeName="stroke-dashoffset" values="4;0" begin="1.1s;loop2.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop2.begin+2s;loop2.begin+4s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop2.begin+1.2s;loop2.begin+3.2s;loop2.begin+5.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M17 11h1.5M17 11h-1.5M17 11v1.5M17 11v-1.5" begin="loop2.begin+1.8s" />
			<set attributeName="d" to="M18 12h1.5M18 12h-1.5M18 12v1.5M18 12v-1.5" begin="loop2.begin+3.8s" />
			<set attributeName="d" to="M19 11h1.5M19 11h-1.5M19 11v1.5M19 11v-1.5" begin="loop2.begin+5.8s" />
		</path>
		<path d="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5">
			<animate id="loop3" attributeName="stroke-dashoffset" values="4;0" begin="2.9s;loop3.begin+6s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="4;0" begin="loop3.begin+2s" dur="0.4s" fill="freeze" />
			<animate attributeName="stroke-dashoffset" values="0;4" begin="loop3.begin+1.2s;loop3.begin+3.2s" dur="0.4s" fill="freeze" />
			<set attributeName="d" to="M20 5h1.5M20 5h-1.5M20 5v1.5M20 5v-1.5" begin="loop3.begin+1.8s" />
			<set attributeName="d" to="M19 4h1.5M19 4h-1.5M19 4v1.5M19 4v-1.5" begin="loop3.begin+5.8s" />
		</path>
	</g>
	<g fill="currentColor" fill-opacity="0.3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(0 22)">
		<path d="M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z">
			<animateMotion path="M0 0v-22" calcMode="linear" dur="0.6s" fill="freeze" />
		</path>
	</g>
</svg>

--------------

When playing this demo, extension ends up showing this (scroll horizontally to see full mess):

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4" stroke-dashoffset="4"><		<path d="M13 4h1.5M13 4h-1.5M13 4v1.5M13 4v-1.5">
			<animate id="loop" attributeName="stroke-dashoffset" values="4;0" begin="0.7s;l" /g>
</svg>

Reproduction

See steps above

System Info

System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 50.66 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm

Used Package Manager

n/a

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[michael-azogu]

could it be a tabs v spaces problem

[martiliones]

Made it work by changing file extension to not existing. I think vs code autocomplete breaks it

@antfu can the extension disable autocomplete until it does work?