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

A Tiptap extension for hydrating Figma links.
https://github.com/haydenbleasel/tiptap-extension-figma

design embed extension figma tiptap

Last synced: 2 months ago
JSON representation

A Tiptap extension for hydrating Figma links.

• Host: GitHub
• URL: https://github.com/haydenbleasel/tiptap-extension-figma
• Owner: haydenbleasel
• License: mit
• Created: 2024-08-10T21:29:39.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-02T16:19:24.000Z (3 months ago)
• Last Synced: 2024-09-29T05:41:56.169Z (2 months ago)
• Topics: design, embed, extension, figma, tiptap
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/tiptap-extension-figma
• Size: 208 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• 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-figma
• awesome-tiptap - tiptap-extension-figma

README

        
# tiptap-extension-figma

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

![tiptap-extension-figma](/sample.png)

A [Tiptap](https://tiptap.dev/) extension for hydrating Figma designs in a TipTap document. It uses Figma's [Live Embed Kit](https://www.figma.com/developers/embed) to take matching URLs and render them in the editor as an iframe.

## Installation

```bash

pnpm add tiptap-extension-figma

```

## Usage

### Client

```ts

import { Figma } from 'tiptap-extension-figma';

const editor = new Editor({

  extensions: [Figma],

});

```

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

```css

.ProseMirror iframe[src*="figma.com"] {

  @apply w-full aspect-[4/3] shadow-sm my-8 rounded-md overflow-hidden;

}

.ProseMirror iframe[src*="figma.com"].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 { Figma } from 'tiptap-extension-figma/server';

const editor = new Editor({

  extensions: [Figma],

});

```

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