npm package: @metageeks.tech/meta-embed
Description: This package provides a plugin for TinyMCE that allows users to insert embedded content from an url. The plugin fetches oEmbed data and inserts the corresponding HTML into the editor.
Author: Nitin Rawat
Latest version: 1.0.1

# meta-embed

This package provides a plugin for TinyMCE that allows users to insert embedded content from an url. The plugin fetches oEmbed data and inserts the corresponding HTML into the editor.

## Installation

To use this plugin in your Next.js application, first install the package:

```bash
npm i @metageeks.tech/meta-embed
```

## Setup and Usage

### 1. Configure the API Route

Set up an API route to handle requests for the TinyMCE plugin and oEmbed data. Create a new API route file in your Next.js application, for example, `/app/api/embed/route.ts` (You can have any route of your choice):

```typescript
import { setupEmbedPlugin } from '@metageeks.tech/meta-embed';
import { NextRequest } from 'next/server';

const embedPluginHandler = setupEmbedPlugin();

export async function GET(req: NextRequest) {
  return embedPluginHandler(req);
}
```

### 2. Initialize the Plugin in TinyMCE

In your TinyMCE editor component, provide the plugin URL in the `external_plugins` configuration. Additionally, delegate the `requestType` query parameter as 'plugin':

```tsx
import { Editor } from '@tinymce/tinymce-react';

export default function MyEditor() {
  return (
    <Editor
      apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
      init={{
        external_plugins: {
          // Provide the api route set above
          embed: "/api/embed?requestType=plugin",
        },
        // Add the embed plugin to toolbar
        toolbar: 'embed',
        ...
      }}
    />
  );
}
```

### 3. Using the Plugin

Once integrated, the plugin adds an **Embed** button to the TinyMCE toolbar and menu. Clicking this button opens a dialog where users can enter a URL. The plugin fetches oEmbed data for the URL and inserts the corresponding content into the editor.


## Example Configuration

Here’s an example directory structure for integrating this package:

```
/app
  /api
    /embed
      route.ts
/components
  MyEditor.tsx
```

### API Route (`/app/api/embed/route.ts`)

```typescript
import { setupEmbedPlugin } from '@metageeks.tech/meta-embed';
import { NextRequest } from 'next/server';

const embedPluginHandler = setupEmbedPlugin();

export async function GET(req: NextRequest) {
  return embedPluginHandler(req);
}
```

### Editor Component (`/components/MyEditor.tsx`)

```tsx
import { Editor } from '@tinymce/tinymce-react';

export default function MyEditor() {
  return (
    <Editor
      apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
      init={{
        external_plugins: {
          // Provide the api route set above
          embed: "/api/embed?requestType=plugin",
        },
        // Add the embed plugin to toolbar
        toolbar: 'embed',
        ...
      }}
    />
  );
}
```

## Dependencies

- `next`: For building the API routes.
- `@extractus/oembed-extractor`: To fetch oEmbed data from URLs.

## License

This package is licensed under the MIT License. See the [LICENSE](./LICENSE) file for more details.

## Contributing

Contributions are welcome! Feel free to submit a pull request or open an issue if you encounter any bugs or have feature requests.

## Support

If you have questions or need help, please open an issue on the GitHub repository.