From e800f28f5940641826cbeb2cae890675f6744dc7 Mon Sep 17 00:00:00 2001
From: Jan Starzak <jan.starzak@gmail.com>
Date: Wed, 31 Jan 2024 13:08:59 +0100
Subject: [PATCH] feat(Output): display markdownish text

---
 .../src/components/RundownOutput/Line.tsx     | 13 +++---
 .../components/RundownOutput/MdDisplay.tsx    | 42 +++++++++++++++++++
 .../components/RundownOutput/TextDisplay.tsx  |  3 ++
 3 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 packages/apps/client/src/components/RundownOutput/MdDisplay.tsx
 create mode 100644 packages/apps/client/src/components/RundownOutput/TextDisplay.tsx

diff --git a/packages/apps/client/src/components/RundownOutput/Line.tsx b/packages/apps/client/src/components/RundownOutput/Line.tsx
index 1f5e544..f3b85a7 100644
--- a/packages/apps/client/src/components/RundownOutput/Line.tsx
+++ b/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} />}
 		</>
 	)
 })
diff --git a/packages/apps/client/src/components/RundownOutput/MdDisplay.tsx b/packages/apps/client/src/components/RundownOutput/MdDisplay.tsx
new file mode 100644
index 0000000..c3754d1
--- /dev/null
+++ b/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} />
+			))}
+		</>
+	)
+}
diff --git a/packages/apps/client/src/components/RundownOutput/TextDisplay.tsx b/packages/apps/client/src/components/RundownOutput/TextDisplay.tsx
new file mode 100644
index 0000000..c4681b1
--- /dev/null
+++ b/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>)
+}