save button

2025-02-19 19:34:35 +01:00
parent a473e4b863
commit 5c86b67870
3 changed files with 127 additions and 74 deletions
--- a/frontend/app/(auth)/dashboard/blogs/new/editor.tsx
+++ b/frontend/app/(auth)/dashboard/blogs/new/editor.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import {
+	MDXEditor,
+	toolbarPlugin,
+	headingsPlugin,
+	listsPlugin,
+	quotePlugin,
+	thematicBreakPlugin,
+	markdownShortcutPlugin,
+	BoldItalicUnderlineToggles,
+	ListsToggle,
+	BoldItalicUnderlineTogglesProps,
+	MDXEditorProps,
+	UndoRedo,
+	InsertImage,
+	CreateLink
+} from "@mdxeditor/editor";
+import DOMPurify from "isomorphic-dompurify";
+import { Button } from "@/components/ui/button";
+import useApiMutation from "@/hooks/use-api";
+
+export default function Editor() {
+	const [blogContent, setBlogContent] = useState("");
+	const [cursor, setCursor] = useState<{ line: number; column: number }>({
+		line: 0,
+		column: 0,
+	});
+
+	const getCursorPosition = (newText: string) => {
+		const cursorPos = newText.length;
+		const lines = newText.substring(0, cursorPos).split("\n");
+		const line = lines.length; // Current line number
+		const column = lines[lines.length - 1].length + 1; // Current column number
+
+		setCursor({ line, column });
+	};
+
+	const sanitized = DOMPurify.sanitize(blogContent);
+	const propsa: BoldItalicUnderlineTogglesProps = { options: ["Bold", "Italic", "Underline"] }
+	const mdxEditorProps: MDXEditorProps = {}
+
+	const {
+		trigger,
+		isMutating: loading,
+		isSuccess,
+	} = useApiMutation(
+		"/blog/new",
+		undefined,
+		"POST",
+		false,
+		true,
+	);
+
+	return (
+		<section className="m-10">
+			<div className="flex">
+				<div className="flex-1">
+					<MDXEditor
+						plugins={[
+							headingsPlugin(),
+							listsPlugin(),
+							quotePlugin(),
+							thematicBreakPlugin(),
+							markdownShortcutPlugin(),
+							toolbarPlugin({
+								toolbarContents: () => (
+									<div className="flex flex-row">
+										<UndoRedo />
+										<BoldItalicUnderlineToggles {...propsa} />
+										<InsertImage />
+										<CreateLink />
+										<ListsToggle />
+									</div>
+								),
+							}),
+						]}
+						onChange={setBlogContent}
+						onBlur={() => getCursorPosition(blogContent)}
+						markdown="ok"
+					/>
+
+					<div>
+						Line: {cursor.line}; Column: {cursor.column}
+					</div>
+				</div>
+
+				<div
+					className="mt-4 w-1/2 p-2 bg-gray-100 border rounded-md text-sm text-black"
+					dangerouslySetInnerHTML={{
+						__html: sanitized,
+					}}
+				/>
+			</div>
+
+			<Button className="text-black bg-white" onClick={async () => {
+				try {
+					const res = await trigger({
+						label: "This is my label",
+						summary: "A summary",
+						image: "none",
+						href: "none",
+						blogID: "id",
+						slug: "myslug",
+						content: blogContent,
+						published: "",
+					});
+					if (!res) throw new Error("The server hasn't responded.");
+					if (res.status === "Error") throw new Error(res.message);
+					if (res.data) console.log(res.data);
+					return res;
+				} catch (error: any) {
+					throw new Error(error.message);
+				}
+			}}>Sauvegarder</Button>
+		</section >
+	);
+}
+