@lrnwebcomponents/code-editor - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

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_803174f02fe211e9910f55db2503cbfa(){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_803174f02fe211e9910f55db2503cbfa=function _templateObject_803174f02fe211e9910f55db2503cbfa(){return data};return data}var CodeEditor=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_803174f02fe211e9910f55db2503cbfa()),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:Number,value:16}},_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()})}})}});_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_87e7dd00344811e9bb2bc3f15ed52534(){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_87e7dd00344811e9bb2bc3f15ed52534=function _templateObject_87e7dd00344811e9bb2bc3f15ed52534(){return data};return data}var CodeEditor=(0,_polymerLegacy.Polymer)({_template:(0,_polymerLegacy.html)(_templateObject_87e7dd00344811e9bb2bc3f15ed52534()),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:Number,value:16}},_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=decodeURIComponent(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()})}})}});_exports.CodeEditor=CodeEditor});

code-editor.es6.js

@@ -55,2 +55,2 @@ 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`
     </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:Number,value:16}},_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()})}})}});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:Number,value:16}},_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=decodeURIComponent(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()})}})}});export{CodeEditor};

code-editor.js

@@ -223,3 +223,4 @@ /**
     // set this ahead of it being painted into the dom
-    this.__libPath = import.meta.url + "/../../../monaco-editor/min/vs";
+    this.__libPath =
+      decodeURIComponent(import.meta.url) + "/../../../monaco-editor/min/vs";
   },
@@ -226,0 +227,0 @@ /**

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,null,null,null,e.polymerElement_js)}(this,function(e,n,t,a,o,i,r,s){"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 d(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 u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,n){return(c=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 a=function(e,n){for(;!Object.prototype.hasOwnProperty.call(e,n)&&null!==(e=u(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 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          margin: 0;\n        }\n      </style>\n      <iframe id="iframe" frameborder="0"></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,u(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&&c(e,n)}(n,s.PolymerElement),t=n,o=[{key:"template",get:function(){return s.html(g())}},{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;p(u(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(u(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          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}}])&&d(t.prototype,a),o&&d(t,o),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="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 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: 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 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",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 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: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"!==l(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()})})}});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,null,null,null,e.polymerElement_js)}(this,function(e,n,t,a,o,i,r,s){"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 d(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 u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,n){return(c=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 a=function(e,n){for(;!Object.prototype.hasOwnProperty.call(e,n)&&null!==(e=u(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 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          margin: 0;\n        }\n      </style>\n      <iframe id="iframe" frameborder="0"></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,u(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&&c(e,n)}(n,s.PolymerElement),t=n,o=[{key:"template",get:function(){return s.html(g())}},{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;p(u(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(u(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          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}}])&&d(t.prototype,a),o&&d(t,o),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="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 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: 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 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",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 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: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"!==l(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"},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()})})}});e.CodeEditor=b,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=code-editor.umd.js.map

package.json

@@ -19,3 +19,3 @@ {
   },
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Data binding wrapped on top of a popular code editor",
@@ -70,3 +70,3 @@ "repository": {
   ],
-  "gitHead": "b194052c2f5e13047b463851675568a5c113b32f"
+  "gitHead": "2eb358e606b807a0b9bac11f3476674fe8c6cd2c"
 }

src/code-editor.js

@@ -223,3 +223,4 @@ /**
     // set this ahead of it being painted into the dom
-    this.__libPath = import.meta.url + "/../../../monaco-editor/min/vs";
+    this.__libPath =
+      decodeURIComponent(import.meta.url) + "/../../../monaco-editor/min/vs";
   },
@@ -226,0 +227,0 @@ /**

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

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

Improved metrics

Total package byte prevSize

1193418

increased by0.01%

Lines of code

6702

increased by0.03%

No dependency changes