feat(component): default ShikiHighlighter container to div (#135)

* feat(component): default ShikiHighlighter container to div

Author: AVGVSTVS96

.changeset/component-container-default.md

@@ -0,0 +1,5 @@
+---
+"react-shiki": patch
+---
+
+Change default `ShikiHighlighter` container element from `pre` to `div`

package/README.md

@@ -234,7 +234,7 @@ The `ShikiHighlighter` component offers minimal built-in styling and customizati
 | ------------------ | --------- | ------- | ---------------------------------------------------------- |
 | `showLanguage`     | `boolean` | `true`  | Displays language label in top-right corner                |
 | `addDefaultStyles` | `boolean` | `true`  | Adds minimal default styling to the highlighted code block |
-| `as`               | `string`  | `'pre'` | Component's Root HTML element                              |
+| `as`               | `string`  | `'div'` | Component's Root HTML element                              |
 | `className`        | `string`  | -       | Custom class name for the code block                       |
 | `langClassName`    | `string`  | -       | Class name for styling the language label                  |
 | `style`            | `object`  | -       | Inline style object for the code block                     |

package/src/lib/component.tsx

@@ -88,7 +88,7 @@ export interface ShikiHighlighterProps extends HighlighterOptions {
 
   /**
    * The HTML element that wraps the generated code block.
-   * @default 'pre'
+   * @default 'div'
    */
   as?: React.ElementType;
 }
@@ -118,7 +118,7 @@ export const createShikiHighlighterComponent = (
         showLineNumbers = false,
         startingLineNumber = 1,
         children: code,
-        as: Element = 'pre',
+        as: Element = 'div',
         customLanguages,
         preloadLanguages,
         ...shikiOptions
@@ -150,32 +150,37 @@ export const createShikiHighlighterComponent = (
         options
       );
 
-      const isHtmlOutput = typeof highlightedCode === 'string';
-
       return (
         <Element
           ref={ref}
           data-testid="shiki-container"
+          data-slot="container"
           className={clsx(
             'rs-root',
             'not-prose',
             addDefaultStyles && 'rs-default-styles',
             className
           )}
           style={style}
-          id="shiki-container"
         >
           {showLanguage && displayLanguageId ? (
             <span
-              className={clsx('rs-language-label', langClassName)}
-              style={langStyle}
               id="language-label"
+              data-slot="language-label"
+              className={clsx(
+                'rs-language-label',
+                langClassName
+              )}
+              style={langStyle}
             >
               {displayLanguageId}
             </span>
           ) : null}
-          {isHtmlOutput ? (
-            <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+          {typeof highlightedCode === 'string' ? (
+            <div
+              data-slot="content"
+              dangerouslySetInnerHTML={{ __html: highlightedCode }}
+            />
           ) : (
             highlightedCode
           )}

package/tests/component.test.tsx

@@ -11,15 +11,17 @@ const codeSample = 'console.log("Hello World");';
 // Test utilities
 const getContainer = (container: HTMLElement) =>
   container.querySelector(
-    '[data-testid="shiki-container"]'
+    '[data-slot="container"]'
   ) as HTMLElement | null;
 
 const getLanguageLabel = (container: HTMLElement | null) =>
-  container?.querySelector('#language-label') as HTMLElement | null;
+  container?.querySelector(
+    '[data-slot="language-label"]'
+  ) as HTMLElement | null;
 
 describe('ShikiHighlighter Component', () => {
   describe('Component-specific Props', () => {
-    test('renders with default pre element', async () => {
+    test('renders with default div element', async () => {
       const { container } = render(
         <ShikiHighlighter language="javascript" theme="github-light">
           {codeSample}
@@ -29,7 +31,10 @@ describe('ShikiHighlighter Component', () => {
       await waitFor(() => {
         const containerElement = getContainer(container);
         expect(containerElement).toBeInTheDocument();
-        expect(containerElement?.tagName.toLowerCase()).toBe('pre');
+        expect(containerElement?.tagName.toLowerCase()).toBe('div');
+        expect(containerElement).toHaveClass('rs-root');
+        expect(containerElement).toHaveClass('rs-default-styles');
+        expect(containerElement).not.toHaveClass('relative');
       });
     });
 
@@ -227,13 +232,13 @@ describe('ShikiHighlighter Component', () => {
       );
 
       await waitFor(() => {
-        const shikiContainer =
-          container.querySelector('#shiki-container');
+        const shikiContainer = getContainer(container);
         expect(shikiContainer).toBeInTheDocument();
 
         // Should have a div with dangerouslySetInnerHTML
         const innerDiv = shikiContainer?.querySelector(':scope > div');
         expect(innerDiv).toBeInTheDocument();
+        expect(innerDiv?.getAttribute('data-slot')).toBe('content');
 
         // Should still render highlighted code
         expect(container.querySelector('pre')).toBeInTheDocument();
@@ -268,7 +273,7 @@ describe('ShikiHighlighter Component', () => {
       );
     };
 
-    test('forwards ref to the default container element (pre)', async () => {
+    test('forwards ref to the default container element (div)', async () => {
       let refCurrent: HTMLElement | null = null;
 
       render(
@@ -281,10 +286,8 @@ describe('ShikiHighlighter Component', () => {
 
       await waitFor(() => {
         expect(refCurrent).not.toBeNull();
-        expect(refCurrent?.tagName.toLowerCase()).toBe('pre');
-        expect(refCurrent?.getAttribute('data-testid')).toBe(
-          'shiki-container'
-        );
+        expect(refCurrent?.tagName.toLowerCase()).toBe('div');
+        expect(refCurrent?.getAttribute('data-slot')).toBe('container');
       });
     });
 
@@ -303,9 +306,7 @@ describe('ShikiHighlighter Component', () => {
       await waitFor(() => {
         expect(refCurrent).not.toBeNull();
         expect(refCurrent?.tagName.toLowerCase()).toBe('div');
-        expect(refCurrent?.getAttribute('data-testid')).toBe(
-          'shiki-container'
-        );
+        expect(refCurrent?.getAttribute('data-slot')).toBe('container');
       });
     });
 
@@ -324,7 +325,7 @@ describe('ShikiHighlighter Component', () => {
         expect(refCurrent).not.toBeNull();
         expect(typeof refCurrent?.focus).toBe('function');
         expect(typeof refCurrent?.getBoundingClientRect).toBe('function');
-        expect(refCurrent?.tagName.toLowerCase()).toBe('pre');
+        expect(refCurrent?.tagName.toLowerCase()).toBe('div');
       });
     });
   });