Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createEmojiPlugin from 'draft-js-emoji-plugin'; // eslint-disable-line import/no-unresolved
import editorStyles from './editorStyles.css';
const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;
const plugins = [emojiPlugin];
const text = `Cool, we can have all sorts of Emojis here. š
šæāļøšš aaaand maybe a few more here š²āļøš» Quite fun!`;
export default class SimpleEmojiEditor extends Component {
state = {
editorState: createEditorStateWithText(text),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.editor.focus();
};
render() {
return (
<div>
<div></div></div>
const sideToolbarPlugin = createSideToolbarPlugin({ themes: styles })
// themes not yet implemented
*/
import 'draft-js-side-toolbar-plugin/lib/plugin.css'
const sideToolbarPlugin = createSideToolbarPlugin()
const { SideToolbar } = sideToolbarPlugin
const plugins = [sideToolbarPlugin]
const text = 'Once you click into the text field the sidebar plugin will show up ā¦'
export default class CustomSideToolbarEditor extends Component {
state = {
editorState: createEditorStateWithText(text)
}
onChange = (editorState) => {
this.setState({ editorState })
}
focus = () => {
this.editor.focus()
}
render() {
return (
<div>
</div>
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.css';
import toolbarStyles from './toolbarStyles.css';
const inlineToolbarPlugin = createInlineToolbarPlugin({
theme: { buttonStyles, toolbarStyles }
});
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin];
const text = 'In this editor a toolbar with a lot more options shows up once you select part of the text ā¦';
export default class ThemedInlineToolbarEditor extends Component {
state = {
editorState: createEditorStateWithText(text),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.editor.focus();
};
render() {
return (
<div>
</div>
Separator,
HeadlinesButton,
UnorderedListButton,
OrderedListButton,
BlockquoteButton,
CodeBlockButton
]
});
const {Toolbar} = toolbarPlugin;
const plugins = [toolbarPlugin];
const text = 'In this editor a toolbar shows up once you select part of the text ā¦';
export default class CustomToolbarEditor extends Component {
state = {
editorState: createEditorStateWithText(text),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.editor.focus();
};
render() {
return (
<div>
<div></div></div>
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import editorStyles from './editorStyles.css';
import colorStyleMap from './colorStyleMap';
import ColorControls from './ColorControls';
import * as colorPlugin from './colorPlugin';
const hashtagPlugin = createHashtagPlugin();
const plugins = [hashtagPlugin, colorPlugin];
const text = `#TIL: This editor can have all sorts of #hashtags. Pretty #cool :)
Try it yourself by starting a word with a # (hash character) ā¦
`;
export default class SimpleHashtagEditor extends Component {
state = {
editorState: createEditorStateWithText(text),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.editor.focus();
};
toggleColor = (toggledColor) => {
const { editorState } = this.state;
const selection = editorState.getSelection();
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import editorStyles from './editorStyles.css';
import buttonStyles from './buttonStyles.css';
import toolbarStyles from './toolbarStyles.css';
const toolbarPlugin = createToolbarPlugin({
theme: { buttonStyles, toolbarStyles }
});
const { Toolbar } = toolbarPlugin;
const plugins = [toolbarPlugin];
const text = 'In this editor a toolbar with a lot more options shows up once you select part of the text ā¦';
export default class ThemedToolbarEditor extends Component {
state = {
editorState: createEditorStateWithText(text),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.editor.focus();
};
render() {
return (
<div>
<div></div></div>
constructor(props) {
super();
this.state = {
editorState: createEditorStateWithText(props.history.location.state.detail.text || ""),
suggestions: []
};
}
/*
import styles from './Emoji.css'
const emojiPlugin = createEmojiPlugin({ theme: styles })
*/
const { EmojiSuggestions } = emojiPlugin
const plugins = [emojiPlugin]
const text = `Cool, we can have all sorts of Emojis here. š
šæāļøšš aaaand maybe a few more here š²āļøš» Quite fun!`
export default class SimpleEmojiEditor extends Component {
state = {
editorState: createEditorStateWithText(text)
}
onChange = (editorState) => {
this.setState({ editorState })
}
focus = () => {
this.editor.focus()
}
render() {
return (
<div>
</div>
/*
import styles from './Hashtag.css'
const hashtagPlugin = createHashtagPlugin({ theme: styles })
*/
const plugins = [hashtagPlugin]
const text = `#TIL: This editor can have all sorts of #hashtags. Pretty #cool :)
Try it yourself by starting a word with a # (hash character) ā¦
`;
export default class SimpleHashtagEditor extends Component {
state = {
editorState: createEditorStateWithText(text)
}
onChange = (editorState) => {
this.setState({ editorState })
}
focus = () => {
this.editor.focus()
}
render() {
return (
<div>
</div>
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createSideToolbarPlugin from 'draft-js-side-toolbar-plugin';
import editorStyles from './editorStyles.css';
const sideToolbarPlugin = createSideToolbarPlugin();
const { SideToolbar } = sideToolbarPlugin;
const plugins = [sideToolbarPlugin];
const text = 'Once you click into the text field the sidebar plugin will show up ā¦';
export default class SimpleSideToolbarEditor extends Component {
state = {
editorState: createEditorStateWithText(text),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
focus = () => {
this.editor.focus();
};
render() {
return (
<div>
<p>Here is some content above the editor.</p></div>