zenoamaro / react-quill Goto Github PK

As recommended in #31 as well as the Quill docs, passing false to the styles prop produces the following warning:

Warning: Failed propType: Invalid prop `styles` of type `boolean` supplied to `Quill`, expected `object`. Check the render method of `Quill`.

Hi, @zenoamaro I got an error with webpack.

Error: ./~/react-quill/~/quill/dist/quill.js
Critical dependencies:
6:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/react-quill/~/quill/dist/quill.js 6:478-485

Related code is

require('../../../../node_modules/react-quill/node_modules/quill/dist/quill.base.css');
require('../../../../node_modules/react-quill/node_modules/quill/dist/quill.snow.css');

var styles = {
      '.quill': {
          'border': '1px solid #d5d5d5'
      },
      '.ql-toolbar': {
          'box-shadow': '0 1px 10px rgba(0, 0, 0, .1)'
      },
      '.quill-contents ': {
          'height': '250px'
      }
  };

<ReactQuill
    styles={styles}
    theme="snow"
    value={data.description}
    onChange={this.onTextChange}/>

This project is great. However, I'm experiencing a loss of my selections on selected text editor whenever I move my mouse to the toolbar.
Basically,

1. I select some text in the editor area.
2. I click the Bold icon to make them bold
3. Nothing happens since my selection is lost
4. I continue typing and all subsequent text will appear bold

Tested on Chrome 47.0.2526.80 m

Hi,

Just wondering if there's an existing way to add custom fonts?

Thanks

Any plans for this? I might attempt it in a week or so, if you don't have any plans. I'm actually already using react-quill in 0.14, and other than a few warnings for deprecations, there seems to be no breaking changes.

When hit bold couple of times when writing cursor will move back to the last position that bold is used.

Subj

Both of the main dependencies, quill and react, are behind in their respective versions.

var config = [
  "list",
  "bullet",
  "bold",
  "italic",
  { name: "h1", tag: "H1", prepare: "heading", type: "line" },
  { name: "h2", tag: "H2", prepare: "heading", type: "line" },
  { name: "h3", tag: "H3", prepare: "heading", type: "line" }
]

<ReactQuill
   ...
   formats={config}
/>

Causes:

TypeError: Cannot read property 'tag' of undefined

The error code is:

Normalizer.prototype.addFormat = function(config) {
    if (config.tag != null) {
      this.whitelist.tags[config.tag] = true;
    }
    if (config.parentTag != null) {
      this.whitelist.tags[config.parentTag] = true;
    }
    if (config.style != null) {
      return this.whitelist.styles[config.style] = true;
    }
};

If i require the module with browserify I get issues:

Fatal error: Invalid mapping: {"generated":{"line":14084,"column":7},"source":"webpack:///webpack/universalModuleDefinition","original":{},"name":null}

It works if i require the raw file from the src directory: require("react-quill/src")

in mixin.js:
destroyEditor: function(editor) {
editor.destroy();
},

if the DOM's changed (the editor had been removed) , I get the following error in Chrome: Uncaught TypeError: Cannot read property 'destroy' of undefined. Probably need to add a null check

I'm having an issue where when I press a key the element with .ql-editor loses focus and I can no longer type. This occurs whenever i have an onChange={this.handleEditorChange} prop added. the following example is:

<div className="small-12 columns" style={{border:"1px solid black", padding:"0"}}>

  <ReactQuill
    theme="snow"
    items={ReactQuill.Toolbar.defaultItems}
    className="small-12 columns"
    onChange={this.handleEditorChange}
    defaultValue={this.state.text}
    style={styles.getStyles(['no_side_padding'])}
      styles={{
        ".quill-toolbar":{
          'border-bottom':'1px solid black'
        },
        ".ql-editor":{
          'min-height': '15em'
        }
      }}
    />
</div>

the handleEditorChange is:

handleEditorChange: function(value, delta, source){
        this.setState({
            text: value
        });
}

i suspect that its because setState triggers a re-render, but I don't have any issues with my native form components.

Suggestions?

React (with addons) v0.13.3

Code

let React = require('react');
let ReactQuill = require('react-quill');

let Redactor = React.createClass({

    getInitialState: function() {
        return {
            value: defaultContent
        };
    },

    render: function() {
        return (
            <ReactQuill
                        value={this.state.value}>
                <ReactQuill.Toolbar key="toolbar"
                                    ref="toolbar"
                                    items={ReactQuill.Toolbar.defaultItems} />
                <div key="editor"
                     ref="editor"
                     className="quill-contents"
                     dangerouslySetInnerHTML={{__html:this.state.value}} />
            </ReactQuill>
        );
    }
});

React.render(<Redactor/>,
    document.getElementById('redactor')
);

Error

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

Hi,

I'd like to tweak the markup of the react-quill editor after a user hits the enter key. Specifically, I'd like to add a span tag inside of the last sentence a user has entered.

I tried using the method dangerouslySetInnerHTML(), but it doesn't work. The react-quill component strips out any markup I specifically try to inject into the editor.

Is there any way for me to override this?

Not sure if this is a Quill question or react-quill. This isn't an issue but a question.

I just can't figure out how I'd apply target="_blank" by default to all links generated with react-quill. I can see the formats section, which I'd think I could do something like:

formats = [
  "bold",
  {name: "link", tag: "a", type: "link", target: "_blank"}
];

But I obviously don't understand the quill api properly. Any help ?

If you don't pass a value property to <ReactQuill /> it produces an error: TypeError: html is undefined.

This behavior is present in the latest commit to master (d68d530) but not in the currently released version (0.2.2).

The problem seems to originate from here where this.props.value is used without checking if it exists. this.setEditorContents(editor, this.props.value || ''); seems to fix this issue.

I'm not sure if this is by design, or if this is a regression.

Third example is not working because this.refs.editor and this.refs.toolbar is undefined in the component.js.

The onTextChange function provides a delta argument that gives you the last keystroke.

If I hit the enter key, the delta returns "↵", but I can't query for that in my JS code.

Is there another way to query for certain key strokes?

WARNING in .//react-quill//quill/dist/quill.js
Critical dependencies:
1:538-546 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ .//react-quill//quill/dist/quill.js 1:538-546

Is there currently a way to remove the toolbar through props? I'd like to have the toolbar available in certain instances but not others.

Just curious if there's a reason why the image toolbar button is not included by default. I have it added as a default on a local branch, it sits just to the right of the link button. If you think this is something that SHOULD be added as default I can create a pull request for it.

I'm trying to wrap react-quill in my own components, and use a custom toolbar via the toolbar prop to ReactQuill. There are some issues that combine to prevent me from doing so.

When my component does setState, ReactQuill's shouldComponentUpdate gets called. The equality on this line however will return true on the toolbar prop, causing ReactQuill to update when it should not.

When it is doing this update, the component's state fails to include an editor property. Therefore when it rerenders, destroyEditor fails, it can't call .destroy of undefined.

Any thoughts on this?

Hi, 😃

Currently, react-quill use 'ql-'+item.type as the class name of item, which in some cases is inconvenient for customizing.

For example, I use icomoon to create icons. However, it gives me icons with class name such as icon-blablabla. So I have to modify these class name from icon-blablabla to ql-blablabla manually.
Therefore I hope that react-quill can support customized class name for items. Like:

    renderChoices: function(item, key) {
        return React.DOM.select({
            key: item.label || key,
            title: item.label,
            className: 'ql-'+item.type + ' ' + item.className },     <---- customized class name
            item.items.map(this.renderChoiceItem)
        );
    },

Thanks 😊

I use react-quill,it works nice but as title said.I get lots of warnings when I use react-quill with material-ui. material-ui has fixed it so I hope react-quill will fixed it too.
Thanks!

react version:0.14.2
material-ui version:0.13.3
react-quill 0.3.0

as below

Warning: onDismiss will be removed in favor of explicitly setting open and can be replaced by onRequestClose

Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by Quill.

hi,

I just tried to use react-quill, but something is not quite right with the toolbar:

also I get this console warning:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Quill Toolbar. See https://fb.me/react-warning-keys for more information.

here's how I use it:

<ReactQuill
    ref='bio'
    value={this.state.form.bio}
    onChange={ function(value) { that.handleChangeRichtext('bio', value) } }
/>

not sure what I'm doing wrong here...

When using react-quill component in controlled mode (roundtrip with onChange event and passing back the value through props) and input quickly it will fall into an infinite loop constantly updating editor states (e.g.: <div>abcd</div> updated to <div>abcde</div> back and forth)

<ReactQuill value={project.description}
  theme="snow" onChange={this.onEditorChange.bind(this, 'description')} />

If the uncontrolled mode is used (defaultValue instead of value) the problem goes away.

So I've tried to use the component. But I get the error about the wrong usage of the property dangerouslySetInnerHTML.
I've setup an app showing this.
You can just follow the README to fire it up and see the error in the browser's console.

Any idea what might be wrong?

Would it be possible to add event for clipboard evenets, at least for the paste https://facebook.github.io/react/docs/events.html#clipboard-events ?

Older versions of jsdom have issues building on Node 4.x. Upgrading the jsdom dependency to "jsdom": "^7.0.1", fixes the problem.

However, it seems that as of 7.0.0, jsdom only supports Node 4.x or newer, and apparently the 3.x series of jsdom (which does support < Node 4.x) is now unmaintained.

Since I'm new to this project, and don't know what build environments you need to support, I'll leave the fix for this one up to the maintainers.

I don't think the Quill namespace is exposed yet. I noticed that the change that exposes the Quill namespace happened a month ago while the latest dist is 2 months old.

I struggled a bit with the browser throwing up 'undefined' when accessing the component. It'll be great if you can check this out.

Awesome work with the editor. I am a convert from TinyMCE to Quill.

The current (caaf6ef) default values for the font sizes are:

        { label:'Size', type:'size', items: [
            { label:'Normal',  value:'10px' },
            { label:'Smaller', value:'13px' },
            { label:'Larger',  value:'18px' },
            { label:'Huge',    value:'32px' }
        ]}

I suspect "Normal" should be 13px and "Smaller" then 10px.

Ideally the order would still be "Smaller", "Normal", "Larger", "Huge", but it looks like the first element is assumed to be "Normal"? I haven't investigated this, but it'd be nice if above were the default option order and "Normal" were the default selection.

Hi

I'm trying to set the input focus to my react-quill component.

I tried the following but it doesn't seem to do anything (it works for a normal input field though).

componentDidMount: function(){
  React.findDOMNode(this.refs.quillRef).focus();
},

Any help would be super!

The button is added, but clicking on it does nothing.

Hello,

I have noticed a bunch of errors when using the editor with Snow theme, happening when, for example, moving mouse over dropdown type toolbar items:

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font

<span class="ql-format-group" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats">
  <span class="ql-font ql-picker" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font"><span class="ql-picker-label" data-value="sans-serif">Sans Serif</span><span class="ql-picker-options"><span data-value="sans-serif" class="ql-picker-item ql-selected">Sans Serif</span><span data-value="serif" class="ql-picker-item">Serif</span><span data-value="monospace" class="ql-picker-item">Monospace</span></span></span>
  <select class="ql-font" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font" style="display: none;">
    <option value="sans-serif" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font.$Sans Serif">Sans Serif</option>
    <option value="serif" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font.$Serif">Serif</option>
    <option value="monospace" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Font.$Monospace">Monospace</option>
  </select>
  <span class="ql-format-separator" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.1"></span><span class="ql-size ql-picker" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size"><span class="ql-picker-label" data-value="10px">Normal</span><span class="ql-picker-options"><span data-value="10px" class="ql-picker-item ql-selected">Normal</span><span data-value="13px" class="ql-picker-item">Smaller</span><span data-value="18px" class="ql-picker-item">Larger</span><span data-value="32px" class="ql-picker-item">Huge</span></span></span>
  <select class="ql-size" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size" style="display: none;">
    <option value="10px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Normal">Normal</option>
    <option value="13px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Smaller">Smaller</option>
    <option value="18px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Larger">Larger</option>
    <option value="32px" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Size.$Huge">Huge</option>
  </select>
  <span class="ql-format-separator" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.3"></span><span class="ql-align ql-picker" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment"><span class="ql-picker-label" data-value="center"></span><span class="ql-picker-options"><span data-value="center" class="ql-picker-item ql-selected"></span><span data-value="left" class="ql-picker-item"></span><span data-value="right" class="ql-picker-item"></span><span data-value="justify" class="ql-picker-item"></span></span></span>
  <select class="ql-align" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment" style="display: none;">
    <option value="center" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$center"></option>
    <option value="left" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$left"></option>
    <option value="right" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$right"></option>
    <option value="justify" data-reactid=".0.1.0.0.0.$WelcomeText.$toolbar.$Formats.$Alignment.$justify"></option>
  </select>
</span>

I think that it happens because the theme adds with customised spans for each select and copies all their attributes.

This does not affect the functionality of the plugin it seems.

I get the following warning
WARNING in ./~/react-quill/~/quill/dist/quill.js Critical dependencies: 6:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ./~/react-quill/~/quill/dist/quill.js 6:478-485

Only the text is sent in the onChange event

current

onChange(value)

expected

onChange(value, delta, source)

I've tried passing a callback into these 3 props, as stated in the react-quill API, and haven't seen anything get returned. I checked in component.js and I see that at line 225 it calls onChange (which I do receive updates for). I need onKeyUp to register that a user has hit the enter key but I don't see onKeyUp, onKeyDown, or onKeyPress being used anywhere. Is there anyway to get the key code for enter other than these 3 functions?

I remember it works well but today is not.
I use chrome which version is 46.I can't set color or size of fonts.when I select fonts and click color.it will unselect fonts,so I can't set it.

<QuillReact modules={{ 'image-tooltip': true }} theme={"snow"} value={this.state.message} onChange={this._handleTextChange} />

Unless I am doing something wrong, this should add the image icon to the end of the toolbar. But it seems to just show the toolbar but without image icon.
Thanks.

Is there a way to add a placeholder text to the editor, and also is there a way to listen to the 'selection-change' event?

I am trying to load earlier saved HTML content into react-quill.

Example 3 (setting content using dangerouslySetInnerHTML) isn't working for me.

As an alternative, I tried to access editor instance in componentDidMount() and set the HTML content using this.refs.quill.getEditor().setHTML({this.props.content});

However, getEditor() returns 'undefined' in componentDidMount()

If I use the same getEditor() later, say in an onChange event, i am able to access the underlying editor.

For now, i am accessing the DOM via getDOMNode() to set the initial HTML content.

It will be great if you can look into it.

The problem:
If I do not manually include the stylesheet in my application.scss, the editor shows as follows:

What's strange is that after including it in my application.scss

Styles do load, but collide:

I had in mind a couple of ways of fixing this.

By including only the dist/quill.js like so:
import Editor from "react-quill/node_modules/quill/dist/quill.js";

but throws the following error:

The other is to get rid of the styles in dist so I can have more control over them, but that would require to fork and use that which does not seem like the best idea

Any suggestions or advice on this issue @zenoamaro , I really appreciate your help 🙏

this issue occurs in the demo ,I uploaded 2 GIF to describe

Can't seem to find the quill.base.css or snow theme files anywhere in the node_modules package folder or the github repository.

__react 0.14.3 __
I got such error

The Quill API is very rich and provides and provides a variety of useful functions. How can I get my hands on the Quill object? http://quilljs.com/docs/api/#quillprototypegettext

I have the html value that Quill outputs ex:

"<div><span style="color: rgb(230, 0, 0);">This is red; </span> This is not.</div>"

I need to extract the text value which can be done through Quill.prototype.getText() to get...
"This is red; this is not."

I was trying to add link button to toolbar (like original quill editor has https://quilljs.com/), but with no luck. Button appears but it's not working, e.g. tooltip not appears at all.

I'm running React.js 0.12.1 and upgrading to 0.13 or 0.14 is not possible at this time.

I tried installing react-quill via "npm install react-quill". Version 0.3.0 was installed and, looking at react-quill\package.json, the devDependency for react is "^0.12.0".

When I use react-quill as follows in my React component, I get the warning, "Warning: Something is calling a React component directly. Use a factory or JSX instead" from react-with-addons.js, followed by the error _"Uncaught TypeError: Cannot read property '_reactAutoBindMap' of null" from ReactClass.sj.

var ReactQuill = require('react-quill');
var MyComponent = React.createClass({
    render: function() {
        return <ReactQuill value="hi" />;
    }
);

As you can see, I am using JSX.

I saw some discussion on removing React 0.12 support at some point. Does react-quill 0.3.0 still support React 0.12?

For react.rocks -- thanks

After working around #45, running npm test fails.

React 0.12

The dev dependencies require React 0.12, however the component.js file throws an error that React addons are not provided.

Updating the React dependency to "react": "^0.13.0", fixes this, but obviously has the implication that React 0.12 is not supported by the tests.

Test Coverage

Once I did get the test run to complete successfully, it then failed the code coverage threshold:

/react-quill$ npm test
...
Coverage: 20%
Code coverage below threshold: 20 < 50

Which makes sense, given that the test files seem to only have TODOs in them. :)

Adding a config section to the package.json "fixes" this (even if it is cheating a bit).

  "config": {
    "travis-cov": {
      "threshold": 1
    }
  },

I have a branch here that fixes these things if you'd like me to submit a pull request.