feat(ScriptEditor): working script editor with change callback

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

@@ -1,14 +1,18 @@
 import React, { useEffect, useRef } from 'react'
-import { schema } from 'prosemirror-schema-basic'
 import { undo, redo, history } from 'prosemirror-history'
 import { keymap } from 'prosemirror-keymap'
 import { EditorState } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
 import { baseKeymap } from 'prosemirror-commands'
+import { schema } from './scriptSchema'
+import 'prosemirror-view/style/prosemirror.css'
+import { updateModel } from './plugins/updateModel'
 
 export function Editor({
 	initialValue,
+	className,
 }: {
+	className?: string
 	initialValue?: string
 	onChange?: (e: OnChangeEvent) => void
 }): React.JSX.Element {
@@ -21,17 +25,23 @@ export function Editor({
 	useEffect(() => {
 		if (!containerEl.current) return
 
-		const state = EditorState.create({ schema })
+		const state = EditorState.create({
+			schema,
+			plugins: [history(), keymap({ 'Mod-z': undo, 'Mod-y': redo }), keymap(baseKeymap), updateModel()],
+		})
 		const view = new EditorView(containerEl.current, {
 			state,
-			plugins: [history(), keymap({ 'Mod-z': undo, 'Mod-y': redo }), keymap(baseKeymap)],
 		})
 
 		editorView.current = view
 		editorState.current = state
+
+		return () => {
+			view.destroy()
+		}
 	}, [])
 
-	return <div ref={containerEl}></div>
+	return <div ref={containerEl} className={className}></div>
 }
 
 type OnChangeEvent = {

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

@@ -4,7 +4,7 @@ import { Editor } from './Editor'
 export function ScriptEditor(): React.JSX.Element {
 	return (
 		<>
-			<Editor />
+			<Editor className="bg-black" />
 		</>
 	)
 }

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

@@ -0,0 +1,10 @@
+import { Plugin } from 'prosemirror-state'
+
+export function updateModel() {
+	return new Plugin({
+		appendTransaction: (_tr, _oldState, newState) => {
+			console.log(newState.doc.toJSON())
+			return null
+		},
+	})
+}

packages/apps/client/src/ScriptEditor/scriptSchema.ts

@@ -0,0 +1,36 @@
+import { Schema } from 'prosemirror-model'
+import { nodes } from 'prosemirror-schema-basic'
+
+export const schema = new Schema({
+	nodes: {
+		unmarkedText: {
+			inline: true,
+			marks: '',
+		},
+		text: nodes.text,
+		paragraph: nodes.paragraph,
+		segmentHeading: {
+			group: 'block',
+			content: 'unmarkedText',
+			atom: true,
+		},
+		partHeading: {
+			group: 'block',
+			content: 'unmarkedText',
+			atom: true,
+		},
+		rundownHeading: {
+			group: 'block',
+			content: 'unmarkedText',
+			atom: true,
+		},
+		doc: { content: 'block*' },
+	},
+	marks: {
+		bold: {},
+		italic: {},
+		underline: {},
+		hidden: {},
+		reverse: {},
+	},
+})