tiptap icon indicating copy to clipboard operation
tiptap copied to clipboard

How to get the correct typings for EditorView inside addProseMirrorPlugins

Open sebpowell opened this issue 2 years ago • 2 comments

What problem are you facing?

I'm building a plugin that will allow a user to drag and drop an image. My code is pasted below.

What I'd like to know is if there's a way of getting the correct typings for the schema key that's on view.state. Currently, it comes back as any.

How do other people deal with this?

export const EditorPasteEventHandler = Extension.create({
  name: "EditorPasteEventHandler",

  addProseMirrorPlugins() {
    const { editor } = this;

    return [
      new Plugin({
        key: new PluginKey("EditorPasteEventHandler"),
        props: {
          handleDrop(view: EditorView, event: DragEvent) {
            const hasFiles =
              event &&
              event?.dataTransfer?.files &&
              event?.dataTransfer?.files?.length > 0;

            event.preventDefault();

            if (!hasFiles) {
              return true;
            }

            const images = event.dataTransfer.files;

            const { schema } = view.state; 

            const coordinates = view.posAtCoords({
              left: event.clientX,
              top: event.clientY,
            });

            for (let i = 0; i < 2; i++) {
              const src =
                "https://www.gravatar.com/avatar/9ead02fb4ba9d4354ed178f4f50a0550?s=100&d=https%3A%2F%2Fs3.amazonaws.com%2Flaracasts%2Fimages%2Fforum%2Favatars%2Fdefault-avatar-3.png";

              if (src) {
                const node = schema.nodes.image.create({
                  src,
                });

                const transaction = view.state.tr.insert(coordinates.pos, node);

                view.dispatch(transaction);
              }
            }

            return true;
          },
          handlePaste(view, event: ClipboardEvent, slice) {
            const content = event?.clipboardData?.getData("text/plain");

            if (content) {
              const md = new MarkdownIt();

              const html = md.render(content);

              editor.commands.insertContent(html, {
                parseOptions: {
                  preserveWhitespace: false,
                },
              });

              return true;
            }

            return false;
          },
        },
      }),
    ];
  },
});

What’s the solution you would like to see?

Nothing to add here.

What alternatives did you consider?

Nothing to add here.

Anything to add? (optional)

No response

Are you sponsoring us?

  • [ ] Yes, I’m a sponsor. 💖

sebpowell avatar Jun 15 '22 20:06 sebpowell

@sebpowell could you check if this is still happening in the latest version? We updated prosemirror to the latest versions including their typings.

bdbch avatar Jun 22 '22 11:06 bdbch

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

github-actions[bot] avatar Aug 07 '22 00:08 github-actions[bot]