React

[dextel2]

Could you show an integration with ReactJS?

[suitux]

For example like:

'use client'

import QuillResize from 'quill-resize-module'
import React, { useRef } from 'react'
import ReactQuill, { Quill } from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import './index.css'

Quill.register('modules/resize', QuillResize)

interface MarkdownEditorProps {
  className?: string
}

const MarkdownEditor = ({ className }: MarkdownEditorProps) => {
  const quillRef = useRef<ReactQuill>(null)

  const imageHandler = () => {
    var range = quillRef.current!.getEditorSelection()
    var value = prompt('What is the image URL')
    if (value) {
      quillRef.current!.editor!.insertEmbed(range!.index, 'image', value, 'user')
    }
  }

  return (
    <ReactQuill
      ref={quillRef}
      className={className}
      theme='snow'
      onChange={console.log}
      modules={{
        resize: {
          modules: ['Resize', 'DisplaySize', 'Toolbar']
        },
        toolbar: {
          container: [
            [{ header: [1, 2, 3, 4, 5, 6, false] }, 'bold', 'italic', 'underline', 'strike'],
            ['blockquote'],
            ['link', 'image', 'video'],

            [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
            [{ align: [] }, { indent: '-1' }, { indent: '+1' }],

            [{ color: [] }, { background: [] }]
          ],
          handlers: {
            image: imageHandler
          }
        }
      }}
    />
  )
}

export default MarkdownEditor

``