Merge pull request #25 from bob2402/edit-markdown

problem: can't edit markdown
nostrocket · Sep 29, 2024 · d1586f1 · d1586f1
2 parents d997226 + 177f943
commit d1586f1
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 64 deletions.
diff --git a/src/components/ProblemView.svelte b/src/components/ProblemView.svelte
@@ -6,11 +6,14 @@
 	import { ndk } from '@/ndk';
 	import { pubkey } from '@/stores/session';
 	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';
-	import * as Carta from 'carta-md';
+	import { Carta, CartaViewer } from 'carta-md';
 	import { ArrowBigLeft } from 'lucide-svelte';
 	import ProfileCard from './ProfileCard.svelte';
 
 	export let problem: Problem;
+	export let preview: boolean = false;
+
+	const carta = new Carta();
 </script>
 
 {#if problem}
@@ -22,32 +25,56 @@
 			</p>
 			<Card.Root class="m-2 w-full rounded-none p-2"
 				><Card.Content class="p-0">
-					{#key problem.creator}
+					{#if !preview}
+						{#key problem.creator}
+							<HoverCard.Root>
+								<HoverCard.Trigger>
+									<div class="flex flex-nowrap items-center gap-2">
+										<Avatar
+											ndk={$ndk}
+											pubkey={problem.creator}
+											class="h-8 w-8 flex-none rounded-full object-cover"
+										/>
+										<Name
+											ndk={$ndk}
+											pubkey={problem.creator}
+											class="hidden max-w-32 truncate p-1 font-mono text-black dark:text-white md:inline-block"
+										/>
+									</div>
+								</HoverCard.Trigger>
+								<HoverCard.Content>
+									<ProfileCard pubkey={problem.creator} />
+								</HoverCard.Content>
+							</HoverCard.Root>
+						{/key}
+					{:else if $pubkey}
 						<HoverCard.Root>
 							<HoverCard.Trigger>
 								<div class="flex flex-nowrap items-center gap-2">
 									<Avatar
 										ndk={$ndk}
-										pubkey={problem.creator}
+										pubkey={$pubkey}
 										class="h-8 w-8 flex-none rounded-full object-cover"
 									/>
 									<Name
 										ndk={$ndk}
-										pubkey={problem.creator}
-										class="hidden max-w-32 truncate p-1 font-mono text-white dark:text-black md:inline-block"
+										pubkey={$pubkey}
+										class="hidden max-w-32 truncate p-1 font-mono text-black dark:text-white md:inline-block"
 									/>
 								</div>
 							</HoverCard.Trigger>
 							<HoverCard.Content>
 								<ProfileCard pubkey={$pubkey} />
 							</HoverCard.Content>
 						</HoverCard.Root>
-					{/key}
+					{:else}
+						<div>User information needs to be displayed after logging in.</div>
+					{/if}
 				</Card.Content></Card.Root
 			>
-			{#key problem.event.id}
+			{#key problem.event}
 				<div class="markdown">
-					<Carta.CartaViewer carta={new Carta.Carta()} value={problem.page} />
+					<CartaViewer {carta} bind:value={problem.page} />
 				</div>
 			{/key}
 		</div>
@@ -60,6 +87,3 @@
 		></Card.Root
 	>
 {/if}
-
-<style>
-</style>
diff --git a/src/layouts/LogNewProblemLayout.svelte b/src/layouts/LogNewProblemLayout.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import * as Resizable from '$lib/components/ui/resizable';
+</script>
+
+<div class="hidden lg:block">
+	<Resizable.PaneGroup direction="horizontal" class="h-full items-stretch overflow-hidden">
+		<Resizable.Pane defaultSize={50} minSize={40} maxSize={60}>
+			<slot name="editor" />
+		</Resizable.Pane>
+		<Resizable.Handle withHandle />
+		<Resizable.Pane defaultSize={50} minSize={40} maxSize={60}>
+			<slot name="preview" />
+		</Resizable.Pane>
+	</Resizable.PaneGroup>
+</div>
+<div class="block lg:hidden">
+	<slot name="editor" />
+</div>
diff --git a/src/lib/event_helpers/problems.ts b/src/lib/event_helpers/problems.ts
@@ -26,6 +26,11 @@ export class Problem {
 		);
 	}
 
+	// only for problem preview
+	static fromObject({ tldr, para, page }: { tldr: string; para: string; page: string }): Problem {
+		return new Problem(new NDKEvent(), '', tldr, para, page, 'rfm');
+	}
+
 	get creator(): string {
 		return this.event.pubkey ?? '';
 	}

diff --git a/src/views/LogNewProblem.svelte b/src/views/LogNewProblem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '@/components/ui/button';
-
+	import ScrollArea from '@/components/ui/scroll-area/scroll-area.svelte';
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
 	import * as Card from '@/components/ui/card';
@@ -13,6 +13,11 @@
 	import { NDKEvent } from '@nostr-dev-kit/ndk';
 	import { sha256 } from 'js-sha256';
 	import { Label } from '@/components/ui/label';
+	import { Carta, MarkdownEditor } from 'carta-md';
+	import LogNewProblemLayout from '../layouts/LogNewProblemLayout.svelte';
+	import 'carta-md/default.css';
+	import ProblemView from '../components/ProblemView.svelte';
+	import { Problem } from '@/event_helpers/problems';
 
 	let tldr: string = '';
 	let para: string = '';
@@ -82,57 +87,68 @@
 				isPublishing = false;
 			});
 	}
+
+	$: problem = Problem.fromObject({
+		tldr,
+		para,
+		page
+	});
+
+	const carta = new Carta();
 </script>
 
-<div class="flex flex-col justify-start gap-2">
-	<div class="text-3xl font-bold">Log New problem</div>
-	<TextareaField
-		title="Title"
-		bind:value={tldr}
-		errorText={errors.tldr}
-		options={{
-			placeholder: 'Enter a brief description (max 140 characters)',
-			style: 'height: 60px;'
-		}}
-	/>
-	<TextareaField
-		title="Description"
-		bind:value={para}
-		errorText={errors.para}
-		options={{
-			placeholder: 'Enter a detailed description (max 560 characters)',
-			style: 'height: 180px;'
-		}}
-	/>
-	<TextareaField
-		title="One page describing the problem"
-		bind:value={page}
-		options={{
-			placeholder: 'Enter one page describing the problem, MAY include markdown',
-			style: 'height: 300px;'
-		}}
-	/>
-	<div>Child status upon creation</div>
-	<RadioGroup.Root bind:value={child_status} class="flex">
-		<div class="flex items-center space-x-2">
-			<RadioGroup.Item value="rfm" id="r1" />
-			<Label for="r1">RFM</Label>
-		</div>
-		<div class="flex items-center space-x-2">
-			<RadioGroup.Item value="open" id="r2" />
-			<Label for="r2">Open</Label>
-		</div>
-		<RadioGroup.Input name="spacing" />
-	</RadioGroup.Root>
-	{#if $currentUser}
-		<Button
-			disabled={!tldr || !para || !isValid || isPublishing}
-			on:click={() => publish($ndk)}
-			type="submit"
-		>
-			{isPublishing ? 'Publishing...' : 'Publish'}
-		</Button>
-	{:else}
-		<Login />
-	{/if}
-</div>
+<LogNewProblemLayout>
+	<div slot="editor">
+		<ScrollArea class="h-[calc(100vh-64px)]">
+			<div class="flex flex-col justify-start gap-2 p-4">
+				<div class="text-3xl font-bold">Log New problem</div>
+				<TextareaField
+					title="Title"
+					bind:value={tldr}
+					errorText={errors.tldr}
+					options={{
+						placeholder: 'Enter a brief description (max 140 characters)',
+						style: 'height: 60px;'
+					}}
+				/>
+				<TextareaField
+					title="Description"
+					bind:value={para}
+					errorText={errors.para}
+					options={{
+						placeholder: 'Enter a detailed description (max 560 characters)',
+						style: 'height: 180px;'
+					}}
+				/>
+				<div>One page describing the problem</div>
+				<MarkdownEditor {carta} bind:value={page} mode="tabs" />
+				<div>Child status upon creation</div>
+				<RadioGroup.Root bind:value={child_status} class="flex">
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="rfm" id="r1" />
+						<Label for="r1">RFM</Label>
+					</div>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="open" id="r2" />
+						<Label for="r2">Open</Label>
+					</div>
+					<RadioGroup.Input name="spacing" />
+				</RadioGroup.Root>
+				{#if $currentUser}
+					<Button
+						disabled={!tldr || !para || !isValid || isPublishing}
+						on:click={() => publish($ndk)}
+						type="submit"
+					>
+						{isPublishing ? 'Publishing...' : 'Publish'}
+					</Button>
+				{:else}
+					<Login />
+				{/if}
+			</div>
+		</ScrollArea>
+	</div>
+	<div slot="preview">
+		<ProblemView {problem} preview />
+	</div>
+</LogNewProblemLayout>