fix

Author: MrWangJustToDo

packages/svelte/src/lib/components/DiffString.svelte

@@ -50,8 +50,7 @@
 		<span class="diff-line-content-raw">
 			<span data-template>
 				{@html props.diffLine.plainTemplate}
-			</span>
-			{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
+			</span>{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
 				<span
 					data-no-newline-at-end-of-file-symbol
 					class={props.enableWrap
@@ -75,25 +74,28 @@
 		{@const _str2 = isLast ? str2.replace('\n', '').replace('\r', '') : str2}
 		<span class="diff-line-content-raw">
 			<span data-range-start={range.location} data-range-end={range.location + range.length}>
-				{str1}
-				<span
+				<span>
+					{str1}
+				</span><span
 					data-diff-highlight
 					class="rounded-[0.2em]"
 					style={`
                 background-color:
-                  ${props.operator === 'add' ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`},
+                  ${props.operator === 'add' ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`}
               `}
 				>
 					{#if isLast}
-						{_str2}
-						<span data-newline-symbol>{getSymbol(props.diffLine.changes.newLineSymbol)}</span>
+						<span>
+							{_str2}
+						</span><span data-newline-symbol>{getSymbol(props.diffLine.changes.newLineSymbol)}</span
+						>
 					{:else}
 						{str2}
 					{/if}
+				</span><span>
+					{str3.replace('\n', '').replace('\r', '')}
 				</span>
-				{str3}
-			</span>
-			{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
+			</span>{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
 				<span
 					data-no-newline-at-end-of-file-symbol
 					class={props.enableWrap

packages/svelte/src/lib/components/DiffSyntax.svelte

@@ -60,8 +60,7 @@
 		<span class="diff-line-syntax-raw">
 			<span data-template>
 				{@html props.diffLine.syntaxTemplate}
-			</span>
-			{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
+			</span>{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
 				<span
 					data-no-newline-at-end-of-file-symbol
 					class={props.enableWrap
@@ -109,8 +108,9 @@
 							class={wrapper?.properties?.className?.join(' ')}
 							style={wrapper?.properties?.style}
 						>
-							{str1}
-							<span
+							<span>
+								{str1}
+							</span><span
 								data-diff-highlight
 								style={`
                         background-color:
@@ -122,18 +122,21 @@
                       `}
 							>
 								{#if isLast}
-									{_str2}
-									<span data-newline-symbol>{getSymbol(props.diffLine.changes.newLineSymbol)}</span>
+									<span>
+										{_str2}
+									</span><span data-newline-symbol
+										>{getSymbol(props.diffLine.changes.newLineSymbol)}</span
+									>
 								{:else}
 									{str2}
 								{/if}
+							</span><span>
+								{str3.replaceAll('\n', '').replaceAll('\r', '')}
 							</span>
-							{str3}
 						</span>
 					{/if}
 				{/each}
-			</span>
-			{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
+			</span>{#if props.diffLine.changes.newLineSymbol === NewLineSymbol.NEWLINE}
 				<span
 					data-no-newline-at-end-of-file-symbol
 					class={props.enableWrap

packages/svelte/src/routes/+page.svelte

@@ -40,6 +40,7 @@
 	worker?.addEventListener('message', (e: MessageEvent<MessageData>) => {
 		const { data, bundle } = e.data;
 		const instance = DiffFile.createInstance(data || {}, bundle);
+		// instance.disableTemplate();
 		diffFile = instance;
 	});