Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
emilienbidet opened this issue Sep 9, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@emilienbidet
Copy link
Contributor

emilienbidet commented Sep 9, 2024

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 emilienbidet added the bug Something isn't working label Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant