tiptap-extension-iframely

A Tiptap extension for adding embedded content with Iframely.

Installation

pnpm add tiptap-extension-iframely

Usage

Client

First, add Iframely's embedjs to your project e.g.

<script async src="//cdn.iframe.ly/embed.js?api_key={API_KEY}"></script>

Then, add the extension to your editor:

import { Iframely } from 'tiptap-extension-iframely';

const editor = new Editor({
  extensions: [Iframely],
});

Once it's installed, you can add a new Iframely node with:

const src = ''; // The URL you want to embed!

editor
  .chain()
  .focus()
  .deleteRange(range)
  .setIframelyEmbed({ src })
  .run();

I also recommend adding the following Tailwind CSS to your project:

.node-iframely.ProseMirror-selectednode {
  @apply ring ring-primary;
}

Server

If you are running this in a headless environment, you can use the Server extension instead:

import { Iframely } from 'tiptap-extension-iframely/server';

const editor = new Editor({
  extensions: [Iframely],
});

This Node doesn't render anything in the editor, but it stop the Editor from crashing when it encounters a Node with the name iframely.