ld-x / last-draft-js-plugins Goto Github PK

 const linkPlugin = createLinkPlugin({
      placeholder: "",
      theme: {
        link: {
          color: 'red'
        }
      }
    })

WARNING: DraftEntity.get will be deprecated soon!
Please use "contentState.getEntity" instead.

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>
    )
  }
}

npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:

Module not found: Error: Can't resolve 'linkify-it' in '.../node_modules/draft-js-modal-plugin/lib/components/LinkModal'
 @ ./~/draft-js-modal-plugin/lib/components/LinkModal/index.js 22:17-38
 @ ./~/draft-js-modal-plugin/lib/index.js

Module not found: Error: Can't resolve 'tlds' in '.../node_modules/draft-js-modal-plugin/lib/components/LinkModal'
 @ ./~/draft-js-modal-plugin/lib/components/LinkModal/index.js 26:12-27
 @ ./~/draft-js-modal-plugin/lib/index.js
 @ ./~/last-draft-js-toolbar-plugin/lib/components/getModalByType/index.js
 @ ./~/last-draft-js-toolbar-plugin/lib/index.js