Hooked and enabled the Format Code shortcut (CTRL/CMD+I)

Data/AtomicEditor/CodeEditor/MonacoEditor.html

@@ -112,6 +112,12 @@
                 interop.getInstance().invokeShortcut(shortcut);
             });
         }
+
+        function HOST_formatCode() {
+            setupEditor.then((interop) => {
+                interop.getInstance().formatCode();
+            });
+        }
     </script>
 
 </body>

Script/AtomicWebViewEditor/clientExtensions/ClientExtensionEventNames.ts

@@ -30,4 +30,5 @@ export default class ClientExtensionEventNames {
     static ResourceRenamedEvent = "ResourceRenamedEvent";
     static ResourceDeletedEvent = "ResourceDeletedEvent";
     static PreferencesChangedEvent = "PreferencesChangedEvent";
+    static FormatCodeEvent = "FormatCodeEvent";
 }

Script/AtomicWebViewEditor/clientExtensions/ClientExtensionServices.ts

@@ -101,6 +101,7 @@ export class WebViewServicesProvider extends ServicesProvider<Editor.ClientExten
         eventDispatcher.subscribeToEvent(ClientExtensionEventNames.ResourceDeletedEvent, (ev) => this.deleteResource(ev));
         eventDispatcher.subscribeToEvent(ClientExtensionEventNames.CodeSavedEvent, (ev) => this.saveCode(ev));
         eventDispatcher.subscribeToEvent(ClientExtensionEventNames.PreferencesChangedEvent, (ev) => this.preferencesChanged(ev));
+        eventDispatcher.subscribeToEvent(ClientExtensionEventNames.FormatCodeEvent, (ev) => this.formatCode());
     }
 
     /**
@@ -171,6 +172,22 @@ export class WebViewServicesProvider extends ServicesProvider<Editor.ClientExten
         });
     }
 
+    /**
+     * Called when the editor code should be formatted
+     */
+    formatCode() {
+        this.registeredServices.forEach((service) => {
+            try {
+                // Verify that the service contains the appropriate methods and that it can handle the rename
+                if (service.formatCode) {
+                    service.formatCode();
+                }
+            } catch (e) {
+                alert(`Error detected in extension ${service.name}\n \n ${e.stack}`);
+            }
+        });
+    }
+
     /**
      * Called when the editor is requesting to be configured for a particular file
      * @param  {Editor.EditorEvents.EditorFileEvent} ev

Script/AtomicWebViewEditor/clientExtensions/languageExtensions/javascript/JavascriptLanguageExtension.ts

@@ -27,6 +27,9 @@ export default class JavascriptLanguageExtension implements Editor.ClientExtensi
     name: string = "ClientJavascriptLanguageExtension";
     description: string = "Javascript language services for the editor.";
 
+    private editor: monaco.editor.IStandaloneCodeEditor;
+    private active = false;
+
     private serviceLocator: Editor.ClientExtensions.ClientServiceLocator;
 
     /**
@@ -55,14 +58,18 @@ export default class JavascriptLanguageExtension implements Editor.ClientExtensi
      */
     configureEditor(ev: Editor.EditorEvents.EditorFileEvent) {
         if (this.isValidFiletype(ev.filename)) {
-            // TODO: configure the editor
-            //let editor = <AceAjax.Editor>ev.editor;
-            //editor.session.setMode("ace/mode/javascript");
-
-            //editor.setOptions({
-                //enableBasicAutocompletion: true,
-                //enableLiveAutocompletion: true
-            //});
+            this.editor = ev.editor; // cache this so that we can reference it later
+            this.active = true;
+        } else {
+            this.active = false;
         }
     }
+
+    /**
+     * Format the code
+     * @memberOf JavascriptLanguageExtension
+     */
+    formatCode() {
+        // do nothing.  This is being handled by the TypeScriptLanguageExtension
+    }
 }

Script/AtomicWebViewEditor/clientExtensions/languageExtensions/turbobadger/TurboBadgerLanguageExtension.ts

@@ -28,6 +28,7 @@ export default class TurboBadgerLanguageExtension implements Editor.ClientExtens
     description: string = "TurboBadger language services for the editor.";
 
     private serviceLocator: Editor.ClientExtensions.ClientServiceLocator;
+    private active = false;
 
     /**
     * Initialize the language service
@@ -54,7 +55,7 @@ export default class TurboBadgerLanguageExtension implements Editor.ClientExtens
      */
     configureEditor(ev: Editor.EditorEvents.EditorFileEvent) {
         if (this.isValidFiletype(ev.filename)) {
-
+            this.active = true;
             monaco.languages.register({ id: "turbobadger" });
             // TODO: set up syntax hilighter
             // monaco.languages.setMonarchTokensProvider("turbobadger", this.getTokensProvider());
@@ -80,4 +81,13 @@ export default class TurboBadgerLanguageExtension implements Editor.ClientExtens
             });
         }
     }
+
+    /**
+     * Format the code
+     */
+    formatCode() {
+        if (this.active) {
+            alert("Code formatted not available for this syntax.");
+        }
+    }
 }

Script/AtomicWebViewEditor/clientExtensions/languageExtensions/typescript/TypescriptLanguageExtension.ts

@@ -131,6 +131,8 @@ export default class TypescriptLanguageExtension implements Editor.ClientExtensi
      */
     configureEditor(ev: Editor.EditorEvents.EditorFileEvent) {
         if (this.isValidFiletype(ev.filename)) {
+            let editor = ev.editor as monaco.editor.IStandaloneCodeEditor;
+            this.editor = editor; // cache this so that we can reference it later
             this.active = true;
 
             this.overrideBuiltinServiceProviders();
@@ -143,8 +145,6 @@ export default class TypescriptLanguageExtension implements Editor.ClientExtensi
 
             this.filename = ev.filename;
 
-            let editor = ev.editor as monaco.editor.IStandaloneCodeEditor;
-            this.editor = editor; // cache this so that we can reference it later
             // Let's turn some things off in the editor.  These will be provided by the shared web worker
             if (this.isJsFile(ev.filename)) {
                 monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
@@ -287,6 +287,21 @@ export default class TypescriptLanguageExtension implements Editor.ClientExtensi
         }
     }
 
+    /**
+     * Format the code
+     */
+    formatCode() {
+        if (this.active) {
+            const action = this.editor.getAction("editor.action.format");
+            if (action && action.isSupported()) {
+                if (this.editor.getSelection().isEmpty()) {
+                    this.editor.setSelection(this.editor.getModel().getFullModelRange());
+                }
+                action.run();
+            }
+        }
+    }
+
     /**
      * Request the markers to display
      */

Script/AtomicWebViewEditor/editor/editorCommands.ts

@@ -56,6 +56,10 @@ export function configure(fileExt: string, filename: string) {
         filename: filename,
         editor: monacoEditor
     });
+    
+    // Override CMD/CTRL+I since that is going to be used for Format Code and in the editor it is assigned to something else
+    monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_I, null, null);
+
 }
 
 /**
@@ -155,6 +159,14 @@ export function setEditor(editor: any) {
     internalEditor.setInternalEditor(editor);
 }
 
+/**
+ * Called when a resource is getting deleted
+ * @param  {string} path
+ */
+export function formatCode() {
+    serviceLocator.sendEvent(ClientExtensionEventNames.FormatCodeEvent, null);
+}
+
 /**
  * Called when the editor should respond to a host shortcut command
  */
@@ -162,6 +174,7 @@ export function invokeShortcut(shortcut: Editor.EditorShortcutType) {
 
     const ed = internalEditor.getInternalEditor();
     ed.focus();
+
     switch (shortcut) {
         case "cut":
         case "copy":

Script/AtomicWebViewEditor/interop.ts

@@ -234,4 +234,11 @@ export default class HostInteropType {
     invokeShortcut(shortcut: Editor.EditorShortcutType) {
        editorCommands.invokeShortcut(shortcut);
     }
+
+    /**
+     * Format the code inside the editor
+     */
+    formatCode() {
+        editorCommands.formatCode();
+    }
 }

Script/TypeScript/EditorWork.d.ts

@@ -420,6 +420,7 @@ declare module Editor.ClientExtensions {
         delete?(ev: EditorEvents.DeleteResourceEvent);
         rename?(ev: EditorEvents.RenameResourceEvent);
         projectUnloaded?();
+        formatCode?();
         preferencesChanged?(preferences: PreferencesChangedEventData);
     }
 

Source/AtomicEditor/Editors/JSResourceEditor.cpp

@@ -167,7 +167,7 @@ void JSResourceEditor::HandleWebMessage(StringHash eventType, VariantMap& eventD
 
 void JSResourceEditor::FormatCode()
 {
-    //webClient_->ExecuteJavaScript("beautifyCode();");
+    webClient_->ExecuteJavaScript("HOST_formatCode();");
 }
 
 bool JSResourceEditor::OnEvent(const TBWidgetEvent &ev)