Can't resize images

[gemmahs]

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;

[YousefED]

Do you get any errors? What browser + OS are you using?

[gemmahs]

Do you get any errors? What browser + OS are you using?

I'm using Chrome Version 131.0.6778.205 (Official Build) (64-bit) on Windows 10.

Also tried on Firefox Version 133.0.3 (64-bit) on Windows 10, still has the same issue.

No particular warning or error in terms of the image.

[gemmahs]

Do you get any errors? What browser + OS are you using?

I think the issue probably lies in the Sidebar component of Shadcn, because when I take the editor out of the SidebarInset wrapper, the images are resizable again. Not sure which parts collide though. I'll post here if I figure out.

[mks2122]

is there any fix for this? i am not using the shadcn, but still i cannot resize it.

[gemmahs]

is there any fix for this? i am not using the shadcn, but still i cannot resize it.

still looking into it... Can you elaborate a bit about your case? Are you putting the editor inside another UI component?

[gemmahs]

In a resizable image wrapper, there is an attribute called data-preview-width, which changes accordingly as I resize the image (so as the width of the image): However, in a non resizable image, this data attribute doesn't exist, and the image width in the inline css style stays 512px however I try to resize it: And here's how an image is stored in the database: [{ "id":"126fb018-1c79-4d03-af69-017461aeb074", "type":"image", "props":{ "backgroundColor":"default", "textAlignment":"left", "name":"85da7809-90aa-4cf3-91a4-d49d4e3784f0.jpg", "url":"https://files.edgestore.dev/c9d40zifjot7pb94/publicFiles/_public/85da7809-90aa-4cf3-91a4-d49d4e3784f0.jpg", "caption":"", "showPreview":true, "previewWidth":512}, "children":[] }] I feel like the issue may lie in "previewWidth":512, but I can't find more details from the docs.

[matthewlipski]

Hi @gemmahs, did you ever manage to find a solution to this? I tried creating a minimal example:

export default function Home() {
  const editor = useCreateBlockNote({
    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY
  });

  return (
    <SidebarProvider>
      <Sidebar style={{width: "100vw"}}>
        <SidebarInset>
          <SidebarContent>
            <SidebarGroup>
              <BlockNoteView
                editor={editor}
                data-theming-css-demo
                data-changing-font-demo
                className="min-h-[170px]"
              />
            </SidebarGroup>
          </SidebarContent>
        </SidebarInset>
      </Sidebar>
    </SidebarProvider>
  );
}

based on your code in NextJS 15 in Chrome on BlockNote 0.35.0, but couldn't reproduce the issue.