Feature/tree

docs/APIReference-Modifier.md

@@ -4,6 +4,7 @@ title: Modifier
 layout: docs
 category: API Reference
 permalink: docs/api-reference-modifier.html
+next: experimental-nesting
 ---
 
 The `Modifier` module is a static set of utility functions that encapsulate common

docs/Experimental-Nesting.md

@@ -0,0 +1,81 @@
+---
+id: experimental-nesting
+title: Nesting
+layout: docs
+category: Experimental
+next: api-reference-data-conversion
+permalink: docs/experimental-nesting.html
+---
+
+## Overview
+
+By default Draft.js doesn't support nested blocks, but it can be enabled using some component props.
+
+### Usage
+
+```js
+import {Editor, EditorState, NestedUtils} from 'draft-js';
+
+class MyEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {editorState: EditorState.createEmpty()};
+    this.onChange = (editorState) => this.setState({editorState});
+    this.handleKeyCommand = this.handleKeyCommand.bind(this);
+  }
+  handleKeyCommand(command) {
+    const newState = NestedUtils.handleKeyCommand(this.state.editorState, command);
+    if (newState) {
+      this.onChange(newState);
+      return true;
+    }
+    return false;
+  }
+  render() {
+    return (
+      <Editor
+        editorState={this.state.editorState}
+        blockRenderMap={NestedUtils.DefaultBlockRenderMap}
+        keyBindingFn={NestedUtils.keyBinding}
+        handleKeyCommand={this.handleKeyCommand}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+```
+
+### Commands
+
+`NestedUtils` provides two methods: `NestedUtils.keyBinding` and `NestedUtils.handleKeyCommand` to respond to user interactions with the right behavior for nested content.
+
+### Data Conversion
+
+`convertFromRaw` and `convertToRaw` supports nested blocks:
+
+```js
+import {convertFromRaw} from 'draft-js';
+
+var contentState = convertFromRaw({
+    blocks: [
+        {
+            type: 'heading-one',
+            text: 'My Awesome Article'
+        },
+        {
+            type: 'blockquote',
+            blocks: [
+                {
+                    type: 'heading-two',
+                    text: 'Another heading in a blockquote'
+                },
+                {
+                    type: 'unstyled',
+                    text: 'Followed by a paragraph.'
+                }
+            ]
+        }
+    ],
+    entityMap: {}
+});
+```

examples/tree/tree.css

@@ -0,0 +1,85 @@
+.RichEditor-root {
+  background: #fff;
+  border: 1px solid #ddd;
+  font-family: 'Georgia', serif;
+  font-size: 14px;
+  padding: 15px;
+}
+
+.RichEditor-editor {
+  border-top: 1px solid #ddd;
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.RichEditor-editor .public-DraftEditorPlaceholder-root,
+.RichEditor-editor .public-DraftEditor-content {
+  margin: 0 -15px -15px;
+  padding: 15px;
+}
+
+.RichEditor-editor .public-DraftEditor-content {
+  min-height: 100px;
+}
+
+.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
+  display: none;
+}
+
+.RichEditor-editor .RichEditor-blockquote {
+  border-left: 5px solid #eee;
+  color: #666;
+  font-family: 'Hoefler Text', 'Georgia', serif;
+  font-style: italic;
+  margin: 16px 0;
+  padding: 10px 20px;
+}
+
+.RichEditor-editor .public-DraftStyleDefault-pre {
+  background-color: rgba(0, 0, 0, 0.05);
+  font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
+  font-size: 16px;
+  padding: 20px;
+}
+
+.RichEditor-controls {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  margin-bottom: 5px;
+  user-select: none;
+}
+
+.RichEditor-styleButton {
+  color: #999;
+  cursor: pointer;
+  margin-right: 16px;
+  padding: 2px 0;
+  display: inline-block;
+}
+
+.RichEditor-activeButton {
+  color: #5890ff;
+}
+
+.RichEditor-editor table {
+  border: 1px solid #ccc;
+  display: block;
+}
+
+.RichEditor-editor tr {
+  padding: 0;
+  margin: 0;
+}
+
+.RichEditor-editor td {
+  border: 1px solid black;
+}
+
+#target {
+  width: 600px;
+}
+
+.public-DraftStyleDefault-block {
+  padding-left: 20px;
+}