Issue ouverte · Issue #1012 Editor toolbar icons missing on mobile since beta.30 (getElement throws on .CodeMirror textarea) · @fabiomrbarbosa
On iOS Safari (and the home-screen app), the Markdown editor toolbar renders with no icons. The buttons are there and work, but each is blank. Desktop browsers are fine.
Started with @indiekit/frontend 1.0.0-beta.30. Beta.29 shows the icons on iOS.
CodeMirror 5 picks inputStyle: "contenteditable" on mobile user agents (codemirror.js, option("inputStyle", mobile ? "contenteditable" : "textarea", …)), so on a phone there is no textarea inside .CodeMirror.
Beta.30 changed the lookup in components/textarea/index.js from a plain querySelector to the new getElement helper, which throws when nothing matches:
const $codeMirrorTextarea = getElement(this, “.CodeMirror textarea”);
That line runs after new EasyMDE(...) and before the loop that replaces EasyMDE’s Font Awesome placeholders with the inline SVG icons, so on mobile connectedCallback dies there and the icons are never swapped in. Font Awesome is not loaded (autoDownloadFontAwesome: false), so the buttons stay empty. The label click-to-focus listener is lost as well.
Look the element up leniently and fall back to CodeMirror’s own focus:
const $codeMirrorTextarea = this.querySelector(“.CodeMirror textarea”); this.$label.addEventListener(“click”, () => { if ($codeMirrorTextarea) $codeMirrorTextarea.focus(); else editor.codemirror.focus(); });
editor.codemirror.focus() works for both input styles, so the fallback could be the only branch.
Error: No element matching .CodeMirror textarea.