https://github.com/haydenbleasel/tiptap-extension-iframely

A Tiptap extension for adding embedded content with Iframely.
https://github.com/haydenbleasel/tiptap-extension-iframely

embedjs extension iframely tiptap

Last synced: 2 months ago
JSON representation

A Tiptap extension for adding embedded content with Iframely.

• Host: GitHub
• URL: https://github.com/haydenbleasel/tiptap-extension-iframely
• Owner: haydenbleasel
• License: mit
• Created: 2024-08-17T18:31:13.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-04-01T16:36:58.000Z (3 months ago)
• Last Synced: 2025-04-01T17:46:29.616Z (3 months ago)
• Topics: embedjs, extension, iframely, tiptap
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/tiptap-extension-iframely
• Size: 219 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-tiptap - tiptap-extension-iframely
• awesome-tiptap - tiptap-extension-iframely

README

        
# tiptap-extension-iframely

[![Version](https://img.shields.io/npm/v/tiptap-extension-iframely.svg)](https://www.npmjs.org/package/tiptap-extension-iframely) [![Build Status](https://github.com/haydenbleasel/tiptap-extension-iframely/actions/workflows/push.yml/badge.svg?branch=main)](https://github.com/haydenbleasel/tiptap-extension-iframely/actions?query=branch%3Amain)

A [Tiptap](https://tiptap.dev/) extension for adding embedded content with Iframely.

## Installation

```bash

pnpm add tiptap-extension-iframely

```

## Usage

### Client

First, add Iframely's [embedjs](https://iframely.com/docs/embedjs) to your project e.g.

```html

```

Then, add the extension to your editor:

```ts

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

const editor = new Editor({

  extensions: [Iframely],

});

```

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

```ts

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:

```css

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

```ts

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