From 3d28ca8471391918019f8bfb2664c06b1f4e5bed Mon Sep 17 00:00:00 2001
From: Sam Bender <2336186+rednebmas@users.noreply.github.com>
Date: Mon, 1 Sep 2025 11:25:31 -0700
Subject: [PATCH 1/3] fix markdown

---
 apps/react/package.json                       |  1 +
 .../components/FlashCards/TextCardPrompt.tsx  |  2 +-
 .../src/components/inputs/BaseTextArea.tsx    | 14 +++++++
 .../src/components/inputs/TextAreaField.tsx   | 30 ++++++++++++++
 apps/react/src/components/inputs/index.ts     |  2 +
 .../components/notation/CardTypeOptions.tsx   |  4 +-
 apps/react/tailwind.config.js                 |  2 +-
 yarn.lock                                     | 39 +++++++++++++++++++
 8 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 apps/react/src/components/inputs/BaseTextArea.tsx
 create mode 100644 apps/react/src/components/inputs/TextAreaField.tsx

diff --git a/apps/react/package.json b/apps/react/package.json
index 7f43403b..50f1466f 100644
--- a/apps/react/package.json
+++ b/apps/react/package.json
@@ -17,6 +17,7 @@
 		"@headlessui/react": "2.1.3",
 		"@heroicons/react": "^2.1.3",
 		"@tailwindcss/forms": "0.5.8",
+		"@tailwindcss/typography": "^0.5.16",
 		"MemoryFlashCore": "*",
 		"autoprefixer": "^10.4.16",
 		"clsx": "^2.1.1",
diff --git a/apps/react/src/components/FlashCards/TextCardPrompt.tsx b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
index 0f3a5528..7c3f960f 100644
--- a/apps/react/src/components/FlashCards/TextCardPrompt.tsx
+++ b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
@@ -14,7 +14,7 @@ export const TextCardPrompt: React.FC<TextCardPromptProps> = ({
 	correctCount = 0,
 }) => (
 	<div className="flex flex-col items-center justify-center text-center gap-2">
-		<ReactMarkdown className="pt-3">{text}</ReactMarkdown>
+		<ReactMarkdown className="prose prose-sm max-w-none pt-3">{text}</ReactMarkdown>
 		<div className="mb-auto">
 			<ProgressDots total={total} correctCount={correctCount} />
 		</div>
diff --git a/apps/react/src/components/inputs/BaseTextArea.tsx b/apps/react/src/components/inputs/BaseTextArea.tsx
new file mode 100644
index 00000000..f8e755ac
--- /dev/null
+++ b/apps/react/src/components/inputs/BaseTextArea.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+export type BaseTextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const BaseTextArea = React.forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(
+	({ className = '', ...props }, ref) => (
+		<textarea
+			ref={ref}
+			className={`block w-full rounded-md border-0 py-1.5 bg-white dark:bg-gray-800 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 resize-y min-h-[80px] ${className}`}
+			{...props}
+		/>
+	),
+);
+BaseTextArea.displayName = 'BaseTextArea';
diff --git a/apps/react/src/components/inputs/TextAreaField.tsx b/apps/react/src/components/inputs/TextAreaField.tsx
new file mode 100644
index 00000000..4a5e5b7c
--- /dev/null
+++ b/apps/react/src/components/inputs/TextAreaField.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { BaseTextArea, BaseTextAreaProps } from './BaseTextArea';
+
+export interface TextAreaFieldProps extends BaseTextAreaProps {
+	label: string;
+	id: string;
+	afterElement?: React.ReactNode;
+}
+
+export const TextAreaField: React.FC<TextAreaFieldProps> = ({
+	label,
+	id,
+	afterElement,
+	className = '',
+	...props
+}) => (
+	<div>
+		<label htmlFor={id} className="block text-sm font-medium leading-6 text-gray-900">
+			{label}
+		</label>
+		<div className="mt-2 relative">
+			<BaseTextArea
+				id={id}
+				className={`${afterElement ? 'pr-10' : ''} ${className}`}
+				{...props}
+			/>
+			{afterElement}
+		</div>
+	</div>
+);
diff --git a/apps/react/src/components/inputs/index.ts b/apps/react/src/components/inputs/index.ts
index b126b466..4a6f83d3 100644
--- a/apps/react/src/components/inputs/index.ts
+++ b/apps/react/src/components/inputs/index.ts
@@ -1,5 +1,7 @@
 export * from './BaseInput';
+export * from './BaseTextArea';
 export * from './InputField';
+export * from './TextAreaField';
 export * from './EmailInput';
 export * from './PasswordInput';
 export * from './Select';
diff --git a/apps/react/src/components/notation/CardTypeOptions.tsx b/apps/react/src/components/notation/CardTypeOptions.tsx
index 95870a1c..502e4e56 100644
--- a/apps/react/src/components/notation/CardTypeOptions.tsx
+++ b/apps/react/src/components/notation/CardTypeOptions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CardTypeDropdown } from '../CardTypeDropdown';
-import { InputField, Checkbox } from '../inputs';
+import { TextAreaField, Checkbox } from '../inputs';
 import { SettingsSection } from './SettingsSection';
 import { ChordProgressionInput } from './ChordProgressionInput';
 import { NotationSettingsState } from './defaultSettings';
@@ -21,7 +21,7 @@ export const CardTypeOptions: React.FC<CardTypeOptionsProps> = ({ settings, onCh
 			</div>
 			{settings.cardType === 'Text Prompt' && (
 				<>
-					<InputField
+					<TextAreaField
 						id="text-prompt"
 						label="Prompt Text"
 						value={settings.textPrompt}
diff --git a/apps/react/tailwind.config.js b/apps/react/tailwind.config.js
index 454511d8..39bc6626 100644
--- a/apps/react/tailwind.config.js
+++ b/apps/react/tailwind.config.js
@@ -50,5 +50,5 @@ export default {
 			secondary: ['Futura', ...defaultTheme.fontFamily.sans],
 		},
 	},
-	plugins: [require('@tailwindcss/forms')],
+	plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
 };
diff --git a/yarn.lock b/yarn.lock
index 20571241..2512ed78 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1055,6 +1055,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/typography@npm:^0.5.16":
+  version: 0.5.16
+  resolution: "@tailwindcss/typography@npm:0.5.16"
+  dependencies:
+    lodash.castarray: "npm:^4.4.0"
+    lodash.isplainobject: "npm:^4.0.6"
+    lodash.merge: "npm:^4.6.2"
+    postcss-selector-parser: "npm:6.0.10"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10c0/35a7387876810c23c270a23848b920517229b707c8ead6a63c8bb7d6720a62f23728c3117f0a93b422a66d1e5ee9c7ad8a6c3f0fbf5255b535c0e4971ffa0158
+  languageName: node
+  linkType: hard
+
 "@tanstack/react-virtual@npm:^3.8.1":
   version: 3.10.8
   resolution: "@tanstack/react-virtual@npm:3.10.8"
@@ -2083,6 +2097,7 @@ __metadata:
     "@heroicons/react": "npm:^2.1.3"
     "@playwright/test": "npm:^1.42.1"
     "@tailwindcss/forms": "npm:0.5.8"
+    "@tailwindcss/typography": "npm:^0.5.16"
     "@types/lodash": "npm:^4.17.0"
     "@types/react": "npm:^18.2.15"
     "@types/react-dom": "npm:^18.2.7"
@@ -4972,6 +4987,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.castarray@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.castarray@npm:4.4.0"
+  checksum: 10c0/0bf523ad1596a5bf17869ba047235b4453eee927005013ae152345e2b291b81a02e7f2b7c38f876a1d16f73c34aa3c3241e965193e5b31595035bc8f330c4358
+  languageName: node
+  linkType: hard
+
+"lodash.isplainobject@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "lodash.isplainobject@npm:4.0.6"
+  checksum: 10c0/afd70b5c450d1e09f32a737bed06ff85b873ecd3d3d3400458725283e3f2e0bb6bf48e67dbe7a309eb371a822b16a26cca4a63c8c52db3fc7dc9d5f9dd324cbb
+  languageName: node
+  linkType: hard
+
 "lodash.merge@npm:^4.6.2":
   version: 4.6.2
   resolution: "lodash.merge@npm:4.6.2"
@@ -6487,6 +6516,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-selector-parser@npm:6.0.10":
+  version: 6.0.10
+  resolution: "postcss-selector-parser@npm:6.0.10"
+  dependencies:
+    cssesc: "npm:^3.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10c0/a0b27c5e3f7604c8dc7cd83f145fdd7b21448e0d86072da99e0d78e536ba27aa9db2d42024c50aa530408ee517c4bdc0260529e1afb56608f9a82e839c207e82
+  languageName: node
+  linkType: hard
+
 "postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.1.1":
   version: 6.1.2
   resolution: "postcss-selector-parser@npm:6.1.2"

From 9f90f8b1d14be49409a3a6473f218949d9229194 Mon Sep 17 00:00:00 2001
From: Sam Bender <2336186+rednebmas@users.noreply.github.com>
Date: Fri, 12 Sep 2025 00:13:33 -0700
Subject: [PATCH 2/3] markdown

---
 apps/react/src/components/FlashCards/TextCardPrompt.tsx | 2 +-
 apps/react/src/components/notation/defaultSettings.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/react/src/components/FlashCards/TextCardPrompt.tsx b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
index 7c3f960f..92590b97 100644
--- a/apps/react/src/components/FlashCards/TextCardPrompt.tsx
+++ b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
@@ -14,7 +14,7 @@ export const TextCardPrompt: React.FC<TextCardPromptProps> = ({
 	correctCount = 0,
 }) => (
 	<div className="flex flex-col items-center justify-center text-center gap-2">
-		<ReactMarkdown className="prose prose-sm max-w-none pt-3">{text}</ReactMarkdown>
+		<ReactMarkdown className="prose prose-sm max-w-none dark:prose-invert pt-3">{text}</ReactMarkdown>
 		<div className="mb-auto">
 			<ProgressDots total={total} correctCount={correctCount} />
 		</div>
diff --git a/apps/react/src/components/notation/defaultSettings.ts b/apps/react/src/components/notation/defaultSettings.ts
index 97112cc3..3451fdd3 100644
--- a/apps/react/src/components/notation/defaultSettings.ts
+++ b/apps/react/src/components/notation/defaultSettings.ts
@@ -26,7 +26,7 @@ export const defaultSettings: NotationSettingsState = {
 	bars: 1,
 	selected: [true, ...new Array(majorKeys.length - 1).fill(false)],
 	cardType: 'Sheet Music',
-	textPrompt: '',
+	textPrompt: '# Markdown\nIs supported!',
 	preview: false,
 	chordMemory: {
 		progression: '',

From fbb3f1933c61012926a8c917ff163bafeb764530 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sun, 30 Nov 2025 19:14:58 +0000
Subject: [PATCH 3/3] style: format code

---
 apps/react/src/components/FlashCards/TextCardPrompt.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/react/src/components/FlashCards/TextCardPrompt.tsx b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
index 92590b97..ef74093c 100644
--- a/apps/react/src/components/FlashCards/TextCardPrompt.tsx
+++ b/apps/react/src/components/FlashCards/TextCardPrompt.tsx
@@ -14,7 +14,9 @@ export const TextCardPrompt: React.FC<TextCardPromptProps> = ({
 	correctCount = 0,
 }) => (
 	<div className="flex flex-col items-center justify-center text-center gap-2">
-		<ReactMarkdown className="prose prose-sm max-w-none dark:prose-invert pt-3">{text}</ReactMarkdown>
+		<ReactMarkdown className="prose prose-sm max-w-none dark:prose-invert pt-3">
+			{text}
+		</ReactMarkdown>
 		<div className="mb-auto">
 			<ProgressDots total={total} correctCount={correctCount} />
 		</div>