feat(Output): display markdownish text

packages/apps/client/src/components/RundownOutput/Line.tsx

@@ -1,16 +1,17 @@
 import { observer } from 'mobx-react-lite'
 import { UILine } from 'src/model/UILine'
+import { MdDisplay } from './MdDisplay'
+import { TextDisplay } from './TextDisplay'
 
 export const Line = observer(function Line({ line }: { line: UILine }): React.ReactElement {
-	// TODO: line.script needs to be parsed, if it's markdownish and displayed across paragraphs
+	const script = line.script
+
+	const isMdIsh = true
+
 	return (
 		<>
 			<h3 data-obj-id={line.id}>{line.slug}</h3>
-			{!line.script ? (
-				<p>&nbsp;</p>
-			) : (
-				line.script.split('\n').map((paragraph, i) => <p key={paragraph + '_' + i}>{paragraph}</p>)
-			)}
+			{!script ? <p>&nbsp;</p> : isMdIsh ? <MdDisplay source={script} /> : <TextDisplay source={script} />}
 		</>
 	)
 })

packages/apps/client/src/components/RundownOutput/MdDisplay.tsx

@@ -0,0 +1,42 @@
+import { assertNever } from '@sofie-prompter-editor/shared-lib'
+import React, { useMemo } from 'react'
+import createParser from 'src/lib/mdParser'
+import { Node, ParentNodeBase } from 'src/lib/mdParser/astNodes'
+
+const mdParser = createParser()
+
+export function MdDisplay({ source }: { source: string }): React.ReactNode {
+	const rootNode = useMemo(() => mdParser(source), [source])
+
+	return <MdNode content={rootNode} />
+}
+
+function MdNode({ content }: { content: Node }): React.ReactNode {
+	switch (content.type) {
+		case 'paragraph':
+			return <p>{renderChildren(content)}</p>
+		case 'root':
+			return <>{renderChildren(content)}</>
+		case 'emphasis':
+			return <i>{renderChildren(content)}</i>
+		case 'strong':
+			return <b>{renderChildren(content)}</b>
+		case 'reverse':
+			return React.createElement('rev', {}, renderChildren(content))
+		case 'text':
+			return content.value
+		default:
+			assertNever(content)
+			return null
+	}
+}
+
+function renderChildren(content: ParentNodeBase): React.ReactNode {
+	return (
+		<>
+			{content.children.map((node, index) => (
+				<MdNode key={index + '_' + node.type} content={node} />
+			))}
+		</>
+	)
+}

packages/apps/client/src/components/RundownOutput/TextDisplay.tsx

@@ -0,0 +1,3 @@
+export function TextDisplay({ source }: { source: string }): React.ReactNode {
+	return source.split('\n').map((paragraph, i) => <p key={paragraph + '_' + i}>{paragraph}</p>)
+}