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 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.
Usage
This plugin embeds URLs in different ways:
- When pressing Enter in a block where the text is a URL.
- When pasting a text that is a URL (disabled by default).
- Intregrating the Embed button with
draft-js-side-toolbar-plugin
.
;const iframelyPlugin = ;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 | 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. |
placehoder | '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/draft-js-image-plugin/lib/plugin.css
Webpack Usage
- Install Webpack loaders:
npm i style-loader css-loader --save-dev
- 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).
moduleexports = module: loaders: test: /plugin\.css$/ loaders: 'style-loader' 'css' ;
- Add the below import line to your component to tell Webpack to inject the style to your component.
;
Example
;; ;;;; ;;; const iframelyPlugin = ;const DefaultBlockTypeSelect = <BlockTypeSelect getEditorState=getEditorState setEditorState=setEditorState theme=theme structure= iframelyPluginEmbedButton />;const sideToolbarPlugin = ;const SideToolbar = sideToolbarPlugin; Component { superprops; thisstate = editorState: EditorState ; thisplugins = sideToolbarPlugin iframelyPlugin ; } { this; } { return <div className="editor"> <Editor editorState=thisstateeditorState onChange=thisonChange plugins=thisplugins placeholder="Tell a story" /> <SideToolbar /> </div> ; } ReactDOM;
Integration
With other plugins
In this example you can see how integrate the plugin with draft-js-focus-plugin
and draft-js-alignment-plugin
.
;; ;;; ;;; const focusPlugin = ;const alignmentPlugin = ;const AlignmentTool = alignmentPlugin; const decorator = ;const iframelyPlugin = ; Component { superprops; thisstate = editorState: EditorState ; thisplugins = focusPlugin alignmentPlugin iframelyPlugin ; } { this; } { return <div className="editor"> <Editor editorState=thisstateeditorState onChange=thisonChange plugins=thisplugins placeholder="Tell a story" /> <AlignmentTool /> </div> ; } ReactDOM;
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; const iframelyPlugin = ;