@tenon-io/tenon-codeblock - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

es/index.js

@@ -9,3 +9,3 @@ 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; };
 
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
@@ -27,4 +27,14 @@ import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
  *
- * @prop required {string} file - The path to the file to load.
+ * It also allows a free text codeString to be given. If both are set, file will
+ * override codeString
+ *
+ * This code block will autoreset any changes to the contenteditable <code>
+ * tag and, if the user made any changes before the reset, the onRest
+ * handler will be called.
+ *
+ * @prop {string} file - The path to the file to load.
+ * @prop {string} codeString - A string value containing code to display.
  * @prop {string} language - Select a highlighter for jsx | javascript | html | json.
+ * @prop {function} onReset - A callback function to execute when changes to the
+ *          contenteditable section is reverted.
  *  */
@@ -44,6 +54,14 @@
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.customTheme = atomDark, _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.customTheme = atomDark, _this.codeBlockFrame = createRef(), _this.loadedInnerHTMLString = '', _this.state = {
             codeString: ''
         }, _this.onBlurHandler = function () {
+            var onReset = _this.props.onReset;
+
+
             var oldCodeString = _this.state.codeString;
+
+            if (_this.loadedInnerHTMLString !== _this.codeBlockFrame.current.querySelector('code').innerHTML.toString() && onReset) {
+                onReset();
+            }
+
             _this.setState({ codeString: '' }, function () {
@@ -58,7 +76,20 @@ _this.setState({ codeString: oldCodeString });
             selection.addRange(range);
-        }, _this.fetchFile = function () {
-            axios.get(_this.props.file).then(function (_ref) {
-                var data = _ref.data;
+        }, _this.setText = function () {
+            var _this$props = _this.props,
+                file = _this$props.file,
+                codeString = _this$props.codeString;
 
-                _this.setState({ codeString: data });
+
+            if (file) {
+                axios.get(file).then(function (_ref) {
+                    var data = _ref.data;
+
+                    _this.setCodeString(data);
+                });
+            } else if (codeString) {
+                _this.setCodeString(codeString);
+            }
+        }, _this.setCodeString = function (codeString) {
+            _this.setState({ codeString: codeString }, function () {
+                _this.loadedInnerHTMLString = _this.codeBlockFrame.current.querySelector('code').innerHTML.toString();
             });
@@ -91,3 +122,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 
-        this.fetchFile();
+        this.setText();
     };
@@ -97,3 +128,3 @@
      * @function
-     * Refetches the file when the filename changes.
+     * Resets the code text when the filename or codeString changes.
      *
@@ -105,4 +136,4 @@ * @param {object} prevProps
     CodeBlock.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-        if (prevProps.file !== this.props.file) {
-            this.fetchFile();
+        if (prevProps.file !== this.props.file || prevProps.codeString !== this.props.codeString) {
+            this.setText();
         }
@@ -117,2 +148,7 @@ };
      * stable interface;
+     *
+     * It also checks whether the user had changed the tag content.
+     * If so the onReset handler is called.
+     *
+     * The implementation here is to allow for IE support.
      */
@@ -134,4 +170,9 @@
      *
-     * GETs the file from the server and sets the content to the
-     * component state.
+     * If a file is given it GETs the file from the server and
+     * sets the content to the component state.
+     *
+     * Alternatively if a codeString is given, it is set to the
+     * component state. This is an intentional duplication of
+     * the prop into the state so that the mechanism can be
+     * re-used without code duplication.
      */
@@ -161,3 +202,3 @@
             'div',
-            { id: 'codeblock' },
+            { id: 'codeblock', ref: this.codeBlockFrame },
             React.createElement(
@@ -186,4 +227,6 @@ SyntaxHighlighter,
 CodeBlock.propTypes = process.env.NODE_ENV !== "production" ? {
-    file: PropTypes.string.isRequired,
-    language: PropTypes.oneOf(['javascript', 'jsx', 'json', 'html'])
+    file: PropTypes.string,
+    codeString: PropTypes.string,
+    language: PropTypes.oneOf(['javascript', 'jsx', 'json', 'html']),
+    onReset: PropTypes.func
 } : {};
@@ -190,0 +233,0 @@

lib/index.js

@@ -53,4 +53,14 @@ 'use strict';
  *
- * @prop required {string} file - The path to the file to load.
+ * It also allows a free text codeString to be given. If both are set, file will
+ * override codeString
+ *
+ * This code block will autoreset any changes to the contenteditable <code>
+ * tag and, if the user made any changes before the reset, the onRest
+ * handler will be called.
+ *
+ * @prop {string} file - The path to the file to load.
+ * @prop {string} codeString - A string value containing code to display.
  * @prop {string} language - Select a highlighter for jsx | javascript | html | json.
+ * @prop {function} onReset - A callback function to execute when changes to the
+ *          contenteditable section is reverted.
  *  */
@@ -69,6 +79,14 @@ var CodeBlock = function (_Component) {
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.customTheme = _prism.atomDark, _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.customTheme = _prism.atomDark, _this.codeBlockFrame = (0, _react.createRef)(), _this.loadedInnerHTMLString = '', _this.state = {
             codeString: ''
         }, _this.onBlurHandler = function () {
+            var onReset = _this.props.onReset;
+
+
             var oldCodeString = _this.state.codeString;
+
+            if (_this.loadedInnerHTMLString !== _this.codeBlockFrame.current.querySelector('code').innerHTML.toString() && onReset) {
+                onReset();
+            }
+
             _this.setState({ codeString: '' }, function () {
@@ -83,7 +101,20 @@ _this.setState({ codeString: oldCodeString });
             selection.addRange(range);
-        }, _this.fetchFile = function () {
-            _axios2.default.get(_this.props.file).then(function (_ref) {
-                var data = _ref.data;
+        }, _this.setText = function () {
+            var _this$props = _this.props,
+                file = _this$props.file,
+                codeString = _this$props.codeString;
 
-                _this.setState({ codeString: data });
+
+            if (file) {
+                _axios2.default.get(file).then(function (_ref) {
+                    var data = _ref.data;
+
+                    _this.setCodeString(data);
+                });
+            } else if (codeString) {
+                _this.setCodeString(codeString);
+            }
+        }, _this.setCodeString = function (codeString) {
+            _this.setState({ codeString: codeString }, function () {
+                _this.loadedInnerHTMLString = _this.codeBlockFrame.current.querySelector('code').innerHTML.toString();
             });
@@ -116,3 +147,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 
-        this.fetchFile();
+        this.setText();
     };
@@ -122,3 +153,3 @@
      * @function
-     * Refetches the file when the filename changes.
+     * Resets the code text when the filename or codeString changes.
      *
@@ -130,4 +161,4 @@ * @param {object} prevProps
     CodeBlock.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-        if (prevProps.file !== this.props.file) {
-            this.fetchFile();
+        if (prevProps.file !== this.props.file || prevProps.codeString !== this.props.codeString) {
+            this.setText();
         }
@@ -142,2 +173,7 @@ };
      * stable interface;
+     *
+     * It also checks whether the user had changed the tag content.
+     * If so the onReset handler is called.
+     *
+     * The implementation here is to allow for IE support.
      */
@@ -159,4 +195,9 @@
      *
-     * GETs the file from the server and sets the content to the
-     * component state.
+     * If a file is given it GETs the file from the server and
+     * sets the content to the component state.
+     *
+     * Alternatively if a codeString is given, it is set to the
+     * component state. This is an intentional duplication of
+     * the prop into the state so that the mechanism can be
+     * re-used without code duplication.
      */
@@ -186,3 +227,3 @@
             'div',
-            { id: 'codeblock' },
+            { id: 'codeblock', ref: this.codeBlockFrame },
             _react2.default.createElement(
@@ -211,6 +252,8 @@ _prismLight2.default,
 CodeBlock.propTypes = process.env.NODE_ENV !== "production" ? {
-    file: _propTypes2.default.string.isRequired,
-    language: _propTypes2.default.oneOf(['javascript', 'jsx', 'json', 'html'])
+    file: _propTypes2.default.string,
+    codeString: _propTypes2.default.string,
+    language: _propTypes2.default.oneOf(['javascript', 'jsx', 'json', 'html']),
+    onReset: _propTypes2.default.func
 } : {};
 exports.default = CodeBlock;
 module.exports = exports['default'];

package.json

 {
     "name": "@tenon-io/tenon-codeblock",
-    "version": "1.0.0-alpha.1",
+    "version": "1.0.0-alpha.2",
     "description": "Tenon ui code display block",
@@ -5,0 +5,0 @@ "contributors": [

No alert changes

Improved metrics

Total package byte prevSize

21045

increased by21.92%

Lines of code

387

increased by23.64%

No dependency changes