From 34d272d8d17086c4506e4e8f879b9fec4f889c1b Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Fri, 27 Sep 2024 09:42:14 -0500
Subject: [PATCH] Add /new/review page route

---
 src/lib/components/Preview.svelte  | 19 +++++++++---------
 src/lib/parser.ts                  | 21 +++++++++++++++++++-
 src/routes/new/edit/+page.svelte   | 32 ++++++++++++++++++++++--------
 src/routes/new/edit/+page.ts       |  0
 src/routes/new/review/+page.svelte | 14 +++++++++++++
 5 files changed, 68 insertions(+), 18 deletions(-)
 delete mode 100644 src/routes/new/edit/+page.ts
 create mode 100644 src/routes/new/review/+page.svelte

diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte
index 27cde4f..5fc2b3e 100644
--- a/src/lib/components/Preview.svelte
+++ b/src/lib/components/Preview.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-  import Pharos from "$lib/parser";
+  import { parser } from "$lib/parser";
   import { Heading, P } from "flowbite-svelte";
 
   export let sectionClass: string = '';
 
-  export let parser: Pharos;
   export let rootIndexId: string;
   export let depth: number = 0;
+  export let allowEditing: boolean = false;
+  // TODO: Add editing functionality.
 
-  const title = parser.getIndexTitle(rootIndexId);
-  const orderedChildren = parser.getOrderedChildIds(rootIndexId);
-  const childIndices = parser.getChildIndexIds(rootIndexId);
-  const childZettels = parser.getChildZettelIds(rootIndexId);
+  const title = $parser.getIndexTitle(rootIndexId);
+  const orderedChildren = $parser.getOrderedChildIds(rootIndexId);
+  const childIndices = $parser.getChildIndexIds(rootIndexId);
+  const childZettels = $parser.getChildZettelIds(rootIndexId);
 
   const getHeadingTag = (depth: number) => {
     switch (depth) {
@@ -34,16 +35,16 @@
     <Heading tag={getHeadingTag(depth)} class='h-leather'>{title}</Heading>
     {#each orderedChildren as id, index}
       {#if childIndices.includes(id)}
-        <svelte:self {parser} rootIndexId={id} depth={depth + 1} />
+        <svelte:self {$parser} rootIndexId={id} depth={depth + 1} />
       {:else if (childZettels.includes(id))}
         <P class='note-leather' firstupper={index === 0}>
-          {@html parser.getContent(id)}
+          {@html $parser.getContent(id)}
         </P>
       {/if}
     {/each}
   {:else}
     <P class='note-leather' firstupper>
-      {@html parser.getContent(rootIndexId)}
+      {@html $parser.getContent(rootIndexId)}
     </P>
   {/if}
 </section>
\ No newline at end of file
diff --git a/src/lib/parser.ts b/src/lib/parser.ts
index 3e710f2..44d80cc 100644
--- a/src/lib/parser.ts
+++ b/src/lib/parser.ts
@@ -1,4 +1,5 @@
 import NDK, { NDKEvent } from '@nostr-dev-kit/ndk';
+import { getNdkInstance } from './ndk';
 import asciidoctor, {
   AbstractBlock,
   AbstractNode,
@@ -10,6 +11,7 @@ import asciidoctor, {
   type ProcessorOptions
 } from 'asciidoctor';
 import he from 'he';
+import { writable, type Writable } from 'svelte/store';
 
 interface IndexMetadata {
   authors?: string[];
@@ -192,6 +194,21 @@ export default class Pharos {
     return block.convert();
   }
 
+  /**
+   * Resets the parser to its initial state, removing any parsed data.
+   */
+  reset(): void {
+    this.blockCounter = 0;
+    this.html = undefined;
+    this.rootNodeId = undefined;
+    this.rootIndexId = undefined;
+    this.rootIndexMetadata = {};
+    this.nodes.clear();
+    this.eventToKindMap.clear();
+    this.indexToChildEventsMap.clear();
+    this.eventIds.clear();
+  }
+
   // #endregion
 
   // #region Tree Processor Extensions
@@ -499,4 +516,6 @@ export default class Pharos {
   // TODO: Add search-based wikilink resolution.
 
   // #endregion
-}
\ No newline at end of file
+}
+
+export const parser: Writable<Pharos> = writable(new Pharos(getNdkInstance()));
diff --git a/src/routes/new/edit/+page.svelte b/src/routes/new/edit/+page.svelte
index 8bd26d2..9362888 100644
--- a/src/routes/new/edit/+page.svelte
+++ b/src/routes/new/edit/+page.svelte
@@ -1,30 +1,40 @@
 <script lang="ts">
   import { Button, Heading, Textarea, Toolbar, ToolbarButton, Tooltip } from "flowbite-svelte";
-  import { CodeOutline, EyeSolid } from "flowbite-svelte-icons";
+  import { CodeOutline, EyeSolid, PaperPlaneOutline } from "flowbite-svelte-icons";
   import { editorText } from "$lib/stores";
   import Preview from "$lib/components/Preview.svelte";
-  import Pharos from "$lib/parser";
+  import Pharos, { parser } from "$lib/parser";
   import { ndk } from "$lib/ndk";
+  import { goto } from "$app/navigation";
+
+  // TODO: Prompt user to sign in before editing.
 
-  let parser: Pharos;
   let isEditing: boolean = true;
 
-  $: rootIndexId = parser?.getRootIndexId();
+  $parser = new Pharos($ndk);
+
+  $: rootIndexId = $parser?.getRootIndexId();
 
   const showPreview = () => {
-    parser = new Pharos($ndk);
-    parser.parse($editorText);
+    $parser.reset();
+    $parser.parse($editorText);
     isEditing = false;
   };
 
   const hidePreview = () => {
     isEditing = true;
   };
+
+  const prepareReview = () => {
+    $parser.reset();
+    $parser.parse($editorText);
+    goto('/new/review');
+  }
 </script>
 
 <div class='w-full flex justify-center'>
   <main class='main-leather flex flex-col space-y-4 max-w-2xl w-full mt-4 mb-4'>
-    <Heading tag='h1' class='h-leather mb-2'>New Article</Heading>
+    <Heading tag='h1' class='h-leather mb-2'>Edit</Heading>
     {#if isEditing}
       <form>
         <Textarea
@@ -38,6 +48,9 @@
             <ToolbarButton name='Preview' on:click={showPreview}>
               <EyeSolid class='w-6 h-6' />
             </ToolbarButton>
+            <ToolbarButton name='Review' slot='end'>
+              <PaperPlaneOutline class='w=6 h-6 rotate-90' on:click={prepareReview} />
+            </ToolbarButton>
           </Toolbar>
         </Textarea>
       </form>
@@ -47,9 +60,12 @@
           <ToolbarButton name='Edit' on:click={hidePreview}>
             <CodeOutline class='w-6 h-6' />
           </ToolbarButton>
+          <ToolbarButton name='Review' slot='end'>
+            <PaperPlaneOutline class='w=6 h-6 rotate-90' on:click={prepareReview} />
+          </ToolbarButton>
         </Toolbar>
         {#if rootIndexId}
-          <Preview sectionClass='m-2' {parser} {rootIndexId} />
+          <Preview sectionClass='m-2' {rootIndexId} />
         {/if}
       </form>
     {/if}
diff --git a/src/routes/new/edit/+page.ts b/src/routes/new/edit/+page.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes/new/review/+page.svelte b/src/routes/new/review/+page.svelte
new file mode 100644
index 0000000..8f879cf
--- /dev/null
+++ b/src/routes/new/review/+page.svelte
@@ -0,0 +1,14 @@
+<script lang='ts'>
+  import Preview from "$lib/components/Preview.svelte";
+  import { parser } from "$lib/parser";
+  import { Heading } from "flowbite-svelte";
+
+  
+</script>
+
+<div class='w-full flex justify-center'>
+  <main class='main-leather flex flex-col space-y-4 max-w-2xl w-full mt-4 mb-4'>
+    <Heading tag='h1' class='h-leather mb-2'>Review</Heading>
+    <Preview rootIndexId={$parser.getRootIndexId()} allowEditing={true} />
+  </main>
+</div>