fix markdown

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",

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="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>

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';

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>
+);

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';

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}

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: '',

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')],
 };

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"