121 lines
2.8 KiB
TypeScript
121 lines
2.8 KiB
TypeScript
"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 >
|
|
);
|
|
}
|
|
|