last-draft

by ld-x

:pen: a Draft.js editor

212 Stars 31 Forks Last release: Not found 362 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

last-draft

npm version

Standard - JavaScript Style Guide

last-draft is a Draft.js editor using draft-js-plugins

Important Note:

Versions

3.3.0
in progress version using draft-js-plugins and last-draft-js-plugins

yarn add last-draft

2.3.3
stable version using MegaDraft plugin approach and ld-plugins

yarn add [email protected]

v3 Use

import React, { Component } from 'react'
import { render } from 'react-dom'
import {Editor, editorStateFromHtml, editorStateToHtml, editorStateFromRaw, editorStateFromText} from 'last-draft'
import { fromJS } from 'immutable';

export default class ExampleEditor extends Component { constructor(props) { super(props) const INITIAL_STATE = editorStateFromText('this is a cooel editor... πŸ„πŸŒ πŸ€') this.state = { editorState: INITIAL_STATE } }

onChange = (editorState) => { this.setState({ editorState: editorState }) /* You would normally save this to your database here instead of logging it */ console.log(editorStateToHtml(editorState)) }

render() { return ( ) } }

v2 Use

import React, { Component } from 'react'
import { render } from 'react-dom'
import {Editor, editorStateFromHtml, editorStateToHtml, editorStateFromRaw, editorStateToJSON} from 'last-draft'

import video from 'ld-video' import color from 'ld-color-picker' import emoji from 'ld-emoji' import gif from 'ld-gif' import mention from 'ld-mention' import audio from 'ld-audio' import sticker from 'ld-sticker' import html from 'ld-html' import todo from 'ld-todo' let plugins = [video, color, emoji, gif, mention]

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

export default class ExampleEditor extends Component { constructor(props) { super(props) const INITIAL_STATE = editorStateFromRaw(raw) this.state = { value: INITIAL_STATE } }

onChange(editorState) { this.setState({ value: editorState }) console.log(editorStateToHtml(editorState)) console.log(editorStateToJSON(editorState)) }

render() { return ( ) } }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.