feat: saving script edits SOFIE-2882

packages/apps/backend/src/api-server/services/PartService.ts

@@ -1,6 +1,11 @@
 import EventEmitter from 'eventemitter3'
 import { Application, PaginationParams, Params } from '@feathersjs/feathers'
-import { ServiceTypes, Services, PartServiceDefinition as Definition } from '@sofie-prompter-editor/shared-model'
+import {
+	ServiceTypes,
+	Services,
+	PartServiceDefinition as Definition,
+	ScriptContents,
+} from '@sofie-prompter-editor/shared-model'
 export { PlaylistServiceDefinition } from '@sofie-prompter-editor/shared-model'
 import { PublishChannels } from '../PublishChannels.js'
 import { CustomFeathersService } from './lib.js'
@@ -110,6 +115,16 @@ export class PartService extends EventEmitter<Definition.Events> implements Defi
 	public async remove(_id: NullId, _params?: Params): Promise<Result> {
 		throw new NotImplemented(`Not supported`)
 	}
+
+	public async updateScript(
+		data: {
+			partId: Id
+			script: ScriptContents
+		},
+		_params?: Params
+	): Promise<void> {
+		this.store.parts.updateScript(data.partId, data.script)
+	}
 }
 type Result = Definition.Result
 type Id = Definition.Id

packages/apps/backend/src/data-stores/PartStore.ts

@@ -1,21 +1,20 @@
-import { IReactionDisposer, action, autorun, makeObservable, observable } from 'mobx'
+import { IReactionDisposer, action, autorun, observable } from 'mobx'
 import isEqual from 'lodash.isequal'
-import { Part, PartId } from '@sofie-prompter-editor/shared-model'
+import { Part, PartId, ScriptContents } from '@sofie-prompter-editor/shared-model'
 import { Transformers } from '../sofie-core-connection/dataTransformers/Transformers.js'
 
 import * as Core from '../sofie-core-connection/CoreDataTypes/index.js'
 
 export class PartStore {
 	public readonly parts = observable.map<PartId, Part>()
 
+	/**
+	 * This is not observable, as it is internal and reactivity is handled manually when updating
+	 */
+	private readonly _partScripts = new Map<PartId, ScriptContents>()
+
 	private partAutoruns = new Map<Core.PartId, IReactionDisposer>()
 
-	constructor() {
-		makeObservable(this, {
-			_updatePart: action,
-			_removePart: action,
-		})
-	}
 	connectTransformers(transformers: Transformers) {
 		// Observe and retrieve parts from the transformer:
 		autorun(() => {
@@ -46,7 +45,19 @@ export class PartStore {
 							const partId = transformers.parts.transformPartId(corePartId)
 
 							if (part) {
-								if (!isEqual(this.parts.get(part._id), part)) this._updatePart(partId, part)
+								const oldPart = this.parts.get(partId)
+								const hasScriptChanged = oldPart && oldPart.scriptContents !== part.scriptContents
+								if (hasScriptChanged) {
+									// Discard the edited script whenever the original script changes
+									this._partScripts.delete(partId)
+								}
+
+								const fullPart: Part = {
+									...part,
+									editedScriptContents: this._partScripts.get(partId),
+								}
+
+								if (hasScriptChanged || !isEqual(this.parts.get(part._id), fullPart)) this._updatePart(partId, fullPart)
 							} else {
 								if (this.parts.has(partId)) this._removePart(partId)
 							}
@@ -56,10 +67,24 @@ export class PartStore {
 			}
 		})
 	}
-	_updatePart(partId: PartId, part: Part) {
+
+	updateScript = action((id: PartId, scriptContents: string) => {
+		this._partScripts.set(id, scriptContents)
+
+		const part = this.parts.get(id)
+		if (!part) throw new Error('Not found')
+
+		this.parts.set(id, {
+			...part,
+			editedScriptContents: scriptContents,
+		})
+	})
+
+	private _updatePart = action((partId: PartId, part: Part) => {
 		this.parts.set(partId, part)
-	}
-	_removePart(partId: PartId) {
+	})
+	private _removePart = action((partId: PartId) => {
 		this.parts.delete(partId)
-	}
+		this._partScripts.delete(partId)
+	})
 }

packages/apps/backend/src/sofie-core-connection/dataTransformers/PartTransformer.ts

@@ -180,9 +180,8 @@ export class PartTransformer {
 				label: derived.displayLabel,
 			},
 			scriptContents: derived.scriptContents,
+			editedScriptContents: undefined,
 		})
-
-		return undefined
 	})
 
 	updateCorePart(partId: Core.PartId, part: Core.DBPart | undefined) {

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

@@ -6,10 +6,11 @@ export const Line = observer(function Line({ line }: { line: UILine }): React.Re
 	return (
 		<>
 			<h3>{line.slug}</h3>
-			{!line.script ? <p>&nbsp;</p> : null}
-			{line.script?.split('\n').map((paragraph) => (
-				<p key={paragraph}>{paragraph}</p>
-			))}
+			{!line.script ? (
+				<p>&nbsp;</p>
+			) : (
+				line.script.split('\n').map((paragraph, i) => <p key={paragraph + '_' + i}>{paragraph}</p>)
+			)}
 		</>
 	)
 })

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

@@ -13,7 +13,7 @@ import { EXTERNAL_STATE_CHANGE, updateModel } from './plugins/updateModel'
 import { readOnlyNodeFilter } from './plugins/readOnlyNodeFilter'
 import { formatingKeymap } from './keymaps'
 import { deselectAll } from './commands/deselectAll'
-import { fromMarkdown } from 'src/lib/prosemirrorDoc'
+import { fromMarkdown, toMarkdown } from 'src/lib/prosemirrorDoc'
 import { RootAppStore } from 'src/stores/RootAppStore'
 import { IReactionDisposer, reaction } from 'mobx'
 
@@ -216,7 +216,17 @@ function makeNewEditorState(doc: Node): EditorState {
 			keymap(formatingKeymap),
 			keymap(baseKeymap),
 			readOnlyNodeFilter(),
-			updateModel((lineId, change) => console.log(lineId, change)),
+			updateModel((lineId, lineNodes) => {
+				console.log(lineId, lineNodes)
+
+				// Future: debounce? locking? require manual triggering of the save?
+				const openRundown = RootAppStore.rundownStore.openRundown
+				if (openRundown) {
+					const compiledMarkdown = toMarkdown(lineNodes)
+
+					openRundown.updatePartScript(lineId, compiledMarkdown)
+				}
+			}),
 		],
 		doc,
 	})

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

@@ -1,7 +1,8 @@
 import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { schema } from 'src/components/ScriptEditor/scriptSchema'
-import { Node as MdAstNode } from './mdParser/astNodes'
+import { Node as MdAstNode, RootNode as MdRootNode } from './mdParser/astNodes'
 import createMdParser from './mdParser'
+import { assertNever } from '@sofie-prompter-editor/shared-lib'
 
 export function fromMarkdown(text: string | null): ProsemirrorNode[] {
 	if (text === null) return []
@@ -41,3 +42,79 @@ function traverseMdAstNodes(nodes: MdAstNode[]): ProsemirrorNode[] {
 
 	return result
 }
+
+export function toMarkdown(nodes: ProsemirrorNode[]): string {
+	if (nodes.length === 0) return ''
+
+	const mdAst: MdRootNode = {
+		type: 'root',
+		children: nodes.map(prosemirrorNodeToMarkdown),
+	}
+
+	return stringifyMarkdown(mdAst)
+}
+
+function stringifyMarkdown(mdAst: MdAstNode): string {
+	if (mdAst.type === 'root') {
+		return mdAst.children.map(stringifyMarkdown).join('\n')
+	} else if (mdAst.type === 'paragraph') {
+		return mdAst.children.map(stringifyMarkdown).join('')
+	} else if (mdAst.type === 'text') {
+		return mdAst.value
+	} else if (mdAst.type === 'emphasis' || mdAst.type === 'strong' || mdAst.type === 'reverse') {
+		return `${mdAst.code}${mdAst.children.map(stringifyMarkdown).join('')}${mdAst.code}`
+	} else {
+		assertNever(mdAst)
+		console.warn(mdAst)
+		return '[UNKNOWN]'
+	}
+}
+
+function prosemirrorNodeToMarkdown(node: ProsemirrorNode): MdAstNode {
+	if (node.type === schema.nodes.paragraph) {
+		const children: MdAstNode[] = []
+		for (let i = 0; i < node.childCount; i++) {
+			children.push(prosemirrorNodeToMarkdown(node.child(i)))
+		}
+
+		return {
+			type: 'paragraph',
+			children: children,
+		}
+	} else if (node.type === schema.nodes.text) {
+		let textNode: MdAstNode = {
+			type: 'text',
+			value: node.text ?? '',
+		}
+
+		if (node.marks.find((mark) => mark.type === schema.marks.bold)) {
+			textNode = {
+				type: 'strong',
+				children: [textNode],
+				code: '**',
+			}
+		}
+		if (node.marks.find((mark) => mark.type === schema.marks.italic)) {
+			textNode = {
+				type: 'emphasis',
+				children: [textNode],
+				code: '__',
+			}
+		}
+		if (node.marks.find((mark) => mark.type === schema.marks.reverse)) {
+			textNode = {
+				type: 'reverse',
+				children: [textNode],
+				code: '~',
+			}
+		}
+
+		return textNode
+	} else {
+		console.warn(node)
+		return {
+			type: 'text',
+			value: '[UNKNOWN]',
+		}
+	}
+}

packages/apps/client/src/model/UILine.ts

@@ -52,7 +52,7 @@ export class UILine {
 		this.identifier = json.identifier ?? null
 		this.slug = json.label
 		this.rank = json.rank
-		this.script = json.scriptContents ?? null
+		this.script = json.editedScriptContents ?? json.scriptContents ?? null
 		this.isNew = json.isNew ?? false
 		this.expectedDuration = json.expectedDuration ?? null
 		this.lineType = {

packages/apps/client/src/model/UIRundown.ts

@@ -1,9 +1,11 @@
 import { action, computed, makeAutoObservable, observable } from 'mobx'
 import {
+	PartId,
 	Rundown,
 	RundownId,
 	RundownPlaylist,
 	RundownPlaylistId,
+	ScriptContents,
 	Segment,
 	SegmentId,
 } from '@sofie-prompter-editor/shared-model'
@@ -29,7 +31,7 @@ export class UIRundown {
 		})
 		this.init().catch(console.error)
 	}
-	async init() {
+	private async init() {
 		await this.store.connection.rundown.subscribeToRundownsInPlaylist(this.id)
 
 		const rundowns = await this.store.connection.rundown.find({
@@ -145,4 +147,11 @@ export class UIRundown {
 		// update existing segment
 		existing.updateFromJson(json)
 	})
+
+	async updatePartScript(partId: PartId, script: ScriptContents): Promise<void> {
+		await this.store.connection.part.updateScript({
+			partId,
+			script,
+		})
+	}
 }

packages/shared/model/src/client-server-api/PartService.ts

@@ -6,7 +6,7 @@ import {
 	assertConstIsValid,
 	assertConstIncludesAllMethods,
 } from './lib.js'
-import { Part } from '../model/index.js'
+import { Part, ScriptContents } from '../model/index.js'
 import { Diff } from '../patch.js'
 
 /** List of all method names */
@@ -18,6 +18,7 @@ export const ALL_METHODS = [
 	// 'patch',
 	'remove',
 	//
+	'updateScript',
 ] as const
 /** The methods exposed by this class are exposed in the API */
 interface Methods extends Omit<ServiceMethods, 'patch'> {
@@ -34,7 +35,13 @@ interface Methods extends Omit<ServiceMethods, 'patch'> {
 
 	/** updates .isNew */
 	// setIsNew(read: boolean): Promise<void>
-	// updateScript(scriptContents?: ScriptContents): Promise<void>
+	updateScript(
+		data: {
+			partId: Id
+			script: ScriptContents
+		},
+		params?: Params
+	): Promise<void>
 }
 export interface Service extends Methods, EventEmitter<Events> {}
 

packages/shared/model/src/model/Part.ts

@@ -46,7 +46,10 @@ export interface Part extends DataObject {
 		label: string // ie sourceLayer.name in Sofie
 	}
 
+	/** scriptContents from Core */
 	scriptContents?: ScriptContents
+	/** edited scriptContents. While this is set, display this in favor of scriptContents */
+	editedScriptContents?: ScriptContents
 }
 
 export enum PartDisplayType {