Merge pull request #695 from maiieul/fix-copy/paste-rehype

fix rehype-pretty-code copy/paste not working

Author: maiieul

apps/website/src/components/code-copy/code-copy.tsx

@@ -13,7 +13,7 @@ export const CodeCopy = component$<CodeCopyProps>(({ code = '', ...props }) => {
   return (
     <Button
       {...props}
-      look="ghost"
+      look="link"
       title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
       class={cn(props.class)}
       onClick$={async () => {

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -539,7 +539,6 @@ export default component$<PropsOf<typeof Button>>(() => {
                 themeComputedObjectSig.value.mode =
                   themeComputedObjectSig.value.mode?.includes('light') ? 'dark' : 'light';
 
-                console.log(themeComputedObjectSig.value.mode);
                 setTheme(await themeStoreToThemeClasses$());
               }}
             />

apps/website/src/components/mdx-components/index.tsx

@@ -116,10 +116,7 @@ export const components: Record<string, Component> = {
   }>(({ __rawString__ }) => {
     return (
       <div class="code-example relative mb-6 max-h-[31.25rem] rounded-base">
-        <CodeCopy
-          class="absolute right-3 top-3 text-white hover:text-white"
-          code={__rawString__}
-        />
+        <CodeCopy class="absolute right-3 top-3" code={__rawString__} />
         <div
           class={cn(
             'max-h-[31.25rem] max-w-full overflow-y-auto rounded-base border bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',
@@ -132,7 +129,6 @@ export const components: Record<string, Component> = {
       </div>
     );
   }),
-
   Accordion,
   AccordionItem,
   AccordionTrigger,

apps/website/src/components/toc/toc.tsx

@@ -33,12 +33,10 @@ const useActiveItem = (itemIds: string[]) => {
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          console.log('entry: ', entry.isIntersecting, entry.target.id);
           activeId.value = entry.target.id;
         }
       });
     });
-    console.log('observer: ', observer);
 
     itemIds.forEach((id) => {
       const element = document.getElementById(id);
@@ -67,7 +65,6 @@ type TreeProps = QwikIntrinsicElements['ul'] & {
 };
 
 const Tree = component$<TreeProps>(({ headings, level = 1, activeItem }) => {
-  console.log('level: ', level);
   return headings.length > 0 && level < 3 ? (
     <ul class={cn('m-0 list-none', { 'pl-4': level !== 1 })}>
       {headings.map((heading) => {

apps/website/tsconfig.json

@@ -26,5 +26,5 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "include": ["src", "../../packages/kit-headless/src/components/select/select.test.ts"]
+  "include": ["src", "vite.config.ts"]
 }

apps/website/tsconfig.spec.json

@@ -5,7 +5,6 @@
     "types": ["vitest/globals", "node"]
   },
   "include": [
-    "vite.config.ts",
     "src/**/*.test.ts",
     "src/**/*.spec.ts",
     "src/**/*.test.tsx",

apps/website/vite.config.ts

@@ -21,7 +21,6 @@ export default defineConfig(async () => {
         },
         mdx: {
           providerImportSource: '~/_state/MDXProvider',
-          // @ts-ignore
           recmaPlugins: [recmaProvideComponents],
           rehypePlugins: [
             () => (tree) => {
@@ -31,48 +30,26 @@ export default defineConfig(async () => {
                   if (codeEl.tagName !== 'code') {
                     return;
                   }
-
                   node.__rawString__ = codeEl.children?.[0].value;
                 }
               });
             },
             [
-              // @ts-ignore
               rehypePrettyCode,
               {
                 theme: 'poimandres',
-                onVisitLine(node: any) {
-                  // Prevent lines from collapsing in `display: grid` mode, and allow empty
-                  // lines to be copy/pasted
-                  if (node.children.length === 0) {
-                    node.children = [{ type: 'text', value: ' ' }];
-                  }
-                },
-                onVisitHighlightedLine(node: any) {
-                  // Each line node by default has `class="line"`.
-                  if (node.properties.className) {
-                    node.properties.className.push('line--highlighted');
-                  }
-                },
-                onVisitHighlightedWord(node: any) {
-                  if (node.properties.className) {
-                    node.properties.className = ['word--highlighted'];
-                  }
-                },
               },
             ],
             () => (tree) => {
               visit(tree, (node) => {
-                if (node?.type === 'element' && node?.tagName === 'div') {
-                  if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+                if (node?.type === 'element' && node?.tagName === 'figure') {
+                  if (!('data-rehype-pretty-code-figure' in node.properties)) {
                     return;
                   }
-
                   const preElement = node.children.at(-1);
                   if (preElement.tagName !== 'pre') {
                     return;
                   }
-
                   preElement.properties['__rawString__'] = node.__rawString__;
                 }
               });