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

Comparing version 1.0.0-alpha.6 to 1.0.0-alpha.7

es/index.js

@@ -11,7 +11,10 @@ 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 PropTypes from 'prop-types';
-import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import javascript from 'react-syntax-highlighter/dist/languages/prism/javascript';
-import jsx from 'react-syntax-highlighter/dist/languages/prism/jsx';
-import json from 'react-syntax-highlighter/dist/languages/prism/json';
-import { atomDark } from 'react-syntax-highlighter/dist/styles/prism';
+import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/light';
+import SyntaxHighlighterJsx, { registerLanguage as registerLanguageJsx } from 'react-syntax-highlighter/prism-light';
+import javascript from 'react-syntax-highlighter/languages/hljs/javascript';
+import json from 'react-syntax-highlighter/languages/hljs/json';
+import css from 'react-syntax-highlighter/languages/hljs/css';
+import xml from 'react-syntax-highlighter/languages/hljs/xml';
+import jsx from 'react-syntax-highlighter/languages/prism/jsx';
+import { atomDark } from 'react-syntax-highlighter/styles/prism';
 import axios from 'axios';
@@ -53,3 +56,3 @@
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.customTheme = atomDark, _this.codeBlockFrame = createRef(), _this.loadedInnerHTMLString = '', _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.customThemeJsx = atomDark, _this.codeBlockFrame = createRef(), _this.loadedInnerHTMLString = '', _this.state = {
             codeString: ''
@@ -107,7 +110,9 @@ }, _this.onBlurHandler = function () {
     CodeBlock.prototype.componentDidMount = function componentDidMount() {
-        SyntaxHighlighter.registerLanguage('jsx', jsx);
-        SyntaxHighlighter.registerLanguage('javascript', javascript);
-        SyntaxHighlighter.registerLanguage('json', json);
+        registerLanguageJsx('jsx', jsx);
+        registerLanguage('javascript', javascript);
+        registerLanguage('json', json);
+        registerLanguage('xml', xml);
+        registerLanguage('css', css);
 
-        this.customTheme = _extends({}, atomDark, {
+        this.customThemeJsx = _extends({}, atomDark, {
             comment: {
@@ -192,3 +197,6 @@ color: '#FFFFFF'
         var codeString = this.state.codeString;
-        var className = this.props.className;
+        var _props = this.props,
+            className = _props.className,
+            _props$language = _props.language,
+            language = _props$language === undefined ? 'jsx' : _props$language;
 
@@ -202,7 +210,28 @@
             },
-            React.createElement(
+            language === 'jsx' ? React.createElement(
+                SyntaxHighlighterJsx,
+                {
+                    language: language,
+                    style: this.customThemeJsx,
+                    codeTagProps: {
+                        contentEditable: 'true',
+                        suppressContentEditableWarning: 'true',
+                        tabIndex: 0,
+                        spellCheck: 'false',
+                        onBlur: this.onBlurHandler,
+                        onFocus: this.onFocusHandler
+                    }
+                },
+                codeString
+            ) : React.createElement(
                 SyntaxHighlighter,
                 {
-                    language: this.props.language || 'jsx',
-                    style: this.customTheme,
+                    language: language === 'html' ? 'xml' : language,
+                    className: 'code-block',
+                    customStyle: {
+                        backgroundColor: '#2b2b2b',
+                        color: '#f8f8f2',
+                        padding: '1em',
+                        borderRadius: '0.4em'
+                    },
                     codeTagProps: {
@@ -209,0 +238,0 @@ contentEditable: 'true',

lib/index.js

@@ -15,18 +15,32 @@ 'use strict';
 
-var _reactSyntaxHighlighter = require('react-syntax-highlighter');
+var _light = require('react-syntax-highlighter/light');
 
-var _javascript = require('react-syntax-highlighter/dist/languages/prism/javascript');
+var _light2 = _interopRequireDefault(_light);
 
-var _javascript2 = _interopRequireDefault(_javascript);
+var _prismLight = require('react-syntax-highlighter/prism-light');
 
-var _jsx = require('react-syntax-highlighter/dist/languages/prism/jsx');
+var _prismLight2 = _interopRequireDefault(_prismLight);
 
-var _jsx2 = _interopRequireDefault(_jsx);
+var _javascript = require('react-syntax-highlighter/languages/hljs/javascript');
 
-var _json = require('react-syntax-highlighter/dist/languages/prism/json');
+var _javascript2 = _interopRequireDefault(_javascript);
 
+var _json = require('react-syntax-highlighter/languages/hljs/json');
+
 var _json2 = _interopRequireDefault(_json);
 
-var _prism = require('react-syntax-highlighter/dist/styles/prism');
+var _css = require('react-syntax-highlighter/languages/hljs/css');
 
+var _css2 = _interopRequireDefault(_css);
+
+var _xml = require('react-syntax-highlighter/languages/hljs/xml');
+
+var _xml2 = _interopRequireDefault(_xml);
+
+var _jsx = require('react-syntax-highlighter/languages/prism/jsx');
+
+var _jsx2 = _interopRequireDefault(_jsx);
+
+var _prism = require('react-syntax-highlighter/styles/prism');
+
 var _axios = require('axios');
@@ -77,3 +91,3 @@
 
-        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 = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.customThemeJsx = _prism.atomDark, _this.codeBlockFrame = (0, _react.createRef)(), _this.loadedInnerHTMLString = '', _this.state = {
             codeString: ''
@@ -131,7 +145,9 @@ }, _this.onBlurHandler = function () {
     CodeBlock.prototype.componentDidMount = function componentDidMount() {
-        _reactSyntaxHighlighter.PrismLight.registerLanguage('jsx', _jsx2.default);
-        _reactSyntaxHighlighter.PrismLight.registerLanguage('javascript', _javascript2.default);
-        _reactSyntaxHighlighter.PrismLight.registerLanguage('json', _json2.default);
+        (0, _prismLight.registerLanguage)('jsx', _jsx2.default);
+        (0, _light.registerLanguage)('javascript', _javascript2.default);
+        (0, _light.registerLanguage)('json', _json2.default);
+        (0, _light.registerLanguage)('xml', _xml2.default);
+        (0, _light.registerLanguage)('css', _css2.default);
 
-        this.customTheme = _extends({}, _prism.atomDark, {
+        this.customThemeJsx = _extends({}, _prism.atomDark, {
             comment: {
@@ -216,3 +232,6 @@ color: '#FFFFFF'
         var codeString = this.state.codeString;
-        var className = this.props.className;
+        var _props = this.props,
+            className = _props.className,
+            _props$language = _props.language,
+            language = _props$language === undefined ? 'jsx' : _props$language;
 
@@ -226,7 +245,7 @@
             },
-            _react2.default.createElement(
-                _reactSyntaxHighlighter.PrismLight,
+            language === 'jsx' ? _react2.default.createElement(
+                _prismLight2.default,
                 {
-                    language: this.props.language || 'jsx',
-                    style: this.customTheme,
+                    language: language,
+                    style: this.customThemeJsx,
                     codeTagProps: {
@@ -242,2 +261,23 @@ contentEditable: 'true',
                 codeString
+            ) : _react2.default.createElement(
+                _light2.default,
+                {
+                    language: language === 'html' ? 'xml' : language,
+                    className: 'code-block',
+                    customStyle: {
+                        backgroundColor: '#2b2b2b',
+                        color: '#f8f8f2',
+                        padding: '1em',
+                        borderRadius: '0.4em'
+                    },
+                    codeTagProps: {
+                        contentEditable: 'true',
+                        suppressContentEditableWarning: 'true',
+                        tabIndex: 0,
+                        spellCheck: 'false',
+                        onBlur: this.onBlurHandler,
+                        onFocus: this.onFocusHandler
+                    }
+                },
+                codeString
             )
@@ -244,0 +284,0 @@ ) : null;

package.json

 {
     "name": "@tenon-io/tenon-codeblock",
-    "version": "1.0.0-alpha.6",
+    "version": "1.0.0-alpha.7",
     "description": "Tenon ui code display block",
@@ -40,5 +40,5 @@ "contributors": [
     "dependencies": {
-        "@babel/runtime": "^7.1.2",
+        "@babel/runtime": "7.1.2",
         "axios": "0.18.0",
-        "react-syntax-highlighter": "10.0.0"
+        "react-syntax-highlighter": "9.0.1"
     },
@@ -45,0 +45,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

27043

increased by11.07%

Lines of code

456

increased by15.74%

Dependency changes

• + Added@babel/runtime@7.1.2(transitive)

• + Addedreact-syntax-highlighter@9.0.1(transitive)

• + Addedregenerator-runtime@0.12.1(transitive)

• - Removed@babel/runtime@7.26.7(transitive)

• - Removedreact-syntax-highlighter@10.0.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@babel/runtime@7.1.2

• Updatedreact-syntax-highlighter@9.0.1