Comments (13)
@jmaguirrei thank you very much! But I ended suppressing it manually:
console.error = (function(_error) {
return function(message) {
if (typeof message !== 'string' || message.indexOf('component is `contentEditable`') === -1) {
_error.apply(console, arguments)
}
}
})(console.error)
from draft-js.
Yes, Just use suppressContentEditableWarning in your component.
Be aware that this is not related with draftjs but with the use of any div that is content editable, so you may ne having this warning at another component.
That was my case...
Let me know, glad to help.
BTW I dont know how to make a mention on mobile phone... :( do you?
from draft-js.
@martriay Try putting the property at the containing div of the editor, like:
render() {
const
{ isSelectionActive, selectionCoords } = this,
{ size, owner } = this.props,
readOnly = !owner;
return (
<div
style={styles({})['my-editor']}
onClick={this.onFocus}
onBlur={this.onSave}
suppressContentEditableWarning={true}
>
<div id={this.props.id} className='editor-scroll' style={styles({ size })['editor']}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={this.myKeyBindingFn}
handleBeforeInput={this.handleBeforeInput}
readOnly={readOnly}
placeholder={this.placeholder}
ref='editor'
/>
</div>
{
isSelectionActive &&
<div style={styles({ selectionCoords })['selection']}>
MySelection
</div>
}
</div>
);
}
from draft-js.
@jmaguirrei suppressContentEditableWarning
is work fine, Thanks!
from draft-js.
Known problem. http://facebook.github.io/draft-js/docs/advanced-topics-issues-and-pitfalls.html#react-contenteditable-warning
React 15 will give a way to silence this.
from draft-js.
The key warnings could be fixed though.
from draft-js.
Hello, I am still having this warning, but I checked the draft-js code (0.7.0 version) and it has the suppressContentEditableWarning: true,
prop in the file.
I also have react 15.3.1 so, I am wondering what could be wrong.
from draft-js.
@jmaguirrei You must not actually have react-dom 15.3.1. Check npm ls
for the full dependency tree.
from draft-js.
@spicyj Thanks. I wasn't with react-dom 15.3.1, but after upgrade I am still having same warning.
If I go to the function the console shows in ReactDOMComponent.js this is:
function assertValidProps(component, props) {
if (!props) {
return;
}
// Note the use of `==` which checks for null or undefined.
if (voidElementTags[component._tag]) {
!(props.children == null && props.dangerouslySetInnerHTML == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.%s', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : _prodInvariant('137', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : void 0;
}
if (props.dangerouslySetInnerHTML != null) {
!(props.children == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.') : _prodInvariant('60') : void 0;
!(typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML) ? process.env.NODE_ENV !== 'production' ? invariant(false, '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.') : _prodInvariant('61') : void 0;
}
if (process.env.NODE_ENV !== 'production') {
process.env.NODE_ENV !== 'production' ? warning(props.innerHTML == null, 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.') : void 0;
process.env.NODE_ENV !== 'production' ? warning(props.suppressContentEditableWarning || !props.contentEditable || props.children == null, 'A component is `contentEditable` and contains `children` managed by ' + 'React. It is now your responsibility to guarantee that none of ' + 'those nodes are unexpectedly modified or duplicated. This is ' + 'probably not intentional.') : void 0;
process.env.NODE_ENV !== 'production' ? warning(props.onFocusIn == null && props.onFocusOut == null, 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + 'are not needed/supported by React.') : void 0;
}
!(props.style == null || typeof props.style === 'object') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + \'em\'}} when using JSX.%s', getDeclarationErrorAddendum(component)) : _prodInvariant('62', getDeclarationErrorAddendum(component)) : void 0;
}
// and below in the file...
var RESERVED_PROPS = {
children: null,
dangerouslySetInnerHTML: null,
suppressContentEditableWarning: null
};
// and in npm ls
├─┬ react@15.3.1
│ ├── fbjs@0.8.4
│ ├─┬ loose-envify@1.1.0
│ │ └── js-tokens@1.0.3
│ └── object-assign@4.1.0
├── react-addons-perf@15.3.0
├── react-addons-pure-render-mixin@15.3.0
├── react-dom@15.3.1
├─┬ react-hot-loader@1.3.0
│ ├── react-hot-api@0.4.7
│ └─┬ source-map@0.4.4
│ └── amdefine@1.0.0
Any idea why this is happening?
from draft-js.
No, I'm not sure.
from draft-js.
@jmaguirrei did you succeed? I'm having the same issue
from draft-js.
@martriay Nice solution to have as a general escape... Thanks also!
from draft-js.
Encountered this issue on Quilljs, can you guys help me to remove the error message?
from draft-js.
Related Issues (20)
- read-only font size not working
- Ctrl+A selection doesn't work in Firefox when there are action items
- Bug in demo text editor on website HOT 4
- created by DraftEditorTextNode
- state in decorator are memorised
- Add custom classes
- Ordered and unordered lists don't work
- Is/should convertToRaw be based on some kind of open standard? HOT 1
- How to insert texts via google chrome extension to an input created by DraftJS HOT 1
- Pressing return jumps to start of line in Android API 33 HOT 1
- How to change blockType by pressing keyboard
- why draftInlineStyleType only can be default type? HOT 1
- How to get the cursor position? HOT 4
- URGENT :: How to update words arrays in handleStrategy of decorator?
- how to stop the style i add in replaceText?
- pre select inline style, then input in composition mode, the selected inlinestyle not work
- when input some IME punctuation, the editor crashs
- wrong return value of getInlineStyleForCollapsedSelection and getInlineStyleForNonCollapsedSelection
- http://localhost:8000/
- InvalidStateError: 'extend' requires a Range to be added to the Selection HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draft-js.