React-quill: Adding a source code button to toolbar

[matthewfbenjamin]

This is more of a question than an issue, but I am trying to implement a source code button on the toolbar (as you can see in the codepen example and this issue on quill) but I'm having trouble doing that with react-quill. Any suggestions? I added my code to the bottom too.

Quill version:

• [X ] 1.0.0-rc.3

const CustomToolbar = () => (
  <div id="toolbar">
    <span className='ql-formats'>
        <select className="ql-font">
            <option value="serif"></option>
            <option value="monospace"></option>
            <option defaultValue></option>
        </select>
        <select className="ql-size">
            {/*<option value="8"></option>
            <option value="9"></option>
            <option value="10"></option>
            <option value="11"></option>
            <option value="12"></option>
            <option value="13"></option>
            <option value="14"></option>
            <option value="16"></option>
            <option value="18"></option>
            <option value="24"></option>
            <option value="36"></option>*/}
        </select>
        <select className="ql-color"></select>
        <select className="ql-background"></select>
    </span>
    <span className='ql-formats'>
        <select className="ql-header">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option defaultValue></option>
        </select>
    </span>
    <span className='ql-formats'>
        <button className="ql-bold"></button>
        <button className="ql-italic"></button>
        <button className="ql-underline"></button>
        <button className="ql-strike"></button>
    </span>
    <span className='ql-formats'>
        <button className='ql-list' value='ordered'></button>
        <button className='ql-list' value='bullet'></button>
    </span>
    <span className='ql-formats'>
        <button className="ql-blockquote"></button>
        <button className="ql-code-block"></button>
    </span>
    <span className='ql-formats'>
        <button className="ql-script" value="sub"></button>
        <button className="ql-script" value="super"></button>
    </span>
    <span className='ql-formats'>
        <select className="ql-align"></select>
    {/*<button className="ql-insertStar">
      <CustomButton />
    </button>*/}
    </span>
    <span className='ql-formats'>
        <button className="ql-link"></button>
        <button className="ql-image"></button>
        <button className="ql-video"></button>
    </span>
    <span className='ql-formats'>
        <button className='ql-showhtml'></button>
    </span>
  </div>
)

class App extends Component {
    constructor(props) {
    super(props)
    const modules = {
        imageDrop: true,
        imageResize: {},
        toolbar: "#toolbar"
    }
    const formats = [
        'header',
        'bold', 'italic', 'underline', 'strike',
        'blockquote', 'code-block',
        'list', 'bullet',
        'script',
        'indent',
        'link', 'image',
        'size',
        'color', 'background'
    ]
    this.state = {
        text: '',
        modules,
        formats
    }
    this.handleChange = this.handleChange.bind(this)
  }

    handleChange(value) {
        this.setState({ text: value })
    }

    render() {
        return (
            <div>
                <CustomToolbar />
                <ReactQuill id='editor' theme='snow' modules={this.state.modules} value={this.state.text} onChange={this.handleChange} placeholder='test' />
            </div>
        )
    }
}

export default App;

[alexkrolick]

How about this: https://codepen.io/alexkrolick/pen/XgaVVX

[matthewfbenjamin]

@alexkrolick thanks for the help!

[theskillwithin]

This doesn't allow the user to edit directly the html tho

[alexkrolick]

It does; if you click "raw", edit the HTML, then click "raw" again, the wysiwyg will have updated to reflect the new content. Note that only formats allowed by the editor will be accepted - it's using the HTML paste API.

[nitannn]

Great to see that this was possible with react-quill.

However, recently tried with react-quill 1.3.3 and react 16.8.3 and it returns Given range isn't in document error.

I believe it's because the solution has child components in the QuillEditor *.

Any workarounds for this? Thanks!