UNPKG

mdx-deck-live-code

Version:

A component for mdx-deck for live coding directly in your slides. 🤯

3 lines (2 loc) • 3.21 kB
var e,t=require("react"),n=require("react-live"),r=require("styled-components"),i=(e=r)&&"object"==typeof e&&"default"in e?e.default:e;var o=Object.freeze(["\n\theight: 100%;\n\tmax-height: 100vh;\n\toverflow: auto;\n\tfont-size: 0.7em;\n\twidth: 100%;\n\tpadding-bottom: 5rem !important;\n\t",";\n"]),c="undefined"!=typeof window&&"navigator"in window&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),s=function(e){function n(){var t=this;e.apply(this,arguments),this.state={focusEditor:!0},this.focusEditor=function(){t.setState({focusEditor:!0})},this.blurEditor=function(){t.setState({focusEditor:!1})},this.blurOnKeyCombo=function(e){("Escape"===e.key||"M"===e.key&&e.ctrlKey&&(!c||e.shiftKey))&&t.blurEditor()}}return e&&(n.__proto__=e),(n.prototype=Object.create(e&&e.prototype)).constructor=n,n.prototype.render=function(){var e=this.state.focusEditor,n=this.props,r=n.className,i=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&-1===t.indexOf(r)&&(n[r]=e[r]);return n}(n,["className"]);return t.createElement("div",{onFocus:this.focusEditor,onClick:this.focusEditor,onBlur:this.blurEditor,onKeyDown:this.blurOnKeyCombo,className:r},t.createElement(a,Object.assign({contentEditable:e},i)))},n}(t.PureComponent),a=i(n.LiveEditor)(o,function(e){return e.theme.liveCode&&e.theme.liveCode.editor}),d=Object.freeze(["\n\tposition: absolute;\n\tbottom: 0;\n\twidth: 100%;\n\tpadding: 0.125em;\n\tbackground: #280000;\n\tborder: 2px solid #5c0000;\n\tcolor #ff8080;\n\tfont-family: monospace;\n\tfont-size: 0.75em;\n\theight: 5rem;\n\toverflow-y: auto;\n\tresize: vertical;\n\t"," \n"]),l=Object.freeze(["\n\twidth: 50%;\n\t",";\n"]),u=Object.freeze(["\n\twidth: 50%;\n\tbackground: white;\n\t",";\n"]),h=Object.freeze(["\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tposition: relative;\n\t\n\t","\n\t"," \n"]),f=Object.freeze(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding: ",";\n\t",";\n"]),m=r.withTheme(function(e){var r=e.size;void 0===r&&(r="medium");var i=e.errors;void 0===i&&(i=!0);var o=e.title,c=e.editorProps,s=e.previewProps,a=e.errorProps;return t.createElement(n.LiveProvider,Object.assign({code:e.code},e.providerProps),t.createElement(v,{size:r},o&&!("fullscreen"===r)&&t.createElement("p",null,o),t.createElement(p,{size:r},t.createElement(b,Object.assign({},s)),t.createElement(w,Object.assign({},c)),i&&t.createElement(E,Object.assign({},a)))))}),v=i.div(f,function(e){return"fullscreen"===e.size?"0":"1em"},function(e){switch(e.size){case"small":return"width: 60vw; height: 70vh";case"medium":return"width: 80vw; height: 90vh";case"large":case"fullscreen":return"width: 100vw; height: 100vh;"}}),p=i.div(h,function(e){return"fullscreen"!==e.size&&"box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);\n\t\tborder-radius: 0.25rem;"},function(e){return e.theme.liveCode&&e.theme.liveCode.container}),b=i(n.LivePreview)(u,function(e){return e.theme.liveCode&&e.theme.liveCode.preview}),w=i(s)(l,function(e){return e.theme.liveCode&&e.theme.liveCode.editor}),E=i(n.LiveError)(d,function(e){return e.theme.liveCode&&e.theme.liveCode.error});exports.LiveCode=m; //# sourceMappingURL=index.js.map