From 766aee6a9258f3d001001884c3f80370776348c1 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 30 Aug 2024 15:45:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20code=20background=20da?=
 =?UTF-8?q?rkened=20on=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 CHANGELOG.md                                  |  1 +
 .../doc-editor/components/BlockNoteEditor.tsx | 25 +++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e04a11bb..2e40099d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 89c7ccda..59843ed4 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/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} />