@verdant-web/tiptap 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Grant Forrest
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/__browserTests__/react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/__browserTests__/react.test.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EditorContent } from '@tiptap/react';
+import { StarterKit } from '@tiptap/starter-kit';
+import { createMigration, schema } from '@verdant-web/common';
+import { createHooks } from '@verdant-web/react';
+import { ClientDescriptor } from '@verdant-web/store';
+import { userEvent } from '@vitest/browser/context';
+import { Suspense } from 'react';
+import { afterAll, beforeAll, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { createTipTapFieldSchema } from '../fields.js';
+import { useSyncedEditor } from '../react.js';
+const testSchema = schema({
+    version: 1,
+    collections: {
+        posts: schema.collection({
+            name: 'post',
+            primaryKey: 'id',
+            fields: {
+                id: schema.fields.id(),
+                nullableBody: createTipTapFieldSchema({ default: null }),
+                requiredBody: createTipTapFieldSchema({
+                    default: {
+                        type: 'doc',
+                        content: [],
+                    },
+                }),
+            },
+        }),
+    },
+});
+const hooks = createHooks(testSchema);
+let clientDesc;
+let client;
+beforeAll(async () => {
+    clientDesc = new ClientDescriptor({
+        schema: testSchema,
+        oldSchemas: [testSchema],
+        migrations: [createMigration(testSchema)],
+        namespace: 'tiptatp-test',
+    });
+    client = await clientDesc.open();
+});
+afterAll(() => client.close());
+function renderWithProvider(content) {
+    return render(content, {
+        wrapper: ({ children }) => (_jsx(Suspense, { children: _jsx(hooks.Provider, { value: clientDesc, children: _jsx(Suspense, { fallback: _jsx("div", { "data-testid": "suspense", children: "Loading..." }), children: children }) }) })),
+    });
+}
+it('should support non-nullable tiptap schema fields', async () => {
+    const testPost = await client.posts.put({});
+    const TipTapTest = () => {
+        const editor = useSyncedEditor(testPost, 'requiredBody', {
+            editorOptions: { extensions: [StarterKit] },
+        });
+        return (_jsxs("div", { children: [_jsx("div", { children: "Text editor:" }), _jsx(EditorContent, { style: {
+                        width: 500,
+                        height: 300,
+                    }, editor: editor, id: "#editor", "data-testid": "editor" })] }));
+    };
+    const screen = await renderWithProvider(_jsx(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 userEvent.type(editor, 'Hello, world!');
+    await expect.element(editor).toHaveTextContent('Hello, world!');
+    expect(testPost.get('requiredBody').getSnapshot()).toEqual({
+        type: 'doc',
+        attrs: {},
+        from: null,
+        to: null,
+        content: [
+            {
+                type: 'paragraph',
+                attrs: {},
+                content: [
+                    {
+                        type: 'text',
+                        attrs: {},
+                        content: [],
+                        from: null,
+                        to: null,
+                        text: 'Hello, world!',
+                    },
+                ],
+                from: null,
+                to: null,
+                text: null,
+            },
+        ],
+        text: null,
+    });
+});
+it('should support nullable tiptap schema fields with a specified default doc', async () => {
+    const testPost = await client.posts.put({});
+    const TipTapTest = () => {
+        const editor = useSyncedEditor(testPost, 'nullableBody', {
+            editorOptions: { extensions: [StarterKit] },
+            nullDocumentDefault: {
+                type: 'doc',
+                content: [],
+            },
+        });
+        return (_jsxs("div", { children: [_jsx("div", { children: "Text editor:" }), _jsx(EditorContent, { style: {
+                        width: 500,
+                        height: 300,
+                    }, editor: editor, id: "#editor", "data-testid": "editor" })] }));
+    };
+    const screen = await renderWithProvider(_jsx(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 userEvent.type(editor, 'Hello, world!');
+    await expect.element(editor).toHaveTextContent('Hello, world!');
+    expect(testPost.get('nullableBody').getSnapshot()).toEqual({
+        type: 'doc',
+        attrs: {},
+        from: null,
+        to: null,
+        content: [
+            {
+                type: 'paragraph',
+                attrs: {},
+                content: [
+                    {
+                        type: 'text',
+                        attrs: {},
+                        content: [],
+                        from: null,
+                        to: null,
+                        text: 'Hello, world!',
+                    },
+                ],
+                from: null,
+                to: null,
+                text: null,
+            },
+        ],
+        text: null,
+    });
+});
+//# sourceMappingURL=react.test.js.map

package/dist/esm/__browserTests__/react.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.test.js","sourceRoot":"","sources":["../../../src/__browserTests__/react.test.tsx"],"names":[],"mappings":"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"}

package/dist/esm/fields.d.ts

@@ -0,0 +1,21 @@
+import { ShapeFromProperty, StorageAnyFieldSchema, StorageArrayFieldSchema, StorageNumberFieldSchema, StorageObjectFieldSchema, StorageStringFieldSchema } from '@verdant-web/common';
+export type TiptapFieldSchema = StorageObjectFieldSchema<{
+    type: StorageStringFieldSchema;
+    from: StorageNumberFieldSchema;
+    to: StorageNumberFieldSchema;
+    attrs: StorageObjectFieldSchema<{
+        values: StorageAnyFieldSchema;
+    }>;
+    content: StorageArrayFieldSchema<TiptapFieldSchema>;
+    text: StorageStringFieldSchema;
+    marks: StorageArrayFieldSchema<TiptapFieldSchema>;
+}>;
+export type TipTapFieldInitializer = Pick<ShapeFromProperty<TiptapFieldSchema>, 'type'> & Partial<ShapeFromProperty<TiptapFieldSchema>>;
+/**
+ * Creates a generic TipTap schema field. You must invoke this and assign it
+ * individually to every TipTap document field in your schema, DO NOT reuse
+ * the same instance for multiple fields.
+ */
+export declare function createTipTapFieldSchema(options: {
+    default: TipTapFieldInitializer | null;
+}): TiptapFieldSchema;

package/dist/esm/fields.js

@@ -0,0 +1,37 @@
+import { schema, } from '@verdant-web/common';
+/**
+ * Creates a generic TipTap schema field. You must invoke this and assign it
+ * individually to every TipTap document field in your schema, DO NOT reuse
+ * the same instance for multiple fields.
+ */
+export function createTipTapFieldSchema(options) {
+    if (options.default === undefined) {
+        throw new Error('createTiptapFieldSchema requires a default value. Specify "null" to make the field nullable.');
+    }
+    const baseField = schema.fields.object({
+        fields: {},
+        default: () => {
+            if (options.default === null) {
+                return null;
+            }
+            return structuredClone(options.default);
+        },
+        nullable: options.default === null,
+    });
+    return schema.fields.replaceObjectFields(baseField, {
+        type: schema.fields.string(),
+        from: schema.fields.number({ nullable: true }),
+        to: schema.fields.number({ nullable: true }),
+        attrs: schema.fields.map({
+            values: schema.fields.any(),
+        }),
+        content: schema.fields.array({
+            items: baseField,
+        }),
+        text: schema.fields.string({ nullable: true }),
+        marks: schema.fields.array({
+            items: baseField,
+        }),
+    });
+}
+//# sourceMappingURL=fields.js.map

package/dist/esm/fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.js","sourceRoot":"","sources":["../../src/fields.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,GAON,MAAM,qBAAqB,CAAC;AAoB7B;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAAC,OAEvC;IACA,IAAI,OAAO,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACd,8FAA8F,CAC9F,CAAC;IACH,CAAC;IACD,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC;QACtC,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,GAAG,EAAE;YACb,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC9B,OAAO,IAAI,CAAC;YACb,CAAC;YACD,OAAO,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACzC,CAAC;QACD,QAAQ,EAAE,OAAO,CAAC,OAAO,KAAK,IAAI;KAClC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE;QACnD,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;QAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC9C,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC5C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC;YACxB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE;SAC3B,CAAC;QACF,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;YAC5B,KAAK,EAAE,SAAS;SAChB,CAAC;QACF,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC9C,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;YAC1B,KAAK,EAAE,SAAS;SAChB,CAAC;KACF,CAAC,CAAC;AACJ,CAAC"}

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './fields.js';
+export * from './plugins.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './fields.js';
+export * from './plugins.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/esm/plugins.d.ts

@@ -0,0 +1,4 @@
+import { Extension } from '@tiptap/core';
+export declare const NodeIdExtension: (options?: {
+    nodeTypes?: string[];
+}) => Extension<any, any>;

package/dist/esm/plugins.js

@@ -0,0 +1,71 @@
+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();
+        newState.doc.descendants((node, pos) => {
+            var _a;
+            console.log(node);
+            if (!node.isText && (!node.attrs.id || usedIds.has(node.attrs.id))) {
+                const nodeId = id();
+                console.log('adding node id', nodeId);
+                tr.setNodeMarkup(pos, null, Object.assign(Object.assign({}, node.attrs), { id: nodeId }));
+                usedIds.add(nodeId);
+            }
+            else if ((_a = node.attrs) === null || _a === void 0 ? void 0 : _a.id) {
+                usedIds.add(node.attrs.id);
+            }
+        });
+        return tr;
+    },
+});
+const defaultAllNodes = [
+    'blockquote',
+    'bulletList',
+    'codeBlock',
+    'heading',
+    'listItem',
+    'orderedList',
+    'paragraph',
+    'image',
+    'mention',
+    'table',
+    'taskList',
+    'taskItem',
+    'youtube',
+];
+export const NodeIdExtension = (options = {}) => Extension.create({
+    name: 'nodeId',
+    addProseMirrorPlugins() {
+        return [NodeIdPlugin];
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: options.nodeTypes || defaultAllNodes,
+                attributes: {
+                    id: {
+                        default: null,
+                        keepOnSplit: false,
+                        parseHTML: (element) => element.getAttribute('data-id'),
+                        renderHTML: (attributes) => {
+                            if (!attributes.id)
+                                return {};
+                            return {
+                                'data-id': attributes.id,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+});
+//# sourceMappingURL=plugins.js.map

package/dist/esm/plugins.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins.js","sourceRoot":"","sources":["../../src/plugins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,MAAM,YAAY,GAAG,IAAI,MAAM,CAAC;IAC/B,GAAG,EAAE,IAAI,SAAS,CAAC,UAAU,CAAC;IAC9B,iBAAiB,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE;QAC5C,aAAa;QACb,IAAI,QAAQ,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG;YAAE,OAAO;QAC1C,MAAM,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC;QACvB,2CAA2C;QAC3C,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;QAClC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;;YACtC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;gBACpE,MAAM,MAAM,GAAG,EAAE,EAAE,CAAC;gBACpB,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;gBACtC,EAAE,CAAC,aAAa,CAAC,GAAG,EAAE,IAAI,kCACtB,IAAI,CAAC,KAAK,KACb,EAAE,EAAE,MAAM,IACT,CAAC;gBACH,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACrB,CAAC;iBAAM,IAAI,MAAA,IAAI,CAAC,KAAK,0CAAE,EAAE,EAAE,CAAC;gBAC3B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC5B,CAAC;QACF,CAAC,CAAC,CAAC;QACH,OAAO,EAAE,CAAC;IACX,CAAC;CACD,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG;IACvB,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,SAAS;IACT,UAAU;IACV,aAAa;IACb,WAAW;IACX,OAAO;IACP,SAAS;IACT,OAAO;IACP,UAAU;IACV,UAAU;IACV,SAAS;CACT,CAAC;AACF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC9B,UAEI,EAAE,EACL,EAAE,CACH,SAAS,CAAC,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ;IACd,qBAAqB;QACpB,OAAO,CAAC,YAAY,CAAC,CAAC;IACvB,CAAC;IACD,mBAAmB;QAClB,OAAO;YACN;gBACC,KAAK,EAAE,OAAO,CAAC,SAAS,IAAI,eAAe;gBAC3C,UAAU,EAAE;oBACX,EAAE,EAAE;wBACH,OAAO,EAAE,IAAI;wBACb,WAAW,EAAE,KAAK;wBAClB,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC;wBACvD,UAAU,EAAE,CAAC,UAAU,EAAE,EAAE;4BAC1B,IAAI,CAAC,UAAU,CAAC,EAAE;gCAAE,OAAO,EAAE,CAAC;4BAC9B,OAAO;gCACN,SAAS,EAAE,UAAU,CAAC,EAAE;6BACxB,CAAC;wBACH,CAAC;qBACD;iBACD;aACD;SACD,CAAC;IACH,CAAC;CACD,CAAC,CAAC"}

package/dist/esm/react.d.ts

@@ -0,0 +1,11 @@
+import { Editor } from '@tiptap/core';
+import { UseEditorOptions } from '@tiptap/react';
+import { AnyEntity } from '@verdant-web/store';
+type AllowedKey<Ent extends AnyEntity<any, any, any>> = Ent extends never ? string : Ent extends AnyEntity<any, any, infer Shape> ? keyof Shape : never;
+type EntitySnapshot<Ent extends AnyEntity<any, any, any>, Key extends AllowedKey<Ent>> = Ent extends AnyEntity<any, any, infer Snap> ? Key extends keyof Snap ? Snap[Key] : any : never;
+export declare function useSyncedEditor<Ent extends AnyEntity<any, any, any>, Key extends AllowedKey<Ent>>(parent: Ent, fieldName: Key, { editorOptions: extraOptions, editorDependencies, nullDocumentDefault, }?: {
+    editorOptions?: UseEditorOptions;
+    editorDependencies?: any[];
+    nullDocumentDefault?: EntitySnapshot<Ent, Key>;
+}): Editor | null;
+export {};

package/dist/esm/react.js

@@ -0,0 +1,78 @@
+import { useEditor } from '@tiptap/react';
+import { useWatch } from '@verdant-web/react';
+import { useCallback, useEffect, useRef } from 'react';
+export function useSyncedEditor(parent, fieldName, { editorOptions: extraOptions, editorDependencies, nullDocumentDefault, } = {}) {
+    const cachedOptions = useRef({
+        nullDocumentDefault,
+        fieldName,
+    });
+    cachedOptions.current = {
+        nullDocumentDefault,
+        fieldName,
+    };
+    const live = useWatch(parent);
+    const field = live[fieldName];
+    const updatingRef = useRef(false);
+    const update = useCallback((editor) => {
+        if (updatingRef.current) {
+            return;
+        }
+        const newData = editor.getJSON();
+        const value = parent.get(cachedOptions.current.fieldName);
+        if (!value) {
+            parent.set(cachedOptions.current.fieldName, newData);
+        }
+        else {
+            console.log('new data', newData);
+            value.update(newData, {
+                merge: false,
+                dangerouslyDisableMerge: true,
+                replaceSubObjects: false,
+            });
+        }
+    }, [parent]);
+    const cachedInitialContent = useRef(ensureDocShape(getFieldSnapshot(field, nullDocumentDefault, fieldName)));
+    const editor = useEditor(Object.assign(Object.assign({}, extraOptions), { content: cachedInitialContent.current, onUpdate: (ctx) => {
+            var _a;
+            update(ctx.editor);
+            (_a = extraOptions === null || extraOptions === void 0 ? void 0 : extraOptions.onUpdate) === null || _a === void 0 ? void 0 : _a.call(extraOptions, ctx);
+        } }), [update, ...(editorDependencies !== null && editorDependencies !== void 0 ? editorDependencies : [])]);
+    useEffect(() => {
+        function updateFromField() {
+            if (editor && !editor.isDestroyed) {
+                updatingRef.current = true;
+                const { from, to } = editor.state.selection;
+                editor.commands.setContent(ensureDocShape(getFieldSnapshot(field, cachedOptions.current.nullDocumentDefault, cachedOptions.current.fieldName)), false);
+                editor.commands.setTextSelection({ from, to });
+                updatingRef.current = false;
+            }
+        }
+        updateFromField();
+        return field === null || field === void 0 ? void 0 : field.subscribe('changeDeep', (target, info) => {
+            if (!info.isLocal || target === field) {
+                updateFromField();
+            }
+        });
+    }, [field, editor, cachedOptions]);
+    return editor;
+}
+// since the schema doesn't enforce this shape but it's
+// needed for the editor to work, we'll ensure it here
+function ensureDocShape(json) {
+    var _a;
+    for (const node of (_a = json.content) !== null && _a !== void 0 ? _a : []) {
+        // remove undefined nodes
+        node.content = node.content.filter((n) => !!n).map(ensureDocShape);
+    }
+    return json;
+}
+function getFieldSnapshot(field, nullDocumentDefault, fieldName) {
+    const content = field ? field.getSnapshot() : (nullDocumentDefault !== null && nullDocumentDefault !== void 0 ? nullDocumentDefault : null);
+    if (content === null) {
+        throw new Error(`The provided field "${String(fieldName)}" is null and a default document was not provided.
+		Please provide a default document or ensure the field is not null when calling useSyncedEditor, or make your
+		field schema non-null and specify a default document there.`);
+    }
+    return content;
+}
+//# sourceMappingURL=react.js.map

package/dist/esm/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../src/react.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@verdant-web/tiptap",
+  "version": "0.1.0",
+  "access": "public",
+  "type": "module",
+  "main": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./dist/esm/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/esm/react.js",
+      "types": "./dist/esm/react.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "react": "^19.0.0",
+    "@verdant-web/react": "40.2.2",
+    "@verdant-web/store": "4.1.4"
+  },
+  "peerDependenciesMeta": {
+    "@verdant-web/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@verdant-web/common": "2.7.1"
+  },
+  "devDependencies": {
+    "typescript": "5.7.3",
+    "vitest": "3.0.6",
+    "@tiptap/core": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
+    "react": "19.0.0",
+    "@types/react": "19.0.10",
+    "vitest-browser-react": "0.1.1",
+    "@vitest/browser": "3.0.6",
+    "playwright": "1.50.1",
+    "vite": "6.1.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "react-dom": "19.0.0",
+    "@types/react-dom": "19.0.4",
+    "@verdant-web/react": "40.2.2",
+    "@verdant-web/store": "4.1.4",
+    "@verdant-web/cli": "4.8.1",
+    "@verdant-web/server": "3.3.6"
+  },
+  "scripts": {
+    "test": "vitest",
+    "ci:test:unit": "vitest run",
+    "build": "tsc -p tsconfig.json",
+    "prepublish": "pnpm run build",
+    "link": "pnpm link --global",
+    "typecheck": "tsc --noEmit",
+    "demo:generate": "verdant -s ./demo/store/schema.ts -o ./demo/store/.generated -r --select=publish --module=esm",
+    "demo:dev": "vite --config ./demo/vite.config.ts ./demo",
+    "demo:server": "verdant-server"
+  }
+}

package/src/__browserTests__/react.test.tsx

@@ -0,0 +1,189 @@
+import { EditorContent } from '@tiptap/react';
+import { StarterKit } from '@tiptap/starter-kit';
+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 { afterAll, beforeAll, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { createTipTapFieldSchema } from '../fields.js';
+import { useSyncedEditor } from '../react.js';
+
+const testSchema = schema({
+	version: 1,
+	collections: {
+		posts: schema.collection({
+			name: 'post',
+			primaryKey: 'id',
+			fields: {
+				id: schema.fields.id(),
+				nullableBody: createTipTapFieldSchema({ default: null }),
+				requiredBody: createTipTapFieldSchema({
+					default: {
+						type: 'doc',
+						content: [],
+					},
+				}),
+			},
+		}),
+	},
+});
+
+const hooks = createHooks(testSchema);
+
+let clientDesc: ClientDescriptor;
+let client: ClientWithCollections;
+beforeAll(async () => {
+	clientDesc = new ClientDescriptor({
+		schema: testSchema,
+		oldSchemas: [testSchema],
+		migrations: [createMigration(testSchema)],
+		namespace: 'tiptatp-test',
+	});
+	client = await (clientDesc.open() as Promise<ClientWithCollections>);
+});
+
+afterAll(() => client.close());
+
+function renderWithProvider(content: ReactNode) {
+	return render(content, {
+		wrapper: ({ children }) => (
+			<Suspense>
+				<hooks.Provider value={clientDesc}>
+					<Suspense fallback={<div data-testid="suspense">Loading...</div>}>
+						{children}
+					</Suspense>
+				</hooks.Provider>
+			</Suspense>
+		),
+	});
+}
+
+it('should support non-nullable tiptap schema fields', async () => {
+	const testPost = await client.posts.put({});
+
+	const TipTapTest = () => {
+		const editor = useSyncedEditor(testPost, 'requiredBody', {
+			editorOptions: { extensions: [StarterKit] },
+		});
+
+		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('');
+
+	// send keystrokes to the editor
+	await userEvent.type(editor, 'Hello, world!');
+	await expect.element(editor).toHaveTextContent('Hello, world!');
+
+	expect(testPost.get('requiredBody').getSnapshot()).toEqual({
+		type: 'doc',
+		attrs: {},
+		from: null,
+		to: null,
+		content: [
+			{
+				type: 'paragraph',
+				attrs: {},
+				content: [
+					{
+						type: 'text',
+						attrs: {},
+						content: [],
+						from: null,
+						to: null,
+						text: 'Hello, world!',
+					},
+				],
+				from: null,
+				to: null,
+				text: null,
+			},
+		],
+		text: null,
+	});
+});
+
+it('should support nullable tiptap schema fields with a specified default doc', async () => {
+	const testPost = await client.posts.put({});
+
+	const TipTapTest = () => {
+		const editor = useSyncedEditor(testPost, 'nullableBody', {
+			editorOptions: { extensions: [StarterKit] },
+			nullDocumentDefault: {
+				type: 'doc',
+				content: [],
+			},
+		});
+
+		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('');
+
+	// send keystrokes to the editor
+	await userEvent.type(editor, 'Hello, world!');
+	await expect.element(editor).toHaveTextContent('Hello, world!');
+
+	expect(testPost.get('nullableBody').getSnapshot()).toEqual({
+		type: 'doc',
+		attrs: {},
+		from: null,
+		to: null,
+		content: [
+			{
+				type: 'paragraph',
+				attrs: {},
+				content: [
+					{
+						type: 'text',
+						attrs: {},
+						content: [],
+						from: null,
+						to: null,
+						text: 'Hello, world!',
+					},
+				],
+				from: null,
+				to: null,
+				text: null,
+			},
+		],
+		text: null,
+	});
+});

package/src/fields.ts

@@ -0,0 +1,67 @@
+import {
+	schema,
+	ShapeFromProperty,
+	StorageAnyFieldSchema,
+	StorageArrayFieldSchema,
+	StorageNumberFieldSchema,
+	StorageObjectFieldSchema,
+	StorageStringFieldSchema,
+} from '@verdant-web/common';
+
+export type TiptapFieldSchema = StorageObjectFieldSchema<{
+	type: StorageStringFieldSchema;
+	from: StorageNumberFieldSchema;
+	to: StorageNumberFieldSchema;
+	attrs: StorageObjectFieldSchema<{
+		values: StorageAnyFieldSchema;
+	}>;
+	content: StorageArrayFieldSchema<TiptapFieldSchema>;
+	text: StorageStringFieldSchema;
+	marks: StorageArrayFieldSchema<TiptapFieldSchema>;
+}>;
+
+export type TipTapFieldInitializer = Pick<
+	ShapeFromProperty<TiptapFieldSchema>,
+	'type'
+> &
+	Partial<ShapeFromProperty<TiptapFieldSchema>>;
+
+/**
+ * Creates a generic TipTap schema field. You must invoke this and assign it
+ * individually to every TipTap document field in your schema, DO NOT reuse
+ * the same instance for multiple fields.
+ */
+export function createTipTapFieldSchema(options: {
+	default: TipTapFieldInitializer | null;
+}): TiptapFieldSchema {
+	if (options.default === undefined) {
+		throw new Error(
+			'createTiptapFieldSchema requires a default value. Specify "null" to make the field nullable.',
+		);
+	}
+	const baseField = schema.fields.object({
+		fields: {},
+		default: () => {
+			if (options.default === null) {
+				return null;
+			}
+			return structuredClone(options.default);
+		},
+		nullable: options.default === null,
+	});
+	return schema.fields.replaceObjectFields(baseField, {
+		type: schema.fields.string(),
+		from: schema.fields.number({ nullable: true }),
+		to: schema.fields.number({ nullable: true }),
+		attrs: schema.fields.map({
+			values: schema.fields.any(),
+		}),
+		content: schema.fields.array({
+			items: baseField,
+		}),
+		text: schema.fields.string({ nullable: true }),
+		marks: schema.fields.array({
+			items: baseField,
+		}),
+	});
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './fields.js';
+export * from './plugins.js';

package/src/plugins.ts

@@ -0,0 +1,76 @@
+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) => {
+			console.log(node);
+			if (!node.isText && (!node.attrs.id || usedIds.has(node.attrs.id))) {
+				const nodeId = id();
+				console.log('adding node id', nodeId);
+				tr.setNodeMarkup(pos, null, {
+					...node.attrs,
+					id: nodeId,
+				});
+				usedIds.add(nodeId);
+			} else if (node.attrs?.id) {
+				usedIds.add(node.attrs.id);
+			}
+		});
+		return tr;
+	},
+});
+
+const defaultAllNodes = [
+	'blockquote',
+	'bulletList',
+	'codeBlock',
+	'heading',
+	'listItem',
+	'orderedList',
+	'paragraph',
+	'image',
+	'mention',
+	'table',
+	'taskList',
+	'taskItem',
+	'youtube',
+];
+export const NodeIdExtension = (
+	options: {
+		nodeTypes?: string[];
+	} = {},
+) =>
+	Extension.create({
+		name: 'nodeId',
+		addProseMirrorPlugins() {
+			return [NodeIdPlugin];
+		},
+		addGlobalAttributes() {
+			return [
+				{
+					types: options.nodeTypes || defaultAllNodes,
+					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/react.ts

@@ -0,0 +1,144 @@
+import { Editor } from '@tiptap/core';
+import { useEditor, UseEditorOptions } from '@tiptap/react';
+import { useWatch } from '@verdant-web/react';
+import { AnyEntity, ObjectEntity } from '@verdant-web/store';
+import { useCallback, useEffect, useRef } from 'react';
+
+type AllowedKey<Ent extends AnyEntity<any, any, any>> = Ent extends never
+	? string
+	: Ent extends AnyEntity<any, any, infer Shape>
+		? keyof Shape
+		: never;
+
+type EntitySnapshot<
+	Ent extends AnyEntity<any, any, any>,
+	Key extends AllowedKey<Ent>,
+> =
+	Ent extends AnyEntity<any, any, infer Snap>
+		? Key extends keyof Snap
+			? Snap[Key]
+			: any
+		: never;
+
+export function useSyncedEditor<
+	Ent extends AnyEntity<any, any, any>,
+	Key extends AllowedKey<Ent>,
+>(
+	parent: Ent,
+	fieldName: Key,
+	{
+		editorOptions: extraOptions,
+		editorDependencies,
+		nullDocumentDefault,
+	}: {
+		editorOptions?: UseEditorOptions;
+		editorDependencies?: any[];
+		nullDocumentDefault?: EntitySnapshot<Ent, Key>;
+	} = {},
+) {
+	const cachedOptions = useRef({
+		nullDocumentDefault,
+		fieldName,
+	});
+	cachedOptions.current = {
+		nullDocumentDefault,
+		fieldName,
+	};
+	const live = useWatch(parent);
+	const field = live[fieldName] as ObjectEntity<any, any>;
+	const updatingRef = useRef(false);
+	const update = useCallback(
+		(editor: Editor) => {
+			if (updatingRef.current) {
+				return;
+			}
+
+			const newData = editor.getJSON();
+			const value = parent.get(cachedOptions.current.fieldName) as ObjectEntity<
+				any,
+				any
+			> | null;
+			if (!value) {
+				parent.set(cachedOptions.current.fieldName as any, newData);
+			} else {
+				console.log('new data', newData);
+				value.update(newData, {
+					merge: false,
+					dangerouslyDisableMerge: true,
+					replaceSubObjects: false,
+				});
+			}
+		},
+		[parent],
+	);
+
+	const cachedInitialContent = useRef(
+		ensureDocShape(getFieldSnapshot(field, nullDocumentDefault, fieldName)),
+	);
+	const editor = useEditor(
+		{
+			...extraOptions,
+			content: cachedInitialContent.current,
+			onUpdate: (ctx) => {
+				update(ctx.editor);
+				extraOptions?.onUpdate?.(ctx);
+			},
+		},
+		[update, ...(editorDependencies ?? [])],
+	);
+
+	useEffect(() => {
+		function updateFromField() {
+			if (editor && !editor.isDestroyed) {
+				updatingRef.current = true;
+				const { from, to } = editor.state.selection;
+				editor.commands.setContent(
+					ensureDocShape(
+						getFieldSnapshot(
+							field,
+							cachedOptions.current.nullDocumentDefault,
+							cachedOptions.current.fieldName,
+						),
+					),
+					false,
+				);
+				editor.commands.setTextSelection({ from, to });
+				updatingRef.current = false;
+			}
+		}
+
+		updateFromField();
+
+		return field?.subscribe('changeDeep', (target, info) => {
+			if (!info.isLocal || target === field) {
+				updateFromField();
+			}
+		});
+	}, [field, editor, cachedOptions]);
+
+	return editor;
+}
+
+// since the schema doesn't enforce this shape but it's
+// needed for the editor to work, we'll ensure it here
+function ensureDocShape(json: any) {
+	for (const node of json.content ?? []) {
+		// remove undefined nodes
+		node.content = node.content.filter((n: any) => !!n).map(ensureDocShape);
+	}
+	return json;
+}
+
+function getFieldSnapshot(
+	field: ObjectEntity<any, any> | undefined | null,
+	nullDocumentDefault: any,
+	fieldName: string | symbol | number,
+) {
+	const content = field ? field.getSnapshot() : (nullDocumentDefault ?? null);
+	if (content === null) {
+		throw new Error(`The provided field "${String(fieldName)}" is null and a default document was not provided.
+		Please provide a default document or ensure the field is not null when calling useSyncedEditor, or make your
+		field schema non-null and specify a default document there.`);
+	}
+	return content;
+}