overleaf/services/web/frontend/js/features/source-editor/extensions/third-party-extensions.ts
Alf Eaton 5e3deba9fe Dispatch 'UNSTABLE_editor:extensions' event on 'editor:extension-loaded' (#16611)
GitOrigin-RevId: a1d93330a7633c6d5870e2c368ab45a4a586db35
2024-01-24 09:03:28 +00:00

73 lines
2 KiB
TypeScript

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,
* e.g. browser extensions.
*/
export const thirdPartyExtensions = (): Extension => {
const extensions: Extension[] = []
dispatchEvent(extensions)
Object.defineProperty(window, 'UNSTABLE_editorHelp', {
writable: false,
enumerable: true,
value: `
Listen for the UNSTABLE_editor:extensions event to add your CodeMirror 6
extension(s) to the extensions array. Use the exported objects to avoid
instanceof comparison errors.
Open an issue on http://github.com/overleaf/overleaf if you think more
should be exported.
This API is **unsupported** and subject to change without warning.
Example:
window.addEventListener("UNSTABLE_editor:extensions", function(evt) {
const { CodeMirror, extensions } = evt.detail;
// CodeMirror contains exported objects from the CodeMirror instance
const { EditorSelection, ViewPlugin } = CodeMirror;
// ...
// Any custom extensions should be pushed to the \`extensions\` array
extensions.push(myCustomExtension)
});`,
})
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)
},
}
})