diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index a842c2161..8243a8747 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -262,6 +262,13 @@ describe('TextEditorComponent', () => { expect(element.querySelector('.line-number')).toBe(null) }) + it('supports the placeholderText parameter', () => { + const placeholderText = 'Placeholder Test' + const {component} = buildComponent({placeholderText, text: ''}) + const emptyLineSpace = ' ' + expect(component.refs.content.textContent).toBe(emptyLineSpace + placeholderText) + }) + describe('mini editors', () => { it('adds the mini attribute', () => { const {element, editor} = buildComponent({mini: true}) @@ -1349,14 +1356,13 @@ describe('TextEditorComponent', () => { }) function buildComponent (params = {}) { - const buffer = new TextBuffer({text: SAMPLE_TEXT}) + const text = params.text != null ? params.text : SAMPLE_TEXT + const buffer = new TextBuffer({text}) const editorParams = {buffer} if (params.height != null) params.autoHeight = false - if (params.width != null) params.autoHeight = false - if (params.mini != null) editorParams.mini = params.mini - if (params.autoHeight != null) editorParams.autoHeight = params.autoHeight - if (params.autoWidth != null) editorParams.autoWidth = params.autoWidth - if (params.lineNumberGutterVisible != null) editorParams.lineNumberGutterVisible = params.lineNumberGutterVisible + for (const paramName of ['mini', 'autoHeight', 'autoWidth', 'lineNumberGutterVisible', 'placeholderText']) { + if (params[paramName] != null) editorParams[paramName] = params[paramName] + } const editor = new TextEditor(editorParams) const component = new TextEditorComponent({ model: editor, diff --git a/src/text-editor-component.js b/src/text-editor-component.js index 8ea01dce7..413f5a94b 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -315,7 +315,8 @@ class TextEditorComponent { style.height = height children = [ this.renderCursorsAndInput(width, height), - this.renderLineTiles(width, height) + this.renderLineTiles(width, height), + this.renderPlaceholderText() ] } else { children = $.div({ref: 'characterMeasurementLine', className: 'line'}, @@ -427,6 +428,17 @@ class TextEditorComponent { }, children) } + renderPlaceholderText () { + const {model} = this.props + if (model.isEmpty()) { + const placeholderText = model.getPlaceholderText() + if (placeholderText != null) { + return $.div({className: 'placeholder-text'}, placeholderText) + } + } + return null + } + renderHiddenInput () { let top, left if (this.hiddenInputPosition) {