How do i design the draft-js editor itself?

Question

I am trying to learn how to use draftjs, but i can't figure out how to apply css to the editor itself. I read in the documentation that it is possible to design the content blocks, but i am looking for a way to design the editor.

Answer 1

Draft sets a few class names on the editor that you can use. Here's a (non-comprehensive) list:

• .DraftEditor-root
• .DraftEditor-editorContainer
• .public-DraftEditor-content
• .public-DraftEditorPlaceholder-root
• .public-DraftEditorPlaceholder-inner
• .public-DraftStyleDefault-block

Here's a fiddle showing them. And here's the styles used in the fiddle:

.DraftEditor-root,
.DraftEditor-editorContainer,
.public-DraftEditor-content {
  padding: 5px;
  margin: 5px;
}

.public-DraftEditorPlaceholder-root {
  margin-top: 28px;
  margin-left: 25px;
}

.public-DraftEditorPlaceholder-inner {
  background: rgba(0, 0, 0, .5);
  color: white;
}

.DraftEditor-root {
  border: 1px solid black;
}

.public-DraftEditor-content {
   border: 1px solid blue;
}

.DraftEditor-editorContainer {
  border: 1px solid green;
}

.public-DraftStyleDefault-block {
  border: 1px solid red;
  margin: 5px 0;
}

Draft will also output some more class names depending on text alignment etc. I'd encourage you to inspect the elements in e.g. Chrome DevTools to see what's available.