Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@lrnwebcomponents/code-editor
Advanced tools
@lrnwebcomponents/code-editor - npm Package Compare versions
Comparing version 2.1.0 to 2.1.1
@@ -16,7 +16,7 @@ { | ||
| "start": { | ||
| "line": 168, | ||
| "line": 213, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 173, | ||
| "line": 218, | ||
| "column": 3 | ||
@@ -36,2 +36,54 @@ } | ||
| { | ||
| "name": "_handleFocus", | ||
| "description": "sets focused attribute when monaco-elements's focus event fires", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "start": { | ||
| "line": 223, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 225, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "e", | ||
| "type": "event", | ||
| "description": "the monaco-elements's focus event" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| } | ||
| }, | ||
| { | ||
| "name": "_handleBlur", | ||
| "description": "unsets focused attribute when monaco-elements's blur event fires", | ||
| "privacy": "protected", | ||
| "sourceRange": { | ||
| "start": { | ||
| "line": 230, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 232, | ||
| "column": 3 | ||
| } | ||
| }, | ||
| "metadata": {}, | ||
| "params": [ | ||
| { | ||
| "name": "e", | ||
| "type": "event", | ||
| "description": "the monaco-elements's blur event" | ||
| } | ||
| ], | ||
| "return": { | ||
| "type": "void" | ||
| } | ||
| }, | ||
| { | ||
| "name": "_modeChanged", | ||
@@ -42,7 +94,7 @@ "description": "LEGACY: pass down mode to language if that api is used", | ||
| "start": { | ||
| "line": 177, | ||
| "line": 236, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 179, | ||
| "line": 238, | ||
| "column": 3 | ||
@@ -67,7 +119,7 @@ } | ||
| "start": { | ||
| "line": 184, | ||
| "line": 243, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 187, | ||
| "line": 246, | ||
| "column": 3 | ||
@@ -92,7 +144,7 @@ } | ||
| "start": { | ||
| "line": 192, | ||
| "line": 251, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 218, | ||
| "line": 277, | ||
| "column": 3 | ||
@@ -117,7 +169,7 @@ } | ||
| "start": { | ||
| "line": 219, | ||
| "line": 278, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 223, | ||
| "line": 282, | ||
| "column": 3 | ||
@@ -142,7 +194,7 @@ } | ||
| "start": { | ||
| "line": 227, | ||
| "line": 286, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 234, | ||
| "line": 293, | ||
| "column": 3 | ||
@@ -164,7 +216,7 @@ } | ||
| "start": { | ||
| "line": 238, | ||
| "line": 297, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 262, | ||
| "line": 322, | ||
| "column": 3 | ||
@@ -185,7 +237,7 @@ } | ||
| "start": { | ||
| "line": 263, | ||
| "line": 323, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 266, | ||
| "line": 329, | ||
| "column": 3 | ||
@@ -206,7 +258,7 @@ } | ||
| "start": { | ||
| "line": 267, | ||
| "line": 330, | ||
| "column": 2 | ||
| }, | ||
| "end": { | ||
| "line": 271, | ||
| "line": 334, | ||
| "column": 3 | ||
@@ -244,3 +296,3 @@ } | ||
| "end": { | ||
| "line": 272, | ||
| "line": 335, | ||
| "column": 1 | ||
@@ -247,0 +299,0 @@ } |
@@ -1,2 +0,2 @@ | ||
| 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}/** | ||
| 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_75e45f60ab1311e9acdc7d0181783c2c(){var data=babelHelpers.taggedTemplateLiteral(["\n <style>\n :host {\n display: block;\n padding: 16px;\n font-family: unset;\n }\n :host([hidden]) {\n display: none !important;\n }\n .code-pen-container:not([hidden]) {\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 code-pen-button {\n float: right;\n height: 40px;\n }\n label {\n color: var(--code-editor-label-color, #888);\n transition: all 0.5s;\n @apply --code-editor-label;\n }\n\n :host([focused]) label {\n color: var(\n --code-editor-float-label-active-color,\n var(--code-editor-label-color, #000)\n );\n @apply --code-editor-focus-label;\n }\n\n #codeeditor {\n height: 100%;\n display: flex;\n @apply --code-editor-code;\n }\n\n :host([focused]) #codeeditor {\n @apply --code-editor-focus-code;\n }\n </style>\n <label for=\"codeeditor\" hidden$=\"[[!title]]\">[[title]]</label>\n <monaco-element\n id=\"codeeditor\"\n autofocus$=\"[[autofocus]]\"\n hide-line-numbers$=\"[[hideLineNumbers]]\"\n lib-path=\"[[__libPath]]\"\n language=\"[[language]]\"\n theme=\"[[theme]]\"\n on-value-changed=\"_editorDataChanged\"\n font-size$=\"[[fontSize]]\"\n read-only$=\"[[readOnly]]\"\n on-code-editor-focus=\"_handleFocus\"\n on-code-editor-blur=\"_handleBlur\"\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_75e45f60ab1311e9acdc7d0181783c2c=function _templateObject_75e45f60ab1311e9acdc7d0181783c2c(){return data};return data}/** | ||
| * `code-editor` | ||
@@ -8,5 +8,11 @@ * `Wrapper on top of a code editor` | ||
| * - monaco is the VS code editor | ||
| */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",/** | ||
| */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)});_this.addEventListener("monaco-element-ready",_this.editorReady.bind(babelHelpers.assertThisInitialized(_this)));return _this}babelHelpers.createClass(CodeEditor,[{key:"_computeCodePenData",/** | ||
| * Update the post data whenever the editor has been updated | ||
| */value:function _computeCodePenData(title,editorValue){return{title:title,html:editorValue}}/** | ||
| * sets focused attribute when monaco-elements's focus event fires | ||
| * @param {event} e the monaco-elements's focus event | ||
| */},{key:"_handleFocus",value:function _handleFocus(e){this.focused=!0}/** | ||
| * unsets focused attribute when monaco-elements's blur event fires | ||
| * @param {event} e the monaco-elements's blur event | ||
| */},{key:"_handleBlur",value:function _handleBlur(e){this.focused=!1}/** | ||
| * LEGACY: pass down mode to language if that api is used | ||
@@ -19,11 +25,11 @@ */},{key:"_modeChanged",value:function _modeChanged(newValue){this.language=this.mode}/** | ||
| */},{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()}}}/** | ||
| 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()}}}},{key:"_editorValueChanged",value:function _editorValueChanged(newValue){if(newValue){this.shadowRoot.querySelector("#codeeditor").value=newValue}}/** | ||
| * Ensure fields don't pass through to HAX if in that context | ||
| */},{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 | ||
| */},{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 | ||
| */},{key:"connectedCallback",value:function connectedCallback(){babelHelpers.get(babelHelpers.getPrototypeOf(CodeEditor.prototype),"connectedCallback",this).call(this);var root=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){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){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={/** | ||
| info.removedNodes.map(function(node){if(node.tagName){_this2.updateEditorValue(node)}})}})})}},{key:"disconnectedCallback",value:function disconnectedCallback(){this.removeEventListener("monaco-element-ready",this.editorReady.bind(this));babelHelpers.get(babelHelpers.getPrototypeOf(CodeEditor.prototype),"disconnectedCallback",this).call(this)}},{key:"editorReady",value:function editorReady(e){if(this.editorValue){this.shadowRoot.querySelector("#codeeditor").value=this.editorValue}}}],[{key:"template",get:function get(){return(0,_polymerElement.html)(_templateObject_75e45f60ab1311e9acdc7d0181783c2c())}},{key:"tag",get:function get(){return"code-editor"}},{key:"properties",get:function get(){var props={/** | ||
| * Title | ||
@@ -38,3 +44,3 @@ */title:{type:String},/** | ||
| * contents of the editor | ||
| */editorValue:{type:String},/** | ||
| */editorValue:{type:String,observer:"_editorValueChanged"},/** | ||
| * value of the editor after the fact | ||
@@ -49,2 +55,8 @@ */value:{type:String,notify:!0},/** | ||
| * 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)}); | ||
| */fontSize:{type:Number,value:16},/** | ||
| * automatically set focus on the editor | ||
| */autofocus:{type:Boolean,value:!1,reflectToAttribute:!0},/** | ||
| * hide the line numbers | ||
| */hideLineNumbers:{type:Boolean,value:!1},/** | ||
| * does the monaco-editor have focus | ||
| */focused:{type:Boolean,value:!1,reflectToAttribute:!0}};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)}); |
@@ -11,3 +11,3 @@ /** | ||
| * - monaco is the VS code editor | ||
| */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` | ||
| */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");this.addEventListener("monaco-element-ready",this.editorReady.bind(this))}static get template(){return html` | ||
| <style> | ||
@@ -17,4 +17,8 @@ :host { | ||
| padding: 16px; | ||
| font-family: unset; | ||
| } | ||
| .code-pen-container { | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| .code-pen-container:not([hidden]) { | ||
| width: 100%; | ||
@@ -34,5 +38,2 @@ display: flex; | ||
| } | ||
| [hidden] { | ||
| display: none !important; | ||
| } | ||
| code-pen-button { | ||
@@ -42,15 +43,32 @@ float: right; | ||
| } | ||
| h3 { | ||
| color: var(--code-pen-title-color, #222222); | ||
| label { | ||
| color: var(--code-editor-label-color, #888); | ||
| transition: all 0.5s; | ||
| @apply --code-editor-label; | ||
| } | ||
| :host([focused]) label { | ||
| color: var( | ||
| --code-editor-float-label-active-color, | ||
| var(--code-editor-label-color, #000) | ||
| ); | ||
| @apply --code-editor-focus-label; | ||
| } | ||
| #codeeditor { | ||
| height: 100%; | ||
| display: flex; | ||
| @apply --code-editor-code; | ||
| } | ||
| :host([focused]) #codeeditor { | ||
| @apply --code-editor-focus-code; | ||
| } | ||
| </style> | ||
| <h3 hidden$="[[!title]]">[[title]]</h3> | ||
| <label for="codeeditor" hidden$="[[!title]]">[[title]]</label> | ||
| <monaco-element | ||
| id="codeeditor" | ||
| autofocus$="[[autofocus]]" | ||
| hide-line-numbers$="[[hideLineNumbers]]" | ||
| lib-path="[[__libPath]]" | ||
| value="[[editorValue]]" | ||
| language="[[language]]" | ||
@@ -61,2 +79,4 @@ theme="[[theme]]" | ||
| read-only$="[[readOnly]]" | ||
| on-code-editor-focus="_handleFocus" | ||
| on-code-editor-blur="_handleBlur" | ||
| > | ||
@@ -78,3 +98,3 @@ </monaco-element> | ||
| * contents of the editor | ||
| */editorValue:{type:String},/** | ||
| */editorValue:{type:String,observer:"_editorValueChanged"},/** | ||
| * value of the editor after the fact | ||
@@ -89,5 +109,17 @@ */value:{type:String,notify:!0},/** | ||
| * font size for the editor | ||
| */fontSize:{type:Number,value:16}};if(super.properties){props=Object.assign(props,super.properties)}return props}/** | ||
| */fontSize:{type:Number,value:16},/** | ||
| * automatically set focus on the editor | ||
| */autofocus:{type:Boolean,value:!1,reflectToAttribute:!0},/** | ||
| * hide the line numbers | ||
| */hideLineNumbers:{type:Boolean,value:!1},/** | ||
| * does the monaco-editor have focus | ||
| */focused:{type:Boolean,value:!1,reflectToAttribute:!0}};if(super.properties){props=Object.assign(props,super.properties)}return props}/** | ||
| * Update the post data whenever the editor has been updated | ||
| */_computeCodePenData(title,editorValue){return{title:title,html:editorValue}}/** | ||
| * sets focused attribute when monaco-elements's focus event fires | ||
| * @param {event} e the monaco-elements's focus event | ||
| */_handleFocus(e){this.focused=!0}/** | ||
| * unsets focused attribute when monaco-elements's blur event fires | ||
| * @param {event} e the monaco-elements's blur event | ||
| */_handleBlur(e){this.focused=!1}/** | ||
| * LEGACY: pass down mode to language if that api is used | ||
@@ -100,10 +132,10 @@ */_modeChanged(newValue){this.language=this.mode}/** | ||
| */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()}}}/** | ||
| 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()}}}_editorValueChanged(newValue){if(newValue){this.shadowRoot.querySelector("#codeeditor").value=newValue}}/** | ||
| * Ensure fields don't pass through to HAX if in that context | ||
| */preProcessHaxNodeToContent(clone){clone.editorValue=null;clone.codePenData=null;clone.value=null;clone.removeAttribute("value");clone.removeAttribute("code-pen-data");return clone}/** | ||
| * attached life cycle | ||
| */connectedCallback(){super.connectedCallback();afterNextRender(this,function(){// mutation observer that ensures state of hax applied correctly | ||
| */connectedCallback(){super.connectedCallback();let root=this;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=>{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=>{if(node.tagName){this.updateEditorValue(node)}})}})})}}window.customElements.define(CodeEditor.tag,CodeEditor);export{CodeEditor}; | ||
| info.removedNodes.map(node=>{if(node.tagName){this.updateEditorValue(node)}})}})})}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}; |
@@ -33,4 +33,8 @@ /** | ||
| padding: 16px; | ||
| font-family: unset; | ||
| } | ||
| .code-pen-container { | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| .code-pen-container:not([hidden]) { | ||
| width: 100%; | ||
@@ -50,5 +54,2 @@ display: flex; | ||
| } | ||
| [hidden] { | ||
| display: none !important; | ||
| } | ||
| code-pen-button { | ||
@@ -58,13 +59,31 @@ float: right; | ||
| } | ||
| h3 { | ||
| color: var(--code-pen-title-color, #222222); | ||
| label { | ||
| color: var(--code-editor-label-color, #888); | ||
| transition: all 0.5s; | ||
| @apply --code-editor-label; | ||
| } | ||
| :host([focused]) label { | ||
| color: var( | ||
| --code-editor-float-label-active-color, | ||
| var(--code-editor-label-color, #000) | ||
| ); | ||
| @apply --code-editor-focus-label; | ||
| } | ||
| #codeeditor { | ||
| height: 100%; | ||
| display: flex; | ||
| @apply --code-editor-code; | ||
| } | ||
| :host([focused]) #codeeditor { | ||
| @apply --code-editor-focus-code; | ||
| } | ||
| </style> | ||
| <h3 hidden$="[[!title]]">[[title]]</h3> | ||
| <label for="codeeditor" hidden$="[[!title]]">[[title]]</label> | ||
| <monaco-element | ||
| id="codeeditor" | ||
| autofocus$="[[autofocus]]" | ||
| hide-line-numbers$="[[hideLineNumbers]]" | ||
| lib-path="[[__libPath]]" | ||
@@ -76,2 +95,4 @@ language="[[language]]" | ||
| read-only$="[[readOnly]]" | ||
| on-code-editor-focus="_handleFocus" | ||
| on-code-editor-blur="_handleBlur" | ||
| > | ||
@@ -98,2 +119,3 @@ </monaco-element> | ||
| }, | ||
| /** | ||
@@ -163,2 +185,25 @@ * Show codePen button to fork it to there to run | ||
| value: 16 | ||
| }, | ||
| /** | ||
| * automatically set focus on the editor | ||
| */ | ||
| autofocus: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| /** | ||
| * hide the line numbers | ||
| */ | ||
| hideLineNumbers: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| /** | ||
| * does the monaco-editor have focus | ||
| */ | ||
| focused: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| } | ||
@@ -182,2 +227,16 @@ }; | ||
| /** | ||
| * sets focused attribute when monaco-elements's focus event fires | ||
| * @param {event} e the monaco-elements's focus event | ||
| */ | ||
| _handleFocus(e) { | ||
| this.focused = true; | ||
| } | ||
| /** | ||
| * unsets focused attribute when monaco-elements's blur event fires | ||
| * @param {event} e the monaco-elements's blur event | ||
| */ | ||
| _handleBlur(e) { | ||
| this.focused = false; | ||
| } | ||
| /** | ||
| * LEGACY: pass down mode to language if that api is used | ||
@@ -248,2 +307,3 @@ */ | ||
| super.connectedCallback(); | ||
| let root = this; | ||
| afterNextRender(this, function() { | ||
@@ -250,0 +310,0 @@ // mutation observer that ensures state of hax applied correctly |
@@ -1,2 +0,2 @@ | ||
| !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})}); | ||
| !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,o,n,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 o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function d(e){return(d=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 u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function s(e,t,o){return(s="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,o){var n=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=d(e)););return e}(e,t);if(n){var r=Object.getOwnPropertyDescriptor(n,t);return r.get?r.get.call(o):r.value}})(e,t,o||e)}function p(){var e,t,o=(e=['\n <style>\n :host {\n display: block;\n padding: 16px;\n font-family: unset;\n }\n :host([hidden]) {\n display: none !important;\n }\n .code-pen-container:not([hidden]) {\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 code-pen-button {\n float: right;\n height: 40px;\n }\n label {\n color: var(--code-editor-label-color, #888);\n transition: all 0.5s;\n @apply --code-editor-label;\n }\n\n :host([focused]) label {\n color: var(\n --code-editor-float-label-active-color,\n var(--code-editor-label-color, #000)\n );\n @apply --code-editor-focus-label;\n }\n\n #codeeditor {\n height: 100%;\n display: flex;\n @apply --code-editor-code;\n }\n\n :host([focused]) #codeeditor {\n @apply --code-editor-focus-code;\n }\n </style>\n <label for="codeeditor" hidden$="[[!title]]">[[title]]</label>\n <monaco-element\n id="codeeditor"\n autofocus$="[[autofocus]]"\n hide-line-numbers$="[[hideLineNumbers]]"\n lib-path="[[__libPath]]"\n language="[[language]]"\n theme="[[theme]]"\n on-value-changed="_editorDataChanged"\n font-size$="[[fontSize]]"\n read-only$="[[readOnly]]"\n on-code-editor-focus="_handleFocus"\n on-code-editor-blur="_handleBlur"\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 o},o}var f=function(e){function f(){var e,t,o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,f),t=this,(e=!(o=d(f).call(this))||"object"!=typeof o&&"function"!=typeof o?u(t):o).__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.addEventListener("monaco-element-ready",e.editorReady.bind(u(e))),e}var y,m,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)),y=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,observer:"_editorValueChanged"},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},autofocus:{type:Boolean,value:!1,reflectToAttribute:!0},hideLineNumbers:{type:Boolean,value:!1},focused:{type:Boolean,value:!1,reflectToAttribute:!0}};return s(d(f),"properties",this)&&(e=Object.assign(e,s(d(f),"properties",this))),e}}],(m=[{key:"_computeCodePenData",value:function(e,t){return{title:e,html:t}}},{key:"_handleFocus",value:function(e){this.focused=!0}},{key:"_handleBlur",value:function(e){this.focused=!1}},{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="",o=e;if("TEMPLATE"!==e.tagName){if(console.warn("code-editor works best with a template tag provided in light dom"),(o=n.dom(this).getEffectiveChildNodes()).length>0)for(var r=0,i=o.length;r<i;r++)"undefined"!==l(o[r].tagName)?t+=o[r].outerHTML:t+=o[r].textContent}else t=o.innerHTML;t&&(this.shadowRoot.querySelector("#codeeditor").value=t.trim())}}},{key:"_editorValueChanged",value:function(e){e&&(this.shadowRoot.querySelector("#codeeditor").value=e)}},{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(d(f.prototype),"connectedCallback",this).call(this),r.afterNextRender(this,function(){var e=this;this._observer=new o.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)})})})}},{key:"disconnectedCallback",value:function(){this.removeEventListener("monaco-element-ready",this.editorReady.bind(this)),s(d(f.prototype),"disconnectedCallback",this).call(this)}},{key:"editorReady",value:function(e){this.editorValue&&(this.shadowRoot.querySelector("#codeeditor").value=this.editorValue)}}])&&a(y.prototype,m),h&&a(y,h),f}();window.customElements.define(f.tag,f),e.CodeEditor=f,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=code-editor.umd.js.map |
@@ -36,6 +36,8 @@ const gulp = require("gulp"); | ||
| } | ||
| let props = "{}"; | ||
| props = fs.readFileSync( | ||
| let rawprops = "{}"; | ||
| rawprops = fs.readFileSync( | ||
| path.join("./", packageJson.wcfactory.files.properties) | ||
| ); | ||
| let props = `${rawprops}`; | ||
| props = props.replace(/\"type\": \"(\w+)\"/g, '"type": $1'); | ||
| let cssResult = "<style>"; | ||
@@ -42,0 +44,0 @@ if ( |
@@ -66,2 +66,4 @@ import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
| ready: "ready", | ||
| focus: "focus", | ||
| blur: "blur", | ||
| valueChanged: "valueChanged", | ||
@@ -90,2 +92,17 @@ languageChanged: "languageChanged", | ||
| computed: "generateUUID()" | ||
| }, | ||
| /** | ||
| * automatically set focus on the iframe | ||
| */ | ||
| autofocus: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| /** | ||
| * hide line numbers | ||
| */ | ||
| hideLineNumbers: { | ||
| type: Boolean, | ||
| value: false | ||
| } | ||
@@ -141,2 +158,4 @@ }; | ||
| ready: 'ready', | ||
| focus: 'focus', | ||
| blur: "blur", | ||
| valueChanged: 'valueChanged', | ||
@@ -165,2 +184,3 @@ languageChanged: 'languageChanged', | ||
| automaticLayout: true, | ||
| lineNumbers: '${!this.hideLineNumbers}', | ||
| fontSize: ${this.fontSize}, | ||
@@ -173,3 +193,2 @@ readOnly: ${this.readOnly}, | ||
| }); | ||
| const model = this.editor.getModel(); | ||
@@ -182,2 +201,9 @@ model.onDidChangeContent(() => { | ||
| this.ready(); | ||
| if(${this.autofocus}) this.editor.focus(); | ||
| this.editor.onDidFocusEditorText(e=>{ | ||
| this.postMessage(eventTypes.focus, null); | ||
| }); | ||
| this.editor.onDidBlurEditorText(e=>{ | ||
| this.postMessage(eventTypes.blur, null); | ||
| }); | ||
| }); | ||
@@ -270,2 +296,3 @@ } | ||
| } | ||
| if (this.autofocus) this.iframe.focus(); | ||
| } | ||
@@ -299,4 +326,28 @@ | ||
| this.onIFrameReady(); | ||
| } else if (data.event === this.eventTypes.focus) { | ||
| this.onIFrameFocus(); | ||
| } else if (data.event === this.eventTypes.blur) { | ||
| this.onIFrameBlur(); | ||
| } | ||
| } | ||
| onIFrameFocus() { | ||
| this.dispatchEvent( | ||
| new CustomEvent("code-editor-focus", { | ||
| bubbles: true, | ||
| composed: true, | ||
| cancelable: true, | ||
| detail: true | ||
| }) | ||
| ); | ||
| } | ||
| onIFrameBlur() { | ||
| this.dispatchEvent( | ||
| new CustomEvent("code-editor-blur", { | ||
| bubbles: true, | ||
| composed: true, | ||
| cancelable: true, | ||
| detail: true | ||
| }) | ||
| ); | ||
| } | ||
@@ -303,0 +354,0 @@ onIFrameReady() { |
@@ -19,3 +19,3 @@ { | ||
| }, | ||
| "version": "2.1.0", | ||
| "version": "2.1.1", | ||
| "description": "Data binding wrapped on top of a popular code editor", | ||
@@ -44,4 +44,4 @@ "repository": { | ||
| "dependencies": { | ||
| "@lrnwebcomponents/hax-body-behaviors": "^2.1.0", | ||
| "@lrnwebcomponents/schema-behaviors": "^2.1.0", | ||
| "@lrnwebcomponents/hax-body-behaviors": "^2.1.1", | ||
| "@lrnwebcomponents/schema-behaviors": "^2.1.1", | ||
| "@polymer/polymer": "^3.2.0", | ||
@@ -51,4 +51,4 @@ "monaco-editor": "^0.15.0" | ||
| "devDependencies": { | ||
| "@lrnwebcomponents/deduping-fix": "^2.0.9", | ||
| "@lrnwebcomponents/storybook-utilities": "^2.1.0", | ||
| "@lrnwebcomponents/deduping-fix": "^2.1.1", | ||
| "@lrnwebcomponents/storybook-utilities": "^2.1.1", | ||
| "@polymer/iron-component-page": "github:PolymerElements/iron-component-page", | ||
@@ -60,3 +60,3 @@ "@polymer/iron-demo-helpers": "^3.1.0", | ||
| "gulp-sourcemaps": "2.6.4", | ||
| "lodash": "4.17.11", | ||
| "lodash": "4.17.13", | ||
| "polymer-cli": "1.9.9", | ||
@@ -73,3 +73,3 @@ "wct-browser-legacy": "1.0.2" | ||
| ], | ||
| "gitHead": "38a0c3ad00e8447837037bde2dc1172273a3a311" | ||
| "gitHead": "377805ee041d6205232182b01f8e05a177ef3bf7" | ||
| } |
@@ -33,4 +33,8 @@ /** | ||
| padding: 16px; | ||
| font-family: unset; | ||
| } | ||
| .code-pen-container { | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| .code-pen-container:not([hidden]) { | ||
| width: 100%; | ||
@@ -50,5 +54,2 @@ display: flex; | ||
| } | ||
| [hidden] { | ||
| display: none !important; | ||
| } | ||
| code-pen-button { | ||
@@ -58,13 +59,31 @@ float: right; | ||
| } | ||
| h3 { | ||
| color: var(--code-pen-title-color, #222222); | ||
| label { | ||
| color: var(--code-editor-label-color, #888); | ||
| transition: all 0.5s; | ||
| @apply --code-editor-label; | ||
| } | ||
| :host([focused]) label { | ||
| color: var( | ||
| --code-editor-float-label-active-color, | ||
| var(--code-editor-label-color, #000) | ||
| ); | ||
| @apply --code-editor-focus-label; | ||
| } | ||
| #codeeditor { | ||
| height: 100%; | ||
| display: flex; | ||
| @apply --code-editor-code; | ||
| } | ||
| :host([focused]) #codeeditor { | ||
| @apply --code-editor-focus-code; | ||
| } | ||
| </style> | ||
| <h3 hidden$="[[!title]]">[[title]]</h3> | ||
| <label for="codeeditor" hidden$="[[!title]]">[[title]]</label> | ||
| <monaco-element | ||
| id="codeeditor" | ||
| autofocus$="[[autofocus]]" | ||
| hide-line-numbers$="[[hideLineNumbers]]" | ||
| lib-path="[[__libPath]]" | ||
@@ -76,2 +95,4 @@ language="[[language]]" | ||
| read-only$="[[readOnly]]" | ||
| on-code-editor-focus="_handleFocus" | ||
| on-code-editor-blur="_handleBlur" | ||
| > | ||
@@ -98,2 +119,3 @@ </monaco-element> | ||
| }, | ||
| /** | ||
@@ -163,2 +185,25 @@ * Show codePen button to fork it to there to run | ||
| value: 16 | ||
| }, | ||
| /** | ||
| * automatically set focus on the editor | ||
| */ | ||
| autofocus: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| /** | ||
| * hide the line numbers | ||
| */ | ||
| hideLineNumbers: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| /** | ||
| * does the monaco-editor have focus | ||
| */ | ||
| focused: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| } | ||
@@ -182,2 +227,16 @@ }; | ||
| /** | ||
| * sets focused attribute when monaco-elements's focus event fires | ||
| * @param {event} e the monaco-elements's focus event | ||
| */ | ||
| _handleFocus(e) { | ||
| this.focused = true; | ||
| } | ||
| /** | ||
| * unsets focused attribute when monaco-elements's blur event fires | ||
| * @param {event} e the monaco-elements's blur event | ||
| */ | ||
| _handleBlur(e) { | ||
| this.focused = false; | ||
| } | ||
| /** | ||
| * LEGACY: pass down mode to language if that api is used | ||
@@ -248,2 +307,3 @@ */ | ||
| super.connectedCallback(); | ||
| let root = this; | ||
| afterNextRender(this, function() { | ||
@@ -250,0 +310,0 @@ // mutation observer that ensures state of hax applied correctly |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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 riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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 riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.31%
1059242
- Lines of code
- increased by15.47%
2000
- Number of medium supply chain risk alerts
- decreased by-14.29%
6