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

Comparing version 1.0.4 to 1.0.5

dist/js/codemirror/autoFormatRange.js

@@ -7,2 +7,77 @@ "use strict";
 
+_codemirror.default.extendMode("css", {
+  commentStart: "/*",
+  commentEnd: "*/",
+  newlineAfterToken: function newlineAfterToken(_type, content) {
+    return /^[;{}]$/.test(content);
+  }
+});
+
+_codemirror.default.extendMode("javascript", {
+  commentStart: "/*",
+  commentEnd: "*/",
+  // FIXME semicolons inside of for
+  newlineAfterToken: function newlineAfterToken(_type, content, textAfter, state) {
+    if (this.jsonMode) {
+      return /^[\[,{]$/.test(content) || /^}/.test(textAfter);
+    } else {
+      if (content == ";" && state.lexical && state.lexical.type == ")") return false;
+      return /^[;{}]$/.test(content) && !/^;/.test(textAfter);
+    }
+  }
+});
+
+var inlineElements = /^(a|abbr|acronym|area|base|bdo|big|br|button|caption|cite|code|col|colgroup|dd|del|dfn|em|frame|hr|iframe|img|input|ins|kbd|label|legend|link|map|object|optgroup|option|param|q|samp|script|select|small|span|strong|sub|sup|textarea|tt|var)$/;
+
+_codemirror.default.extendMode("xml", {
+  commentStart: "<!--",
+  commentEnd: "-->",
+  newlineAfterToken: function newlineAfterToken(type, content, textAfter, state) {
+    var inline = false;
+    if (this.configuration == "html") inline = state.context ? inlineElements.test(state.context.tagName) : false;
+    return !inline && (type == "tag" && />$/.test(content) && state.context || /^</.test(textAfter));
+  }
+}); // Comment/uncomment the specified range
+
+
+_codemirror.default.defineExtension("commentRange", function (isComment, from, to) {
+  var cm = this,
+      curMode = _codemirror.default.innerMode(cm.getMode(), cm.getTokenAt(from).state).mode;
+
+  cm.operation(function () {
+    if (isComment) {
+      // Comment range
+      cm.replaceRange(curMode.commentEnd, to);
+      cm.replaceRange(curMode.commentStart, from);
+      if (from.line == to.line && from.ch == to.ch) // An empty comment inserted - put cursor inside
+        cm.setCursor(from.line, from.ch + curMode.commentStart.length);
+    } else {
+      // Uncomment range
+      var selText = cm.getRange(from, to);
+      var startIndex = selText.indexOf(curMode.commentStart);
+      var endIndex = selText.lastIndexOf(curMode.commentEnd);
+
+      if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {
+        // Take string till comment start
+        selText = selText.substr(0, startIndex) + // From comment start till comment end
+        selText.substring(startIndex + curMode.commentStart.length, endIndex) + // From comment end till string end
+        selText.substr(endIndex + curMode.commentEnd.length);
+      }
+
+      cm.replaceRange(selText, from, to);
+    }
+  });
+}); // Applies automatic mode-aware indentation to the specified range
+
+
+_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");
+    }
+  });
+}); // Applies automatic formatting to the specified range
+
+
 _codemirror.default.defineExtension("autoFormatRange", function (from, to) {
@@ -18,3 +93,3 @@ var cm = this;
       lines = 0,
-      atSol = from.ch == 0;
+      atSol = from.ch === 0;
 
@@ -46,3 +121,3 @@ function newline() {
     if (!stream.pos && outer.blankLine) outer.blankLine(state);
-    if (!atSol) newline();
+    if (!atSol && i < text.length - 1) newline();
   }
@@ -56,13 +131,5 @@
     }
-  });
-}); // Applies automatic mode-aware indentation to the specified range
 
-
-_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");
-    }
+    cm.setSelection(from, cm.getCursor(false));
   });
 });

dist/js/SCodemirrorComponent.js

@@ -18,2 +18,4 @@ "use strict";
 
+require("codemirror-formatting");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,4 +60,2 @@
 require('codemirror/mode/sass/sass');
-
-require('./codemirror/autoFormatRange');
 /**
@@ -174,10 +174,10 @@ * @name 		SCodemirrorComponent
       if (initialProps.mode === 'html') initialProps.mode = 'htmlmixed';
+      if (initialProps.mode === 'scss') initialProps.mode = 'text/x-scss';
+      if (initialProps.mode === 'json') initialProps.mode = 'javascript';
+      if (initialProps.mode === 'typescript') initialProps.mode = 'text/typescript';
       this._codemirror = new _codemirror.default(this, _objectSpread({
         value: content.trim(),
         viewportMargin: Infinity
-      }, initialProps)); // get some codemirror elements
+      }, initialProps)); // auto format
 
-      this._codemirrorSizerElm = this.querySelector('.CodeMirror-sizer');
-      this._codemirrorElm = this.querySelector('.CodeMirror'); // auto format
-
       this._autoFormatCode(); // handle update
@@ -223,4 +223,12 @@
             mode = 'htmlmixed';
+          } else if (mode === 'scss') {
+            mode = 'text/x-scss';
+          } else if (mode === 'json') {
+            mode = 'javascript';
           }
 
+          if (mode === 'typescript') {
+            mode = 'text/typescript';
+          }
+
           this._codemirror.setOption('mode', mode);
@@ -519,3 +527,3 @@
          * Specify the mode used inside the demo
-         * Support html, css, javascript, jsx, php and sass by default.
+         * Support html, css, javascript, json, typescript, jsx, php, scss and sass by default.
          * If you want more, you just have to import the codemirror support
@@ -522,0 +530,0 @@ * for your language

doc/js/SCodemirrorComponent.md

@@ -33,3 +33,3 @@ # SCodemirrorComponent
 Specify the mode used inside the demo
-Support html, css, javascript, jsx, php and sass by default.
+Support html, css, javascript, json, typescript, jsx, php, scss and sass by default.
 If you want more, you just have to import the codemirror support
@@ -36,0 +36,0 @@ for your language

package.json

 {
   "name": "coffeekraken-s-codemirror-component",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Webcomponent wrapper for the codemirror editor library.",
@@ -66,4 +66,5 @@ "main": "dist/index.js",
     "codemirror": "^5.42.2",
-    "coffeekraken-sugar": "^1.0.0",
+    "codemirror-formatting": "^1.0.0",
     "coffeekraken-s-typography-component": "^1.0.1",
+    "coffeekraken-sugar": "^1.0.36",
     "mousetrap": "^1.6.0"
@@ -75,5 +76,5 @@ },
     "@babel/preset-env": "^7.2.3",
-    "babel-loader": "^8.0.4",
+    "babel-loader": "^8.0.5",
     "babel-polyfill": "^6.23.0",
-    "coffeekraken-code-playground": "^1.0.0",
+    "coffeekraken-code-playground": "^1.0.16",
     "coffeekraken-docblock-to-markdown": "^1.0.0",
@@ -86,4 +87,4 @@ "coffeekraken-scripts-stack": "^1.0.1",
     "webpack": "^4.0.0",
-    "webpack-cli": "^3.0.3"
+    "webpack-cli": "^3.2.0"
   }
 }

src/js/SCodemirrorComponent.js

@@ -6,2 +6,3 @@ import SWebComponent from 'coffeekraken-sugar/js/core/SWebComponent'
 import __mousetrap from 'mousetrap';
+import 'codemirror-formatting';
 require('codemirror/mode/htmlmixed/htmlmixed');
@@ -13,3 +14,2 @@ require('codemirror/mode/css/css');
 require('codemirror/mode/sass/sass');
-require('./codemirror/autoFormatRange');
 
@@ -46,3 +46,3 @@ /**
 			 * Specify the mode used inside the demo
-			 * Support html, css, javascript, jsx, php and sass by default.
+			 * Support html, css, javascript, json, typescript, jsx, php, scss and sass by default.
 			 * If you want more, you just have to import the codemirror support
@@ -398,2 +398,5 @@ * for your language
 		if (initialProps.mode === 'html') initialProps.mode = 'htmlmixed';
+		if (initialProps.mode === 'scss') initialProps.mode = 'text/x-scss';
+		if (initialProps.mode === 'json') initialProps.mode = 'javascript';
+		if (initialProps.mode === 'typescript') initialProps.mode = 'text/typescript';
 		this._codemirror = new Codemirror(this, {
@@ -405,6 +408,2 @@ value : content.trim(),
 
-		// get some codemirror elements
-		this._codemirrorSizerElm = this.querySelector('.CodeMirror-sizer');
-		this._codemirrorElm = this.querySelector('.CodeMirror');
-
 		// auto format
@@ -444,2 +443,8 @@ this._autoFormatCode();
 					mode = 'htmlmixed'
+				} else if (mode === 'scss') {
+					mode = 'text/x-scss'
+				} else if (mode === 'json') {
+					mode = 'javascript'
+				} if (mode === 'typescript') {
+					mode = 'text/typescript'
 				}
@@ -446,0 +451,0 @@ this._codemirror.setOption('mode', mode);

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1873095

increased by0.41%

Lines of code

14510

increased by0.35%

Worsened metrics

Dependency count

6

increased by20%

Number of package files

26

decreased by-3.7%

Dependency changes

• + Addedcodemirror-formatting@^1.0.0

• + Addedcodemirror-formatting@1.0.0(transitive)

• Updatedcoffeekraken-sugar@^1.0.36