coffeekraken-s-codemirror-component - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

demo/src/js/app.js

 import 'babel-polyfill'
-import 'webcomponents.js/webcomponents-lite'
-// import '@webcomponents/webcomponentsjs/bundles/webcomponents-ce'
-// import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter'
 import 'coffeekraken-sugar/js/features/all'
 import SCodemirrorComponent from '../../../dist/index'

dist/class.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _SCodemirrorComponent = require('./js/SCodemirrorComponent');
+var _SCodemirrorComponent = _interopRequireDefault(require("./js/SCodemirrorComponent"));
 
-var _SCodemirrorComponent2 = _interopRequireDefault(_SCodemirrorComponent);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _SCodemirrorComponent2.default;
+var _default = _SCodemirrorComponent.default;
+exports.default = _default;

dist/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
+exports.default = void 0;
 
-var _SCodemirrorComponent = require('./js/SCodemirrorComponent');
+var _SCodemirrorComponent = _interopRequireDefault(require("./js/SCodemirrorComponent"));
 
-var _SCodemirrorComponent2 = _interopRequireDefault(_SCodemirrorComponent);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _SCodemirrorComponent2.default.define('s-codemirror', _SCodemirrorComponent2.default);
+var _default = _SCodemirrorComponent.default.define('s-codemirror', _SCodemirrorComponent.default);
+
+exports.default = _default;

dist/js/codemirror/autoFormatRange.js

 "use strict";
 
-var _codemirror = require("codemirror");
+var _codemirror = _interopRequireDefault(require("codemirror"));
 
-var _codemirror2 = _interopRequireDefault(_codemirror);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-_codemirror2.default.defineExtension("autoFormatRange", function (from, to) {
-    var cm = this;
-    var outer = cm.getMode(),
-        text = cm.getRange(from, to).split("\n");
-    var state = _codemirror2.default.copyState(outer, cm.getTokenAt(from).state);
-    var tabSize = cm.getOption("tabSize");
+_codemirror.default.defineExtension("autoFormatRange", function (from, to) {
+  var cm = this;
+  var outer = cm.getMode(),
+      text = cm.getRange(from, to).split("\n");
 
-    var out = "",
-        lines = 0,
-        atSol = from.ch == 0;
-    function newline() {
-        out += "\n";
-        atSol = true;
-        ++lines;
+  var state = _codemirror.default.copyState(outer, cm.getTokenAt(from).state);
+
+  var tabSize = cm.getOption("tabSize");
+  var out = "",
+      lines = 0,
+      atSol = from.ch == 0;
+
+  function newline() {
+    out += "\n";
+    atSol = true;
+    ++lines;
+  }
+
+  for (var i = 0; i < text.length; ++i) {
+    var stream = new _codemirror.default.StringStream(text[i], tabSize);
+
+    while (!stream.eol()) {
+      var inner = _codemirror.default.innerMode(outer, state);
+
+      var style = outer.token(stream, state),
+          cur = stream.current();
+      stream.start = stream.pos;
+
+      if (!atSol || /\S/.test(cur)) {
+        out += cur;
+        atSol = false;
+      }
+
+      if (!atSol && inner.mode.newlineAfterToken && inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || "", inner.state)) newline();
     }
 
-    for (var i = 0; i < text.length; ++i) {
-        var stream = new _codemirror2.default.StringStream(text[i], tabSize);
-        while (!stream.eol()) {
-            var inner = _codemirror2.default.innerMode(outer, state);
-            var style = outer.token(stream, state),
-                cur = stream.current();
-            stream.start = stream.pos;
-            if (!atSol || /\S/.test(cur)) {
-                out += cur;
-                atSol = false;
-            }
-            if (!atSol && inner.mode.newlineAfterToken && inner.mode.newlineAfterToken(style, cur, stream.string.slice(stream.pos) || text[i + 1] || "", inner.state)) newline();
-        }
-        if (!stream.pos && outer.blankLine) outer.blankLine(state);
-        if (!atSol) newline();
+    if (!stream.pos && outer.blankLine) outer.blankLine(state);
+    if (!atSol) newline();
+  }
+
+  cm.operation(function () {
+    cm.replaceRange(out, from, to);
+
+    for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) {
+      cm.indentLine(cur, "smart");
     }
+  });
+}); // Applies automatic mode-aware indentation to the specified range
 
-    cm.operation(function () {
-        cm.replaceRange(out, from, to);
-        for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur) {
-            cm.indentLine(cur, "smart");
-        }
-    });
-});
 
-// Applies automatic mode-aware indentation to the specified range
-_codemirror2.default.defineExtension("autoIndentRange", function (from, to) {
-    var cmInstance = this;
-    this.operation(function () {
-        for (var i = from.line; i <= to.line; i++) {
-            cmInstance.indentLine(i, "smart");
-        }
-    });
+_codemirror.default.defineExtension("autoIndentRange", function (from, to) {
+  var cmInstance = this;
+  this.operation(function () {
+    for (var i = from.line; i <= to.line; i++) {
+      cmInstance.indentLine(i, "smart");
+    }
+  });
 });

dist/js/SCodemirrorComponent.js

@@ -1,44 +0,59 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-	value: true
+  value: true
 });
+exports.default = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _SWebComponent2 = _interopRequireDefault(require("coffeekraken-sugar/js/core/SWebComponent"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _throttle = _interopRequireDefault(require("coffeekraken-sugar/js/utils/functions/throttle"));
 
-var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
+var _codemirror = _interopRequireDefault(require("codemirror"));
 
-var _SWebComponent2 = require('coffeekraken-sugar/js/core/SWebComponent');
+var _clipboard = _interopRequireDefault(require("clipboard"));
 
-var _SWebComponent3 = _interopRequireDefault(_SWebComponent2);
+var _mousetrap = _interopRequireDefault(require("mousetrap"));
 
-var _throttle = require('coffeekraken-sugar/js/utils/functions/throttle');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _throttle2 = _interopRequireDefault(_throttle);
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _codemirror = require('codemirror');
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-var _codemirror2 = _interopRequireDefault(_codemirror);
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _clipboard = require('clipboard');
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _clipboard2 = _interopRequireDefault(_clipboard);
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-var _mousetrap = require('mousetrap');
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-var _mousetrap2 = _interopRequireDefault(_mousetrap);
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
 require('codemirror/mode/htmlmixed/htmlmixed');
+
+require('codemirror/mode/css/css');
+
+require('codemirror/mode/javascript/javascript');
+
+require('codemirror/mode/jsx/jsx');
+
+require('codemirror/mode/php/php');
+
+require('codemirror/mode/sass/sass');
+
 require('./codemirror/autoFormatRange');
-
 /**
@@ -63,535 +78,572 @@ * @name 		SCodemirrorComponent
 
-var SInteractiveDemoPartComponent = function (_SWebComponent) {
-	_inherits(SInteractiveDemoPartComponent, _SWebComponent);
 
-	function SInteractiveDemoPartComponent() {
-		_classCallCheck(this, SInteractiveDemoPartComponent);
+var SInteractiveDemoPartComponent =
+/*#__PURE__*/
+function (_SWebComponent) {
+  _inherits(SInteractiveDemoPartComponent, _SWebComponent);
 
-		return _possibleConstructorReturn(this, (SInteractiveDemoPartComponent.__proto__ || Object.getPrototypeOf(SInteractiveDemoPartComponent)).apply(this, arguments));
-	}
+  function SInteractiveDemoPartComponent() {
+    _classCallCheck(this, SInteractiveDemoPartComponent);
 
-	_createClass(SInteractiveDemoPartComponent, [{
-		key: 'componentWillMount',
+    return _possibleConstructorReturn(this, _getPrototypeOf(SInteractiveDemoPartComponent).apply(this, arguments));
+  }
 
+  _createClass(SInteractiveDemoPartComponent, [{
+    key: "componentWillMount",
 
-		/**
-   * Component will mount
-   * @definition 		SWebcomponent.componentWillMount
-   * @protected
-   */
-		value: function componentWillMount() {
-			_get(SInteractiveDemoPartComponent.prototype.__proto__ || Object.getPrototypeOf(SInteractiveDemoPartComponent.prototype), 'componentWillMount', this).call(this);
-			this._updateTimeout = null;
-			this._refs = {};
-			// handle language alias
-			if (!this.props.mode) {
-				this.props.mode = this.props.language;
-			}
-		}
+    /**
+     * Component will mount
+     * @definition 		SWebcomponent.componentWillMount
+     * @protected
+     */
+    value: function componentWillMount() {
+      _get(_getPrototypeOf(SInteractiveDemoPartComponent.prototype), "componentWillMount", this).call(this);
 
-		/**
-   * Component mount
-   * @definition 		SWebcomponent.componentMount
-   * @protected
-   */
+      this._updateTimeout = null;
+      this._refs = {}; // handle language alias
 
-	}, {
-		key: 'componentMount',
-		value: function componentMount() {
-			var _this2 = this;
+      if (!this.props.mode) {
+        this.props.mode = this.props.language;
+      }
+    }
+    /**
+     * Component mount
+     * @definition 		SWebcomponent.componentMount
+     * @protected
+     */
 
-			_get(SInteractiveDemoPartComponent.prototype.__proto__ || Object.getPrototypeOf(SInteractiveDemoPartComponent.prototype), 'componentMount', this).call(this);
+  }, {
+    key: "componentMount",
+    value: function componentMount() {
+      var _this = this;
 
-			var mousetrap = new _mousetrap2.default(this);
-			// console.log('mouise', __mousetrap);
-			mousetrap.bind('mod+s', function () {
-				if (!_this2.isCompiling()) {
-					clearTimeout(_this2._updateTimeout);
-					_this2._processCode();
-				}
-				return false;
-			});
+      _get(_getPrototypeOf(SInteractiveDemoPartComponent.prototype), "componentMount", this).call(this);
 
-			// get the content
-			var content = this.innerHTML;
-			var firstChildElm = this.querySelector('*:first-child');
-			if (firstChildElm && firstChildElm.nodeName && firstChildElm.nodeName === 'TEMPLATE') {
-				content = firstChildElm.innerHTML;
-			}
-			this.innerHTML = '';
-			this._refs.name = document.createElement('span');
-			this._refs.name.className = this._componentNameDash + '__name cm-s-' + this.props.theme;
-			this._refs.actions = document.createElement('div');
-			this._refs.actions.className = this._componentNameDash + '__actions';
-			this._refs.run = document.createElement('button');
-			this._refs.run.className = this._componentNameDash + '__run';
-			this._refs.run.innerHTML = 'Run';
-			this._refs.copy = document.createElement('button');
-			this._refs.copy.className = this._componentNameDash + '__copy';
-			this._refs.copy.innerHTML = 'Copy to clipboard';
+      var mousetrap = new _mousetrap.default(this); // console.log('mouise', __mousetrap);
 
-			// init accept
-			this._initAccept();
+      mousetrap.bind('mod+s', function () {
+        if (!_this.isCompiling()) {
+          clearTimeout(_this._updateTimeout);
 
-			// append elements to actions
-			this._refs.actions.appendChild(this._refs.copy);
-			if (this.props.updateOn === 'run') {
-				this._refs.actions.appendChild(this._refs.run);
-			}
-			// append elements to the item itself
-			this.appendChild(this._refs.name);
-			this.appendChild(this._refs.actions);
+          _this._processCode();
+        }
 
-			// set the name
-			this._refs.name.innerHTML = this.props.title || this.props.id || this.props.language || this.props.mode;
+        return false;
+      }); // get the content
 
-			// init clipboard
-			this._initClipboard();
+      var content = this.innerHTML;
+      var firstChildElm = this.querySelector('*:first-child');
 
-			// init codemirror
-			var initialProps = Object.assign({}, this.props);
-			if (initialProps.mode === 'html') initialProps.mode = 'htmlmixed';
-			this._codemirror = new _codemirror2.default(this, _extends({
-				value: content.trim(),
-				viewportMargin: Infinity
-			}, initialProps));
+      if (firstChildElm && firstChildElm.nodeName && firstChildElm.nodeName === 'TEMPLATE') {
+        content = firstChildElm.innerHTML;
+      }
 
-			// get some codemirror elements
-			this._codemirrorSizerElm = this.querySelector('.CodeMirror-sizer');
-			this._codemirrorElm = this.querySelector('.CodeMirror');
+      this.innerHTML = '';
+      this._refs.name = document.createElement('span');
+      this._refs.name.className = "".concat(this._componentNameDash, "__name cm-s-").concat(this.props.theme);
+      this._refs.actions = document.createElement('div');
+      this._refs.actions.className = "".concat(this._componentNameDash, "__actions");
+      this._refs.run = document.createElement('button');
+      this._refs.run.className = "".concat(this._componentNameDash, "__run");
+      this._refs.run.innerHTML = 'Run';
+      this._refs.copy = document.createElement('button');
+      this._refs.copy.className = "".concat(this._componentNameDash, "__copy");
+      this._refs.copy.innerHTML = 'Copy to clipboard'; // init accept
 
-			// auto format
-			this._autoFormatCode();
+      this._initAccept(); // append elements to actions
 
-			// handle update
-			switch (this.props.updateOn) {
-				case 'run':
-					// init run
-					this._initRun();
-					break;
-				case 'change':
-				default:
-					// listen editor change
-					this._codemirror.on('change', function (cm, change) {
-						clearTimeout(_this2._updateTimeout);
-						_this2._updateTimeout = setTimeout(_this2._processCode.bind(_this2), _this2.props.updateTimeout);
-					});
-					break;
-			}
-			// first update
-			this._processCode();
-		}
 
-		/**
-   * Component will receive prop
-   * @definition 		SWebComponent.componentWillReceiveProp
-   * @protected
-   */
+      this._refs.actions.appendChild(this._refs.copy);
 
-	}, {
-		key: 'componentWillReceiveProp',
-		value: function componentWillReceiveProp(name, newVal, oldVal) {
-			switch (name) {
-				case 'mode':
-					// handle html as parameter
-					var mode = newVal;
-					if (mode === 'html') {
-						mode = 'htmlmixed';
-					}
-					this._codemirror.setOption('mode', mode);
-					this._autoFormatCode();
-					if (this._refs.modes) {
-						this._refs.modes.value = newVal;
-					}
-					this.setProp('language', newVal);
-					break;
-				case 'language':
-					this.setProp('mode', newVal);
-					break;
-				default:
-					// try to set to codemirror the new prop
-					try {
-						this._codemirror.setOption(name, newVal);
-					} catch (e) {}
-					break;
-			}
-		}
+      if (this.props.updateOn === 'run') {
+        this._refs.actions.appendChild(this._refs.run);
+      } // append elements to the item itself
 
-		/**
-   * Refresh the editor
-   */
 
-	}, {
-		key: 'refresh',
-		value: function refresh() {
-			this._codemirror.refresh();
-		}
+      this.appendChild(this._refs.name);
+      this.appendChild(this._refs.actions); // set the name
 
-		/**
-   * Init run
-   */
+      this._refs.name.innerHTML = this.props.title || this.props.id || this.props.language || this.props.mode; // init clipboard
 
-	}, {
-		key: '_initRun',
-		value: function _initRun() {
-			var _this3 = this;
+      this._initClipboard(); // init codemirror
 
-			this._refs.run.addEventListener('click', function (e) {
-				// notify udpate
-				_this3._processCode();
-			});
-		}
 
-		/**
-   * Init accept
-   */
+      var initialProps = Object.assign({}, this.props);
+      if (initialProps.mode === 'html') initialProps.mode = 'htmlmixed';
+      this._codemirror = new _codemirror.default(this, _objectSpread({
+        value: content.trim(),
+        viewportMargin: Infinity
+      }, initialProps)); // get some codemirror elements
 
-	}, {
-		key: '_initAccept',
-		value: function _initAccept() {
-			var _this4 = this;
+      this._codemirrorSizerElm = this.querySelector('.CodeMirror-sizer');
+      this._codemirrorElm = this.querySelector('.CodeMirror'); // auto format
 
-			if (!this.props.accept) return;
-			// split accept
-			var modes = this.props.accept;
-			if (typeof modes === 'string') {
-				modes = modes.split(',').map(function (mode) {
-					return mode.trim();
-				});
-			}
-			// create the select
-			this._refs.modes = document.createElement('select');
-			this._refs.modes.className = this._componentNameDash + '__modes';
-			// add options
-			modes.forEach(function (mode) {
-				var option = document.createElement('option');
-				option.value = mode;
-				option.innerHTML = mode;
-				// append to select
-				_this4._refs.modes.appendChild(option);
-			});
-			// append select to actions
-			this._refs.actions.appendChild(this._refs.modes);
-			// listen for change
-			this._refs.modes.addEventListener('change', function (e) {
-				var mode = e.target.value;
-				if (mode === 'html') {
-					mode = 'htmlmixed';
-				}
-				// set the mode
-				_this4.setProp('mode', mode);
-			});
-		}
+      this._autoFormatCode(); // handle update
 
-		/**
-   * Init clipboard
-   */
 
-	}, {
-		key: '_initClipboard',
-		value: function _initClipboard() {
-			var _this5 = this;
+      switch (this.props.updateOn) {
+        case 'run':
+          // init run
+          this._initRun();
 
-			this._clipboard = new _clipboard2.default(this._refs.copy, {
-				text: function text(trigger) {
-					_this5._refs.copy.classList.add('success');
-					_this5._refs.copy.innerHTML = 'Copied!';
-					setTimeout(function () {
-						_this5._refs.copy.classList.remove('success');
-						_this5._refs.copy.innerHTML = 'Copy to clipboard';
-					}, 1000);
-					return _this5._codemirror.getValue();
-				}
-			});
-		}
+          break;
 
-		/**
-   * Auto format code
-   */
+        case 'change':
+        default:
+          // listen editor change
+          this._codemirror.on('change', function (cm, change) {
+            clearTimeout(_this._updateTimeout);
+            _this._updateTimeout = setTimeout(_this._processCode.bind(_this), _this.props.updateTimeout);
+          });
 
-	}, {
-		key: '_autoFormatCode',
-		value: function _autoFormatCode() {
-			var totalLines = this._codemirror.lineCount();
-			this._codemirror.autoFormatRange({ line: 0, ch: 0 }, { line: totalLines });
-		}
+          break;
+      } // first update
 
-		/**
-   * Process code
-   * @return  	{Promise}		A promise with the processes code
-   */
 
-	}, {
-		key: '_processCode',
-		value: function _processCode() {
-			var _this6 = this;
+      this._processCode();
+    }
+    /**
+     * Component will receive prop
+     * @definition 		SWebComponent.componentWillReceiveProp
+     * @protected
+     */
 
-			var promise = new Promise(function (resolve, reject) {
-				// compile options
-				var compileOptions = {};
-				if (_this6.props.compileOptions) {
-					compileOptions = compileOptions[_this6.props.language] || compileOptions;
-				}
-				// check if need to compile
-				if (_this6.props.compile) {
-					// handle run button
-					_this6._refs.run.innerHTML = 'Compiling...';
-					_this6._refs.run.disabled = true;
-					// launch a compileStart event
-					_this6.dispatchComponentEvent('compileStart');
-					// add class
-					_this6.addComponentClass(_this6, null, 'compiling');
-					// compile
-					var fn = _this6.props.compile.bind(_this6);
-					resolve(fn(_this6.value, _this6.language, compileOptions));
-				} else {
-					resolve(_this6.value, _this6.language, compileOptions);
-				}
-			});
-			promise.then(function (code) {
-				// handle run button
-				_this6._refs.run.disabled = false;
-				if (_this6.props.compile) {
-					_this6._refs.run.innerHTML = 'Compiled!';
-					// remove class
-					_this6.removeComponentClass(_this6, null, 'compiling');
-					// add success class
-					_this6.addComponentClass(_this6, null, 'compiling-success');
-				}
-				_this6._notifyUpdate(code);
-				_this6._refs.run.classList.add('success');
-				setTimeout(function () {
-					_this6._refs.run.innerHTML = 'Run';
-					_this6._refs.run.classList.remove('success');
-					// add success class
-					_this6.removeComponentClass(_this6, null, 'compiling-success');
-				}, 800);
-				// compile end event
-				if (_this6.props.compile) {
-					// launch a compileStart event
-					_this6.dispatchComponentEvent('compileEnd', {
-						language: typeof code === 'string' ? _this6.props.language : code.language,
-						data: typeof code === 'string' ? code : code.data
-					});
-				}
-			}, function (error) {
-				_this6._refs.run.innerHTML = 'Error while compiling...';
-				console.error('Compiling error', error);
-				if (_this6.props.compile) {
-					_this6._refs.run.innerHTML = 'Compiled!';
-					// remove class
-					_this6.removeComponentClass(_this6, null, 'compiling');
-					// add success class
-					_this6.addComponentClass(_this6, null, 'compiling-error');
-				}
-				_this6._refs.run.classList.add('error');
-				_this6._refs.run.innerHTML = 'Run';
-				_this6._refs.run.disabled = false;
-				setTimeout(function () {
-					_this6._refs.run.classList.remove('error');
-					// add success class
-					_this6.removeComponentClass(_this6, null, 'compiling-error');
-				}, 800);
-				// dispatch a compile error
-				_this6.dispatchComponentEvent('compileError', {
-					error: error
-				});
-			});
-			// return promise
-			return promise;
-		}
+  }, {
+    key: "componentWillReceiveProp",
+    value: function componentWillReceiveProp(name, newVal, oldVal) {
+      switch (name) {
+        case 'mode':
+          // handle html as parameter
+          var mode = newVal;
 
-		/**
-   * Notify that an update has been made in the editor
-   */
+          if (mode === 'html') {
+            mode = 'htmlmixed';
+          }
 
-	}, {
-		key: '_notifyUpdate',
-		value: function _notifyUpdate(code) {
-			// dispatch an event
-			this.dispatchComponentEvent('update', {
-				language: typeof code === 'string' ? this.props.language : code.language,
-				data: typeof code === 'string' ? code : code.data
-			});
-			// on update callback
-			this.props.onUpdate && this.props.onUpdate({
-				language: typeof code === 'string' ? this.props.language : code.language,
-				data: typeof code === 'string' ? code : code.data
-			});
-		}
+          this._codemirror.setOption('mode', mode);
 
-		/**
-   * Check if is compiling or not
-   * @return 		{Boolean} 	Return if the editor is in compile phase
-   */
+          this._autoFormatCode();
 
-	}, {
-		key: 'isCompiling',
-		value: function isCompiling() {
-			return this.classList.contains(this._componentNameDash + '--compiling');
-		}
+          if (this._refs.modes) {
+            this._refs.modes.value = newVal;
+          }
 
-		/**
-   * Get editor value
-   * @type 	{String}
-   */
+          this.setProp('language', newVal);
+          break;
 
-	}, {
-		key: 'value',
-		get: function get() {
-			return this._codemirror.getValue();
-		}
-	}], [{
-		key: 'defaultCss',
+        case 'language':
+          this.setProp('mode', newVal);
+          break;
 
+        default:
+          // try to set to codemirror the new prop
+          try {
+            this._codemirror.setOption(name, newVal);
+          } catch (e) {}
 
-		/**
-   * Base css
-   * @definition 		SWebComponent.css
-   * @protected
-   */
-		value: function defaultCss(componentName, componentNameDash) {
-			return '\n\t\t\t' + componentNameDash + ' {\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:relative;\n\t\t\t}\n\t\t\t.CodeMirror{font-family:monospace;height:300px;color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:-20px;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:\'\'}span.CodeMirror-selectedtext{background:0 0}\n\t\t\t' + componentNameDash + ' .CodeMirror{\n\t\t\t\theight:100%;\n\t\t\t}\n\t\t\t' + componentNameDash + ' .CodeMirror-lines {\n\t\t\t\tpadding: 60px 10px 10px 0;\n\t\t\t}\n\t\t\t' + componentNameDash + ' .CodeMirror-sizer[style*="margin-left: 0px;"] {\n\t\t\t\tpadding-left: 20px;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__actions {\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:15px; right:0px;\n\t\t\t\tz-index:90;\n\t\t\t\topacity:0;\n\t\t\t\ttransition:all .1s ease-in-out;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__actions button {\n\t\t\t\tbackground-color:transparent;\n\t\t\t\tbackground-repeat:no-repeat;\n\t\t\t\tbackground-size:12px;\n\t\t\t\tbackground-position:0 50%;\n\t\t\t\tpadding:0 10px 0 20px;\n\t\t\t\tmargin-left:10px;\n\t\t\t\tcolor: #37A0CE;\n\t\t\t\toutline:none;\n\t\t\t\tborder:none;\n\t\t\t\tcursor:pointer;\n\t\t\t\tfont-size:12px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__actions button:disabled {\n\t\t\t\topacity:.65;\n\t\t\t\tcolor: #f2bc2b;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__actions button.error {\n\t\t\t\tcolor: red;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__actions button.success {\n\t\t\t\tcolor: #d2fc0f;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__modes {\n\t\t\t\tmargin-right: 10px;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__name {\n\t\t\t\tbox-sizing:border-box;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\tpadding:15px 20px 10px 20px;\n\t\t\t\twidth:100%;\n\t\t\t\tz-index:10;\n\t\t\t\tdisplay:block;\n\t\t\t\tfont-size:16px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t@keyframes ' + componentNameDash + '-compiling {\n\t\t\t    0% {\n\t\t\t       left:0;\n\t\t\t\t   right:100%;\n\t\t\t    }\n\t\t\t\t50% {\n\t\t\t\t\tright:0;\n\t\t\t\t}\n\t\t\t    100% {\n\t\t\t\t   left:100%;\n\t\t\t\t   right:0;\n\t\t\t    }\n\t\t\t}\n\t\t\t@keyframes ' + componentNameDash + '-compiling-success {\n\t\t\t\t0% {\n\t\t\t\t   opacity:0;\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\topacity:1;\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.' + componentNameDash + '--compiling .' + componentNameDash + '__name:before {\n\t\t\t\tcontent:"";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: #f2bc2b;\n\t\t\t\tanimation: ' + componentNameDash + '-compiling 1.5s ease-in-out infinite;\n\t\t\t}\n\t\t\t.' + componentNameDash + '--compiling-success .' + componentNameDash + '__name:before {\n\t\t\t\tcontent:"";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tanimation: ' + componentNameDash + '-compiling-success .8s cubic-bezier(0.275, 0.200, 0.090, 1);\n\t\t\t\tbackground: #d2fc0f;\n\t\t\t}\n\t\t\t.' + componentNameDash + '--compiling-error .' + componentNameDash + '__name:before {\n\t\t\t\tcontent:"";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: red;\n\t\t\t}\n\t\t\t.' + componentNameDash + '__name:after {\n\t\t\t\tcontent:"";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\twidth:100%; height:100%;\n\t\t\t\tbackground:rgba(0,0,0,.1);\n\t\t\t\tmix-blend-mode:overlay;\n\t\t\t\tpointer-events:none;\n\t\t\t}\n\t\t\t.' + componentNameDash + '--compiling .' + componentNameDash + '__name:after {\n\n\t\t\t}\n\t\t\t.' + componentNameDash + '__copy {\n\t\t\t\tbackground-image:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'#37A0CE\' d=\'M15.143 13.244l.837-2.244 2.698 5.641-5.678 2.502.805-2.23s-8.055-3.538-7.708-10.913c2.715 5.938 9.046 7.244 9.046 7.244zm8.857-7.244v18h-18v-6h-6v-18h18v6h6zm-2 2h-12.112c-.562-.578-1.08-1.243-1.521-2h7.633v-4h-14v14h4v-3.124c.6.961 1.287 1.823 2 2.576v6.548h14v-14z\'/></svg>");\n\t\t\t}\n\t\t\t.' + componentNameDash + '__run {\n\t\t\t\tbackground-image:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'#37A0CE\' d=\'M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2zm0-2C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zM9 17V7l9 5-9 5z\'/></svg>");\n\t\t\t}\n\t\t\t.' + componentNameDash + '__name.cm-s-default {\n\t\t\t\tbackground-color: #f7f7f7;\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\t\t\t.' + componentNameDash + '--compiling .' + componentNameDash + '__actions,\n\t\t\t.' + componentNameDash + '--compiling-success .' + componentNameDash + '__actions,\n\t\t\t' + componentNameDash + ':hover .' + componentNameDash + '__actions {\n\t\t\t\topacity:1;\n\t\t\t\tright:10px;\n\t\t\t}\n\t\t';
-		}
-	}, {
-		key: 'defaultProps',
-
-
-		/**
-   * Default props
-   * @definition 		SWebcomponent.defaultProps
-   * @protected
-   */
-		get: function get() {
-			return {
-				/**
-     * Specify the mode used inside the demo
-     * @prop
-     * @type 		{String}
+          break;
+      }
+    }
+    /**
+     * Refresh the editor
      */
-				mode: null,
 
-				/**
-     * Specify the language used inside the demo (alias to mode)
-     * @prop
-     * @type 		{String}
+  }, {
+    key: "refresh",
+    value: function refresh() {
+      this._codemirror.refresh();
+    }
+    /**
+     * Init run
      */
-				language: 'html',
 
-				/**
-     * Specify the id of the part
-     * @prop
-     * @type 		{String}
-     */
-				id: null,
+  }, {
+    key: "_initRun",
+    value: function _initRun() {
+      var _this2 = this;
 
-				/**
-     * Set the indent unit to use
-     * @prop
-     * @type 		{Intetger}
+      this._refs.run.addEventListener('click', function (e) {
+        // notify udpate
+        _this2._processCode();
+      });
+    }
+    /**
+     * Init accept
      */
-				indentUnit: 4,
 
-				/**
-     * Set the theme to use
-     * @prop
-     * @type 		{String}
-     */
-				theme: 'default',
+  }, {
+    key: "_initAccept",
+    value: function _initAccept() {
+      var _this3 = this;
 
-				/**
-     * Set the tab size
-     * @prop
-     * @type 		{Integer}
-     */
-				tabSize: 4,
+      if (!this.props.accept) return; // split accept
 
-				/**
-     * Set if need to indent with tabs or not
-     * @prop
-     * @type 		{Boolean}
-     */
-				indentWithTabs: true,
+      var modes = this.props.accept;
 
-				/**
-     * Specify if need to wrap long lines or not
-     * @prop
-     * @type 		{Boolean}
-     */
-				lineWrapping: true,
+      if (typeof modes === 'string') {
+        modes = modes.split(',').map(function (mode) {
+          return mode.trim();
+        });
+      } // create the select
 
-				/**
-     * Display or not the line numbers
-     * @prop
-     * @type 		{Boolean}
+
+      this._refs.modes = document.createElement('select');
+      this._refs.modes.className = "".concat(this._componentNameDash, "__modes"); // add options
+
+      modes.forEach(function (mode) {
+        var option = document.createElement('option');
+        option.value = mode;
+        option.innerHTML = mode; // append to select
+
+        _this3._refs.modes.appendChild(option);
+      }); // append select to actions
+
+      this._refs.actions.appendChild(this._refs.modes); // listen for change
+
+
+      this._refs.modes.addEventListener('change', function (e) {
+        var mode = e.target.value;
+
+        if (mode === 'html') {
+          mode = 'htmlmixed';
+        } // set the mode
+
+
+        _this3.setProp('mode', mode);
+      });
+    }
+    /**
+     * Init clipboard
      */
-				lineNumbers: true,
 
-				/**
-     * When an update has been made
-     * @prop
-     * @type 	 	{Function}
+  }, {
+    key: "_initClipboard",
+    value: function _initClipboard() {
+      var _this4 = this;
+
+      this._clipboard = new _clipboard.default(this._refs.copy, {
+        text: function text(trigger) {
+          _this4._refs.copy.classList.add('success');
+
+          _this4._refs.copy.innerHTML = 'Copied!';
+          setTimeout(function () {
+            _this4._refs.copy.classList.remove('success');
+
+            _this4._refs.copy.innerHTML = 'Copy to clipboard';
+          }, 1000);
+          return _this4._codemirror.getValue();
+        }
+      });
+    }
+    /**
+     * Auto format code
      */
-				onUpdate: null,
 
-				/**
-     * Compile the code before injecting it into the iframe.
-     * This function specified here will receive as parameters:
-     * 1. The code string to compile
-     * 2. The language in which to compile the code
-     * 3. The compileOptions object if provided for this particular language
-     * This function has to return an object formated like this:
-     * ```js
-     * return {
-     * 	language : 'css',
-     * 	data : '...'
-     * };
-     * ```
-     * @prop
-     * @type 		{Function}
+  }, {
+    key: "_autoFormatCode",
+    value: function _autoFormatCode() {
+      var totalLines = this._codemirror.lineCount();
+
+      this._codemirror.autoFormatRange({
+        line: 0,
+        ch: 0
+      }, {
+        line: totalLines
+      });
+    }
+    /**
+     * Process code
+     * @return  	{Promise}		A promise with the processes code
      */
-				compile: null,
 
-				/**
-     * Compile options by language
-     * @prop
-     * @type 		{Object}
+  }, {
+    key: "_processCode",
+    value: function _processCode() {
+      var _this5 = this;
+
+      var promise = new Promise(function (resolve, reject) {
+        // compile options
+        var compileOptions = {};
+
+        if (_this5.props.compileOptions) {
+          compileOptions = compileOptions[_this5.props.language] || compileOptions;
+        } // check if need to compile
+
+
+        if (_this5.props.compile) {
+          // handle run button
+          _this5._refs.run.innerHTML = 'Compiling...';
+          _this5._refs.run.disabled = true; // launch a compileStart event
+
+          _this5.dispatchComponentEvent('compileStart'); // add class
+
+
+          _this5.addComponentClass(_this5, null, 'compiling'); // compile
+
+
+          var fn = _this5.props.compile.bind(_this5);
+
+          resolve(fn(_this5.value, _this5.language, compileOptions));
+        } else {
+          resolve(_this5.value, _this5.language, compileOptions);
+        }
+      });
+      promise.then(function (code) {
+        // handle run button
+        _this5._refs.run.disabled = false;
+
+        if (_this5.props.compile) {
+          _this5._refs.run.innerHTML = 'Compiled!'; // remove class
+
+          _this5.removeComponentClass(_this5, null, 'compiling'); // add success class
+
+
+          _this5.addComponentClass(_this5, null, 'compiling-success');
+        }
+
+        _this5._notifyUpdate(code);
+
+        _this5._refs.run.classList.add('success');
+
+        setTimeout(function () {
+          _this5._refs.run.innerHTML = 'Run';
+
+          _this5._refs.run.classList.remove('success'); // add success class
+
+
+          _this5.removeComponentClass(_this5, null, 'compiling-success');
+        }, 800); // compile end event
+
+        if (_this5.props.compile) {
+          // launch a compileStart event
+          _this5.dispatchComponentEvent('compileEnd', {
+            language: typeof code === 'string' ? _this5.props.language : code.language,
+            data: typeof code === 'string' ? code : code.data
+          });
+        }
+      }, function (error) {
+        _this5._refs.run.innerHTML = 'Error while compiling...';
+        console.error('Compiling error', error);
+
+        if (_this5.props.compile) {
+          _this5._refs.run.innerHTML = 'Compiled!'; // remove class
+
+          _this5.removeComponentClass(_this5, null, 'compiling'); // add success class
+
+
+          _this5.addComponentClass(_this5, null, 'compiling-error');
+        }
+
+        _this5._refs.run.classList.add('error');
+
+        _this5._refs.run.innerHTML = 'Run';
+        _this5._refs.run.disabled = false;
+        setTimeout(function () {
+          _this5._refs.run.classList.remove('error'); // add success class
+
+
+          _this5.removeComponentClass(_this5, null, 'compiling-error');
+        }, 800); // dispatch a compile error
+
+        _this5.dispatchComponentEvent('compileError', {
+          error: error
+        });
+      }); // return promise
+
+      return promise;
+    }
+    /**
+     * Notify that an update has been made in the editor
      */
-				compileOptions: null,
 
-				/**
-     * Specify when to trigger the update
-     * @prop
-     * @type 		{String}
-     * @values 		change|run
+  }, {
+    key: "_notifyUpdate",
+    value: function _notifyUpdate(code) {
+      // dispatch an event
+      this.dispatchComponentEvent('update', {
+        language: typeof code === 'string' ? this.props.language : code.language,
+        data: typeof code === 'string' ? code : code.data
+      }); // on update callback
+
+      this.props.onUpdate && this.props.onUpdate({
+        language: typeof code === 'string' ? this.props.language : code.language,
+        data: typeof code === 'string' ? code : code.data
+      });
+    }
+    /**
+     * Check if is compiling or not
+     * @return 		{Boolean} 	Return if the editor is in compile phase
      */
-				updateOn: 'change',
 
-				/**
-     * Update timeout when the updateOn property is on "change"
-     * @prop
-     * @type 		{Number}
+  }, {
+    key: "isCompiling",
+    value: function isCompiling() {
+      return this.classList.contains("".concat(this._componentNameDash, "--compiling"));
+    }
+    /**
+     * Get editor value
+     * @type 	{String}
      */
-				updateTimeout: 0,
 
-				/**
-     * Set the title of the editor
-     * @prop
-     * @type 		{String}
+  }, {
+    key: "value",
+    get: function get() {
+      return this._codemirror.getValue();
+    }
+  }], [{
+    key: "defaultCss",
+
+    /**
+     * Base css
+     * @definition 		SWebComponent.css
+     * @protected
      */
-				title: null,
+    value: function defaultCss(componentName, componentNameDash) {
+      return "\n\t\t\t".concat(componentNameDash, " {\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:relative;\n\t\t\t}\n\t\t\t.CodeMirror{font-family:monospace;height:300px;color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:-20px;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}\n\t\t\t").concat(componentNameDash, " .CodeMirror{\n\t\t\t\theight:100%;\n\t\t\t}\n\t\t\t").concat(componentNameDash, " .CodeMirror-lines {\n\t\t\t\tpadding: 60px 10px 10px 0;\n\t\t\t}\n\t\t\t").concat(componentNameDash, " .CodeMirror-sizer[style*=\"margin-left: 0px;\"] {\n\t\t\t\tpadding-left: 20px;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions {\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:15px; right:0px;\n\t\t\t\tz-index:90;\n\t\t\t\topacity:0;\n\t\t\t\ttransition:all .1s ease-in-out;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button {\n\t\t\t\tbackground-color:transparent;\n\t\t\t\tbackground-repeat:no-repeat;\n\t\t\t\tbackground-size:12px;\n\t\t\t\tbackground-position:0 50%;\n\t\t\t\tpadding:0 10px 0 20px;\n\t\t\t\tmargin-left:10px;\n\t\t\t\tcolor: #37A0CE;\n\t\t\t\toutline:none;\n\t\t\t\tborder:none;\n\t\t\t\tcursor:pointer;\n\t\t\t\tfont-size:12px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button:disabled {\n\t\t\t\topacity:.65;\n\t\t\t\tcolor: #f2bc2b;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button.error {\n\t\t\t\tcolor: red;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__actions button.success {\n\t\t\t\tcolor: #d2fc0f;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__modes {\n\t\t\t\tmargin-right: 10px;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name {\n\t\t\t\tbox-sizing:border-box;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\tpadding:15px 20px 10px 20px;\n\t\t\t\twidth:100%;\n\t\t\t\tz-index:10;\n\t\t\t\tdisplay:block;\n\t\t\t\tfont-size:16px;\n\t\t\t\tfont-family:monospace;\n\t\t\t}\n\t\t\t@keyframes ").concat(componentNameDash, "-compiling {\n\t\t\t    0% {\n\t\t\t       left:0;\n\t\t\t\t   right:100%;\n\t\t\t    }\n\t\t\t\t50% {\n\t\t\t\t\tright:0;\n\t\t\t\t}\n\t\t\t    100% {\n\t\t\t\t   left:100%;\n\t\t\t\t   right:0;\n\t\t\t    }\n\t\t\t}\n\t\t\t@keyframes ").concat(componentNameDash, "-compiling-success {\n\t\t\t\t0% {\n\t\t\t\t   opacity:0;\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\topacity:1;\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\topacity:0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: #f2bc2b;\n\t\t\t\tanimation: ").concat(componentNameDash, "-compiling 1.5s ease-in-out infinite;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling-success .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tanimation: ").concat(componentNameDash, "-compiling-success .8s cubic-bezier(0.275, 0.200, 0.090, 1);\n\t\t\t\tbackground: #d2fc0f;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling-error .").concat(componentNameDash, "__name:before {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\tbottom:0; left:0;\n\t\t\t\tright:0;\n\t\t\t\theight:1px;\n\t\t\t\tbackground: red;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name:after {\n\t\t\t\tcontent:\"\";\n\t\t\t\tdisplay:block;\n\t\t\t\tposition:absolute;\n\t\t\t\ttop:0; left:0;\n\t\t\t\twidth:100%; height:100%;\n\t\t\t\tbackground:rgba(0,0,0,.1);\n\t\t\t\tmix-blend-mode:overlay;\n\t\t\t\tpointer-events:none;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__name:after {\n\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__copy {\n\t\t\t\tbackground-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#37A0CE' d='M15.143 13.244l.837-2.244 2.698 5.641-5.678 2.502.805-2.23s-8.055-3.538-7.708-10.913c2.715 5.938 9.046 7.244 9.046 7.244zm8.857-7.244v18h-18v-6h-6v-18h18v6h6zm-2 2h-12.112c-.562-.578-1.08-1.243-1.521-2h7.633v-4h-14v14h4v-3.124c.6.961 1.287 1.823 2 2.576v6.548h14v-14z'/></svg>\");\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__run {\n\t\t\t\tbackground-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#37A0CE' d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2zm0-2C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zM9 17V7l9 5-9 5z'/></svg>\");\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "__name.cm-s-default {\n\t\t\t\tbackground-color: #f7f7f7;\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\t\t\t.").concat(componentNameDash, "--compiling .").concat(componentNameDash, "__actions,\n\t\t\t.").concat(componentNameDash, "--compiling-success .").concat(componentNameDash, "__actions,\n\t\t\t").concat(componentNameDash, ":hover .").concat(componentNameDash, "__actions {\n\t\t\t\topacity:1;\n\t\t\t\tright:10px;\n\t\t\t}\n\t\t");
+    }
+  }, {
+    key: "defaultProps",
 
-				/**
-     * Set the accepted modes (comma separated modes)
-     * @prop
-     * @type 		{String}
+    /**
+     * Default props
+     * @definition 		SWebcomponent.defaultProps
+     * @protected
      */
-				accept: null
-			};
-		}
-	}]);
+    get: function get() {
+      return {
+        /**
+         * Specify the mode used inside the demo
+         * Support html, css, javascript, jsx, php and sass by default.
+         * If you want more, you just have to import the codemirror support
+         * for your language
+         * @prop
+         * @type 		{String}
+         */
+        mode: null,
 
-	return SInteractiveDemoPartComponent;
-}(_SWebComponent3.default);
+        /**
+         * Specify the language used inside the demo (alias to mode)
+         * @prop
+         * @type 		{String}
+         */
+        language: 'html',
 
+        /**
+         * Specify the id of the codemirror module
+         * This is used to display the name on top of the codemirror editor if the
+         * title is not provided
+         * @prop
+         * @type 		{String}
+         */
+        id: null,
+
+        /**
+         * Set the indent unit to use
+         * @prop
+         * @type 		{Intetger}
+         */
+        indentUnit: 4,
+
+        /**
+         * Set the theme to use
+         * @prop
+         * @type 		{String}
+         */
+        theme: 'default',
+
+        /**
+         * Set the tab size
+         * @prop
+         * @type 		{Integer}
+         */
+        tabSize: 2,
+
+        /**
+         * Set if need to indent with tabs or not
+         * @prop
+         * @type 		{Boolean}
+         */
+        indentWithTabs: false,
+
+        /**
+         * Specify if need to wrap long lines or not
+         * @prop
+         * @type 		{Boolean}
+         */
+        lineWrapping: true,
+
+        /**
+         * Display or not the line numbers
+         * @prop
+         * @type 		{Boolean}
+         */
+        lineNumbers: true,
+
+        /**
+         * When an update has been made
+         * @prop
+         * @type 	 	{Function}
+         */
+        onUpdate: null,
+
+        /**
+         * Compile the code before injecting it into the iframe.
+         * This function specified here will receive as parameters:
+         * 1. The code string to compile
+         * 2. The language in which to compile the code
+         * 3. The compileOptions object if provided for this particular language
+         * This function has to return an object formated like this:
+         * ```js
+         * return {
+         * 	language : 'css',
+         * 	data : '...'
+         * };
+         * ```
+         * @prop
+         * @type 		{Function}
+         */
+        compile: null,
+
+        /**
+         * Compile options by language
+         * @prop
+         * @type 		{Object}
+         */
+        compileOptions: null,
+
+        /**
+         * Specify when to trigger the update
+         * @prop
+         * @type 		{String}
+         * @values 		change|run
+         */
+        updateOn: 'change',
+
+        /**
+         * Update timeout when the updateOn property is on "change"
+         * @prop
+         * @type 		{Number}
+         */
+        updateTimeout: 0,
+
+        /**
+         * Set the title of the editor
+         * @prop
+         * @type 		{String}
+         */
+        title: null,
+
+        /**
+         * Set the accepted modes (comma separated modes)
+         * @prop
+         * @type 		{String}
+         */
+        accept: null
+      };
+    }
+  }]);
+
+  return SInteractiveDemoPartComponent;
+}(_SWebComponent2.default);
+
 exports.default = SInteractiveDemoPartComponent;

doc/js/SCodemirrorComponent.md

@@ -19,5 +19,5 @@ # SCodemirrorComponent
 ```
-Codemirror 5.x.x repository : [http://github.coffeekraken.io/codemirror/codemirror/^5.0.0](http://github.coffeekraken.io/codemirror/codemirror/^5.0.0)
+See : **Codemirror 5.x.x repository** : [http://github.coffeekraken.io/codemirror/codemirror/^5.0.0](http://github.coffeekraken.io/codemirror/codemirror/^5.0.0)
 
-Author : Olivier Bossel <[e-mail]>
+Author : Olivier Bossel [[e-mail]](mailto:[e-mail])
 
@@ -29,3 +29,3 @@
 
-Here's the list of available attribute to set on the element.
+Here's the list of available attribute(s).
 
@@ -35,2 +35,5 @@ ### mode
 Specify the mode used inside the demo
+Support html, css, javascript, jsx, php and sass by default.
+If you want more, you just have to import the codemirror support
+for your language
 
@@ -53,3 +56,5 @@ Type : **{ [String](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) }**
 
-Specify the id of the part
+Specify the id of the codemirror module
+This is used to display the name on top of the codemirror editor if the
+title is not provided
 
@@ -85,3 +90,3 @@ Type : **{ [String](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) }**
 
-Default : **4**
+Default : **2**
 
@@ -95,3 +100,3 @@
 
-Default : **true**
+Default : **false**
 
@@ -190,4 +195,6 @@
 
+Default : **null**
 
 
+
 ## Properties
@@ -194,0 +201,0 @@

package.json

 {
   "name": "coffeekraken-s-codemirror-component",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Webcomponent wrapper for the codemirror editor library.",
@@ -65,18 +65,12 @@ "main": "dist/index.js",
     "clipboard": "^1.5.16",
-    "codemirror": "^5.21.0",
+    "codemirror": "^5.42.2",
     "coffeekraken-sugar": "^1.0.0",
-    "mousetrap": "^1.6.0",
-    "raw-loader": "^0.5.1"
+    "mousetrap": "^1.6.0"
   },
   "devDependencies": {
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-export-default": "^7.0.0-alpha.20",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.4",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-env": "^1.7.0",
     "coffeekraken-code-playground": "^1.0.0",
@@ -90,3 +84,2 @@ "coffeekraken-docblock-to-markdown": "^1.0.0",
     "node-sass": "^4.0.0",
-    "webcomponents.js": "^0.7.24",
     "webpack": "^4.0.0",
@@ -93,0 +86,0 @@ "webpack-cli": "^3.0.3"

src/js/SCodemirrorComponent.js

@@ -7,2 +7,7 @@ import SWebComponent from 'coffeekraken-sugar/js/core/SWebComponent'
 require('codemirror/mode/htmlmixed/htmlmixed');
+require('codemirror/mode/css/css');
+require('codemirror/mode/javascript/javascript');
+require('codemirror/mode/jsx/jsx');
+require('codemirror/mode/php/php');
+require('codemirror/mode/sass/sass');
 require('./codemirror/autoFormatRange');
@@ -40,2 +45,5 @@
 			 * Specify the mode used inside the demo
+			 * Support html, css, javascript, jsx, php and sass by default.
+			 * If you want more, you just have to import the codemirror support
+			 * for your language
 			 * @prop
@@ -54,3 +62,5 @@ * @type 		{String}
 			/**
-			 * Specify the id of the part
+			 * Specify the id of the codemirror module
+			 * This is used to display the name on top of the codemirror editor if the
+			 * title is not provided
 			 * @prop
@@ -80,3 +90,3 @@ * @type 		{String}
 			 */
-			tabSize : 4,
+			tabSize : 2,
 
@@ -88,3 +98,3 @@ /**
 			 */
-			indentWithTabs : true,
+			indentWithTabs : false,
 
@@ -91,0 +101,0 @@ /**

webpack.config.js

 module.exports = {
+	mode: 'development',
 	entry: {
@@ -3,0 +4,0 @@ 'demo/dist/js/app.js' : './demo/src/js/app.js'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1865283

increased by182.36%

Dependency count

4

decreased by-20%

Dev dependency count

15

decreased by-28.57%

Number of package files

27

increased by3.85%

Lines of code

14461

increased by83.87%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• - Removedraw-loader@^0.5.1

• - Removedraw-loader@0.5.1(transitive)

• Updatedcodemirror@^5.42.2