Pasting image from `docx` content blocks event loop for 5 seconds

[dimaanj]

Description

Pasting images within docx content blocks event loop for 5 seconds with the following setup.

Setup

Important plugins used:

createDeserializeDocxPlugin(),
createJuicePlugin(),
createMediaEmbedPlugin(),
createImagePlugin()

Where ImagePlugin is custom one which appends url attribute and passing it as props to plate <ImageElement />:

createPluginFactory<ImagePlugin>({
        key: IMAGE_PLUGIN_KEY,
        type: 'image',
        isElement: true,
        isVoid: true,
        component: () => {
            ...
            return <ImageElement { ...props } />
        },
        then: (editor, { type }) => ({
            deserializeHtml: {
                rules: [{ validNodeName: 'IMG' }],
                getNode: (el) => {
                    const url = el.getAttribute('src');
                    return { type, url };
                },
            },
        }),
        ...
})

Steps

1. Copy image or content with image from docx
2. Paste to editor
3. See how nothing happends around 5 seconds in Chrome
4. See valid pasted content in Chrome. FF gives an error related to call stack excess.

Investigation

When <ImageElement /> receives url, it contains base64 data instead of actual url. Under the hood it uses useMedia plate hook which tries to parse base64 image content using parseVideoUrl from default createMediaEmbedPlugin. It takes so much time, due to regex match operation.

https://github.com/udecode/plate/blob/8d90564df76bad63812e8100c2d5a7ad710c1aea/packages/media/src/media/Media.tsx#L30-L41

https://github.com/udecode/plate/blob/8d90564df76bad63812e8100c2d5a7ad710c1aea/packages/media/src/media-embed/createMediaEmbedPlugin.ts#L40-L43

https://github.com/udecode/plate/blob/8d90564df76bad63812e8100c2d5a7ad710c1aea/packages/media/src/video/parseVideoUrl.ts#L10-L12

Expectation

<ImageElement /> should not use video url parser for pasted base64 image. Quick pasting docx content expected.

Funding

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