Expose almost raw VSCode api for editor panes

demo/src/features/customView.ts

@@ -1,7 +1,6 @@
-import { IDialogService } from 'vscode/services'
-import { registerCustomView, registerEditorPane, ViewContainerLocation } from '@codingame/monaco-vscode-views-service-override'
+import { IDialogService, EditorInput, ITelemetryService, IThemeService, IStorageService, createInstance } from 'vscode/services'
+import { registerCustomView, registerEditorPane, registerEditor, ViewContainerLocation, SimpleEditorPane, SimpleEditorInput, RegisteredEditorPriority, IEditorCloseHandler, ConfirmResult } from '@codingame/monaco-vscode-views-service-override'
 import * as monaco from 'monaco-editor'
-import iconUrl from '../Visual_Studio_Code_1.35_icon.svg?url'
 
 registerCustomView({
   id: 'custom-view',
@@ -20,7 +19,7 @@ registerCustomView({
     }
   },
   location: ViewContainerLocation.Panel,
-  icon: new URL(iconUrl, window.location.href).toString(),
+  icon: new URL('../Visual_Studio_Code_1.35_icon.svg', import.meta.url).toString(),
   actions: [{
     id: 'custom-action',
     title: 'Custom action',
@@ -43,20 +42,76 @@ registerCustomView({
   }]
 })
 
-const { CustomEditorInput } = registerEditorPane({
-  id: 'custom-editor-pane',
-  name: 'Custom editor pane',
-  renderBody (container) {
+class CustomEditorPane extends SimpleEditorPane {
+  static readonly ID = 'workbench.editors.customEditor'
+
+  constructor (
+    @ITelemetryService telemetryService: ITelemetryService, @IThemeService themeService: IThemeService, @IStorageService storageService: IStorageService
+  ) {
+    super(CustomEditorPane.ID, telemetryService, themeService, storageService)
+  }
+
+  initialize (): HTMLElement {
+    const container = document.createElement('div')
     container.style.display = 'flex'
     container.style.alignItems = 'center'
     container.style.justifyContent = 'center'
     container.innerHTML = 'This is a custom editor pane<br />You can render anything you want here'
+    return container
+  }
+
+  async renderInput (input: EditorInput): Promise<monaco.IDisposable> {
+    if (input.resource != null) {
+      this.container.innerHTML = 'Opened file: ' + input.resource.path
+    } else {
+      this.container.innerHTML = 'This is a custom editor pane<br />You can render anything you want here'
+    }
 
     return {
       dispose () {
       }
     }
   }
+}
+class CustomEditorInput extends SimpleEditorInput implements IEditorCloseHandler {
+  constructor (resource: monaco.Uri | undefined, @IDialogService private dialogService: IDialogService) {
+    super(resource)
+
+    this.closeHandler = this
+
+    this.setName('Custom editor pane input')
+  }
+
+  async confirm (): Promise<ConfirmResult> {
+    const { confirmed } = await this.dialogService.confirm({
+      message: 'Are you sure you want to close this INCREDIBLE editor pane?'
+    })
+    return confirmed ? ConfirmResult.DONT_SAVE : ConfirmResult.CANCEL
+  }
+
+  showConfirm (): boolean {
+    return true
+  }
+
+  get typeId (): string {
+    return CustomEditorPane.ID
+  }
+}
+
+registerEditorPane('custom-editor-pane', 'Custom editor pane', CustomEditorPane, [CustomEditorInput])
+
+registerEditor('*.customeditor', {
+  id: CustomEditorPane.ID,
+  label: 'Custom editor pane input',
+  priority: RegisteredEditorPriority.default
+}, {
+  singlePerResource: true
+}, {
+  async createEditorInput (editorInput) {
+    return {
+      editor: await createInstance(CustomEditorInput, editorInput.resource)
+    }
+  }
 })
 
 export { CustomEditorInput }

demo/src/features/filesystem.ts

@@ -49,6 +49,10 @@ $$
 $$`
 ))
 
+fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.customeditor'), `
+Custom Editor!`
+))
+
 fileSystemProvider.registerFile(new RegisteredMemoryFile(vscode.Uri.file('/tmp/test.css'), `
 h1 {
   color: DeepSkyBlue;

demo/src/main.ts

@@ -3,8 +3,8 @@ import * as monaco from 'monaco-editor'
 import { createConfiguredEditor, createModelReference } from 'vscode/monaco'
 import { registerFileSystemOverlay, HTMLFileSystemProvider } from '@codingame/monaco-vscode-files-service-override'
 import * as vscode from 'vscode'
-import { ILogService, StandaloneServices, IPreferencesService, IEditorService, IDialogService, getService } from 'vscode/services'
-import { ConfirmResult, Parts, isPartVisibile, setPartVisibility } from '@codingame/monaco-vscode-views-service-override'
+import { ILogService, StandaloneServices, IPreferencesService, IEditorService, IDialogService, getService, createInstance } from 'vscode/services'
+import { Parts, isPartVisibile, setPartVisibility } from '@codingame/monaco-vscode-views-service-override'
 import { defaultUserConfigurationFile } from '@codingame/monaco-vscode-configuration-service-override'
 import { defaultUserKeybindindsFile } from '@codingame/monaco-vscode-keybindings-service-override'
 import { clearStorage, remoteAuthority } from './setup'
@@ -151,17 +151,7 @@ document.querySelector('#keybindingsui')!.addEventListener('click', async () =>
 })
 
 document.querySelector('#customEditorPanel')!.addEventListener('click', async () => {
-  const input = new CustomEditorInput({
-    async confirm () {
-      const { confirmed } = await StandaloneServices.get(IDialogService).confirm({
-        message: 'Are you sure you want to close this INCREDIBLE editor pane?'
-      })
-      return confirmed ? ConfirmResult.DONT_SAVE : ConfirmResult.CANCEL
-    },
-    showConfirm () {
-      return true
-    }
-  })
+  const input = await createInstance(CustomEditorInput, undefined)
   let toggle = false
   const interval = window.setInterval(() => {
     const title = toggle ? 'Awesome editor pane' : 'Incredible editor pane'

demo/tsconfig.json

@@ -15,6 +15,7 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "baseUrl": ".",
+    "experimentalDecorators": true,
     "paths": {
       "vscode/vscode/*": ["../dist/main/vscode/src/*"],
       "vscode/*": ["../dist/main/*"]

src/lifecycle.ts

@@ -9,6 +9,7 @@ const renderWorkbenchEmitter = new Emitter<ServicesAccessor>()
 export const onRenderWorkbench = renderWorkbenchEmitter.event
 
 export const serviceInitializedBarrier = new Barrier()
+export const serviceInitializedEmitter = new Emitter<void>()
 
 interface ServiceInitializeParticipant {
   (accessor: ServicesAccessor): Promise<void>
@@ -45,6 +46,7 @@ export async function startup (instantiationService: IInstantiationService): Pro
   })
 
   serviceInitializedBarrier.open()
+  serviceInitializedEmitter.fire()
 
   instantiationService.invokeFunction(accessor => {
     const lifecycleService = accessor.get(ILifecycleService)