UNPKG

mdx-deck-live-code

Version:

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

3 lines (2 loc) • 3.08 kB
import{createElement as t,PureComponent as e}from"react";import{LiveEditor as n,LiveProvider as o,LiveError as i,LivePreview as r}from"react-live";import s,{withTheme as c}from"styled-components";var d=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"]),a="undefined"!=typeof window&&"navigator"in window&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),u=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&&(!a||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,o=n.className,i=function(t,e){var n={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&-1===e.indexOf(o)&&(n[o]=t[o]);return n}(n,["className"]);return t("div",{onFocus:this.focusEditor,onClick:this.focusEditor,onBlur:this.blurEditor,onKeyDown:this.blurOnKeyCombo,className:o},t(l,Object.assign({contentEditable:e},i)))},n}(e),l=s(n)(d,function(t){return t.theme.liveCode&&t.theme.liveCode.editor}),f=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"]),h=Object.freeze(["\n\twidth: 50%;\n\t",";\n"]),m=Object.freeze(["\n\twidth: 50%;\n\tbackground: white;\n\t",";\n"]),p=Object.freeze(["\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tposition: relative;\n\t\n\t","\n\t"," \n"]),v=Object.freeze(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding: ",";\n\t",";\n"]),b=c(function(e){var n=e.size;void 0===n&&(n="medium");var i=e.errors;void 0===i&&(i=!0);var r=e.title,s=e.editorProps,c=e.previewProps,d=e.errorProps;return t(o,Object.assign({code:e.code},e.providerProps),t(w,{size:n},r&&!("fullscreen"===n)&&t("p",null,r),t(g,{size:n},t(y,Object.assign({},c)),t(O,Object.assign({},s)),i&&t(z,Object.assign({},d)))))}),w=s.div(v,function(t){return"fullscreen"===t.size?"0":"1em"},function(t){switch(t.size){case"small":return"width: 60vw; height: 70vh";case"medium":return"width: 80vw; height: 90vh";case"large":case"fullscreen":return"width: 100vw; height: 100vh;"}}),g=s.div(p,function(t){return"fullscreen"!==t.size&&"box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);\n\t\tborder-radius: 0.25rem;"},function(t){return t.theme.liveCode&&t.theme.liveCode.container}),y=s(r)(m,function(t){return t.theme.liveCode&&t.theme.liveCode.preview}),O=s(u)(h,function(t){return t.theme.liveCode&&t.theme.liveCode.editor}),z=s(i)(f,function(t){return t.theme.liveCode&&t.theme.liveCode.error});export{b as LiveCode}; //# sourceMappingURL=index.es.js.map