react-editor-z
Version:
React wrapper for @monaco-editor. Default json.
2 lines (1 loc) • 7.03 kB
JavaScript
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@monaco-editor/react"),require("react"),require("styled-components")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/react","react","styled-components"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).CodeEditor={},n.Editor,n.React,n.styled)}(this,function(n,e,t,r){"use strict";var o=function(){return o=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},o.apply(this,arguments)};function i(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var a,l,u,c,d=function(n){var e=n.size,r=void 0===e?16:e,o=n.color,i=void 0===o?"#0078d4":o;return t.createElement("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:i},t.createElement("path",{d:"M19 21H9c-1.1 0-2-.9-2-2V7h2v12h10v2zm-4-4H5V5h10v12z"}))},s=function(n){var e=n.size,r=void 0===e?16:e,o=n.color,i=void 0===o?"#28a745":o;return t.createElement("svg",{width:r,height:r,viewBox:"0 0 24 24",fill:i},t.createElement("path",{d:"M3 3h18v2H3V3zm0 16h18v2H3v-2zm0-8h18v2H3v-2z"}))},p=r.div(a||(a=i(["\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n"],["\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n"]))),f=r.div(l||(l=i(["\n display: flex;\n align-items: center;\n padding: 0 12px;\n height: 40px;\n background-color: #3883fa;\n color: white;\n\n ","\n"],["\n display: flex;\n align-items: center;\n padding: 0 12px;\n height: 40px;\n background-color: #3883fa;\n color: white;\n\n ","\n"])),function(n){return n.readOnly&&"\n opacity: 0.65;\n cursor: default;\n pointer-events: none !important;\n "}),b=r.button(u||(u=i(["\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.5);\n background: rgba(255, 255, 255, 0.15);\n color: white;\n cursor: pointer;\n font-size: 13px;\n transition: all 0.2s;\n outline: none;\n\n &:hover {\n background: rgba(255, 255, 255, 0.3);\n }\n\n &:active {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n }\n"],["\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 4px;\n border: 1px solid rgba(255, 255, 255, 0.5);\n background: rgba(255, 255, 255, 0.15);\n color: white;\n cursor: pointer;\n font-size: 13px;\n transition: all 0.2s;\n outline: none;\n\n &:hover {\n background: rgba(255, 255, 255, 0.3);\n }\n\n &:active {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n }\n"]))),h=r.div(c||(c=i(["\n width: 100%;\n height: 100%;\n\n ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 8px;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 8px;\n border: 2px solid #f1f1f1;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n }\n"],["\n width: 100%;\n height: 100%;\n\n ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 8px;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #c1c1c1;\n border-radius: 8px;\n border: 2px solid #f1f1f1;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n }\n"])));function v(n,e){var r=t.useRef(null);return t.useCallback(function(){for(var t=[],o=0;o<arguments.length;o++)t[o]=arguments[o];r.current&&clearTimeout(r.current),r.current=setTimeout(function(){n.apply(void 0,t)},e)},[n,e])}function g(){var n=t.useRef(!1);return t.useEffect(function(){return n.current=!0,function(){n.current=!1}},[]),t.useCallback(function(){return n.current},[])}Object.defineProperty(n,"useMonaco",{enumerable:!0,get:function(){return e.useMonaco}}),n.default=function(n){var r=n.title,i=n.language,a=void 0===i?"json":i,l=n.value,u=n.options,c=n.readOnly,m=void 0!==c&&c,x=n.rawJson,y=void 0!==x&&x,w=n.style,O=n.getRefs,k=n.onChange,E=n.debounceMs,z=void 0===E?300:E,C=n.tabSize,S=void 0===C?4:C,j=n.theme,J=void 0===j?"vs-light":j,M=n.autoResize,H=void 0!==M&&M,P=n.labels,R=n.icons,N=n.showHeader,T=void 0===N||N,q=function(n,e){var t={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0&&(t[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(n);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(n,r[o])&&(t[r[o]]=n[r[o]])}return t}(n,["title","language","value","options","readOnly","rawJson","style","getRefs","onChange","debounceMs","tabSize","theme","autoResize","labels","icons","showHeader"]),D=t.useState(""),F=D[0],L=D[1],V=t.useState(300),A=V[0],B=V[1],I=t.useRef(null),W=g(),_="json"===a.toLowerCase(),G=v(function(n,e){return null==k?void 0:k(n,e)},z);return t.useEffect(function(){W()&&L(function(n){if(!n)return"";if(_)try{return JSON.stringify(JSON.parse(n),null,S)}catch(e){return n}return n}(l))},[W,S]),t.createElement(p,{style:o({margin:"20px auto",maxWidth:1200,height:"".concat(H?A+(T?40:0):300+(T?40:0),"px"),borderRadius:10,overflow:"hidden"},w)},T&&t.createElement(f,{readOnly:m},t.createElement("span",null,r||"Json Code Editor"),t.createElement("div",{style:{marginLeft:"auto",display:"flex",gap:8}},t.createElement(b,{onClick:function(){return navigator.clipboard.writeText(F)},title:(null==P?void 0:P.copy)||"Copy"},(null==R?void 0:R.copy)||t.createElement(d,{size:16,color:"#0078d4"}),t.createElement("span",null,(null==P?void 0:P.copy)||"Copy")),_&&t.createElement(b,{onClick:function(){var n,e;return null===(e=null===(n=I.current)||void 0===n?void 0:n.getAction("editor.action.formatDocument"))||void 0===e?void 0:e.run()},title:(null==P?void 0:P.formatJson)||"Format JSON"},(null==R?void 0:R.formatJson)||t.createElement(s,{size:16,color:"#28a745"}),t.createElement("span",null,(null==P?void 0:P.formatJson)||"Format JSON")))),t.createElement(h,null,t.createElement(e,o({theme:J,width:"100%",height:"100%",language:a,value:F,onChange:function(n){var e,t,r=n||"";if(L(r),r){if(_)try{JSON.parse(r),G(r,!1)}catch(n){G(y?r:void 0,!y)}else G(r,!1);if(H&&I.current){var o=(null===(t=(e=I.current).getContentHeight)||void 0===t?void 0:t.call(e))||18*r.split("\n").length+30;B(Math.max(100,Math.min(o,800)))}}else G("",!1)},options:o({cursorStyle:"line",formatOnPaste:!0,formatOnType:!0,renderLineHighlight:"none",wordWrap:"on",autoIndent:"full",readOnly:m||(null==u?void 0:u.readOnly),fontSize:14,tabSize:S,fontFamily:"Consolas, 'Courier New', monospace",minimap:{enabled:!1}},u),onMount:function(n){var e;I.current=n,null===(e=n.getAction("editor.action.formatDocument"))||void 0===e||e.run(),null==O||O(I)}},q))))},n.useDebounceCallback=v,n.useMounted=g,Object.defineProperty(n,"__esModule",{value:!0})});