@verdant-web/tiptap 1.0.1 → 2.1.0

package/src/__browserTests__/react.test.tsx

@@ -4,10 +4,13 @@ import { createMigration, schema } from '@verdant-web/common';
 import { createHooks } from '@verdant-web/react';
 import { ClientDescriptor, ClientWithCollections } from '@verdant-web/store';
 import { userEvent } from '@vitest/browser/context';
-import { ReactNode, Suspense } from 'react';
+import { ChangeEvent, ReactNode, Suspense } from 'react';
 import { afterAll, beforeAll, expect, it } from 'vitest';
 import { render } from 'vitest-browser-react';
-import { createTipTapFieldSchema } from '../fields.js';
+import {
+	createTipTapFieldSchema,
+	createTipTapFileMapSchema,
+} from '../fields.js';
 import { useSyncedEditor } from '../react.js';
 
 const testSchema = schema({
@@ -25,6 +28,7 @@ const testSchema = schema({
 						content: [],
 					},
 				}),
+				files: createTipTapFileMapSchema(),
 			},
 		}),
 	},
@@ -32,6 +36,19 @@ const testSchema = schema({
 
 const hooks = createHooks(testSchema);
 
+function safeLogger(level: string, ...args: any[]) {
+	try {
+		if (args.some((arg) => typeof arg === 'string' && arg.includes('Redo')))
+			console.debug(
+				...args.map((arg) =>
+					typeof arg === 'object' ? JSON.stringify(arg, undefined, ' ') : arg,
+				),
+			);
+	} catch (err) {
+		console.debug(...args);
+	}
+}
+
 let clientDesc: ClientDescriptor;
 let client: ClientWithCollections;
 beforeAll(async () => {
@@ -40,6 +57,7 @@ beforeAll(async () => {
 		oldSchemas: [testSchema],
 		migrations: [createMigration(testSchema)],
 		namespace: 'tiptatp-test',
+		// log: safeLogger,
 	});
 	client = await (clientDesc.open() as Promise<ClientWithCollections>);
 });
@@ -107,20 +125,20 @@ it('should support non-nullable tiptap schema fields', async () => {
 					{
 						type: 'text',
 						attrs: {},
-						content: [],
-						marks: [],
+						content: null,
+						marks: null,
 						from: null,
 						to: null,
 						text: 'Hello, world!',
 					},
 				],
-				marks: [],
+				marks: null,
 				from: null,
 				to: null,
 				text: null,
 			},
 		],
-		marks: [],
+		marks: null,
 		text: null,
 	});
 });
@@ -176,20 +194,20 @@ it('should support nullable tiptap schema fields with a specified default doc',
 					{
 						type: 'text',
 						attrs: {},
-						content: [],
-						marks: [],
+						content: null,
+						marks: null,
 						from: null,
 						to: null,
 						text: 'Hello, world!',
 					},
 				],
-				marks: [],
+				marks: null,
 				from: null,
 				to: null,
 				text: null,
 			},
 		],
-		marks: [],
+		marks: null,
 		text: null,
 	});
 });
@@ -262,7 +280,7 @@ it('should support Verdant undo and redo', async () => {
 		from: null,
 		to: null,
 		content: [],
-		marks: [],
+		marks: null,
 		text: null,
 	});
 });
@@ -333,15 +351,15 @@ it('should support TipTap undo and redo', async () => {
 		content: [
 			{
 				attrs: {},
-				content: [],
+				content: null,
 				from: null,
-				marks: [],
+				marks: null,
 				text: null,
 				to: null,
 				type: 'paragraph',
 			},
 		],
-		marks: [],
+		marks: null,
 		text: null,
 	});
 });
@@ -394,7 +412,202 @@ it('should initialize from an existing document', async () => {
 	const screen = await renderWithProvider(<TipTapTest />);
 	await expect.element(screen.getByTestId('editor')).toBeVisible();
 
+	const editor = screen.getByTestId('editor').getByRole('textbox');
+	await expect.element(editor).toHaveTextContent('Hello, world!');
+});
+
+function testLog(...args: any[]) {
+	console.debug('[TEST]', ...args);
+}
+
+it('should withstand multiple edits, undo, and redo consistently', async () => {
+	const testPost = await client.posts.put({
+		requiredBody: {
+			type: 'doc',
+			content: [
+				{
+					type: 'paragraph',
+					content: [
+						{
+							type: 'text',
+							text: 'Hello, world!',
+						},
+					],
+				},
+			],
+		},
+	});
+
+	// reset history
+	await client.entities.flushAllBatches();
+	client.undoHistory.clear();
+
+	const TipTapTest = () => {
+		const editor = useSyncedEditor(testPost, 'requiredBody', {
+			editorOptions: {
+				extensions: [StarterKit.configure({ history: false })],
+			},
+		});
+
+		return (
+			<div>
+				<div>Text editor:</div>
+				<EditorContent
+					style={{
+						width: 500,
+						height: 300,
+					}}
+					editor={editor}
+					id="#editor"
+					data-testid="editor"
+				/>
+			</div>
+		);
+	};
+
+	const screen = await renderWithProvider(<TipTapTest />);
+	await expect.element(screen.getByTestId('editor')).toBeVisible();
+
+	const editor = screen.getByTestId('editor').getByRole('textbox');
+	await expect.element(editor).toHaveTextContent('Hello, world!');
+
+	await userEvent.type(editor, '[pageDown]');
+	await userEvent.type(editor, '\nLine 2!');
+
+	await client.entities.flushAllBatches();
+
+	await userEvent.type(editor, '\nLine 3!');
+
+	await client.entities.flushAllBatches();
+
+	expect(client.undoHistory.canUndo).toBe(true);
+
+	await client.undoHistory.undo();
+	await client.entities.flushAllBatches();
+
+	await expect.element(editor).toHaveTextContent(/^Hello, world!Line 2!$/);
+
+	await client.undoHistory.redo();
+	await client.entities.flushAllBatches();
+
+	await expect
+		.element(editor)
+		.toHaveTextContent(/^Hello, world!Line 2!Line 3!$/);
+
+	await client.undoHistory.undo();
+	await client.entities.flushAllBatches();
+
+	await expect.element(editor).toHaveTextContent(/^Hello, world!Line 2!$/);
+
+	// I've noticed some strangeness when restoring a deleted block
+	// when the editor is not on the same line as the deletion,
+	// not sure if this is actually related to cursor position but
+	// testing anyway.
+	await userEvent.type(editor, '[arrowUp]');
+
+	await client.undoHistory.redo();
+	await client.entities.flushAllBatches();
+
+	await expect
+		.element(editor)
+		.toHaveTextContent(/^Hello, world!Line 2!Line 3!$/);
+});
+
+it('should support media nodes', async () => {
+	const testPost = await client.posts.put({});
+
+	// reset history
+	await client.entities.flushAllBatches();
+	client.undoHistory.clear();
+
+	const user = userEvent.setup();
+
+	const TipTapTest = () => {
+		const editor = useSyncedEditor(testPost, 'requiredBody', {
+			editorOptions: {
+				extensions: [StarterKit.configure({ history: false })],
+			},
+			files: testPost.get('files'),
+		});
+
+		const insertMedia = async (ev: ChangeEvent<HTMLInputElement>) => {
+			const file = ev.target.files?.[0];
+			if (!file) return;
+			editor?.chain().insertMedia(file).run();
+		};
+
+		return (
+			<div>
+				<input type="file" onChange={insertMedia} data-testid="insert-media" />
+				<div>Text editor:</div>
+				<EditorContent
+					style={{
+						width: 500,
+						height: 300,
+					}}
+					editor={editor}
+					id="#editor"
+					data-testid="editor"
+				/>
+			</div>
+		);
+	};
+
+	// load the image fixture to a file
+	const imageRes = await fetch('/cat.jpg', { method: 'GET' });
+	const imageBlob = await imageRes.blob();
+
+	const screen = await renderWithProvider(<TipTapTest />);
+	await expect.element(screen.getByTestId('editor')).toBeVisible();
+
 	const editor = screen.getByTestId('editor').getByRole('textbox');
 	await expect.element(editor).toHaveTextContent('');
+
+	// send keystrokes to the editor
+	await user.type(editor, 'Hello, world!');
 	await expect.element(editor).toHaveTextContent('Hello, world!');
+
+	// simulate paste of an image
+	// load the image into the clipboard
+	await user.upload(
+		screen.getByTestId('insert-media'),
+		new File([imageBlob], 'cat.jpg', { type: 'image/jpeg' }),
+	);
+
+	// the image should be visible in the editor
+	await expect.element(screen.getByRole('img')).toBeVisible();
+
+	const audioRes = await fetch('/cat.m4a', { method: 'GET' });
+	const audioBlob = await audioRes.blob();
+	await user.upload(
+		screen.getByTestId('insert-media'),
+		new File([audioBlob], 'cat.m4a', { type: 'audio/m4a' }),
+	);
+
+	// the audio should be visible in the editor
+	const audio = screen.container.querySelector('audio');
+	expect(audio).not.toBe(null);
+	await expect.element(audio!).toBeVisible();
+
+	const videoRes = await fetch('/cat.mp4', { method: 'GET' });
+	const videoBlob = await videoRes.blob();
+	await user.upload(
+		screen.getByTestId('insert-media'),
+		new File([videoBlob], 'cat.mp4', { type: 'video/mp4' }),
+	);
+
+	// the video should be visible in the editor
+	const video = screen.container.querySelector('video');
+	expect(video).not.toBe(null);
+	await expect.element(video!).toBeVisible();
+
+	const files = testPost.get('files');
+	expect(files.values().length).toBe(3);
+
+	// delete all media nodes; the files should also be removed from Verdant.
+	await user.keyboard('{Delete}{Delete}{Delete}');
+	await expect
+		.element(screen.getByTestId('editor'))
+		.toHaveTextContent('Hello, world!');
+	expect(files.values().length).toBe(0);
 });

package/src/extensions/NodeId.ts

@@ -0,0 +1,67 @@
+import { Extension } from '@tiptap/core';
+
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { id } from '@verdant-web/store';
+
+const NodeIdPlugin = new Plugin({
+	key: new PluginKey('node-ids'),
+	appendTransaction: (_, oldState, newState) => {
+		// no changes
+		if (newState.doc === oldState.doc) return;
+		const tr = newState.tr;
+		// force replacement of any duplicates, too
+		const usedIds = new Set<string>();
+		newState.doc.descendants((node, pos) => {
+			if (
+				!node.isText &&
+				(!node.attrs.id || usedIds.has(node.attrs.id)) &&
+				node !== newState.doc
+			) {
+				const nodeId = id();
+				try {
+					tr.setNodeMarkup(pos, null, {
+						...node.attrs,
+						id: nodeId,
+					});
+					usedIds.add(nodeId);
+				} catch (err) {
+					console.error('Error assigning node ID', err);
+				}
+			} else if (node.attrs?.id) {
+				usedIds.add(node.attrs.id);
+			}
+		});
+		return tr;
+	},
+});
+export const NodeIdExtension = Extension.create({
+	name: 'nodeId',
+	addProseMirrorPlugins() {
+		return [NodeIdPlugin];
+	},
+	addOptions() {
+		return {
+			types: [],
+		};
+	},
+	addGlobalAttributes() {
+		return [
+			{
+				types: this.options.types,
+				attributes: {
+					id: {
+						default: null,
+						keepOnSplit: false,
+						parseHTML: (element) => element.getAttribute('data-id'),
+						renderHTML: (attributes) => {
+							if (!attributes.id) return {};
+							return {
+								'data-id': attributes.id,
+							};
+						},
+					},
+				},
+			},
+		];
+	},
+});

package/src/{plugins.ts → extensions/Verdant.ts}

@@ -1,75 +1,6 @@
 import { Extension, JSONContent } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
 import { assignOid, cloneDeep, maybeGetOid } from '@verdant-web/common';
-import {
-	AnyEntity,
-	getEntityClient,
-	id,
-	ObjectEntity,
-} from '@verdant-web/store';
-
-const NodeIdPlugin = new Plugin({
-	key: new PluginKey('node-ids'),
-	appendTransaction: (_, oldState, newState) => {
-		// no changes
-		if (newState.doc === oldState.doc) return;
-		const tr = newState.tr;
-		// force replacement of any duplicates, too
-		const usedIds = new Set<string>();
-		newState.doc.descendants((node, pos) => {
-			if (
-				!node.isText &&
-				(!node.attrs.id || usedIds.has(node.attrs.id)) &&
-				node !== newState.doc
-			) {
-				const nodeId = id();
-				try {
-					tr.setNodeMarkup(pos, null, {
-						...node.attrs,
-						id: nodeId,
-					});
-					usedIds.add(nodeId);
-				} catch (err) {
-					console.error('Error assigning node ID', err);
-				}
-			} else if (node.attrs?.id) {
-				usedIds.add(node.attrs.id);
-			}
-		});
-		return tr;
-	},
-});
-export const NodeIdExtension = Extension.create({
-	name: 'nodeId',
-	addProseMirrorPlugins() {
-		return [NodeIdPlugin];
-	},
-	addOptions() {
-		return {
-			types: [],
-		};
-	},
-	addGlobalAttributes() {
-		return [
-			{
-				types: this.options.types,
-				attributes: {
-					id: {
-						default: null,
-						keepOnSplit: false,
-						parseHTML: (element) => element.getAttribute('data-id'),
-						renderHTML: (attributes) => {
-							if (!attributes.id) return {};
-							return {
-								'data-id': attributes.id,
-							};
-						},
-					},
-				},
-			},
-		];
-	},
-});
+import { AnyEntity, getEntityClient, ObjectEntity } from '@verdant-web/store';
 
 export const verdantIdAttribute = 'data-verdant-oid';
 export interface VerdantExtensionOptions {
@@ -180,7 +111,7 @@ export const VerdantExtension = Extension.create<
 			const field = parent.get(fieldName) as ObjectEntity<any, any> | null;
 			if (field) {
 				unsubscribe = field.subscribe('changeDeep', (target, info) => {
-					if (!info.isLocal || target === field) {
+					if (!field.deleted && (!info.isLocal || target === field)) {
 						updateFromField(field);
 					}
 				});
@@ -210,7 +141,7 @@ export const VerdantExtension = Extension.create<
 		} else {
 			// re-assign oids to data objects so they can be diffed more effectively
 			// against existing data
-			consumeOidsAndAssignToSnapshots(newData);
+			formatSnapshotForVerdantAndAssignOids(newData);
 			// printAllOids(newData);
 			const client = getEntityClient(value);
 			client.batch(this.options.batchConfig).run(() => {
@@ -264,13 +195,29 @@ export function createVerdantExtension<
 	});
 }
 
-function consumeOidsAndAssignToSnapshots(doc: JSONContent) {
+function formatSnapshotForVerdantAndAssignOids(doc: JSONContent) {
 	if (doc.attrs?.[verdantIdAttribute] !== undefined) {
 		assignOid(doc, doc.attrs[verdantIdAttribute]);
 		delete doc.attrs[verdantIdAttribute];
 	}
+	// make sure all fields are present, even if null.
+	if (doc.from === undefined) {
+		doc.from = null;
+	}
+	if (doc.to === undefined) {
+		doc.to = null;
+	}
+	if (doc.text === undefined) {
+		doc.text = null as any;
+	}
+	if (doc.attrs === undefined) {
+		doc.attrs = {};
+	}
+	if (doc.marks === undefined) {
+		doc.marks = null as any;
+	}
 	if (doc.content) {
-		doc.content.forEach(consumeOidsAndAssignToSnapshots);
+		doc.content.forEach(formatSnapshotForVerdantAndAssignOids);
 	}
 }
 
@@ -279,7 +226,7 @@ function consumeOidsAndAssignToSnapshots(doc: JSONContent) {
 function ensureDocShape(json: any) {
 	for (const node of json.content ?? []) {
 		// remove undefined nodes
-		node.content = node.content.filter((n: any) => !!n).map(ensureDocShape);
+		node.content = node.content?.filter((n: any) => !!n).map(ensureDocShape);
 	}
 	return json;
 }
@@ -311,13 +258,3 @@ function addOidAttrs(doc: JSONContent) {
 		doc.content.forEach(addOidAttrs);
 	}
 }
-
-function printAllOids(obj: any) {
-	if (obj && typeof obj === 'object') {
-		const oid = maybeGetOid(obj);
-		if (oid) console.log(oid, obj);
-		for (const key in obj) {
-			printAllOids(obj[key]);
-		}
-	}
-}