Feature: custom input in demo app (#1574)

Author: CaptainDario

demo_app/lib/screens/home.dart

@@ -5,6 +5,7 @@ import 'package:demo_app/screens/font_size.dart';
 import 'package:demo_app/screens/golden.dart';
 import 'package:demo_app/screens/hello_world.dart';
 import 'package:demo_app/screens/hello_world_core.dart';
+import 'package:demo_app/screens/html_playground.dart';
 import 'package:demo_app/screens/huge_html.dart';
 import 'package:demo_app/screens/iframe.dart';
 import 'package:demo_app/screens/img.dart';
@@ -35,6 +36,7 @@ class HomeScreen extends StatelessWidget {
     'Smilie': () => const SmilieScreen(),
     'Wordpress': () => const WordpressScreen(),
     'Text Shadow': () => const TextShadowScreen(),
+    'HTML Playground': () => const HtmlPlaygroundScreen(),
   };
 
   const HomeScreen({super.key});

demo_app/lib/screens/html_playground.dart

@@ -0,0 +1,129 @@
+import 'package:demo_app/widgets/popup_menu.dart';
+import 'package:demo_app/widgets/selection_area.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
+
+const _kInitialHtml = '''
+<h1>Hello, HTML Playground!</h1>
+<p>Edit the HTML on the <strong>left</strong> (or <em>top</em>) to see it rendered here.</p>
+<ul>
+  <li>Supports <strong>bold</strong> and <em>italic</em></li>
+  <li>And <a href="https://flutter.dev">links</a></li>
+</ul>''';
+
+class HtmlPlaygroundScreen extends StatefulWidget {
+  const HtmlPlaygroundScreen({super.key});
+
+  @override
+  State<HtmlPlaygroundScreen> createState() => _HtmlPlaygroundScreenState();
+}
+
+class _HtmlPlaygroundScreenState extends State<HtmlPlaygroundScreen> {
+  late final TextEditingController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: _kInitialHtml);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => SelectionAreaScaffold(
+    appBar: AppBar(
+      title: const Text('HTML Playground'),
+      actions: const [PopupMenu(toggleIsSelectable: true)],
+    ),
+    body: LayoutBuilder(
+      builder: (context, constraints) {
+        final isWide = constraints.maxWidth > constraints.maxHeight;
+
+        final inputPane = _InputPane(controller: _controller);
+        final previewPane = _PreviewPane(controller: _controller);
+
+        if (isWide) {
+          return Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Expanded(child: inputPane),
+              const VerticalDivider(width: 1),
+              Expanded(child: previewPane),
+            ],
+          );
+        } else {
+          return Column(
+            children: [
+              Expanded(child: inputPane),
+              const Divider(height: 1),
+              Expanded(child: previewPane),
+            ],
+          );
+        }
+      },
+    ),
+  );
+}
+
+class _InputPane extends StatelessWidget {
+  final TextEditingController controller;
+
+  const _InputPane({required this.controller});
+
+  @override
+  Widget build(BuildContext context) => Padding(
+    padding: const EdgeInsets.all(8),
+    child: TextField(
+      controller: controller,
+      maxLines: null,
+      expands: true,
+      textAlignVertical: TextAlignVertical.top,
+      style: const TextStyle(fontFamily: 'monospace', fontSize: 13),
+      decoration: const InputDecoration(
+        border: OutlineInputBorder(),
+        labelText: 'HTML input',
+        alignLabelWithHint: true,
+      ),
+    ),
+  );
+}
+
+class _PreviewPane extends StatefulWidget {
+  final TextEditingController controller;
+
+  const _PreviewPane({required this.controller});
+
+  @override
+  State<_PreviewPane> createState() => _PreviewPaneState();
+}
+
+class _PreviewPaneState extends State<_PreviewPane> {
+  late String _html;
+
+  @override
+  void initState() {
+    super.initState();
+    _html = widget.controller.text;
+    widget.controller.addListener(_onHtmlChanged);
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_onHtmlChanged);
+    super.dispose();
+  }
+
+  void _onHtmlChanged() {
+    setState(() => _html = widget.controller.text);
+  }
+
+  @override
+  Widget build(BuildContext context) => SingleChildScrollView(
+    padding: const EdgeInsets.all(8),
+    child: HtmlWidget(_html),
+  );
+}

demo_app/pubspec.lock

@@ -302,14 +302,14 @@ packages:
       path: "../packages/enhanced"
       relative: true
     source: path
-    version: "0.17.1"
+    version: "0.17.2"
   flutter_widget_from_html_core:
     dependency: "direct main"
     description:
       path: "../packages/core"
       relative: true
     source: path
-    version: "0.17.0"
+    version: "0.17.2"
   frontend_server_client:
     dependency: transitive
     description:
@@ -359,7 +359,7 @@ packages:
       path: "../packages/fwfh_webview"
       relative: true
     source: path
-    version: "0.15.6"
+    version: "0.15.7"
   glob:
     dependency: transitive
     description: