Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lrnwebcomponents/code-editor

Package Overview
Dependencies
Maintainers
4
Versions
116
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lrnwebcomponents/code-editor - npm Package Compare versions

Comparing version 2.2.3 to 2.3.0

custom-elements.json

591

analysis.json
{
"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"
}
]
}

187

code-editor.es6.js

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc