@metageeks.tech/meta-embed

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:

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

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

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)

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)

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