From 64ac4a614f13383d415392994706ca4c0edec579 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Fri, 3 May 2019 21:51:17 -0700
Subject: [PATCH] afform_html - Statically load Monaco editor

---
 .../html/CRM/AfformHtml/Page/HtmlEditor.php   | 17 ++++++++---
 .../CRM/AfformHtml/Page/HtmlEditor.tpl        | 30 +++++++++++++++----
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/ext/afform/html/CRM/AfformHtml/Page/HtmlEditor.php b/ext/afform/html/CRM/AfformHtml/Page/HtmlEditor.php
index d2bd59303f..89d4767ea9 100644
--- a/ext/afform/html/CRM/AfformHtml/Page/HtmlEditor.php
+++ b/ext/afform/html/CRM/AfformHtml/Page/HtmlEditor.php
@@ -3,12 +3,21 @@ use CRM_AfformHtml_ExtensionUtil as E;
 
 class CRM_AfformHtml_Page_HtmlEditor extends CRM_Core_Page {
 
+  const MONACO_DIR = 'node_modules/monaco-editor/min/vs';
+
   public function run() {
-    // Example: Set the page-title dynamically; alternatively, declare a static title in xml/Menu/*.xml
-    CRM_Utils_System::setTitle(E::ts('HtmlEditor'));
+    CRM_Utils_System::setTitle(E::ts('Afform HTML Editor'));
 
-    // Example: Assign a variable for use in a template
-    $this->assign('currentTime', date('Y-m-d H:i:s'));
+    CRM_Core_Region::instance('html-header')->add([
+      'markup' => '<meta http-equiv="X-UA-Compatible" content="IE=edge" />',
+    ]);
+    Civi::resources()
+      ->addVars('afform_html', [
+        'paths' => [
+          'vs' => E::url(self::MONACO_DIR),
+        ],
+      ])
+      ->addScriptFile(E::LONG_NAME, self::MONACO_DIR . '/loader.js', CRM_Core_Resources::DEFAULT_WEIGHT, 'html-header');
 
     parent::run();
   }
diff --git a/ext/afform/html/templates/CRM/AfformHtml/Page/HtmlEditor.tpl b/ext/afform/html/templates/CRM/AfformHtml/Page/HtmlEditor.tpl
index 5ce6525659..df123dada3 100644
--- a/ext/afform/html/templates/CRM/AfformHtml/Page/HtmlEditor.tpl
+++ b/ext/afform/html/templates/CRM/AfformHtml/Page/HtmlEditor.tpl
@@ -1,7 +1,27 @@
-<h3>This new page is generated by CRM/AfformHtml/Page/HtmlEditor.php</h3>
+<script type="text/javascript">
+    var myEditor;
+</script>
 
-{* Example: Display a variable directly *}
-<p>The current time is {$currentTime}</p>
+<button onclick="console.log(myEditor.getValue())">Dump to console</button>
+<div id="htmlEditor" style="width:800px;height:600px;border:1px solid grey"></div>
 
-{* Example: Display a translated string -- which happens to include a variable *}
-<p>{ts 1=$currentTime}(In your native language) The current time is %1.{/ts}</p>
+<script>
+    {literal}
+    require.config({
+        paths: CRM.vars.afform_html.paths
+    });
+    require(['vs/editor/editor.main'], function () {
+        myEditor = monaco.editor.create(document.getElementById('htmlEditor'), {
+            value: [
+                '<div afform-helloworld>\nHello {{routeParams.name}}\n</div>'
+            ].join('\n'),
+            language: 'html',
+            theme: 'vs-dark',
+            tabSize: 2,
+            minimap: {
+                enabled: false
+            }
+        });
+    });
+    {/literal}
+</script>
-- 
2.25.1