This application requires Node.js installed. Node.js can be downloaded at from https://nodejs.org/.
Clone this repo:
git clone https://github.com/jaaberg/draft-js-workshop.git
Install dependencies. (A one-time operation.)
npm install
Start the development server.
npm start
Create a Plain text editor with Draft.js.
You need an Editor
component which has an onChange
property that you should
use to update the editors state. You also need to pass the editor an instance
of EditorState
(EditorState.createEmpty
)
Create a Rich text editor with Draft.js.
In this task, the editors handleKeyCommand
property will be come in use.
Also, the RichUtils.handleKeyCommand()
, which holds information about the
most basic key commands such as bold, italics and underscore will be needed.
You've been given the solution from the last task and a button to log the state to console if you are interested in how draft is storing the editors state.
Create an editor that changes the color of hashtags.
We want to change the color of hashtags. For this task you need to pass a
CompositeDeorator
to the editorstate you are creating. The CompositeDecorator
accepets a list of {decoratorComponent, strategy}
objects. Draft.js is using the
stragegy to search a given ContentBlock
for ranges of text that matches
the given strategy. The strategy could for instance be a regex. For the
decorated ranges of text that you find with the strategy, you need to give
a component, the DecoratorComponent
. They tend to be spans, and is passed
the range of decorated text as props.children
.
Implement name suggestions when @ is typed.
This task is pretty similar to the previous one. This time, you are going
to suggest names when we type @ in the editor. Use the NAMES
list and match
by startsWith()
that is a default string method in JS. The decorator component
is passed decoratedText
via props.
Implement complete functional mentions with draft-js-plugins
.
For this task, you will use the draft-js-plugins
package to do the hard parts
for you. This is a plugin-based editor where contributors have written complete
plugins for you to use.
##Solutions
You find solutions under src/solutions/
in the project folder, and
localhost:3000/solutions/<tasknumber>
in your browser.