draft-js-iframely-plugin

Embed links with iframe.ly into your draft-js editor.

This is a plugin for draft-js-plugins-editor.

Installation

npm install @jimmycode/draft-js-iframely-plugin

Optional In your index.html include the embed.js provided by Iframely. In case of omiting it, it will be included with the first embedded URL.

<script src="//cdn.iframe.ly/embed.js" async></script>

Usage

This plugin embeds URLs in different ways:

1. When pressing Enter in a block where the text is a URL.
2. When pasting a text that is a URL (disabled by default).
3. Intregrating the Embed button with draft-js-side-toolbar-plugin.

import createIframelyPlugin from '@jimmycode/draft-js-iframely-plugin';
const iframelyPlugin = createIframelyPlugin({
  options: {
    apiKey: 'my-api-key'
  }
});
const { EmbedButton } = iframelyPlugin;

Embedder

When integrating the plugin with draft-js-side-toolbar-plugin and clicking the Embed button, it will display a plceholder where you can paste the URL. Pressing Enter will close and embed the URL; but, lose the focus on the editor, pressing ESC or DEL with empty text will close the Embedder.

Configuration

| Param | Default | Description | |----------------|-------------------------------------|-------------------------------------------------------------------------| | theme | Default styles | @jimmycode/draft-js-iframely-plugin/lib/plugin.css | | options | Default behavior | List of options. | | embedderType | 'draft-js-iframely-plugin-embedder' | Type of entity created when inserting the embedder block. | | embedType | 'draft-js-iframely-plugin-embed' | Type of entity created when embedding the URL. | | decorator | - | Empty decorator that returns the same component. (No decorations) | | embedComponent | Default implementation | Provide your own implementation to embed the URL. |

Options

| Option | Default | Description | |----------------|----------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------| | apiKey | (Required) | Iframely API Key. | | placeholder | 'Paste a link to embed content and press Enter' | Text as placeholder for the Embedder. | | handleOnReturn | true | Embed the text when pressing Enter if it is a URL. | | handleOnPaste | false | Embed the pasted text if it is a URL. | | params | { iframe: 1 rel: 'summary', omit_script: true, align: 'center', html5: 1 } | Params to pass in the request. https://iframely.com/docs/parameters | | onRequest | return (await fetch(url)).json() | Function to request the metadata of the URL. It will receive the URL to request and MUST return a JSON, contaning the key 'html'. |

Theming

The plugin ships with a default styling available at this location in the installed package: node_modules/@jimmycode/draft-js-iframely-plugin/lib/plugin.css

Webpack Usage

1. Install Webpack loaders: npm i style-loader css-loader --save-dev
2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list).

module.exports = {
  module: {
    loaders: [
      {
        test: /plugin\.css$/,
        loaders: [
          'style-loader', 'css',
        ]
      }
    ]
  }
};

3. Add the below import line to your component to tell Webpack to inject the style to your component.

import '@jimmycode/draft-js-iframely-plugin/lib/plugin.css';

Example

import React from 'react';
import ReactDOM from 'react-dom';

import Editor from 'draft-js-plugins-editor';
import { EditorState } from 'draft-js';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import BlockTypeSelect from 'draft-js-side-toolbar-plugin/lib/components/BlockTypeSelect';

import createIframelyPlugin from '@jimmycode/draft-js-iframely-plugin';
import 'draft-js-side-toolbar-plugin/lib/plugin.css';
import '@jimmycode/draft-js-iframely-plugin/lib/plugin.css';

const iframelyPlugin = createIframelyPlugin({
  options: {
    apiKey: '<my-api-key>',
    handleOnReturn: true,
    handleOnPaste: true
  }
});
const DefaultBlockTypeSelect = ({ getEditorState, setEditorState, theme }) => (
  <BlockTypeSelect
    getEditorState={getEditorState}
    setEditorState={setEditorState}
    theme={theme}
    structure={[
      iframelyPlugin.EmbedButton
    ]}
  />
);
const sideToolbarPlugin = createSideToolbarPlugin({
  structure: [DefaultBlockTypeSelect],
});
const { SideToolbar } = sideToolbarPlugin;

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };
    this.plugins = [
      sideToolbarPlugin,
      iframelyPlugin
    ];
  }
  
  onChange = (editorState) => {
    this.setState({ editorState });
  }

  render() {
    return (
      <div className="editor">
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={this.plugins}
          placeholder="Tell a story" />
        <SideToolbar />
      </div>
    );
  }
}

ReactDOM.render(<MyEditor />, document.getElementById('root'));

Integration

With other plugins

In this example you can see how integrate the plugin with draft-js-focus-plugin and draft-js-alignment-plugin.

import Editor, { composeDecorators } from 'draft-js-plugins-editor';
import { EditorState } from 'draft-js';

import createFocusPlugin from 'draft-js-focus-plugin';
import createAlignmentPlugin from 'draft-js-alignment-plugin';
import createIframelyPlugin from '@jimmycode/draft-js-iframely-plugin';

import 'draft-js-focus-plugin/lib/plugin.css';
import 'draft-js-alignment-plugin/lib/plugin.css';
import '@jimmycode/draft-js-iframely-plugin/lib/plugin.css';

const focusPlugin = createFocusPlugin();
const alignmentPlugin = createAlignmentPlugin();
const { AlignmentTool } = alignmentPlugin;

const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator
);
const iframelyPlugin = createIframelyPlugin({
  decorator, // Here! - the plugin accepts a decorator.
  options: {
    apiKey: '<my-api-ky>',
    handleOnReturn: true,
    handleOnPaste: true
  }
});

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };
    this.plugins = [
      focusPlugin,
      alignmentPlugin,
      iframelyPlugin
    ];
  }
  
  onChange = (editorState) => {
    this.setState({ editorState });
  }
  
  render() {
    return (
      <div className="editor">
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={this.plugins}
          placeholder="Tell a story" />
        <AlignmentTool />
      </div>
    );
  }
}

ReactDOM.render(<MyEditor />, document.getElementById('root'));

Axios

See how to provide your own implementation to fetch the URL. onRequest Must return a Promise that resolves to a JSON with the metadata.

// npm install axios --save
import axios from 'axios';

const iframelyPlugin = createIframelyPlugin({
  options: {
    apiKey: '<my-api-key>',
    onRequest: (url) => {
      return axios.get(url).then(res => res.data);
    }
  }
});