Code Editor [intermediate]

[PaperPrototype]

• Get monaco editor working
• Opening files from the OPFS File Viewer (related File Viewer [intermediate / advanced]  #2)
• Editing and saving files to OPFS
• Intellisense across files (It should work automatically as long as you give appropriate uri's to each TextModel)
  • https://stackoverflow.com/questions/61724573/how-to-create-a-text-model-instance-manually-in-monaco-editor
  • rather than loading all the code you can load only the types (eg. a header file)
    • https://github.com/DefinitelyTyped/DefinitelyTyped
    • https://stackoverflow.com/questions/73936684/performant-way-to-load-2000-ts-models-into-monaco-editor-for-intellisense

[PaperPrototype]

It should be working but for some reason intellisense isn't showing the typescript types of code when hovering...

[PaperPrototype]

https://medium.com/@inquisitivebynature/web-based-ide-with-react-microsoft-monaco-editor-5ad5eaebaf92

[PaperPrototype]

https://stackoverflow.com/questions/69780709/how-can-i-add-auto-completion-to-a-browser-based-editor-using-monaco

[PaperPrototype]

How to "...add aliases to the 'paths' option? (2792)" when import syntax is throwing errors.

microsoft/monaco-editor#1926

[PaperPrototype]

How to use addExtraLib in Monaco with an external type definition
https://stackoverflow.com/questions/43058191/how-to-use-addextralib-in-monaco-with-an-external-type-definition

[PaperPrototype]

FINALLY! So after looking at the last stackoverflow I realized I could test different things out in the monaco playground. After messing around for about 5 minutes I managed to get it working :)))

// compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    // typeRoots: ["/files", "/files/src"]
});

// extra libraries
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    `export declare function next() : string`,
    '/files/external/index.d.ts');

monaco.languages.typescript.typescriptDefaults.addExtraLib(
    `export declare function next() : string`,
    '/files/src/lib/index.d.ts');

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false
})

var jsCode = `
import * as x from "/files/external"
const t1 : string = x.dnext();

import * as y from "/files/src/lib"
const t2 : string = y.dnext();`;

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(jsCode, "typescript", new monaco.Uri().with({path:"/files/main.tsx"})), 
});