💄(frontend) code background darkened on editor

The "code" was not visible on the editor
because the background was too light.
The background color was darkened to make the
"code" more visible.

Author: AntoLC

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
 
 ## Changed
 
+- 💄(frontend) code background darkened on editor #214
 - 🔥(frontend) hide markdown button if not text #213
 
 ## Removed

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -18,6 +18,20 @@ import { randomColor } from '../utils';
 
 import { BlockNoteToolbar } from './BlockNoteToolbar';
 
+const cssEditor = `
+  &, & > .bn-container, & .ProseMirror {
+    height:100%
+  };
+  & .collaboration-cursor__caret.ProseMirror-widget{
+    word-wrap: initial;
+  }
+  & .bn-inline-content code {
+    background-color: gainsboro;
+    padding: 2px;
+    border-radius: 4px;
+  }
+`;
+
 interface BlockNoteEditorProps {
   doc: Doc;
   version?: Version;
@@ -103,16 +117,7 @@ export const BlockNoteContent = ({
   }, [setStore, storeId, editor]);
 
   return (
-    <Box
-      $css={`
-        &, & > .bn-container, & .ProseMirror {
-          height:100%
-        };
-        & .collaboration-cursor__caret.ProseMirror-widget{
-          word-wrap: initial;
-        }
-      `}
-    >
+    <Box $css={cssEditor}>
       {isErrorAttachment && (
         <Box $margin={{ bottom: 'big' }}>
           <TextErrors causes={errorAttachment.cause} />