Editing react quilljs markdown styling

#webdev #frontend #richtext #markdown

I was creating a markdown editor with Quilljs in my nextjs project with tailwind and had problem styling it since I was using light and dark mode.
Well, here is the hack around it 🎊.

Since i was using tailwind, the best way was to make sure that quilljs elements were receiving some specific stylings from my parent class, so I could control it easily. 🤔🤔🤔💭

This is an edited version of the Quill component

//quill component
import { FC } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
interface EditorProps {
  className: string;
  placeholder: string;
}

const modules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
    ["link", "image"],
    ["clean"],
  ],
};

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

const Editor: FC<EditorProps> = ({ placeholder, className }) => {

  return (
    <>
      <ReactQuill
        className={className}
        placeholder={placeholder}
        modules={modules}
        formats={formats}

      />
    </>
  );
};

export default Editor;

Add this to your root css (global.css,main.css or whatever you use)

// root css file
.quill > * {
  border-color: inherit !important;
  color: inherit !important;
}
.quill > .ql-toolbar {
  /* border radius of the toolbar */
  border-radius: 10px 10px 0 0;
}
.quill > .ql-container {
  /* border radius of the container and for font size*/
  font-size: inherit;
  border-radius: 0 0 10px 10px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  color: inherit !important;
  opacity: 0.76;
}
.ql-snow .ql-picker {
  color: inherit !important;
}
.quill > .ql-container > .ql-editor.ql-blank::before {
  /* for placeholder */
  color: inherit;
}
.ql-snow.ql-toolbar button svg {
  opacity: 0.76;
  color: currentColor;
}
.ql-snow .ql-stroke {
  /* for the border of the editor */
  stroke: currentColor !important;
}
.ql-snow .ql-fill {
  /* for the bg color */
  fill: currentColor !important;
}
.ql-picker-item {
  /* for dropdown */
  color: #444 !important;
}

Use it in your page or component

<Editor
   className="my-4 dark:border-secondary-40 border-gray-500 rounded-md text-gray-800 dark:text-white lg:text-xl text-lg"
   placeholder={"Write something here..."}/>

RESULTS 😍😍😍