From f61faa6d5f79f75e3ab5f5c1c67c68ff4bf57740 Mon Sep 17 00:00:00 2001
From: Hugo Caillard <911307+hugocaillard@users.noreply.github.com>
Date: Tue, 1 Oct 2024 20:23:39 +0200
Subject: [PATCH 1/2] feat: clarity-playground component

---
 components/code/clarinet-sdk.tsx              | 184 +++++++++---------
 components/search.tsx                         |  18 +-
 .../docs/stacks/clarity/basic-arithmetic.mdx  |  24 ++-
 package.json                                  |   2 +-
 4 files changed, 122 insertions(+), 106 deletions(-)

diff --git a/components/code/clarinet-sdk.tsx b/components/code/clarinet-sdk.tsx
index fc0a0543b..826d216f1 100644
--- a/components/code/clarinet-sdk.tsx
+++ b/components/code/clarinet-sdk.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useLayoutEffect } from "react";
 import { cn } from "@/utils/cn";
 import { Button } from "@/components/ui/button";
 import * as Base from "fumadocs-ui/components/codeblock";
@@ -8,121 +8,117 @@ import * as Base from "fumadocs-ui/components/codeblock";
 import { initSimnet } from "@hirosystems/clarinet-sdk-browser";
 import { Cl } from "@stacks/transactions";
 
-import { getHighlighter } from "shiki";
+import {
+  BundledLanguage,
+  BundledTheme,
+  getSingletonHighlighter,
+  HighlighterGeneric,
+} from "shiki";
 
-// TODO: WIP: testing out new Clarinet JS SDK browser lib
-export const ClarinetSDK: React.FC = () => {
-  const [simnet, setSimnet] = React.useState<any>();
-  const [html, setHtml] = React.useState<any>();
-  const [evaluatedResponse, setEvaluatedResponse] = React.useState<any>();
-
-  async function showMe() {
-    const simnet = await initSimnet();
-    await simnet.initEmtpySession();
+type ClarityPlaygroundProps = {
+  snippet: string;
+};
 
-    simnet.setEpoch("2.5");
-    const result =
-      simnet.runSnippet(`(define-map Users uint {address: principal})
-    (map-insert Users u1 { address: tx-sender })
-    (map-get? Users u1)
-    `) as any;
-
-    const highlighter = await getHighlighter({
-      langs: ["bash", "ts", "tsx", "clarity"],
-      themes: ["github-light", "github-dark"],
-    });
-    const res = highlighter.codeToHtml(Cl.prettyPrint(result, 2), {
-      lang: "clarity",
-      defaultColor: false,
-      themes: {
-        light: "github-light",
-        dark: "github-dark",
-      },
-      transformers: [
-        {
-          name: "remove-pre",
-          root: (root) => {
-            if (root.children[0].type !== "element") return;
-
-            return {
-              type: "root",
-              children: root.children[0].children,
-            };
-          },
+let memoizedHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
+async function getHighlighter() {
+  if (memoizedHighlighter) return memoizedHighlighter;
+
+  memoizedHighlighter = await getSingletonHighlighter({
+    langs: ["clarity"],
+    themes: ["github-light", "github-dark"],
+  });
+  return memoizedHighlighter;
+}
+
+async function highlight(snippet: string) {
+  const highlighter = await getHighlighter();
+  return highlighter.codeToHtml(snippet, {
+    lang: "clarity",
+    defaultColor: false,
+    themes: {
+      light: "github-light",
+      dark: "github-dark",
+    },
+    transformers: [
+      {
+        name: "remove-pre",
+        root: (root) => {
+          if (root.children[0].type !== "element") return;
+          return {
+            type: "root",
+            children: root.children[0].children,
+          };
         },
-      ],
-    });
-    setEvaluatedResponse(res);
-  }
+      },
+    ],
+  });
+}
+
+// TODO: WIP: testing out new Clarinet JS SDK browser lib
+export const ClarityPlayground: React.FC<ClarityPlaygroundProps> = ({
+  snippet,
+}) => {
+  const [snippetValue, setSnippetValue] = React.useState<string>(snippet);
+  const [snippetRows, setSnippetRows] = React.useState<number>(
+    snippetValue.split("\n").length,
+  );
+  const [snippetHTML, setSnippetHTML] = React.useState<string>("");
+  const [resultHTML, setResultHTML] = React.useState<string>();
+
+  useEffect(() => {
+    highlight(snippetValue).then(setSnippetHTML);
+    setSnippetRows(snippetValue.split("\n").length);
+  }, [snippetValue]);
 
   async function run() {
     const simnet = await initSimnet();
     await simnet.initEmtpySession();
 
     simnet.setEpoch("2.5");
-    const result =
-      simnet.runSnippet(`(define-map Users uint {address: principal})
-    (map-insert Users u1 { address: tx-sender })
-    (map-get? Users u1)
-    `) as any;
-    console.log(Cl.prettyPrint(result, 2));
-    setSimnet(simnet);
-
-    const codeResponse = await fetch("/scripts/hello-world.clar");
-    const code = await codeResponse.text();
-
-    const highlighter = await getHighlighter({
-      langs: ["bash", "ts", "tsx", "clarity"],
-      themes: ["github-light", "github-dark"],
-    });
-
-    const html = highlighter.codeToHtml(code, {
-      lang: "clarity",
-      defaultColor: false,
-      themes: {
-        light: "github-light",
-        dark: "github-dark",
-      },
-      transformers: [
-        {
-          name: "remove-pre",
-          root: (root) => {
-            if (root.children[0].type !== "element") return;
-
-            return {
-              type: "root",
-              children: root.children[0].children,
-            };
-          },
-        },
-      ],
-    });
-    setHtml(html);
-  }
+    const { result } = simnet.execute(snippetValue);
+    const resultString = Cl.prettyPrint(result, 2);
 
-  React.useEffect(() => {
-    run();
-  }, []);
+    highlight(resultString).then(setResultHTML);
+  }
 
   return (
     <>
+      <div
+        className="w-full"
+        // style={{ height: 24 * snippetRows, lineHeight: "24px" }}
+      >
+        {/* className="absolute font-sm t-0 b-0 l-0 r-0" */}
+        <Base.CodeBlock style={{ lineHeight: "24px" }}>
+          <Base.Pre
+            dangerouslySetInnerHTML={{ __html: snippetHTML }}
+          ></Base.Pre>
+        </Base.CodeBlock>
+
+        {/* className="absolute t-0 b-0 l-0 r-0 background-none p-2 font-sm font-mono opacity-50" */}
+        <textarea
+          className="background-none p-2 font-sm font-mono display-block w-full"
+          style={{ lineHeight: "24px" }}
+          rows={snippetRows}
+          value={snippetValue}
+          onChange={(e) => setSnippetValue(e.target.value)}
+        />
+      </div>
+
       <Button
         className={cn(
           "px-5 py-2 text-sm leading-5 rounded-full font-semibold z-10",
           "bg-neutral-900 text-white",
           "dark:bg-white dark:text-neutral-900",
-          "hover:bg-neutral-900/90 dark:hover:bg-gray-100/90"
+          "hover:bg-neutral-900/90 dark:hover:bg-gray-100/90",
         )}
-        onClick={showMe}
+        onClick={run}
       >
         Run
       </Button>
-      <Base.CodeBlock>
-        <Base.Pre dangerouslySetInnerHTML={{ __html: html }} />
-      </Base.CodeBlock>
-      {evaluatedResponse ? (
-        <Base.CodeBlock allowCopy={false}>
-          <Base.Pre dangerouslySetInnerHTML={{ __html: evaluatedResponse }} />
+
+      {resultHTML ? (
+        <Base.CodeBlock>
+          <Base.Pre dangerouslySetInnerHTML={{ __html: resultHTML }} />
         </Base.CodeBlock>
       ) : null}
     </>
diff --git a/components/search.tsx b/components/search.tsx
index 1557ae201..ffd8e4790 100644
--- a/components/search.tsx
+++ b/components/search.tsx
@@ -17,18 +17,17 @@ const itemVariants = cva(
         true: "bg-accent text-accent-foreground",
       },
     },
-  }
+  },
 );
 
 const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID;
 const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_API_KEY;
 const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX;
 
-if (!appId || !apiKey || !indexName) throw new Error("Algolia credentials");
-
-const client = algo(appId, apiKey);
-
-const index = client.initIndex(indexName);
+const index =
+  appId && apiKey && indexName
+    ? algo(appId, apiKey).initIndex(indexName)
+    : null;
 
 export default function CustomSearchDialog(props: SharedProps): JSX.Element {
   const defaultTag = useMode() ?? "stacks";
@@ -38,6 +37,13 @@ export default function CustomSearchDialog(props: SharedProps): JSX.Element {
     setTag(defaultTag);
   }, [defaultTag]);
 
+  if (!index) {
+    console.warn(
+      "Algolia search is disabled. Set up the environment variables to use it.",
+    );
+    return <div />;
+  }
+
   return (
     <SearchDialog
       index={index}
diff --git a/content/docs/stacks/clarity/basic-arithmetic.mdx b/content/docs/stacks/clarity/basic-arithmetic.mdx
index c0292040e..84679cae0 100644
--- a/content/docs/stacks/clarity/basic-arithmetic.mdx
+++ b/content/docs/stacks/clarity/basic-arithmetic.mdx
@@ -3,9 +3,12 @@ title: Basic arithmetic
 description: Brief overview of arithmetic operations in Clarity and their importance in smart contract development.
 ---
 
+import { ClarityPlayground } from "../../../../components/code/clarinet-sdk";
+
 Smart contracts often need to perform calculations, whether it's for token balances, voting weights, or complex financial operations. Understanding Clarity's arithmetic functions is crucial for implementing these features efficiently and securely.
 
 ## Why these functions matter
+
 Clarity's arithmetic functions are designed with blockchain-specific considerations in mind:
 
 1. Overflow protection: Unlike some languages, Clarity prevents integer overflow by default, enhancing contract security.
@@ -22,7 +25,8 @@ Clarity's arithmetic functions are designed with blockchain-specific considerati
 
 **When**: Use when you need to increase values, combine quantities, or perform any additive calculation.
 
-**Best practices**: 
+**Best practices**:
+
 - Consider overflow protection
 - Use with uint for non-negative values like token amounts
 
@@ -42,6 +46,13 @@ Clarity's arithmetic functions are designed with blockchain-specific considerati
 )
 ```
 
+export const snippet = `(define-public (add (a int) (b int))
+  (ok (+ a b))
+)
+(add 1 2)`;
+
+<ClarityPlayground snippet={snippet} />
+
 ### 2. Subtraction (-)
 
 **What**: Subtracts integers from the first argument.
@@ -50,7 +61,8 @@ Clarity's arithmetic functions are designed with blockchain-specific considerati
 
 **When**: Use when you need to decrease values, calculate differences, or perform any subtractive operation.
 
-**Best practices**: 
+**Best practices**:
+
 - Guard against underflow
 - Consider using uint for values that shouldn't go negative
 
@@ -75,7 +87,7 @@ Clarity's arithmetic functions are designed with blockchain-specific considerati
 )
 ```
 
-### 3. Multiplication (*)
+### 3. Multiplication (\*)
 
 **What**: Multiplies two or more integers.
 
@@ -83,7 +95,8 @@ Clarity's arithmetic functions are designed with blockchain-specific considerati
 
 **When**: Use when you need to scale values, calculate rates, or perform any multiplicative operation.
 
-**Best practices**: 
+**Best practices**:
+
 - Consider overflow protection
 - Use with uint for non-negative values like token amounts
 
@@ -109,7 +122,8 @@ Clarity's arithmetic functions are designed with blockchain-specific considerati
 
 **When**: Use when you need to divide values, calculate rates, or perform any division operation.
 
-**Best practices**: 
+**Best practices**:
+
 - Guard against division by zero
 - Consider using uint for non-negative values like token amounts
 
diff --git a/package.json b/package.json
index 296f8c363..20a345c6e 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@code-hike/mdx": "^0.9.0",
-    "@hirosystems/clarinet-sdk-browser": "^2.7.0-beta2",
+    "@hirosystems/clarinet-sdk-browser": "^2.9.0",
     "@next/env": "^14.0.0",
     "@next/third-parties": "^14.2.4",
     "@radix-ui/react-avatar": "^1.0.4",

From 73110ff9fd4a1cf4141ba3002327298218653199 Mon Sep 17 00:00:00 2001
From: Hugo Caillard <911307+hugocaillard@users.noreply.github.com>
Date: Fri, 4 Oct 2024 13:53:04 +0200
Subject: [PATCH 2/2] feat: clarity playground component

---
 app/global.css                                | 139 +++++++++++++++---
 ...larinet-sdk.tsx => clarity-playground.tsx} |  31 ++--
 .../docs/stacks/clarity/basic-arithmetic.mdx  |  19 ++-
 3 files changed, 141 insertions(+), 48 deletions(-)
 rename components/code/{clarinet-sdk.tsx => clarity-playground.tsx} (81%)

diff --git a/app/global.css b/app/global.css
index 542236c77..5ab99f902 100644
--- a/app/global.css
+++ b/app/global.css
@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @layer base {
   :root {
     --background: 40 14.3% 95.9%;
@@ -72,7 +71,6 @@
   .dark .bitcoin {
     --primary: 0 0% 100%;
     --icon: 0 0% 100%;
-    
   }
 }
 
@@ -124,22 +122,42 @@ a[aria-label="Hiro Platform"] {
   padding: 0;
 }
 
-
 a[aria-label="Hiro Platform"] div:hover {
   background-color: hsla(var(--muted-foreground) / 0.1);
 }
 
-h1, h2, h3, h4, h5, h6, code, button, .step {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+code,
+button,
+.step {
   font-family: var(--font-aeonikFono), sans-serif;
 }
 
-a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, option {
+a,
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a,
+option {
   font-family: var(--font-aeonikFono), sans-serif;
 }
 
 /* TODO: div.prose is for targeting the <Callout> title, need to fix this approach */
 /* TODO: div.prose .flex-1 span is for targeting the text inside the <Property> component */
-a, p, li, table, input, div.prose .w-0, div.prose .flex-1 span {
+a,
+p,
+li,
+table,
+input,
+div.prose .w-0,
+div.prose .flex-1 span {
   font-family: var(--font-inter), sans-serif;
 }
 
@@ -177,7 +195,14 @@ p {
   line-height: 1.75;
 }
 
-body > div.guides > div > article > div.prose > figure:nth-child(37) > div > div {
+body
+  > div.guides
+  > div
+  > article
+  > div.prose
+  > figure:nth-child(37)
+  > div
+  > div {
   background: hsl(var(--code));
 }
 
@@ -234,7 +259,15 @@ nav.container > *:nth-last-child(2):hover {
   border-bottom-color: hsl(var(--primary));
 }
 
-nav.container a, figure, pre, pre a, code, code a, th, code > span, .not-prose div {
+nav.container a,
+figure,
+pre,
+pre a,
+code,
+code a,
+th,
+code > span,
+.not-prose div {
   font-family: var(--font-aeonikFono), sans-serif;
 }
 
@@ -242,7 +275,6 @@ div.flex.flex-row.items-center.gap-2.border-b.bg-muted.px-4.py-1\.5 {
   border-bottom: none;
 }
 
-
 a[aria-label="Hiro Platform"] div svg {
   width: 0.75rem;
   height: 0.75rem;
@@ -252,21 +284,32 @@ nav a[href="/guides"] {
   text-decoration: underline;
 }
 
-[data-radix-scroll-area-viewport] .flex.flex-col.gap-8.pb-10.pt-4.max-md\:px-4.md\:pr-3.md\:pt-10 {
-    gap: 0;
+[data-radix-scroll-area-viewport]
+  .flex.flex-col.gap-8.pb-10.pt-4.max-md\:px-4.md\:pr-3.md\:pt-10 {
+  gap: 0;
 }
 
 /* Target the header toggle */
 
-body > div > header > nav > div.rounded-md.border.bg-background.p-1.text-sm.text-muted-foreground.max-md\:absolute.max-md\:left-\[50\%\].max-md\:translate-x-\[-50\%\] > a.rounded-md.px-2.py-1.transition-colors.hover\:text-accent-foreground.bg-background.text-accent-foreground {
+body
+  > div
+  > header
+  > nav
+  > div.rounded-md.border.bg-background.p-1.text-sm.text-muted-foreground.max-md\:absolute.max-md\:left-\[50\%\].max-md\:translate-x-\[-50\%\]
+  > a.rounded-md.px-2.py-1.transition-colors.hover\:text-accent-foreground.bg-background.text-accent-foreground {
   background-color: hsl(var(--inverted));
   color: hsl(var(--background));
 }
 
 /* Target the search component */
 
-body > div > header > nav > div.flex.flex-1.flex-row.items-center.justify-end.md\:gap-2 > button.inline-flex.w-full.max-w-\[240px\].items-center.gap-2.rounded-full.border.bg-secondary\/50.p-1\.5.text-sm.text-muted-foreground.transition-colors.hover\:bg-accent.hover\:text-accent-foreground.max-md\:hidden {
-  background-color: hsl(var(--background))
+body
+  > div
+  > header
+  > nav
+  > div.flex.flex-1.flex-row.items-center.justify-end.md\:gap-2
+  > button.inline-flex.w-full.max-w-\[240px\].items-center.gap-2.rounded-full.border.bg-secondary\/50.p-1\.5.text-sm.text-muted-foreground.transition-colors.hover\:bg-accent.hover\:text-accent-foreground.max-md\:hidden {
+  background-color: hsl(var(--background));
 }
 
 p.first\:mt-0 {
@@ -288,7 +331,9 @@ p.first\:mt-0:before {
   margin: 0;
 }
 
-div.not-prose, div.prose-no-margin, div[role="tablist"] {
+div.not-prose,
+div.prose-no-margin,
+div[role="tablist"] {
   background: hsl(var(--background));
 }
 
@@ -303,7 +348,8 @@ form.not-prose.flex.flex-col.gap-4.rounded-lg.border.bg-card.p-4 {
 }
 
 /* overrides the background of APIInfo and adjusts sticky header on scroll */
-div.prose-no-margin .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 {
+div.prose-no-margin
+  .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 {
   background: hsl(var(--background));
   top: 4.5rem;
 }
@@ -318,21 +364,24 @@ div.prose-no-margin .sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.roun
 }
 
 /* Style for the POST span */
-.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 > span:first-child {
+.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10
+  > span:first-child {
   position: absolute;
   top: 0.75rem;
   left: 0.75rem;
 }
 
 /* Style for the button */
-.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 > button {
+.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10
+  > button {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
 }
 
 /* Target the inner div containing the endpoint spans */
-.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10 > div {
+.sticky.top-24.z-\[2\].flex.flex-row.items-center.gap-2.rounded-lg.border.bg-card.p-3.md\:top-10
+  > div {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
@@ -348,7 +397,10 @@ div.prose div.footer.not-prose {
   font-family: var(--font-aeonikFono), sans-serif !important;
 }
 
-.steps > div:nth-child(2) > figure:nth-child(3) > div.flex.flex-row.items-center.gap-2.border-b.bg-muted.px-4.py-1\.5 {
+.steps
+  > div:nth-child(2)
+  > figure:nth-child(3)
+  > div.flex.flex-row.items-center.gap-2.border-b.bg-muted.px-4.py-1\.5 {
   background: hsl(var(--background)) !important;
 }
 
@@ -363,7 +415,7 @@ div.api-example div.max-xl\:hidden > div:nth-child(1) {
   background-color: hsl(var(--inverted));
 }
 
-.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
   text-decoration-color: var(--secondary) !important;
 }
 
@@ -381,8 +433,8 @@ div.api-example div.max-xl\:hidden > div:nth-child(1) {
 }
 
 .size-10 {
-  width: 2.5rem/* 20px */;
-  height: 2.5rem/* 20px */;
+  width: 2.5rem /* 20px */;
+  height: 2.5rem /* 20px */;
 }
 
 /* Add a deprecated strike through to sidebar links */
@@ -402,4 +454,43 @@ a[href="/stacks/api/fees/fee-rate"] {
 
 div.divide-y.divide-border.overflow-hidden.rounded-lg.border.bg-card {
   background: hsl(var(--background));
-}
\ No newline at end of file
+}
+
+div.clarity-playground {
+  --line-height: 21px;
+
+  & > * {
+    box-sizing: border-box;
+  }
+  pre.nd-codeblock {
+    overflow: hidden;
+
+    span.line {
+      display: inline;
+      height: var(--line-height);
+      line-height: var(--line-height);
+      border: none;
+    }
+  }
+
+  code:has(textarea) {
+    display: block;
+    background: none;
+    border: none;
+    line-height: var(--line-height);
+    overflow: hidden;
+  }
+
+  textarea {
+    position: absolute;
+    width: 100%;
+    top: 16px;
+    left: 16px;
+    resize: none;
+    outline: none;
+
+    background: none;
+    color: transparent;
+    caret-color: white;
+  }
+}
diff --git a/components/code/clarinet-sdk.tsx b/components/code/clarity-playground.tsx
similarity index 81%
rename from components/code/clarinet-sdk.tsx
rename to components/code/clarity-playground.tsx
index 826d216f1..f3ebca64c 100644
--- a/components/code/clarinet-sdk.tsx
+++ b/components/code/clarity-playground.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useLayoutEffect } from "react";
+import React, { useEffect } from "react";
 import { cn } from "@/utils/cn";
 import { Button } from "@/components/ui/button";
 import * as Base from "fumadocs-ui/components/codeblock";
@@ -83,25 +83,24 @@ export const ClarityPlayground: React.FC<ClarityPlaygroundProps> = ({
 
   return (
     <>
-      <div
-        className="w-full"
-        // style={{ height: 24 * snippetRows, lineHeight: "24px" }}
-      >
-        {/* className="absolute font-sm t-0 b-0 l-0 r-0" */}
-        <Base.CodeBlock style={{ lineHeight: "24px" }}>
+      <div className="w-full relative clarity-playground">
+        <Base.CodeBlock>
           <Base.Pre
+            style={{ height: `${21 * snippetRows + 16 * 2}px` }}
             dangerouslySetInnerHTML={{ __html: snippetHTML }}
           ></Base.Pre>
         </Base.CodeBlock>
-
-        {/* className="absolute t-0 b-0 l-0 r-0 background-none p-2 font-sm font-mono opacity-50" */}
-        <textarea
-          className="background-none p-2 font-sm font-mono display-block w-full"
-          style={{ lineHeight: "24px" }}
-          rows={snippetRows}
-          value={snippetValue}
-          onChange={(e) => setSnippetValue(e.target.value)}
-        />
+        <pre className="w-full m-0 absolute nd-codeblock" style={{ top: 0 }}>
+          <code className="w-full" style={{ height: `${21 * snippetRows}px` }}>
+            <textarea
+              tabIndex={-1}
+              rows={snippetRows}
+              value={snippetValue}
+              onChange={(e) => setSnippetValue(e.target.value)}
+              autoComplete="off"
+            />
+          </code>
+        </pre>
       </div>
 
       <Button
diff --git a/content/docs/stacks/clarity/basic-arithmetic.mdx b/content/docs/stacks/clarity/basic-arithmetic.mdx
index 84679cae0..33c7e2c28 100644
--- a/content/docs/stacks/clarity/basic-arithmetic.mdx
+++ b/content/docs/stacks/clarity/basic-arithmetic.mdx
@@ -3,10 +3,20 @@ title: Basic arithmetic
 description: Brief overview of arithmetic operations in Clarity and their importance in smart contract development.
 ---
 
-import { ClarityPlayground } from "../../../../components/code/clarinet-sdk";
+import { ClarityPlayground } from "../../../../components/code/clarity-playground";
 
 Smart contracts often need to perform calculations, whether it's for token balances, voting weights, or complex financial operations. Understanding Clarity's arithmetic functions is crucial for implementing these features efficiently and securely.
 
+export const snippet = `(define-public (add (a int) (b int))
+  (ok (+ a b))
+)
+
+(add 1 2)
+
+(add 1 2)`;
+
+<ClarityPlayground snippet={snippet} />
+
 ## Why these functions matter
 
 Clarity's arithmetic functions are designed with blockchain-specific considerations in mind:
@@ -46,13 +56,6 @@ Clarity's arithmetic functions are designed with blockchain-specific considerati
 )
 ```
 
-export const snippet = `(define-public (add (a int) (b int))
-  (ok (+ a b))
-)
-(add 1 2)`;
-
-<ClarityPlayground snippet={snippet} />
-
 ### 2. Subtraction (-)
 
 **What**: Subtracts integers from the first argument.