Fix Firefox code copying (2) (#2126)

Alternative to #2120 that is simpler and (hopefully) without
regressions!

Replaces `<span>` elements for lines with `<div>` elements, since these
seem to copy properly as newlines in Firefox. Though please note [the
HTML spec technically disallows
this](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-code-element:concept-element-content-model)
😥.

Fixes #1972
Closes #2120

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>

Author: wongjn

src/components/code-example.tsx

@@ -10,6 +10,7 @@ import { createHighlighter } from "shiki";
 import theme from "./syntax-highlighter/theme.json";
 
 import { highlightClasses } from "./highlight-classes";
+import linesToDiv from "./lines-to-div";
 import atApplyInjection from "./syntax-highlighter/at-apply.json";
 import atRulesInjection from "./syntax-highlighter/at-rules.json";
 import themeFnInjection from "./syntax-highlighter/theme-fn.json";
@@ -135,7 +136,7 @@ export function HighlightedCode({
       example={example}
       className={clsx(
         "*:flex *:*:max-w-none *:*:shrink-0 *:*:grow *:overflow-auto *:rounded-lg *:bg-white/10! *:p-5 dark:*:bg-white/5!",
-        "**:[.line]:isolate **:[.line]:block **:[.line]:not-last:min-h-[1lh]",
+        "**:[.line]:isolate **:[.line]:not-last:min-h-[1lh]",
         "*:inset-ring *:inset-ring-white/10 dark:*:inset-ring-white/5",
         className,
       )}
@@ -178,6 +179,7 @@ export function RawHighlightedCode({
           highlightedClassName:
             "highlighted-word relative before:absolute before:-inset-x-0.5 before:-inset-y-0.25 before:-z-10 before:block before:rounded-sm before:bg-[lab(19.93_-1.66_-9.7)] [.highlighted-word_+_&]:before:rounded-l-none",
         }),
+        linesToDiv(),
       ],
     })
     .replaceAll("\n", "");

src/components/highlight-classes.ts

@@ -43,7 +43,7 @@ export function highlightClasses(opts: HighlightClassesOptions): ShikiTransforme
         for (let i = 0; i < line.children.length; ++i) {
           let el = line.children[i];
           if (el.type !== "element") continue;
-          if (el.tagName !== "span") continue;
+          if (el.tagName !== "div" && el.tagName !== "span") continue;
 
           // Tiny state machine to make sure we're inside a class attribute
           let text = getTextContent(el).trim();
@@ -216,7 +216,7 @@ export function getTextContent(element: ElementContent): string {
     return element.value;
   }
 
-  if (element.type === "element" && element.tagName === "span") {
+  if (element.type === "element" && (element.tagName === "div" || element.tagName === "span")) {
     return element.children.map(getTextContent).join("");
   }
 

src/components/home/tailwind-ui-section.tsx

@@ -57,7 +57,12 @@ export default function TailwindUiSection() {
 
       <GridContainer className="mt-10">
         <div className="px-2 max-sm:px-4">
-          <a href="https://tailwindcss.com/plus?ref=home" className="inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600">Explore Tailwind Plus</a>
+          <a
+            href="https://tailwindcss.com/plus?ref=home"
+            className="inline-block rounded-4xl bg-black px-4 py-2 text-sm/6 font-semibold text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600"
+          >
+            Explore Tailwind Plus
+          </a>
         </div>
       </GridContainer>
       <TabGroup>

src/components/lines-to-div.tsx

@@ -0,0 +1,10 @@
+import type { ShikiTransformer } from "shiki";
+
+export default function linesToDiv(): ShikiTransformer {
+  return {
+    name: "tailwindcss/lines-to-div",
+    line(node) {
+      node.tagName = "div";
+    },
+  };
+}

src/components/search.tsx

@@ -13,37 +13,36 @@ const APP_ID = "KNPXZI5B0M";
 
 function isTailwindPlusURL(url: string) {
   return (
-    url.startsWith('https://tailwindui.com') ||
-    url.startsWith('https://tailwindcss.com/plus') ||
-    url.startsWith('/plus')
-  )
+    url.startsWith("https://tailwindui.com") ||
+    url.startsWith("https://tailwindcss.com/plus") ||
+    url.startsWith("/plus")
+  );
 }
 
 function isExternalURL(url: string) {
-  if (url.startsWith('https://tailwindui.com')) {
-    return false
+  if (url.startsWith("https://tailwindui.com")) {
+    return false;
   }
 
   return /^https?:\/\//.test(url) && !url.startsWith(window.location.origin);
 }
 
 function rewriteURL(url: string) {
-  if (!url.startsWith('https://tailwindui.com')) {
-    return url
+  if (!url.startsWith("https://tailwindui.com")) {
+    return url;
   }
 
-  url = url.replace('https://tailwindui.com/', 'https://tailwindcss.com/plus/')
+  url = url.replace("https://tailwindui.com/", "https://tailwindcss.com/plus/");
   // Temporary thing while `https://tailwindui.com/` is rewritten to /plus
-  url = url.replace('/plus/plus/', '/plus/')
-  url = url.replace('/plus/components', '/plus/ui-blocks')
-  url = url.replace('/plus/templates/catalyst', '/plus/ui-kit')
-  url = url.replace('/plus/all-access', '/plus/#pricing')
-  url = url.replace('/plus/documentation', '/plus/ui-blocks/documentation')
+  url = url.replace("/plus/plus/", "/plus/");
+  url = url.replace("/plus/components", "/plus/ui-blocks");
+  url = url.replace("/plus/templates/catalyst", "/plus/ui-kit");
+  url = url.replace("/plus/all-access", "/plus/#pricing");
+  url = url.replace("/plus/documentation", "/plus/ui-blocks/documentation");
 
-  return url
+  return url;
 }
 
-
 const SearchContext = createContext<any>({});
 
 export function SearchProvider({ children }: React.PropsWithChildren) {
@@ -157,20 +156,20 @@ export function SearchProvider({ children }: React.PropsWithChildren) {
               hitComponent={Hit}
               transformItems={(items) => {
                 items = items.map((item) => {
-                  item.url = rewriteURL(item.url)
-                  return item
-                })
+                  item.url = rewriteURL(item.url);
+                  return item;
+                });
 
                 // TODO: Remove this once only new stuff is indexed
                 items = items.filter((item) => {
                   // Remove old prev-Tailwind plus search results
                   // @ts-ignore
                   if (item.hierarchy?.lvl0 === "Components") {
-                    return false
+                    return false;
                   }
 
-                  return true
-                })
+                  return true;
+                });
 
                 return items.map((item, index) => {
                   // We transform the absolute URL into a relative URL to
@@ -195,11 +194,11 @@ export function SearchProvider({ children }: React.PropsWithChildren) {
 
                   if (isTailwindUI && item.hierarchy.lvl0 === "UI Blocks") {
                     if (item.hierarchy?.lvl0) {
-                      item.hierarchy.lvl0 = "Components"
+                      item.hierarchy.lvl0 = "Components";
                     }
 
                     if (item._highlightResult?.hierarchy?.lvl0?.value) {
-                      item._highlightResult.hierarchy.lvl0.value = "Components"
+                      item._highlightResult.hierarchy.lvl0.value = "Components";
                     }
                   }