Open
Description
Issue:
Can't resize images after uploading them. Tried multiple times with multiple images (.jpg, .png, .avif, .webp). See below.
Conditions:
- Windows 10
- Chrome Version 131.0.6778.205 (Official Build) (64-bit) & Firefox Version 133.0.3 (64-bit)
- Next.js 15.1.0
- "@blocknote/core": "^0.22.0"
"@blocknote/mantine": "^0.22.0"
"@blocknote/react": "^0.22.0"
"@blocknote/shadcn": "^0.22.0"
Code:
"use client";
import { Doc, Id } from "@/convex/_generated/dataModel";
import { api } from "@/convex/_generated/api";
import { useMutation } from "convex/react";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import "./styles.css";
import { PartialBlock } from "@blocknote/core";
import { useTheme } from "next-themes";
import { useEdgeStore } from "@/lib/edgestore";
function Editor({ document }: { document: Doc<"documents"> }) {
const { resolvedTheme } = useTheme();
const { edgestore } = useEdgeStore();
async function handleUpload(file: File) {
const response = await edgestore.publicFiles.upload({ file });
return response.url;
}
const update = useMutation(api.documents.update);
function onChange(content: string) {
update({
id: document._id,
content,
});
}
const editor = useCreateBlockNote({
initialContent: document.content
? (JSON.parse(document.content) as PartialBlock[])
: [
{
type: "paragraph",
},
],
uploadFile: handleUpload,
});
return (
<BlockNoteView
editor={editor}
onChange={() => onChange(JSON.stringify(editor.document))}
theme={resolvedTheme === "light" ? "light" : "dark"}
data-theming-css-demo
data-changing-font-demo
className="min-h-[170px]"
/>
);
}
export default Editor;
Metadata
Metadata
Assignees
Labels
No labels