Merge pull request #150 from flatironinstitute/stan-editor-text-hint

hint text in stan editor

gui/src/app/FileEditor/StanFileEditor.tsx

@@ -210,24 +210,16 @@ const StanFileEditor: FunctionComponent<Props> = ({
 
   const isCompiling = compileStatus === "compiling";
 
-  const messagePaneNeeded = syntaxWindowVisible || !editedFileContent;
-
-  const window = messagePaneNeeded ? (
-    editedFileContent ? (
-      <StanCompileResultWindow
-        stancErrors={stancErrors}
-        onClose={() => setSyntaxWindowVisible(false)}
-      />
-    ) : (
-      <div className="StanEditorDefaultText">
-        Begin editing or select an example from the left panel
-      </div>
-    )
+  const window = syntaxWindowVisible ? (
+    <StanCompileResultWindow
+      stancErrors={stancErrors}
+      onClose={() => setSyntaxWindowVisible(false)}
+    />
   ) : (
     <></>
   );
 
-  const initialSizes = messagePaneNeeded ? [60, 40] : [100, 0];
+  const initialSizes = syntaxWindowVisible ? [60, 40] : [100, 0];
 
   return (
     <Splitter direction={SplitDirection.Vertical} initialSizes={initialSizes}>
@@ -242,6 +234,7 @@ const StanFileEditor: FunctionComponent<Props> = ({
         readOnly={!isCompiling ? readOnly : true}
         toolbarItems={toolbarItems}
         codeMarkers={stancErrorsToCodeMarkers(stancErrors)}
+        hintTextOnEmpty="Begin editing or select an example from the left panel"
       />
       {window}
     </Splitter>

gui/src/app/FileEditor/TextEditor.tsx

@@ -27,6 +27,7 @@ type Props = {
   toolbarItems?: ToolbarItem[];
   label: string;
   codeMarkers?: CodeMarker[];
+  hintTextOnEmpty?: string;
 };
 
 export type ToolbarItem =
@@ -54,6 +55,7 @@ const TextEditor: FunctionComponent<Props> = ({
   language,
   label,
   codeMarkers,
+  hintTextOnEmpty,
 }) => {
   const handleChange = useCallback(
     (value: string | undefined) => {
@@ -100,6 +102,19 @@ const TextEditor: FunctionComponent<Props> = ({
     );
   }, [codeMarkers, monacoInstance, editorInstance]);
 
+  useEffect(() => {
+    if (!editorInstance) return;
+    if (!hintTextOnEmpty) return;
+    if (text || editedText) {
+      return;
+    }
+    const contentWidget = createHintTextContentWidget(hintTextOnEmpty);
+    editorInstance.addContentWidget(contentWidget);
+    return () => {
+      editorInstance.removeContentWidget(contentWidget);
+    };
+  }, [text, editorInstance, editedText, hintTextOnEmpty]);
+
   /////////////////////////////////////////////////
 
   // Can't do this in the usual way with monaco editor:
@@ -227,4 +242,24 @@ const NotSelectable: FunctionComponent<PropsWithChildren> = ({ children }) => {
   return <div className="NotSelectable">{children}</div>;
 };
 
+const createHintTextContentWidget = (hintText: string) => {
+  return {
+    getDomNode: () => {
+      const node = document.createElement("div");
+      node.style.width = "max-content";
+      node.style.pointerEvents = "none";
+      node.className = "EditorHintText";
+      node.textContent = hintText;
+      return node;
+    },
+    getId: () => "hintText",
+    getPosition: () => {
+      return {
+        position: { lineNumber: 1, column: 1 },
+        preference: [editor.ContentWidgetPositionPreference.EXACT],
+      };
+    },
+  };
+};
+
 export default TextEditor;

gui/src/localStyles.css

@@ -192,3 +192,8 @@ span.EditorTitle {
   height: 100%;
   overflow: auto;
 }
+
+.EditorHintText {
+  font-style: italic;
+  color: #aaa;
+}