@lrnwebcomponents/code-editor
Advanced tools
Comparing version 2.2.3 to 2.3.0
{ | ||
"schema_version": "1.0.0", | ||
"classes": [ | ||
"elements": [ | ||
{ | ||
@@ -8,5 +8,320 @@ "description": "`code-editor`\n`Wrapper on top of a code editor`", | ||
"path": "code-editor.js", | ||
"properties": [], | ||
"properties": [ | ||
{ | ||
"name": "title", | ||
"type": "string | null | undefined", | ||
"description": "Title", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 135, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 137, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "String" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "showCodePen", | ||
"type": "boolean | null | undefined", | ||
"description": "Show codePen button to fork it to there to run", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 141, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 145, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "Boolean" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "readOnly", | ||
"type": "boolean | null | undefined", | ||
"description": "Readonly setting for the editor", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 149, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 153, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "Boolean" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "codePenData", | ||
"type": "Object | null | undefined", | ||
"description": "Code pen data, computed based on the HTML editor", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 157, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 159, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "Object" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "editorValue", | ||
"type": "string | null | undefined", | ||
"description": "contents of the editor", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 163, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 165, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "String" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "value", | ||
"type": "string | null | undefined", | ||
"description": "value of the editor after the fact", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 169, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 171, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "String" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "theme", | ||
"type": "string | null | undefined", | ||
"description": "Theme for the Ace editor.", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 175, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 177, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "String" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "mode", | ||
"type": "string | null | undefined", | ||
"description": "Mode / language for editor", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 181, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 183, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "String" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "language", | ||
"type": "string | null | undefined", | ||
"description": "Language to present color coding for", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 187, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 189, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "String" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "fontSize", | ||
"type": "number | null | undefined", | ||
"description": "font size for the editor", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 193, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 196, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "Number" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "autofocus", | ||
"type": "boolean | null | undefined", | ||
"description": "automatically set focus on the editor", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 200, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 203, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "Boolean" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "hideLineNumbers", | ||
"type": "boolean | null | undefined", | ||
"description": "hide the line numbers", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 207, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 210, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "Boolean" | ||
} | ||
} | ||
}, | ||
{ | ||
"name": "focused", | ||
"type": "boolean | null | undefined", | ||
"description": "does the monaco-editor have focus", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 214, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 217, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": { | ||
"polymer": { | ||
"attributeType": "Boolean" | ||
} | ||
} | ||
} | ||
], | ||
"methods": [ | ||
{ | ||
"name": "render", | ||
"description": "LitElement render", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 101, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 123, | ||
"column": 3 | ||
} | ||
}, | ||
"metadata": {}, | ||
"params": [] | ||
}, | ||
{ | ||
"name": "updated", | ||
"description": "", | ||
"privacy": "public", | ||
"sourceRange": { | ||
"start": { | ||
"line": 220, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 252, | ||
"column": 3 | ||
} | ||
}, | ||
"metadata": {}, | ||
"params": [ | ||
{ | ||
"name": "changedProperties" | ||
} | ||
], | ||
"return": { | ||
"type": "void" | ||
} | ||
}, | ||
{ | ||
"name": "_computeCodePenData", | ||
@@ -17,7 +332,7 @@ "description": "Update the post data whenever the editor has been updated", | ||
"start": { | ||
"line": 210, | ||
"line": 256, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 215, | ||
"line": 261, | ||
"column": 3 | ||
@@ -42,7 +357,7 @@ } | ||
"start": { | ||
"line": 220, | ||
"line": 266, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 222, | ||
"line": 268, | ||
"column": 3 | ||
@@ -69,7 +384,7 @@ } | ||
"start": { | ||
"line": 227, | ||
"line": 273, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 229, | ||
"line": 275, | ||
"column": 3 | ||
@@ -96,7 +411,7 @@ } | ||
"start": { | ||
"line": 233, | ||
"line": 279, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 235, | ||
"line": 281, | ||
"column": 3 | ||
@@ -121,7 +436,7 @@ } | ||
"start": { | ||
"line": 240, | ||
"line": 286, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 243, | ||
"line": 289, | ||
"column": 3 | ||
@@ -146,7 +461,7 @@ } | ||
"start": { | ||
"line": 248, | ||
"line": 294, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 274, | ||
"line": 320, | ||
"column": 3 | ||
@@ -171,7 +486,7 @@ } | ||
"start": { | ||
"line": 275, | ||
"line": 321, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 279, | ||
"line": 325, | ||
"column": 3 | ||
@@ -196,7 +511,7 @@ } | ||
"start": { | ||
"line": 283, | ||
"line": 329, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 290, | ||
"line": 336, | ||
"column": 3 | ||
@@ -218,7 +533,7 @@ } | ||
"start": { | ||
"line": 294, | ||
"line": 340, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 319, | ||
"line": 366, | ||
"column": 3 | ||
@@ -239,7 +554,7 @@ } | ||
"start": { | ||
"line": 320, | ||
"line": 367, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 330, | ||
"line": 373, | ||
"column": 3 | ||
@@ -260,7 +575,7 @@ } | ||
"start": { | ||
"line": 331, | ||
"line": 374, | ||
"column": 2 | ||
}, | ||
"end": { | ||
"line": 335, | ||
"line": 378, | ||
"column": 3 | ||
@@ -285,6 +600,2 @@ } | ||
"description": "" | ||
}, | ||
{ | ||
"url": "demo/index.html", | ||
"description": "" | ||
} | ||
@@ -295,7 +606,7 @@ ], | ||
"start": { | ||
"line": 16, | ||
"line": 15, | ||
"column": 0 | ||
}, | ||
"end": { | ||
"line": 336, | ||
"line": 379, | ||
"column": 1 | ||
@@ -305,5 +616,223 @@ } | ||
"privacy": "public", | ||
"name": "CodeEditor" | ||
"superclass": "HTMLElement", | ||
"name": "CodeEditor", | ||
"attributes": [ | ||
{ | ||
"name": "title", | ||
"description": "Title", | ||
"sourceRange": { | ||
"start": { | ||
"line": 135, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 137, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "string | null | undefined" | ||
}, | ||
{ | ||
"name": "show-code-pen", | ||
"description": "Show codePen button to fork it to there to run", | ||
"sourceRange": { | ||
"start": { | ||
"line": 141, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 145, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "boolean | null | undefined" | ||
}, | ||
{ | ||
"name": "read-only", | ||
"description": "Readonly setting for the editor", | ||
"sourceRange": { | ||
"start": { | ||
"line": 149, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 153, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "boolean | null | undefined" | ||
}, | ||
{ | ||
"name": "code-pen-data", | ||
"description": "Code pen data, computed based on the HTML editor", | ||
"sourceRange": { | ||
"start": { | ||
"line": 157, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 159, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "Object | null | undefined" | ||
}, | ||
{ | ||
"name": "editor-value", | ||
"description": "contents of the editor", | ||
"sourceRange": { | ||
"start": { | ||
"line": 163, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 165, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "string | null | undefined" | ||
}, | ||
{ | ||
"name": "value", | ||
"description": "value of the editor after the fact", | ||
"sourceRange": { | ||
"start": { | ||
"line": 169, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 171, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "string | null | undefined" | ||
}, | ||
{ | ||
"name": "theme", | ||
"description": "Theme for the Ace editor.", | ||
"sourceRange": { | ||
"start": { | ||
"line": 175, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 177, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "string | null | undefined" | ||
}, | ||
{ | ||
"name": "mode", | ||
"description": "Mode / language for editor", | ||
"sourceRange": { | ||
"start": { | ||
"line": 181, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 183, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "string | null | undefined" | ||
}, | ||
{ | ||
"name": "language", | ||
"description": "Language to present color coding for", | ||
"sourceRange": { | ||
"start": { | ||
"line": 187, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 189, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "string | null | undefined" | ||
}, | ||
{ | ||
"name": "font-size", | ||
"description": "font size for the editor", | ||
"sourceRange": { | ||
"start": { | ||
"line": 193, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 196, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "number | null | undefined" | ||
}, | ||
{ | ||
"name": "autofocus", | ||
"description": "automatically set focus on the editor", | ||
"sourceRange": { | ||
"start": { | ||
"line": 200, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 203, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "boolean | null | undefined" | ||
}, | ||
{ | ||
"name": "hide-line-numbers", | ||
"description": "hide the line numbers", | ||
"sourceRange": { | ||
"start": { | ||
"line": 207, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 210, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "boolean | null | undefined" | ||
}, | ||
{ | ||
"name": "focused", | ||
"description": "does the monaco-editor have focus", | ||
"sourceRange": { | ||
"start": { | ||
"line": 214, | ||
"column": 6 | ||
}, | ||
"end": { | ||
"line": 217, | ||
"column": 7 | ||
} | ||
}, | ||
"metadata": {}, | ||
"type": "boolean | null | undefined" | ||
} | ||
], | ||
"events": [], | ||
"styling": { | ||
"cssVariables": [], | ||
"selectors": [] | ||
}, | ||
"slots": [], | ||
"tagname": "code-editor" | ||
} | ||
] | ||
} |
@@ -5,5 +5,3 @@ /** | ||
*/ | ||
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js"; | ||
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js"; | ||
import { LitElement, html, css } from "lit-element/lit-element.js"; | ||
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js"; | ||
@@ -17,15 +15,11 @@ /** | ||
* - monaco is the VS code editor | ||
* @customElement code-editor | ||
*/ | ||
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> | ||
class CodeEditor extends SchemaBehaviors(LitElement) { | ||
/** | ||
* LitElement constructable styles enhancement | ||
*/ | ||
static get styles() { | ||
return [ | ||
css` | ||
:host { | ||
@@ -61,3 +55,2 @@ display: block; | ||
transition: all 0.5s; | ||
@apply --code-editor-label; | ||
} | ||
@@ -70,3 +63,2 @@ | ||
); | ||
@apply --code-editor-focus-label; | ||
} | ||
@@ -77,27 +69,59 @@ | ||
display: flex; | ||
@apply --code-editor-code; | ||
border: var(--code-editor-code-border); | ||
border-radius: var(--code-editor-code-border-radius); | ||
} | ||
:host([focused]) #codeeditor { | ||
@apply --code-editor-focus-code; | ||
border: var(--code-editor-focus-code-border); | ||
} | ||
</style> | ||
<label for="codeeditor" hidden$="[[!title]]">[[title]]</label> | ||
` | ||
]; | ||
} | ||
/** | ||
* HTMLElement | ||
*/ | ||
constructor() { | ||
super(); | ||
this.showCodePen = false; | ||
this.readOnly = false; | ||
this.theme = "vs-dark"; | ||
this.language = "javascript"; | ||
this.fontSize = 16; | ||
this.autofocus = false; | ||
this.hideLineNumbers = false; | ||
this.focused = false; | ||
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"); | ||
setTimeout(() => { | ||
this.addEventListener( | ||
"monaco-element-ready", | ||
this.editorReady.bind(this) | ||
); | ||
}, 0); | ||
} | ||
/** | ||
* LitElement render | ||
*/ | ||
render() { | ||
return html` | ||
<label for="codeeditor" ?hidden="${!this.title}">${this.title}</label> | ||
<monaco-element | ||
id="codeeditor" | ||
autofocus$="[[autofocus]]" | ||
hide-line-numbers$="[[hideLineNumbers]]" | ||
lib-path="[[__libPath]]" | ||
language="[[language]]" | ||
theme="[[theme]]" | ||
on-value-changed="_editorDataChanged" | ||
font-size$="[[fontSize]]" | ||
read-only$="[[readOnly]]" | ||
on-code-editor-focus="_handleFocus" | ||
on-code-editor-blur="_handleBlur" | ||
?autofocus="${this.autofocus}" | ||
?hide-line-numbers="${this.hideLineNumbers}" | ||
lib-path="${this.__libPath}" | ||
language="${this.language}" | ||
theme="${this.theme}" | ||
@value-changed="${this._editorDataChanged}" | ||
font-size="${this.fontSize}" | ||
?read-only="${this.readOnly}" | ||
@code-editor-focus="${this._handleFocus}" | ||
@code-editor-blur="${this._handleBlur}" | ||
> | ||
</monaco-element> | ||
<div class="code-pen-container" hidden$="[[!showCodePen]]"> | ||
<div class="code-pen-container" ?hidden="${!this.showCodePen}"> | ||
<span>Check it out on code pen: </span | ||
><code-pen-button data="[[codePenData]]"></code-pen-button> | ||
><code-pen-button .data="${this.codePenData}"></code-pen-button> | ||
</div> | ||
@@ -114,3 +138,2 @@ `; | ||
...super.properties, | ||
/** | ||
@@ -122,3 +145,2 @@ * Title | ||
}, | ||
/** | ||
@@ -129,4 +151,4 @@ * Show codePen button to fork it to there to run | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true, | ||
attribute: "show-code-pen" | ||
}, | ||
@@ -138,4 +160,4 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true, | ||
attribute: "read-only" | ||
}, | ||
@@ -146,4 +168,3 @@ /** | ||
codePenData: { | ||
type: Object, | ||
computed: "_computeCodePenData(title, value)" | ||
type: Object | ||
}, | ||
@@ -154,4 +175,3 @@ /** | ||
editorValue: { | ||
type: String, | ||
observer: "_editorValueChanged" | ||
type: String | ||
}, | ||
@@ -162,4 +182,3 @@ /** | ||
value: { | ||
type: String, | ||
notify: true | ||
type: String | ||
}, | ||
@@ -170,4 +189,3 @@ /** | ||
theme: { | ||
type: String, | ||
value: "vs-dark" | ||
type: String | ||
}, | ||
@@ -178,4 +196,3 @@ /** | ||
mode: { | ||
type: String, | ||
observer: "_modeChanged" | ||
type: String | ||
}, | ||
@@ -186,4 +203,3 @@ /** | ||
language: { | ||
type: String, | ||
value: "javascript" | ||
type: String | ||
}, | ||
@@ -195,3 +211,3 @@ /** | ||
type: Number, | ||
value: 16 | ||
attribute: "font-size" | ||
}, | ||
@@ -203,4 +219,3 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true | ||
}, | ||
@@ -212,3 +227,3 @@ /** | ||
type: Boolean, | ||
value: false | ||
attribute: "hide-line-numbers" | ||
}, | ||
@@ -220,8 +235,39 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true | ||
} | ||
}; | ||
} | ||
updated(changedProperties) { | ||
changedProperties.forEach((oldValue, propName) => { | ||
if (propName == "editorValue") { | ||
this._editorValueChanged(this[propName], oldValue); | ||
} | ||
if (propName == "mode") { | ||
this._modeChanged(this[propName], oldValue); | ||
} | ||
if (propName === "showCodePen") { | ||
// notify | ||
this.dispatchEvent( | ||
new CustomEvent("show-code-pen-changed", { | ||
detail: { | ||
value: this[propName] | ||
} | ||
}) | ||
); | ||
} | ||
if (propName === "value") { | ||
// notify | ||
this.dispatchEvent( | ||
new CustomEvent("value-changed", { | ||
detail: { | ||
value: this[propName] | ||
} | ||
}) | ||
); | ||
} | ||
if (["title", "value"].includes(propName)) { | ||
this.codePenData = this._computeCodePenData(this.title, this.value); | ||
} | ||
}); | ||
} | ||
/** | ||
@@ -276,3 +322,3 @@ * Update the post data whenever the editor has been updated | ||
); | ||
children = FlattenedNodesObserver.getFlattenedNodes(this); | ||
children = this.children; | ||
if (children.length > 0) { | ||
@@ -317,9 +363,7 @@ // loop through everything found in the slotted area and put it back in | ||
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 (info.addedNodes.length > 0) { | ||
info.addedNodes.map(node => { | ||
// mutation observer that ensures state of hax applied correctly | ||
this._observer = new MutationObserver(mutations => { | ||
mutations.forEach(mutation => { | ||
if (mutation.addedNodes.length > 0) { | ||
mutation.addedNodes.forEach(node => { | ||
if (node.tagName) { | ||
@@ -331,5 +375,5 @@ this.updateEditorValue(node); | ||
// if we dropped nodes via the UI (delete event basically) | ||
if (info.removedNodes.length > 0) { | ||
if (mutation.removedNodes.length > 0) { | ||
// handle removing items... not sure we need to do anything here | ||
info.removedNodes.map(node => { | ||
mutation.removedNodes.forEach(node => { | ||
if (node.tagName) { | ||
@@ -342,8 +386,7 @@ this.updateEditorValue(node); | ||
}); | ||
this._observer.observe(this, { | ||
childList: true | ||
}); | ||
} | ||
disconnectedCallback() { | ||
this.removeEventListener( | ||
"monaco-element-ready", | ||
this.editorReady.bind(this) | ||
); | ||
if (this._observer) { | ||
@@ -350,0 +393,0 @@ this._observer.disconnect(); |
@@ -5,5 +5,3 @@ /** | ||
*/ | ||
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js"; | ||
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js"; | ||
import { LitElement, html, css } from "lit-element/lit-element.js"; | ||
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js"; | ||
@@ -17,15 +15,11 @@ /** | ||
* - monaco is the VS code editor | ||
* @customElement code-editor | ||
*/ | ||
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> | ||
class CodeEditor extends SchemaBehaviors(LitElement) { | ||
/** | ||
* LitElement constructable styles enhancement | ||
*/ | ||
static get styles() { | ||
return [ | ||
css` | ||
:host { | ||
@@ -61,3 +55,2 @@ display: block; | ||
transition: all 0.5s; | ||
@apply --code-editor-label; | ||
} | ||
@@ -70,3 +63,2 @@ | ||
); | ||
@apply --code-editor-focus-label; | ||
} | ||
@@ -77,27 +69,59 @@ | ||
display: flex; | ||
@apply --code-editor-code; | ||
border: var(--code-editor-code-border); | ||
border-radius: var(--code-editor-code-border-radius); | ||
} | ||
:host([focused]) #codeeditor { | ||
@apply --code-editor-focus-code; | ||
border: var(--code-editor-focus-code-border); | ||
} | ||
</style> | ||
<label for="codeeditor" hidden$="[[!title]]">[[title]]</label> | ||
` | ||
]; | ||
} | ||
/** | ||
* HTMLElement | ||
*/ | ||
constructor() { | ||
super(); | ||
this.showCodePen = false; | ||
this.readOnly = false; | ||
this.theme = "vs-dark"; | ||
this.language = "javascript"; | ||
this.fontSize = 16; | ||
this.autofocus = false; | ||
this.hideLineNumbers = false; | ||
this.focused = false; | ||
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"); | ||
setTimeout(() => { | ||
this.addEventListener( | ||
"monaco-element-ready", | ||
this.editorReady.bind(this) | ||
); | ||
}, 0); | ||
} | ||
/** | ||
* LitElement render | ||
*/ | ||
render() { | ||
return html` | ||
<label for="codeeditor" ?hidden="${!this.title}">${this.title}</label> | ||
<monaco-element | ||
id="codeeditor" | ||
autofocus$="[[autofocus]]" | ||
hide-line-numbers$="[[hideLineNumbers]]" | ||
lib-path="[[__libPath]]" | ||
language="[[language]]" | ||
theme="[[theme]]" | ||
on-value-changed="_editorDataChanged" | ||
font-size$="[[fontSize]]" | ||
read-only$="[[readOnly]]" | ||
on-code-editor-focus="_handleFocus" | ||
on-code-editor-blur="_handleBlur" | ||
?autofocus="${this.autofocus}" | ||
?hide-line-numbers="${this.hideLineNumbers}" | ||
lib-path="${this.__libPath}" | ||
language="${this.language}" | ||
theme="${this.theme}" | ||
@value-changed="${this._editorDataChanged}" | ||
font-size="${this.fontSize}" | ||
?read-only="${this.readOnly}" | ||
@code-editor-focus="${this._handleFocus}" | ||
@code-editor-blur="${this._handleBlur}" | ||
> | ||
</monaco-element> | ||
<div class="code-pen-container" hidden$="[[!showCodePen]]"> | ||
<div class="code-pen-container" ?hidden="${!this.showCodePen}"> | ||
<span>Check it out on code pen: </span | ||
><code-pen-button data="[[codePenData]]"></code-pen-button> | ||
><code-pen-button .data="${this.codePenData}"></code-pen-button> | ||
</div> | ||
@@ -114,3 +138,2 @@ `; | ||
...super.properties, | ||
/** | ||
@@ -122,3 +145,2 @@ * Title | ||
}, | ||
/** | ||
@@ -129,4 +151,4 @@ * Show codePen button to fork it to there to run | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true, | ||
attribute: "show-code-pen" | ||
}, | ||
@@ -138,4 +160,4 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true, | ||
attribute: "read-only" | ||
}, | ||
@@ -146,4 +168,3 @@ /** | ||
codePenData: { | ||
type: Object, | ||
computed: "_computeCodePenData(title, value)" | ||
type: Object | ||
}, | ||
@@ -154,4 +175,3 @@ /** | ||
editorValue: { | ||
type: String, | ||
observer: "_editorValueChanged" | ||
type: String | ||
}, | ||
@@ -162,4 +182,3 @@ /** | ||
value: { | ||
type: String, | ||
notify: true | ||
type: String | ||
}, | ||
@@ -170,4 +189,3 @@ /** | ||
theme: { | ||
type: String, | ||
value: "vs-dark" | ||
type: String | ||
}, | ||
@@ -178,4 +196,3 @@ /** | ||
mode: { | ||
type: String, | ||
observer: "_modeChanged" | ||
type: String | ||
}, | ||
@@ -186,4 +203,3 @@ /** | ||
language: { | ||
type: String, | ||
value: "javascript" | ||
type: String | ||
}, | ||
@@ -195,3 +211,3 @@ /** | ||
type: Number, | ||
value: 16 | ||
attribute: "font-size" | ||
}, | ||
@@ -203,4 +219,3 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true | ||
}, | ||
@@ -212,3 +227,3 @@ /** | ||
type: Boolean, | ||
value: false | ||
attribute: "hide-line-numbers" | ||
}, | ||
@@ -220,8 +235,39 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true | ||
} | ||
}; | ||
} | ||
updated(changedProperties) { | ||
changedProperties.forEach((oldValue, propName) => { | ||
if (propName == "editorValue") { | ||
this._editorValueChanged(this[propName], oldValue); | ||
} | ||
if (propName == "mode") { | ||
this._modeChanged(this[propName], oldValue); | ||
} | ||
if (propName === "showCodePen") { | ||
// notify | ||
this.dispatchEvent( | ||
new CustomEvent("show-code-pen-changed", { | ||
detail: { | ||
value: this[propName] | ||
} | ||
}) | ||
); | ||
} | ||
if (propName === "value") { | ||
// notify | ||
this.dispatchEvent( | ||
new CustomEvent("value-changed", { | ||
detail: { | ||
value: this[propName] | ||
} | ||
}) | ||
); | ||
} | ||
if (["title", "value"].includes(propName)) { | ||
this.codePenData = this._computeCodePenData(this.title, this.value); | ||
} | ||
}); | ||
} | ||
/** | ||
@@ -276,3 +322,3 @@ * Update the post data whenever the editor has been updated | ||
); | ||
children = FlattenedNodesObserver.getFlattenedNodes(this); | ||
children = this.children; | ||
if (children.length > 0) { | ||
@@ -317,9 +363,7 @@ // loop through everything found in the slotted area and put it back in | ||
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 (info.addedNodes.length > 0) { | ||
info.addedNodes.map(node => { | ||
// mutation observer that ensures state of hax applied correctly | ||
this._observer = new MutationObserver(mutations => { | ||
mutations.forEach(mutation => { | ||
if (mutation.addedNodes.length > 0) { | ||
mutation.addedNodes.forEach(node => { | ||
if (node.tagName) { | ||
@@ -331,5 +375,5 @@ this.updateEditorValue(node); | ||
// if we dropped nodes via the UI (delete event basically) | ||
if (info.removedNodes.length > 0) { | ||
if (mutation.removedNodes.length > 0) { | ||
// handle removing items... not sure we need to do anything here | ||
info.removedNodes.map(node => { | ||
mutation.removedNodes.forEach(node => { | ||
if (node.tagName) { | ||
@@ -342,8 +386,7 @@ this.updateEditorValue(node); | ||
}); | ||
this._observer.observe(this, { | ||
childList: true | ||
}); | ||
} | ||
disconnectedCallback() { | ||
this.removeEventListener( | ||
"monaco-element-ready", | ||
this.editorReady.bind(this) | ||
); | ||
if (this._observer) { | ||
@@ -350,0 +393,0 @@ this._observer.disconnect(); |
@@ -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/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/utils/render-status.js","@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],t):t((e=e||self).CodeEditor={},e.polymerElement_js,e.flattenedNodesObserver_js,e.renderStatus_js,e.schemaBehaviors_js)}(this,function(e,t,n,o,r){"use strict";function i(e){return(i="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 l(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 a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function d(e,t){return(d=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,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=c(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 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 n},n}var f=function(e){function f(){var e,t,n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,f),t=this,(e=!(n=c(f).call(this))||"object"!=typeof n&&"function"!=typeof n?u(t):n).__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,h,b;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&&d(e,t)}(f,r.SchemaBehaviors(t.PolymerElement)),y=f,b=[{key:"template",get:function(){return t.html(p())}},{key:"tag",get:function(){return"code-editor"}},{key:"properties",get:function(){return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){a(e,t,n[t])})}return e}({},s(c(f),"properties",this),{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}})}}],(h=[{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.FlattenedNodesObserver.getFlattenedNodes(this)).length>0)for(var r=0,l=o.length;r<l;r++)"undefined"!==i(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(c(f.prototype),"connectedCallback",this).call(this),o.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)})})})}},{key:"disconnectedCallback",value:function(){this.removeEventListener("monaco-element-ready",this.editorReady.bind(this)),this._observer&&(this._observer.disconnect(),this._observer=null),s(c(f.prototype),"disconnectedCallback",this).call(this)}},{key:"editorReady",value:function(e){this.editorValue&&(this.shadowRoot.querySelector("#codeeditor").value=this.editorValue)}}])&&l(y.prototype,h),b&&l(y,b),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("lit-element/lit-element.js"),require("@lrnwebcomponents/schema-behaviors/schema-behaviors.js")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js","@lrnwebcomponents/schema-behaviors/schema-behaviors.js"],t):t((e=e||self).CodeEditor={},e.litElement_js,e.schemaBehaviors_js)}(this,function(e,t,n){"use strict";function o(e){return(o="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 r(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 i(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function l(e,t){return(l=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 d(e,t,n){return(d="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=c(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 s(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function f(){var e=s(['\n <label for="codeeditor" ?hidden="','">','</label>\n <monaco-element\n id="codeeditor"\n ?autofocus="','"\n ?hide-line-numbers="','"\n lib-path="','"\n language="','"\n theme="','"\n @value-changed="','"\n font-size="','"\n ?read-only="','"\n @code-editor-focus="','"\n @code-editor-blur="','"\n >\n </monaco-element>\n <div class="code-pen-container" ?hidden="','">\n <span>Check it out on code pen: </span\n ><code-pen-button .data="','"></code-pen-button>\n </div>\n ']);return f=function(){return e},e}function h(){var e=s(["\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 }\n\n :host([focused]) label {\n color: var(\n --code-editor-float-label-active-color,\n var(--code-editor-label-color, #000)\n );\n }\n\n #codeeditor {\n height: 100%;\n display: flex;\n border: var(--code-editor-code-border);\n border-radius: var(--code-editor-code-border-radius);\n }\n\n :host([focused]) #codeeditor {\n border: var(--code-editor-focus-code-border);\n }\n "]);return h=function(){return e},e}var p=function(e){function r(){var e,t,n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,r),t=this,n=c(r).call(this),(e=!n||"object"!=typeof n&&"function"!=typeof n?u(t):n).showCodePen=!1,e.readOnly=!1,e.theme="vs-dark",e.language="javascript",e.fontSize=16,e.autofocus=!1,e.hideLineNumbers=!1,e.focused=!1,e.__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"),setTimeout(function(){e.addEventListener("monaco-element-ready",e.editorReady.bind(u(e)))},0),e}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&&l(e,t)}(r,n.SchemaBehaviors(t.LitElement)),i(r,null,[{key:"styles",get:function(){return[t.css(h())]}}]),i(r,[{key:"render",value:function(){return t.html(f(),!this.title,this.title,this.autofocus,this.hideLineNumbers,this.__libPath,this.language,this.theme,this._editorDataChanged,this.fontSize,this.readOnly,this._handleFocus,this._handleBlur,!this.showCodePen,this.codePenData)}},{key:"updated",value:function(e){var t=this;e.forEach(function(e,n){"editorValue"==n&&t._editorValueChanged(t[n],e),"mode"==n&&t._modeChanged(t[n],e),"showCodePen"===n&&t.dispatchEvent(new CustomEvent("show-code-pen-changed",{detail:{value:t[n]}})),"value"===n&&t.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t[n]}})),["title","value"].includes(n)&&(t.codePenData=t._computeCodePenData(t.title,t.value))})}},{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="",n=e;if("TEMPLATE"!==e.tagName){if(console.warn("code-editor works best with a template tag provided in light dom"),(n=this.children).length>0)for(var r=0,i=n.length;r<i;r++)"undefined"!==o(n[r].tagName)?t+=n[r].outerHTML:t+=n[r].textContent}else t=n.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(){var e=this;d(c(r.prototype),"connectedCallback",this).call(this),this._observer=new MutationObserver(function(t){t.forEach(function(t){t.addedNodes.length>0&&t.addedNodes.forEach(function(t){t.tagName&&e.updateEditorValue(t)}),t.removedNodes.length>0&&t.removedNodes.forEach(function(t){t.tagName&&e.updateEditorValue(t)})})}),this._observer.observe(this,{childList:!0})}},{key:"disconnectedCallback",value:function(){this._observer&&(this._observer.disconnect(),this._observer=null),d(c(r.prototype),"disconnectedCallback",this).call(this)}},{key:"editorReady",value:function(e){this.editorValue&&(this.shadowRoot.querySelector("#codeeditor").value=this.editorValue)}}],[{key:"tag",get:function(){return"code-editor"}},{key:"properties",get:function(){return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),o.forEach(function(t){a(e,t,n[t])})}return e}({},d(c(r),"properties",this),{title:{type:String},showCodePen:{type:Boolean,reflect:!0,attribute:"show-code-pen"},readOnly:{type:Boolean,reflect:!0,attribute:"read-only"},codePenData:{type:Object},editorValue:{type:String},value:{type:String},theme:{type:String},mode:{type:String},language:{type:String},fontSize:{type:Number,attribute:"font-size"},autofocus:{type:Boolean,reflect:!0},hideLineNumbers:{type:Boolean,attribute:"hide-line-numbers"},focused:{type:Boolean,reflect:!0}})}}]),r}();window.customElements.define(p.tag,p),e.CodeEditor=p,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
//# sourceMappingURL=code-editor.umd.js.map |
@@ -1,2 +0,2 @@ | ||
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
import { LitElement, html, css } from "lit-element/lit-element.js"; | ||
/** | ||
@@ -6,13 +6,21 @@ * `code-pen-button` | ||
* @demo demo/index.html | ||
* @customElement code-pen-button | ||
*/ | ||
class CodePenButton extends PolymerElement { | ||
static get template() { | ||
return html` | ||
<style> | ||
class CodePenButton extends LitElement { | ||
/** | ||
* LitElement constructable styles enhancement | ||
*/ | ||
static get styles() { | ||
return [ | ||
css` | ||
:host { | ||
display: block; | ||
} | ||
</style> | ||
<form action="[[endPoint]]" method="POST" target="_blank"> | ||
<input type="hidden" name="data" value\$="[[dataString]]" /> | ||
` | ||
]; | ||
} | ||
render() { | ||
return html` | ||
<form action="${this.endPoint}" method="POST" target="_blank"> | ||
<input type="hidden" name="data" value="${this.dataString}" /> | ||
<input | ||
@@ -33,6 +41,18 @@ type="image" | ||
} | ||
connectedCallback() { | ||
super.connectedCallback(); | ||
firstUpdated() { | ||
this.setAttribute("title", this.checkItOut); | ||
} | ||
constructor() { | ||
super(); | ||
this.checkItOut = "Check it out on codepen"; | ||
this.endPoint = "https://codepen.io/pen/define"; | ||
this.data = {}; | ||
} | ||
updated(changedProperties) { | ||
changedProperties.forEach((oldValue, propName) => { | ||
if (propName == "data" && this[propName]) { | ||
this.dataString = this._getDataString(this[propName]); | ||
} | ||
}); | ||
} | ||
static get properties() { | ||
@@ -42,3 +62,3 @@ return { | ||
type: String, | ||
value: "Check it out on codepen" | ||
attribute: "check-it-out" | ||
}, | ||
@@ -50,3 +70,3 @@ /** | ||
type: String, | ||
value: "https://codepen.io/pen/define" | ||
attribute: "end-point" | ||
}, | ||
@@ -58,3 +78,3 @@ /** | ||
type: String, | ||
computed: "_getDataString(data)" | ||
attribute: "data-string" | ||
}, | ||
@@ -65,8 +85,6 @@ /** | ||
data: { | ||
type: Object, | ||
value: {} | ||
type: Object | ||
} | ||
}; | ||
} | ||
/** | ||
@@ -73,0 +91,0 @@ * Return string from data object so it can be posted correctly. |
@@ -1,2 +0,2 @@ | ||
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
import { LitElement, html, css } from "lit-element/lit-element.js"; | ||
/** | ||
@@ -11,16 +11,11 @@ * `monaco-element` | ||
* | ||
* @customElement | ||
* @polymer | ||
* | ||
* @author Lars Gröber <larsgroeber7@gmail.com> | ||
* @customElement monaco-element | ||
*/ | ||
class MonacoElement extends PolymerElement { | ||
constructor() { | ||
super(); | ||
this.iframe = null; | ||
} | ||
static get template() { | ||
return html` | ||
<style> | ||
class MonacoElement extends LitElement { | ||
/** | ||
* LitElement constructable styles enhancement | ||
*/ | ||
static get styles() { | ||
return [ | ||
css` | ||
:host { | ||
@@ -36,21 +31,49 @@ display: block; | ||
} | ||
</style> | ||
` | ||
]; | ||
} | ||
constructor() { | ||
super(); | ||
this.iframe = null; | ||
this.value = ""; | ||
this.fontSize = 16; | ||
this.readOnly = false; | ||
this.eventTypes = { | ||
ready: "ready", | ||
focus: "focus", | ||
blur: "blur", | ||
valueChanged: "valueChanged", | ||
languageChanged: "languageChanged", | ||
themeChanged: "themeChanged" | ||
}; | ||
this.language = "javascript"; | ||
this.theme = "vs-dark"; | ||
this.libPath = "node_modules/monaco-editor/min/vs"; | ||
this.autofocus = false; | ||
this.hideLineNumbers = false; | ||
this.editorReference = this.generateUUID(); | ||
} | ||
/** | ||
* LitElement | ||
*/ | ||
render() { | ||
return html` | ||
<iframe id="iframe" frameborder="0"></iframe> | ||
`; | ||
} | ||
/** | ||
* LitElement / popular convention | ||
*/ | ||
static get properties() { | ||
return { | ||
value: { | ||
type: String, | ||
value: "", | ||
observer: "monacoValueChanged" | ||
type: String | ||
}, | ||
fontSize: { | ||
type: Number, | ||
value: 16 | ||
attribute: "font-size" | ||
}, | ||
readOnly: { | ||
type: Boolean, | ||
value: false | ||
attribute: "read-only" | ||
}, | ||
@@ -62,33 +85,22 @@ /** | ||
uniqueKey: { | ||
type: String | ||
type: String, | ||
attribute: "unique-key" | ||
}, | ||
eventTypes: { | ||
type: Object, | ||
value: { | ||
ready: "ready", | ||
focus: "focus", | ||
blur: "blur", | ||
valueChanged: "valueChanged", | ||
languageChanged: "languageChanged", | ||
themeChanged: "themeChanged" | ||
} | ||
type: Object | ||
}, | ||
language: { | ||
type: String, | ||
value: "javascript", | ||
observer: "monacoLanguageChanged" | ||
type: String | ||
}, | ||
theme: { | ||
type: String, | ||
value: "vs-dark", | ||
observer: "monacoThemeChanged" | ||
type: String | ||
}, | ||
libPath: { | ||
type: String, | ||
value: "node_modules/monaco-editor/min/vs" | ||
attribute: "lib-path" | ||
}, | ||
editorReference: { | ||
type: String, | ||
reflectToAttribute: true, | ||
computed: "generateUUID()" | ||
reflect: true, | ||
attribute: "editor-reference" | ||
}, | ||
@@ -100,4 +112,3 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true | ||
}, | ||
@@ -109,3 +120,3 @@ /** | ||
type: Boolean, | ||
value: false | ||
attribute: "hide-line-numbers" | ||
} | ||
@@ -130,3 +141,15 @@ }; | ||
} | ||
updated(changedProperties) { | ||
changedProperties.forEach((oldValue, propName) => { | ||
if (propName == "value") { | ||
this.monacoValueChanged(this[propName]); | ||
} | ||
if (propName == "language") { | ||
this.monacoLanguageChanged(this[propName]); | ||
} | ||
if (propName == "theme") { | ||
this.monacoThemeChanged(this[propName]); | ||
} | ||
}); | ||
} | ||
connectedCallback() { | ||
@@ -133,0 +156,0 @@ super.connectedCallback(); |
@@ -19,3 +19,3 @@ { | ||
}, | ||
"version": "2.2.3", | ||
"version": "2.3.0", | ||
"description": "Data binding wrapped on top of a popular code editor", | ||
@@ -32,3 +32,3 @@ "repository": { | ||
"start": "yarn run dev", | ||
"build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/rollup -c && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}'", | ||
"build": "../../node_modules/.bin/gulp && ../../node_modules/.bin/rollup -c && ../../node_modules/.bin/prettier --ignore-path ../../.prettierignore --write '**/*.{js,json}' && wca analyze \"**/*.js\" --outFile custom-elements.json", | ||
"dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"", | ||
@@ -44,3 +44,3 @@ "watch": "../../node_modules/.bin/gulp dev", | ||
"dependencies": { | ||
"@lrnwebcomponents/schema-behaviors": "^2.2.3", | ||
"@lrnwebcomponents/schema-behaviors": "^2.3.0", | ||
"@polymer/polymer": "^3.2.0", | ||
@@ -51,3 +51,3 @@ "monaco-editor": "^0.15.0" | ||
"@lrnwebcomponents/deduping-fix": "^2.1.1", | ||
"@lrnwebcomponents/storybook-utilities": "^2.2.3", | ||
"@lrnwebcomponents/storybook-utilities": "^2.3.0", | ||
"@polymer/iron-component-page": "github:PolymerElements/iron-component-page", | ||
@@ -71,3 +71,3 @@ "@polymer/iron-demo-helpers": "3.1.0", | ||
], | ||
"gitHead": "053bbb0a6336005e4fe5cbb41a5422b1f5856f11" | ||
"gitHead": "2e6809d848b36976043b7ea740a7254ca018adae" | ||
} |
@@ -5,5 +5,3 @@ /** | ||
*/ | ||
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js"; | ||
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js"; | ||
import { LitElement, html, css } from "lit-element/lit-element.js"; | ||
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js"; | ||
@@ -17,15 +15,11 @@ /** | ||
* - monaco is the VS code editor | ||
* @customElement code-editor | ||
*/ | ||
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> | ||
class CodeEditor extends SchemaBehaviors(LitElement) { | ||
/** | ||
* LitElement constructable styles enhancement | ||
*/ | ||
static get styles() { | ||
return [ | ||
css` | ||
:host { | ||
@@ -61,3 +55,2 @@ display: block; | ||
transition: all 0.5s; | ||
@apply --code-editor-label; | ||
} | ||
@@ -70,3 +63,2 @@ | ||
); | ||
@apply --code-editor-focus-label; | ||
} | ||
@@ -77,27 +69,59 @@ | ||
display: flex; | ||
@apply --code-editor-code; | ||
border: var(--code-editor-code-border); | ||
border-radius: var(--code-editor-code-border-radius); | ||
} | ||
:host([focused]) #codeeditor { | ||
@apply --code-editor-focus-code; | ||
border: var(--code-editor-focus-code-border); | ||
} | ||
</style> | ||
<label for="codeeditor" hidden$="[[!title]]">[[title]]</label> | ||
` | ||
]; | ||
} | ||
/** | ||
* HTMLElement | ||
*/ | ||
constructor() { | ||
super(); | ||
this.showCodePen = false; | ||
this.readOnly = false; | ||
this.theme = "vs-dark"; | ||
this.language = "javascript"; | ||
this.fontSize = 16; | ||
this.autofocus = false; | ||
this.hideLineNumbers = false; | ||
this.focused = false; | ||
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"); | ||
setTimeout(() => { | ||
this.addEventListener( | ||
"monaco-element-ready", | ||
this.editorReady.bind(this) | ||
); | ||
}, 0); | ||
} | ||
/** | ||
* LitElement render | ||
*/ | ||
render() { | ||
return html` | ||
<label for="codeeditor" ?hidden="${!this.title}">${this.title}</label> | ||
<monaco-element | ||
id="codeeditor" | ||
autofocus$="[[autofocus]]" | ||
hide-line-numbers$="[[hideLineNumbers]]" | ||
lib-path="[[__libPath]]" | ||
language="[[language]]" | ||
theme="[[theme]]" | ||
on-value-changed="_editorDataChanged" | ||
font-size$="[[fontSize]]" | ||
read-only$="[[readOnly]]" | ||
on-code-editor-focus="_handleFocus" | ||
on-code-editor-blur="_handleBlur" | ||
?autofocus="${this.autofocus}" | ||
?hide-line-numbers="${this.hideLineNumbers}" | ||
lib-path="${this.__libPath}" | ||
language="${this.language}" | ||
theme="${this.theme}" | ||
@value-changed="${this._editorDataChanged}" | ||
font-size="${this.fontSize}" | ||
?read-only="${this.readOnly}" | ||
@code-editor-focus="${this._handleFocus}" | ||
@code-editor-blur="${this._handleBlur}" | ||
> | ||
</monaco-element> | ||
<div class="code-pen-container" hidden$="[[!showCodePen]]"> | ||
<div class="code-pen-container" ?hidden="${!this.showCodePen}"> | ||
<span>Check it out on code pen: </span | ||
><code-pen-button data="[[codePenData]]"></code-pen-button> | ||
><code-pen-button .data="${this.codePenData}"></code-pen-button> | ||
</div> | ||
@@ -114,3 +138,2 @@ `; | ||
...super.properties, | ||
/** | ||
@@ -122,3 +145,2 @@ * Title | ||
}, | ||
/** | ||
@@ -129,4 +151,4 @@ * Show codePen button to fork it to there to run | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true, | ||
attribute: "show-code-pen" | ||
}, | ||
@@ -138,4 +160,4 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true, | ||
attribute: "read-only" | ||
}, | ||
@@ -146,4 +168,3 @@ /** | ||
codePenData: { | ||
type: Object, | ||
computed: "_computeCodePenData(title, value)" | ||
type: Object | ||
}, | ||
@@ -154,4 +175,3 @@ /** | ||
editorValue: { | ||
type: String, | ||
observer: "_editorValueChanged" | ||
type: String | ||
}, | ||
@@ -162,4 +182,3 @@ /** | ||
value: { | ||
type: String, | ||
notify: true | ||
type: String | ||
}, | ||
@@ -170,4 +189,3 @@ /** | ||
theme: { | ||
type: String, | ||
value: "vs-dark" | ||
type: String | ||
}, | ||
@@ -178,4 +196,3 @@ /** | ||
mode: { | ||
type: String, | ||
observer: "_modeChanged" | ||
type: String | ||
}, | ||
@@ -186,4 +203,3 @@ /** | ||
language: { | ||
type: String, | ||
value: "javascript" | ||
type: String | ||
}, | ||
@@ -195,3 +211,3 @@ /** | ||
type: Number, | ||
value: 16 | ||
attribute: "font-size" | ||
}, | ||
@@ -203,4 +219,3 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true | ||
}, | ||
@@ -212,3 +227,3 @@ /** | ||
type: Boolean, | ||
value: false | ||
attribute: "hide-line-numbers" | ||
}, | ||
@@ -220,8 +235,39 @@ /** | ||
type: Boolean, | ||
value: false, | ||
reflectToAttribute: true | ||
reflect: true | ||
} | ||
}; | ||
} | ||
updated(changedProperties) { | ||
changedProperties.forEach((oldValue, propName) => { | ||
if (propName == "editorValue") { | ||
this._editorValueChanged(this[propName], oldValue); | ||
} | ||
if (propName == "mode") { | ||
this._modeChanged(this[propName], oldValue); | ||
} | ||
if (propName === "showCodePen") { | ||
// notify | ||
this.dispatchEvent( | ||
new CustomEvent("show-code-pen-changed", { | ||
detail: { | ||
value: this[propName] | ||
} | ||
}) | ||
); | ||
} | ||
if (propName === "value") { | ||
// notify | ||
this.dispatchEvent( | ||
new CustomEvent("value-changed", { | ||
detail: { | ||
value: this[propName] | ||
} | ||
}) | ||
); | ||
} | ||
if (["title", "value"].includes(propName)) { | ||
this.codePenData = this._computeCodePenData(this.title, this.value); | ||
} | ||
}); | ||
} | ||
/** | ||
@@ -276,3 +322,3 @@ * Update the post data whenever the editor has been updated | ||
); | ||
children = FlattenedNodesObserver.getFlattenedNodes(this); | ||
children = this.children; | ||
if (children.length > 0) { | ||
@@ -317,9 +363,7 @@ // loop through everything found in the slotted area and put it back in | ||
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 (info.addedNodes.length > 0) { | ||
info.addedNodes.map(node => { | ||
// mutation observer that ensures state of hax applied correctly | ||
this._observer = new MutationObserver(mutations => { | ||
mutations.forEach(mutation => { | ||
if (mutation.addedNodes.length > 0) { | ||
mutation.addedNodes.forEach(node => { | ||
if (node.tagName) { | ||
@@ -331,5 +375,5 @@ this.updateEditorValue(node); | ||
// if we dropped nodes via the UI (delete event basically) | ||
if (info.removedNodes.length > 0) { | ||
if (mutation.removedNodes.length > 0) { | ||
// handle removing items... not sure we need to do anything here | ||
info.removedNodes.map(node => { | ||
mutation.removedNodes.forEach(node => { | ||
if (node.tagName) { | ||
@@ -342,8 +386,7 @@ this.updateEditorValue(node); | ||
}); | ||
this._observer.observe(this, { | ||
childList: true | ||
}); | ||
} | ||
disconnectedCallback() { | ||
this.removeEventListener( | ||
"monaco-element-ready", | ||
this.editorReady.bind(this) | ||
); | ||
if (this._observer) { | ||
@@ -350,0 +393,0 @@ this._observer.disconnect(); |
Sorry, the diff of this file is not supported yet
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
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
174262
32
3566