fix: experimental(ish) patch for focus issues

For some reason MathQuill now requires a single frame to properly render a dynamic math input. So we shall give it that.

Author: Esinko

src/math-editor/editor.js

@@ -671,21 +671,23 @@ class Editor {
             }
 
             // Patch: Do not let lines deactivate, when there's only a math/image element present
-            // TODO: Needed?
-            if (this.activeLine.childNodes.length === 1) {
-                if (
-                    this.activeLine.childNodes[0].nodeName.toLowerCase() === "math" ||
-                    this.activeLine.childNodes[0].nodeName.toLowerCase() === "attachment"
-                ) { // Left
-                    this.activeLine.childNodes[0].contentEditable = true
-                }
-                if (
-                    this.activeLine.childNodes[this.activeLine.childNodes.length - 1].nodeName.toLowerCase() === "math" ||
-                    this.activeLine.childNodes[this.activeLine.childNodes.length - 1].nodeName.toLowerCase() === "attachment"
-                ) { // Right
-                    this.activeLine.childNodes[this.activeLine.childNodes.length - 1].contentEditable = true
+            // TODO: Needed? For now causes issues on chromium.
+            /* if (window.browser === "firefox") {
+                if (this.activeLine.childNodes.length === 1) {
+                    if (
+                        this.activeLine.childNodes[0].nodeName.toLowerCase() === "math" ||
+                        this.activeLine.childNodes[0].nodeName.toLowerCase() === "attachment"
+                    ) { // Left
+                        this.activeLine.childNodes[0].contentEditable = true
+                    }
+                    if (
+                        this.activeLine.childNodes[this.activeLine.childNodes.length - 1].nodeName.toLowerCase() === "math" ||
+                        this.activeLine.childNodes[this.activeLine.childNodes.length - 1].nodeName.toLowerCase() === "attachment"
+                    ) { // Right
+                        this.activeLine.childNodes[this.activeLine.childNodes.length - 1].contentEditable = true
+                    }
                 }
-            }
+            } */
         }
         const observer = new MutationObserver(this.observerCallback)
         this.observerCallback()

src/math-editor/math.js

@@ -138,6 +138,8 @@ const Math = {
         const obj = this.collection[id]
         if (obj.isOpen) return
 
+        // obj.container.contentEditable = false
+
         // Open the element
         // TODO: Refactor this
         if (obj.isOpen === null) {
@@ -147,10 +149,6 @@ const Math = {
             obj.container.removeAttribute("style")
             obj.image.removeAttribute("style")
             obj.isOpen = true
-
-            // MathQuill weirdness
-            obj.dynamicInterface.focus()
-            obj.dynamicInterface.reflow()
         } else {
             obj.container.removeAttribute("style")
             obj.image.removeAttribute("style")
@@ -169,22 +167,23 @@ const Math = {
                 obj.flags.push("ignoreInputDynamic")
                 obj.dynamicInterface.latex(obj.data)
                 obj.latexInterface.latex(obj.data)
-
-                // MathQuill weirdness
-                obj.dynamicInterface.focus()
-                obj.dynamicInterface.reflow()
             } else {
                 throw new Error("Cache miss")
             }
         }
 
-        obj.container.contentEditable = false
-
         if (obj.flags.includes("disableInputDynamic")) obj.labels[0].click() // Forces the raw latex view to open
 
-        // Todo: This should not live in here. This component is dynamic.
-        if (window.setLatexCommandsVisibility) window.setLatexCommandsVisibility(true)
-        this.events.dispatchEvent(new CustomEvent("focus", { detail: obj }))
+        // NOTE: Mathquill requires a single frame (at least) to get ready
+        requestAnimationFrame(() => {
+            // MathQuill weirdness
+            obj.dynamicInterface.focus()
+            obj.dynamicInterface.reflow()
+
+            // Todo: This should not live in here. This component is dynamic.
+            if (window.setLatexCommandsVisibility) window.setLatexCommandsVisibility(true)
+            this.events.dispatchEvent(new CustomEvent("focus", { detail: obj }))
+        })
     },
 
     /**
@@ -333,7 +332,7 @@ const Math = {
             })
         }
 
-        obj.container.contentEditable = true
+        // obj.container.contentEditable = true
         this.events.dispatchEvent(new CustomEvent("blur", { detail: obj }))
         obj.container.setAttribute("math", btoa(obj.data))
     },