diff --git a/src/components/universal/Editor/Blocks/image.tsx b/src/components/universal/Editor/Blocks/image.tsx
new file mode 100644
index 0000000..5053550
--- /dev/null
+++ b/src/components/universal/Editor/Blocks/image.tsx
@@ -0,0 +1,60 @@
+import { DefaultBlockSchema } from "@blocknote/core";
+import { InlineContent, ReactSlashMenuItem, createReactBlockSpec } from "@blocknote/react";
+import { ImageFiles } from "@icon-park/react";
+
+export const ImageBlock = createReactBlockSpec({
+ type: "image",
+ propSchema: {
+ src: {
+ default: "",
+ },
+ alt: {
+ default: "",
+ },
+ },
+ containsInlineContent: false,
+ render: ({ block }) => {
+ return (
+ (
+ (
+ "Insert Image",
+ (editor) => {
+ const src: string | null = prompt("Enter image URL");
+ editor.insertBlocks(
+ [
+ {
+ type: "image",
+ props: {
+ src: src || "https://via.placeholder.com/1000",
+ },
+ },
+ ],
+ editor.getTextCursorPosition().block,
+ "after"
+ );
+ },
+ ["image", "img", "picture", "media"],
+ "Media",
+ = (props) => {
- const [vd, setVd] = useState();
- const isDark = useMedia("(prefers-color-scheme: dark)");
- const [render, setRender] = useState(false);
- const id = getQueryVariable("id");
-
- useEffect(() => {
- if (!render) return;
- setTimeout(() => {
- const vditor = !render
- ? undefined
- : new Vditor("editor", {
- height: props.height || "100%",
- cache: {
- id: id || "temp",
- enable: id ? true : false,
- },
- after: () => {
- setRender(true);
- vditor?.setValue(props.initialValue || "");
- setVd(vditor);
- },
- toolbarConfig: {
- pin: true,
- },
- preview: {
- markdown: {
- toc: true,
- },
- },
- counter: {
- enable: true,
- max: 100000,
- },
- hint: {
- emojiPath:
- "https://cdn.jsdelivr.net/npm/emojify.js/dist/images/basic/",
- },
- icon: "material",
- // upload: {
- // accept: "image/*",
- // url: "/api/upload",
- // filename: (name) => {
- // return Date.now() + name;
- // }
- // },
- theme: isDark ? "dark" : "classic",
- // mode: "ir",
- input: (value) => {
- props.onChange && props.onChange(value);
- },
- });
- }, 1000);
- }, [render, props.initialValue, id]);
-
- useEffect(() => {
- setRender(false);
- vd && vd.destroy();
- setVd(undefined);
- setTimeout(() => {
- setRender(true);
- }, 1000);
- }, [id, window.location.href, isDark]);
+ const [markdown, setMarkdown] = useState(props.initialValue || "");
+ const appSnapshot = useSnapshot(app);
+ const editor: BlockNoteEditor | null = useBlockNote({
+ onEditorReady(editor) {
+ const getBlocks = async () => {
+ const blocks = await editor.markdownToBlocks(markdown);
+ editor.replaceBlocks(editor.topLevelBlocks, blocks);
+ };
+ getBlocks();
+ },
+ onEditorContentChange(editor) {
+ const getMarkdown = async () => {
+ const markdown = await editor.blocksToMarkdown(editor.topLevelBlocks);
+ setMarkdown(markdown);
+ props.onChange && props.onChange(markdown);
+ };
+ getMarkdown();
+ },
+ theme: appSnapshot.theme,
+ blockSchema: {
+ ...defaultBlockSchema,
+ image: ImageBlock,
+ } as any,
+ slashCommands: [...defaultReactSlashMenuItems, insertImage],
+ });
return (
{
+ console.log(value);
+
setData({
...data,
text: value,
diff --git a/src/states/app.ts b/src/states/app.ts
index b6f18be..daaddca 100644
--- a/src/states/app.ts
+++ b/src/states/app.ts
@@ -3,6 +3,7 @@ import { proxy, subscribe } from "valtio";
import { MOG_OFFICIAL_SERVICES } from "@constants/services";
export const app = proxy({
token: null as string | null,
+ theme: "light" as "light" | "dark",
showSidebar: false,
authenticated: false,
// if there is an error, it will be stored here ( just use in init phase )
+ 
+
+ )
+ )
+ },
+});
+
+export const insertImage = new ReactSlashMenuItem
-
);
};
diff --git a/src/pages/Write/index.tsx b/src/pages/Write/index.tsx
index b0218d2..1092452 100644
--- a/src/pages/Write/index.tsx
+++ b/src/pages/Write/index.tsx
@@ -273,8 +273,9 @@ export const EditorPage: BasicPage = () => {
{!loading && (
- {render && }
-
+