Text editors support line wrapping

src/App.js

@@ -216,6 +216,7 @@ export default function App(props) {
   const [isDragging, setIsDragging] = useState(false);
   const [configToShare, setConfigToShare] = useState({ canonical: '', version: '', fhirVersion: [], dependencies: '' });
   const [sharedConfig, setSharedConfig] = useState({});
+  const [textWrapped, setTextWrapped] = useState(false);
 
   useEffect(() => {
     async function waitForFSH() {
@@ -313,6 +314,10 @@ export default function App(props) {
     setIsDragging(false);
   }
 
+  function setTextWrap(wrapSelected) {
+    setTextWrapped(wrapSelected);
+  }
+
   function debouncedMove(clientX) {
     if (isDragging) {
       const newPercentage = (clientX / window.innerWidth) * 100;
@@ -409,6 +414,8 @@ export default function App(props) {
             exampleMetadata={exampleFilePaths}
             isWaiting={isWaitingForFSHOutput || isWaitingForFHIROutput}
             saveAll={saveAll}
+            setTextWrap={setTextWrap}
+            textWrapped={textWrapped}
           />
         </div>
         <div className={expandConsole ? classes.collapsedMain : classes.expandedMain}>
@@ -433,6 +440,7 @@ export default function App(props) {
                   isWaiting={isWaitingForFSHOutput}
                   setInitialText={setInitialText}
                   config={configToShare}
+                  textWrapped={textWrapped}
                 />
               </Grid>
               <Grid
@@ -457,6 +465,7 @@ export default function App(props) {
                   setShowNewText={setShowNewFHIRText}
                   isWaiting={isWaitingForFHIROutput}
                   updateTextValue={updateInputFHIRTextValue}
+                  textWrapped={textWrapped}
                 />
               </Grid>
             </Grid>

src/components/CodeMirrorComponent.js

@@ -323,7 +323,8 @@ export default function CodeMirrorComponent(props) {
             'Ctrl-Q': (cm) => {
               cm.foldCode(cm.getCursor());
             }
-          }
+          },
+          lineWrapping: props.textWrapped
         }}
         onChange={(editor, data, value) => {
           updateText(value);

src/components/FSHControls.js

@@ -116,6 +116,7 @@ export default function FSHControls(props) {
   const [fhirVersion, setFhirVersion] = useState('');
   const [dependencies, setDependencies] = useState('');
   const [isGoFSHIndented, setIsGoFSHIndented] = useState(false);
+  const [isGoFSHLineWrap, setIsGoFSHLineWrap] = useState(props.textWrapped);
   const [isSUSHIRunning, setIsSUSHIRunning] = useState(false);
   const [isGoFSHRunning, setIsGoFSHRunning] = useState(false);
   const [isFetchingExample, setIsFetchingExample] = useState(false);
@@ -172,6 +173,12 @@ export default function FSHControls(props) {
     setIsGoFSHIndented(isIndented);
   };
 
+  const updateIsGoFSHWrap = (event) => {
+    const isLineWrapped = event.target.checked;
+    setIsGoFSHLineWrap(isLineWrapped);
+    props.setTextWrap(isLineWrapped);
+  };
+
   async function handleSUSHIClick() {
     if (props.isWaiting) {
       // If SUSHI or GoFSH is in the middle of processes, don't do anything
@@ -388,6 +395,14 @@ export default function FSHControls(props) {
             onChange={updateIsGoFSHIndented}
           />
           <FormHelperText>If set, Convert to FSH will output FSH using path rules</FormHelperText>
+          <FormControlLabel
+            id="goFSHLineWrap"
+            margin="dense"
+            control={<Checkbox checked={isGoFSHLineWrap} color="primary" />}
+            label="Line wrap within code editors"
+            onChange={updateIsGoFSHWrap}
+          />
+          <FormHelperText>If set, FSH Online will display code with line wrapping</FormHelperText>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleCloseConfig} color="primary">
@@ -426,6 +441,7 @@ export default function FSHControls(props) {
                 updateTextValue={updateExampleValue}
                 mode={'fsh'}
                 placeholder={isFetchingExample ? 'Fetching example...' : 'Select an example'}
+                textWrapped={isGoFSHLineWrap}
               />
             </Grid>
           </Grid>

src/components/FSHOutput.js

@@ -32,6 +32,7 @@ export default function FSHOutput(props) {
         delete={handleOpenDeleteModal}
         save={handleSave}
         config={props.config}
+        textWrapped={props.textWrapped}
       />
       {openDeleteModal && (
         <DeleteConfirmationModal

src/components/JSONOutput.js

@@ -421,6 +421,7 @@ export default function JSONOutput(props) {
         isExamples={false}
         delete={handleOpenDeleteConfirmation}
         save={() => handleSave(displayValue, name)}
+        textWrapped={props.textWrapped}
       />
       {openDeleteConfirmation && renderDeleteModal()}
     </>

src/tests/components/FSHControls.test.js

@@ -242,6 +242,52 @@ it('calls GoFSH with the indent option if the configuration checkbox is checked'
   });
 });
 
+it('displays code with line wrapping in the code editors if the configuration checkbox is checked', async () => {
+  const examplePatient = {
+    resourceType: 'Patient',
+    id: 'MyPatient',
+    gender: 'female'
+  };
+  const simpleFsh = ['Instance: MyPatient', 'InstanceOf: Patient', 'Usage: #example', '* gender = #female'].join('\n');
+  const onGoFSHClick = jest.fn();
+  const resetLogMessages = jest.fn();
+  const setTextWrap = jest.fn();
+  const runGoFSHSpy = jest.spyOn(fshHelpers, 'runGoFSH').mockReset().mockResolvedValue({ fsh: simpleFsh, config: {} });
+  const { getByRole, getByLabelText } = render(
+    <FSHControls
+      onGoFSHClick={onGoFSHClick}
+      gofshText={[{ def: JSON.stringify(examplePatient, null, 2) }]}
+      resetLogMessages={resetLogMessages}
+      exampleConfig={[]}
+      setTextWrap={setTextWrap}
+      textWrapped={false}
+    />,
+    container
+  );
+
+  const configButton = getByRole('button', { name: /Configuration/i });
+  fireEvent.click(configButton);
+  const textWrapCheckbox = getByLabelText('Line wrap within code editors');
+  expect(textWrapCheckbox).not.toBeChecked();
+  fireEvent.click(textWrapCheckbox);
+  const button = document.querySelector('[testid=GoFSH-button]');
+  act(() => {
+    button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+  });
+
+  await waitFor(() => {
+    expect(textWrapCheckbox).toBeChecked();
+    expect(resetLogMessages).toHaveBeenCalledTimes(1);
+    expect(runGoFSHSpy).toHaveBeenCalledWith([JSON.stringify(examplePatient, null, 2)], {
+      dependencies: [],
+      indent: false
+    }); // No IG resource added because canonical and version set to defaults
+    expect(onGoFSHClick).toHaveBeenCalledTimes(2);
+    expect(onGoFSHClick).toHaveBeenCalledWith('', true); // Loading
+    expect(onGoFSHClick).toHaveBeenCalledWith(simpleFsh, false);
+  });
+});
+
 it('uses user provided canonical when calling runSUSHI', async () => {
   const onClick = jest.fn();
   const resetLogMessages = jest.fn();