Placeholder param. Closes #1

README.md

@@ -41,6 +41,7 @@ const params = {
 
 pane.addInput(params, 'prop', {
   view: 'textarea',
+  placeholder: 'Type here...'
 }).on('change', (ev) => {
   console.log(ev.value);
 });

src/controller.ts

@@ -1,13 +1,14 @@
-import {Controller, forceCast, Value, ViewProps} from '@tweakpane/core';
+import { Controller, forceCast, Value, ViewProps } from '@tweakpane/core';
 
-import {TextAreaView} from './view';
+import { TextAreaView } from './view';
 /**
  * @hidden
  */
 export interface Config {
 	value: Value<string>;
 	viewProps: ViewProps;
 	lineCount: number;
+	placeholder: string;
 }
 
 /**
@@ -18,34 +19,34 @@ export class TextAreaController implements Controller<TextAreaView> {
 	public readonly view: TextAreaView;
 	public readonly viewProps: ViewProps;
 	public readonly lineCount: number;
+	public readonly placeholder: string;
 
 	constructor(doc: Document, config: Config) {
 		this.onInputChange_ = this.onInputChange_.bind(this);
 		this.value = config.value;
 		this.viewProps = config.viewProps;
 		this.lineCount = config.lineCount;
+		this.placeholder = config.placeholder;
 
-		console.log( this.lineCount )
+		// console.log( this.lineCount )
 
 		this.view = new TextAreaView(doc, {
 			value: this.value,
 			viewProps: this.viewProps,
-			lineCount: this.lineCount
+			lineCount: this.lineCount,
+			placeholder: this.placeholder,
 		});
 		this.view.inputElement.addEventListener('keyup', this.onInputChange_);
 	}
 
 	private onInputChange_(e: KeyboardEvent): void {
-
 		//console.log( e.key )
 
 		//if( e.key === 'Enter' ){
-			const inputElem: HTMLInputElement = forceCast(e.currentTarget);
-			const value = inputElem.value;
-			this.value.rawValue = value;
-			this.view.refresh();
+		const inputElem: HTMLInputElement = forceCast(e.currentTarget);
+		const value = inputElem.value;
+		this.value.rawValue = value;
+		this.view.refresh();
 		//}
-
-
 	}
 }

src/plugin.ts

@@ -11,6 +11,7 @@ import {TextAreaController} from './controller';
 export interface PluginInputParams extends BaseInputParams {
 	view: 'textarea';
 	lineCount?: number;
+	placeholder?: string;
 }
 
 // NOTE: You can see JSDoc comments of `InputBindingPlugin` for details about each property
@@ -43,12 +44,13 @@ export const TweakpaneTextareaPlugin: InputBindingPlugin<
 		}
 
 		// Parse parameters object
-		console.log( params)
+		// console.log(params)
 		const p = ParamsParsers;
 		const result = parseParams<PluginInputParams>(params, {
 			// `view` option may be useful to provide a custom control for primitive values
 			view: p.required.constant('textarea'),
-			lineCount: p.optional.number
+			lineCount: p.optional.number,
+			placeholder: p.optional.string
 		});
 		if (!result) {
 			return null;
@@ -83,6 +85,7 @@ export const TweakpaneTextareaPlugin: InputBindingPlugin<
 		return new TextAreaController(args.document, {
 			value: args.value,
 			lineCount: args.params.lineCount ?? 3,
+			placeholder: args.params.placeholder ?? 'Enter text here',
 			viewProps: args.viewProps,
 		});
 	},

src/view.ts

@@ -4,6 +4,7 @@ interface Config {
 	value: Value<string>;
 	viewProps: ViewProps;
 	lineCount: number;
+	placeholder: string;
 }
 
 const className = ClassName('txtr');
@@ -25,7 +26,7 @@ export class TextAreaView implements View {
 		const inputElem = doc.createElement('textarea');
 		inputElem.rows = config.lineCount;
 		inputElem.cols = 22;
-		inputElem.placeholder = 'Enter text here';
+		inputElem.placeholder = config.placeholder;
 		inputElem.classList.add(className('i'));
 
 		config.viewProps.bindDisabled(inputElem);

test/browser.html

@@ -25,7 +25,8 @@
 		// Add text area input
 		pane.addInput(params, 'prop', {
 			view: 'textarea',
-			lineCount: 6
+			lineCount: 6,
+			placeholder: 'Type here...',
 		}).on('change', (ev) => {
 			console.log( ev.value );
 			document.getElementById('output').textContent = ev.value