Merge pull request #2702 from serlo/math-focus-outline

editor(math): visual active states
serlo · Aug 7, 2023 · a6808ed · a6808ed
2 parents bf0455f + 4ae81d3
commit a6808ed
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 19 deletions.
diff --git 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(

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) {