diff --git a/frontend/app/(auth)/dashboard/blogs/new/page.tsx b/frontend/app/(auth)/dashboard/blogs/new/page.tsx index a1aa279..3c0826a 100644 --- a/frontend/app/(auth)/dashboard/blogs/new/page.tsx +++ b/frontend/app/(auth)/dashboard/blogs/new/page.tsx @@ -1,144 +1,77 @@ + "use client"; -import { Textarea } from "@/components/ui/textarea"; -import { useEffect, useRef, useState } from "react"; -import { marked } from "marked"; -import DOMPurify from "isomorphic-dompurify"; +import { useEffect, useState, useRef } from "react"; import { Button } from "@/components/ui/button"; import { Bold, Italic, Strikethrough, Underline } from "lucide-react"; - -enum Command { - Italic = "*", - Bold = "**", - Strikethrough = "~~", - Underline = "__", -} +import { MDXEditor } from "@mdxeditor/editor"; // Assuming react-mdx-editor or similar +import DOMPurify from "isomorphic-dompurify"; export default function NewBlog() { - const ref = useRef(null); - const [text, setText] = useState(""); - const [cursor, setCursor] = useState<{ line: number; column: number }>({ - line: 0, - column: 0, - }); - const [selection, setSelection] = useState<{ - start: number; - end: number; - } | null>(null); + const [text, setText] = useState(""); + const [cursor, setCursor] = useState<{ line: number; column: number }>({ + line: 0, + column: 0, + }); - const getCursorPosition = ( - event: React.ChangeEvent, - ) => { - const textarea = event.target; - const text = textarea.value; - const cursorPos = textarea.selectionStart; + // Function to update the cursor position + 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 - const lines = text.substring(0, cursorPos).split("\n"); - const line = lines.length; // Current line number (1-based) - const column = lines[lines.length - 1].length + 1; // Current column (1-based) + setCursor({ line, column }); + }; - setCursor({ line, column }); - }; + const execCommand = (command: string) => { + const pre = text.slice(0, cursor.column); + const post = text.slice(cursor.column); - const onSelect = (event: React.ChangeEvent) => { - const { selectionStart, selectionEnd } = event.currentTarget; - if (selectionStart === selectionEnd) return; + setText(pre + command + post); + getCursorPosition(pre + command + post); // Update cursor position after change + }; - setSelection({ start: selectionStart, end: selectionEnd }); - }; + // Sanitize the MDX text before rendering + const sanitized = DOMPurify.sanitize(text); - useEffect(() => { - setSelection(null); - }, [text]); - - const moveCursor = (newPos: number) => { - if (!ref.current) return; - ref.current.selectionEnd = newPos; - ref.current.focus(); - }; - - const execCommand = (command: Command, symetry: boolean = true) => { - if (selection) { - const selectedText = text.substring(selection.start, selection.end); - const pre = text.slice(0, selection.start); - const post = text.slice(selection.end); - const newSelectedText = `${command}${selectedText}${symetry ? command : ""}`; - setText(pre + newSelectedText + post); - return; - } - - const pre = text.slice(0, cursor.column); - const post = text.slice(cursor.column); - - if (!symetry) setText(pre + command + post); - else { - const t = pre + command + command + post; - setText(t); - } - console.log(pre.length + command.length); - moveCursor(cursor.column + 2); - }; - - const sanitized = DOMPurify.sanitize(marked(text, { async: false })); - - return ( -
-
-
- - - - - {/* */} -
-