From 5f289a893921fae6d72dd3bbbc8106ae9fce1a13 Mon Sep 17 00:00:00 2001 From: Syed Shoeb Date: Sun, 7 Apr 2024 07:05:26 +0530 Subject: [PATCH 1/2] cleaning up unused code and refactoring --- .../common/FormattedMarkdownOutput.tsx | 81 +++++++++---------- 1 file changed, 38 insertions(+), 43 deletions(-) diff --git a/src/app/components/common/FormattedMarkdownOutput.tsx b/src/app/components/common/FormattedMarkdownOutput.tsx index 30f0dd7..d71ed42 100644 --- a/src/app/components/common/FormattedMarkdownOutput.tsx +++ b/src/app/components/common/FormattedMarkdownOutput.tsx @@ -1,10 +1,7 @@ -import { JSONPath } from "jsonpath-plus"; -import { ChangeEvent, useCallback, useEffect, useState } from "react"; -import useDebounce from "@/app/hooks/useDebounce"; -import Selector from "@/app/components/common/Selector"; +import { useCallback, useEffect, useState } from "react"; import { marked } from "marked"; -import * as DOMPurify from 'dompurify'; -import 'github-markdown-css'; +import { sanitize } from "dompurify"; +import "github-markdown-css"; type Props = { input: string; @@ -16,55 +13,53 @@ export default function FormattedMarkdownOutput({ }: Props) { const [output, setOutput] = useState(""); - const formatMarkdown = useCallback( - (input: string) => { - try { - return DOMPurify.sanitize( - marked( - // remove the most common zerowidth characters from the start of the file - input.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/,"") - ) - ) - } catch (e: any) { - if (e instanceof SyntaxError) { - return e.message; - } - } - return ""; - }, [] - ) + const formatMarkdown = useCallback((input: string) => { + try { + return sanitize( + marked( + // remove the most common zerowidth characters from the start of the file + input.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, "") + ) + ); + } catch (e: any) { + if (e instanceof SyntaxError) { + return e.message; + } + } + return ""; + }, []); - useEffect(() =>{ + useEffect(() => { const md = formatMarkdown(input); setOutput(md); - }) + }, [formatMarkdown, input]); return (

{title}:

- - +
-
- 
+      
 {
+  let styleString = "\n";
+  switch (style) {
+    case EMarkdownStyles.Header_1:
+    case EMarkdownStyles.Header_2:
+    case EMarkdownStyles.Header_3:
+    case EMarkdownStyles.Header_4:
+    case EMarkdownStyles.Header_5:
+    case EMarkdownStyles.Header_6:
+      const styleName = style.toString();
+      const fontSize = parseInt(styleName.slice(-1));
+      styleString += "#".repeat(fontSize) + " Header " + fontSize;
+      break;
+    case EMarkdownStyles.Badge:
+      styleString += `[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)`;
+      break;
+    case EMarkdownStyles.Blockquote:
+      styleString += `> Blockquotes`;
+      break;
+    case EMarkdownStyles.Code:
+      styleString += ` \`\`\`\console.log('hello, world!')\`\`\`\ `;
+      break;
+    case EMarkdownStyles.Emphasis:
+      styleString += `**Emphasis**`;
+      break;
+    case EMarkdownStyles.Emphasis_Italic:
+      styleString += `***Emphasis Italic***`;
+      break;
+    case EMarkdownStyles.Image:
+      styleString += `![](https://i0.wp.com/www.globalemancipation.ngo/wp-content/uploads/2017/09/github-logo.png?ssl=1)`;
+      break;
+    case EMarkdownStyles.Italic:
+      styleString += `*Italic*`;
+      break;
+    case EMarkdownStyles.List:
+      styleString += `1. First ordered list item\n2. Second ordered list item\n3. Third ordered list item`;
+      break;
+    case EMarkdownStyles.Subscript:
+      styleString += `H2O`;
+      break;
+    case EMarkdownStyles.Superscript:
+      styleString += `N2`;
+      break;
+    case EMarkdownStyles.Table:
+      styleString += `| Feature | Description |
+|---|---|
+| Headings | Different levels of headings to organize content |
+| Paragraphs | Basic text formatting and indentation |
+| Lists | Ordered and unordered lists for structured content |
+| Links | Internal and external links for navigation |
+| Images | Embedding images to enhance visual appeal |
+| Code blocks | Highlighting code snippets for programming examples |
+| Tables | Presenting data in a structured format |
+| Blockquotes | Quoting text or highlighting important points |
+| Horizontal rules | Separating sections of content |
+| Footnotes | Adding additional information or references |`;
+      break;
+    case EMarkdownStyles.Unordered_List:
+      styleString += `* First unordered list item\n* Second unordered list item\n\t* First subunordered list item\n\t* Second subunordered list item\n* Third unordered list item`;
+      break;
+    default:
+      styleString = "";
+  }
+  return styleString;
+};
 
 export default function JsonValidatorComponent({
   user,
@@ -16,6 +122,14 @@ export default function JsonValidatorComponent({
   isProUser: boolean;
 }) {
   const [output, setOutput] = useState("");
+  const [input, setInput] = useState(initialInput);
+  const [style, setStyle] = useState(EMarkdownStyles.Select);
+
+  useEffect(() => {
+    setOutput(input);
+  }, [input]);
+  const title = "Input:";
+
   // const debouncedOutput = useDebounce(output, 1000);
   // useEffect(() => {
   //   if (debouncedOutput && debouncedOutput !== initialInput) {
@@ -31,12 +145,57 @@ export default function JsonValidatorComponent({
   //   }
   // }, [debouncedOutput]);
 
+  const onSelect = (option: EMarkdownStyles) => {
+    const styleString = getStyleString(option);
+    setStyle(option);
+    setInput((prev) => prev + styleString);
+    setStyle(EMarkdownStyles.Select);
+  };
+
   return (
     

-