Close math editor through ESC and new button

src/serlo-editor/math/editor.tsx

@@ -1,5 +1,5 @@
 import { faCheckCircle, faCircle } from '@fortawesome/free-regular-svg-icons'
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
+import { faQuestionCircle, faXmark } from '@fortawesome/free-solid-svg-icons'
 import clsx from 'clsx'
 import { useState, useCallback, createRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
@@ -77,8 +77,8 @@ export interface MathEditorProps {
   onEditorChange(visual: boolean): void
   onInlineChange?(inline: boolean): void
   onChange(state: string): void
-
-  onMoveOutRight: (options?: { closeThroughModal?: boolean }) => void
+  closeMathEditorOverlay: () => void
+  onMoveOutRight: () => void
   onMoveOutLeft(): void
   onDeleteOutRight?(): void
   onDeleteOutLeft?(): void
@@ -98,7 +98,7 @@ export function MathEditor(props: MathEditorProps) {
     (event) => {
       event.preventDefault()
       // close overlay
-      props.onMoveOutRight()
+      props.closeMathEditorOverlay()
     },
     {
       enableOnFormTags: true,
@@ -297,11 +297,12 @@ export function MathEditor(props: MathEditorProps) {
             {hasError ? mathStrings.onlyLatex : mathStrings.latexEditorTitle}
           </p>
           <button
-            onClick={() => props.onMoveOutRight({ closeThroughModal: true })}
-            className="mr-0.5 mt-1 text-sm font-bold text-gray-600"
+            onClick={() => props.closeMathEditorOverlay()}
+            className="mr-0.5 mt-1 text-sm font-bold text-gray-600 hover:bg-gray-200 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-700"
+            aria-label="Close math formula editor"
             data-qa="plugin-math-close-formula-editor"
           >
-            x
+            <FaIcon icon={faXmark} />
           </button>
         </div>
         {!isVisualMode && (

src/serlo-editor/plugins/equations/editor/inline-math.tsx

@@ -49,6 +49,7 @@ export function InlineMath(props: InlineMathProps) {
       onChange={onChange}
       onMoveOutRight={onFocusNext}
       onMoveOutLeft={onFocusPrevious}
+      closeMathEditorOverlay={onFocusNext}
     />
   )
 }

src/serlo-editor/plugins/text/components/math-element.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react'
+import React, { useContext, useMemo } from 'react'
 import { Editor, Node, Path, Range, Transforms } from 'slate'
 import {
   ReactEditor,
@@ -31,12 +31,7 @@ export function MathElement({
   const editor = useSlate()
   const selected = useSelected()
   const preferences = useContext(PreferenceContext)
-  const visualModePreferences = !!preferences.getKey(visualEditorPreferenceKey)
-  const [isVisualMode, setIsVisualMode] = useState(visualModePreferences)
-
-  useEffect(() => {
-    setIsVisualMode(visualModePreferences)
-  }, [visualModePreferences])
+  const isVisualMode = !!preferences.getKey(visualEditorPreferenceKey)
 
   const isInsideListElement = useMemo(() => {
     return isElementWithinList(element, editor)
@@ -73,6 +68,7 @@ export function MathElement({
         disableBlock={isInsideListElement}
         onInlineChange={handleInlineChange}
         onChange={(src) => updateElement({ src })}
+        closeMathEditorOverlay={transformOutOfElement}
         onMoveOutRight={transformOutOfElement}
         onMoveOutLeft={() => {
           transformOutOfElement({ reverse: true })
@@ -185,11 +181,9 @@ export function MathElement({
   function transformOutOfElement({
     reverse = false,
     shouldDelete = false,
-    closeThroughModal,
   }: {
     reverse?: boolean
     shouldDelete?: boolean
-    closeThroughModal?: boolean
   } = {}) {
     const unit = 'character'
 
@@ -198,15 +192,6 @@ export function MathElement({
       Transforms.delete(editor, { unit, reverse })
     }
 
-    // When calling this function when the 'x' button of the modal is clicked,
-    // a small timeout is needed to reset the selection. Transforms.deselect()
-    // was not needed
-    if (closeThroughModal) {
-      setTimeout(() => {
-        ReactEditor.focus(editor)
-      })
-    } else {
-      ReactEditor.focus(editor)
-    }
+    ReactEditor.focus(editor)
   }
 }