Fixing the codeblock cursor

dust-tt · Jan 3, 2025 · 9e5c87a · 9e5c87a
1 parent 3ce4a85
commit 9e5c87a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 12 deletions.
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
diff --git a/sparkle/package.json b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.352",
+  "version": "0.2.353",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

diff --git a/sparkle/src/components/markdown/CodeBlock.tsx b/sparkle/src/components/markdown/CodeBlock.tsx
@@ -125,12 +125,13 @@ export function CodeBlock({
         style={codeStyle}
         language={languageToUse}
         PreTag="div"
+        className="s-cursor-text"
       >
         {String(children).replace(/\n$/, "")}
       </SyntaxHighlighter>
     </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">
+    <code className="s-mx-0.5 s-cursor-text s-rounded-lg s-border s-border-border-dark s-bg-muted s-px-1.5 s-py-1 s-text-amber-600">
       {children}
     </code>
   );

diff --git a/sparkle/src/components/markdown/CodeBlockWithExtendedSupport.tsx b/sparkle/src/components/markdown/CodeBlockWithExtendedSupport.tsx
@@ -104,8 +104,15 @@ const mermaidStyles = `
   /* Base diagram styles */
   .mermaid {
     background: ${palette.slate[50]};
+    cursor: default;
   }
-
+    
+  .mermaid text,
+  .mermaid .nodeLabel,
+  .mermaid .edgeLabel,
+  .mermaid .label {
+    cursor: text;
+     
   /* Cluster styles */
   .mermaid .cluster rect {
     rx: 8px;

diff --git a/sparkle/src/components/markdown/ContentBlockWrapper.tsx b/sparkle/src/components/markdown/ContentBlockWrapper.tsx
@@ -47,11 +47,11 @@ export function ContentBlockWrapper({
   getContentToDownload,
 }: ContentBlockWrapperProps) {
   const [isCopied, copyToClipboard] = useCopyToClipboard();
+
   const handleCopyToClipboard = useCallback(() => {
     if (!content) {
       return;
     }
-
     const rawContent: ClipboardContent =
       typeof content === "string" ? { "text/plain": content } : content;
 
@@ -79,9 +79,7 @@ export function ContentBlockWrapper({
     if (!getContentToDownload) {
       return;
     }
-
     const { content, filename, type } = await getContentToDownload();
-
     const blob = new Blob([content], { type });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -101,7 +99,7 @@ export function ContentBlockWrapper({
       <div className="s-sticky s-top-0 s-z-[1] s-w-full">
         <div
           id="BlockActions"
-          className="s-flex s-w-full s-justify-end s-gap-1 s-p-2"
+          className="s-absolute s-right-2 s-top-2 s-z-50 s-flex s-gap-2"
         >
           {actions && actions}
           {getContentToDownload && (
@@ -124,9 +122,7 @@ export function ContentBlockWrapper({
           )}
         </div>
       </div>
-      <div className={cn("s-z-0 -s-mt-11 s-w-full", innerClassName)}>
-        {children}
-      </div>
+      <div className={cn("s-z-0 s-w-full", innerClassName)}>{children}</div>
     </div>
   );
 }