+ );
+}
diff --git a/src/app/[...file]/components/types/image.css.ts b/src/app/[...file]/components/types/image.css.ts
index f7f24ff..8aefb9b 100644
--- a/src/app/[...file]/components/types/image.css.ts
+++ b/src/app/[...file]/components/types/image.css.ts
@@ -1,5 +1,6 @@
import { style } from '@vanilla-extract/css'
export const image = style({
+ marginTop: '1em',
maxWidth: '100%',
});
diff --git a/src/app/[...file]/components/types/markdown.tsx b/src/app/[...file]/components/types/markdown.tsx
index 2d4e605..3af8455 100644
--- a/src/app/[...file]/components/types/markdown.tsx
+++ b/src/app/[...file]/components/types/markdown.tsx
@@ -1,24 +1,54 @@
+'use client'
+
+import { useRef } from 'react';
import Markdown from 'react-markdown';
import * as style from './markdown.css';
+import TabGroup from '../tab_group';
import Copy from '../copy';
import Text from './text';
import { map_to_type } from './text';
+const initial = 0;
+
export default function MarkdownContent({ text }: { text: string }) {
- return (
- {
- const split = props.className?.split('-') ?? ['none'];
- return (
-
-
-
-
- );
- }
- }}
- >{text}
- );
+ /*
+ * Originally used 'useState', but switching back to the 'Rendered'
+ * tab from 'Raw' was expensive and caused a hiccup
+ *
+ * Now, keep them both loaded in the DOM and use display to switch
+ * which is being rendered. It's less "Reactive" or whatever, but
+ * it is simply faster ¯\_(ツ)_/¯
+ */
+ const refs = [
+ useRef(null),
+ useRef(null),
+ ]
+
+ function tab_callback(active: number) {
+ for (const [index, ref] of refs.entries()) {
+ ref.current!.style.display = index == active ? 'block' : 'none';
+ }
+ }
+
+ return <>
+
+ {[
+ {
+ const split = props.className?.split('-') ?? ['none'];
+ return (
+