react-live - npm Package Compare versions

Comparing version 1.4.4 to 1.4.5

lib/components/Editor/index.js

@@ -17,2 +17,10 @@ 'use strict';
 
+var _getIndent = require('../../utils/getIndent');
+
+var _getIndent2 = _interopRequireDefault(_getIndent);
+
+var _normalizeCode = require('../../utils/normalizeCode');
+
+var _normalizeCode2 = _interopRequireDefault(_normalizeCode);
+
 var _normalizeHtml = require('../../utils/normalizeHtml');
@@ -26,5 +34,5 @@
 
-var _selectionRange = require('../../vendor/selection-range');
+var _selectionRange2 = require('../../vendor/selection-range');
 
-var _selectionRange2 = _interopRequireDefault(_selectionRange);
+var _selectionRange3 = _interopRequireDefault(_selectionRange2);
 
@@ -55,6 +63,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
       _this.ref = node;
-    }, _this.updateHighlighting = function (keyCode) {
+    }, _this.getPlain = function () {
       var html = (0, _normalizeHtml2.default)(_this.ref.innerHTML);
       var plain = (0, _htmlToPlain2.default)(html);
 
+      return plain;
+    }, _this.updateHighlighting = function () {
+      var plain = _this.getPlain();
+
       _this.setState({ html: (0, _prism2.default)(plain) });
@@ -68,13 +80,20 @@
       if (evt.keyCode === 9) {
+        // Tab Key
         document.execCommand('insertHTML', false, '&#009');
         evt.preventDefault();
       } else if (evt.keyCode === 13) {
-        document.execCommand('insertHTML', false, '\n');
+        // Enter Key
+        var _selectionRange = (0, _selectionRange3.default)(_this.ref),
+            cursorPos = _selectionRange.start;
+
+        var indentation = (0, _getIndent2.default)(_this.getPlain(), cursorPos);
+
+        document.execCommand('insertHTML', false, '\n' + indentation);
         evt.preventDefault();
       }
     }, _this.onKeyUp = function (evt) {
-      _this.selection = (0, _selectionRange2.default)(_this.ref);
-      _this.updateHighlighting(evt.keyCode);
+      _this.selection = (0, _selectionRange3.default)(_this.ref);
+      _this.updateHighlighting();
     }, _this.onClick = function () {
-      _this.selection = (0, _selectionRange2.default)(_this.ref);
+      _this.selection = (0, _selectionRange3.default)(_this.ref);
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -84,3 +103,3 @@ }
   Editor.prototype.componentWillMount = function componentWillMount() {
-    var html = (0, _prism2.default)(this.props.code);
+    var html = (0, _prism2.default)((0, _normalizeCode2.default)(this.props.code));
     this.setState({ html: html });
@@ -93,3 +112,3 @@ };
     if (code !== this.props.code) {
-      var html = (0, _prism2.default)(this.props.code);
+      var html = (0, _prism2.default)((0, _normalizeCode2.default)(this.props.code));
       this.setState({ html: html });
@@ -103,3 +122,3 @@ }
     if (selection) {
-      (0, _selectionRange2.default)(this.ref, selection);
+      (0, _selectionRange3.default)(this.ref, selection);
     }
@@ -106,0 +125,0 @@ };

package.json

 {
   "name": "react-live",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "A production-focused playground for live editing React code",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/components/Editor/index.js

 import React, { Component } from 'react'
 import cn from '../../utils/cn'
 import prism from '../../utils/prism'
+import getIndent from '../../utils/getIndent'
+import normalizeCode from '../../utils/normalizeCode'
 import normalizeHtml from '../../utils/normalizeHtml'
@@ -21,6 +23,12 @@ import htmlToPlain from '../../utils/htmlToPlain'
 
-  updateHighlighting = keyCode => {
+  getPlain = () => {
     const html = normalizeHtml(this.ref.innerHTML)
     const plain = htmlToPlain(html)
 
+    return plain
+  }
+
+  updateHighlighting = () => {
+    const plain = this.getPlain()
+
     this.setState({ html: prism(plain) })
@@ -35,7 +43,10 @@
     // NOTE: This prevents bad default behaviour
-    if (evt.keyCode === 9) {
+    if (evt.keyCode === 9) { // Tab Key
       document.execCommand('insertHTML', false, '&#009')
       evt.preventDefault()
-    } else if (evt.keyCode === 13) {
-      document.execCommand('insertHTML', false, '\n')
+    } else if (evt.keyCode === 13) { // Enter Key
+      const { start: cursorPos } = selectionRange(this.ref)
+      const indentation = getIndent(this.getPlain(), cursorPos)
+
+      document.execCommand('insertHTML', false, '\n' + indentation)
       evt.preventDefault()
@@ -47,3 +58,3 @@ }
     this.selection = selectionRange(this.ref)
-    this.updateHighlighting(evt.keyCode)
+    this.updateHighlighting()
   }
@@ -56,3 +67,3 @@
   componentWillMount() {
-    const html = prism(this.props.code)
+    const html = prism(normalizeCode(this.props.code))
     this.setState({ html })
@@ -63,3 +74,3 @@ }
     if (code !== this.props.code) {
-      const html = prism(this.props.code)
+      const html = prism(normalizeCode(this.props.code))
       this.setState({ html })
@@ -66,0 +77,0 @@ }

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

1283704

increased by0.32%

Number of downloads

150138

increased by13.3%

Number of package files

59

increased by7.27%

Lines of code

25995

increased by0.37%

No dependency changes