Add helpful placeholder text to CodeMirror elements (#1816)

Author: mkst

frontend/src/app/(navfooter)/new/NewScratchForm.tsx

@@ -391,18 +391,18 @@ export default function NewScratchForm({
                     valueVersion={valueVersion}
                     onChange={setAsm}
                     extensions={basicSetup}
+                    placeholder="Place your GAS-compatible assembly code here."
                 />
             </div>
             <div className="flex h-[200px] flex-col">
-                <FormLabel small="(any typedefs, structs, and declarations you would like to include go here; typically generated with m2ctx.py)">
-                    Context
-                </FormLabel>
+                <FormLabel small="(optional)">Context</FormLabel>
                 <CodeMirror
                     className="w-full flex-1 overflow-hidden rounded border border-[color:var(--g500)] bg-[color:var(--g200)] [&_.cm-editor]:h-full"
                     value={context}
                     valueVersion={valueVersion}
                     onChange={setContext}
                     extensions={[basicSetup, cpp()]}
+                    placeholder="Add any typedefs, structs, and declarations here."
                 />
             </div>
 

frontend/src/components/Editor/CodeMirror.module.scss

@@ -13,6 +13,10 @@
         cursor: text;
     }
 
+    :global(.cm-placeholder) {
+        font-style: italic;
+    }
+
     :global(.cm-gutters),
     :global(.cm-content),
     :global(.cm-tooltip-hover) {

frontend/src/components/Editor/CodeMirror.tsx

@@ -7,7 +7,7 @@ import {
 } from "react";
 
 import { type Extension, EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
+import { EditorView, placeholder } from "@codemirror/view";
 import clsx from "clsx";
 import { useDebouncedCallback } from "use-debounce";
 
@@ -49,6 +49,7 @@ export interface Props {
     className?: string;
     viewRef?: RefObject<EditorView | null>;
     extensions: Extension; // const
+    placeholder?: string;
 }
 
 export default function CodeMirror({
@@ -60,6 +61,7 @@ export default function CodeMirror({
     className,
     viewRef: viewRefProp,
     extensions,
+    placeholder: placeholderText,
 }: Props) {
     const { ref: el, width } = useSize<HTMLDivElement>();
 
@@ -96,6 +98,7 @@ export default function CodeMirror({
             state: EditorState.create({
                 doc: valueRef.current,
                 extensions: [
+                    placeholder(placeholderText || ""),
                     EditorState.transactionExtender.of(
                         ({ docChanged, newDoc, newSelection }) => {
                             // value / onChange

frontend/src/components/Scratch/Scratch.tsx

@@ -298,6 +298,7 @@ export default function Scratch({
                             }}
                             onSelectedLineChange={setSelectedSourceLine}
                             extensions={cmExtensionsSource}
+                            placeholder="Write the code for the function you are matching here."
                         />
                     </Tab>
                 );
@@ -322,6 +323,7 @@ export default function Scratch({
                                 setScratch({ context: value });
                             }}
                             extensions={cmExtensionsContext}
+                            placeholder="Add your typedefs, structs, and declarations here."
                         />
                     </Tab>
                 );