Font family div for Quill with styled components.

QuillCss.ts

import * as React from "react";
import { styled } from "styled-components";

const QuillFontCssDiv = styled.div<{ $fontFamilies: string[] }>`
    ${props =>
        props.$fontFamilies
            .map(f => {
                const nameHyphenated = f.replaceAll(" ", "-").toLowerCase();
                const name = f;
                return `
.ql-font-${nameHyphenated},
.ql-font span[data-value="${nameHyphenated}"]::before {
font-family: ${name};
}`;
            })
            .join("")}
`;
  
// Register the font families with:
// const Font = Quill.import("formats/font");
// Font.whitelist = fontFamilies.map(f => f.replaceAll(" ", "-").toLowerCase());
// Quill.register(Font, true);
  
export { QuillFontCssDiv };