Make label not share flex with editor

js/views/App.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import { createSignal, lazy, Show } from "solid-js";
+import { createSignal, Show } from "solid-js";
 import WrapperOptions from "../models/WrapperOptions";
 import Editor from "./Editor";
 import LanguageSelector from "./LanguageSelector";
@@ -44,6 +44,7 @@ export default function App({
   const [codeView, setCodeView] = createSignal({ code: "" });
   const [standardInput, setStandardInput] = createSignal("");
   const [wrapperOptions, setWrapperOptions] = createSignal<WrapperOptions>();
+  const [label, setLabel] = createSignal<Element>();
   return (
     <form action="/" method="post" ref={form}>
       {markdown}
@@ -74,6 +75,7 @@ export default function App({
       </div>
       <div id="split">
         <div id="extrafieldsplit">
+          <div>{label}</div>
           <div id="textarea">
             <Editor
               code={code}
@@ -84,6 +86,7 @@ export default function App({
               currentLanguage={currentLanguage}
               form={form}
               setCodeView={setCodeView}
+              setLabel={setLabel}
             />
           </div>
           <StandardInput

js/views/CodeMirrorEditor/index.tsx

@@ -19,7 +19,14 @@ import { indentWithTab } from "@codemirror/commands";
 import { indentUnit } from "@codemirror/language";
 import { Compartment } from "@codemirror/state";
 import { keymap } from "@codemirror/view";
-import { Accessor, createEffect, onCleanup, Setter } from "solid-js";
+import {
+  Accessor,
+  createEffect,
+  createUniqueId,
+  JSXElement,
+  onCleanup,
+  Setter,
+} from "solid-js";
 import CodeView from "../../models/CodeView";
 import { getTabIndentationSignal } from "../../options";
 import "./codemirror.css";
@@ -32,6 +39,7 @@ export default function CodeMirrorEditor({
   currentLanguage,
   form,
   setCodeView,
+  setLabel,
 }: {
   code: Accessor<string>;
   setCode: Setter<string>;
@@ -39,6 +47,7 @@ export default function CodeMirrorEditor({
   currentLanguage: Accessor<string>;
   form: HTMLFormElement;
   setCodeView: Setter<CodeView>;
+  setLabel: Setter<JSXElement>;
 }) {
   const [tabIndentationConfiguration] = getTabIndentationSignal();
   function getTabIndentationExtension() {
@@ -49,11 +58,12 @@ export default function CodeMirrorEditor({
   const tabIndentation = new Compartment();
   const language = new Compartment();
   let avoidChangeNotifications = false;
+  const labelId = createUniqueId();
   let view = new EditorView({
     state: EditorState.create({
       doc: code(),
       extensions: [
-        EditorView.contentAttributes.of({ "aria-labelledby": "code-label" }),
+        EditorView.contentAttributes.of({ "aria-labelledby": labelId }),
         tabIndentation.of(getTabIndentationExtension()),
         keymap.of([{ key: "Ctrl-Enter", run: () => true }]),
         basicSetup,
@@ -93,6 +103,12 @@ export default function CodeMirrorEditor({
       avoidChangeNotifications = false;
     },
   });
+
+  setLabel(
+    <label id={labelId} onClick={() => view.focus()}>
+      {"Code: "}
+    </label>
+  );
   const submitCallback = () => setCode(getValue());
   form.addEventListener("submit", submitCallback);
   onCleanup(() => {
@@ -100,12 +116,5 @@ export default function CodeMirrorEditor({
     submitCallback();
     view.destroy();
   });
-  return (
-    <>
-      <label id="code-label" onClick={() => view.focus()}>
-        {"Code: "}
-      </label>
-      {view.dom}
-    </>
-  );
+  return view.dom;
 }

js/views/Editor.tsx

@@ -14,7 +14,13 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import { Accessor, createResource, createSignal, Setter } from "solid-js";
+import {
+  Accessor,
+  createResource,
+  createSignal,
+  JSXElement,
+  Setter,
+} from "solid-js";
 import CodeView from "../models/CodeView";
 import { getEditorTypeSignal } from "../options";
 import TextAreaEditor from "./TextAreaEditor";
@@ -25,12 +31,14 @@ export default function Editor({
   currentLanguage,
   form,
   setCodeView: setCodeView,
+  setLabel,
 }: {
   code: string;
   onInput(): void;
   currentLanguage: Accessor<string>;
   form: HTMLFormElement;
   setCodeView: Setter<CodeView>;
+  setLabel: Setter<JSXElement>;
 }) {
   const [editorType] = getEditorTypeSignal();
   const [editorConstructor] = createResource(editorType, async (editorType) => {
@@ -51,12 +59,14 @@ export default function Editor({
         currentLanguage,
         form,
         setCodeView,
+        setLabel,
       }) || (
         <TextAreaEditor
           code={code()}
           setCode={setCode}
           setCodeView={setCodeView}
           onInput={onInput}
+          setLabel={setLabel}
         />
       )}
     </>

js/views/TextAreaEditor/index.tsx

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-import { Setter } from "solid-js";
+import { createUniqueId, JSXElement, Setter } from "solid-js";
 import CodeView from "../../models/CodeView";
 
 export default function TextAreaEditor({
@@ -22,12 +22,16 @@ export default function TextAreaEditor({
   code,
   setCode,
   setCodeView,
+  setLabel,
 }: {
   onInput: () => void;
   code: string;
   setCode: Setter<string>;
   setCodeView: Setter<CodeView>;
+  setTextareaId: Setter<string>;
+  setLabel: Setter<JSXElement>;
 }) {
+  let id = createUniqueId();
   let textarea: HTMLTextAreaElement;
   setCodeView({
     get code() {
@@ -37,18 +41,17 @@ export default function TextAreaEditor({
       textarea.value = code;
     },
   });
+  setLabel(<label for={id}>{"Code: "}</label>);
   return (
-    <label>
-      {"Code: "}
-      <textarea
-        onInput={(e) => {
-          onInput();
-          setCode(e.currentTarget.value);
-        }}
-        ref={textarea}
-      >
-        {code}
-      </textarea>
-    </label>
+    <textarea
+      onInput={(e) => {
+        onInput();
+        setCode(e.currentTarget.value);
+      }}
+      ref={textarea}
+      id={id}
+    >
+      {code}
+    </textarea>
   );
 }