Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for theme and gutterStyle props #4

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Add support for theme and gutterStyle props #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5a96148
Add `styles` prop to override Runkit default style
tomholford Jul 31, 2018
452a405
Encode `styles` JSON
tomholford Jul 31, 2018
726bf41
Ensure string
tomholford Aug 1, 2018
1e9a752
Update peer dep
tomholford Aug 1, 2018
dbc17df
Fixing import of urlencode
tomholford Aug 1, 2018
0c2ab09
Turns out, using `styles` is deprecated; use `syntaxTheme` instead
tomholford Aug 1, 2018
4cb1dac
Add gutterStyle, change theme name to match Stripe implementation
tomholford Aug 1, 2018
ab0cefe
Update README with new props
tomholford Aug 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,22 @@ Specify source code that is run before the main source. This code will not be sh
<Embed source={ `console.log(_.map(_.add(1), [1, 2, 3]))` } preamble={ `const _ = require('lodash/fp')` } />
```

### theme : string

Create your own theme [here](https://runkit.com/docs/theme-maker). Then, reference the syntax name using `theme`.

```js
<Embed theme={ 'my-cool-theme' } />
```

### gutterStyle : string

Control whether the line number gutter is rendered inside or outside the code pane. Defaults to `'outside'`;

```js
<Embed gutterStyle={ 'inside' } />
```

### onLoad : function

Provide a callback that is run when the embed is loaded.
Expand Down Expand Up @@ -163,4 +179,3 @@ class App extends React.Component {
}
}
```

50 changes: 39 additions & 11 deletions dist/react-runkit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ module.exports =
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ return __webpack_require__(__webpack_require__.s = 8);
/******/ })
/************************************************************************/
/******/ ([
Expand Down Expand Up @@ -461,6 +461,23 @@ module.exports = warning;
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";


Object.defineProperty(exports, "__esModule", {
value: true
});

exports.default = function (text) {
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, '+');
};

/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function(process) {/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
Expand All @@ -485,23 +502,23 @@ if (process.env.NODE_ENV !== 'production') {
// By explicitly using `prop-types` you are opting into new development behavior.
// http://fb.me/prop-types-in-prod
var throwOnDirectAccess = true;
module.exports = __webpack_require__(10)(isValidElement, throwOnDirectAccess);
module.exports = __webpack_require__(11)(isValidElement, throwOnDirectAccess);
} else {
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = __webpack_require__(9)();
module.exports = __webpack_require__(10)();
}

/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))

/***/ }),
/* 6 */
/* 7 */
/***/ (function(module, exports) {

module.exports = require("react");

/***/ }),
/* 7 */
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
Expand All @@ -511,14 +528,20 @@ 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; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var React = __webpack_require__(6);
var PropTypes = __webpack_require__(5);
var React = __webpack_require__(7);
var PropTypes = __webpack_require__(6);

var Embed = function (_React$Component) {
_inherits(Embed, _React$Component);
Expand Down Expand Up @@ -564,6 +587,10 @@ var Embed = function (_React$Component) {
value: function componentDidMount() {
var element = this.refs.embed;
var options = _extends({}, this.props, { element: element });
if ('styles' in options) {
var encodedStyles = (0, _urlencode2.default)(options['styles']);
options['styles'] = encodedStyles;
}

this.embed = RunKit.createNotebook(options);
}
Expand Down Expand Up @@ -593,6 +620,7 @@ Embed.propTypes = {
minHeight: PropTypes.string,
packageTimestamp: PropTypes.string,
preamble: PropTypes.string,
styles: PropTypes.object,
onLoad: PropTypes.func,
onURLChanged: PropTypes.func,
onEvaluate: PropTypes.func
Expand All @@ -601,7 +629,7 @@ Embed.propTypes = {
module.exports = Embed;

/***/ }),
/* 8 */
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
Expand Down Expand Up @@ -670,7 +698,7 @@ module.exports = checkPropTypes;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))

/***/ }),
/* 9 */
/* 10 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
Expand Down Expand Up @@ -736,7 +764,7 @@ module.exports = function() {


/***/ }),
/* 10 */
/* 11 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
Expand All @@ -756,7 +784,7 @@ var invariant = __webpack_require__(2);
var warning = __webpack_require__(4);

var ReactPropTypesSecret = __webpack_require__(3);
var checkPropTypes = __webpack_require__(8);
var checkPropTypes = __webpack_require__(9);

module.exports = function(isValidElement, throwOnDirectAccess) {
/* global Symbol */
Expand Down
2 changes: 1 addition & 1 deletion dist/react-runkit.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -19,7 +19,7 @@
},
"main": "./dist/react-runkit.js",
"name": "react-runkit",
"version": "0.9.0",
"version": "0.9.1",
"description": "RunKit Embed Component.",
"repository": "https://github.com/runkitdev/react-runkit",
"author": "synchronous",
Expand Down
2 changes: 2 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ Embed.propTypes = {
minHeight: PropTypes.string,
packageTimestamp: PropTypes.string,
preamble: PropTypes.string,
theme: PropTypes.string,
gutterStyle: PropTypes.string,
onLoad: PropTypes.func,
onURLChanged: PropTypes.func,
onEvaluate: PropTypes.func
Expand Down