[REFACTORING] Improve Hedy Editor interface

static/js/app.ts

@@ -14,8 +14,9 @@ import { localDelete, localLoad, localSave } from './local';
 import { initializeLoginLinks } from './auth';
 import { postJson } from './comm';
 import { LocalSaveWarning } from './local-save-warning';
-import { HedyEditor } from './editor';
+import { HedyEditor, EditorType } from './editor';
 import { HedyAceEditorCreator } from './ace-editor';
+import { stopDebug } from "./debugging";
 
 export let theGlobalEditor: HedyEditor;
 export let theModalEditor: HedyEditor;
@@ -28,6 +29,10 @@ let last_code: string;
  * Used to record and undo pygame-related settings
  */
 let pygameRunning = false;
+/**
+ * Represents whether there's an open 'ask' prompt
+ */
+let askPromptOpen = false;
 
 // Many bits of code all over this file need this information globally.
 // Not great but it'll do for now until we refactor this file some more.
@@ -179,7 +184,10 @@ export function initializeCodePage(options: InitializeCodePageOptions) {
   // *** EDITOR SETUP ***  
   const $editor = $('#editor');
   if ($editor.length) {
-    theGlobalEditor = editorCreator.initializeMainEditor($editor);
+    const dir = $("body").attr("dir");
+    theGlobalEditor = editorCreator.initializeEditorWithGutter($editor, EditorType.MAIN, dir);
+    attachMainEditorEvents(theGlobalEditor);
+    error.setEditor(theGlobalEditor);
   }
 
   const anchor = window.location.hash.substring(1);
@@ -234,6 +242,79 @@ export function initializeCodePage(options: InitializeCodePageOptions) {
   $('#program_name').on('blur', () => saveIfNecessary());
 }
 
+function attachMainEditorEvents(editor: HedyEditor) {
+
+  editor.on('change', () => {
+    theLocalSaveWarning.setProgramLength(theGlobalEditor.contents.split('\n').length);
+    // theGlobalEditor.markers.clearIncorrectLines(); => part of skip faulty feauture
+  });  
+
+  // If prompt is shown and user enters text in the editor, hide the prompt.
+  editor.on('change', function() {
+    if (askPromptOpen) {
+      stopit();
+      theGlobalEditor.focus(); // Make sure the editor has focus, so we can continue typing
+    }
+    if ($('#ask-modal').is(':visible')) $('#inline-modal').hide();
+    askPromptOpen = false;
+    $('#runit').css('background-color', '');
+    theGlobalEditor.clearErrors();
+    //removing the debugging state when loading in the editor
+    stopDebug();
+  });
+
+  // *** KEYBOARD SHORTCUTS ***
+
+  let altPressed: boolean | undefined;
+  // alt is 18, enter is 13
+  window.addEventListener ('keydown', function (ev) {
+    const keyCode = ev.keyCode;
+    if (keyCode === 18) {
+      altPressed = true;
+      return;
+    }
+    if (keyCode === 13 && altPressed) {
+      if (!theLevel || !theLanguage) {
+        throw new Error('Oh no');
+      }
+      runit (theLevel, theLanguage, "", function () {
+        $ ('#output').focus ();
+      });
+    }
+    // We don't use jquery because it doesn't return true for this equality check.
+    if (keyCode === 37 && document.activeElement === document.getElementById ('output')) {
+      theGlobalEditor.focus();
+      theGlobalEditor.moveCursorToEndOfFile();
+    }
+  });
+  window.addEventListener ('keyup', function (ev) {
+    triggerAutomaticSave();
+    const keyCode = ev.keyCode;
+    if (keyCode === 18) {
+      altPressed = false;
+      return;
+    }
+  });
+
+  // Removed until we can fix the skip lines feature
+  // We show the error message when clicking on the skipped code
+  // this._editor.on("click", function(e) {
+  //   let position = e.getDocumentPosition()
+  //   position = e.editor.renderer.textToScreenCoordinates(position.row, position.column)
+
+  //   let element = document.elementFromPoint(position.pageX, position.pageY)
+  //   if (element !== null && element.className.includes("ace_incorrect_hedy_code")){
+  //     let mapIndex = element.classList[0].replace('ace_incorrect_hedy_code_', '');
+  //     let mapError = theGlobalSourcemap[mapIndex];
+
+  //     $('#okbox').hide ();
+  //     $('#warningbox').hide();
+  //     $('#errorbox').hide();
+  //     error.show(ClientMessages['Transpile_error'], mapError.error);
+  //   }
+  // });
+}
+
 export interface InitializeViewProgramPageOptions {
   readonly page: 'view-program';
   readonly level: number;
@@ -245,7 +326,10 @@ export function initializeViewProgramPage(options: InitializeViewProgramPageOpti
   theLanguage = options.lang;
 
   // We need to enable the main editor for the program page as well
-  theGlobalEditor = editorCreator.initializeMainEditor($('#editor'));
+  const dir = $("body").attr("dir");
+  theGlobalEditor = editorCreator.initializeEditorWithGutter($('#editor'), EditorType.MAIN, dir);
+  attachMainEditorEvents(theGlobalEditor);
+  error.setEditor(theGlobalEditor);
 }
 
 export function initializeHighlightedCodeBlocks(where: Element) {
@@ -264,9 +348,9 @@ export function initializeHighlightedCodeBlocks(where: Element) {
       // Otherwise, the teacher manual Frequent Mistakes page is SUPER SLOW to load.
       onElementBecomesVisible(preview, () => {
         // Create this example editor
-        const exampleEditor = editorCreator.initializeExampleEditor(preview)
+        const exampleEditor = editorCreator.initializeReadOnlyEditor(preview, dir);
         // Strip trailing newline, it renders better
-        exampleEditor.setValue(exampleEditor.getValue().trimRight());
+        exampleEditor.contents = exampleEditor.contents.trimRight();      
         // And add an overlay button to the editor if requested via a show-copy-button class, either
         // on the <pre> itself OR on the element that has the '.turn-pre-into-ace' class.
         if ($(preview).hasClass('show-copy-button') || $(container).hasClass('show-copy-button')) {
@@ -276,8 +360,8 @@ export function initializeHighlightedCodeBlocks(where: Element) {
             symbol = "⇤";
           }
           $('<button>').css({ fontFamily: 'sans-serif' }).addClass('yellow-btn').text(symbol).appendTo(buttonContainer).click(function() {
-            if (!theGlobalEditor?.isReadOnly()) {
-              theGlobalEditor?.setValue(exampleEditor.getValue() + '\n');
+            if (!theGlobalEditor?.isReadOnly) {
+              theGlobalEditor.contents = exampleEditor.contents + '\n';
             }
             update_view("main_editor_keyword_selector", <string>$(preview).attr('lang'));
             stopit();
@@ -287,7 +371,7 @@ export function initializeHighlightedCodeBlocks(where: Element) {
 
         const levelStr = $(preview).attr('level');
         if (levelStr) {
-          exampleEditor.setHighliterForLevel(parseInt(levelStr, 10));
+          exampleEditor.setHighlighterForLevel(parseInt(levelStr, 10));
         }
       });
     }
@@ -326,7 +410,7 @@ export function stopit() {
       }
   }
 
-  theGlobalEditor.askPromptOpen = false;
+  askPromptOpen = false;
 }
 
 function clearOutput() {
@@ -353,7 +437,7 @@ export async function runit(level: number, lang: string, disabled_prompt: string
   // if the user changes tabs while we're waiting for a response
   const adventureName = currentTab;
 
-  if (theGlobalEditor.askPromptOpen) {
+  if (askPromptOpen) {
     // If there is no message -> don't show a prompt
     if (disabled_prompt) {
       return modal.notifyError(disabled_prompt);
@@ -577,11 +661,11 @@ function removeBulb(){
  * Called when the user clicks the "Try" button in one of the palette buttons
  */
 export function tryPaletteCode(exampleCode: string) {
-  if (theGlobalEditor?.isReadOnly()) {
+  if (theGlobalEditor?.isReadOnly) {
     return;
   }
 
-  theGlobalEditor.setValue(exampleCode + '\n');
+  theGlobalEditor.contents = exampleCode + '\n';
   //As the commands try-it buttons only contain english code -> make sure the selected language is english
   if (!($('#editor').attr('lang') == 'en')) {
       $('#editor').attr('lang', 'en');
@@ -1008,7 +1092,7 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
     }
 
     return new Promise(function(ok) {
-      theGlobalEditor.askPromptOpen = true;
+      askPromptOpen = true;
 
       const input = $('#ask-modal input[type="text"]');
       $('#ask-modal .caption').text(prompt);
@@ -1020,7 +1104,7 @@ export function runPythonProgram(this: any, code: string, sourceMap: any, hasTur
         input.focus();
       }, 0);
       $('#ask-modal form').one('submit', function(event) {
-        theGlobalEditor.askPromptOpen = false;
+        askPromptOpen = false;
         event.preventDefault();
         $('#ask-modal').hide();
 
@@ -1293,11 +1377,8 @@ function get_parsons_code() {
 }
 
 export function get_active_and_trimmed_code() {
-
-  theGlobalEditor.trimTrailingSpace();
-  const code = returnLinesWithoutBreakpoints(theGlobalEditor);
-
-  return code;
+  theGlobalEditor.trimTrailingSpace()
+  return returnLinesWithoutBreakpoints(theGlobalEditor);
 }
 
 export function confetti_cannon(){
@@ -1351,7 +1432,8 @@ export function modalStepOne(level: number){
   createModal(level);
   let $modalEditor = $('#modal-editor');
   if ($modalEditor.length) {
-    theModalEditor = editorCreator.initializeModalEditor($modalEditor)
+    const dir = $("body").attr("dir");
+    theModalEditor = editorCreator.initializeEditorWithGutter($modalEditor, EditorType.MODAL, dir);
   }
 }
 
@@ -1448,7 +1530,7 @@ export function change_keyword_language(start_lang: string, new_lang: string) {
     });
 
     if (response.success) {
-      theGlobalEditor.setValue(response.code);
+      theGlobalEditor.contents = response.code;
       $('#editor').attr('lang', new_lang);
       update_view('main_editor_keyword_selector', new_lang);
     }
@@ -1621,7 +1703,7 @@ function updatePageElements() {
   $('#editor').toggle(isCodeTab);
   $('#debug_container').toggle(isCodeTab);
   $('#program_name_container').toggle(isCodeTab);
-  theGlobalEditor.setEditorMode(false);
+  theGlobalEditor.isReadOnly = false;
 
   const adventure = theAdventures[currentTab];
   if (adventure) {
@@ -1650,7 +1732,7 @@ function updatePageElements() {
     $('[data-view="if-submitted"]').toggle(isSubmitted);
     $('[data-view="if-not-submitted"]').toggle(!isSubmitted);
 
-    theGlobalEditor.setEditorMode(isSubmitted);
+    theGlobalEditor.isReadOnly = isSubmitted;
   }
 }
 
@@ -1670,7 +1752,7 @@ function reconfigurePageBasedOnTab() {
   const adventure = theAdventures[currentTab];
   if (adventure) {
     $ ('#program_name').val(adventure.save_name);
-    theGlobalEditor?.setValue(adventure.start_code);
+    theGlobalEditor.contents = adventure.start_code;    
   }
 }
 
@@ -1769,7 +1851,7 @@ function programNeedsSaving(adventureName: string) {
   // We need to save if the content changed, OR if we have the opportunity to
   // save a program that was loaded from local storage to the server.
   // (Submitted programs are never saved again).
-  const programChanged = theGlobalEditor.getValue() !== adventure.start_code;
+  const programChanged = theGlobalEditor.contents !== adventure.start_code;
   const nameChanged = $('#program_name').val() !== adventure.save_name;
   const localStorageCanBeSavedToServer = theUserIsLoggedIn && adventure.save_info === 'local-storage';
   const isUnchangeable = isServerSaveInfo(adventure.save_info) ? adventure.save_info.submitted : false;
@@ -1779,7 +1861,7 @@ function programNeedsSaving(adventureName: string) {
   // "Run" button will always save regardless of size.
   const wasSavedBefore = adventure.save_info !== undefined;
   const suspiciouslySmallFraction = 0.5;
-  const programSuspiciouslyShrunk = wasSavedBefore && theGlobalEditor.getValue().length < adventure.start_code.length * suspiciouslySmallFraction;
+  const programSuspiciouslyShrunk = wasSavedBefore && theGlobalEditor.contents.length < adventure.start_code.length * suspiciouslySmallFraction;
 
   return (programChanged || nameChanged || localStorageCanBeSavedToServer) && !isUnchangeable && !programSuspiciouslyShrunk;
 }
@@ -1810,7 +1892,7 @@ async function saveIfNecessary() {
 
   console.info('Saving program automatically...');
 
-  const code = theGlobalEditor.getValue();
+  const code = theGlobalEditor.contents;
   const saveName = saveNameFromInput();
 
 

static/js/debugging.ts

@@ -315,7 +315,7 @@ function markCurrentDebuggerLine() {
 export function returnLinesWithoutBreakpoints(editor: HedyEditor) {
 
   // ignore the lines with a breakpoint in it.
-  let code = editor.getValue();
+  let code = editor.contents;
   const breakpoints = editor.getBreakpoints();
   const storage = window.localStorage;
   const debugLines = storage.getItem('debugLine');