Introduction

The prosemirror-link-preview plugin adds Discord and Slack like link previews to your Prosemirror editor. The plugin catches pasted links and renders a preview automatically. Follow along to learn more about the plugin and how to use it in your project.

Features

1. Dynamic Link Previews: Whenever a valid URL is pasted into a ProseMirror document, the plugin automatically calls your callback function that fetches the necessary metadata, and the plugin renders a preview, providing a quick glimpse into the content behind the link.

2. Rich Preview Styles: By default the plugin creates a preview that resembles the style of most social media platforms link sharing cards. It makes it easier to differentiate between regular text and linked content. The preview includes information such as the title, description, and an image associated with the link, where available based on Open Graph metadata.

3. Configurable Behavior: The plugin provides configuration options, allowing users to customize the behavior and appearance of link previews according to their specific needs. From adjusting the preview size to defining custom CSS styles, the plugin offers flexibility to match the desired editing environment.

Caveat

Because of CORS you can't fetch the link preview from the client directly. You need to have a custom backend that will fetch the link preview for you. You either use payed OpenGraph fetcher API or use link-preview-js library on your backend to do this. In this article we will use link-preview-js with Next.js API to do this. Since the Next.js API is very similar to Express.js, you can just copy and paste the code to Express.js servers as well.

How to use it

You can check out the docs at https://github.com/emergence-engineering/prosemirror-link-preview/tree/main