math: overwrite outline style for visual mode

serlo · Aug 7, 2023 · 7ea11db · 7ea11db
1 parent c5c1073
commit 7ea11db
Showing 1 changed file with 27 additions and 18 deletions.
diff --git 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) {