I'm currently working with a Vue component that renders a diff editor using Monaco. However, when I have more than one instance of this component on the same page, only the first one displays the diff highlights.
Here is the template:
<template>
<div>
<div ref="diffEditor" class="vue--monaco-diff-editor"></div>
</div>
</template>
And here is the script:
async mounted(): Promise<void> {
await this.importMonacoPackage();
this.$nextTick(() => {
if (!monaco) {
throw new Error('monaco is not initialized');
}
const originalModel = monaco.editor.createModel(
this.versions[0].code,
MonacoHelper.markdownLangToMonacoLang(this.versions[0].lang),
);
const modifiedModel = monaco.editor.createModel(
this.versions[1].code,
MonacoHelper.markdownLangToMonacoLang(this.versions[1].lang),
);
let diffEditorElement = this.$refs.diffEditor;
this.diffEditor = monaco.editor.createDiffEditor(
diffEditorElement as HTMLElement,
{
scrollbar: {
vertical: 'hidden',
horizontal: 'hidden',
handleMouseWheel: true,
},
wordWrap: 'on',
readOnly: true,
scrollBeyondLastLine: false,
minimap: {
enabled: false,
},
automaticLayout: true,
},
);
if (!this.diffEditor) {
return;
}
this.diffEditor.setModel({
original: originalModel,
modified: modifiedModel,
});
// Adjust editor height to match content height automatically
const originalContentHeight = this.diffEditor
.getOriginalEditor()
.getContentHeight();
const modifiedContentHeight = this.diffEditor
.getModifiedEditor()
.getContentHeight();
let contentHeight = Math.max(
originalContentHeight,
modifiedContentHeight,
);
contentHeight = contentHeight + 18;
const domNode = this.diffEditor.getDomNode();
domNode.style.height = `${contentHeight}px`;
this.diffEditor.layout();
});
},
methods: {
async importMonacoPackage() {
monaco = await import('../../../lib/monaco-editor');
},
},
The dependencies I'm using are
"monaco-editor": "^0.24.0","vue": "^2.6.13".
Any insights on what might be causing only the first instance to show the diff highlights?