diff --git a/docs/APIReference-APIMigration.md b/docs/APIReference-APIMigration.md
index 1f92e2253f..462d020516 100644
--- a/docs/APIReference-APIMigration.md
+++ b/docs/APIReference-APIMigration.md
@@ -11,9 +11,9 @@ to the `ContentState` record.
This API improvement unlocks the path for many benefits that will be available in v0.11:
-* DraftEntity instances and storage will be immutable.
-* DraftEntity will no longer be globally accessible.
-* Any changes to entity data will trigger a re-render.
+- DraftEntity instances and storage will be immutable.
+- DraftEntity will no longer be globally accessible.
+- Any changes to entity data will trigger a re-render.
## Quick Overview
@@ -24,21 +24,15 @@ Here is a quick list of what has been changed and how to update your application
**Old Syntax**
```js
-const entityKey = Entity.create(
- urlType,
- 'IMMUTABLE',
- {src: urlValue},
-);
+const entityKey = Entity.create(urlType, 'IMMUTABLE', {src: urlValue});
```
**New Syntax**
```js
-const contentStateWithEntity = contentState.createEntity(
- urlType,
- 'IMMUTABLE',
- {src: urlValue},
-);
+const contentStateWithEntity = contentState.createEntity(urlType, 'IMMUTABLE', {
+ src: urlValue,
+});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
```
@@ -65,7 +59,8 @@ const entityInstance = contentState.getEntity(entityKey);
```js
const compositeDecorator = new CompositeDecorator([
{
- strategy: (contentBlock, callback) => exampleFindTextRange(contentBlock, callback),
+ strategy: (contentBlock, callback) =>
+ exampleFindTextRange(contentBlock, callback),
component: ExampleTokenComponent,
},
]);
@@ -76,11 +71,9 @@ const compositeDecorator = new CompositeDecorator([
```js
const compositeDecorator = new CompositeDecorator([
{
- strategy: (
- contentBlock,
- callback,
- contentState
- ) => exampleFindTextRange(contentBlock, callback, contentState),
+ strategy: (contentBlock, callback, contentState) => (
+ contentBlock, callback, contentState
+ ),
component: ExampleTokenComponent,
},
]);
@@ -88,24 +81,21 @@ const compositeDecorator = new CompositeDecorator([
Note that ExampleTokenComponent will receive contentState as a prop.
-Why does the 'contentState' get passed into the decorator strategy now? Because we may need it if our strategy is to find certain entities in the contentBlock:
+Why does the 'contentState' get passed into the decorator strategy now? Because we may need it if our strategy is to find certain entities in the contentBlock:
```js
const mutableEntityStrategy = function(contentBlock, callback, contentState) {
- contentBlock.findEntityRanges(
- (character) => {
- const entityKey = character.getEntity();
- if (entityKey === null) {
- return false;
- }
- // To look for certain types of entities,
- // or entities with a certain mutability,
- // you may need to get the entity from contentState.
- // In this example we get only mutable entities.
- return contentState.getEntity(entityKey).getMutability() === 'MUTABLE';
- },
- callback,
- );
+ contentBlock.findEntityRanges(character => {
+ const entityKey = character.getEntity();
+ if (entityKey === null) {
+ return false;
+ }
+ // To look for certain types of entities,
+ // or entities with a certain mutability,
+ // you may need to get the entity from contentState.
+ // In this example we get only mutable entities.
+ return contentState.getEntity(entityKey).getMutability() === 'MUTABLE';
+ }, callback);
};
```
@@ -115,34 +105,25 @@ const mutableEntityStrategy = function(contentBlock, callback, contentState) {
```js
function findLinkEntities(contentBlock, callback) {
- contentBlock.findEntityRanges(
- (character) => {
- const entityKey = character.getEntity();
- return (
- entityKey !== null &&
- Entity.get(entityKey).getType() === 'LINK'
- );
- },
- callback,
- );
-};
+ contentBlock.findEntityRanges(character => {
+ const entityKey = character.getEntity();
+ return entityKey !== null && Entity.get(entityKey).getType() === 'LINK';
+ }, callback);
+}
```
**New Syntax**
```js
function findLinkEntities(contentBlock, callback, contentState) {
- contentBlock.findEntityRanges(
- (character) => {
- const entityKey = character.getEntity();
- return (
- entityKey !== null &&
- contentState.getEntity(entityKey).getType() === 'LINK'
- );
- },
- callback,
- );
-};
+ contentBlock.findEntityRanges(character => {
+ const entityKey = character.getEntity();
+ return (
+ entityKey !== null &&
+ contentState.getEntity(entityKey).getType() === 'LINK'
+ );
+ }, callback);
+}
```
## More Information
diff --git a/docs/APIReference-CharacterMetadata.md b/docs/APIReference-CharacterMetadata.md
index aa34f9ef25..42c40a1e61 100644
--- a/docs/APIReference-CharacterMetadata.md
+++ b/docs/APIReference-CharacterMetadata.md
@@ -26,7 +26,7 @@ for information on how `CharacterMetadata` is used within `ContentBlock`.
## Overview
-*Static Methods*
+_Static Methods_
@@ -51,7 +51,7 @@ for information on how `CharacterMetadata` is used within `ContentBlock`.
-*Methods*
+_Methods_
diff --git a/docs/APIReference-ContentBlock.md b/docs/APIReference-ContentBlock.md
index babacbd300..40bf6f5824 100644
--- a/docs/APIReference-ContentBlock.md
+++ b/docs/APIReference-ContentBlock.md
@@ -7,9 +7,9 @@ title: ContentBlock
[Record](http://facebook.github.io/immutable-js/docs/#/Record/Record) that
represents the full state of a single block of editor content, including:
- - Plain text contents of the block
- - Type, e.g. paragraph, header, list item
- - Entity, inline style, and depth information
+- Plain text contents of the block
+- Type, e.g. paragraph, header, list item
+- Entity, inline style, and depth information
A `ContentState` object contains an `OrderedMap` of these `ContentBlock` objects,
which together comprise the full contents of the editor.
@@ -17,19 +17,19 @@ which together comprise the full contents of the editor.
`ContentBlock` objects are largely analogous to block-level HTML elements like
paragraphs and list items. The available types are:
- - unstyled
- - paragraph
- - header-one
- - header-two
- - header-three
- - header-four
- - header-five
- - header-six
- - unordered-list-item
- - ordered-list-item
- - blockquote
- - code-block
- - atomic
+- unstyled
+- paragraph
+- header-one
+- header-two
+- header-three
+- header-four
+- header-five
+- header-six
+- unordered-list-item
+- ordered-list-item
+- blockquote
+- code-block
+- atomic
New `ContentBlock` objects may be created directly using the constructor.
Expected Record values are detailed below.
@@ -54,7 +54,7 @@ supplied text.
## Overview
-*Methods*
+_Methods_
@@ -114,7 +114,7 @@ supplied text.
-*Properties*
+_Properties_
> Note
>
@@ -161,6 +161,7 @@ supplied text.
```js
getKey(): string
```
+
Returns the string key for this `ContentBlock`. Block keys are alphanumeric string. It is recommended to use `generateRandomKey` to generate block keys.
### `getType()`
@@ -168,6 +169,7 @@ Returns the string key for this `ContentBlock`. Block keys are alphanumeric stri
```js
getType(): DraftBlockType
```
+
Returns the type for this `ContentBlock`. Type values are largely analogous to
block-level HTML elements.
@@ -176,6 +178,7 @@ block-level HTML elements.
```js
getText(): string
```
+
Returns the full plaintext for this `ContentBlock`. This value does not contain
any styling, decoration, or HTML information.
@@ -204,6 +207,7 @@ This value uses the standard JavaScript `length` property for the string, and is
```js
getDepth(): number
```
+
Returns the depth value for this block, if any. This is currently used only for list items.
### `getInlineStyleAt()`
diff --git a/docs/APIReference-ContentState.md b/docs/APIReference-ContentState.md
index 424cdb9849..c715183c74 100644
--- a/docs/APIReference-ContentState.md
+++ b/docs/APIReference-ContentState.md
@@ -18,7 +18,7 @@ objects.
## Overview
-*Static Methods*
+_Static Methods_
@@ -205,7 +208,7 @@ getEntityMap(): EntityMap
```
Returns an object store containing all `DraftEntity` records that have been
-created. In upcoming v0.11.0 the map returned will be an Immutable ordered map
+created. In upcoming v0.11.0 the map returned will be an Immutable ordered map
of `DraftEntity` records.
In most cases, you should be able to use the convenience methods below to target
diff --git a/docs/APIReference-Data-Conversion.md b/docs/APIReference-Data-Conversion.md
index 3180e9cd2c..fd0627d3b6 100644
--- a/docs/APIReference-Data-Conversion.md
+++ b/docs/APIReference-Data-Conversion.md
@@ -41,7 +41,6 @@ Given a `ContentState` object, convert it to a raw JS structure. This is useful
when saving an editor state for storage, conversion to other formats, or
other usage within an application.
-
### `convertFromHTML()`
```js
@@ -52,7 +51,7 @@ const sampleMarkup =
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
- blocksFromHTML.entityMap
+ blocksFromHTML.entityMap,
);
this.state = {
diff --git a/docs/APIReference-Editor.md b/docs/APIReference-Editor.md
index 33a620bded..a9bf55ec2d 100644
--- a/docs/APIReference-Editor.md
+++ b/docs/APIReference-Editor.md
@@ -16,7 +16,7 @@ See [API Basics](/docs/quickstart-api-basics) for an introduction.
### `editorState`
```js
-editorState: EditorState
+editorState: EditorState;
```
The `EditorState` object to be rendered by the `Editor`.
@@ -84,6 +84,7 @@ Optionally set a function to define custom block rendering. See [Advanced Topics
```js
blockRendererMap?: DraftBlockRenderMap
```
+
Provide a map of block rendering configurations. Each block type maps to element tag and an optional react element wrapper. This configuration is used for both rendering and paste processing. See
[Advanced Topics: Custom Block Rendering](/docs/advanced-topics-custom-block-render-map) for details on usage.
@@ -248,7 +249,7 @@ handleBeforeInput?: (
Handle the characters to be inserted from a `beforeInput` event. Returning `'handled'`
causes the default behavior of the `beforeInput` event to be prevented (i.e. it is
the same as calling the `preventDefault` method on the event).
-Example usage: After a user has typed `- ` at the start of a new block, you might
+Example usage: After a user has typed `-` at the start of a new block, you might
convert that `ContentBlock` into an `unordered-list-item`.
At Facebook, we also use this to convert typed ASCII quotes into "smart" quotes,
diff --git a/docs/APIReference-EditorState.md b/docs/APIReference-EditorState.md
index c1bff0a634..7947984e39 100644
--- a/docs/APIReference-EditorState.md
+++ b/docs/APIReference-EditorState.md
@@ -8,11 +8,11 @@ title: EditorState
It is an Immutable [Record](http://facebook.github.io/immutable-js/docs/#/Record/Record)
that represents the entire state of a Draft editor, including:
- - The current text content state
- - The current selection state
- - The fully decorated representation of the contents
- - Undo/redo stacks
- - The most recent type of change made to the contents
+- The current text content state
+- The current selection state
+- The fully decorated representation of the contents
+- Undo/redo stacks
+- The most recent type of change made to the contents
> Note
>
@@ -21,7 +21,7 @@ that represents the entire state of a Draft editor, including:
## Overview
-*Common instance methods*
+_Common instance methods_
The list below includes the most commonly used instance methods for `EditorState` objects.
@@ -48,7 +48,7 @@ The list below includes the most commonly used instance methods for `EditorState
-*Static Methods*
+_Static Methods_
@@ -113,7 +113,7 @@ The list below includes the most commonly used instance methods for `EditorState
-*Properties*
+_Properties_
> Note
>
@@ -125,7 +125,9 @@ The list below includes the most commonly used instance methods for `EditorState
>
> ```js
> const editorState = EditorState.createEmpty();
-> const editorStateWithoutUndo = EditorState.set(editorState, {allowUndo: false});
+> const editorStateWithoutUndo = EditorState.set(editorState, {
+> allowUndo: false,
+> });
> ```
@@ -268,6 +270,7 @@ provided.
```js
static create(config: EditorStateCreationConfig): EditorState
```
+
Returns a new `EditorState` object based on a configuration object. Use this
if you need custom configuration not available via the methods above.
@@ -397,7 +400,7 @@ state tracked in this object.
```js
allowUndo: boolean;
-getAllowUndo()
+getAllowUndo();
```
Whether to allow undo/redo behavior in this editor. Default is `true`.
@@ -410,7 +413,7 @@ setting this to `false`.
```js
currentContent: ContentState;
-getCurrentContent()
+getCurrentContent();
```
The currently rendered `ContentState`. See [getCurrentContent()](#getcurrentcontent).
@@ -431,7 +434,7 @@ is provided, it will be used to decorate ranges of text for rendering.
```js
directionMap: BlockMap;
-getDirectionMap()
+getDirectionMap();
```
A map of each block and its text direction, as determined by UnicodeBidiService.
@@ -442,7 +445,7 @@ You should not manage this manually.
```js
forceSelection: boolean;
-mustForceSelection()
+mustForceSelection();
```
Whether to force the current `SelectionState` to be rendered.
@@ -454,7 +457,7 @@ You should not set this property manually -- see
```js
inCompositionMode: boolean;
-isInCompositionMode()
+isInCompositionMode();
```
Whether the user is in IME composition mode. This is useful for rendering the
@@ -465,7 +468,7 @@ to the editor. You should not set this property manually.
```js
inlineStyleOverride: DraftInlineStyle;
-getInlineStyleOverride()
+getInlineStyleOverride();
```
An inline style value to be applied to the next inserted characters. This is
@@ -479,7 +482,7 @@ each of which corresponds to an inline style.
```js
lastChangeType: EditorChangeType;
-getLastChangeType()
+getLastChangeType();
```
The type of content change that took place in order to bring us to our current
@@ -521,7 +524,7 @@ See also [undoStack](#undostack).
```js
selection: SelectionState;
-getSelection()
+getSelection();
```
The currently rendered `SelectionState`. See [acceptSelection()](#acceptselection)
diff --git a/docs/APIReference-Entity.md b/docs/APIReference-Entity.md
index 5b4505eebc..845dbf6a2e 100644
--- a/docs/APIReference-Entity.md
+++ b/docs/APIReference-Entity.md
@@ -21,7 +21,7 @@ be used only for retrieval.
## Overview
-*Methods*
+_Methods_
diff --git a/docs/APIReference-KeyBindingUtil.md b/docs/APIReference-KeyBindingUtil.md
index 3b0b982dbc..3e2d989f54 100644
--- a/docs/APIReference-KeyBindingUtil.md
+++ b/docs/APIReference-KeyBindingUtil.md
@@ -16,7 +16,7 @@ isCtrlKeyCommand: function(
): boolean
```
-Check whether the `ctrlKey` modifier is *not* being used in conjunction with
+Check whether the `ctrlKey` modifier is _not_ being used in conjunction with
the `altKey` modifier. If they are combined, the result is an `altGraph`
key modifier, which is not handled by this set of key bindings.
diff --git a/docs/APIReference-Modifier.md b/docs/APIReference-Modifier.md
index b58e7e2b3b..b8ab7b2be2 100644
--- a/docs/APIReference-Modifier.md
+++ b/docs/APIReference-Modifier.md
@@ -16,7 +16,7 @@ will be the same as the input object if no edit was actually performed.
## Overview
-*Methods*
+_Methods_
diff --git a/docs/APIReference-SelectionState.md b/docs/APIReference-SelectionState.md
index 3b0f5045c7..4960654132 100644
--- a/docs/APIReference-SelectionState.md
+++ b/docs/APIReference-SelectionState.md
@@ -55,7 +55,7 @@ _Start_ and _end_ values are derived.
## Overview
-*Static Methods*
+_Static Methods_
@@ -65,7 +65,7 @@ _Start_ and _end_ values are derived.
-*Methods*
+_Methods_
@@ -135,7 +135,7 @@ _Start_ and _end_ values are derived.
-*Properties*
+_Properties_
> Use [Immutable Map API](http://facebook.github.io/immutable-js/docs/#/Record/Record) to
> set properties.
diff --git a/docs/Advanced-Topics-Custom-Block-Render.md b/docs/Advanced-Topics-Custom-Block-Render.md
index 5795aa3862..ae7a7739e9 100644
--- a/docs/Advanced-Topics-Custom-Block-Render.md
+++ b/docs/Advanced-Topics-Custom-Block-Render.md
@@ -14,23 +14,23 @@ by matching the Draft block render map with the matched tag.
## Draft default block render map
-| HTML element | Draft block type |
-| --------------- | --------------------------------------- |
-| `` | header-one |
-| `` | header-two |
-| `` | header-three |
-| `` | header-four |
-| `` | header-five |
-| `` | header-six |
-| `` | blockquote |
-| `` | code-block |
-| `` | atomic |
-| `
` | unordered-list-item,ordered-list-item\*\* |
+| `` | unstyled\*\*\* |
\*\* - Block type will be based on the parent `
` or ``
-\*\*\* - Any block that is not recognized by the block rendering mapping will be treated as unstyled
+\*\*\* - Any block that is not recognized by the block rendering mapping will be treated as unstyled
## Configuring block render map
@@ -38,7 +38,7 @@ Draft's default block render map can be overwritten by passing an
[Immutable Map](http://facebook.github.io/immutable-js/docs/#/Map) to
the editor blockRender props.
-*example of overwriting default block render map:*
+_example of overwriting default block render map:_
```js
// The example below deliberately only allows
@@ -68,7 +68,7 @@ class RichEditor extends React.Component {
There are cases where instead of overwriting the defaults, we only want to add new block types.
This can be done by using the DefaultDraftBlockRenderMap reference to create a new blockRenderMap
-*example of extending default block render map:*
+_example of extending default block render map:_
```js
const blockRenderMap = Immutable.Map({
@@ -97,7 +97,7 @@ When Draft parses pasted HTML, it maps from HTML elements back into
Draft block types. If you want to specify other HTML elements that map to a
particular block type, you can add the array `aliasedElements` to the block config.
-*example of unstyled block type alias usage:*
+_example of unstyled block type alias usage:_
```js
'unstyled': {
@@ -119,7 +119,7 @@ it on the _blockRenderMap_ to wrap that particular block type. For example:
Draft uses wrappers to wrap `` inside either `` or `
`, but wrappers can also be used
to wrap any other custom block type.
-*example of extending default block render map to use a react component for a custom block:*
+_example of extending default block render map to use a react component for a custom block:_
```js
class MyCustomBlock extends React.Component {
diff --git a/docs/Advanced-Topics-Decorators.md b/docs/Advanced-Topics-Decorators.md
index 1b749f9716..6c5d8b281f 100644
--- a/docs/Advanced-Topics-Decorators.md
+++ b/docs/Advanced-Topics-Decorators.md
@@ -92,12 +92,20 @@ In our current example, the `CompositeDecorator` object names `HandleSpan` and
stateless components:
```js
-const HandleSpan = (props) => {
- return {props.children};
+const HandleSpan = props => {
+ return (
+
+ {props.children}
+
+ );
};
-const HashtagSpan = (props) => {
- return {props.children};
+const HashtagSpan = props => {
+ return (
+
+ {props.children}
+
+ );
};
```
@@ -137,10 +145,12 @@ following:
```js
function turnOffHandleDecorations(editorState) {
- const onlyHashtags = new CompositeDecorator([{
- strategy: hashtagStrategy,
- component: HashtagSpan,
- }]);
+ const onlyHashtags = new CompositeDecorator([
+ {
+ strategy: hashtagStrategy,
+ component: HashtagSpan,
+ },
+ ]);
return EditorState.set(editorState, {decorator: onlyHashtags});
}
```
diff --git a/docs/Advanced-Topics-EditorState-Race-Conditions.md b/docs/Advanced-Topics-EditorState-Race-Conditions.md
index cd0c49644e..8266a75afe 100644
--- a/docs/Advanced-Topics-EditorState-Race-Conditions.md
+++ b/docs/Advanced-Topics-EditorState-Race-Conditions.md
@@ -3,7 +3,7 @@ id: advanced-topics-editorstate-race-conditions
title: EditorState Race Conditions
---
-Draft `Editor` is a *controlled input* component (you can read about this in detail in the [API Basics](/docs/quickstart-api-basics) section), meaning that changes made to the `Editor` state are propagated upwards through `onChange` and it's up to the app to feed it back to the `Editor` component.
+Draft `Editor` is a _controlled input_ component (you can read about this in detail in the [API Basics](/docs/quickstart-api-basics) section), meaning that changes made to the `Editor` state are propagated upwards through `onChange` and it's up to the app to feed it back to the `Editor` component.
This cycle usually looks like:
@@ -32,9 +32,9 @@ Here's an example: Suppose you want to remove all the text styles that come from
```js
this.onPaste = function() {
this.setState({
- editorState: removeEditorStyles(this.state.editorState)
+ editorState: removeEditorStyles(this.state.editorState),
});
-}
+};
```
However, this won't work as expected. You now have two event handlers that set a new `EditorState` in the exact same browser event. Since the event handlers will run one after the other only the last `setState` will prevail. Here's how it looks like in the JS timeline:
@@ -54,26 +54,26 @@ Now that you understand the problem, what can you do to avoid it? In general be
To minimize this problem Draft offers the latest `EditorState` instance in most of its callback functions. In your code you should use the provided `EditorState` instead of your local one to make sure you're basing your changes on the latest one.
Here's a list of supported callbacks on the `Editor`:
-* `handleReturn(event, editorState)`
-* `handleKeyCommand(command, editorState)`
-* `handleBeforeInput(chars, editorState)`
-* `handlePastedText(text, html, editorState)`
+- `handleReturn(event, editorState)`
+- `handleKeyCommand(command, editorState)`
+- `handleBeforeInput(chars, editorState)`
+- `handlePastedText(text, html, editorState)`
The paste example can then be re-written in a race condition free way by using these methods:
```js
this.handlePastedText = (text, styles, editorState) => {
this.setState({
- editorState: removeEditorStyles(text, editorState)
+ editorState: removeEditorStyles(text, editorState),
});
-}
+};
//...
+/>;
```
With `handlePastedText` you can implement the paste behavior by yourself.
diff --git a/docs/Advanced-Topics-Entities.md b/docs/Advanced-Topics-Entities.md
index dc97bf1af9..d21c2fbd3a 100644
--- a/docs/Advanced-Topics-Entities.md
+++ b/docs/Advanced-Topics-Entities.md
@@ -29,14 +29,14 @@ An entity is an object that represents metadata for a range of text within a
Draft editor. It has three properties:
- **type**: A string that indicates what kind of entity it is, e.g. `'LINK'`,
-`'MENTION'`, `'PHOTO'`.
+ `'MENTION'`, `'PHOTO'`.
- **mutability**: Not to be confused with immutability a la `immutable-js`, this
-property denotes the behavior of a range of text annotated with this entity
-object when editing the text range within the editor. This is addressed in
-greater detail below.
+ property denotes the behavior of a range of text annotated with this entity
+ object when editing the text range within the editor. This is addressed in
+ greater detail below.
- **data**: An optional object containing metadata for the entity. For instance,
-a `'LINK'` entity might contain a `data` object that contains the `href` value
-for that link.
+ a `'LINK'` entity might contain a `data` object that contains the `href` value
+ for that link.
All entities are stored in the ContentState record. The entities are referenced
by key within `ContentState` and React components used to decorate annotated
@@ -58,18 +58,18 @@ content. For instance, the `Modifier` module contains an `applyEntity` method:
```js
const contentState = editorState.getCurrentContent();
-const contentStateWithEntity = contentState.createEntity(
- 'LINK',
- 'MUTABLE',
- {url: 'http://www.zombo.com'}
-);
+const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
+ url: 'http://www.zombo.com',
+});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const contentStateWithLink = Modifier.applyEntity(
contentStateWithEntity,
selectionState,
- entityKey
+ entityKey,
);
-const newEditorState = EditorState.push(editorState, { currentContent: contentStateWithLink });
+const newEditorState = EditorState.push(editorState, {
+ currentContent: contentStateWithLink,
+});
```
For a given range of text, then, you can extract its associated entity key by using
@@ -83,6 +83,7 @@ const linkKey = blockWithLinkAtBeginning.getEntityAt(0);
const linkInstance = contentState.getEntity(linkKey);
const {url} = linkInstance.getData();
```
+
## "Mutability"
Entities may have one of three "mutability" values. The difference between them
diff --git a/docs/Advanced-Topics-Inline-Styles.md b/docs/Advanced-Topics-Inline-Styles.md
index 40bcc9c1d3..2840e64af2 100644
--- a/docs/Advanced-Topics-Inline-Styles.md
+++ b/docs/Advanced-Topics-Inline-Styles.md
@@ -31,11 +31,11 @@ In essence, our styles are:
[
[], // H
[], // e
- ...
+ // ...
['BOLD'], // w
['BOLD'], // o
// etc.
-]
+];
```
## Overlapping Styles
@@ -52,12 +52,12 @@ relevant `OrderedSet` objects as well.
[], // H
[], // e
['ITALIC'], // l
- ...
+ // ...
['BOLD', 'ITALIC'], // w
['BOLD', 'ITALIC'], // o
['BOLD'], // r
// etc.
-]
+];
```
When determining how to render inline-styled text, Draft will identify
diff --git a/docs/Advanced-Topics-Issues-and-Pitfalls.md b/docs/Advanced-Topics-Issues-and-Pitfalls.md
index 3a3c899151..6bec236bf9 100644
--- a/docs/Advanced-Topics-Issues-and-Pitfalls.md
+++ b/docs/Advanced-Topics-Issues-and-Pitfalls.md
@@ -101,10 +101,7 @@ import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
-ReactDOM.render(
- ,
- document.getElementById('root')
-);
+ReactDOM.render(, document.getElementById('root'));
```
### Mobile Not Yet Supported
diff --git a/docs/Overview.md b/docs/Overview.md
index aae4bd202e..e1bdb0056c 100644
--- a/docs/Overview.md
+++ b/docs/Overview.md
@@ -36,7 +36,7 @@ Learn more about [using a shim with Draft](/docs/advanced-topics-issues-and-pitf
Before getting started, please be aware that we recently changed the API of
Entity storage in Draft. The latest version, `v0.10.0`, supports both the old
-and new API. Following that up will be `v0.11.0` which will remove the old API.
+and new API. Following that up will be `v0.11.0` which will remove the old API.
If you are interested in helping out, or tracking the progress, please follow
[issue 839](https://github.com/facebook/draft-js/issues/839).
@@ -51,19 +51,17 @@ class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
- this.onChange = (editorState) => this.setState({editorState});
+ this.onChange = editorState => this.setState({editorState});
}
+
render() {
return (
-
+
);
}
}
-ReactDOM.render(
- ,
- document.getElementById('container')
-);
+ReactDOM.render(, document.getElementById('container'));
```
Since the release of React 16.8, you can use [Hooks](https://reactjs.org/docs/hooks-intro.html) as a way to work with `EditorState` without using a class.
@@ -75,21 +73,13 @@ import {Editor, EditorState} from 'draft-js';
function MyEditor() {
const [editorState, setEditorState] = React.useState(
- EditorState.createEmpty()
+ EditorState.createEmpty(),
);
- return (
-
- );
+ return ;
}
-ReactDOM.render(
- ,
- document.getElementById('container')
-);
+ReactDOM.render(, document.getElementById('container'));
```
Because Draft.js supports unicode, you must have the following meta tag in the `` block of your HTML file:
diff --git a/docs/QuickStart-API-Basics.md b/docs/QuickStart-API-Basics.md
index 71efd5e1e0..9c54b1038a 100644
--- a/docs/QuickStart-API-Basics.md
+++ b/docs/QuickStart-API-Basics.md
@@ -11,7 +11,7 @@ is also available to follow along.
The `Editor` React component is built as a controlled ContentEditable component,
with the goal of providing a top-level API modeled on the familiar React
-*controlled input* API.
+_controlled input_ API.
As a brief refresher, controlled inputs involve two key pieces:
@@ -27,7 +27,7 @@ class MyInput extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
- this.onChange = (evt) => this.setState({value: evt.target.value});
+ this.onChange = evt => this.setState({value: evt.target.value});
}
render() {
return ;
@@ -62,10 +62,13 @@ class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
- this.onChange = (editorState) => this.setState({editorState});
+ this.onChange = editorState => this.setState({editorState});
}
+
render() {
- return ;
+ return (
+
+ );
}
}
```
diff --git a/docs/QuickStart-Rich-Styling.md b/docs/QuickStart-Rich-Styling.md
index 3ef13e8da3..8f46e41a3b 100644
--- a/docs/QuickStart-Rich-Styling.md
+++ b/docs/QuickStart-Rich-Styling.md
@@ -41,17 +41,21 @@ class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
- this.onChange = (editorState) => this.setState({editorState});
+ this.onChange = editorState => this.setState({editorState});
this.handleKeyCommand = this.handleKeyCommand.bind(this);
}
+
handleKeyCommand(command, editorState) {
const newState = RichUtils.handleKeyCommand(editorState, command);
+
if (newState) {
this.onChange(newState);
return 'handled';
}
+
return 'not-handled';
}
+
render() {
return (