Fixing cursor problem on mermaid

sparkle/src/components/markdown/CodeBlock.tsx

@@ -120,14 +120,16 @@ export function CodeBlock({
 
   return !inline && language ? (
     <Suspense fallback={<div />}>
-      <SyntaxHighlighter
-        wrapLongLines={wrapLongLines}
-        style={codeStyle}
-        language={languageToUse}
-        PreTag="div"
-      >
-        {String(children).replace(/\n$/, "")}
-      </SyntaxHighlighter>
+      <div className="s-h-full s-min-h-[2.5rem] s-w-full s-cursor-text">
+        <SyntaxHighlighter
+          wrapLongLines={wrapLongLines}
+          style={codeStyle}
+          language={languageToUse}
+          PreTag="div"
+        >
+          {String(children).replace(/\n$/, "")}
+        </SyntaxHighlighter>
+      </div>
     </Suspense>
   ) : (
     <code className="s-mx-0.5 s-rounded-lg s-border s-border-border-dark s-bg-muted s-px-1.5 s-py-1 s-text-amber-600">

sparkle/src/components/markdown/CodeBlockWithExtendedSupport.tsx

@@ -104,6 +104,15 @@ const mermaidStyles = `
   /* Base diagram styles */
   .mermaid {
     background: ${palette.slate[50]};
+    cursor: default;
+  }
+
+    /* Add text-specific cursor styles */
+  .mermaid text,
+  .mermaid .nodeLabel,
+  .mermaid .edgeLabel,
+  .mermaid .label {
+    cursor: text;
   }
 
   /* Cluster styles */
@@ -252,7 +261,8 @@ const MermaidGraph: React.FC<{ chart: string }> = ({ chart }) => {
         className={cn(
           "mermaid",
           "s-w-full",
-          "s-rounded-2xl s-transition-all s-duration-200"
+          "s-rounded-2xl s-transition-all s-duration-200",
+          "s-cursor-default" // Add this line
         )}
       />
     </>

sparkle/src/components/markdown/ContentBlockWrapper.tsx

@@ -98,33 +98,45 @@ export function ContentBlockWrapper({
         className
       )}
     >
-      <div className="s-sticky s-top-0 s-z-50 s-w-full">
-        <div
-          id="BlockActions"
-          className="s-flex s-w-full s-justify-end s-gap-1 s-p-2"
-        >
-          {actions && actions}
-          {getContentToDownload && (
+      <div
+        id="BlockActions"
+        className="s-absolute s-right-2 s-top-2 s-z-50 s-inline-flex s-items-center"
+        style={{ pointerEvents: "none" }}
+      >
+        {actions && (
+          <div className="s-px-1" style={{ pointerEvents: "auto" }}>
+            {actions}
+          </div>
+        )}
+        {getContentToDownload && (
+          <div className="s-px-1" style={{ pointerEvents: "auto" }}>
             <Button
               variant={"outline"}
               size="xs"
               icon={ArrowDownOnSquareIcon}
               onClick={handleDownload}
               tooltip="Download"
             />
-          )}
-          {content && (
+          </div>
+        )}
+        {content && (
+          <div className="s-px-1" style={{ pointerEvents: "auto" }}>
             <Button
               variant={"outline"}
               size="xs"
               icon={isCopied ? ClipboardCheckIcon : ClipboardIcon}
               onClick={handleCopyToClipboard}
               tooltip="Copy"
             />
-          )}
-        </div>
+          </div>
+        )}
+      </div>
+      <div
+        className={cn("s-w-full", innerClassName)}
+        style={{ cursor: "text" }}
+      >
+        {children}
       </div>
-      <div className={cn("-s-mt-11 s-w-full", innerClassName)}>{children}</div>
     </div>
   );
 }

sparkle/src/components/markdown/Markdown.tsx

@@ -23,7 +23,6 @@ import {
 } from "@sparkle/components/markdown/TableBlock";
 import { sanitizeContent } from "@sparkle/components/markdown/utils";
 import { cn } from "@sparkle/lib/utils";
-
 const headerColor = "s-text-foreground";
 const sizes = {
   sm: {
@@ -46,18 +45,17 @@ const sizes = {
   },
 };
 type TextSize = "sm" | "base";
-
 function showUnsupportedDirective() {
   return (tree: any) => {
     visit(tree, ["textDirective"], (node) => {
       if (node.type === "textDirective") {
+        // it's not a valid directive, so we'll leave it as plain text
         node.type = "text";
         node.value = `:${node.name}${node.children ? node.children.map((c: any) => c.value).join("") : ""}`;
       }
     });
   };
 }
-
 export function Markdown({
   content,
   isStreaming = false,
@@ -163,31 +161,10 @@ export function Markdown({
       input: Input,
       blockquote: BlockquoteBlock,
       hr: () => <div className="s-my-6 s-border-b s-border-structure-200" />,
-      code: ({ inline, className, children }) => {
-        // Check if it's a special block (mermaid, visualization, etc)
-        const isSpecialBlock =
-          className &&
-          (className.includes("mermaid") ||
-            className.includes("visualization") ||
-            className.includes("chart"));
-
-        return (
-          <div
-            className={cn(
-              "s-w-full s-rounded-2xl",
-              !isSpecialBlock && "s-cursor-text"
-            )}
-          >
-            <CodeBlockWithExtendedSupport inline={inline} className={className}>
-              {children}
-            </CodeBlockWithExtendedSupport>
-          </div>
-        );
-      },
+      code: CodeBlockWithExtendedSupport,
       ...additionalMarkdownComponents,
     };
   }, [textSize, textColor, additionalMarkdownComponents]);
-
   const markdownPlugins: PluggableList = useMemo(
     () => [
       remarkDirective,
@@ -198,9 +175,7 @@ export function Markdown({
     ],
     [additionalMarkdownPlugins]
   );
-
   const rehypePlugins = [[rehypeKatex, { output: "mathml" }]] as PluggableList;
-
   return (
     <div className={cn("s-w-full", isStreaming ? "s-blinking-cursor" : "")}>
       <MarkdownContentContext.Provider
@@ -222,7 +197,6 @@ export function Markdown({
     </div>
   );
 }
-
 function LinkBlock({
   href,
   children,
@@ -241,28 +215,28 @@ function LinkBlock({
     </a>
   );
 }
-
 function PreBlock({ children }: { children: React.ReactNode }) {
   const validChildrenContent =
     Array.isArray(children) && children[0]
       ? children[0].props.children[0]
       : null;
-
   let fallbackData: string | null = null;
   if (!validChildrenContent) {
     fallbackData =
       Array.isArray(children) && children[0]
         ? children[0].props?.node?.data?.meta
         : null;
   }
-
   return (
-    <pre className="s-my-2 s-w-full s-break-all s-rounded-2xl s-border s-border-border s-bg-muted-background">
+    <pre
+      className={cn(
+        "s-my-2 s-w-full s-break-all s-rounded-2xl s-border s-border-border s-bg-muted-background"
+      )}
+    >
       {validChildrenContent ? children : fallbackData || children}
     </pre>
   );
 }
-
 function UlBlock({
   children,
   textColor,
@@ -284,7 +258,6 @@ function UlBlock({
     </ul>
   );
 }
-
 function OlBlock({
   children,
   start,
@@ -309,7 +282,6 @@ function OlBlock({
     </ol>
   );
 }
-
 function LiBlock({
   children,
   textColor,
@@ -335,7 +307,6 @@ function LiBlock({
     </li>
   );
 }
-
 function ParagraphBlock({
   children,
   textColor,

sparkle/src/stories/Markdown.stories.tsx

@@ -31,7 +31,7 @@ const example = `
 
 This is a paragraph with **bold** text and *italic* text. This is \`code\` block:
 \`\`\`
-Block 
+Block
 \`\`\`
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.