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