@monaco-editor/react - npm Package Compare versions

Comparing version 4.5.2 to 4.6.0

CHANGELOG.md

 ### Versions
 
+## 4.6.0
+
+###### _Oct 6, 2023_
+
+- Editor/DiffEditor: use `'use client'` on top of `Editor.tsx` and `DiffEditor.tsx`
+- loader: update `@monaco-editor/loader` version (1.4.0)
+- playground: use createRoot for bootstrapping
+
 ## 4.5.2
@@ -7,3 +15,3 @@
 
-- DiffEditor: aplly updated on `originalModelPath` and `modifiedModelPath` before `original` and `modified` props
+- DiffEditor: apply updated on `originalModelPath` and `modifiedModelPath` before `original` and `modified` props
 
@@ -10,0 +18,0 @@ ## 4.5.1

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var Dt=Object.create;var H=Object.defineProperty;var bt=Object.getOwnPropertyDescriptor;var kt=Object.getOwnPropertyNames;var St=Object.getPrototypeOf,Ot=Object.prototype.hasOwnProperty;var Tt=(t,e)=>{for(var r in e)H(t,r,{get:e[r],enumerable:!0})},rt=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of kt(e))!Ot.call(t,s)&&s!==r&&H(t,s,{get:()=>e[s],enumerable:!(o=bt(e,s))||o.enumerable});return t};var h=(t,e,r)=>(r=t!=null?Dt(St(t)):{},rt(e||!t||!t.__esModule?H(r,"default",{value:t,enumerable:!0}):r,t)),wt=t=>rt(H({},"__esModule",{value:!0}),t);var At={};Tt(At,{DiffEditor:()=>mt,Editor:()=>$,default:()=>jt,loader:()=>Rt.default,useMonaco:()=>Et});module.exports=wt(At);var Rt=h(require("@monaco-editor/loader"));var at=require("react");var f=h(require("react")),pt=h(require("@monaco-editor/loader"));var ut=require("react");var _=h(require("react"));var It={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}},W=It;var nt=h(require("react"));var Pt={container:{display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"}},ot=Pt;function Ut({children:t}){return nt.default.createElement("div",{style:ot.container},t)}var it=Ut;var ct=it;function Lt({width:t,height:e,isEditorReady:r,loading:o,_ref:s,className:E,wrapperProps:x}){return _.default.createElement("section",{style:{...W.wrapper,width:t,height:e},...x},!r&&_.default.createElement(ct,null,o),_.default.createElement("div",{ref:s,style:{...W.fullWidth,...!r&&W.hide},className:E}))}var st=Lt;var N=(0,ut.memo)(st);var ft=require("react");function vt(t){(0,ft.useEffect)(t,[])}var S=vt;var V=require("react");function Ht(t,e,r=!0){let o=(0,V.useRef)(!0);(0,V.useEffect)(o.current||!r?()=>{o.current=!1}:t,e)}var M=Ht;function b(){}function D(t,e,r,o){return Wt(t,o)||_t(t,e,r,o)}function Wt(t,e){return t.editor.getModel(dt(t,e))}function _t(t,e,r,o){return t.editor.createModel(e,r,o?dt(t,o):void 0)}function dt(t,e){return t.Uri.parse(e)}function Nt({original:t,modified:e,language:r,originalLanguage:o,modifiedLanguage:s,originalModelPath:E,modifiedModelPath:x,keepCurrentOriginalModel:O=!1,keepCurrentModifiedModel:j=!1,theme:g="light",loading:U="Loading...",options:C={},height:A="100%",width:q="100%",className:B,wrapperProps:G={},beforeMount:J=b,onMount:K=b}){let[y,T]=(0,f.useState)(!1),[w,d]=(0,f.useState)(!0),p=(0,f.useRef)(null),u=(0,f.useRef)(null),I=(0,f.useRef)(null),a=(0,f.useRef)(K),n=(0,f.useRef)(J),k=(0,f.useRef)(!1);S(()=>{let i=pt.default.init();return i.then(l=>(u.current=l)&&d(!1)).catch(l=>l?.type!=="cancelation"&&console.error("Monaco initialization: error:",l)),()=>p.current?P():i.cancel()}),M(()=>{if(p.current&&u.current){let i=p.current.getOriginalEditor(),l=D(u.current,t||"",o||r||"text",E||"");l!==i.getModel()&&i.setModel(l)}},[E],y),M(()=>{if(p.current&&u.current){let i=p.current.getModifiedEditor(),l=D(u.current,e||"",s||r||"text",x||"");l!==i.getModel()&&i.setModel(l)}},[x],y),M(()=>{let i=p.current.getModifiedEditor();i.getOption(u.current.editor.EditorOption.readOnly)?i.setValue(e||""):e!==i.getValue()&&(i.executeEdits("",[{range:i.getModel().getFullModelRange(),text:e||"",forceMoveMarkers:!0}]),i.pushUndoStop())},[e],y),M(()=>{p.current?.getModel()?.original.setValue(t||"")},[t],y),M(()=>{let{original:i,modified:l}=p.current.getModel();u.current.editor.setModelLanguage(i,o||r||"text"),u.current.editor.setModelLanguage(l,s||r||"text")},[r,o,s],y),M(()=>{u.current?.editor.setTheme(g)},[g],y),M(()=>{p.current?.updateOptions(C)},[C],y);let L=(0,f.useCallback)(()=>{if(!u.current)return;n.current(u.current);let i=D(u.current,t||"",o||r||"text",E||""),l=D(u.current,e||"",s||r||"text",x||"");p.current?.setModel({original:i,modified:l})},[r,e,s,t,o,E,x]),v=(0,f.useCallback)(()=>{!k.current&&I.current&&(p.current=u.current.editor.createDiffEditor(I.current,{automaticLayout:!0,...C}),L(),u.current?.editor.setTheme(g),T(!0),k.current=!0)},[C,g,L]);(0,f.useEffect)(()=>{y&&a.current(p.current,u.current)},[y]),(0,f.useEffect)(()=>{!w&&!y&&v()},[w,y,v]);function P(){let i=p.current?.getModel();O||i?.original?.dispose(),j||i?.modified?.dispose(),p.current?.dispose()}return f.default.createElement(N,{width:q,height:A,isEditorReady:y,loading:U,_ref:I,className:B,wrapperProps:G})}var lt=Nt;var mt=(0,at.memo)(lt);var Mt=require("react"),Z=h(require("@monaco-editor/loader"));function Vt(){let[t,e]=(0,Mt.useState)(Z.default.__getMonacoInstance());return S(()=>{let r;return t||(r=Z.default.init(),r.then(o=>{e(o)})),()=>r?.cancel()}),t}var Et=Vt;var gt=require("react");var c=h(require("react")),xt=h(require("@monaco-editor/loader"));var z=require("react");function zt(t){let e=(0,z.useRef)();return(0,z.useEffect)(()=>{e.current=t},[t]),e.current}var yt=zt;var F=new Map;function Ft({defaultValue:t,defaultLanguage:e,defaultPath:r,value:o,language:s,path:E,theme:x="light",line:O,loading:j="Loading...",options:g={},overrideServices:U={},saveViewState:C=!0,keepCurrentModel:A=!1,width:q="100%",height:B="100%",className:G,wrapperProps:J={},beforeMount:K=b,onMount:y=b,onChange:T,onValidate:w=b}){let[d,p]=(0,c.useState)(!1),[u,I]=(0,c.useState)(!0),a=(0,c.useRef)(null),n=(0,c.useRef)(null),k=(0,c.useRef)(null),L=(0,c.useRef)(y),v=(0,c.useRef)(K),P=(0,c.useRef)(),i=(0,c.useRef)(o),l=yt(E),tt=(0,c.useRef)(!1),Q=(0,c.useRef)(!1);S(()=>{let m=xt.default.init();return m.then(R=>(a.current=R)&&I(!1)).catch(R=>R?.type!=="cancelation"&&console.error("Monaco initialization: error:",R)),()=>n.current?ht():m.cancel()}),M(()=>{let m=D(a.current,t||o||"",e||s||"",E||r||"");m!==n.current?.getModel()&&(C&&F.set(l,n.current?.saveViewState()),n.current?.setModel(m),C&&n.current?.restoreViewState(F.get(E)))},[E],d),M(()=>{n.current?.updateOptions(g)},[g],d),M(()=>{!n.current||o===void 0||(n.current.getOption(a.current.editor.EditorOption.readOnly)?n.current.setValue(o):o!==n.current.getValue()&&(Q.current=!0,n.current.executeEdits("",[{range:n.current.getModel().getFullModelRange(),text:o,forceMoveMarkers:!0}]),n.current.pushUndoStop(),Q.current=!1))},[o],d),M(()=>{let m=n.current?.getModel();m&&s&&a.current?.editor.setModelLanguage(m,s)},[s],d),M(()=>{O!==void 0&&n.current?.revealLine(O)},[O],d),M(()=>{a.current?.editor.setTheme(x)},[x],d);let et=(0,c.useCallback)(()=>{if(!(!k.current||!a.current)&&!tt.current){v.current(a.current);let m=E||r,R=D(a.current,o||t||"",e||s||"",m||"");n.current=a.current?.editor.create(k.current,{model:R,automaticLayout:!0,...g},U),C&&n.current.restoreViewState(F.get(m)),a.current.editor.setTheme(x),p(!0),tt.current=!0}},[t,e,r,o,s,E,g,U,C,x]);(0,c.useEffect)(()=>{d&&L.current(n.current,a.current)},[d]),(0,c.useEffect)(()=>{!u&&!d&&et()},[u,d,et]),i.current=o,(0,c.useEffect)(()=>{d&&T&&(P.current?.dispose(),P.current=n.current?.onDidChangeModelContent(m=>{Q.current||T(n.current.getValue(),m)}))},[d,T]),(0,c.useEffect)(()=>{if(d){let m=a.current.editor.onDidChangeMarkers(R=>{let X=n.current.getModel()?.uri;if(X&&R.find(Y=>Y.path===X.path)){let Y=a.current.editor.getModelMarkers({resource:X});w?.(Y)}});return()=>{m?.dispose()}}return()=>{}},[d,w]);function ht(){P.current?.dispose(),A?C&&F.set(E,n.current.saveViewState()):n.current.getModel()?.dispose(),n.current.dispose()}return c.default.createElement(N,{width:q,height:B,isEditorReady:d,loading:j,_ref:k,className:G,wrapperProps:J})}var Ct=Ft;var $=(0,gt.memo)(Ct);var jt=$;0&&(module.exports={DiffEditor,Editor,loader,useMonaco});
+"use strict";var De=Object.create;var H=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var Se=Object.getPrototypeOf,Oe=Object.prototype.hasOwnProperty;var Te=(e,t)=>{for(var r in t)H(e,r,{get:t[r],enumerable:!0})},re=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ke(t))!Oe.call(e,s)&&s!==r&&H(e,s,{get:()=>t[s],enumerable:!(o=be(t,s))||o.enumerable});return e};var D=(e,t,r)=>(r=e!=null?De(Se(e)):{},re(t||!e||!e.__esModule?H(r,"default",{value:e,enumerable:!0}):r,e)),we=e=>re(H({},"__esModule",{value:!0}),e);var Ae={};Te(Ae,{DiffEditor:()=>me,Editor:()=>$,default:()=>je,loader:()=>Re.default,useMonaco:()=>Ee});module.exports=we(Ae);var Re=D(require("@monaco-editor/loader"));var ae=require("react");var f=D(require("react")),pe=D(require("@monaco-editor/loader"));var ue=require("react");var _=D(require("react"));var Ie={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}},W=Ie;var ne=D(require("react"));var Pe={container:{display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"}},oe=Pe;function Le({children:e}){return ne.default.createElement("div",{style:oe.container},e)}var ie=Le;var ce=ie;function Ue({width:e,height:t,isEditorReady:r,loading:o,_ref:s,className:E,wrapperProps:x}){return _.default.createElement("section",{style:{...W.wrapper,width:e,height:t},...x},!r&&_.default.createElement(ce,null,o),_.default.createElement("div",{ref:s,style:{...W.fullWidth,...!r&&W.hide},className:E}))}var se=Ue;var N=(0,ue.memo)(se);var fe=require("react");function ve(e){(0,fe.useEffect)(e,[])}var O=ve;var V=require("react");function He(e,t,r=!0){let o=(0,V.useRef)(!0);(0,V.useEffect)(o.current||!r?()=>{o.current=!1}:e,t)}var M=He;function k(){}function b(e,t,r,o){return We(e,o)||_e(e,t,r,o)}function We(e,t){return e.editor.getModel(de(e,t))}function _e(e,t,r,o){return e.editor.createModel(t,r,o?de(e,o):void 0)}function de(e,t){return e.Uri.parse(t)}function Ne({original:e,modified:t,language:r,originalLanguage:o,modifiedLanguage:s,originalModelPath:E,modifiedModelPath:x,keepCurrentOriginalModel:R=!1,keepCurrentModifiedModel:j=!1,theme:g="light",loading:L="Loading...",options:C={},height:A="100%",width:q="100%",className:B,wrapperProps:G={},beforeMount:J=k,onMount:K=k}){let[y,T]=(0,f.useState)(!1),[w,d]=(0,f.useState)(!0),p=(0,f.useRef)(null),u=(0,f.useRef)(null),I=(0,f.useRef)(null),a=(0,f.useRef)(K),n=(0,f.useRef)(J),S=(0,f.useRef)(!1);O(()=>{let i=pe.default.init();return i.then(l=>(u.current=l)&&d(!1)).catch(l=>l?.type!=="cancelation"&&console.error("Monaco initialization: error:",l)),()=>p.current?P():i.cancel()}),M(()=>{if(p.current&&u.current){let i=p.current.getOriginalEditor(),l=b(u.current,e||"",o||r||"text",E||"");l!==i.getModel()&&i.setModel(l)}},[E],y),M(()=>{if(p.current&&u.current){let i=p.current.getModifiedEditor(),l=b(u.current,t||"",s||r||"text",x||"");l!==i.getModel()&&i.setModel(l)}},[x],y),M(()=>{let i=p.current.getModifiedEditor();i.getOption(u.current.editor.EditorOption.readOnly)?i.setValue(t||""):t!==i.getValue()&&(i.executeEdits("",[{range:i.getModel().getFullModelRange(),text:t||"",forceMoveMarkers:!0}]),i.pushUndoStop())},[t],y),M(()=>{p.current?.getModel()?.original.setValue(e||"")},[e],y),M(()=>{let{original:i,modified:l}=p.current.getModel();u.current.editor.setModelLanguage(i,o||r||"text"),u.current.editor.setModelLanguage(l,s||r||"text")},[r,o,s],y),M(()=>{u.current?.editor.setTheme(g)},[g],y),M(()=>{p.current?.updateOptions(C)},[C],y);let U=(0,f.useCallback)(()=>{if(!u.current)return;n.current(u.current);let i=b(u.current,e||"",o||r||"text",E||""),l=b(u.current,t||"",s||r||"text",x||"");p.current?.setModel({original:i,modified:l})},[r,t,s,e,o,E,x]),v=(0,f.useCallback)(()=>{!S.current&&I.current&&(p.current=u.current.editor.createDiffEditor(I.current,{automaticLayout:!0,...C}),U(),u.current?.editor.setTheme(g),T(!0),S.current=!0)},[C,g,U]);(0,f.useEffect)(()=>{y&&a.current(p.current,u.current)},[y]),(0,f.useEffect)(()=>{!w&&!y&&v()},[w,y,v]);function P(){let i=p.current?.getModel();R||i?.original?.dispose(),j||i?.modified?.dispose(),p.current?.dispose()}return f.default.createElement(N,{width:q,height:A,isEditorReady:y,loading:L,_ref:I,className:B,wrapperProps:G})}var le=Ne;var me=(0,ae.memo)(le);var Me=require("react"),Z=D(require("@monaco-editor/loader"));function Ve(){let[e,t]=(0,Me.useState)(Z.default.__getMonacoInstance());return O(()=>{let r;return e||(r=Z.default.init(),r.then(o=>{t(o)})),()=>r?.cancel()}),e}var Ee=Ve;var ge=require("react");var c=D(require("react")),xe=D(require("@monaco-editor/loader"));var z=require("react");function ze(e){let t=(0,z.useRef)();return(0,z.useEffect)(()=>{t.current=e},[e]),t.current}var ye=ze;var F=new Map;function Fe({defaultValue:e,defaultLanguage:t,defaultPath:r,value:o,language:s,path:E,theme:x="light",line:R,loading:j="Loading...",options:g={},overrideServices:L={},saveViewState:C=!0,keepCurrentModel:A=!1,width:q="100%",height:B="100%",className:G,wrapperProps:J={},beforeMount:K=k,onMount:y=k,onChange:T,onValidate:w=k}){let[d,p]=(0,c.useState)(!1),[u,I]=(0,c.useState)(!0),a=(0,c.useRef)(null),n=(0,c.useRef)(null),S=(0,c.useRef)(null),U=(0,c.useRef)(y),v=(0,c.useRef)(K),P=(0,c.useRef)(),i=(0,c.useRef)(o),l=ye(E),ee=(0,c.useRef)(!1),Q=(0,c.useRef)(!1);O(()=>{let m=xe.default.init();return m.then(h=>(a.current=h)&&I(!1)).catch(h=>h?.type!=="cancelation"&&console.error("Monaco initialization: error:",h)),()=>n.current?he():m.cancel()}),M(()=>{let m=b(a.current,e||o||"",t||s||"",E||r||"");m!==n.current?.getModel()&&(C&&F.set(l,n.current?.saveViewState()),n.current?.setModel(m),C&&n.current?.restoreViewState(F.get(E)))},[E],d),M(()=>{n.current?.updateOptions(g)},[g],d),M(()=>{!n.current||o===void 0||(n.current.getOption(a.current.editor.EditorOption.readOnly)?n.current.setValue(o):o!==n.current.getValue()&&(Q.current=!0,n.current.executeEdits("",[{range:n.current.getModel().getFullModelRange(),text:o,forceMoveMarkers:!0}]),n.current.pushUndoStop(),Q.current=!1))},[o],d),M(()=>{let m=n.current?.getModel();m&&s&&a.current?.editor.setModelLanguage(m,s)},[s],d),M(()=>{R!==void 0&&n.current?.revealLine(R)},[R],d),M(()=>{a.current?.editor.setTheme(x)},[x],d);let te=(0,c.useCallback)(()=>{if(!(!S.current||!a.current)&&!ee.current){v.current(a.current);let m=E||r,h=b(a.current,o||e||"",t||s||"",m||"");n.current=a.current?.editor.create(S.current,{model:h,automaticLayout:!0,...g},L),C&&n.current.restoreViewState(F.get(m)),a.current.editor.setTheme(x),R!==void 0&&n.current.revealLine(R),p(!0),ee.current=!0}},[e,t,r,o,s,E,g,L,C,x,R]);(0,c.useEffect)(()=>{d&&U.current(n.current,a.current)},[d]),(0,c.useEffect)(()=>{!u&&!d&&te()},[u,d,te]),i.current=o,(0,c.useEffect)(()=>{d&&T&&(P.current?.dispose(),P.current=n.current?.onDidChangeModelContent(m=>{Q.current||T(n.current.getValue(),m)}))},[d,T]),(0,c.useEffect)(()=>{if(d){let m=a.current.editor.onDidChangeMarkers(h=>{let X=n.current.getModel()?.uri;if(X&&h.find(Y=>Y.path===X.path)){let Y=a.current.editor.getModelMarkers({resource:X});w?.(Y)}});return()=>{m?.dispose()}}return()=>{}},[d,w]);function he(){P.current?.dispose(),A?C&&F.set(E,n.current.saveViewState()):n.current.getModel()?.dispose(),n.current.dispose()}return c.default.createElement(N,{width:q,height:B,isEditorReady:d,loading:j,_ref:S,className:G,wrapperProps:J})}var Ce=Fe;var $=(0,ge.memo)(Ce);var je=$;0&&(module.exports={DiffEditor,Editor,loader,useMonaco});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@monaco-editor/react",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "description": "Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins",
@@ -62,4 +62,4 @@ "author": "Suren Atoyan <[e-mail]>",
   "dependencies": {
-    "@monaco-editor/loader": "^1.3.3"
+    "@monaco-editor/loader": "^1.4.0"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

151769

increased by0.44%

Dependency changes

• Updated@monaco-editor/loader@^1.4.0