How to add right-to-left support with react-quill

Question

We're using react-quill for a rich text editor, and we need to add rtl support. Any idea of how to do it?

We're building with typescript.

Answer 1

You can also achieve the same thing with CSS only and you don't need to switch between LTR to RTL by clicking on the option.

Here is the CSS style that target's editor's text area and change the direction of text:

.ql-editor {
  direction: rtl;
  text-align: right;
}

Answer 2

Following react-quill's toolbar customization docks, and quill's toolbar customization docks, here's my solution:

import React from 'react'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'


const MyQuill: React.FunctionComponent = () => {


  const modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'direction': 'rtl' }] // this is rtl support
    ],
  }

  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image'
  ]

  return (
    <ReactQuill
      theme="snow"
      modules={modules}
      formats={formats}
    />
  )
}

export default MyQuill