Spaces:
Running
Running
fix: code block copy button
Browse files
src/lib/components/CodeBlock.svelte
CHANGED
@@ -4,10 +4,10 @@
|
|
4 |
|
5 |
interface Props {
|
6 |
code?: string;
|
7 |
-
|
8 |
}
|
9 |
|
10 |
-
let { code = "" }: Props = $props();
|
11 |
</script>
|
12 |
|
13 |
<div class="group relative my-4 rounded-lg">
|
@@ -17,6 +17,6 @@
|
|
17 |
></pre>
|
18 |
<CopyToClipBoardBtn
|
19 |
classNames="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 dark:text-gray-700 text-gray-200"
|
20 |
-
value={
|
21 |
/>
|
22 |
</div>
|
|
|
4 |
|
5 |
interface Props {
|
6 |
code?: string;
|
7 |
+
rawCode?: string;
|
8 |
}
|
9 |
|
10 |
+
let { code = "", rawCode = "" }: Props = $props();
|
11 |
</script>
|
12 |
|
13 |
<div class="group relative my-4 rounded-lg">
|
|
|
17 |
></pre>
|
18 |
<CopyToClipBoardBtn
|
19 |
classNames="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 absolute top-2 right-2 invisible opacity-0 group-hover:visible group-hover:opacity-100 dark:text-gray-700 text-gray-200"
|
20 |
+
value={rawCode}
|
21 |
/>
|
22 |
</div>
|
src/lib/components/chat/MarkdownRenderer.svelte
CHANGED
@@ -62,6 +62,6 @@
|
|
62 |
{@html DOMPurify.sanitize(html)}
|
63 |
{/await}
|
64 |
{:else if token.type === "code"}
|
65 |
-
<CodeBlock code={token.code} />
|
66 |
{/if}
|
67 |
{/each}
|
|
|
62 |
{@html DOMPurify.sanitize(html)}
|
63 |
{/await}
|
64 |
{:else if token.type === "code"}
|
65 |
+
<CodeBlock code={token.code} rawCode={token.rawCode} />
|
66 |
{/if}
|
67 |
{/each}
|
src/lib/utils/marked.ts
CHANGED
@@ -172,6 +172,7 @@ type CodeToken = {
|
|
172 |
type: "code";
|
173 |
lang: string;
|
174 |
code: string;
|
|
|
175 |
};
|
176 |
|
177 |
type TextToken = {
|
@@ -190,6 +191,7 @@ export async function processTokens(content: string, sources: WebSearchSource[])
|
|
190 |
type: "code" as const,
|
191 |
lang: token.lang,
|
192 |
code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
|
|
|
193 |
};
|
194 |
} else {
|
195 |
return {
|
@@ -212,6 +214,7 @@ export function processTokensSync(content: string, sources: WebSearchSource[]):
|
|
212 |
type: "code" as const,
|
213 |
lang: token.lang,
|
214 |
code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
|
|
|
215 |
};
|
216 |
}
|
217 |
return { type: "text" as const, html: marked.parse(token.raw) };
|
|
|
172 |
type: "code";
|
173 |
lang: string;
|
174 |
code: string;
|
175 |
+
rawCode: string;
|
176 |
};
|
177 |
|
178 |
type TextToken = {
|
|
|
191 |
type: "code" as const,
|
192 |
lang: token.lang,
|
193 |
code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
|
194 |
+
rawCode: token.text,
|
195 |
};
|
196 |
} else {
|
197 |
return {
|
|
|
214 |
type: "code" as const,
|
215 |
lang: token.lang,
|
216 |
code: hljs.highlightAuto(token.text, hljs.getLanguage(token.lang)?.aliases).value,
|
217 |
+
rawCode: token.text,
|
218 |
};
|
219 |
}
|
220 |
return { type: "text" as const, html: marked.parse(token.raw) };
|