Excalidraw , insertExcalidraw() is not creating the Excalidraw node according to Excalidraw Props

[hkkvo]

Description

I'm trying to insert the custom Excalidraw node into Editor, using insertExcalidraw() by passing relevant Excalidraw Props https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/,

Even though I'm passing proper Excalidraw Props, default Excalidraw is getting inserted into editor

Steps to Reproduce

// 1. Excalidraw Props according into Excalidraw  website

  const excalidrawProps = {
    key: ELEMENT_EXCALIDRAW,
    initialData: {
      appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },
      scrollToContent: true,
    },
  };
  



// 2. Inserting Excalidraw node into Editor
  
   <ToolbarButton
                onClick={async () => {
                  await insertExcalidraw(editor, excalidrawProps, {});
                }}
              >
    <Icons.excalidraw />
    </ToolbarButton>
              

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[hkkvo]

I found the props which is passed to excalidraw in Plate.js playground

apps/www/src/lib/plate/demo/values/excalidrawInitialData.ts

which is

data: {
      elements: [
        {
          type: "rectangle",
          version: 141,
          versionNonce: 361_174_001,
          isDeleted: false,
          id: "oDVXy8D6rom3H1-LLH2-f",
          fillStyle: "hachure",
          strokeWidth: 1,
          strokeStyle: "solid",
          roughness: 1,
          opacity: 100,
          angle: 0,
          x: 100.503_906_25,
          y: 93.675_781_25,
          strokeColor: "#000000",
          backgroundColor: "transparent",
          width: 186.472_656_25,
          height: 141.976_562_5,
          seed: 1_968_410_350,
          groupIds: [],
        },
        {
          id: "-xMIs_0jIFqvpx-R9UnaG",
          type: "ellipse",
          x: 300.570_312_5,
          y: 190.691_406_25,
          width: 198.218_75,
          height: 129.511_718_75,
          angle: 0,
          strokeColor: "#000000",
          backgroundColor: "transparent",
          fillStyle: "hachure",
          strokeWidth: 1,
          strokeStyle: "solid",
          roughness: 1,
          opacity: 100,
          groupIds: [],
          seed: 957_947_807,
          version: 47,
          versionNonce: 1_128_618_623,
          isDeleted: false,
        },
      ],
      state: {
        viewBackgroundColor: "#AFEEEE",
        currentItemFontFamily: 1,
        zenModeEnabled: true,
      },
      scrollToContent: false,
    }

There is a mismatch in props name between the @excalidraw/excalidraw and @udecode/plate-excalidraw

upon closer inspection I found, @udecode/plate-excalidraw plugin uses 0.16.1 version of the

@excalidraw/excalidraw but current version of @excalidraw/excalidraw is 0.17.3

Is there any possibility to update the current version of @excalidraw/excalidraw in @udecode/plate-excalidraw

[zbeyens]

PR's welcome

[dylans]

We have a fix for this, will contribute next week.