Dispatch 'UNSTABLE_editor:extensions' event on 'editor:extension-loaded' (#16611)

GitOrigin-RevId: a1d93330a7633c6d5870e2c368ab45a4a586db35

services/web/frontend/js/features/source-editor/extensions/third-party-extensions.ts

@@ -1,5 +1,16 @@
-import type { Extension } from '@codemirror/state'
+import { Compartment, type Extension } from '@codemirror/state'
 import CodeMirror, { CodeMirrorVim } from './bundle'
+import { ViewPlugin } from '@codemirror/view'
+
+const thirdPartyExtensionsConf = new Compartment()
+
+const dispatchEvent = (extensions: Extension[]) => {
+  window.dispatchEvent(
+    new CustomEvent('UNSTABLE_editor:extensions', {
+      detail: { CodeMirror, CodeMirrorVim, extensions },
+    })
+  )
+}
 
 /**
  * A custom extension that allows additional CodeMirror extensions to be provided by external code,
@@ -8,11 +19,7 @@ import CodeMirror, { CodeMirrorVim } from './bundle'
 export const thirdPartyExtensions = (): Extension => {
   const extensions: Extension[] = []
 
-  window.dispatchEvent(
+  dispatchEvent(extensions)
-    new CustomEvent('UNSTABLE_editor:extensions', {
-      detail: { CodeMirror, CodeMirrorVim, extensions },
-    })
-  )
 
   Object.defineProperty(window, 'UNSTABLE_editorHelp', {
     writable: false,
@@ -42,5 +49,25 @@ window.addEventListener("UNSTABLE_editor:extensions", function(evt) {
 });`,
   })
 
-  return extensions
+  return [thirdPartyExtensionsConf.of(extensions), extensionLoaded]
 }
+
+const extensionLoaded = ViewPlugin.define(view => {
+  const listener = () => {
+    const extensions: Extension[] = []
+
+    dispatchEvent(extensions)
+
+    view.dispatch({
+      effects: thirdPartyExtensionsConf.reconfigure(extensions),
+    })
+  }
+
+  window.addEventListener('editor:extension-loaded', listener)
+
+  return {
+    destroy() {
+      window.removeEventListener('editor:extension-loaded', listener)
+    },
+  }
+})