From 5a96148cfb1183d618f1fa7e825ea7d49cf65542 Mon Sep 17 00:00:00 2001 From: tomholford Date: Tue, 31 Jul 2018 16:36:28 -0700 Subject: [PATCH 1/8] Add `styles` prop to override Runkit default style --- README.md | 24 +++++++++++++++++++++++- dist/react-runkit.js | 1 + dist/react-runkit.min.js | 2 +- package.json | 2 +- src/index.js | 1 + 5 files changed, 27 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index bb070d0..d2fd2f8 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,29 @@ Specify source code that is run before the main source. This code will not be sh ``` +### styles : object + +Inspired by [this comment](https://discuss.runkit.com/t/theme-runkit-embed/541/6), pass a `styles` object to override default Runkit styling. + +```js + +``` + ### onLoad : function Provide a callback that is run when the embed is loaded. @@ -163,4 +186,3 @@ class App extends React.Component { } } ``` - diff --git a/dist/react-runkit.js b/dist/react-runkit.js index e626706..e5a3125 100644 --- a/dist/react-runkit.js +++ b/dist/react-runkit.js @@ -593,6 +593,7 @@ Embed.propTypes = { minHeight: PropTypes.string, packageTimestamp: PropTypes.string, preamble: PropTypes.string, + styles: PropTypes.object, onLoad: PropTypes.func, onURLChanged: PropTypes.func, onEvaluate: PropTypes.func diff --git a/dist/react-runkit.min.js b/dist/react-runkit.min.js index aa9d99b..564c2b5 100644 --- a/dist/react-runkit.min.js +++ b/dist/react-runkit.min.js @@ -1 +1 @@ -module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){e.exports=n(5)()},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=Object.assign||function(e){for(var t=1;t Date: Tue, 31 Jul 2018 16:58:47 -0700 Subject: [PATCH 2/8] Encode `styles` JSON --- README.md | 2 +- dist/react-runkit.js | 42 +++++++++++++++++++++++++++++----------- dist/react-runkit.min.js | 2 +- src/index.js | 5 +++++ src/urlencode.js | 8 ++++++++ 5 files changed, 46 insertions(+), 13 deletions(-) create mode 100644 src/urlencode.js diff --git a/README.md b/README.md index d2fd2f8..d4bffda 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,7 @@ Specify source code that is run before the main source. This code will not be sh Inspired by [this comment](https://discuss.runkit.com/t/theme-runkit-embed/541/6), pass a `styles` object to override default Runkit styling. ```js - Date: Tue, 31 Jul 2018 17:04:06 -0700 Subject: [PATCH 3/8] Ensure string --- src/urlencode.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/urlencode.js b/src/urlencode.js index 3f2ccf4..99d4298 100644 --- a/src/urlencode.js +++ b/src/urlencode.js @@ -1,8 +1,10 @@ export default function(text) { - return encodeURIComponent(text).replace(/!/g, '%21') - .replace(/'/g, '%27') - .replace(/\(/g, '%28') - .replace(/\)/g, '%29') - .replace(/\*/g, '%2A') - .replace(/%20/g, '+'); + const str = text.toString(); + + return encodeURIComponent(str).replace(/!/g, '%21') + .replace(/'/g, '%27') + .replace(/\(/g, '%28') + .replace(/\)/g, '%29') + .replace(/\*/g, '%2A') + .replace(/%20/g, '+'); } From 1e9a7521eb175a22e348c96026cfd4a5911ed68f Mon Sep 17 00:00:00 2001 From: tomholford Date: Tue, 31 Jul 2018 17:11:00 -0700 Subject: [PATCH 4/8] Update peer dep --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aa467ec..9f630a8 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "webpack": "^2.5.1" }, "peerDependencies": { - "react": "^15.5.4" + "react": ">=15.5.4" }, "scripts": { "build": "npm run build-dev && npm run build-prod", From dbc17dfde756b499b76e07d957aca5acdbf3a65d Mon Sep 17 00:00:00 2001 From: tomholford Date: Tue, 31 Jul 2018 17:24:59 -0700 Subject: [PATCH 5/8] Fixing import of urlencode --- dist/react-runkit.js | 15 +++++++++++---- dist/react-runkit.min.js | 2 +- src/index.js | 2 +- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/dist/react-runkit.js b/dist/react-runkit.js index 83926a3..e94128b 100644 --- a/dist/react-runkit.js +++ b/dist/react-runkit.js @@ -465,11 +465,13 @@ module.exports = warning; Object.defineProperty(exports, "__esModule", { - value: true + value: true }); exports.default = function (text) { - return encodeURIComponent(text).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+'); + var str = text.toString(); + + return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+'); }; /***/ }), @@ -526,6 +528,12 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument 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 _urlencode = __webpack_require__(5); + +var _urlencode2 = _interopRequireDefault(_urlencode); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 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; } @@ -534,7 +542,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function" var React = __webpack_require__(7); var PropTypes = __webpack_require__(6); -var urlencode = __webpack_require__(5); var Embed = function (_React$Component) { _inherits(Embed, _React$Component); @@ -581,7 +588,7 @@ var Embed = function (_React$Component) { var element = this.refs.embed; var options = _extends({}, this.props, { element: element }); if ('styles' in options) { - var encodedStyles = urlencode(options['styles']); + var encodedStyles = (0, _urlencode2.default)(options['styles']); options['styles'] = encodedStyles; } diff --git a/dist/react-runkit.min.js b/dist/react-runkit.min.js index ce68da0..8e4d9e7 100644 --- a/dist/react-runkit.min.js +++ b/dist/react-runkit.min.js @@ -1 +1 @@ -module.exports=function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return encodeURIComponent(e).replace(/!/g,"%21").replace(/'/g,"%27").replace(/\(/g,"%28").replace(/\)/g,"%29").replace(/\*/g,"%2A").replace(/%20/g,"+")}},function(e,t,n){e.exports=n(6)()},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var i=Object.assign||function(e){for(var t=1;t Date: Tue, 31 Jul 2018 17:40:16 -0700 Subject: [PATCH 6/8] Turns out, using `styles` is deprecated; use `syntaxTheme` instead --- README.md | 21 +++------------------ src/index.js | 7 +------ src/urlencode.js | 10 ---------- 3 files changed, 4 insertions(+), 34 deletions(-) delete mode 100644 src/urlencode.js diff --git a/README.md b/README.md index d4bffda..cd2b1ca 100644 --- a/README.md +++ b/README.md @@ -113,27 +113,12 @@ Specify source code that is run before the main source. This code will not be sh ``` -### styles : object +### syntaxTheme : string -Inspired by [this comment](https://discuss.runkit.com/t/theme-runkit-embed/541/6), pass a `styles` object to override default Runkit styling. +Create your own theme [here](https://runkit.com/docs/theme-maker). Then, reference the syntax name using `syntaxTheme`. ```js - + ``` ### onLoad : function diff --git a/src/index.js b/src/index.js index 88b0055..46dc046 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,5 @@ const React = require('react') const PropTypes = require('prop-types') -import urlencode from './urlencode' class Embed extends React.Component { shouldComponentUpdate() { @@ -25,10 +24,6 @@ class Embed extends React.Component { componentDidMount() { const element = this.refs.embed const options = { ...this.props, element } - if('styles' in options) { - let encodedStyles = urlencode(options['styles']); - options['styles'] = encodedStyles; - } this.embed = RunKit.createNotebook(options) } @@ -53,7 +48,7 @@ Embed.propTypes = { minHeight: PropTypes.string, packageTimestamp: PropTypes.string, preamble: PropTypes.string, - styles: PropTypes.object, + syntaxTheme: PropTypes.string, onLoad: PropTypes.func, onURLChanged: PropTypes.func, onEvaluate: PropTypes.func diff --git a/src/urlencode.js b/src/urlencode.js deleted file mode 100644 index 99d4298..0000000 --- a/src/urlencode.js +++ /dev/null @@ -1,10 +0,0 @@ -export default function(text) { - const str = text.toString(); - - return encodeURIComponent(str).replace(/!/g, '%21') - .replace(/'/g, '%27') - .replace(/\(/g, '%28') - .replace(/\)/g, '%29') - .replace(/\*/g, '%2A') - .replace(/%20/g, '+'); -} From 4cb1dac3760fcd8973ea4d78cdf8a7aeda22dc48 Mon Sep 17 00:00:00 2001 From: tomholford Date: Tue, 31 Jul 2018 18:14:18 -0700 Subject: [PATCH 7/8] Add gutterStyle, change theme name to match Stripe implementation --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 46dc046..da54bbc 100644 --- a/src/index.js +++ b/src/index.js @@ -48,7 +48,8 @@ Embed.propTypes = { minHeight: PropTypes.string, packageTimestamp: PropTypes.string, preamble: PropTypes.string, - syntaxTheme: PropTypes.string, + theme: PropTypes.string, + gutterStyle: PropTypes.string, onLoad: PropTypes.func, onURLChanged: PropTypes.func, onEvaluate: PropTypes.func From ab0cefeb2b679daea47e19d09647744e8d1e829e Mon Sep 17 00:00:00 2001 From: tomholford Date: Tue, 31 Jul 2018 18:22:12 -0700 Subject: [PATCH 8/8] Update README with new props --- README.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index cd2b1ca..e1067e1 100644 --- a/README.md +++ b/README.md @@ -113,12 +113,20 @@ Specify source code that is run before the main source. This code will not be sh ``` -### syntaxTheme : string +### theme : string -Create your own theme [here](https://runkit.com/docs/theme-maker). Then, reference the syntax name using `syntaxTheme`. +Create your own theme [here](https://runkit.com/docs/theme-maker). Then, reference the syntax name using `theme`. ```js - + +``` + +### gutterStyle : string + +Control whether the line number gutter is rendered inside or outside the code pane. Defaults to `'outside'`; + +```js + ``` ### onLoad : function