diff --git a/solardoc/frontend/src/scripts/editor/editor.ts b/solardoc/frontend/src/scripts/editor/editor.ts index e90bc197..9c9167b6 100644 --- a/solardoc/frontend/src/scripts/editor/editor.ts +++ b/solardoc/frontend/src/scripts/editor/editor.ts @@ -107,7 +107,7 @@ export class SolardocEditor { globalMonacoEditor! = monaco.editor.create(elementToBindTo.value, { theme: initialState.darkMode ? 'asciiDocDarkTheme' : 'asciiDocLightTheme', language: 'asciiDoc', - value: initialState.content, + value: undefined, fontFamily: 'JetBrains Mono', minimap: { enabled: false, @@ -116,6 +116,8 @@ export class SolardocEditor { automaticLayout: true, scrollBeyondLastLine: false, }) + // We need to set the content after the editor is created due to a weird bug in Monaco (See #146) + this._applyInitContent(`${initialState.content}` || '') this._locked = false this._readonly = false @@ -164,6 +166,10 @@ export class SolardocEditor { globalMonacoEditor!.setValue(content) } + private static forceRerender() { + globalMonacoEditor!.render() + } + /** * @since 0.7.0 */ @@ -186,11 +192,14 @@ export class SolardocEditor { } else if (oTrans.init) { // The init transformation should not be applied and only the init content should be set //await this.runThreadSafe(async () => model.setValue(currentFileStore.content)) - await this.runThreadSafe(async () => globalMonacoEditor!.setValue(currentFileStore.content)) + await this._runThreadSafe(async () => globalMonacoEditor!.setValue(currentFileStore.content)) return } else { - await this.runThreadSafe(async () => { - const edits: Array = getMonacoUpdatesFromOT(editorModel, oTrans) + await this._runThreadSafe(async () => { + const edits: Array = getMonacoUpdatesFromOT( + editorModel, + oTrans, + ) globalMonacoEditor!.executeEdits(this.name, edits) }) } @@ -218,11 +227,11 @@ export class SolardocEditor { }) } - private static lock() { + private static _lock() { this._locked = true } - private static unlock() { + private static _unlock() { this._locked = false } @@ -232,20 +241,20 @@ export class SolardocEditor { * @param promise The promise to run * @private */ - private static async runThreadSafe(promise: () => Promise): Promise { + private static async _runThreadSafe(promise: () => Promise): Promise { if (this.isLocked) { - await this.waitForUnlock() + await this._waitForUnlock() } - this.lock() + this._lock() await promise() - this.unlock() + this._unlock() } /** * Returns a promise which resolves when the editor is unlocked. * @private */ - private static waitForUnlock(): Promise { + private static _waitForUnlock(): Promise { return new Promise(resolve => { const interval = setInterval(() => { if (!this.isLocked) { @@ -255,4 +264,20 @@ export class SolardocEditor { }, 100) }) } + + /** + * Applies the initial content to the editor. This is used to set the initial content of the editor when it is + * created. + * + * This is required due to bug #146 in Monaco, where setting the content in the editor creation options does not work. + * @param content The content to set. + * @private + */ + private static _applyInitContent(content: string) { + globalMonacoEditor!.setValue(content) + document.fonts.ready.then(() => { + monaco.editor.remeasureFonts() + this.forceRerender() + }) + } }