fix: split committed/active blocks at micromark-event level instead of DOM lastElementChild

Agent-Logs-Url: https://github.com/microsoft/BotFramework-WebChat/sessions/0cc28430-8345-487c-a77b-dd62abdb9973

Co-authored-by: OEvgeny <2841858+OEvgeny@users.noreply.github.com>

Author: Copilot

packages/bundle/src/markdown/createStreamingRenderer.ts

@@ -198,19 +198,24 @@ export default function createStreamingRenderer(
         } else {
           // New block boundary in tail: commit newly-finished blocks, replace active.
           const newActiveOffsetInTail = tailBlocks[tailBlocks.length - 1].startOffset;
-          const committedTailEvents = tailEvents.filter(([, token]) => token.start.offset < newActiveOffsetInTail);
-          const committedTailHTML = compile(micromarkOptions)(committedTailEvents);
 
           activeBlockStartOffset += newActiveOffsetInTail;
 
+          // Split at the micromark-event level so that blocks which compile to
+          // multiple sibling DOM nodes (e.g. htmlFlow) are kept whole.
+          const committedTailEvents = tailEvents.filter(([, token]) => token.start.offset < newActiveOffsetInTail);
+          const activeTailEvents = tailEvents.filter(([, token]) => token.start.offset >= newActiveOffsetInTail);
+
+          const committedTailHTML = compile(micromarkOptions)(committedTailEvents);
+          const activeTailHTML = compile(micromarkOptions)(activeTailEvents);
+
           const committedDoc = domParser.parseFromString(committedTailHTML, 'text/html');
           const committedFragment = committedDoc.createDocumentFragment();
 
           committedFragment.append(...Array.from(committedDoc.body.childNodes));
           betterLinkDocumentMod(committedFragment, createDecorate(emptyDefinitions, externalLinkAlt));
 
-          const remainingHTML = tailHTML.slice(committedTailHTML.length);
-          const activeDoc = domParser.parseFromString(remainingHTML, 'text/html');
+          const activeDoc = domParser.parseFromString(activeTailHTML, 'text/html');
           const activeFragment = activeDoc.createDocumentFragment();
 
           activeFragment.append(...Array.from(activeDoc.body.childNodes));
@@ -243,27 +248,35 @@ export default function createStreamingRenderer(
 
     // Full reparse path.
     const fullEvents = parseEvents(processedMarkdown);
-    const rawHTML = compile(micromarkOptions)(fullEvents);
-    const parsedDocument = domParser.parseFromString(rawHTML, 'text/html');
-    const fragment = parsedDocument.createDocumentFragment();
-
-    fragment.append(...Array.from(parsedDocument.body.childNodes));
-
     const blocks = findTopLevelBlocks(fullEvents);
 
     if (blocks.length >= 2) {
-      activeBlockStartOffset = blocks[blocks.length - 1].startOffset;
+      const lastBlock = blocks[blocks.length - 1];
 
-      const range = document.createRange();
+      activeBlockStartOffset = lastBlock.startOffset;
 
-      range.setStartBefore(fragment.firstChild!);
-      range.setEndBefore(fragment.lastElementChild!);
+      // Split at the micromark-event level so that blocks which compile to
+      // multiple sibling DOM nodes (e.g. htmlFlow) are kept whole.
+      const committedEvents = fullEvents.filter(([, token]) => token.start.offset < lastBlock.startOffset);
+      const activeEvents = fullEvents.filter(([, token]) => token.start.offset >= lastBlock.startOffset);
+
+      const committedHTML = compile(micromarkOptions)(committedEvents);
+      const activeHTML = compile(micromarkOptions)(activeEvents);
+
+      const committedDoc = domParser.parseFromString(committedHTML, 'text/html');
+      const committedFragment = committedDoc.createDocumentFragment();
+
+      committedFragment.append(...Array.from(committedDoc.body.childNodes));
+
+      const activeDoc = domParser.parseFromString(activeHTML, 'text/html');
+      const activeFragment = activeDoc.createDocumentFragment();
+
+      activeFragment.append(...Array.from(activeDoc.body.childNodes));
 
-      const committedFragment = range.extractContents();
       const decorate = createDecorate(emptyDefinitions, externalLinkAlt);
 
       betterLinkDocumentMod(committedFragment, decorate);
-      betterLinkDocumentMod(fragment, decorate);
+      betterLinkDocumentMod(activeFragment, decorate);
 
       const wrapper = ensureWrapper(options.container, options.containerClassName);
 
@@ -272,7 +285,7 @@ export default function createStreamingRenderer(
       wrapper.replaceChildren(
         applyTransform(committedFragment, options.transformFragment),
         activeSentinel,
-        applyTransform(fragment, options.transformFragment)
+        applyTransform(activeFragment, options.transformFragment)
       );
 
       return;
@@ -282,6 +295,12 @@ export default function createStreamingRenderer(
     activeBlockStartOffset = 0;
     activeSentinel = null;
 
+    const rawHTML = compile(micromarkOptions)(fullEvents);
+    const parsedDocument = domParser.parseFromString(rawHTML, 'text/html');
+    const fragment = parsedDocument.createDocumentFragment();
+
+    fragment.append(...Array.from(parsedDocument.body.childNodes));
+
     betterLinkDocumentMod(fragment, createDecorate(emptyDefinitions, externalLinkAlt));
 
     const wrapper = ensureWrapper(options.container, options.containerClassName);