monaco-editor-core
Version:
A browser based code editor
72 lines (71 loc) • 3.67 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { h } from '../../../../base/browser/dom.js';
import { structuralEquals } from '../../../../base/common/equals.js';
import { Disposable } from '../../../../base/common/lifecycle.js';
import { autorun, constObservable, derivedObservableWithCache, derivedOpts } from '../../../../base/common/observable.js';
import { derivedWithStore } from '../../../../base/common/observableInternal/derived.js';
import { observableCodeEditor } from '../../../browser/observableCodeEditor.js';
/**
* Use the editor option to set the placeholder text.
*/
export class PlaceholderTextContribution extends Disposable {
static { this.ID = 'editor.contrib.placeholderText'; }
constructor(_editor) {
super();
this._editor = _editor;
this._editorObs = observableCodeEditor(this._editor);
this._placeholderText = this._editorObs.getOption(88 /* EditorOption.placeholder */);
this._state = derivedOpts({ owner: this, equalsFn: structuralEquals }, reader => {
const p = this._placeholderText.read(reader);
if (!p) {
return undefined;
}
if (!this._editorObs.valueIsEmpty.read(reader)) {
return undefined;
}
return { placeholder: p };
});
this._shouldViewBeAlive = isOrWasTrue(this, reader => this._state.read(reader)?.placeholder !== undefined);
this._view = derivedWithStore((reader, store) => {
if (!this._shouldViewBeAlive.read(reader)) {
return;
}
const element = h('div.editorPlaceholder');
store.add(autorun(reader => {
const data = this._state.read(reader);
const shouldBeVisibile = data?.placeholder !== undefined;
element.root.style.display = shouldBeVisibile ? 'block' : 'none';
element.root.innerText = data?.placeholder ?? '';
}));
store.add(autorun(reader => {
const info = this._editorObs.layoutInfo.read(reader);
element.root.style.left = `${info.contentLeft}px`;
element.root.style.width = (info.contentWidth - info.verticalScrollbarWidth) + 'px';
element.root.style.top = `${this._editor.getTopForLineNumber(0)}px`;
}));
store.add(autorun(reader => {
element.root.style.fontFamily = this._editorObs.getOption(49 /* EditorOption.fontFamily */).read(reader);
element.root.style.fontSize = this._editorObs.getOption(52 /* EditorOption.fontSize */).read(reader) + 'px';
element.root.style.lineHeight = this._editorObs.getOption(67 /* EditorOption.lineHeight */).read(reader) + 'px';
}));
store.add(this._editorObs.createOverlayWidget({
allowEditorOverflow: false,
minContentWidthInPx: constObservable(0),
position: constObservable(null),
domNode: element.root,
}));
});
this._view.recomputeInitiallyAndOnChange(this._store);
}
}
function isOrWasTrue(owner, fn) {
return derivedObservableWithCache(owner, (reader, lastValue) => {
if (lastValue === true) {
return true;
}
return fn(reader);
});
}