Quill editor: Make toolbar visible on long texts (#1464)

* FormRichTextField: Make the toolbar always visible
Set the ql-toolbar to sticky so now the toolbar is always visible regardless of the editor's height.
Should make formatting long texts easier

* AdminLayout.tsx: Fix header
The way header was implemented caused some overlapping with other DOM elements such as Quill Editor, which made the toolbar ineffective when the ql editor's height is big enough

src/components/common/form/FormRichTextField.tsx

@@ -5,9 +5,9 @@ import { Typography } from '@mui/material'
 
 import { translateError } from 'common/form/useForm'
 import { TranslatableField } from 'common/form/validation'
+import { styled } from '@mui/material/styles'
 
 import 'react-quill/dist/quill.snow.css'
-
 import ReactQuill, { Quill } from 'react-quill'
 
 import BlotFormatter from 'quill-blot-formatter/'
@@ -27,6 +27,15 @@ export type FormRichTextFieldProps = {
   name: string
 }
 
+const StyledGrid = styled('div')(() => ({
+  ['& .ql-toolbar.ql-snow']: {
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+    backgroundColor: 'white',
+  },
+}))
+
 export default function FormRichTextField({ name }: FormRichTextFieldProps) {
   const { t } = useTranslation()
   const [, meta] = useField(name)
@@ -96,13 +105,15 @@ export default function FormRichTextField({ name }: FormRichTextFieldProps) {
       )}
       <Field name={name}>
         {({ field }: { field: FieldInputProps<string> }) => (
-          <ReactQuill
-            ref={reactQuillRef}
-            modules={modules}
-            theme="snow"
-            value={field.value}
-            onChange={field.onChange(field.name)}
-          />
+          <StyledGrid>
+            <ReactQuill
+              ref={reactQuillRef}
+              modules={modules}
+              theme="snow"
+              value={field.value}
+              onChange={field.onChange(field.name)}
+            />
+          </StyledGrid>
         )}
       </Field>
       {meta.touched && meta.error && (

src/components/common/navigation/AdminLayout.tsx

@@ -11,8 +11,11 @@ import { items } from './adminMenu'
 import HoverMenu from './HoverMenu'
 import PanelFooter from './PanelFooter'
 import CustomListItem from './CustomListItem'
-import { AdminAppBar } from './AdminAppBar'
 import AdminMenu from 'components/client/layout/nav/AdminMenu'
+import Link from 'next/link'
+import { routes } from 'common/routes'
+import PictureLogo from '/public/android-chrome-192x192.png'
+import Image from 'next/image'
 
 const PREFIX = 'AdminLayout'
 const drawerWidth = 200
@@ -32,7 +35,6 @@ const StyledBox = styled(Box)({
   [`& .${classes.appbarHeader}`]: {
     width: `calc(100% - ${drawerWidth}px)`,
     height: 64,
-    marginLeft: '6rem',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
@@ -67,6 +69,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'flex-end',
   padding: theme.spacing(0, 1),
+
   // necessary for content to be below app bar
   ...theme.mixins.toolbar,
 }))
@@ -114,17 +117,20 @@ export default function AdminLayout({ children }: Props) {
   const toggleMenu = useCallback(() => setOpen((open) => !open), [])
   return (
     <StyledBox className={classes.wrapper}>
-      <AdminAppBar isOpen={open}>
-        <Box className={classes.appbarHeader}>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <IconButton>
-              <Notifications color="info" />
-            </IconButton>
-            <AdminMenu />
-          </Box>
-        </Box>
-      </AdminAppBar>
       <Drawer variant="permanent" open={open} theme={theme}>
+        <Box
+          sx={{
+            display: 'flex',
+            position: 'absolute',
+            left: 5,
+            top: 9,
+            padding: theme.spacing(0, 1),
+          }}>
+          <Link href={routes.admin.index} passHref>
+            {/* A11Y TODO: Translate alt text */}
+            <Image src={PictureLogo} width={40} height={40} alt={'logo'} />
+          </Link>
+        </Box>
         <DrawerHeader />
         <List sx={{ p: '2rem .5rem', height: '100%', position: 'relative' }}>
           {items.map(({ items, menu, icon }, index) => (
@@ -140,7 +146,16 @@ export default function AdminLayout({ children }: Props) {
       </Drawer>
 
       <Box component="main" sx={{ flexGrow: 1 }}>
-        <DrawerHeader />
+        <DrawerHeader>
+          <Box className={classes.appbarHeader}>
+            <Box sx={{ display: 'flex', alignItems: 'center', paddingRight: 15 }}>
+              <IconButton>
+                <Notifications color="info" />
+              </IconButton>
+              <AdminMenu />
+            </Box>
+          </Box>
+        </DrawerHeader>
         {children}
       </Box>
       <PanelFooter>