How to use the draft-js-plugins-editor.createEditorStateWithText function in draft-js-plugins-editor

To help you get started, we’ve selected a few draft-js-plugins-editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github draft-js-plugins / draft-js-plugins / docs / client / components / pages / Emoji / SimpleEmojiEditor / index.js View on Github external
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>
github ld-x / last-draft / src / components / SideToolbar / SideToolbar.js View on Github external
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) =&gt; {
    this.setState({ editorState })
  }

  focus = () =&gt; {
    this.editor.focus()
  }

  render() {
    return (
      <div>
        </div>
github draft-js-plugins / draft-js-plugins / stories / inline-toolbar-custom-styled / src / App.js View on Github external
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) =&gt; {
    this.setState({
      editorState,
    });
  };

  focus = () =&gt; {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        </div>
github GigaTables / reactables / src / components / form / fields / CustomToolBarEditor.js View on Github external
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) =&gt; {
        this.setState({
            editorState,
        });
    };

    focus = () =&gt; {
        this.editor.focus();
    };

    render() {
        return (
            <div>
                <div></div></div>
github draft-js-plugins / draft-js-plugins / docs / client / components / pages / Playground / PlaygroundEditor / index.js View on Github external
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();
github draft-js-plugins / draft-js-plugins / docs / client / components / pages / StaticToolbar / ThemedToolbarEditor / index.js View on Github external
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) =&gt; {
    this.setState({
      editorState,
    });
  };

  focus = () =&gt; {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        <div></div></div>
github mozilla / hubs / src / react-components / tweet-dialog.js View on Github external
constructor(props) {
    super();

    this.state = {
      editorState: createEditorStateWithText(props.history.location.state.detail.text || ""),
      suggestions: []
    };
  }
github ld-x / last-draft / src / components / Emoji / Emoji.js View on Github external
/*
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) =&gt; {
    this.setState({ editorState })
  }

  focus = () =&gt; {
    this.editor.focus()
  }

  render() {
    return (
      <div>
        </div>
github ld-x / last-draft / src / components / Hashtag / Hashtag.js View on Github external
/*
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) =&gt; {
    this.setState({ editorState })
  }

  focus = () =&gt; {
    this.editor.focus()
  }

  render() {
    return (
      <div>
        </div>
github draft-js-plugins / draft-js-plugins / stories / side-toolbar-relative-parent / src / App.js View on Github external
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) =&gt; {
    this.setState({
      editorState,
    });
  };

  focus = () =&gt; {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        <p>Here is some content above the editor.</p></div>