Skip to content
This repository was archived by the owner on Feb 6, 2023. It is now read-only.

Commit c5c783a

Browse files
author
Claudio Procida
committed
Merge branch 'master' into 0.11.0-beta
2 parents aa224fa + ceaeebf commit c5c783a

File tree

68 files changed

+6858
-2835
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+6858
-2835
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
3+
}

‎README.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,42 @@ ReactDOM.render(
9191
);
9292
```
9393

94+
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.
95+
96+
97+
```js
98+
import React from 'react';
99+
import ReactDOM from 'react-dom';
100+
import {Editor, EditorState} from 'draft-js';
101+
102+
function MyEditor() {
103+
const [editorState, setEditorState] = React.useState(
104+
EditorState.createEmpty()
105+
);
106+
107+
const editor = React.useRef(null);
108+
109+
function focusEditor() {
110+
editor.current.focus();
111+
}
112+
113+
React.useEffect(() => {
114+
focusEditor()
115+
}, []);
116+
117+
return (
118+
<div onClick={focusEditor}>
119+
<Editor
120+
ref={editor}
121+
editorState={editorState}
122+
onChange={editorState => setEditorState(editorState)}
123+
/>
124+
</div>
125+
);
126+
}
127+
128+
```
129+
94130
Note that the editor itself is only as tall as its contents. In order to give users a visual cue, we recommend setting a border and a minimum height via the `.DraftEditor-root` CSS selector, or using a wrapper div like in the above example.
95131

96132
Because Draft.js supports unicode, you must have the following meta tag in the `<head>` `</head>` block of your HTML file:
@@ -128,7 +164,7 @@ comment inputs, [Notes](https://www.facebook.com/notes/), and
128164
| --------- | --------- | --------- | --------- | --------- | --------- |
129165
| IE11, Edge [1, 2]| last 2 versions| last 2 versions| last 2 versions| not fully supported [3] | not fully supported [3]
130166

131-
[1] May need a shim or a polyfill for some syntax used in Draft.js ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls.html#polyfills)).
167+
[1] May need a shim or a polyfill for some syntax used in Draft.js ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls.html#polyfills)).
132168

133169
[2] IME inputs have known issues in these browsers, especially Korean ([docs](https://draftjs.org/docs/advanced-topics-issues-and-pitfalls.html#ime-and-internet-explorer)).
134170

‎docs/Advanced-Topics-Block-Components.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ class EditorWithMedia extends React.Component {
5858
```
5959

6060
If no custom renderer object is returned by the `blockRendererFn` function,
61-
`Editor` will render the default `DraftEditorBlock` text block component.
61+
`Editor` will render the default `EditorBlock` text block component.
6262

6363
The `component` property defines the component to be used, while the optional
6464
`props` object includes props that will be passed through to the rendered
@@ -70,7 +70,7 @@ It is strongly recommended that you use `editable: false` if your custom
7070
component will not contain text.
7171

7272
If your component contains text as provided by your `ContentState`, your custom
73-
component should compose a `DraftEditorBlock` component. This will allow the
73+
component should compose an `EditorBlock` component. This will allow the
7474
Draft framework to properly maintain cursor behavior within your contents.
7575

7676
By defining this function within the context of a higher-level component,

‎docs/Overview.md

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Draft.js is a framework for building rich text editors in React, powered by an i
88

99
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
1010

11-
Draft.js was introduced at [React.js Conf](http://conf.reactjs.com/) in February 2016.
11+
Draft.js was introduced at [React.js Conf](https://conf2016.reactjs.org/schedule.html#rich-text-editing-with-react) in February 2016.
1212

1313
<iframe width="650" height="365" src="https://www.youtube.com/embed/feUYwoLhE_4" frameborder="0" allowfullscreen></iframe>
1414

@@ -17,15 +17,15 @@ Draft.js was introduced at [React.js Conf](http://conf.reactjs.com/) in February
1717
Draft.js is distributed via npm. It depends on React and React DOM which must also be installed.
1818

1919
```sh
20-
npm install --save draft-js react react-dom
20+
npm install draft-js react react-dom
2121
# or alternately
2222
yarn add draft-js react react-dom
2323
```
2424

2525
Draft.js uses some modern ecmascript features which are not available to IE11 and not part of create-react-app's default babel config. If you're running into problems out-of-the-box try installing a shim or polyfill alongside Draft.
2626

2727
```sh
28-
npm install --save draft-js react react-dom babel-polyfill
28+
npm install draft-js react react-dom babel-polyfill
2929
# or
3030
yarn add draft-js react react-dom es6-shim
3131
```
@@ -66,12 +66,38 @@ ReactDOM.render(
6666
);
6767
```
6868

69+
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.
70+
71+
```js
72+
import React from 'react';
73+
import ReactDOM from 'react-dom';
74+
import {Editor, EditorState} from 'draft-js';
75+
76+
function MyEditor() {
77+
const [editorState, setEditorState] = React.useState(
78+
EditorState.createEmpty()
79+
);
80+
81+
return (
82+
<Editor
83+
editorState={editorState}
84+
onChange={editorState => setEditorState(editorState)}
85+
/>
86+
);
87+
}
88+
89+
ReactDOM.render(
90+
<MyEditor />,
91+
document.getElementById('container')
92+
);
93+
```
94+
6995
Because Draft.js supports unicode, you must have the following meta tag in the `<head></head>` block of your HTML file:
7096

7197
```html
7298
<meta charset="utf-8" />
7399
```
74100

75-
`Draft.css` should be included when rendering the editor. Learn more about [why](/docs/advanced-topics-issues-and-pitfalls.html#missing-draft-css).
101+
`Draft.css` should be included when rendering the editor. Learn more about [why](/docs/advanced-topics-issues-and-pitfalls.html#missing-draftcss).
76102

77103
Next, let's go into the basics of the API and learn what else you can do with Draft.js.

‎examples/draft-0-10-0/playground/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
"dependencies": {
66
"codemirror": "^5.32.0",
77
"draft-convert": "^2.0.1",
8-
"draft-js": "file:../../../",
8+
"draft-js": "file:../../..",
99
"immutable": "^3.8.2",
1010
"react": "^16.2.0",
1111
"react-codemirror2": "^3.0.7",
1212
"react-dom": "^16.2.0",
1313
"react-json-tree": "^0.11.0",
1414
"react-panelgroup": "^1.0.5",
15-
"react-scripts": "1.0.17"
15+
"react-scripts": "^1.1.5"
1616
},
1717
"scripts": {
1818
"start": "react-scripts start",

‎examples/draft-0-10-0/playground/src/DraftJsPlaygroundContainer.react.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const gkx = require('gkx');
3333

3434
const convertFromHTML = gkx('draft_refactored_html_importer')
3535
? require('convertFromHTMLToContentBlocks2')
36-
: require('convertFromHTMLToContentBlocks');
36+
: require('convertFromHTMLToContentBlocks_DEPRECATED');
3737

3838
type Props = any;
3939
type State = any;

0 commit comments

Comments
 (0)