From 34cdc7710c8ce4797321252f0adca54beff60e67 Mon Sep 17 00:00:00 2001
From: IPdotSetAF <ipdotsetaf@gmail.com>
Date: Thu, 14 Nov 2024 10:41:59 +0330
Subject: [PATCH] added markdown preview

---
 .../src/app/md2html/md2html.component.html    | 26 +++++++++++++++++--
 Frontend/src/app/md2html/md2html.component.ts |  1 +
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/app/md2html/md2html.component.html b/Frontend/src/app/md2html/md2html.component.html
index c3768b9..6a7e45c 100644
--- a/Frontend/src/app/md2html/md2html.component.html
+++ b/Frontend/src/app/md2html/md2html.component.html
@@ -14,9 +14,30 @@ <h2>Markdown to HTML Converter</h2>
             <br />
         </div>
         <div class="col-md-6">
-            <label class="form-label">HTML:</label>
+            <div class="d-flex gap-2">
+                <label class="form-label">To:</label>
+                <div class="form-check ">
+                    <input class="form-check-input" type="radio" name="toRadio" id="toPreview" value="preview"
+                        [(ngModel)]="to" (change)="convert()">
+                    <label class="form-check-label" for="toPreview">
+                        Preview
+                    </label>
+                </div>
+                <div class="form-check">
+                    <input class="form-check-input" type="radio" name="toRadio" id="toHtml" value="html"
+                        [(ngModel)]="to" (change)="convert()">
+                    <label class="form-check-label" for="toHtml">
+                        HTML
+                    </label>
+                </div>
+            </div>
             <div class="code-border" [@valueChangeAnim]="status">
+                @if(to==="html"){
                 <code-area innerStyle="min-height:500px;" [(code)]="htmlCode" language="markup" readonly="true" />
+                }
+                @else{
+                <div style="min-height:500px;" [innerHTML]="htmlCode"></div>
+                }
             </div>
             <br />
         </div>
@@ -47,7 +68,8 @@ <h2>Markdown to HTML Converter</h2>
                 Markdown&#39;s syntax includes elements like <code>#</code> for headings, <code>*</code> for lists, and
                 <code>**</code> for bold text, making it intuitive and fast for creating readable, structured content.
                 Its popularity has grown widely, especially in documentation, blogging, and collaborative platforms like
-                GitHub, where simplicity and clarity are key.</p>
+                GitHub, where simplicity and clarity are key.
+            </p>
             <p><strong>Conversion between HTML and Markdown</strong> is common because each serves distinct purposes in
                 different contexts. Converting Markdown to HTML is a straightforward way to take plain text content and
                 render it for the web, making it possible to publish articles, documentation, or blog posts without
diff --git a/Frontend/src/app/md2html/md2html.component.ts b/Frontend/src/app/md2html/md2html.component.ts
index 7fa2d43..294f6f6 100644
--- a/Frontend/src/app/md2html/md2html.component.ts
+++ b/Frontend/src/app/md2html/md2html.component.ts
@@ -30,6 +30,7 @@ export class Md2htmlComponent implements AfterContentInit {
 this is an example :p`;
   protected htmlCode !: string;
   protected status: boolean = false;
+  protected to: string = "preview";
 
   protected inputDebouncer = new Subject<string>();