Update FlottformTextInput classes to allow bidirectional text transfer

flottform/forms/src/default-component.ts

@@ -305,8 +305,9 @@ const handleTextInputStates = ({
 	if (id) {
 		flottformItem.setAttribute('id', id);
 	}
-	flottformTextInputHost.on('done', (message: string) => {
-		statusInformation.innerHTML = onSuccessText ?? `✨ You have succesfully submitted your message`;
+	flottformTextInputHost.on('text-received', (message: string) => {
+		statusInformation.innerHTML =
+			onSuccessText ?? `✨ You have succesfully submitted your message: ${message}`;
 		statusInformation.appendChild(refreshChannelButton);
 		flottformItem.replaceChildren(statusInformation);
 	});

flottform/forms/src/flottform-text-input-client.ts

@@ -2,10 +2,11 @@ import { FlottformChannelClient } from './flottform-channel-client';
 import { DEFAULT_WEBRTC_CONFIG, EventEmitter, Logger, POLL_TIME_IN_MS } from './internal';
 
 type Listeners = {
+	init: [];
 	connected: [];
 	'webrtc:connection-impossible': [];
-	sending: []; // Emitted to signal the start of sending the file(s)
-	done: [];
+	'text-transferred': [text: string]; // Emitted to signal the transfer of one text TO the Host.
+	'text-received': [text: string]; // Emitted to signal the reception of one text FROM the Host.
 	disconnected: [];
 	error: [e: string];
 };
@@ -49,13 +50,19 @@ export class FlottformTextInputClient extends EventEmitter<Listeners> {
 
 	sendText = (text: string) => {
 		// For now, I didn't handle very large texts since for most use cases the text won't exceed the size of 1 chunk ( 16KB )
-		this.emit('sending');
 		this.channel?.sendData(text);
-		this.emit('done');
+		this.emit('text-transferred', text);
+	};
+
+	private handleIncomingData = (e: MessageEvent) => {
+		// We suppose that the data received is small enough to be all included in 1 message
+		this.emit('text-received', e.data);
 	};
 
 	private registerListeners = () => {
-		this.channel?.on('init', () => {});
+		this.channel?.on('init', () => {
+			this.emit('init');
+		});
 		this.channel?.on('retrieving-info-from-endpoint', () => {});
 		this.channel?.on('sending-client-info', () => {});
 		this.channel?.on('connecting-to-host', () => {});
@@ -65,8 +72,11 @@ export class FlottformTextInputClient extends EventEmitter<Listeners> {
 		this.channel?.on('connection-impossible', () => {
 			this.emit('webrtc:connection-impossible');
 		});
+		this.channel?.on('receiving-data', (e) => {
+			this.handleIncomingData(e);
+		});
 		this.channel?.on('done', () => {
-			this.emit('done');
+			//this.emit('done');
 		});
 		this.channel?.on('disconnected', () => {
 			this.emit('disconnected');

flottform/forms/src/flottform-text-input-host.ts

@@ -8,9 +8,9 @@ import {
 } from './internal';
 
 type Listeners = BaseListeners & {
-	done: [data: string];
+	'text-transferred': [text: string]; // Emitted to signal the transfer of one text TO the Client.
+	'text-received': [text: string]; // Emitted to signal the reception of one text FROM the Client.
 	'webrtc:waiting-for-text': [];
-	receive: [];
 	'webrtc:waiting-for-data': [];
 };
 
@@ -76,10 +76,15 @@ export class FlottformTextInputHost extends BaseInputHost<Listeners> {
 		return this.qrCode;
 	};
 
+	sendText = (text: string) => {
+		// For now, I didn't handle very large texts since for most use cases the text won't exceed the size of 1 chunk ( 16KB )
+		this.channel?.sendData(text);
+		this.emit('text-transferred', text);
+	};
+
 	private handleIncomingData = (e: MessageEvent) => {
-		this.emit('receive');
 		// We suppose that the data received is small enough to be all included in 1 message
-		this.emit('done', e.data);
+		this.emit('text-received', e.data);
 		if (this.inputField) {
 			this.inputField.value = e.data;
 			const event = new Event('change');