react-quill에서 왼쪽 정렬 강제할 수 있게 하기

Quill 에디터는 툴바의 정렬을 사용할 때, 왼쪽 정렬 시 아무것도 설정되지 않아서 부모의 정렬을 따라가게 된다

예를 들어 기본적으로 가운데 정렬이 되어있다면 왼쪽정렬을 해도 표시되는 것은 가운데 정렬로 표시된다

따라서 왼쪽 정렬을 강제할 수 있게 만들어야 했다

왼쪽 정렬을 제외한 나머지 정렬들은 "ql-align-center"와 같이 해당 태그에 정렬옵션에 따른 클래스가 붙는다

그래서 global css에서 해당 옵션들에 대해 text-align을 지정해주면 된다

하지만 왼쪽 정렬은 어떤 클래스도 붙지 않기 때문에 ql-align-left 를 붙여주는 것이 이번 목표였다

당연히 나와 같은 고민을 했던 사람이 있을 것이라 믿고 구글링을 해서 해결할 수 있었다

const Align = ReactQuill.Quill.import("formats/align");
Align.whitelist = ["left", "center", "right", "justify"];
const Icons = ReactQuill.Quill.import("ui/icons");
Icons.align["left"] = Icons.align[""];

// ...

<ReactQuill
  // ...
  modules={{
    toolbar: [
      // ...
      [{ align: ["left", "center", "right", "justify"] }],
    ],
  }}
  />

참고

• https://github.com/quilljs/quill/issues/1969#issuecomment-495140297