plate icon indicating copy to clipboard operation
plate copied to clipboard

Regression: parsers.html.deserializer.parse don't accept async function

Open emilienbidet opened this issue 1 year ago • 0 comments

Description

Before with the deserializeHtml.getNode function we could return a async function.

But now parsers.html.deserializer.parse only accept sync function.

Reproduction URL

No response

Reproduction steps

I'm building a custom image plugin based on the platejs plugin.

A image plugin that only support image uploading. I need to handle pasting image.

import { withImageUpload } from "./with-image-upload";
import type { Image } from "@/database/types";
import {
  type PluginConfig,
  type TElement,
  createTSlatePlugin,
} from "@udecode/plate-common";

export interface TImageElement extends TElement {
  image: Image;
}

export type ImageConfig = PluginConfig<
  "img",
  {
    /**
     * Method that will upload the image to a server.
     * The method receives the file of the uploaded image, and should return the uploaded image.
     */
    uploadImage?: (file: File) => Promise<Image>;

    /**
     * Method that will delete the image from a server.
     * The method receives the id of the image to delete.
     */
    deleteImage?: (imageId: string) => Promise<void>;
  }
>;

export const ImagePlugin = createTSlatePlugin<ImageConfig>({
  extendEditor: withImageUpload,
  key: "img",
  node: { isElement: true, isVoid: true },
}).extend(({ plugin }) => ({
  parsers: {
    html: {
      deserializer: {
        parse: async ({ element, getOptions }) => {
          const uploadImage = getOptions().uploadImage;

          if (!uploadImage) return;

          const src = element.getAttribute("src");
          const alt = element.getAttribute("alt");

          if (!src) return;

          const response = await fetch(src);
          const blob = await response.blob();

          const name = src.split("/").pop() || "image";

          const file = new File([blob], name);

          const image = await uploadImage(file);

          return {
            type: plugin.node.type,
            image,
          };
        },
        rules: [
          {
            validNodeName: "IMG",
          },
        ],
      },
    },
  },
}));

Plate version

^37.0.0

Slate React version

^37.0.0

Screenshots

No response

Logs

No response

Browsers

No response

Funding

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

emilienbidet avatar Sep 09 '24 08:09 emilienbidet