markdown: example improvements (#2361)

Author: kevmoo

pkgs/markdown/example/app.dart

@@ -39,9 +39,11 @@ final extensionSets = {
   'gfm-radio': md.ExtensionSet.gitHubWeb,
 };
 
+final _radioGroups = [basicRadio, commonmarkRadio, gfmRadio];
+
 void main() {
   versionSpan.textContent = 'v${md.version}';
-  markdownInput.onKeyUp.listen(_renderMarkdown);
+  markdownInput.onInput.listen(_renderMarkdown);
 
   final savedMarkdown = window.localStorage.getItem('markdown');
 
@@ -88,11 +90,14 @@ void _renderMarkdown([Event? event]) {
 
 void _typeItOut(String msg, int pos) {
   late Timer timer;
-  markdownInput.onKeyUp.listen((_) {
+  late StreamSubscription<Event> sub;
+  sub = markdownInput.onInput.listen((_) {
     timer.cancel();
+    sub.cancel();
   });
   void addCharacter() {
     if (pos > msg.length) {
+      sub.cancel();
       return;
     }
     markdownInput.value = msg.substring(0, pos);
@@ -107,23 +112,13 @@ void _typeItOut(String msg, int pos) {
 
 void _switchFlavor(Event e) {
   final target = e.currentTarget as HTMLElement;
-  if (target.attributes.getNamedItem('checked') == null) {
-    if (basicRadio != target) {
-      basicRadio.attributes.safeRemove('checked');
-      basicRadio.querySelector('.glyph')!.textContent =
-          'radio_button_unchecked';
-    }
-    if (commonmarkRadio != target) {
-      commonmarkRadio.attributes.safeRemove('checked');
-      commonmarkRadio.querySelector('.glyph')!.textContent =
-          'radio_button_unchecked';
-    }
-    if (gfmRadio != target) {
-      gfmRadio.attributes.safeRemove('checked');
-      gfmRadio.querySelector('.glyph')!.textContent = 'radio_button_unchecked';
+  if (target.getAttribute('checked') == null) {
+    for (final radio in _radioGroups.where((r) => r != target)) {
+      radio.removeAttribute('checked');
+      radio.querySelector('.glyph')!.textContent = 'radio_button_unchecked';
     }
 
-    target.attributes.getNamedItem('checked')?.value = '';
+    target.setAttribute('checked', '');
     target.querySelector('.glyph')!.textContent = 'radio_button_checked';
     extensionSet = extensionSets[target.id];
     _renderMarkdown();
@@ -134,12 +129,6 @@ extension on NodeList {
   List<Node> get items => [for (var i = 0; i < length; i++) item(i)!];
 }
 
-extension on NamedNodeMap {
-  void safeRemove(String qualifiedName) {
-    if (getNamedItem(qualifiedName) != null) removeNamedItem(qualifiedName);
-  }
-}
-
 extension on HTMLDivElement {
   // The default implementation allows `JSAny` to support trusted types. We only
   // use `String`s, so prefer this to avoid manual conversions.