ok so i made a thing, and im pretty sure it works now

Author: RedMan13

src/components/monitor/default-monitor.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './monitor.css';
+import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
 
-const DefaultMonitor = ({categoryColor, label, value}) => (
+const DefaultMonitor = ({categoryColor, label, value, isHTML}) => (
     <div className={styles.defaultMonitor}>
         <div className={styles.row}>
             <div className={styles.label}>
@@ -12,7 +13,9 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
                 className={styles.value}
                 style={{background: categoryColor}}
             >
-                {value}
+                {isHTML
+                    ? (<DOMElementRenderer domElement={value} />)
+                    : String(value)}
             </div>
         </div>
     </div>
@@ -21,6 +24,7 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
 DefaultMonitor.propTypes = {
     categoryColor: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
+    isHTML: PropTypes.bool.isRequired,
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number

src/components/monitor/large-monitor.jsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './monitor.css';
+import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
 
-const LargeMonitor = ({categoryColor, value}) => (
+const LargeMonitor = ({categoryColor, value, isHTML}) => (
     <div className={styles.largeMonitor}>
         <div
             className={styles.largeValue}
             style={{background: categoryColor}}
         >
-            {value}
+            {isHTML
+                ? (<DOMElementRenderer domElement={value} />)
+                : String(value)}
         </div>
     </div>
 );
 
 LargeMonitor.propTypes = {
     categoryColor: PropTypes.string,
+    isHTML: PropTypes.bool.isRequired,
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number

src/components/monitor/list-monitor-scroller.jsx

@@ -6,6 +6,7 @@ import {FormattedMessage} from 'react-intl';
 
 import styles from './monitor.css';
 import {List} from 'react-virtualized';
+import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
 
 class ListMonitorScroller extends React.Component {
     constructor (props) {
@@ -31,6 +32,17 @@ class ListMonitorScroller extends React.Component {
         );
     }
     rowRenderer ({index, key, style}) {
+        const item = this.props.values[index];
+        const renderedValue = item.toListItem
+            ? item.toListItem()
+            : item.toMonitorContent
+                ? item.toMonitorContent()
+                : item.toReporterContent
+                    ? item.toReporterContent()
+                    : item;
+        const value = item.isHTML
+            ? (<DOMElementRenderer domElement={renderedValue} />)
+            : String(item);
         return (
             <div
                 className={styles.listRow}
@@ -67,7 +79,7 @@ class ListMonitorScroller extends React.Component {
                         </div>
 
                     ) : (
-                        <div className={styles.valueInner}>{this.props.values[index]}</div>
+                        <div className={styles.valueInner}>{value}</div>
                     )}
                 </div>
             </div>

src/components/monitor/slider-monitor.jsx

@@ -14,7 +14,7 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
                 className={styles.value}
                 style={{background: categoryColor}}
             >
-                {value}
+                {Number(value)}
             </div>
         </div>
         <div className={styles.row}>
@@ -24,7 +24,7 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
                 min={min}
                 step={isDiscrete ? 1 : 0.01}
                 type="range"
-                value={value}
+                value={Number(value)}
                 onChange={onSliderUpdate}
             />
         </div>

src/containers/dom-element-renderer.jsx

@@ -22,6 +22,7 @@ class DOMElementRenderer extends React.Component {
         this.container.appendChild(this.props.domElement);
     }
     componentWillUnmount () {
+        if (this.props.domElement.parentNode !== this.container.childNodes[0]) return console.error('i dont fucking know how to solve this, all i know is the site just fucking keeps dieing with this exact issue');
         this.container.removeChild(this.props.domElement);
     }
     setContainer (c) {

src/containers/list-monitor.jsx

@@ -36,9 +36,13 @@ class ListMonitor extends React.Component {
             return;
         }
 
+        let activeValue = this.props.value[index];
+        if (activeValue.toListEditor) activeValue = activeValue.toListEditor();
+
         this.setState({
             activeIndex: index,
-            activeValue: this.props.value[index]
+            activeValue,
+            handlerClass: this.props.value[index]
         });
     }
 
@@ -47,7 +51,12 @@ class ListMonitor extends React.Component {
         if (this.state.activeIndex !== null) {
             const {vm, targetId, id: variableId} = this.props;
             const newListValue = getVariableValue(vm, targetId, variableId);
-            newListValue[this.state.activeIndex] = this.state.activeValue;
+            const oldValue = this.props.value[this.state.activeIndex];
+            let newValue = this.state.activeValue;
+            if (oldValue.fromListEditor) {
+                newValue = oldValue.fromListEditor(newValue);
+            }
+            newListValue[this.state.activeIndex] = newValue;
             setVariableValue(vm, targetId, variableId, newListValue);
             this.setState({activeIndex: null, activeValue: null});
         }

src/containers/monitor-list.jsx

@@ -1,18 +1,18 @@
 import bindAll from 'lodash.bindall';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import {injectIntl, intlShape} from 'react-intl';
 
-import { connect } from 'react-redux';
-import { moveMonitorRect, resetMonitorLayout } from '../reducers/monitor-layout';
+import {connect} from 'react-redux';
+import {moveMonitorRect, resetMonitorLayout} from '../reducers/monitor-layout';
 
 import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 import OpcodeLabels from '../lib/opcode-labels';
 
 import MonitorListComponent from '../components/monitor-list/monitor-list.jsx';
 
 class MonitorList extends React.Component {
-    constructor(props) {
+    constructor (props) {
         super(props);
         bindAll(this, [
             'handleMonitorChange'
@@ -22,7 +22,7 @@ class MonitorList extends React.Component {
             key: 0
         };
     }
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps (nextProps) {
         // TW: When stage size changes, we'll force all monitors to re-render completely
         // This is important because the VM moves monitors after resize to preserve locations but
         // Scratch's monitor layout logic is very complex and it won't notice that
@@ -33,10 +33,10 @@ class MonitorList extends React.Component {
             });
         }
     }
-    handleMonitorChange(id, x, y) { // eslint-disable-line no-unused-vars
+    handleMonitorChange (id, x, y) { // eslint-disable-line no-unused-vars
         this.props.moveMonitorRect(id, x, y);
     }
-    render() {
+    render () {
         return (
             <MonitorListComponent
                 onMonitorChange={this.handleMonitorChange}

src/containers/monitor.jsx

@@ -90,6 +90,10 @@ class Monitor extends React.Component {
             return true;
         }
         for (const key of Object.getOwnPropertyNames(nextProps)) {
+            // skip all the other things to check custom monitors and see if they need an update
+            if (key === 'value' && typeof nextProps[key] === 'object') {
+                return !nextProps[key]._monitorUpToDate;
+            }
             // Don't need to rerender when other monitors are moved.
             // monitorLayout is only used during initial layout.
             if (key !== 'monitorLayout' && nextProps[key] !== this.props[key]) {

src/lib/monitor-adapter.js

@@ -45,8 +45,21 @@ export default function ({id, spriteName, opcode, params, value, vm}) {
             if (typeof item === 'boolean') {
                 value[i] = item.toString();
             }
+            if (typeof item === 'object' &&
+                typeof (item.toListItem || value.toMonitorContent || item.toReporterContent) === 'function') {
+                value[i].isHTML = true;
+            }
         }
     }
 
-    return {id, label, category, value};
+    let isHTML = false;
+    if (typeof value === 'object' &&
+        typeof (value.toMonitorContent || value.toReporterContent) === 'function') {
+        value = value.toMonitorContent
+            ? value.toMonitorContent()
+            : value.toReporterContent();
+        isHTML = true;
+    }
+
+    return {id, label, category, value, isHTML};
 }