wip: better

Author: Julusian

packages/documentation/docs/for-developers/for-blueprint-developers/prompter-text.md

@@ -0,0 +1,74 @@
+# Prompter Text Formatting
+
+The Sofie Prompter supports formatted text using simple inline markers. This formatting is displayed both in the prompter view and in hover previews throughout the Sofie UI.
+
+Providing formatted text is optional, Sofie will use the un-formatted version when only that is provided.
+
+## Emphasis and Strong
+
+Wrap text to add emphasis or bold:
+
+- `*italic*` or `_italic_` → _italic_
+- `**bold**` or `__bold__` → **bold**
+
+```
+This is *emphasized text* and this is **strong text**.
+```
+
+## Invert Color
+
+Invert the text colour (swap foreground/background):
+
+```
+Show ~reversed~ for emphasis.
+```
+
+## Hidden Text
+
+Hide text from display using `|` or `$` — useful for notes or off-script remarks:
+
+```
+Begin the speech |remember to smile| then continue.
+```
+
+## Underline
+
+Use double markers `||` or `$$` to underline text:
+
+```
+This word is ||underlined|| for emphasis.
+```
+
+## Colour
+
+Apply colour using `[colour=#hex]...[/colour]`:
+
+```
+[colour=#ffff00]This text appears in yellow[/colour]
+[colour=#ff0000]This text appears in red[/colour]
+```
+
+## Screen Marker
+
+Insert a screen marker for teleprompter control using `(X)`:
+
+```
+Begin speech (X) pause here, then continue.
+```
+
+## Escaping
+
+Prefix any special character with `\` to display it literally:
+
+```
+This is \*not italic\* and this is \~not reversed\~.
+```
+
+## Full Example
+
+```
+Good morning, *everyone*.
+|Don't forget the greeting| Welcome to the ||annual conference||.
+[colour=#ffff00]Please note[/colour] the schedule has changed. (X)
+For questions, contact us at example\@email.com.
+```

packages/webui/src/client/styles/prompter.scss

@@ -313,6 +313,17 @@ body.prompter-scrollbar {
 }
 
 .script-text-formatted {
+	--background-color: #000;
+	--foreground-color: #fff;
+	--header-color: #999;
+
+	color: var(--foreground-color);
+	background: var(--background-color);
+
+	* {
+		color: var(--foreground-color);
+	}
+
 	p {
 		margin: 0;
 		padding: 0;
@@ -368,20 +379,6 @@ body.prompter-scrollbar {
 		height: 100vh;
 	}
 
-	.ProseMirror {
-		outline: none;
-	}
-
-	span.colour.red {
-		color: red;
-	}
-	span.colour.yellow {
-		color: yellow;
-	}
-	rev span.colour.yellow,
-	span.colour.yellow rev {
-		color: rgb(113, 0, 237);
-	}
 	span.screen-marker {
 		margin: 10px;
 	}

packages/webui/src/client/ui/Prompter/Formatted/MdDisplay.tsx

@@ -27,7 +27,15 @@ function MdNode({ content }: { content: Node }): React.ReactNode {
 		case 'underline':
 			return React.createElement('u', {}, renderChildren(content))
 		case 'colour':
-			return React.createElement('span', { className: 'colour ' + content.colour }, renderChildren(content))
+			return React.createElement(
+				'span',
+				{
+					style: {
+						'--foreground-color': content.colour,
+					},
+				},
+				renderChildren(content)
+			)
 		case 'text':
 			return content.value
 		case 'hidden':

packages/webui/src/client/ui/Prompter/Formatted/mdParser/astNodes.ts

@@ -47,7 +47,7 @@ export interface ReverseNode extends ParentNodeBase {
 export interface ColourNode extends ParentNodeBase {
 	type: 'colour'
 	code: string
-	colour: 'red' | 'yellow'
+	colour: string
 }
 
 export interface BackScreenMarkerNode extends NodeBase {

packages/webui/src/client/ui/Prompter/Formatted/mdParser/constructs/colour.ts

@@ -37,13 +37,11 @@ export function colour(): NodeConstruct {
 
 			state.flushBuffer()
 
-			const colour = rest.includes('#ffff00') ? 'yellow' : 'red'
-
 			const colourNode: ColourNode = {
 				type: 'colour',
 				children: [],
 				code: char,
-				colour: colour,
+				colour: rest.slice(7, 14),
 			}
 			state.pushNode(colourNode)