Insert quillStyles via js

Nuvotion-Visuals · Dec 17, 2023 · a1f1379 · a1f1379
1 parent 2a00bb6
commit a1f1379
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, FC, useMemo, useRef } from 'react'
 import styled from 'styled-components'
-import './quill.css'
-import { StyleHTML } from '../../internal'
+import { StyleHTML, insertCSS } from '../../internal'
+import { quillStyles } from './quillStyles'
 
 interface RichTextEditorProps {
   value: string
@@ -18,6 +18,7 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
   const quillRef = useRef(null)
 
   useEffect(() => {
+    insertCSS(quillStyles)
     import('react-quill').then(() => {
       setLoaded(true)
     })

diff --git a/src/components/RichTextEditor/quill.css → src/components/RichTextEditor/quillStyles.ts b/src/components/RichTextEditor/quill.css → src/components/RichTextEditor/quillStyles.ts
@@ -1,3 +1,4 @@
+export const quillStyles = `
 .quill {
   position: relative;
 }
@@ -546,4 +547,5 @@
   z-index: 1000; /* To ensure it stays above other content */
   background: var(--F_Background);
   border-bottom: 1px solid var(--F_Surface);
-}
+}
+`