@lrnwebcomponents/code-editor - npm Package Compare versions

Comparing version 2.0.10 to 2.1.0

code-editor.amd.js

@@ -1,2 +0,2 @@
-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/render-status.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,_renderStatus,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_a8e794c06a8311e98398db50d90173e1(){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: flex;\n          background-color: var(--code-pen-button-color, #222222);\n          color: white;\n          height: 40px;\n          justify-content: flex-end;\n          align-items: center;\n        }\n        .code-pen-container span {\n          display: inline-flex;\n          line-height: 16px;\n          font-size: 16px;\n          padding: 12px;\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          display: flex;\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      read-only$=\"[[readOnly]]\"\n    >\n    </monaco-element>\n    <div class=\"code-pen-container\" hidden$=\"[[!showCodePen]]\">\n      <span>Check it out on code pen: </span\n      ><code-pen-button data=\"[[codePenData]]\"></code-pen-button>\n    </div>\n  "]);_templateObject_a8e794c06a8311e98398db50d90173e1=function _templateObject_a8e794c06a8311e98398db50d90173e1(){return data};return data}/**
+define(["exports","meta","require","./node_modules/@polymer/polymer/polymer-element.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/render-status.js","./node_modules/@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],function(_exports,meta,_require,_polymerElement,_flattenedNodesObserver,_polymerDom,_renderStatus,_schemaBehaviors){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.CodeEditor=void 0;meta=babelHelpers.interopRequireWildcard(meta);_require=babelHelpers.interopRequireWildcard(_require);function _templateObject_70d7c19081c111e9b8156958af4ebbb2(){var data=babelHelpers.taggedTemplateLiteral(["\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: flex;\n          background-color: var(--code-pen-button-color, #222222);\n          color: white;\n          height: 40px;\n          justify-content: flex-end;\n          align-items: center;\n        }\n        .code-pen-container span {\n          display: inline-flex;\n          line-height: 16px;\n          font-size: 16px;\n          padding: 12px;\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          display: flex;\n        }\n      </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        read-only$=\"[[readOnly]]\"\n      >\n      </monaco-element>\n      <div class=\"code-pen-container\" hidden$=\"[[!showCodePen]]\">\n        <span>Check it out on code pen: </span\n        ><code-pen-button data=\"[[codePenData]]\"></code-pen-button>\n      </div>\n    "]);_templateObject_70d7c19081c111e9b8156958af4ebbb2=function _templateObject_70d7c19081c111e9b8156958af4ebbb2(){return data};return data}/**
  * `code-editor`
@@ -8,44 +8,40 @@ * `Wrapper on top of a code editor`
  * - monaco is the VS code editor
- */var CodeEditor=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_a8e794c06a8311e98398db50d90173e1()),is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{/**
-     * Title
-     */title:{type:String},/**
-     * Show codePen button to fork it to there to run
-     */showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},/**
-     * Readonly setting for the editor
-     */readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},/**
-     * Code pen data, computed based on the HTML editor
-     */codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},/**
-     * contents of the editor
-     */editorValue:{type:String},/**
-     * value of the editor after the fact
-     */value:{type:String,notify:!0},/**
-     * Theme for the Ace editor.
-     */theme:{type:String,value:"vs-dark"},/**
-     * Mode / language for editor
-     */mode:{type:String,observer:"_modeChanged"},/**
-     * Language to present color coding for
-     */language:{type:String,value:"javascript"},/**
-     * font size for the editor
-     */fontSize:{type:Number,value:16}},/**
+ */var CodeEditor=/*#__PURE__*/function(_SchemaBehaviors){babelHelpers.inherits(CodeEditor,_SchemaBehaviors);function CodeEditor(){var _this;babelHelpers.classCallCheck(this,CodeEditor);_this=babelHelpers.possibleConstructorReturn(this,babelHelpers.getPrototypeOf(CodeEditor).call(this));_this.__libPath=decodeURIComponent(meta.url)+"/../../../monaco-editor/min/vs";new Promise(function(res,rej){return _require.default(["./node_modules/@lrnwebcomponents/code-editor/lib/monaco-element/monaco-element.js"],res,rej)});new Promise(function(res,rej){return _require.default(["./node_modules/@lrnwebcomponents/code-editor/lib/code-pen-button.js"],res,rej)});return _this}babelHelpers.createClass(CodeEditor,[{key:"_computeCodePenData",/**
    * Update the post data whenever the editor has been updated
-   */_computeCodePenData:function _computeCodePenData(title,editorValue){return{title:title,html:editorValue}},/**
+   */value:function _computeCodePenData(title,editorValue){return{title:title,html:editorValue}}/**
    * LEGACY: pass down mode to language if that api is used
-   */_modeChanged:function _modeChanged(newValue){this.language=this.mode},/**
+   */},{key:"_modeChanged",value:function _modeChanged(newValue){this.language=this.mode}/**
    * Notice code editor changes and reflect them into this element
-   */_editorDataChanged:function _editorDataChanged(e){// value coming up off of thiss
-this.value=e.detail},/**
+   */},{key:"_editorDataChanged",value:function _editorDataChanged(e){// value coming up off of thiss
+this.value=e.detail}/**
    * Calculate what's in slot currently and then inject it into the editor.
-   */updateEditorValue:function updateEditorValue(){var content="",children=this.queryEffectiveChildren("template");// 1st look for a template tag
-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){// loop through everything found in the slotted area and put it back in
-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()},/**
+   */},{key:"updateEditorValue",value:function updateEditorValue(node){if(node){var content="",children=node;if("TEMPLATE"!==node.tagName){console.warn("code-editor works best with a template tag provided in light dom");children=(0,_polymerDom.dom)(this).getEffectiveChildNodes();if(0<children.length){// loop through everything found in the slotted area and put it back in
+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}if(content){this.shadowRoot.querySelector("#codeeditor").value=content.trim()}}}/**
    * Ensure fields don't pass through to HAX if in that context
-   */preProcessHaxNodeToContent:function preProcessHaxNodeToContent(clone){clone.editorValue=null;clone.codePenData=null;clone.value=null;clone.removeAttribute("value");clone.removeAttribute("code-pen-data");return clone},/**
-   * created callback
-   */created:function created(){// set this ahead of it being painted into the dom
-this.__libPath=decodeURIComponent(meta.url)+"/../../../monaco-editor/min/vs"},/**
+   */},{key:"preProcessHaxNodeToContent",value:function preProcessHaxNodeToContent(clone){clone.editorValue=null;clone.codePenData=null;clone.value=null;clone.removeAttribute("value");clone.removeAttribute("code-pen-data");return clone}/**
    * attached life cycle
-   */attached:function attached(){(0,_renderStatus.afterNextRender)(this,function(){var _this=this;// mutation observer that ensures state of hax applied correctly
+   */},{key:"connectedCallback",value:function connectedCallback(){babelHelpers.get(babelHelpers.getPrototypeOf(CodeEditor.prototype),"connectedCallback",this).call(this);(0,_renderStatus.afterNextRender)(this,function(){var _this2=this;// mutation observer that ensures state of hax applied correctly
 this._observer=new _flattenedNodesObserver.FlattenedNodesObserver(this,function(info){// if we've got new nodes, we have to react to that
-if(0<info.addedNodes.length){info.addedNodes.map(function(node){_this.updateEditorValue()})}// if we dropped nodes via the UI (delete event basically)
+if(0<info.addedNodes.length){info.addedNodes.map(function(node){if(node.tagName){_this2.updateEditorValue(node)}})}// if we dropped nodes via the UI (delete event basically)
 if(0<info.removedNodes.length){// handle removing items... not sure we need to do anything here
-info.removedNodes.map(function(node){_this.updateEditorValue()})}})})}});_exports.CodeEditor=CodeEditor});
+info.removedNodes.map(function(node){if(node.tagName){_this2.updateEditorValue(node)}})}})})}}],[{key:"template",get:function get(){return(0,_polymerElement.html)(_templateObject_70d7c19081c111e9b8156958af4ebbb2())}},{key:"tag",get:function get(){return"code-editor"}},{key:"properties",get:function get(){var props={/**
+       * Title
+       */title:{type:String},/**
+       * Show codePen button to fork it to there to run
+       */showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},/**
+       * Readonly setting for the editor
+       */readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},/**
+       * Code pen data, computed based on the HTML editor
+       */codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},/**
+       * contents of the editor
+       */editorValue:{type:String},/**
+       * value of the editor after the fact
+       */value:{type:String,notify:!0},/**
+       * Theme for the Ace editor.
+       */theme:{type:String,value:"vs-dark"},/**
+       * Mode / language for editor
+       */mode:{type:String,observer:"_modeChanged"},/**
+       * Language to present color coding for
+       */language:{type:String,value:"javascript"},/**
+       * font size for the editor
+       */fontSize:{type:Number,value:16}};if(babelHelpers.get(babelHelpers.getPrototypeOf(CodeEditor),"properties",this)){props=Object.assign(props,babelHelpers.get(babelHelpers.getPrototypeOf(CodeEditor),"properties",this))}return props}}]);return CodeEditor}((0,_schemaBehaviors.SchemaBehaviors)(_polymerElement.PolymerElement));_exports.CodeEditor=CodeEditor;window.customElements.define(CodeEditor.tag,CodeEditor)});

code-editor.es6.js

 /**
- * Copyright 2018 The Pennsylvania State University
+ * Copyright 2019 The Pennsylvania State University
  * @license Apache-2.0, see License.md for full text.
- */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{afterNextRender}from"./node_modules/@polymer/polymer/lib/utils/render-status.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";/**
+ */import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element.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{afterNextRender}from"./node_modules/@polymer/polymer/lib/utils/render-status.js";import{SchemaBehaviors}from"./node_modules/@lrnwebcomponents/schema-behaviors/schema-behaviors.js";/**
  * `code-editor`
@@ -11,4 +11,3 @@ * `Wrapper on top of a code editor`
  * - monaco is the VS code editor
- */let CodeEditor=Polymer({_template:html`
-    <custom-style>
+ */class CodeEditor extends SchemaBehaviors(PolymerElement){constructor(){super();this.__libPath=decodeURIComponent(import.meta.url)+"/../../../monaco-editor/min/vs";import("./node_modules/@lrnwebcomponents/code-editor/lib/monaco-element/monaco-element.js");import("./node_modules/@lrnwebcomponents/code-editor/lib/code-pen-button.js")}static get template(){return html`
       <style>
@@ -49,61 +48,56 @@ :host {
       </style>
-    </custom-style>
-    <h3 hidden$="[[!title]]">[[title]]</h3>
-    <monaco-element
-      id="codeeditor"
-      lib-path="[[__libPath]]"
-      value="[[editorValue]]"
-      language="[[language]]"
-      theme="[[theme]]"
-      on-value-changed="_editorDataChanged"
-      font-size$="[[fontSize]]"
-      read-only$="[[readOnly]]"
-    >
-    </monaco-element>
-    <div class="code-pen-container" hidden$="[[!showCodePen]]">
-      <span>Check it out on code pen: </span
-      ><code-pen-button data="[[codePenData]]"></code-pen-button>
-    </div>
-  `,is:"code-editor",behaviors:[HAXBehaviors.PropertiesBehaviors,SchemaBehaviors.Schema],properties:{/**
-     * Title
-     */title:{type:String},/**
-     * Show codePen button to fork it to there to run
-     */showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},/**
-     * Readonly setting for the editor
-     */readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},/**
-     * Code pen data, computed based on the HTML editor
-     */codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},/**
-     * contents of the editor
-     */editorValue:{type:String},/**
-     * value of the editor after the fact
-     */value:{type:String,notify:!0},/**
-     * Theme for the Ace editor.
-     */theme:{type:String,value:"vs-dark"},/**
-     * Mode / language for editor
-     */mode:{type:String,observer:"_modeChanged"},/**
-     * Language to present color coding for
-     */language:{type:String,value:"javascript"},/**
-     * font size for the editor
-     */fontSize:{type:Number,value:16}},/**
+      <h3 hidden$="[[!title]]">[[title]]</h3>
+      <monaco-element
+        id="codeeditor"
+        lib-path="[[__libPath]]"
+        value="[[editorValue]]"
+        language="[[language]]"
+        theme="[[theme]]"
+        on-value-changed="_editorDataChanged"
+        font-size$="[[fontSize]]"
+        read-only$="[[readOnly]]"
+      >
+      </monaco-element>
+      <div class="code-pen-container" hidden$="[[!showCodePen]]">
+        <span>Check it out on code pen: </span
+        ><code-pen-button data="[[codePenData]]"></code-pen-button>
+      </div>
+    `}static get tag(){return"code-editor"}static get properties(){let props={/**
+       * Title
+       */title:{type:String},/**
+       * Show codePen button to fork it to there to run
+       */showCodePen:{type:Boolean,value:!1,reflectToAttribute:!0},/**
+       * Readonly setting for the editor
+       */readOnly:{type:Boolean,value:!1,reflectToAttribute:!0},/**
+       * Code pen data, computed based on the HTML editor
+       */codePenData:{type:Object,computed:"_computeCodePenData(title, value)"},/**
+       * contents of the editor
+       */editorValue:{type:String},/**
+       * value of the editor after the fact
+       */value:{type:String,notify:!0},/**
+       * Theme for the Ace editor.
+       */theme:{type:String,value:"vs-dark"},/**
+       * Mode / language for editor
+       */mode:{type:String,observer:"_modeChanged"},/**
+       * Language to present color coding for
+       */language:{type:String,value:"javascript"},/**
+       * font size for the editor
+       */fontSize:{type:Number,value:16}};if(super.properties){props=Object.assign(props,super.properties)}return props}/**
    * Update the post data whenever the editor has been updated
-   */_computeCodePenData:function(title,editorValue){return{title:title,html:editorValue}},/**
+   */_computeCodePenData(title,editorValue){return{title:title,html:editorValue}}/**
    * LEGACY: pass down mode to language if that api is used
-   */_modeChanged:function(newValue){this.language=this.mode},/**
+   */_modeChanged(newValue){this.language=this.mode}/**
    * Notice code editor changes and reflect them into this element
-   */_editorDataChanged:function(e){// value coming up off of thiss
-this.value=e.detail},/**
+   */_editorDataChanged(e){// value coming up off of thiss
+this.value=e.detail}/**
    * Calculate what's in slot currently and then inject it into the editor.
-   */updateEditorValue:function(){var content="",children=this.queryEffectiveChildren("template");// 1st look for a template tag
-if(!children){console.warn("code-editor works best with a template tag provided in light dom");children=dom(this).getEffectiveChildNodes();if(0<children.length){// loop through everything found in the slotted area and put it back in
-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()},/**
+   */updateEditorValue(node){if(node){var content="",children=node;if("TEMPLATE"!==node.tagName){console.warn("code-editor works best with a template tag provided in light dom");children=dom(this).getEffectiveChildNodes();if(0<children.length){// loop through everything found in the slotted area and put it back in
+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}if(content){this.shadowRoot.querySelector("#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
-   */created:function(){// set this ahead of it being painted into the dom
-this.__libPath=decodeURIComponent(import.meta.url)+"/../../../monaco-editor/min/vs"},/**
+   */preProcessHaxNodeToContent(clone){clone.editorValue=null;clone.codePenData=null;clone.value=null;clone.removeAttribute("value");clone.removeAttribute("code-pen-data");return clone}/**
    * attached life cycle
-   */attached:function(){afterNextRender(this,function(){// mutation observer that ensures state of hax applied correctly
+   */connectedCallback(){super.connectedCallback();afterNextRender(this,function(){// mutation observer that ensures state of hax applied correctly
 this._observer=new FlattenedNodesObserver(this,info=>{// if we've got new nodes, we have to react to that
-if(0<info.addedNodes.length){info.addedNodes.map(node=>{this.updateEditorValue()})}// if we dropped nodes via the UI (delete event basically)
+if(0<info.addedNodes.length){info.addedNodes.map(node=>{if(node.tagName){this.updateEditorValue(node)}})}// if we dropped nodes via the UI (delete event basically)
 if(0<info.removedNodes.length){// handle removing items... not sure we need to do anything here
-info.removedNodes.map(node=>{this.updateEditorValue()})}})})}});export{CodeEditor};
+info.removedNodes.map(node=>{if(node.tagName){this.updateEditorValue(node)}})}})})}}window.customElements.define(CodeEditor.tag,CodeEditor);export{CodeEditor};

code-editor.js

 /**
- * Copyright 2018 The Pennsylvania State University
+ * Copyright 2019 The Pennsylvania State University
  * @license Apache-2.0, see License.md for full text.
  */
-import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
 import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js";
 import { dom } from "@polymer/polymer/lib/legacy/polymer.dom.js";
 import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
-import * as async from "@polymer/polymer/lib/utils/async.js";
-import "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-import "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
-import "./lib/monaco-element/monaco-element.js";
-import "./lib/code-pen-button.js";
+import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
 /**
@@ -22,5 +18,13 @@ * `code-editor`
  */
-let CodeEditor = Polymer({
-  _template: html`
-    <custom-style>
+class CodeEditor extends SchemaBehaviors(PolymerElement) {
+  constructor() {
+    super();
+    this.__libPath =
+      decodeURIComponent(import.meta.url) + "/../../../monaco-editor/min/vs";
+    import("@lrnwebcomponents/code-editor/lib/monaco-element/monaco-element.js");
+    import("@lrnwebcomponents/code-editor/lib/code-pen-button.js");
+    this.addEventListener("monaco-element-ready", this.editorReady.bind(this));
+  }
+  static get template() {
+    return html`
       <style>
@@ -61,97 +65,103 @@ :host {
       </style>
-    </custom-style>
-    <h3 hidden$="[[!title]]">[[title]]</h3>
-    <monaco-element
-      id="codeeditor"
-      lib-path="[[__libPath]]"
-      value="[[editorValue]]"
-      language="[[language]]"
-      theme="[[theme]]"
-      on-value-changed="_editorDataChanged"
-      font-size$="[[fontSize]]"
-      read-only$="[[readOnly]]"
-    >
-    </monaco-element>
-    <div class="code-pen-container" hidden$="[[!showCodePen]]">
-      <span>Check it out on code pen: </span
-      ><code-pen-button data="[[codePenData]]"></code-pen-button>
-    </div>
-  `,
+      <h3 hidden$="[[!title]]">[[title]]</h3>
+      <monaco-element
+        id="codeeditor"
+        lib-path="[[__libPath]]"
+        language="[[language]]"
+        theme="[[theme]]"
+        on-value-changed="_editorDataChanged"
+        font-size$="[[fontSize]]"
+        read-only$="[[readOnly]]"
+      >
+      </monaco-element>
+      <div class="code-pen-container" hidden$="[[!showCodePen]]">
+        <span>Check it out on code pen: </span
+        ><code-pen-button data="[[codePenData]]"></code-pen-button>
+      </div>
+    `;
+  }
 
-  is: "code-editor",
+  static get tag() {
+    return "code-editor";
+  }
 
-  behaviors: [HAXBehaviors.PropertiesBehaviors, SchemaBehaviors.Schema],
-
-  properties: {
-    /**
-     * Title
-     */
-    title: {
-      type: String
-    },
-    /**
-     * Show codePen button to fork it to there to run
-     */
-    showCodePen: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true
-    },
-    /**
-     * Readonly setting for the editor
-     */
-    readOnly: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true
-    },
-    /**
-     * Code pen data, computed based on the HTML editor
-     */
-    codePenData: {
-      type: Object,
-      computed: "_computeCodePenData(title, value)"
-    },
-    /**
-     * contents of the editor
-     */
-    editorValue: {
-      type: String
-    },
-    /**
-     * value of the editor after the fact
-     */
-    value: {
-      type: String,
-      notify: true
-    },
-    /**
-     * Theme for the Ace editor.
-     */
-    theme: {
-      type: String,
-      value: "vs-dark"
-    },
-    /**
-     * Mode / language for editor
-     */
-    mode: {
-      type: String,
-      observer: "_modeChanged"
-    },
-    /**
-     * Language to present color coding for
-     */
-    language: {
-      type: String,
-      value: "javascript"
-    },
-    /**
-     * font size for the editor
-     */
-    fontSize: {
-      type: Number,
-      value: 16
+  static get properties() {
+    let props = {
+      /**
+       * Title
+       */
+      title: {
+        type: String
+      },
+      /**
+       * Show codePen button to fork it to there to run
+       */
+      showCodePen: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+      /**
+       * Readonly setting for the editor
+       */
+      readOnly: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+      /**
+       * Code pen data, computed based on the HTML editor
+       */
+      codePenData: {
+        type: Object,
+        computed: "_computeCodePenData(title, value)"
+      },
+      /**
+       * contents of the editor
+       */
+      editorValue: {
+        type: String,
+        observer: "_editorValueChanged"
+      },
+      /**
+       * value of the editor after the fact
+       */
+      value: {
+        type: String,
+        notify: true
+      },
+      /**
+       * Theme for the Ace editor.
+       */
+      theme: {
+        type: String,
+        value: "vs-dark"
+      },
+      /**
+       * Mode / language for editor
+       */
+      mode: {
+        type: String,
+        observer: "_modeChanged"
+      },
+      /**
+       * Language to present color coding for
+       */
+      language: {
+        type: String,
+        value: "javascript"
+      },
+      /**
+       * font size for the editor
+       */
+      fontSize: {
+        type: Number,
+        value: 16
+      }
+    };
+    if (super.properties) {
+      props = Object.assign(props, super.properties);
     }
-  },
+    return props;
+  }
 
@@ -161,3 +171,3 @@ /**
    */
-  _computeCodePenData: function(title, editorValue) {
+  _computeCodePenData(title, editorValue) {
     return {
@@ -167,9 +177,9 @@ title: title,
     };
-  },
+  }
   /**
    * LEGACY: pass down mode to language if that api is used
    */
-  _modeChanged: function(newValue) {
+  _modeChanged(newValue) {
     this.language = this.mode;
-  },
+  }
 
@@ -179,6 +189,6 @@ /**
    */
-  _editorDataChanged: function(e) {
+  _editorDataChanged(e) {
     // value coming up off of thiss
     this.value = e.detail;
-  },
+  }
 
@@ -188,30 +198,38 @@ /**
    */
-  updateEditorValue: function() {
-    var content = "";
-    // 1st look for a template tag
-    var 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 (children.length > 0) {
-        // loop through everything found in the slotted area and put it back in
-        for (var j = 0, len2 = children.length; j < len2; j++) {
-          if (typeof children[j].tagName !== typeof undefined) {
-            content += children[j].outerHTML;
-          } else {
-            content += children[j].textContent;
+  updateEditorValue(node) {
+    if (node) {
+      var content = "";
+      var children = node;
+      if (node.tagName !== "TEMPLATE") {
+        console.warn(
+          "code-editor works best with a template tag provided in light dom"
+        );
+        children = dom(this).getEffectiveChildNodes();
+        if (children.length > 0) {
+          // loop through everything found in the slotted area and put it back in
+          for (var j = 0, len2 = children.length; j < len2; j++) {
+            if (typeof children[j].tagName !== typeof undefined) {
+              content += children[j].outerHTML;
+            } else {
+              content += children[j].textContent;
+            }
           }
         }
+      } else {
+        content = children.innerHTML;
       }
-    } else {
-      content = children.innerHTML;
+      if (content) {
+        this.shadowRoot.querySelector("#codeeditor").value = content.trim();
+      }
     }
-    this.$.codeeditor.value = content.trim();
-  },
+  }
+  _editorValueChanged(newValue) {
+    if (newValue) {
+      this.shadowRoot.querySelector("#codeeditor").value = newValue;
+    }
+  }
   /**
    * Ensure fields don't pass through to HAX if in that context
    */
-  preProcessHaxNodeToContent: function(clone) {
+  preProcessHaxNodeToContent(clone) {
     clone.editorValue = null;
@@ -223,15 +241,8 @@ clone.codePenData = null;
     return clone;
-  },
+  }
   /**
-   * created callback
-   */
-  created: function() {
-    // set this ahead of it being painted into the dom
-    this.__libPath =
-      decodeURIComponent(import.meta.url) + "/../../../monaco-editor/min/vs";
-  },
-  /**
    * attached life cycle
    */
-  attached: function() {
+  connectedCallback() {
+    super.connectedCallback();
     afterNextRender(this, function() {
@@ -243,3 +254,5 @@ // mutation observer that ensures state of hax applied correctly
           info.addedNodes.map(node => {
-            this.updateEditorValue();
+            if (node.tagName) {
+              this.updateEditorValue(node);
+            }
           });
@@ -251,3 +264,5 @@ }
           info.removedNodes.map(node => {
-            this.updateEditorValue();
+            if (node.tagName) {
+              this.updateEditorValue(node);
+            }
           });
@@ -258,3 +273,16 @@ }
   }
-});
+  disconnectedCallback() {
+    this.removeEventListener(
+      "monaco-element-ready",
+      this.editorReady.bind(this)
+    );
+    super.disconnectedCallback();
+  }
+  editorReady(e) {
+    if (this.editorValue) {
+      this.shadowRoot.querySelector("#codeeditor").value = this.editorValue;
+    }
+  }
+}
+window.customElements.define(CodeEditor.tag, CodeEditor);
 export { CodeEditor };

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/render-status.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/render-status.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.renderStatus_js,null,null,null,e.polymerElement_js)}(this,function(e,n,t,a,o,i,r,s,l){"use strict";function d(e){return(d="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 u(e,n){for(var t=0;t<n.length;t++){var a=n[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function h(e,n){return(h=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function p(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 m(e,n,t){return(m="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,n,t){var a=function(e,n){for(;!Object.prototype.hasOwnProperty.call(e,n)&&null!==(e=c(e)););return e}(e,n);if(a){var o=Object.getOwnPropertyDescriptor(a,n);return o.get?o.get.call(t):o.value}})(e,n,t||e)}function g(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function y(){var e=g(['\n      <style>\n        :host {\n          display: block;\n        }\n        iframe {\n          border: none;\n          width: 100%;\n          height: 100%;\n          padding: 0;\n          margin: 0;\n        }\n      </style>\n      <iframe id="iframe" frameborder="0"></iframe>\n    ']);return y=function(){return e},e}var f=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=p(this,c(n).call(this))).iframe=null,e}var t,a,o;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&&h(e,n)}(n,l.PolymerElement),t=n,o=[{key:"template",get:function(){return l.html(y())}},{key:"properties",get:function(){return{value:{type:String,value:"",observer:"monacoValueChanged"},fontSize:{type:Number,value:16},readOnly:{type:Boolean,value:!1},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()"}}}}],(a=[{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;m(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;m(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: '").concat(this.language,"',\n          scrollBeyondLastLine: false,\n          automaticLayout: true,\n          fontSize: ").concat(this.fontSize,",\n          readOnly: ").concat(this.readOnly,',\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,a=e.onload,o=this.document.createElement("script");n&&(o.src=n),t&&(o.text=t),a&&(o.onload=a),this.document.head.appendChild(o)}},{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}}])&&u(t.prototype,a),o&&u(t,o),n}();function v(){var e=g(['\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="Open code pen in a new window"\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="Open code pen in a new window"\n        class="codepen-mover-button"\n      />\n    </form>\n  ']);return v=function(){return e},e}function b(){var e=g(['\n    <custom-style>\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: flex;\n          background-color: var(--code-pen-button-color, #222222);\n          color: white;\n          height: 40px;\n          justify-content: flex-end;\n          align-items: center;\n        }\n        .code-pen-container span {\n          display: inline-flex;\n          line-height: 16px;\n          font-size: 16px;\n          padding: 12px;\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          display: flex;\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      read-only$="[[readOnly]]"\n    >\n    </monaco-element>\n    <div class="code-pen-container" hidden$="[[!showCodePen]]">\n      <span>Check it out on code pen: </span\n      ><code-pen-button data="[[codePenData]]"></code-pen-button>\n    </div>\n  ']);return b=function(){return e},e}window.customElements.define("monaco-element",f),window.MonacoData=window.MonacoData||{},n.Polymer({_template:n.html(v()),is:"code-pen-button",hostAttributes:{title:"Check it out on codepen"},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 w=n.Polymer({_template:n.html(b()),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:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:Number,value:16}},_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=a.dom(this).getEffectiveChildNodes()).length>0)for(var t=0,o=n.length;t<o;t++)"undefined"!==d(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=decodeURIComponent("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"},attached:function(){o.afterNextRender(this,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()})})})}});e.CodeEditor=w,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/polymer/lib/utils/flattened-nodes-observer.js"),require("@polymer/polymer/lib/legacy/polymer.dom.js"),require("@polymer/polymer/lib/utils/render-status.js"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/polymer/lib/utils/flattened-nodes-observer.js","@polymer/polymer/lib/legacy/polymer.dom.js","@polymer/polymer/lib/utils/render-status.js","@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],t):t((e=e||self).CodeEditor={},e.polymerElement_js,e.flattenedNodesObserver_js,e.polymer_dom_js,e.renderStatus_js,e.schemaBehaviors_js)}(this,function(e,t,n,o,r,i){"use strict";function l(e){return(l="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 a(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function d(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function s(e,t,n){return(s="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=u(e)););return e}(e,t);if(o){var r=Object.getOwnPropertyDescriptor(o,t);return r.get?r.get.call(n):r.value}})(e,t,n||e)}function p(){var e,t,n=(e=['\n      <style>\n        :host {\n          display: block;\n          padding: 16px;\n        }\n        .code-pen-container {\n          width: 100%;\n          display: flex;\n          background-color: var(--code-pen-button-color, #222222);\n          color: white;\n          height: 40px;\n          justify-content: flex-end;\n          align-items: center;\n        }\n        .code-pen-container span {\n          display: inline-flex;\n          line-height: 16px;\n          font-size: 16px;\n          padding: 12px;\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          display: flex;\n        }\n      </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        read-only$="[[readOnly]]"\n      >\n      </monaco-element>\n      <div class="code-pen-container" hidden$="[[!showCodePen]]">\n        <span>Check it out on code pen: </span\n        ><code-pen-button data="[[codePenData]]"></code-pen-button>\n      </div>\n    '],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return p=function(){return n},n}var f=function(e){function f(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,f),(e=d(this,u(f).call(this))).__libPath=decodeURIComponent("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",import("@lrnwebcomponents/code-editor/lib/monaco-element/monaco-element.js"),import("@lrnwebcomponents/code-editor/lib/code-pen-button.js"),e}var m,y,h;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&c(e,t)}(f,i.SchemaBehaviors(t.PolymerElement)),m=f,h=[{key:"template",get:function(){return t.html(p())}},{key:"tag",get:function(){return"code-editor"}},{key:"properties",get:function(){var e={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:{type:String,notify:!0},theme:{type:String,value:"vs-dark"},mode:{type:String,observer:"_modeChanged"},language:{type:String,value:"javascript"},fontSize:{type:Number,value:16}};return s(u(f),"properties",this)&&(e=Object.assign(e,s(u(f),"properties",this))),e}}],(y=[{key:"_computeCodePenData",value:function(e,t){return{title:e,html:t}}},{key:"_modeChanged",value:function(e){this.language=this.mode}},{key:"_editorDataChanged",value:function(e){this.value=e.detail}},{key:"updateEditorValue",value:function(e){if(e){var t="",n=e;if("TEMPLATE"!==e.tagName){if(console.warn("code-editor works best with a template tag provided in light dom"),(n=o.dom(this).getEffectiveChildNodes()).length>0)for(var r=0,i=n.length;r<i;r++)"undefined"!==l(n[r].tagName)?t+=n[r].outerHTML:t+=n[r].textContent}else t=n.innerHTML;t&&(this.shadowRoot.querySelector("#codeeditor").value=t.trim())}}},{key:"preProcessHaxNodeToContent",value:function(e){return e.editorValue=null,e.codePenData=null,e.value=null,e.removeAttribute("value"),e.removeAttribute("code-pen-data"),e}},{key:"connectedCallback",value:function(){s(u(f.prototype),"connectedCallback",this).call(this),r.afterNextRender(this,function(){var e=this;this._observer=new n.FlattenedNodesObserver(this,function(t){t.addedNodes.length>0&&t.addedNodes.map(function(t){t.tagName&&e.updateEditorValue(t)}),t.removedNodes.length>0&&t.removedNodes.map(function(t){t.tagName&&e.updateEditorValue(t)})})})}}])&&a(m.prototype,y),h&&a(m,h),f}();window.customElements.define(f.tag,f),e.CodeEditor=f,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=code-editor.umd.js.map

gulpfile.js

@@ -65,4 +65,8 @@ const gulp = require("gulp");
   // properties available to the custom element for data binding
-  static get properties() {
-    return ${props};
+    static get properties() {
+    let props = ${props};
+    if (super.properties) {
+      props = Object.assign(props, super.properties);
+    }
+    return props;
   }`;
@@ -69,0 +73,0 @@ }

lib/code-pen-button.js

@@ -1,2 +0,2 @@
-import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
 /**
@@ -7,54 +7,65 @@ * `code-pen-button`
  */
-Polymer({
-  _template: html`
-    <style>
-      :host {
-        display: block;
+class CodePenButton extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+      </style>
+      <form action="[[endPoint]]" method="POST" target="_blank">
+        <input type="hidden" name="data" value\$="[[dataString]]" />
+        <input
+          type="image"
+          src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg"
+          width="40"
+          height="40"
+          value="Open code pen in a new window"
+          class="codepen-mover-button"
+        />
+      </form>
+    `;
+  }
+
+  static get tag() {
+    return "code-pen-button";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("title", this.checkItOut);
+  }
+  static get properties() {
+    return {
+      checkItOut: {
+        type: String,
+        value: "Check it out on codepen"
+      },
+      /**
+       * End point for posting should it change in the future.
+       */
+      endPoint: {
+        type: String,
+        value: "https://codepen.io/pen/define"
+      },
+      /**
+       * Data object as a JSON string for the POST data in page.
+       */
+      dataString: {
+        type: String,
+        computed: "_getDataString(data)"
+      },
+      /**
+       * Data object to post to code pen
+       */
+      data: {
+        type: Object,
+        value: {}
       }
-    </style>
-    <form action="[[endPoint]]" method="POST" target="_blank">
-      <input type="hidden" name="data" value\$="[[dataString]]" />
-      <input
-        type="image"
-        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg"
-        width="40"
-        height="40"
-        value="Open code pen in a new window"
-        class="codepen-mover-button"
-      />
-    </form>
-  `,
+    };
+  }
 
-  is: "code-pen-button",
-  hostAttributes: {
-    title: "Check it out on codepen"
-  },
-  properties: {
-    /**
-     * End point for posting should it change in the future.
-     */
-    endPoint: {
-      type: String,
-      value: "https://codepen.io/pen/define"
-    },
-    /**
-     * Data object as a JSON string for the POST data in page.
-     */
-    dataString: {
-      type: String,
-      computed: "_getDataString(data)"
-    },
-    /**
-     * Data object to post to code pen
-     */
-    data: {
-      type: Object,
-      value: {}
-    }
-  },
-
   /**
    * Return string from data object so it can be posted correctly.
    */
-  _getDataString: function(data) {
+  _getDataString(data) {
     return JSON.stringify(data)
@@ -64,2 +75,4 @@ .replace(/"/g, "&quot;")
   }
-});
+}
+window.customElements.define(CodePenButton.tag, CodePenButton);
+export { CodePenButton };

lib/monaco-element/monaco-element.js

 import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
-
 /**
@@ -123,3 +122,2 @@ * `monaco-element`
   disconnectedCallback() {
-    super.disconnectedCallback();
     window.removeEventListener("message", message => {
@@ -129,2 +127,3 @@ this.handleMessage(message);
     this.__init = false;
+    super.disconnectedCallback();
   }
@@ -302,2 +301,13 @@
     this.monacoThemeChanged(this.theme);
+    // fire when we're ready
+    setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent("monaco-element-ready", {
+          bubbles: true,
+          composed: true,
+          cancelable: true,
+          detail: true
+        })
+      );
+    }, 100);
   }
@@ -370,2 +380,3 @@
 window.customElements.define("monaco-element", MonacoElement);
+export { MonacoElement };
 window.MonacoData = window.MonacoData || {};

package.json

@@ -19,3 +19,3 @@ {
   },
-  "version": "2.0.10",
+  "version": "2.1.0",
   "description": "Data binding wrapped on top of a popular code editor",
@@ -44,4 +44,4 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/hax-body-behaviors": "^2.0.10",
-    "@lrnwebcomponents/schema-behaviors": "^2.0.10",
+    "@lrnwebcomponents/hax-body-behaviors": "^2.1.0",
+    "@lrnwebcomponents/schema-behaviors": "^2.1.0",
     "@polymer/polymer": "^3.2.0",
@@ -52,6 +52,6 @@ "monaco-editor": "^0.15.0"
     "@lrnwebcomponents/deduping-fix": "^2.0.9",
-    "@lrnwebcomponents/storybook-utilities": "^2.0.10",
+    "@lrnwebcomponents/storybook-utilities": "^2.1.0",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
     "@polymer/iron-demo-helpers": "^3.1.0",
-    "@webcomponents/webcomponentsjs": "^2.2.9",
+    "@webcomponents/webcomponentsjs": "2.2.10",
     "concurrently": "4.1.0",
@@ -61,3 +61,3 @@ "gulp-babel": "8.0.0",
     "lodash": "4.17.11",
-    "polymer-cli": "1.9.8",
+    "polymer-cli": "1.9.9",
     "wct-browser-legacy": "1.0.2"
@@ -73,3 +73,3 @@ },
   ],
-  "gitHead": "8571f08ce381877be732c2b5407233bcc3c58d99"
+  "gitHead": "38a0c3ad00e8447837037bde2dc1172273a3a311"
 }

src/code-editor.js

 /**
- * Copyright 2018 The Pennsylvania State University
+ * Copyright 2019 The Pennsylvania State University
  * @license Apache-2.0, see License.md for full text.
  */
-import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
 import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js";
 import { dom } from "@polymer/polymer/lib/legacy/polymer.dom.js";
 import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
-import * as async from "@polymer/polymer/lib/utils/async.js";
-import "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-import "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
-import "./lib/monaco-element/monaco-element.js";
-import "./lib/code-pen-button.js";
+import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
 /**
@@ -22,5 +18,13 @@ * `code-editor`
  */
-let CodeEditor = Polymer({
-  _template: html`
-    <custom-style>
+class CodeEditor extends SchemaBehaviors(PolymerElement) {
+  constructor() {
+    super();
+    this.__libPath =
+      decodeURIComponent(import.meta.url) + "/../../../monaco-editor/min/vs";
+    import("@lrnwebcomponents/code-editor/lib/monaco-element/monaco-element.js");
+    import("@lrnwebcomponents/code-editor/lib/code-pen-button.js");
+    this.addEventListener("monaco-element-ready", this.editorReady.bind(this));
+  }
+  static get template() {
+    return html`
       <style>
@@ -61,97 +65,103 @@ :host {
       </style>
-    </custom-style>
-    <h3 hidden$="[[!title]]">[[title]]</h3>
-    <monaco-element
-      id="codeeditor"
-      lib-path="[[__libPath]]"
-      value="[[editorValue]]"
-      language="[[language]]"
-      theme="[[theme]]"
-      on-value-changed="_editorDataChanged"
-      font-size$="[[fontSize]]"
-      read-only$="[[readOnly]]"
-    >
-    </monaco-element>
-    <div class="code-pen-container" hidden$="[[!showCodePen]]">
-      <span>Check it out on code pen: </span
-      ><code-pen-button data="[[codePenData]]"></code-pen-button>
-    </div>
-  `,
+      <h3 hidden$="[[!title]]">[[title]]</h3>
+      <monaco-element
+        id="codeeditor"
+        lib-path="[[__libPath]]"
+        language="[[language]]"
+        theme="[[theme]]"
+        on-value-changed="_editorDataChanged"
+        font-size$="[[fontSize]]"
+        read-only$="[[readOnly]]"
+      >
+      </monaco-element>
+      <div class="code-pen-container" hidden$="[[!showCodePen]]">
+        <span>Check it out on code pen: </span
+        ><code-pen-button data="[[codePenData]]"></code-pen-button>
+      </div>
+    `;
+  }
 
-  is: "code-editor",
+  static get tag() {
+    return "code-editor";
+  }
 
-  behaviors: [HAXBehaviors.PropertiesBehaviors, SchemaBehaviors.Schema],
-
-  properties: {
-    /**
-     * Title
-     */
-    title: {
-      type: String
-    },
-    /**
-     * Show codePen button to fork it to there to run
-     */
-    showCodePen: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true
-    },
-    /**
-     * Readonly setting for the editor
-     */
-    readOnly: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true
-    },
-    /**
-     * Code pen data, computed based on the HTML editor
-     */
-    codePenData: {
-      type: Object,
-      computed: "_computeCodePenData(title, value)"
-    },
-    /**
-     * contents of the editor
-     */
-    editorValue: {
-      type: String
-    },
-    /**
-     * value of the editor after the fact
-     */
-    value: {
-      type: String,
-      notify: true
-    },
-    /**
-     * Theme for the Ace editor.
-     */
-    theme: {
-      type: String,
-      value: "vs-dark"
-    },
-    /**
-     * Mode / language for editor
-     */
-    mode: {
-      type: String,
-      observer: "_modeChanged"
-    },
-    /**
-     * Language to present color coding for
-     */
-    language: {
-      type: String,
-      value: "javascript"
-    },
-    /**
-     * font size for the editor
-     */
-    fontSize: {
-      type: Number,
-      value: 16
+  static get properties() {
+    let props = {
+      /**
+       * Title
+       */
+      title: {
+        type: String
+      },
+      /**
+       * Show codePen button to fork it to there to run
+       */
+      showCodePen: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+      /**
+       * Readonly setting for the editor
+       */
+      readOnly: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true
+      },
+      /**
+       * Code pen data, computed based on the HTML editor
+       */
+      codePenData: {
+        type: Object,
+        computed: "_computeCodePenData(title, value)"
+      },
+      /**
+       * contents of the editor
+       */
+      editorValue: {
+        type: String,
+        observer: "_editorValueChanged"
+      },
+      /**
+       * value of the editor after the fact
+       */
+      value: {
+        type: String,
+        notify: true
+      },
+      /**
+       * Theme for the Ace editor.
+       */
+      theme: {
+        type: String,
+        value: "vs-dark"
+      },
+      /**
+       * Mode / language for editor
+       */
+      mode: {
+        type: String,
+        observer: "_modeChanged"
+      },
+      /**
+       * Language to present color coding for
+       */
+      language: {
+        type: String,
+        value: "javascript"
+      },
+      /**
+       * font size for the editor
+       */
+      fontSize: {
+        type: Number,
+        value: 16
+      }
+    };
+    if (super.properties) {
+      props = Object.assign(props, super.properties);
     }
-  },
+    return props;
+  }
 
@@ -161,3 +171,3 @@ /**
    */
-  _computeCodePenData: function(title, editorValue) {
+  _computeCodePenData(title, editorValue) {
     return {
@@ -167,9 +177,9 @@ title: title,
     };
-  },
+  }
   /**
    * LEGACY: pass down mode to language if that api is used
    */
-  _modeChanged: function(newValue) {
+  _modeChanged(newValue) {
     this.language = this.mode;
-  },
+  }
 
@@ -179,6 +189,6 @@ /**
    */
-  _editorDataChanged: function(e) {
+  _editorDataChanged(e) {
     // value coming up off of thiss
     this.value = e.detail;
-  },
+  }
 
@@ -188,30 +198,38 @@ /**
    */
-  updateEditorValue: function() {
-    var content = "";
-    // 1st look for a template tag
-    var 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 (children.length > 0) {
-        // loop through everything found in the slotted area and put it back in
-        for (var j = 0, len2 = children.length; j < len2; j++) {
-          if (typeof children[j].tagName !== typeof undefined) {
-            content += children[j].outerHTML;
-          } else {
-            content += children[j].textContent;
+  updateEditorValue(node) {
+    if (node) {
+      var content = "";
+      var children = node;
+      if (node.tagName !== "TEMPLATE") {
+        console.warn(
+          "code-editor works best with a template tag provided in light dom"
+        );
+        children = dom(this).getEffectiveChildNodes();
+        if (children.length > 0) {
+          // loop through everything found in the slotted area and put it back in
+          for (var j = 0, len2 = children.length; j < len2; j++) {
+            if (typeof children[j].tagName !== typeof undefined) {
+              content += children[j].outerHTML;
+            } else {
+              content += children[j].textContent;
+            }
           }
         }
+      } else {
+        content = children.innerHTML;
       }
-    } else {
-      content = children.innerHTML;
+      if (content) {
+        this.shadowRoot.querySelector("#codeeditor").value = content.trim();
+      }
     }
-    this.$.codeeditor.value = content.trim();
-  },
+  }
+  _editorValueChanged(newValue) {
+    if (newValue) {
+      this.shadowRoot.querySelector("#codeeditor").value = newValue;
+    }
+  }
   /**
    * Ensure fields don't pass through to HAX if in that context
    */
-  preProcessHaxNodeToContent: function(clone) {
+  preProcessHaxNodeToContent(clone) {
     clone.editorValue = null;
@@ -223,15 +241,8 @@ clone.codePenData = null;
     return clone;
-  },
+  }
   /**
-   * created callback
-   */
-  created: function() {
-    // set this ahead of it being painted into the dom
-    this.__libPath =
-      decodeURIComponent(import.meta.url) + "/../../../monaco-editor/min/vs";
-  },
-  /**
    * attached life cycle
    */
-  attached: function() {
+  connectedCallback() {
+    super.connectedCallback();
     afterNextRender(this, function() {
@@ -243,3 +254,5 @@ // mutation observer that ensures state of hax applied correctly
           info.addedNodes.map(node => {
-            this.updateEditorValue();
+            if (node.tagName) {
+              this.updateEditorValue(node);
+            }
           });
@@ -251,3 +264,5 @@ }
           info.removedNodes.map(node => {
-            this.updateEditorValue();
+            if (node.tagName) {
+              this.updateEditorValue(node);
+            }
           });
@@ -258,3 +273,16 @@ }
   }
-});
+  disconnectedCallback() {
+    this.removeEventListener(
+      "monaco-element-ready",
+      this.editorReady.bind(this)
+    );
+    super.disconnectedCallback();
+  }
+  editorReady(e) {
+    if (this.editorValue) {
+      this.shadowRoot.querySelector("#codeeditor").value = this.editorValue;
+    }
+  }
+}
+window.customElements.define(CodeEditor.tag, CodeEditor);
 export { CodeEditor };

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Number of low supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

1045495

decreased by-14.96%

Lines of code

1732

decreased by-74.72%

Number of medium supply chain risk alerts

7

increased by40%

Dependency changes

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

• Updated@lrnwebcomponents/schema-behaviors@^2.1.0