fix: cant remove flavor (#1011)

package.json

@@ -23,7 +23,7 @@
     "@graasp/query-client": "2.6.1",
     "@graasp/sdk": "3.8.3",
     "@graasp/translations": "1.23.0",
-    "@graasp/ui": "4.8.0",
+    "@graasp/ui": "4.8.1",
     "@mui/icons-material": "5.15.8",
     "@mui/lab": "5.0.0-alpha.162",
     "@mui/material": "5.15.8",

src/components/item/form/DocumentForm.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import {
-  Alert,
   Box,
   FormControl,
   InputLabel,
@@ -19,6 +18,7 @@ import {
   DocumentItemType,
   ItemType,
 } from '@graasp/sdk';
+import { withFlavor } from '@graasp/ui';
 import TextEditor from '@graasp/ui/text-editor';
 
 import { useBuilderTranslation } from '../../../config/i18n';
@@ -68,14 +68,6 @@ export const DocumentExtraForm = ({
     ],
   );
 
-  const withFlavor = (textView: JSX.Element): JSX.Element => {
-    if (!extra.flavor || extra.flavor === DocumentItemExtraFlavor.None) {
-      return textView;
-    }
-
-    return <Alert severity={extra.flavor}>{textView}</Alert>;
-  };
-
   const handleChangeEditorMode = (mode: string) => {
     // send editor mode change
     onEditorChange?.(mode === EditorMode.Raw.toString());
@@ -125,16 +117,19 @@ export const DocumentExtraForm = ({
         </Box>
 
         <TabPanel value={EditorMode.Rich.toString()}>
-          {withFlavor(
-            <TextEditor
-              id={documentItemId}
-              value={extra.content}
-              onCancel={onCancel}
-              onChange={onContentChange}
-              placeholderText={placeholder}
-              showActions={false}
-            />,
-          )}
+          {withFlavor({
+            content: (
+              <TextEditor
+                id={documentItemId}
+                value={extra.content}
+                onCancel={onCancel}
+                onChange={onContentChange}
+                placeholderText={placeholder}
+                showActions={false}
+              />
+            ),
+            flavor: extra.flavor,
+          })}
         </TabPanel>
         <TabPanel value={EditorMode.Raw.toString()} sx={{ minHeight: '0px' }}>
           <TextField