share page bugs

packages/web/src/components/CodeBlock.tsx

@@ -12,9 +12,10 @@ import { transformerNotationDiff } from "@shikijs/transformers"
 interface CodeBlockProps extends JSX.HTMLAttributes<HTMLDivElement> {
   code: string
   lang?: string
+  onRendered?: () => void
 }
 function CodeBlock(props: CodeBlockProps) {
-  const [local, rest] = splitProps(props, ["code", "lang"])
+  const [local, rest] = splitProps(props, ["code", "lang", "onRendered"])
   let containerRef!: HTMLDivElement
 
   const [html] = createResource(async () => {
@@ -35,6 +36,8 @@ function CodeBlock(props: CodeBlockProps) {
   createEffect(() => {
     if (html() && containerRef) {
       containerRef.innerHTML = html() as string
+
+      local.onRendered?.()
     }
   })
 

packages/web/src/components/Share.tsx

@@ -188,7 +188,7 @@ function TextPart(props: TextPartProps) {
       {...rest}
     >
       <pre ref={(el) => (preEl = el)}>{local.text}</pre>
-      {overflowed() && (
+      {((!local.expand && overflowed()) || expanded()) && (
         <button
           type="button"
           data-element-button-text
@@ -223,15 +223,9 @@ function TerminalPart(props: TerminalPartProps) {
   }
 
   onMount(() => {
-    checkOverflow()
     window.addEventListener("resize", checkOverflow)
   })
 
-  createEffect(() => {
-    local.text
-    setTimeout(checkOverflow, 0)
-  })
-
   onCleanup(() => {
     window.removeEventListener("resize", checkOverflow)
   })
@@ -247,12 +241,13 @@ function TerminalPart(props: TerminalPartProps) {
         <div data-section="content">
           <CodeBlock
             lang="ansi"
+            onRendered={checkOverflow}
             ref={(el) => (preEl = el)}
             code={`\x1b[90m>\x1b[0m ${local.text}`}
           />
         </div>
       </div>
-      {overflowed() && (
+      {((!local.expand && overflowed()) || expanded()) && (
         <button
           type="button"
           data-element-button-text