react-code-canvas
Version:
A browser-based canvas for rendering React components at runtime
2 lines (1 loc) • 1.62 kB
JavaScript
"use strict";var e=require("./index-CYl4a4CX.js"),t=require("react"),r=require("prism-react-renderer"),a=require("react-simple-code-editor");require("sucrase"),require("react-helmet-async");const n=({children:a,language:n="jsx",theme:s=e.theme,Prism:l=r.Prism,padding:i=10,noWrapper:c,noWrap:u,className:m,style:g,...o})=>t.createElement(r.Highlight,{code:a||"",language:n,prism:l,theme:s},({className:r,style:a,tokens:n,getLineProps:s,getTokenProps:l})=>{const p=n.map((r,a)=>{const{key:n,...i}=s({line:r,key:a});return t.createElement(t.Fragment,{key:n},t.createElement("span",i,r.map((r,a)=>{const{key:n,...s}=l({token:r,key:a});return t.createElement("span",e._extends({key:n},s))})),"\n")});if(c)return t.createElement(t.Fragment,null,p);const d={margin:0,padding:i,whiteSpace:u?"pre":"pre-wrap"};return t.createElement("pre",e._extends({className:m?`${r} ${m}`:r,style:{...a,...d,...g}},o),p)}),s=a.default||a,l=({defaultValue:r,value:a,language:l="jsx",theme:i=e.theme,Prism:c,highlight:u,padding:m=10,onChange:g,...o})=>{const[p,d]=t.useState(r||""),h=void 0!==a,y=t.useCallback(e=>t.createElement(n,{language:l,theme:i,Prism:c,noWrapper:!0},e),[l,i,c]),k=t.useRef(g);k.current=g;const E=t.useCallback(e=>{var t;h||d(e),null===(t=k.current)||void 0===t||t.call(k,e)},[h]),v=t.useMemo(()=>({...i.plain,...o.style}),[i.plain,o.style]);return t.createElement(s,e._extends({},o,{highlight:u||y,padding:m,value:h?a:p,onValueChange:E,style:v}))};exports.LiveEditor=r=>{const{code:a,language:n,theme:s,onChange:i}=e.useLiveContext();return t.createElement(l,e._extends({value:a,language:n,theme:s,onChange:i},r))};