draft-js-unsplash-plugin
Add Unsplash images in your draft-js editor.
This is a plugin for draft-js-plugins-editor
.
Installation
npm install draft-js-unsplash-plugin
Usage
;const unsplashPlugin = ;const UnsplashButton = unsplashPlugin;
Configuration
Param | Default | Description |
---|---|---|
theme | Default styles | draft-js-unsplash-plugin/lib/plugin.css |
options | Default behavior | List of options. |
explorerType | 'draft-js-unsplash-plugin-explorer' | Type of entity created when inserting the explorer block. |
unsplashType | 'unsplash' | Type of entity created when inserting the image. |
descorator | - | Empty decorator that returns the same component. (No decorations) |
unsplashComponent | Default implementation | Provide your own implementation to show the image. |
editable | false | This plugin doesn't support the edition of the title in the image. If you want this functionality you must customize the component unsplashComponent . The editable parameter indicates whether block editing is allowed without having to rewrite the function blockRendererFn . |
Options
Option | Default | Description |
---|---|---|
accessKey | (Required) | Unsplash Access Key. (https://unsplash.com/oauth/applications) |
placehoder | 'Type to search Unsplash, and press Enter' | Text as placeholder for the Explorer. |
perPage | 9 | Number of images to show in each page of results. |
onRequest | return (await fetch(url)).json() |
Function to perform the request. It will receive the URL to request and MUST return a JSON. |
getMetadata | - | Function to determine the metadata inserted along with the image selected. It MUST return an object with at least the following keys: - src - width - height - user |
Theming
The plugin ships with a default styling available at this location in the installed package: node_modules/draft-js-unsplash-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 unsplashPlugin = ;const DefaultBlockTypeSelect = <BlockTypeSelect getEditorState=getEditorState setEditorState=setEditorState theme=theme structure= unsplashPluginUnsplashButton />;const sideToolbarPlugin = ;const SideToolbar = sideToolbarPlugin; Component { superprops; thisstate = editorState: EditorState ; thisplugins = sideToolbarPlugin unsplashPlugin ; } { 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 resizeablePlugin = ;const alignmentPlugin = ;const AlignmentTool = alignmentPlugin;const decorator = ; const unsplashPlugin = ;const DefaultBlockTypeSelect = <BlockTypeSelect getEditorState=getEditorState setEditorState=setEditorState theme=theme structure= unsplashPluginUnsplashButton />;const sideToolbarPlugin = ;const SideToolbar = sideToolbarPlugin; Component { superprops; thisstate = editorState: EditorState ; thisplugins = sideToolbarPlugin focusPlugin resizeablePlugin alignmentPlugin unsplashPlugin ; } { this; } { const editorState = thisstate; return <div className='App'> <div className='intro' onClick=thisfocus> <div className='editor'> <Editor editorState=editorState onChange=thisonChange plugins=thisplugins placeholder="Share your story" /> <SideToolbar /> <AlignmentTool /> </div> </div> </div> ; } ReactDOM;
In this other example you can see how integrate the plugin with draft-js-image-plugin
.
// npm install --save draft-js-image-plugin ; const imagePlugin = ;const unsplashPlugin = ; const plugins = sideToolbarPlugin unsplashPlugin imagePlugin // <- Must go AFTER unsplashPlugin.; <Editor editorState=editorState onChange=thisonChange plugins=plugins placeholder="Share your story" />
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 unsplashPlugin = ;