Skip to content

[question] how to use emojiPickerPlugin in a Toolbar #11

Description

@agrcrobles

Hi,

I am not able to make draft-js-emoji-picker-plugin work:

import React, { Component } from 'react'
import { render } from 'react-dom' // eslint-disable-line no-unused-vars
import Editor, { composeDecorators } from 'draft-js-plugins-editor'
import { EditorState, convertFromRaw, convertToRaw } from 'draft-js'
import { fromJS } from 'immutable';

/* Emoji plugin */
import createEmojiPlugin from 'draft-js-emoji-plugin'
import emojiPickerPlugin from 'draft-js-emoji-picker-plugin'
import 'draft-js-emoji-plugin/lib/plugin.css'
const emojiPlugin = createEmojiPlugin()
// const { EmojiSuggestions } = emojiPlugin

const decorator = composeDecorators(
  // resizeablePlugin.decorator,
)

/* Toolbar */
import createToolbarPlugin from 'last-draft-js-toolbar-plugin'
import 'last-draft-js-toolbar-plugin/lib/plugin.css'
const toolbarPlugin = createToolbarPlugin()
const { Toolbar } = toolbarPlugin

/* Side Toolbar */
import createSidebarPlugin from 'last-draft-js-sidebar-plugin'
import 'last-draft-js-sidebar-plugin/lib/plugin.css'
const sidebarPlugin = createSidebarPlugin()
const { Sidebar } = sidebarPlugin

/* init the plugins */
const plugins = [
  emojiPlugin,
  emojiPickerPlugin,
  toolbarPlugin,
  sidebarPlugin,
]

/* init the state, either from raw, html or text */
import { raw } from './initialState/raw'

/* from raw */
const content = convertFromRaw(raw)
let STATE = EditorState.createWithContent(content)

export default class Example extends Component {
  state = {
    editorState: STATE
  }

  onChange = (editorState) => {
    this.setState({ editorState })

    let raw = convertToRaw(editorState.getCurrentContent())
    this.logState('raw state:', raw)
  }

  logState (type, raw) {
    // console.log(type)
    console.log(JSON.stringify(raw))
  }

  focus = () => {
    this.editor.focus()
  }


  render () {
    return (
      <div>
        <div className='editor'>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={(element) => { this.editor = element }}
          />
          <Sidebar />
        </div>
      </div>
    )
  }
}

Any thoughts or help is welcome!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions