Merge pull request #19521 from civicrm/5.34

[civicrm-core.git] / ang / crmMonaco.js

diff --git a/ang/crmMonaco.js b/ang/crmMonaco.js
index 58eee405e40ddbb6b3e3bde5804f8fb88550d1f3..15ff3747d4473ce9bdb605d9912dab50bbac1525 100644 (file)
--- a/ang/crmMonaco.js
+++ b/ang/crmMonaco.js
@@ -3,7 +3,8 @@
 
   // "crmMonaco" is a basic skeletal directive.
   // Example usage: <div crm-monaco ng-model="my.content"></div>
-  angular.module('crmMonaco').directive('crmMonaco', function($timeout) {
+  // Example usage: <div crm-monaco="{readOnly: true}" ng-model="my.content"></div>
+  angular.module('crmMonaco').directive('crmMonaco', function($timeout, $parse) {
     return {
       restrict: 'AE',
       require: 'ngModel',
@@ -13,13 +14,17 @@
         var editor;
         require.config({paths: CRM.crmMonaco.paths});
         require(['vs/editor/editor.main'], function() {
-          var editorEl = $el.find('.crm-monaco-container');
-          editorEl.css({height: Math.round(heightPct * $(window).height())});
-          editor = monaco.editor.create(editorEl[0], {
-            value: ngModel.$modelValue,
+          var options =  {
+            readOnly: false,
             language: 'html',
             // theme: 'vs-dark',
-            theme: 'vs',
+            theme: 'vs'
+          };
+          if ($attr.crmMonaco) {
+            angular.extend(options, $parse($attr.crmMonaco)($scope));
+          }
+          angular.extend(options, {
+            value: ngModel.$modelValue,
             minimap: {
               enabled: false
             },
@@ -36,6 +41,10 @@
             }
           });
 
+          var editorEl = $el.find('.crm-monaco-container');
+          editorEl.css({height: Math.round(heightPct * $(window).height())});
+          editor = monaco.editor.create(editorEl[0], options);
+
           editor.onDidChangeModelContent(_.debounce(function () {
             $scope.$apply(function () {
               ngModel.$setViewValue(editor.getValue());