tiptap-extension-iframely

A Tiptap extension for adding embedded content with Iframely.

Installation

bun 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.