symbol element

MrWangJustToDo · Dec 23, 2024 · 8d7b0f8 · 8d7b0f8
1 parent e1e87fd
commit 8d7b0f8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/packages/react/src/components/DiffContent.tsx b/packages/react/src/components/DiffContent.tsx
@@ -71,7 +71,14 @@ const DiffString = ({
                 operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
             }}
           >
-            {isLast ? `${_str2}${getSymbol(isNewLineSymbolChanged)}` : str2}
+            {isLast ? (
+              <>
+                {_str2}
+                <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
+              </>
+            ) : (
+              str2
+            )}
           </span>
           {str3}
         </span>
@@ -164,7 +171,14 @@ const DiffSyntax = ({
                       borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
                     }}
                   >
-                    {isLast ? `${_str2}${getSymbol(isNewLineSymbolChanged)}` : str2}
+                    {isLast ? (
+                      <>
+                        {_str2}
+                        <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
+                      </>
+                    ) : (
+                      str2
+                    )}
                   </span>
                   {str3}
                 </span>

diff --git a/packages/vue/src/components/DiffContent.tsx b/packages/vue/src/components/DiffContent.tsx
@@ -41,7 +41,14 @@ const DiffString = ({
                 operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
             }}
           >
-            {isLast ? `${_str2}${getSymbol(isNewLineSymbolChanged)}` : str2}
+            {isLast ? (
+              <>
+                {_str2}
+                <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
+              </>
+            ) : (
+              str2
+            )}
           </span>
           {str3}
         </span>
@@ -134,7 +141,14 @@ const DiffSyntax = ({
                       borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
                     }}
                   >
-                    {isLast ? `${_str2}${getSymbol(isNewLineSymbolChanged)}` : str2}
+                    {isLast ? (
+                      <>
+                        {_str2}
+                        <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
+                      </>
+                    ) : (
+                      str2
+                    )}
                   </span>
                   {str3}
                 </span>