feat(GUI): use CSS Grid for a predictable table

packages/apps/client/src/CurrentRundown/CurrentRundown.module.scss

@@ -0,0 +1,68 @@
+.SegmentLineList {
+	display: grid;
+	grid-template-columns: 1fr 4em 6em 2fr 5fr 1fr 1fr;
+	padding: 0;
+	margin: 0;
+	--table-gap-size: 1px;
+	gap: var(--table-gap-size);
+}
+
+.SegmentContainer {
+	padding: 0;
+	margin: 0;
+	display: contents;
+}
+
+.SegmentIdentifier {
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.LineContainer {
+	padding: 0;
+	margin: 0;
+	grid-column: 2 / 8;
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-template-rows: auto;
+	gap: var(--table-gap-size);
+}
+
+.Line {
+	grid-column: 1 / 7;
+	display: grid;
+	grid-template-columns: subgrid;
+	gap: var(--table-gap-size);
+	padding: 0;
+	margin: 0;
+}
+
+.LineItem {
+	background: var(--color-dark-2);
+}
+
+.LineIdentifier {
+	--dummy: 1;
+}
+
+.LineType {
+	--dumy: 1;
+}
+
+.LineSlug {
+	composes: LineItem;
+}
+
+.LineScript {
+	composes: LineItem;
+}
+
+.LineDuration {
+	composes: LineItem;
+}
+
+.LineDuration2 {
+	composes: LineItem;
+}

packages/apps/client/src/CurrentRundown/CurrentRundown.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { AppStore } from '../stores/AppStore'
 import { Segment } from './Segment'
 import { Button } from 'react-bootstrap'
+import classes from './CurrentRundown.module.scss'
 
 const CurrentRundown = observer((): React.JSX.Element => {
 	const openRundown = AppStore.rundownStore.openRundown
@@ -24,9 +25,9 @@ const CurrentRundown = observer((): React.JSX.Element => {
 					Close
 				</Button>
 			</p>
-			<ul>
+			<ul className={classes.SegmentLineList}>
 				{openRundown.segmentsInOrder.map((segment) => (
-					<li key={segment.id}>
+					<li key={segment.id} className={classes.SegmentContainer}>
 						<Segment segment={segment} />
 					</li>
 				))}

packages/apps/client/src/CurrentRundown/Line.tsx

@@ -1,10 +1,20 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 import { UILine } from '../model/UILine'
+import classes from './CurrentRundown.module.scss'
 
 const Line = observer(({ line }: { line: UILine | undefined }): React.JSX.Element | null => {
 	if (!line) return null
-	return <p>{line.slug}</p>
+	return (
+		<>
+			<div className={classes.LineIdentifier}></div>
+			<div className={classes.LineType}></div>
+			<div className={classes.LineSlug}>{line.slug}</div>
+			<div className={classes.LineScript}>{line.script}</div>
+			<div className={classes.LineDuration}></div>
+			<div className={classes.LineDuration2}></div>
+		</>
+	)
 })
 Line.displayName = 'Line'
 

packages/apps/client/src/CurrentRundown/Segment.tsx

@@ -2,16 +2,17 @@ import React from 'react'
 import { observer } from 'mobx-react-lite'
 import { UISegment } from '../model/UISegment'
 import { Line } from './Line'
+import classes from './CurrentRundown.module.scss'
 
 const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Element | null => {
 	if (!segment) return null
 
 	return (
 		<>
-			<p>{segment.name}</p>
-			<ul>
+			<div className={classes.SegmentIdentifier}>{segment.name}</div>
+			<ul className={classes.LineContainer}>
 				{segment.linesInOrder.map((line) => (
-					<li key={line.id}>
+					<li key={line.id} className={classes.Line}>
 						<Line line={line} />
 					</li>
 				))}

packages/apps/client/src/ScriptEditor/Editor.tsx

@@ -62,7 +62,7 @@ export function Editor({
 					[
 						schema.node(schema.nodes.lineTitle, undefined, [schema.text('Line title')]),
 						...fromMarkdown(
-							'Raz _dwa **trzy**_. :reverse[Cztery.]\n\nPięć _sześć_ siedem.\n\n\n\n\n\nSome more :reverse[Markdown **Here**]'
+							'Raz _dwa **trzy**_. :reverse[Cztery.]\n\nPięć _sześć_ siedem.  \nRaz\n\n\n\n\n Some more :reverse[Markdown **Here**]'
 						),
 					]
 				),

packages/apps/client/src/ScriptEditor/plugins/updateModel.ts

@@ -1,5 +1,7 @@
 import { Plugin } from 'prosemirror-state'
 import { UILineId } from '../../model/UILine'
+import { Node } from 'prosemirror-model'
+import { schema } from '../scriptSchema'
 
 export function updateModel(onChange?: (lineId: UILineId, contents: SomeContents) => void) {
 	return new Plugin({
@@ -20,7 +22,13 @@ export function updateModel(onChange?: (lineId: UILineId, contents: SomeContents
 								if (!parent) return
 								if (parent.type.name !== 'line') return
 
-								if (onChange) onChange(lineId, parent)
+								const allNodes: Node[] = []
+								parent.content.forEach((node) => {
+									if (node.type === schema.nodes.lineTitle) return
+									allNodes.push(node)
+								})
+								console.log(allNodes)
+								if (onChange) onChange(lineId, allNodes)
 							})
 						})
 					})

packages/apps/client/src/index.scss

@@ -1,7 +1,9 @@
 /* The following line can be included in a src/App.scss */
 $primary: #1769ff;
 //$dark: #252627; // this is Origo's original dark color
-$dark: #1d1d1d;
+$dark-1: #1d1d1d;
+$dark-2: #2a2a2a;
+$dark: $dark-1;
 $body-bg-dark: $dark;
 
 $font-family-sans-serif: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
@@ -29,4 +31,6 @@ $theme-colors: (
 
 :root {
 	-webkit-font-smoothing: antialiased;
+	--color-dark-1: #{$dark-1};
+	--color-dark-2: #{$dark-2};
 }

packages/apps/client/src/lib/mdExtensions/everyLineAParagraph.ts

@@ -0,0 +1,12 @@
+import { Extension, CompileContext, Token } from 'mdast-util-from-markdown'
+import { TokenTypeMap } from 'micromark-util-types'
+
+export function everyLineAParagraph(): Extension {
+	return {
+		enter: {
+			['lineEnding']: function (this: CompileContext, token: Token) {
+				console.log(token, this)
+			},
+		},
+	}
+}

packages/apps/client/src/lib/prosemirrorDoc.ts

@@ -5,11 +5,12 @@ import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { directive } from 'micromark-extension-directive'
 import { schema } from '../ScriptEditor/scriptSchema'
 import { directiveFromMarkdown, directiveToMarkdown } from 'mdast-util-directive'
+import { everyLineAParagraph } from './mdExtensions/everyLineAParagraph'
 
 export function fromMarkdown(text: string): ProsemirrorNode[] {
 	const ast = mdAstFromMarkdown(text, 'utf-8', {
 		extensions: [directive()],
-		mdastExtensions: [directiveFromMarkdown()],
+		mdastExtensions: [everyLineAParagraph(), directiveFromMarkdown()],
 	})
 
 	return traverseMdAstNodes(ast.children)
@@ -28,9 +29,10 @@ export function toMarkdown(doc: ProsemirrorNode[]): string {
 }
 
 function mdastToEditorSchemaNode(node: MdAstNode, children?: ProsemirrorNode[]): ProsemirrorNode[] {
-	console.log(node)
 	if (node.type === 'paragraph') {
 		return [schema.node(schema.nodes.paragraph, undefined, children)]
+	} else if (isLeafDirective(node) && node.name === 'emptyPara') {
+		return [schema.node(schema.nodes.paragraph, undefined, [])]
 	} else if (node.type === 'text' && isLiteral(node)) {
 		return [schema.text(node.value)]
 	} else if (node.type === 'strong' && children) {
@@ -39,7 +41,10 @@ function mdastToEditorSchemaNode(node: MdAstNode, children?: ProsemirrorNode[]):
 		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.italic)]))
 	} else if (isTextDirective(node) && node.name === 'reverse' && children) {
 		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.reverse)]))
+	} else if (node.type === 'break') {
+		return [schema.text('\n')]
 	} else {
+		console.warn(node)
 		return [schema.text('[UNKNOWN]')]
 	}
 }
@@ -72,6 +77,11 @@ function isTextDirective(node: MdAstNode): node is MdAstTextDirective {
 	return false
 }
 
+function isLeafDirective(node: MdAstNode): node is MdAstTextDirective {
+	if (node.type === 'leafDirective' && 'name' in node) return true
+	return false
+}
+
 interface MdAstTextDirective extends MdAstNode {
 	name: string
 	attributes: Record<string, string>