@@ -9,11 +9,15 @@ import type * as MonacoTypes from "monaco-editor/esm/vs/editor/editor.api";
99import { configureMonacoYaml } from "monaco-yaml" ;
1010import React , { useMemo , useRef } from "react" ;
1111
12+ import { RpcApi } from "@/app/store/wshclientapi" ;
13+ import { TabRpcClient } from "@/app/store/wshrpcutil" ;
14+ import { makeConnRoute } from "@/util/util" ;
1215import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker" ;
1316import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker" ;
1417import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker" ;
1518import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker" ;
1619import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker" ;
20+ import { SchemaEndpoints , getSchemaEndpointInfo } from "./schemaendpoints" ;
1721import ymlWorker from "./yamlworker?worker" ;
1822
1923import "./codeeditor.scss" ;
@@ -42,48 +46,45 @@ window.MonacoEnvironment = {
4246 } ,
4347} ;
4448
45- export function loadMonaco ( ) {
49+ export async function loadMonaco ( ) {
4650 loader . config ( { paths : { vs : "monaco" } } ) ;
47- loader
48- . init ( )
49- . then ( ( ) => {
50- monaco . editor . defineTheme ( "wave-theme-dark" , {
51- base : "vs-dark" ,
52- inherit : true ,
53- rules : [ ] ,
54- colors : {
55- "editor.background" : "#00000000" ,
56- "editorStickyScroll.background" : "#00000055" ,
57- "minimap.background" : "#00000077" ,
58- focusBorder : "#00000000" ,
59- } ,
60- } ) ;
61- monaco . editor . defineTheme ( "wave-theme-light" , {
62- base : "vs" ,
63- inherit : true ,
64- rules : [ ] ,
65- colors : {
66- "editor.background" : "#fefefe" ,
67- focusBorder : "#00000000" ,
68- } ,
69- } ) ;
70- configureMonacoYaml ( monaco , {
71- validate : true ,
72- schemas : [ ] ,
73- } ) ;
74- // Disable default validation errors for typescript and javascript
75- monaco . languages . typescript . typescriptDefaults . setDiagnosticsOptions ( {
76- noSemanticValidation : true ,
77- } ) ;
78- monaco . languages . json . jsonDefaults . setDiagnosticsOptions ( {
79- validate : true ,
80- allowComments : false , // Set to true if you want to allow comments in JSON
81- schemas : [ ] , // You can specify JSON schemas here if needed
82- } ) ;
83- } )
84- . catch ( ( e ) => {
85- console . error ( "error loading monaco" , e ) ;
86- } ) ;
51+ await loader . init ( ) ;
52+
53+ monaco . editor . defineTheme ( "wave-theme-dark" , {
54+ base : "vs-dark" ,
55+ inherit : true ,
56+ rules : [ ] ,
57+ colors : {
58+ "editor.background" : "#00000000" ,
59+ "editorStickyScroll.background" : "#00000055" ,
60+ "minimap.background" : "#00000077" ,
61+ focusBorder : "#00000000" ,
62+ } ,
63+ } ) ;
64+ monaco . editor . defineTheme ( "wave-theme-light" , {
65+ base : "vs" ,
66+ inherit : true ,
67+ rules : [ ] ,
68+ colors : {
69+ "editor.background" : "#fefefe" ,
70+ focusBorder : "#00000000" ,
71+ } ,
72+ } ) ;
73+ configureMonacoYaml ( monaco , {
74+ validate : true ,
75+ schemas : [ ] ,
76+ } ) ;
77+ // Disable default validation errors for typescript and javascript
78+ monaco . languages . typescript . typescriptDefaults . setDiagnosticsOptions ( {
79+ noSemanticValidation : true ,
80+ } ) ;
81+ const schemas = await Promise . all ( SchemaEndpoints . map ( ( endpoint ) => getSchemaEndpointInfo ( endpoint ) ) ) ;
82+ monaco . languages . json . jsonDefaults . setDiagnosticsOptions ( {
83+ validate : true ,
84+ allowComments : false , // Set to true if you want to allow comments in JSON
85+ enableSchemaRequest : true ,
86+ schemas,
87+ } ) ;
8788}
8889
8990function defaultEditorOptions ( ) : MonacoTypes . editor . IEditorOptions {
@@ -125,6 +126,7 @@ export function CodeEditor({ blockId, text, language, filename, meta, onChange,
125126 const wordWrap = useOverrideConfigAtom ( blockId , "editor:wordwrap" ) ?? false ;
126127 const fontSize = boundNumber ( useOverrideConfigAtom ( blockId , "editor:fontsize" ) , 6 , 64 ) ;
127128 const theme = "wave-theme-dark" ;
129+ const [ absPath , setAbsPath ] = React . useState ( "" ) ;
128130
129131 React . useEffect ( ( ) => {
130132 return ( ) => {
@@ -135,6 +137,24 @@ export function CodeEditor({ blockId, text, language, filename, meta, onChange,
135137 } ;
136138 } , [ ] ) ;
137139
140+ React . useEffect ( ( ) => {
141+ const inner = async ( ) => {
142+ try {
143+ const fileInfo = await RpcApi . RemoteFileJoinCommand ( TabRpcClient , [ filename ] , {
144+ route : makeConnRoute ( meta . connection ?? "" ) ,
145+ } ) ;
146+ setAbsPath ( `${ fileInfo . dir } ${ fileInfo . name } ) ;
147+ } catch ( e ) {
148+ setAbsPath ( filename ) ;
149+ }
150+ } ;
151+ inner ( ) ;
152+ } , [ filename ] ) ;
153+
154+ React . useEffect ( ( ) => {
155+ console . log ( "abspath is" , absPath ) ;
156+ } , [ absPath ] ) ;
157+
138158 function handleEditorChange ( text : string , ev : MonacoTypes . editor . IModelContentChangedEvent ) {
139159 if ( onChange ) {
140160 onChange ( text ) ;
@@ -165,7 +185,7 @@ export function CodeEditor({ blockId, text, language, filename, meta, onChange,
165185 options = { editorOpts }
166186 onChange = { handleEditorChange }
167187 onMount = { handleEditorOnMount }
168- path = { filename }
188+ path = { absPath }
169189 language = { language }
170190 />
171191 </ div >
0 commit comments