add markdown component

2026-07-31 07:39:04 +02:00 · 2023-01-12 11:56:21 +01:00
parent 8f7092cd72
commit 8db442be0f
8 changed files with 1830 additions and 67 deletions
--- a/app/Markdown.tsx
+++ b/app/Markdown.tsx
@@ -0,0 +1,37 @@
+"use client";
+import PropTypes from "prop-types";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
+
+export default function Markdown({ value }: { value: any }) {
+  return (
+    <ReactMarkdown
+      // eslint-disable-next-line react/no-children-prop
+      children={value}
+      components={{
+        code({ node, inline, className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          return !inline && match ? (
+            <SyntaxHighlighter
+              // eslint-disable-next-line react/no-children-prop
+              children={String(children).replace(/\n$/, "")}
+              style={oneDark}
+              language={match[1]}
+              PreTag="div"
+              {...props}
+            />
+          ) : (
+            <code className={className} {...props}>
+              {children}
+            </code>
+          );
+        },
+      }}
+    />
+  );
+}
+
+Markdown.propTypes = {
+  value: PropTypes.string.isRequired,
+};
--- a/app/admin/articles/create/page.tsx
+++ b/app/admin/articles/create/page.tsx
@@ -1,9 +1,70 @@
+"use client";
+
 import React from "react";

+import { useState, useRef } from "react";
+import styles from "../../../../styles/modules/AdminArticlesCreate.module.scss";
+import { PostArticle } from "../../../../types/postData";
+import Markdown from "../../../Markdown";
+
 export default function AdminArticlesCreate() {
+  const [formData, setFormData] = useState<PostArticle>(null);
+  const [markdown, setMarkdown] = useState<string>("");
+
+  const titleRef = useRef<HTMLInputElement>(null);
+
+  function handleFormChange({ newMarkdownText = markdown }) {
+    setFormData({
+      name: titleRef.current.value.replaceAll(" ", "%20"),
+      title: titleRef.current.value,
+      introduction: "test intro",
+      markdown: markdown,
+      categoryId: 1,
+    });
+
+    setMarkdown(newMarkdownText);
+  }
+
+  async function postData() {
+    console.log(formData);
+    await fetch("/api/articles/create", {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(formData),
+    });
+  }
+
  return (
-    <div>
+    <div className={styles.adminArticlesCreate}>
      <h1>Create a new article</h1>
+      <button
+        type="button"
+        onClick={() => {
+          postData();
+        }}
+      >
+        send
+      </button>
+      <div className={styles.form}>
+        <div className={styles.ContentTable}>contenttable</div>
+
+        <div className={styles.content}>
+          <input
+            onChange={() => {
+              handleFormChange({});
+            }}
+            type="text"
+            name="title"
+            placeholder="title"
+            ref={titleRef}
+          />
+          <textarea></textarea>
+          <Markdown value={markdown} />
+        </div>
+      </div>
    </div>
  );
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,6 +22,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
      <head></head>

      <body className="body">
+        <p>If admin logged in create a small header here app/layout.tsx</p>
        <header>
          <Nav categories={await getCategories()} />
        </header>