TextBuffer: add scroll targets

src/components/Player/OutputBox/TextBuffer/TextBuffer.jsx

@@ -4,6 +4,9 @@ import TextMessage from '../TextMessage/TextMessage'
 
 import * as s from '../../Player.module.scss'
 
+const eol = { style: 'endOfLine' }
+const scrollTarget = { style: 'scrollTarget' }
+
 const isFakeStatus = (w) =>
   w.height < 5
 
@@ -22,15 +25,13 @@ const parseInbox = (inbox, currentWindow) => {
   if (!currentInbox) {
     return {
       clear: false,
-      incoming: [],
+      incoming: [scrollTarget],
     }
   }
 
   const { text: inboxMessagesRaw } =
     currentInbox
 
-  const eol = { style: 'endOfLine' }
-
   const incoming =
     inboxMessagesRaw
       /* Normalize. */
@@ -40,7 +41,7 @@ const parseInbox = (inbox, currentWindow) => {
           : [eol])
       /* Flatten. */
       .reduce((acc, x) =>
-        acc.concat(x), [])
+        acc.concat(x), [scrollTarget])
 
   return {
     incoming,
@@ -63,13 +64,13 @@ export default function TextBuffer ({ inbox, currentWindow }) {
       : messages.concat(incoming))
 
     setTimeout(() => {
-      const inputs =
+      const scrollTargets =
-        textBufferEl.current.querySelectorAll('.message.input')
+        textBufferEl.current.querySelectorAll(`.${scrollTarget.style}`)
-      const lastInput =
+      const freshScrollTarget =
-        inputs[inputs.length - 1]
+        scrollTargets[scrollTargets.length - 1]
 
-      lastInput
+      freshScrollTarget
-        ? lastInput.scrollIntoView()
+        ? freshScrollTarget.scrollIntoView()
         : textBufferEl.current.scrollTo({
           top: textBufferEl.current.scrollHeight,
           behavior: 'smooth',

src/components/Player/OutputBox/TextMessage/TextMessage.jsx

@@ -15,6 +15,8 @@ export default function TextMessage ({ style, text }) {
       (<strong className={[s.message, s.subheader].join(' ')}>{text}</strong>),
     emphasized:
       (<em className={[s.message, s.emphasized].join(' ')}>{text}</em>),
+    scrollTarget:
+      (<div className={[s.scrollTarget, style].join(' ')}></div>),
     endOfLine:
       (<br />),
   })[style] || defaultContent

src/components/Player/OutputBox/TextMessage/TextMessage.module.scss

@@ -1,6 +1,5 @@
 .message {
   &.input {
-    scroll-margin-top: var(--inner-padding);
     color: var(--input-color);
   }
 
@@ -9,3 +8,7 @@
     color: var(--accent-color);
   }
 }
+
+.scrollTarget {
+  scroll-margin-block-start: var(--inner-padding);
+}