From 7ea11db02f726d1928cb3d658142da49dbf9e3b7 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Mon, 7 Aug 2023 13:06:48 +0200
Subject: [PATCH 1/2] math: overwrite outline style for visual mode

---
 src/serlo-editor/math/visual-editor.tsx | 45 +++++++++++++++----------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/serlo-editor/math/visual-editor.tsx b/src/serlo-editor/math/visual-editor.tsx
index 011029a784..ab14bde398 100644
--- a/src/serlo-editor/math/visual-editor.tsx
+++ b/src/serlo-editor/math/visual-editor.tsx
@@ -1,6 +1,7 @@
 import * as MQ from 'react-mathquill'
 
 import { MathEditorProps } from './editor'
+import { tw } from '@/helper/tw'
 
 if (typeof window !== 'undefined') {
   MQ.addStyles()
@@ -89,24 +90,32 @@ export function VisualEditor(props: VisualEditorProps) {
   }
 
   return (
-    <MQ.EditableMathField
-      latex={props.state}
-      onChange={(mathFieldRef) => {
-        // Should always be defined after first render cycle!
-        if (mathFieldRef?.latex) {
-          props.onChange(mathFieldRef.latex())
-        }
-      }}
-      onCopy={(event: React.ClipboardEvent) => {
-        event.stopPropagation()
-      }}
-      onCut={(event: React.ClipboardEvent) => {
-        event.stopPropagation()
-      }}
-      // @ts-expect-error https://github.com/serlo/serlo-editor-issues-and-documentation/issues/67
-      config={mathQuillConfig}
-      mathquillDidMount={onMount}
-    />
+    <div
+      className={tw`
+        rounded-sm focus-within:outline
+        focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-editor-primary
+        [&_.mq-editable-field]:!border-none [&_.mq-editable-field]:!shadow-none
+      `}
+    >
+      <MQ.EditableMathField
+        latex={props.state}
+        onChange={(mathFieldRef) => {
+          // Should always be defined after first render cycle!
+          if (mathFieldRef?.latex) {
+            props.onChange(mathFieldRef.latex())
+          }
+        }}
+        onCopy={(event: React.ClipboardEvent) => {
+          event.stopPropagation()
+        }}
+        onCut={(event: React.ClipboardEvent) => {
+          event.stopPropagation()
+        }}
+        // @ts-expect-error https://github.com/serlo/serlo-editor-issues-and-documentation/issues/67
+        config={mathQuillConfig}
+        mathquillDidMount={onMount}
+      />
+    </div>
   )
 
   function onMount(ref: MathField) {

From 4ae81d3a3d1e7730ce1d9ec6be7edc0041417979 Mon Sep 17 00:00:00 2001
From: Botho <1258870+elbotho@users.noreply.github.com>
Date: Mon, 7 Aug 2023 13:07:05 +0200
Subject: [PATCH 2/2] math: add visual active state for latex editor

---
 src/serlo-editor/math/editor.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/serlo-editor/math/editor.tsx b/src/serlo-editor/math/editor.tsx
index 0eb00b31b9..e564cadf19 100644
--- a/src/serlo-editor/math/editor.tsx
+++ b/src/serlo-editor/math/editor.tsx
@@ -200,7 +200,14 @@ export function MathEditor(props: MathEditorProps) {
             />
           </div>
         ) : (
-          <MathRenderer {...props} ref={anchorRef} />
+          <div
+            className={clsx(
+              props.inline ? 'inline-block' : '',
+              'rounded-md bg-editor-primary-200'
+            )}
+          >
+            <MathRenderer {...props} ref={anchorRef} />
+          </div>
         )}
 
         {renderControlsPortal(