@lrnwebcomponents/code-editor - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

code-editor.amd.js

@@ -1,1 +0,1 @@
-define(["exports","meta","./node_modules/@polymer/polymer/polymer-legacy.js","./node_modules/@polymer/polymer/lib/utils/flattened-nodes-observer.js","./node_modules/@polymer/polymer/lib/legacy/polymer.dom.js","./node_modules/@polymer/polymer/lib/utils/async.js","./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js","./node_modules/@lrnwebcomponents/schema-behaviors/schema-behaviors.js","./lib/monaco-element/monaco-element.js","./lib/code-pen-button.js"],function(_exports,meta,_polymerLegacy,_flattenedNodesObserver,_polymerDom,async,_HAXWiring,_schemaBehaviors,_monacoElement,_codePenButton){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.CodeEditor=void 0;meta=babelHelpers.interopRequireWildcard(meta);async=babelHelpers.interopRequireWildcard(async);function _templateObject_c1cfc9201d9a11e989d9cf44cc2bb76b(){var data=babelHelpers.taggedTemplateLiteral(["\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$=\"[[!title]]\">[[title]]</h3>\n    <monaco-element\n      id=\"codeeditor\"\n      lib-path=\"[[__libPath]]\"\n      value=\"[[editorValue]]\"\n      language=\"[[language]]\"\n      theme=\"[[theme]]\"\n      on-value-changed=\"_editorDataChanged\"\n      font-size$=\"[[fontSize]]\"\n      readonly$=\"[[readOnly]]\"\n    >\n    </monaco-element>\n    <div class=\"code-pen-container\" hidden$=\"[[!showCodePen]]\">\n      <code-pen-button data=\"[[codePenData]]\"></code-pen-button>\n    </div>\n  "],["\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$=\"[[!title]]\">[[title]]</h3>\n    <monaco-element\n      id=\"codeeditor\"\n      lib-path=\"[[__libPath]]\"\n      value=\"[[editorValue]]\"\n      language=\"[[language]]\"\n      theme=\"[[theme]]\"\n      on-value-changed=\"_editorDataChanged\"\n      font-size\\$=\"[[fontSize]]\"\n      readonly\\$=\"[[readOnly]]\"\n    >\n    </monaco-element>\n    <div class=\"code-pen-container\" hidden$=\"[[!showCodePen]]\">\n      <code-pen-button data=\"[[codePenData]]\"></code-pen-button>\n    </div>\n  "]);_templateObject_c1cfc9201d9a11e989d9cf44cc2bb76b=function _templateObject_c1cfc9201d9a11e989d9cf44cc2bb76b(){return data};return data}var CodeEditor=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_c1cfc9201d9a11e989d9cf44cc2bb76b()),is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{title:{type:String},showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},editorValue:{type:String,value:""},value:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:String,value:"16px"},minLines:{type:Number,value:10},maxLines:{type:Number,value:25}},_computeCodePenData:function _computeCodePenData(title,editorValue){return{title:title,html:editorValue}},_modeChanged:function _modeChanged(newValue){this.language=this.mode},_editorDataChanged:function _editorDataChanged(e){this.value=e.detail},updateEditorValue:function updateEditorValue(){var content="",children=this.queryEffectiveChildren("template");if(!children){console.warn("code-editor works best with a template tag provided in light dom");children=(0,_polymerDom.dom)(this).getEffectiveChildNodes();if(0<children.length){for(var j=0,len2=children.length;j<len2;j++){if(babelHelpers.typeof(children[j].tagName)!==("undefined"===typeof void 0?"undefined":babelHelpers.typeof(void 0))){content+=children[j].outerHTML}else{content+=children[j].textContent}}}}else{content=children.innerHTML}this.editorValue=content.trim()},created:function created(){this.__libPath=meta.url+"/../../../monaco-editor/min/vs"},ready:function ready(){var _this=this;this._observer=new _flattenedNodesObserver.FlattenedNodesObserver(this,function(info){if(0<info.addedNodes.length){info.addedNodes.map(function(node){_this.updateEditorValue()})}if(0<info.removedNodes.length){info.removedNodes.map(function(node){_this.updateEditorValue()})}})},attached:function attached(){var _this2=this;async.microTask.run(function(){_this2.$.codeeditor.value=_this2.editorValue;setTimeout(function(){_this2.$.codeeditor.initIFrame()},1e3)});var props={canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Code editor",description:"Edit code in the browser with minor HTML validation",icon:"icons:code",color:"blue",groups:["Code","Development"],handles:[{type:"code",code:"editorValue"}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"}],configure:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"},{property:"editorValue",title:"Code",description:"The code to present to the user",inputMethod:"code-editor",icon:"editor:title"}],advanced:[]}};this.setHaxProperties(props)}});_exports.CodeEditor=CodeEditor});
+define(["exports","meta","./node_modules/@polymer/polymer/polymer-legacy.js","./node_modules/@polymer/polymer/lib/utils/flattened-nodes-observer.js","./node_modules/@polymer/polymer/lib/legacy/polymer.dom.js","./node_modules/@polymer/polymer/lib/utils/async.js","./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js","./node_modules/@lrnwebcomponents/schema-behaviors/schema-behaviors.js","./lib/monaco-element/monaco-element.js","./lib/code-pen-button.js"],function(_exports,meta,_polymerLegacy,_flattenedNodesObserver,_polymerDom,async,_HAXWiring,_schemaBehaviors,_monacoElement,_codePenButton){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.CodeEditor=void 0;meta=babelHelpers.interopRequireWildcard(meta);async=babelHelpers.interopRequireWildcard(async);function _templateObject_82f188f01e1311e9b549515ec9fb67e9(){var data=babelHelpers.taggedTemplateLiteral(["\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n        #codeeditor {\n          height: 100%;\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$=\"[[!title]]\">[[title]]</h3>\n    <monaco-element\n      id=\"codeeditor\"\n      lib-path=\"[[__libPath]]\"\n      value=\"[[editorValue]]\"\n      language=\"[[language]]\"\n      theme=\"[[theme]]\"\n      on-value-changed=\"_editorDataChanged\"\n      font-size$=\"[[fontSize]]\"\n      readonly$=\"[[readOnly]]\"\n    >\n    </monaco-element>\n    <div class=\"code-pen-container\" hidden$=\"[[!showCodePen]]\">\n      <code-pen-button data=\"[[codePenData]]\"></code-pen-button>\n    </div>\n  "],["\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n        #codeeditor {\n          height: 100%;\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$=\"[[!title]]\">[[title]]</h3>\n    <monaco-element\n      id=\"codeeditor\"\n      lib-path=\"[[__libPath]]\"\n      value=\"[[editorValue]]\"\n      language=\"[[language]]\"\n      theme=\"[[theme]]\"\n      on-value-changed=\"_editorDataChanged\"\n      font-size\\$=\"[[fontSize]]\"\n      readonly\\$=\"[[readOnly]]\"\n    >\n    </monaco-element>\n    <div class=\"code-pen-container\" hidden$=\"[[!showCodePen]]\">\n      <code-pen-button data=\"[[codePenData]]\"></code-pen-button>\n    </div>\n  "]);_templateObject_82f188f01e1311e9b549515ec9fb67e9=function _templateObject_82f188f01e1311e9b549515ec9fb67e9(){return data};return data}var CodeEditor=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_82f188f01e1311e9b549515ec9fb67e9()),is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{title:{type:String},showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},editorValue:{type:String,value:""},value:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:String,value:"16px"},minLines:{type:Number,value:10},maxLines:{type:Number,value:25}},_computeCodePenData:function _computeCodePenData(title,editorValue){return{title:title,html:editorValue}},_modeChanged:function _modeChanged(newValue){this.language=this.mode},_editorDataChanged:function _editorDataChanged(e){this.value=e.detail},updateEditorValue:function updateEditorValue(){var content="",children=this.queryEffectiveChildren("template");if(!children){console.warn("code-editor works best with a template tag provided in light dom");children=(0,_polymerDom.dom)(this).getEffectiveChildNodes();if(0<children.length){for(var j=0,len2=children.length;j<len2;j++){if(babelHelpers.typeof(children[j].tagName)!==("undefined"===typeof void 0?"undefined":babelHelpers.typeof(void 0))){content+=children[j].outerHTML}else{content+=children[j].textContent}}}}else{content=children.innerHTML}this.$.codeeditor.value=content.trim()},preProcessHaxNodeToContent:function preProcessHaxNodeToContent(clone){clone.editorValue=null;clone.codePenData=null;clone.value=null;clone.removeAttribute("value");clone.removeAttribute("code-pen-data");return clone},created:function created(){this.__libPath=meta.url+"/../../../monaco-editor/min/vs"},ready:function ready(){var _this=this;this._observer=new _flattenedNodesObserver.FlattenedNodesObserver(this,function(info){if(0<info.addedNodes.length){info.addedNodes.map(function(node){_this.updateEditorValue()})}if(0<info.removedNodes.length){info.removedNodes.map(function(node){_this.updateEditorValue()})}})},attached:function attached(){var _this2=this;async.microTask.run(function(){setTimeout(function(){_this2.$.codeeditor.initIFrame()},1e3)});var props={canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Code editor",description:"Edit code in the browser with minor HTML validation",icon:"icons:code",color:"blue",groups:["Code","Development"],handles:[{type:"code",code:""}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"}],configure:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"},{slot:"",title:"Code",description:"The code to present to the user",inputMethod:"code-editor",icon:"editor:title"}],advanced:[]}};this.setHaxProperties(props)}});_exports.CodeEditor=CodeEditor});

code-editor.es6.js

@@ -24,2 +24,5 @@ import{html,Polymer}from"./node_modules/@polymer/polymer/polymer-legacy.js";import{FlattenedNodesObserver}from"./node_modules/@polymer/polymer/lib/utils/flattened-nodes-observer.js";import{dom}from"./node_modules/@polymer/polymer/lib/legacy/polymer.dom.js";import*as async from"./node_modules/@polymer/polymer/lib/utils/async.js";import"./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";import"./node_modules/@lrnwebcomponents/schema-behaviors/schema-behaviors.js";import"./lib/monaco-element/monaco-element.js";import"./lib/code-pen-button.js";let CodeEditor=Polymer({_template:html`
         }
+        #codeeditor {
+          height: 100%;
+        }
       </style>
@@ -42,2 +45,2 @@ </custom-style>
     </div>
-  `,is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{title:{type:String},showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},editorValue:{type:String,value:""},value:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:String,value:"16px"},minLines:{type:Number,value:10},maxLines:{type:Number,value:25}},_computeCodePenData:function(title,editorValue){return{title:title,html:editorValue}},_modeChanged:function(newValue){this.language=this.mode},_editorDataChanged:function(e){this.value=e.detail},updateEditorValue:function(){var content="",children=this.queryEffectiveChildren("template");if(!children){console.warn("code-editor works best with a template tag provided in light dom");children=dom(this).getEffectiveChildNodes();if(0<children.length){for(var j=0,len2=children.length;j<len2;j++){if(typeof children[j].tagName!==typeof void 0){content+=children[j].outerHTML}else{content+=children[j].textContent}}}}else{content=children.innerHTML}this.editorValue=content.trim()},created:function(){this.__libPath=import.meta.url+"/../../../monaco-editor/min/vs"},ready:function(){this._observer=new FlattenedNodesObserver(this,info=>{if(0<info.addedNodes.length){info.addedNodes.map(node=>{this.updateEditorValue()})}if(0<info.removedNodes.length){info.removedNodes.map(node=>{this.updateEditorValue()})}})},attached:function(){async.microTask.run(()=>{this.$.codeeditor.value=this.editorValue;setTimeout(()=>{this.$.codeeditor.initIFrame()},1e3)});let props={canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Code editor",description:"Edit code in the browser with minor HTML validation",icon:"icons:code",color:"blue",groups:["Code","Development"],handles:[{type:"code",code:"editorValue"}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"}],configure:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"},{property:"editorValue",title:"Code",description:"The code to present to the user",inputMethod:"code-editor",icon:"editor:title"}],advanced:[]}};this.setHaxProperties(props)}});export{CodeEditor};
+  `,is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{title:{type:String},showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},editorValue:{type:String,value:""},value:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:String,value:"16px"},minLines:{type:Number,value:10},maxLines:{type:Number,value:25}},_computeCodePenData:function(title,editorValue){return{title:title,html:editorValue}},_modeChanged:function(newValue){this.language=this.mode},_editorDataChanged:function(e){this.value=e.detail},updateEditorValue:function(){var content="",children=this.queryEffectiveChildren("template");if(!children){console.warn("code-editor works best with a template tag provided in light dom");children=dom(this).getEffectiveChildNodes();if(0<children.length){for(var j=0,len2=children.length;j<len2;j++){if(typeof children[j].tagName!==typeof void 0){content+=children[j].outerHTML}else{content+=children[j].textContent}}}}else{content=children.innerHTML}this.$.codeeditor.value=content.trim()},preProcessHaxNodeToContent:function(clone){clone.editorValue=null;clone.codePenData=null;clone.value=null;clone.removeAttribute("value");clone.removeAttribute("code-pen-data");return clone},created:function(){this.__libPath=import.meta.url+"/../../../monaco-editor/min/vs"},ready:function(){this._observer=new FlattenedNodesObserver(this,info=>{if(0<info.addedNodes.length){info.addedNodes.map(node=>{this.updateEditorValue()})}if(0<info.removedNodes.length){info.removedNodes.map(node=>{this.updateEditorValue()})}})},attached:function(){async.microTask.run(()=>{setTimeout(()=>{this.$.codeeditor.initIFrame()},1e3)});let props={canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Code editor",description:"Edit code in the browser with minor HTML validation",icon:"icons:code",color:"blue",groups:["Code","Development"],handles:[{type:"code",code:""}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"}],configure:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"},{slot:"",title:"Code",description:"The code to present to the user",inputMethod:"code-editor",icon:"editor:title"}],advanced:[]}};this.setHaxProperties(props)}});export{CodeEditor};

code-editor.js

@@ -45,2 +45,5 @@ /**
         }
+        #codeeditor {
+          height: 100%;
+        }
       </style>
@@ -206,5 +209,16 @@ </custom-style>
     }
-    this.editorValue = content.trim();
+    this.$.codeeditor.value = content.trim();
   },
   /**
+   * Ensure fields don't pass through to HAX if in that context
+   */
+  preProcessHaxNodeToContent: function(clone) {
+    clone.editorValue = null;
+    clone.codePenData = null;
+    clone.value = null;
+    clone.removeAttribute("value");
+    clone.removeAttribute("code-pen-data");
+    return clone;
+  },
+  /**
    * created callback
@@ -243,3 +257,2 @@ */
     async.microTask.run(() => {
-      this.$.codeeditor.value = this.editorValue;
       // delay on initial attachement to ensure that dependencies have loaded
@@ -264,3 +277,3 @@ setTimeout(() => {
             type: "code",
-            code: "editorValue"
+            code: ""
           }
@@ -306,3 +319,3 @@ ],
           {
-            property: "editorValue",
+            slot: "",
             title: "Code",
@@ -309,0 +322,0 @@ description: "The code to present to the user",

code-editor.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@polymer/polymer/polymer-legacy.js"),require("@polymer/polymer/lib/utils/flattened-nodes-observer.js"),require("@polymer/polymer/lib/legacy/polymer.dom.js"),require("@polymer/polymer/lib/utils/async.js"),require("@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js"),require("@polymer/polymer/polymer-element.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-legacy.js","@polymer/polymer/lib/utils/flattened-nodes-observer.js","@polymer/polymer/lib/legacy/polymer.dom.js","@polymer/polymer/lib/utils/async.js","@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js","@lrnwebcomponents/schema-behaviors/schema-behaviors.js","@polymer/polymer/polymer-element.js"],n):n((e=e||self).CodeEditor={},e.polymerLegacy_js,e.flattenedNodesObserver_js,e.polymer_dom_js,e.async,null,null,e.polymerElement_js)}(this,function(e,n,t,o,a,i,r,l){"use strict";function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,n){return(u=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function h(e,n){return!n||"object"!=typeof n&&"function"!=typeof n?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):n}function p(e,n,t){return(p="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,n,t){var o=function(e,n){for(;!Object.prototype.hasOwnProperty.call(e,n)&&null!==(e=c(e)););return e}(e,n);if(o){var a=Object.getOwnPropertyDescriptor(o,n);return a.get?a.get.call(t):a.value}})(e,n,t||e)}function m(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function g(){var e=m(['\n      <style>\n        :host {\n          display: block;\n        }\n        iframe {\n          border: none;\n          width: 100%;\n          height: 100%;\n          padding: 0;\n        }\n      </style>\n      <iframe id="iframe"></iframe>\n    ']);return g=function(){return e},e}var y=function(e){function n(){var e;return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),(e=h(this,c(n).call(this))).iframe=null,e}var t,o,a;return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&u(e,n)}(n,l.PolymerElement),t=n,a=[{key:"template",get:function(){return l.html(g())}},{key:"properties",get:function(){return{value:{type:String,value:"",observer:"monacoValueChanged"},eventTypes:{type:Object,value:{ready:"ready",valueChanged:"valueChanged",languageChanged:"languageChanged",themeChanged:"themeChanged"}},language:{type:String,value:"javascript",observer:"monacoLanguageChanged"},theme:{type:String,value:"vs-dark",observer:"monacoThemeChanged"},libPath:{type:String,value:"node_modules/monaco-editor/min/vs"}}}}],(o=[{key:"connectedCallback",value:function(){var e=this;p(c(n.prototype),"connectedCallback",this).call(this),window.addEventListener("message",function(n){e.handleMessage(n)}),setTimeout(function(){e.__init||e.initIFrame()},500)}},{key:"disconnectedCallback",value:function(){var e=this;p(c(n.prototype),"disconnectedCallback",this).call(this),window.removeEventListener("message",function(n){e.handleMessage(n)}),this.__init=!1}},{key:"initIFrame",value:function(){var e=this;if(this.iframe=this.shadowRoot.querySelector("#iframe"),this.document&&!this.__init){this.__init=!0;var n=document.createElement("div");n.id="container",this.document.body.appendChild(n);var t="\nvar eventTypes = {\n  ready: 'ready',\n  valueChanged: 'valueChanged',\n  languageChanged: 'languageChanged',\n  themeChanged: 'themeChanged',\n};\n\nclass MonacoEditor {\n  constructor() {\n    this.language = 'javascript';\n    this.value = '';\n    this.editor = null;\n    this.setupEventListener('message', this.handleMessage.bind(this));\n    this.setupEditor();\n  }\n\n  setupEditor() {\n    require.config({ paths: { vs: '".concat(this.libPath,"' } });\n    require(['vs/editor/editor.main'], () => {\n      this.editor = monaco.editor.create(document.getElementById('container'), {\n        value: this.value,\n        language: this.language,\n        scrollBeyondLastLine: false,\n        minimap: {\n          enabled: false\n        }\n      });\n\n      const model = this.editor.getModel();\n      model.onDidChangeContent(() => {\n        const value = model.getValue();\n        this.onValueChanged(value);\n      });\n\n      this.ready();\n    });\n  }\n\n  ready() {\n    setTimeout(() => {\n      this.postMessage(eventTypes.ready, null);\n      this.setupEventListener(\n        eventTypes.valueChanged,\n        this.onValueChanged.bind(this)\n      );\n    }, 100);\n  }\n\n  _handleMessage(data) {\n    switch (data.event) {\n      case eventTypes.valueChanged:\n        this.onInputValueChanged(data.payload);\n        break;\n      case eventTypes.languageChanged:\n        this.onLanguageChanged(data.payload);\n        break;\n      case eventTypes.themeChanged:\n        this.onThemeChanged(data.payload);\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleMessage(message) {\n    try {\n      const data = JSON.parse(message.data);\n      this._handleMessage(data);\n    } catch (error) {\n      console.warn(error);\n      return;\n    }\n  }\n\n  postMessage(event, payload) {\n    window.parent.postMessage(\n      JSON.stringify({ event, payload }),\n      window.parent.location.href\n    );\n  }\n\n  setupEventListener(type, callback) {\n    window.addEventListener(type, data => {\n      callback(data);\n    });\n  }\n\n  onInputValueChanged(newValue) {\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.editor.getModel().setValue(newValue);\n      this.postMessage(eventTypes.valueChanged, newValue);\n    }\n  } \n\n  onValueChanged(newValue) {\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.postMessage(eventTypes.valueChanged, newValue);\n    }\n  }\n\n  onLanguageChanged(newLang) {\n    monaco.editor.setModelLanguage(this.editor.getModel(), newLang);\n  }\n\n  onThemeChanged(newValue) {\n    monaco.editor.setTheme(newValue);\n  }\n}\n\nnew MonacoEditor();\n");this.insertScriptElement({src:"".concat(this.libPath,"/loader.js"),onload:function(){e.insertScriptElement({text:t}),e.insertStyle()}})}}},{key:"handleMessage",value:function(e){try{var n=e.data;"string"==typeof e.data&&(n=JSON.parse(e.data)),this._handleMessage(n)}catch(e){return void console.warn("[monaco-element] Error while parsing message:",e)}}},{key:"_handleMessage",value:function(e){e.event===this.eventTypes.valueChanged?this.dispatchEvent(new CustomEvent("value-changed",{detail:e.payload})):e.event===this.eventTypes.ready&&this.onIFrameReady()}},{key:"onIFrameReady",value:function(){this.monacoValueChanged(this.value),this.monacoLanguageChanged(this.language),this.monacoThemeChanged(this.theme)}},{key:"monacoValueChanged",value:function(e){this.postMessage(this.eventTypes.valueChanged,e)}},{key:"monacoLanguageChanged",value:function(e){this.postMessage(this.eventTypes.languageChanged,e)}},{key:"monacoThemeChanged",value:function(e){this.postMessage(this.eventTypes.themeChanged,e)}},{key:"postMessage",value:function(e,n){this.iframe&&null!=this.iframe.contentWindow&&this.iframe.contentWindow.postMessage(JSON.stringify({event:e,payload:n}),window.location.href)}},{key:"insertScriptElement",value:function(e){var n=e.src,t=e.text,o=e.onload,a=this.document.createElement("script");n&&(a.src=n),t&&(a.text=t),o&&(a.onload=o),this.document.head.appendChild(a)}},{key:"insertStyle",value:function(){var e="\n    body {\n      height: 100vh;\n      overflow: hidden;\n      margin: 0;\n    }    \n    #container {\n      width: 100%;\n      height: 100%;\n    }\n    .debug-red {\n      background : red;\n    }\n    .debug-green {\n      background : green;\n    }\n    html,body {\n      margin : 0px;\n    }",n=this.document.head,t=this.document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText=e:t.appendChild(this.document.createTextNode(e)),n.appendChild(t)}},{key:"document",get:function(){if(this.iframe.contentWindow)return this.iframe.contentWindow.document}}])&&d(t.prototype,o),a&&d(t,a),n}();function f(){var e=m(['\n    <style>\n      :host {\n        display: block;\n      }\n    </style>\n    <form action="[[endPoint]]" method="POST" target="_blank">\n      <input type="hidden" name="data" value$="[[dataString]]" />\n      <input\n        type="image"\n        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg"\n        width="40"\n        height="40"\n        value="Create New Pen with Prefilled Data"\n        class="codepen-mover-button"\n      />\n    </form>\n  '],['\n    <style>\n      :host {\n        display: block;\n      }\n    </style>\n    <form action="[[endPoint]]" method="POST" target="_blank">\n      <input type="hidden" name="data" value\\$="[[dataString]]" />\n      <input\n        type="image"\n        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg"\n        width="40"\n        height="40"\n        value="Create New Pen with Prefilled Data"\n        class="codepen-mover-button"\n      />\n    </form>\n  ']);return f=function(){return e},e}function v(){var e=m(['\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$="[[!title]]">[[title]]</h3>\n    <monaco-element\n      id="codeeditor"\n      lib-path="[[__libPath]]"\n      value="[[editorValue]]"\n      language="[[language]]"\n      theme="[[theme]]"\n      on-value-changed="_editorDataChanged"\n      font-size$="[[fontSize]]"\n      readonly$="[[readOnly]]"\n    >\n    </monaco-element>\n    <div class="code-pen-container" hidden$="[[!showCodePen]]">\n      <code-pen-button data="[[codePenData]]"></code-pen-button>\n    </div>\n  '],['\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$="[[!title]]">[[title]]</h3>\n    <monaco-element\n      id="codeeditor"\n      lib-path="[[__libPath]]"\n      value="[[editorValue]]"\n      language="[[language]]"\n      theme="[[theme]]"\n      on-value-changed="_editorDataChanged"\n      font-size\\$="[[fontSize]]"\n      readonly\\$="[[readOnly]]"\n    >\n    </monaco-element>\n    <div class="code-pen-container" hidden$="[[!showCodePen]]">\n      <code-pen-button data="[[codePenData]]"></code-pen-button>\n    </div>\n  ']);return v=function(){return e},e}window.customElements.define("monaco-element",y),n.Polymer({_template:n.html(f()),is:"code-pen-button",properties:{endPoint:{type:String,value:"https://codepen.io/pen/define"},dataString:{type:String,computed:"_getDataString(data)"},data:{type:Object,value:{}}},_getDataString:function(e){return JSON.stringify(e).replace(/"/g,"&quot;").replace(/'/g,"&apos;")}});var b=n.Polymer({_template:n.html(v()),is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{title:{type:String},showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},editorValue:{type:String,value:""},value:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:String,value:"16px"},minLines:{type:Number,value:10},maxLines:{type:Number,value:25}},_computeCodePenData:function(e,n){return{title:e,html:n}},_modeChanged:function(e){this.language=this.mode},_editorDataChanged:function(e){this.value=e.detail},updateEditorValue:function(){var e="",n=this.queryEffectiveChildren("template");if(n)e=n.innerHTML;else if(console.warn("code-editor works best with a template tag provided in light dom"),(n=o.dom(this).getEffectiveChildNodes()).length>0)for(var t=0,a=n.length;t<a;t++)"undefined"!==s(n[t].tagName)?e+=n[t].outerHTML:e+=n[t].textContent;this.editorValue=e.trim()},created:function(){this.__libPath=("undefined"!=typeof document?document.currentScript&&document.currentScript.src||document.baseURI:new("undefined"!=typeof URL?URL:require("url").URL)("file:"+__filename).href)+"/../../../monaco-editor/min/vs"},ready:function(){var e=this;this._observer=new t.FlattenedNodesObserver(this,function(n){n.addedNodes.length>0&&n.addedNodes.map(function(n){e.updateEditorValue()}),n.removedNodes.length>0&&n.removedNodes.map(function(n){e.updateEditorValue()})})},attached:function(){var e=this;a.microTask.run(function(){e.$.codeeditor.value=e.editorValue,setTimeout(function(){e.$.codeeditor.initIFrame()},1e3)});this.setHaxProperties({canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Code editor",description:"Edit code in the browser with minor HTML validation",icon:"icons:code",color:"blue",groups:["Code","Development"],handles:[{type:"code",code:"editorValue"}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"}],configure:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"},{property:"editorValue",title:"Code",description:"The code to present to the user",inputMethod:"code-editor",icon:"editor:title"}],advanced:[]}})}});e.CodeEditor=b,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@polymer/polymer/polymer-legacy.js"),require("@polymer/polymer/lib/utils/flattened-nodes-observer.js"),require("@polymer/polymer/lib/legacy/polymer.dom.js"),require("@polymer/polymer/lib/utils/async.js"),require("@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js"),require("@polymer/polymer/polymer-element.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-legacy.js","@polymer/polymer/lib/utils/flattened-nodes-observer.js","@polymer/polymer/lib/legacy/polymer.dom.js","@polymer/polymer/lib/utils/async.js","@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js","@lrnwebcomponents/schema-behaviors/schema-behaviors.js","@polymer/polymer/polymer-element.js"],n):n((e=e||self).CodeEditor={},e.polymerLegacy_js,e.flattenedNodesObserver_js,e.polymer_dom_js,e.async,null,null,e.polymerElement_js)}(this,function(e,n,t,o,a,i,r,l){"use strict";function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,n){return(u=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function h(e,n){return!n||"object"!=typeof n&&"function"!=typeof n?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):n}function p(e,n,t){return(p="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,n,t){var o=function(e,n){for(;!Object.prototype.hasOwnProperty.call(e,n)&&null!==(e=c(e)););return e}(e,n);if(o){var a=Object.getOwnPropertyDescriptor(o,n);return a.get?a.get.call(t):a.value}})(e,n,t||e)}function m(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function g(){var e=m(['\n      <style>\n        :host {\n          display: block;\n        }\n        iframe {\n          border: none;\n          width: 100%;\n          height: 100%;\n          padding: 0;\n        }\n      </style>\n      <iframe id="iframe"></iframe>\n    ']);return g=function(){return e},e}var y=function(e){function n(){var e;return function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,n),(e=h(this,c(n).call(this))).iframe=null,e}var t,o,a;return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&u(e,n)}(n,l.PolymerElement),t=n,a=[{key:"template",get:function(){return l.html(g())}},{key:"properties",get:function(){return{value:{type:String,value:"",observer:"monacoValueChanged"},uniqueKey:{type:String},eventTypes:{type:Object,value:{ready:"ready",valueChanged:"valueChanged",languageChanged:"languageChanged",themeChanged:"themeChanged"}},language:{type:String,value:"javascript",observer:"monacoLanguageChanged"},theme:{type:String,value:"vs-dark",observer:"monacoThemeChanged"},libPath:{type:String,value:"node_modules/monaco-editor/min/vs"},editorReference:{type:String,reflectToAttribute:!0,computed:"generateUUID()"}}}}],(o=[{key:"generateUUID",value:function(){return"ss-s-s-s-sss".replace(/s/g,this._uuidPart)}},{key:"_uuidPart",value:function(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}},{key:"connectedCallback",value:function(){var e=this;p(c(n.prototype),"connectedCallback",this).call(this),window.addEventListener("message",function(n){e.handleMessage(n)}),setTimeout(function(){e.__init||e.initIFrame()},500)}},{key:"disconnectedCallback",value:function(){var e=this;p(c(n.prototype),"disconnectedCallback",this).call(this),window.removeEventListener("message",function(n){e.handleMessage(n)}),this.__init=!1}},{key:"initIFrame",value:function(){var e=this;if(this.iframe=this.shadowRoot.querySelector("#iframe"),this.document&&!this.__init){this.__init=!0;var n=document.createElement("div");n.id="container",this.document.body.appendChild(n);var t="\n  var eventTypes = {\n    ready: 'ready',\n    valueChanged: 'valueChanged',\n    languageChanged: 'languageChanged',\n    themeChanged: 'themeChanged',\n  };\n\n  class MonacoEditor {\n    constructor(editorReference) {\n      this._editorReference_ = editorReference;\n      this.language = 'javascript';\n      this.value = '';\n      this.editor = null;\n      this.setupEventListener('message', this.handleMessage.bind(this));\n      this.setupEditor();\n    }\n\n    setupEditor() {\n      require.config({ paths: { vs: '".concat(this.libPath,"' } });\n      require(['vs/editor/editor.main'], () => {\n        this.editor = monaco.editor.create(document.getElementById('container'), {\n          value: this.value,\n          language: this.language,\n          scrollBeyondLastLine: false,\n          automaticLayout: true,\n          minimap: {\n            enabled: true\n          },\n          autoIndent: true,\n        });\n\n        const model = this.editor.getModel();\n        model.onDidChangeContent(() => {\n          const value = model.getValue();\n          this.onValueChanged(value);\n        });\n\n        this.ready();\n      });\n    }\n\n    ready() {\n      setTimeout(() => {\n        this.postMessage(eventTypes.ready, null);\n        this.setupEventListener(\n          eventTypes.valueChanged,\n          this.onValueChanged.bind(this)\n        );\n      }, 100);\n    }\n\n    _handleMessage(data) {\n      switch (data.event) {\n        case eventTypes.valueChanged:\n          this.onInputValueChanged(data.payload);\n          break;\n        case eventTypes.languageChanged:\n          this.onLanguageChanged(data.payload);\n          break;\n        case eventTypes.themeChanged:\n          this.onThemeChanged(data.payload);\n          break;\n        default:\n          break;\n      }\n    }\n\n    handleMessage(message) {\n      try {\n        const data = JSON.parse(message.data);\n        this._handleMessage(data);\n      } catch (error) {\n        console.warn(error);\n        return;\n      }\n    }\n\n    postMessage(event, payload) {\n      var msg = {\n        event: event,\n        payload: payload,\n        editorReference: this._editorReference_\n      }\n      window.parent.postMessage(msg, window.parent.location.href);\n    }\n\n    setupEventListener(type, callback) {\n      window.addEventListener(type, data => {\n        callback(data);\n      });\n    }\n\n    onInputValueChanged(newValue) {\n      if (newValue !== this.value) {\n        this.value = newValue;\n        this.editor.getModel().setValue(newValue);\n        this.postMessage(eventTypes.valueChanged, newValue);\n      }\n    } \n\n    onValueChanged(newValue) {\n      if (newValue !== this.value) {\n        this.value = newValue;\n        this.postMessage(eventTypes.valueChanged, newValue);\n      }\n    }\n\n    onLanguageChanged(newLang) {\n      monaco.editor.setModelLanguage(this.editor.getModel(), newLang);\n    }\n\n    onThemeChanged(newValue) {\n      monaco.editor.setTheme(newValue);\n    }\n  }\n\n  new MonacoEditor(\"").concat(this.editorReference,'");');this.insertScriptElement({src:"".concat(this.libPath,"/loader.js"),onload:function(){e.insertScriptElement({text:t}),e.insertStyle()}})}}},{key:"handleMessage",value:function(e){try{var n=e.data;"string"==typeof e.data&&(n=JSON.parse(e.data)),this._handleMessage(n)}catch(e){return void console.warn("[monaco-element] Error while parsing message:",e)}}},{key:"_handleMessage",value:function(e){if(e.editorReference===this.editorReference)if(e.event===this.eventTypes.valueChanged){var n=new CustomEvent("value-changed",{bubbles:!0,cancelable:!0,detail:e.payload});this.dispatchEvent(n)}else e.event===this.eventTypes.ready&&this.onIFrameReady()}},{key:"onIFrameReady",value:function(){this.monacoValueChanged(this.value),this.monacoLanguageChanged(this.language),this.monacoThemeChanged(this.theme)}},{key:"monacoValueChanged",value:function(e){this.postMessage(this.eventTypes.valueChanged,e)}},{key:"monacoLanguageChanged",value:function(e){this.postMessage(this.eventTypes.languageChanged,e)}},{key:"monacoThemeChanged",value:function(e){this.postMessage(this.eventTypes.themeChanged,e)}},{key:"postMessage",value:function(e,n){this.iframe&&null!=this.iframe.contentWindow&&this.iframe.contentWindow.postMessage(JSON.stringify({event:e,payload:n}),window.location.href)}},{key:"insertScriptElement",value:function(e){var n=e.src,t=e.text,o=e.onload,a=this.document.createElement("script");n&&(a.src=n),t&&(a.text=t),o&&(a.onload=o),this.document.head.appendChild(a)}},{key:"insertStyle",value:function(){var e="\n    body {\n      height: 100vh;\n      overflow: hidden;\n      margin: 0;\n    }    \n    #container {\n      width: 100%;\n      height: 100%;\n    }\n    .debug-red {\n      background : red;\n    }\n    .debug-green {\n      background : green;\n    }\n    html,body {\n      margin : 0px;\n    }",n=this.document.head,t=this.document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText=e:t.appendChild(this.document.createTextNode(e)),n.appendChild(t)}},{key:"document",get:function(){if(this.iframe.contentWindow)return this.iframe.contentWindow.document}}])&&d(t.prototype,o),a&&d(t,a),n}();function f(){var e=m(['\n    <style>\n      :host {\n        display: block;\n      }\n    </style>\n    <form action="[[endPoint]]" method="POST" target="_blank">\n      <input type="hidden" name="data" value$="[[dataString]]" />\n      <input\n        type="image"\n        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg"\n        width="40"\n        height="40"\n        value="Create New Pen with Prefilled Data"\n        class="codepen-mover-button"\n      />\n    </form>\n  '],['\n    <style>\n      :host {\n        display: block;\n      }\n    </style>\n    <form action="[[endPoint]]" method="POST" target="_blank">\n      <input type="hidden" name="data" value\\$="[[dataString]]" />\n      <input\n        type="image"\n        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg"\n        width="40"\n        height="40"\n        value="Create New Pen with Prefilled Data"\n        class="codepen-mover-button"\n      />\n    </form>\n  ']);return f=function(){return e},e}function v(){var e=m(['\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n        #codeeditor {\n          height: 100%;\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$="[[!title]]">[[title]]</h3>\n    <monaco-element\n      id="codeeditor"\n      lib-path="[[__libPath]]"\n      value="[[editorValue]]"\n      language="[[language]]"\n      theme="[[theme]]"\n      on-value-changed="_editorDataChanged"\n      font-size$="[[fontSize]]"\n      readonly$="[[readOnly]]"\n    >\n    </monaco-element>\n    <div class="code-pen-container" hidden$="[[!showCodePen]]">\n      <code-pen-button data="[[codePenData]]"></code-pen-button>\n    </div>\n  '],['\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: block;\n          background-color: var(--code-pen-button-color, #222222);\n          height: 40px;\n        }\n        [hidden] {\n          display: none !important;\n        }\n        code-pen-button {\n          float: right;\n          height: 40px;\n        }\n        h3 {\n          color: var(--code-pen-title-color, #222222);\n        }\n        #codeeditor {\n          height: 100%;\n        }\n      </style>\n    </custom-style>\n    <h3 hidden$="[[!title]]">[[title]]</h3>\n    <monaco-element\n      id="codeeditor"\n      lib-path="[[__libPath]]"\n      value="[[editorValue]]"\n      language="[[language]]"\n      theme="[[theme]]"\n      on-value-changed="_editorDataChanged"\n      font-size\\$="[[fontSize]]"\n      readonly\\$="[[readOnly]]"\n    >\n    </monaco-element>\n    <div class="code-pen-container" hidden$="[[!showCodePen]]">\n      <code-pen-button data="[[codePenData]]"></code-pen-button>\n    </div>\n  ']);return v=function(){return e},e}window.customElements.define("monaco-element",y),window.MonacoData=window.MonacoData||{},n.Polymer({_template:n.html(f()),is:"code-pen-button",properties:{endPoint:{type:String,value:"https://codepen.io/pen/define"},dataString:{type:String,computed:"_getDataString(data)"},data:{type:Object,value:{}}},_getDataString:function(e){return JSON.stringify(e).replace(/"/g,"&quot;").replace(/'/g,"&apos;")}});var b=n.Polymer({_template:n.html(v()),is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{title:{type:String},showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},editorValue:{type:String,value:""},value:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:String,value:"16px"},minLines:{type:Number,value:10},maxLines:{type:Number,value:25}},_computeCodePenData:function(e,n){return{title:e,html:n}},_modeChanged:function(e){this.language=this.mode},_editorDataChanged:function(e){this.value=e.detail},updateEditorValue:function(){var e="",n=this.queryEffectiveChildren("template");if(n)e=n.innerHTML;else if(console.warn("code-editor works best with a template tag provided in light dom"),(n=o.dom(this).getEffectiveChildNodes()).length>0)for(var t=0,a=n.length;t<a;t++)"undefined"!==s(n[t].tagName)?e+=n[t].outerHTML:e+=n[t].textContent;this.$.codeeditor.value=e.trim()},preProcessHaxNodeToContent:function(e){return e.editorValue=null,e.codePenData=null,e.value=null,e.removeAttribute("value"),e.removeAttribute("code-pen-data"),e},created:function(){this.__libPath=("undefined"!=typeof document?document.currentScript&&document.currentScript.src||document.baseURI:new("undefined"!=typeof URL?URL:require("url").URL)("file:"+__filename).href)+"/../../../monaco-editor/min/vs"},ready:function(){var e=this;this._observer=new t.FlattenedNodesObserver(this,function(n){n.addedNodes.length>0&&n.addedNodes.map(function(n){e.updateEditorValue()}),n.removedNodes.length>0&&n.removedNodes.map(function(n){e.updateEditorValue()})})},attached:function(){var e=this;a.microTask.run(function(){setTimeout(function(){e.$.codeeditor.initIFrame()},1e3)});this.setHaxProperties({canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Code editor",description:"Edit code in the browser with minor HTML validation",icon:"icons:code",color:"blue",groups:["Code","Development"],handles:[{type:"code",code:""}],meta:{author:"LRNWebComponents"}},settings:{quick:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"}],configure:[{property:"title",title:"Title",description:"The title of the element",inputMethod:"textfield",icon:"editor:title"},{property:"showCodePen",title:"Code pen button",description:"Play with this on code pen",inputMethod:"boolean",icon:"icons:code"},{slot:"",title:"Code",description:"The code to present to the user",inputMethod:"code-editor",icon:"editor:title"}],advanced:[]}})}});e.CodeEditor=b,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=code-editor.umd.js.map

lib/monaco-element/monaco-element.js

@@ -47,2 +47,5 @@ import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
       },
+      uniqueKey: {
+        type: String
+      },
       eventTypes: {
@@ -70,6 +73,21 @@ type: Object,
         value: "node_modules/monaco-editor/min/vs"
+      },
+      editorReference: {
+        type: String,
+        reflectToAttribute: true,
+        computed: "generateUUID()"
       }
     };
   }
-
+  /**
+   * Generate a UUID
+   */
+  generateUUID() {
+    return "ss-s-s-s-sss".replace(/s/g, this._uuidPart);
+  }
+  _uuidPart() {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
   get document() {
@@ -109,115 +127,119 @@ if (this.iframe.contentWindow) {
       var iframeScript = `
-var eventTypes = {
-  ready: 'ready',
-  valueChanged: 'valueChanged',
-  languageChanged: 'languageChanged',
-  themeChanged: 'themeChanged',
-};
+  var eventTypes = {
+    ready: 'ready',
+    valueChanged: 'valueChanged',
+    languageChanged: 'languageChanged',
+    themeChanged: 'themeChanged',
+  };
 
-class MonacoEditor {
-  constructor() {
-    this.language = 'javascript';
-    this.value = '';
-    this.editor = null;
-    this.setupEventListener('message', this.handleMessage.bind(this));
-    this.setupEditor();
-  }
+  class MonacoEditor {
+    constructor(editorReference) {
+      this._editorReference_ = editorReference;
+      this.language = 'javascript';
+      this.value = '';
+      this.editor = null;
+      this.setupEventListener('message', this.handleMessage.bind(this));
+      this.setupEditor();
+    }
 
-  setupEditor() {
-    require.config({ paths: { vs: '${this.libPath}' } });
-    require(['vs/editor/editor.main'], () => {
-      this.editor = monaco.editor.create(document.getElementById('container'), {
-        value: this.value,
-        language: this.language,
-        scrollBeyondLastLine: false,
-        minimap: {
-          enabled: false
-        }
-      });
+    setupEditor() {
+      require.config({ paths: { vs: '${this.libPath}' } });
+      require(['vs/editor/editor.main'], () => {
+        this.editor = monaco.editor.create(document.getElementById('container'), {
+          value: this.value,
+          language: this.language,
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          minimap: {
+            enabled: true
+          },
+          autoIndent: true,
+        });
 
-      const model = this.editor.getModel();
-      model.onDidChangeContent(() => {
-        const value = model.getValue();
-        this.onValueChanged(value);
+        const model = this.editor.getModel();
+        model.onDidChangeContent(() => {
+          const value = model.getValue();
+          this.onValueChanged(value);
+        });
+
+        this.ready();
       });
+    }
 
-      this.ready();
-    });
-  }
+    ready() {
+      setTimeout(() => {
+        this.postMessage(eventTypes.ready, null);
+        this.setupEventListener(
+          eventTypes.valueChanged,
+          this.onValueChanged.bind(this)
+        );
+      }, 100);
+    }
 
-  ready() {
-    setTimeout(() => {
-      this.postMessage(eventTypes.ready, null);
-      this.setupEventListener(
-        eventTypes.valueChanged,
-        this.onValueChanged.bind(this)
-      );
-    }, 100);
-  }
+    _handleMessage(data) {
+      switch (data.event) {
+        case eventTypes.valueChanged:
+          this.onInputValueChanged(data.payload);
+          break;
+        case eventTypes.languageChanged:
+          this.onLanguageChanged(data.payload);
+          break;
+        case eventTypes.themeChanged:
+          this.onThemeChanged(data.payload);
+          break;
+        default:
+          break;
+      }
+    }
 
-  _handleMessage(data) {
-    switch (data.event) {
-      case eventTypes.valueChanged:
-        this.onInputValueChanged(data.payload);
-        break;
-      case eventTypes.languageChanged:
-        this.onLanguageChanged(data.payload);
-        break;
-      case eventTypes.themeChanged:
-        this.onThemeChanged(data.payload);
-        break;
-      default:
-        break;
+    handleMessage(message) {
+      try {
+        const data = JSON.parse(message.data);
+        this._handleMessage(data);
+      } catch (error) {
+        console.warn(error);
+        return;
+      }
     }
-  }
 
-  handleMessage(message) {
-    try {
-      const data = JSON.parse(message.data);
-      this._handleMessage(data);
-    } catch (error) {
-      console.warn(error);
-      return;
+    postMessage(event, payload) {
+      var msg = {
+        event: event,
+        payload: payload,
+        editorReference: this._editorReference_
+      }
+      window.parent.postMessage(msg, window.parent.location.href);
     }
-  }
 
-  postMessage(event, payload) {
-    window.parent.postMessage(
-      JSON.stringify({ event, payload }),
-      window.parent.location.href
-    );
-  }
+    setupEventListener(type, callback) {
+      window.addEventListener(type, data => {
+        callback(data);
+      });
+    }
 
-  setupEventListener(type, callback) {
-    window.addEventListener(type, data => {
-      callback(data);
-    });
-  }
+    onInputValueChanged(newValue) {
+      if (newValue !== this.value) {
+        this.value = newValue;
+        this.editor.getModel().setValue(newValue);
+        this.postMessage(eventTypes.valueChanged, newValue);
+      }
+    } 
 
-  onInputValueChanged(newValue) {
-    if (newValue !== this.value) {
-      this.value = newValue;
-      this.editor.getModel().setValue(newValue);
-      this.postMessage(eventTypes.valueChanged, newValue);
+    onValueChanged(newValue) {
+      if (newValue !== this.value) {
+        this.value = newValue;
+        this.postMessage(eventTypes.valueChanged, newValue);
+      }
     }
-  } 
 
-  onValueChanged(newValue) {
-    if (newValue !== this.value) {
-      this.value = newValue;
-      this.postMessage(eventTypes.valueChanged, newValue);
+    onLanguageChanged(newLang) {
+      monaco.editor.setModelLanguage(this.editor.getModel(), newLang);
     }
-  }
 
-  onLanguageChanged(newLang) {
-    monaco.editor.setModelLanguage(this.editor.getModel(), newLang);
+    onThemeChanged(newValue) {
+      monaco.editor.setTheme(newValue);
+    }
   }
 
-  onThemeChanged(newValue) {
-    monaco.editor.setTheme(newValue);
-  }
-}
-
-new MonacoEditor();
-`;
+  new MonacoEditor("${this.editorReference}");`;
       this.insertScriptElement({
@@ -247,6 +269,12 @@ src: `${this.libPath}/loader.js`,
   _handleMessage(data) {
+    // bail if we don't have a valid editor reference
+    if (data.editorReference !== this.editorReference) return;
+
     if (data.event === this.eventTypes.valueChanged) {
-      this.dispatchEvent(
-        new CustomEvent("value-changed", { detail: data.payload })
-      );
+      const evt = new CustomEvent("value-changed", {
+        bubbles: true,
+        cancelable: true,
+        detail: data.payload
+      });
+      this.dispatchEvent(evt);
     } else if (data.event === this.eventTypes.ready) {
@@ -328,1 +356,2 @@ this.onIFrameReady();
 window.customElements.define("monaco-element", MonacoElement);
+window.MonacoData = window.MonacoData || {};

package.json

@@ -19,3 +19,3 @@ {
   },
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Data binding wrapped on top of a popular code editor",
@@ -44,3 +44,3 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/hax-body-behaviors": "^2.0.0-beta1",
+    "@lrnwebcomponents/hax-body-behaviors": "^2.0.2",
     "@lrnwebcomponents/schema-behaviors": "^2.0.0-alpha2",
@@ -71,3 +71,3 @@ "@polymer/polymer": "^3.0.5",
   ],
-  "gitHead": "9f1aead01892ef7fd203217017c2a59f710a9e44"
+  "gitHead": "be56c34121bbe69989fff0d24ccf0359ed9c470c"
 }

src/code-editor.js

@@ -45,2 +45,5 @@ /**
         }
+        #codeeditor {
+          height: 100%;
+        }
       </style>
@@ -206,5 +209,16 @@ </custom-style>
     }
-    this.editorValue = content.trim();
+    this.$.codeeditor.value = content.trim();
   },
   /**
+   * Ensure fields don't pass through to HAX if in that context
+   */
+  preProcessHaxNodeToContent: function(clone) {
+    clone.editorValue = null;
+    clone.codePenData = null;
+    clone.value = null;
+    clone.removeAttribute("value");
+    clone.removeAttribute("code-pen-data");
+    return clone;
+  },
+  /**
    * created callback
@@ -243,3 +257,2 @@ */
     async.microTask.run(() => {
-      this.$.codeeditor.value = this.editorValue;
       // delay on initial attachement to ensure that dependencies have loaded
@@ -264,3 +277,3 @@ setTimeout(() => {
             type: "code",
-            code: "editorValue"
+            code: ""
           }
@@ -306,3 +319,3 @@ ],
           {
-            property: "editorValue",
+            slot: "",
             title: "Code",
@@ -309,0 +322,0 @@ description: "The code to present to the user",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1207537

increased by0.99%

Number of package files

29

increased by3.57%

Lines of code

6839

increased by2.87%

Dependency changes

• Updated@lrnwebcomponents/hax-body-behaviors@^2.0.2