@opensaas/stack-tiptap 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,8 @@
+
+> @opensaas/stack-tiptap@0.1.0 build /home/runner/work/stack/stack/packages/tiptap
+> tsc && npm run copy:css
+
+
+> @opensaas/stack-tiptap@0.1.0 copy:css
+> mkdir -p dist/styles && cp src/styles/tiptap.css dist/styles/
+

package/README.md

@@ -0,0 +1,335 @@
+# @opensaas/stack-tiptap
+
+Rich text editor integration for OpenSaas Stack using [Tiptap](https://tiptap.dev).
+
+## Features
+
+- ✅ Rich text editing with Tiptap editor
+- ✅ JSON storage in database
+- ✅ SSR-safe Next.js integration
+- ✅ Edit and read-only modes
+- ✅ Customizable toolbar and UI options
+- ✅ Full TypeScript support
+- ✅ Integrates with OpenSaas access control
+
+## Installation
+
+This package is designed as a separate optional dependency to keep the core stack lightweight.
+
+```bash
+pnpm add @opensaas/stack-tiptap
+```
+
+The following peer dependencies are required:
+
+- `@opensaas/stack-core`
+- `@opensaas/stack-ui`
+- `next`
+- `react`
+- `react-dom`
+
+## Usage
+
+### Basic Setup
+
+1. **Register the field component** on the client side:
+
+```typescript
+// lib/register-fields.ts
+'use client'
+
+import { registerFieldComponent } from '@opensaas/stack-ui'
+import { TiptapField } from '@opensaas/stack-tiptap'
+
+registerFieldComponent('richText', TiptapField)
+```
+
+2. **Import the registration in your admin page**:
+
+```typescript
+// app/admin/[[...admin]]/page.tsx
+import { AdminUI } from "@opensaas/stack-ui";
+import config from "../../../opensaas.config";
+import "../../../lib/register-fields"; // Import to trigger registration
+
+export default async function AdminPage() {
+  // ... your code
+  return <AdminUI config={config} />;
+}
+```
+
+3. **Define your schema** with the `richText` field builder:
+
+```typescript
+// opensaas.config.ts
+import { config, list } from '@opensaas/stack-core'
+import { text } from '@opensaas/stack-core/fields'
+import { richText } from '@opensaas/stack-tiptap/fields'
+
+export default config({
+  db: {
+    provider: 'sqlite',
+    url: 'file:./dev.db',
+  },
+  lists: {
+    Article: list({
+      fields: {
+        title: text({ validation: { isRequired: true } }),
+        content: richText({
+          validation: { isRequired: true },
+        }),
+      },
+    }),
+  },
+})
+```
+
+4. Generate Prisma schema:
+
+```bash
+pnpm generate
+```
+
+This will create a Prisma field with type `Json`:
+
+```prisma
+model Article {
+  id        String   @id @default(cuid())
+  title     String
+  content   Json     // Tiptap JSON content
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+```
+
+### Field Options
+
+#### Validation
+
+```typescript
+content: richText({
+  validation: {
+    isRequired: true, // Make field required
+  },
+})
+```
+
+#### UI Customization
+
+```typescript
+content: richText({
+  ui: {
+    placeholder: 'Start writing...',
+    minHeight: 200, // Minimum editor height in pixels
+    maxHeight: 800, // Maximum editor height (scrollable)
+  },
+})
+```
+
+### Access Control
+
+Rich text fields work seamlessly with OpenSaas access control:
+
+```typescript
+Article: list({
+  fields: {
+    content: richText({
+      validation: { isRequired: true },
+      access: {
+        read: () => true,
+        create: isSignedIn,
+        update: isAuthor,
+      },
+    }),
+  },
+})
+```
+
+### Database Operations
+
+Content is stored as JSON and can be queried using Prisma's JSON operations:
+
+```typescript
+import { prisma } from './lib/context'
+
+// Create article with rich text
+const article = await prisma.article.create({
+  data: {
+    title: 'My Article',
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: 'Hello world!' }],
+        },
+      ],
+    },
+  },
+})
+
+// Query articles
+const articles = await prisma.article.findMany({
+  select: {
+    title: true,
+    content: true,
+  },
+})
+```
+
+## Component Features
+
+The `TiptapField` component includes:
+
+### Text Formatting
+
+- **Bold**
+- _Italic_
+- ~~Strike-through~~
+
+### Headings
+
+- H1, H2, H3
+
+### Lists
+
+- Bullet lists
+- Ordered lists
+
+### Blockquotes
+
+- Quote blocks
+
+### Modes
+
+- **Edit mode**: Full toolbar with all formatting options
+- **Read mode**: Render-only view (no toolbar)
+
+## Advanced Usage
+
+### Custom Field Component
+
+Create a custom Tiptap component with additional extensions:
+
+```typescript
+// components/CustomTiptapField.tsx
+"use client";
+
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+
+export function CustomTiptapField(props) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link,
+      Image,
+    ],
+    content: props.value,
+    immediatelyRender: false,
+    onUpdate: ({ editor }) => {
+      props.onChange(editor.getJSON());
+    },
+  });
+
+  return <EditorContent editor={editor} />;
+}
+```
+
+Then use it in your config:
+
+```typescript
+import { registerFieldComponent } from '@opensaas/stack-ui'
+import { CustomTiptapField } from './components/CustomTiptapField'
+
+// Global registration
+registerFieldComponent('richTextExtended', CustomTiptapField)
+
+// Use in config
+fields: {
+  content: richText({
+    ui: { fieldType: 'richTextExtended' },
+  })
+}
+
+// Or per-field override
+fields: {
+  content: richText({
+    ui: { component: CustomTiptapField },
+  })
+}
+```
+
+## Architecture
+
+This package follows OpenSaas's extensibility pattern:
+
+1. **Field Builder** (`richText()`) - Defines field configuration
+   - Returns `RichTextField` type
+   - Implements `getZodSchema()`, `getPrismaType()`, `getTypeScriptType()`
+   - Stores data as `Json` in Prisma
+
+2. **React Component** (`TiptapField`) - UI implementation
+   - Client component with `"use client"` directive
+   - SSR-safe with `immediatelyRender: false`
+   - Supports edit and read modes
+
+3. **No Core Modifications** - Extends stack without changes
+   - Uses `BaseFieldConfig` extension point
+   - Compatible with access control system
+   - Works with hooks and validation
+
+## Example
+
+See `examples/tiptap-demo` for a complete working example demonstrating:
+
+- Multiple rich text fields
+- Custom UI options
+- Access control integration
+- Database operations
+
+## API Reference
+
+### `richText(options?)`
+
+Creates a rich text field configuration.
+
+**Options:**
+
+- `validation.isRequired` - Make field required (default: `false`)
+- `ui.placeholder` - Placeholder text (default: `"Start writing..."`)
+- `ui.minHeight` - Minimum editor height in pixels (default: `200`)
+- `ui.maxHeight` - Maximum editor height in pixels (default: `undefined`)
+- `ui.component` - Custom React component
+- `ui.fieldType` - Global field type name
+- `access` - Field-level access control
+
+**Returns:** `RichTextField`
+
+### `TiptapField` Component
+
+React component for rendering the Tiptap editor.
+
+**Props:**
+
+- `name: string` - Field name
+- `value: any` - JSON content value
+- `onChange: (value: any) => void` - Change handler
+- `label: string` - Field label
+- `error?: string` - Validation error message
+- `disabled?: boolean` - Disable editing
+- `required?: boolean` - Show required indicator
+- `mode?: "read" | "edit"` - Display mode
+- `placeholder?: string` - Placeholder text
+- `minHeight?: number` - Minimum height
+- `maxHeight?: number` - Maximum height
+
+## Contributing
+
+Contributions are welcome! This package is part of the OpenSaas Stack monorepo.
+
+## License
+
+MIT

package/dist/components/TiptapField.d.ts

@@ -0,0 +1,21 @@
+import { UseEditorOptions } from '@tiptap/react';
+import '../styles/tiptap.css';
+export interface TiptapFieldProps {
+    name: string;
+    value: UseEditorOptions['content'];
+    onChange: UseEditorOptions['onUpdate'];
+    label: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    mode?: 'read' | 'edit';
+    placeholder?: string;
+    minHeight?: number;
+    maxHeight?: number;
+}
+/**
+ * Tiptap rich text editor field component
+ * Supports both edit and read-only modes with JSON content storage
+ */
+export declare function TiptapField({ name, value, onChange, label, error, disabled, required, mode, placeholder, minHeight, maxHeight, }: TiptapFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TiptapField.d.ts.map

package/dist/components/TiptapField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TiptapField.d.ts","sourceRoot":"","sources":["../../src/components/TiptapField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA4B,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAI1E,OAAO,sBAAsB,CAAA;AAE7B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IAClC,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAa,EACb,WAAgC,EAChC,SAAe,EACf,SAAS,GACV,EAAE,gBAAgB,2CA0JlB"}

package/dist/components/TiptapField.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import { useEffect } from 'react';
+import '../styles/tiptap.css';
+/**
+ * Tiptap rich text editor field component
+ * Supports both edit and read-only modes with JSON content storage
+ */
+export function TiptapField({ name, value, onChange, label, error, disabled, required, mode = 'edit', placeholder = 'Start writing...', minHeight = 200, maxHeight, }) {
+    const isEditable = mode === 'edit' && !disabled;
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                heading: {
+                    levels: [1, 2, 3],
+                },
+            }),
+            Placeholder.configure({
+                placeholder,
+            }),
+        ],
+        content: value || undefined,
+        editable: isEditable,
+        // Don't render immediately on the server to avoid SSR issues
+        immediatelyRender: false,
+        onUpdate: (props) => {
+            if (isEditable && onChange) {
+                onChange(props);
+            }
+        },
+        editorProps: {
+            attributes: {
+                class: 'tiptap',
+            },
+        },
+    });
+    // Update content when value changes externally
+    useEffect(() => {
+        if (editor && value !== editor.getJSON()) {
+            editor.commands.setContent(value || '');
+        }
+    }, [editor, value]);
+    // Update editable state when mode or disabled changes
+    useEffect(() => {
+        if (editor) {
+            editor.setEditable(isEditable);
+        }
+    }, [editor, isEditable]);
+    if (mode === 'read') {
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-foreground", children: label }), _jsx("div", { className: "tiptap-read-only", children: _jsx(EditorContent, { editor: editor }) })] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { htmlFor: name, className: "text-sm font-medium text-foreground flex items-center gap-1", children: [label, required && _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs("div", { className: `tiptap-editor ${error ? 'border-destructive' : ''}`, children: [isEditable && editor && (_jsxs("div", { className: "tiptap-toolbar", children: [_jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleBold().run(), disabled: !editor.can().chain().focus().toggleBold().run(), className: editor.isActive('bold') ? 'is-active' : '', children: _jsx("strong", { children: "Bold" }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleItalic().run(), disabled: !editor.can().chain().focus().toggleItalic().run(), className: editor.isActive('italic') ? 'is-active' : '', children: _jsx("em", { children: "Italic" }) }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleStrike().run(), disabled: !editor.can().chain().focus().toggleStrike().run(), className: editor.isActive('strike') ? 'is-active' : '', children: _jsx("s", { children: "Strike" }) }), _jsx("div", { className: "tiptap-divider" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), className: editor.isActive('heading', { level: 1 }) ? 'is-active' : '', children: "H1" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), className: editor.isActive('heading', { level: 2 }) ? 'is-active' : '', children: "H2" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), className: editor.isActive('heading', { level: 3 }) ? 'is-active' : '', children: "H3" }), _jsx("div", { className: "tiptap-divider" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleBulletList().run(), className: editor.isActive('bulletList') ? 'is-active' : '', children: "Bullet List" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleOrderedList().run(), className: editor.isActive('orderedList') ? 'is-active' : '', children: "Ordered List" }), _jsx("button", { type: "button", onClick: () => editor.chain().focus().toggleBlockquote().run(), className: editor.isActive('blockquote') ? 'is-active' : '', children: "Quote" })] })), _jsx("div", { className: disabled ? 'opacity-50 cursor-not-allowed' : '', style: {
+                            minHeight: `${minHeight}px`,
+                            maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+                            overflowY: maxHeight ? 'auto' : undefined,
+                        }, children: _jsx(EditorContent, { editor: editor }) })] }), error && _jsx("p", { className: "text-sm text-destructive", children: error })] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { TiptapField } from './TiptapField.js';
+export type { TiptapFieldProps } from './TiptapField.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/index.js

@@ -0,0 +1 @@
+export { TiptapField } from './TiptapField.js';

package/dist/config/types.d.ts

@@ -0,0 +1,34 @@
+import type { BaseFieldConfig } from '@opensaas/stack-core';
+/**
+ * Rich text field configuration using Tiptap editor
+ * Stores content as JSON in the database
+ */
+export type RichTextField = BaseFieldConfig & {
+    type: 'richText';
+    validation?: {
+        isRequired?: boolean;
+    };
+    ui?: {
+        /**
+         * Placeholder text for empty editor
+         */
+        placeholder?: string;
+        /**
+         * Minimum height for editor in pixels
+         */
+        minHeight?: number;
+        /**
+         * Maximum height for editor in pixels
+         */
+        maxHeight?: number;
+        /**
+         * Custom React component to render this field
+         */
+        component?: any;
+        /**
+         * Custom field type name to use from the global registry
+         */
+        fieldType?: string;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/config/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAE3D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG;IAC5C,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,CAAC,EAAE;QACX,UAAU,CAAC,EAAE,OAAO,CAAA;KACrB,CAAA;IACD,EAAE,CAAC,EAAE;QACH;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB;;WAEG;QAEH,SAAS,CAAC,EAAE,GAAG,CAAA;QACf;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF,CAAA"}

package/dist/config/types.js

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

package/dist/fields/index.d.ts

@@ -0,0 +1,3 @@
+export { richText } from './richText.js';
+export type { RichTextField } from '../config/types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fields/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/fields/index.js

@@ -0,0 +1 @@
+export { richText } from './richText.js';

package/dist/fields/richText.d.ts

@@ -0,0 +1,22 @@
+import type { RichTextField } from '../config/types.js';
+/**
+ * Rich text field using Tiptap editor
+ * Stores content as JSON in the database
+ *
+ * @example
+ * ```ts
+ * import { richText } from '@opensaas/stack-tiptap/fields'
+ *
+ * fields: {
+ *   content: richText({
+ *     validation: { isRequired: true },
+ *     ui: {
+ *       placeholder: "Write your content here...",
+ *       minHeight: 200
+ *     }
+ *   })
+ * }
+ * ```
+ */
+export declare function richText(options?: Omit<RichTextField, 'type'>): RichTextField;
+//# sourceMappingURL=richText.d.ts.map

package/dist/fields/richText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"richText.d.ts","sourceRoot":"","sources":["../../src/fields/richText.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAEvD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,GAAG,aAAa,CAwC7E"}

package/dist/fields/richText.js

@@ -0,0 +1,59 @@
+import { z } from 'zod';
+/**
+ * Rich text field using Tiptap editor
+ * Stores content as JSON in the database
+ *
+ * @example
+ * ```ts
+ * import { richText } from '@opensaas/stack-tiptap/fields'
+ *
+ * fields: {
+ *   content: richText({
+ *     validation: { isRequired: true },
+ *     ui: {
+ *       placeholder: "Write your content here...",
+ *       minHeight: 200
+ *     }
+ *   })
+ * }
+ * ```
+ */
+export function richText(options) {
+    return {
+        type: 'richText',
+        ...options,
+        getZodSchema: (fieldName, operation) => {
+            const validation = options?.validation;
+            const isRequired = validation?.isRequired;
+            // Accept any valid JSON structure from Tiptap
+            // Tiptap outputs JSONContent which is a complex nested structure
+            const baseSchema = z.any();
+            if (isRequired && operation === 'create') {
+                // For create, reject undefined
+                return baseSchema;
+            }
+            else if (isRequired && operation === 'update') {
+                // For update, allow undefined (partial updates)
+                return z.union([baseSchema, z.undefined()]);
+            }
+            else {
+                // Not required
+                return baseSchema.optional();
+            }
+        },
+        getPrismaType: () => {
+            const isRequired = options?.validation?.isRequired;
+            return {
+                type: 'Json',
+                modifiers: isRequired ? undefined : '?',
+            };
+        },
+        getTypeScriptType: () => {
+            const isRequired = options?.validation?.isRequired;
+            return {
+                type: 'any',
+                optional: !isRequired,
+            };
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { richText } from './fields/richText.js';
+export { TiptapField } from './components/TiptapField.js';
+export type { RichTextField } from './config/types.js';
+export type { TiptapFieldProps } from './components/TiptapField.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAGzD,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/index.js

@@ -0,0 +1,4 @@
+// Field builder
+export { richText } from './fields/richText.js';
+// Components
+export { TiptapField } from './components/TiptapField.js';

package/dist/styles/tiptap.css

@@ -0,0 +1,170 @@
+/* Tiptap Editor Styles */
+
+/* Editor container */
+.tiptap-editor {
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  background: hsl(var(--background));
+}
+
+/* Toolbar */
+.tiptap-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.tiptap-toolbar button {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  border: none;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.tiptap-toolbar button:hover:not(:disabled) {
+  background: hsl(var(--accent));
+}
+
+.tiptap-toolbar button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tiptap-toolbar button.is-active {
+  background: hsl(var(--accent));
+  font-weight: 600;
+}
+
+.tiptap-divider {
+  width: 1px;
+  height: 1.5rem;
+  background: hsl(var(--border));
+  margin: 0 0.25rem;
+}
+
+/* Editor content */
+.tiptap {
+  padding: 1rem;
+  outline: none;
+  min-height: 200px;
+}
+
+.tiptap:focus {
+  outline: none;
+}
+
+/* Prose styles for rich text content */
+.tiptap p {
+  margin: 0.75rem 0;
+}
+
+.tiptap p:first-child {
+  margin-top: 0;
+}
+
+.tiptap p:last-child {
+  margin-bottom: 0;
+}
+
+.tiptap h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 1.5rem 0 1rem;
+  line-height: 1.2;
+}
+
+.tiptap h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 1.25rem 0 0.75rem;
+  line-height: 1.3;
+}
+
+.tiptap h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1rem 0 0.5rem;
+  line-height: 1.4;
+}
+
+.tiptap ul,
+.tiptap ol {
+  padding-left: 1.5rem;
+  margin: 0.75rem 0;
+}
+
+.tiptap ul {
+  list-style-type: disc;
+}
+
+.tiptap ol {
+  list-style-type: decimal;
+}
+
+.tiptap li {
+  margin: 0.25rem 0;
+}
+
+.tiptap blockquote {
+  border-left: 3px solid hsl(var(--border));
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+
+.tiptap code {
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-family: monospace;
+}
+
+.tiptap pre {
+  background: hsl(var(--muted));
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.tiptap pre code {
+  background: transparent;
+  padding: 0;
+}
+
+/* Placeholder */
+.tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: hsl(var(--muted-foreground));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Selection */
+.tiptap ::selection {
+  background: hsl(var(--accent));
+}
+
+/* Read-only mode */
+.tiptap-read-only {
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  background: hsl(var(--muted) / 0.5);
+  padding: 1rem;
+}
+
+.tiptap-read-only .tiptap {
+  padding: 0;
+  min-height: auto;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@opensaas/stack-tiptap",
+  "version": "0.1.0",
+  "description": "Tiptap rich text editor integration for OpenSaas Stack",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./fields": {
+      "types": "./dist/fields/index.d.ts",
+      "default": "./dist/fields/index.js"
+    }
+  },
+  "keywords": [
+    "opensaas",
+    "tiptap",
+    "rich-text",
+    "editor",
+    "nextjs"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@opensaas/stack-core": "0.1.0",
+    "@opensaas/stack-ui": "0.1.0"
+  },
+  "dependencies": {
+    "@tiptap/react": "^3.7.2",
+    "@tiptap/pm": "^3.7.2",
+    "@tiptap/starter-kit": "^3.7.2",
+    "@tiptap/extension-placeholder": "^3.7.2",
+    "zod": "^4.1.12"
+  },
+  "devDependencies": {
+    "@types/node": "^24.7.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "typescript": "^5.9.3",
+    "@opensaas/stack-core": "0.1.0",
+    "@opensaas/stack-ui": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsc && npm run copy:css",
+    "copy:css": "mkdir -p dist/styles && cp src/styles/tiptap.css dist/styles/",
+    "dev": "tsc --watch",
+    "clean": "rm -rf .turbo dist tsconfig.tsbuildinfo"
+  }
+}

package/src/components/TiptapField.tsx

@@ -0,0 +1,193 @@
+'use client'
+
+import { useEditor, EditorContent, UseEditorOptions } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import { useEffect } from 'react'
+import '../styles/tiptap.css'
+
+export interface TiptapFieldProps {
+  name: string
+  value: UseEditorOptions['content']
+  onChange: UseEditorOptions['onUpdate']
+  label: string
+  error?: string
+  disabled?: boolean
+  required?: boolean
+  mode?: 'read' | 'edit'
+  placeholder?: string
+  minHeight?: number
+  maxHeight?: number
+}
+
+/**
+ * Tiptap rich text editor field component
+ * Supports both edit and read-only modes with JSON content storage
+ */
+export function TiptapField({
+  name,
+  value,
+  onChange,
+  label,
+  error,
+  disabled,
+  required,
+  mode = 'edit',
+  placeholder = 'Start writing...',
+  minHeight = 200,
+  maxHeight,
+}: TiptapFieldProps) {
+  const isEditable = mode === 'edit' && !disabled
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3],
+        },
+      }),
+      Placeholder.configure({
+        placeholder,
+      }),
+    ],
+    content: value || undefined,
+    editable: isEditable,
+    // Don't render immediately on the server to avoid SSR issues
+    immediatelyRender: false,
+    onUpdate: (props) => {
+      if (isEditable && onChange) {
+        onChange(props)
+      }
+    },
+    editorProps: {
+      attributes: {
+        class: 'tiptap',
+      },
+    },
+  })
+
+  // Update content when value changes externally
+  useEffect(() => {
+    if (editor && value !== editor.getJSON()) {
+      editor.commands.setContent(value || '')
+    }
+  }, [editor, value])
+
+  // Update editable state when mode or disabled changes
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(isEditable)
+    }
+  }, [editor, isEditable])
+
+  if (mode === 'read') {
+    return (
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-foreground">{label}</label>
+        <div className="tiptap-read-only">
+          <EditorContent editor={editor} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      <label htmlFor={name} className="text-sm font-medium text-foreground flex items-center gap-1">
+        {label}
+        {required && <span className="text-destructive">*</span>}
+      </label>
+
+      {/* Editor with toolbar */}
+      <div className={`tiptap-editor ${error ? 'border-destructive' : ''}`}>
+        {/* Toolbar */}
+        {isEditable && editor && (
+          <div className="tiptap-toolbar">
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleBold().run()}
+              disabled={!editor.can().chain().focus().toggleBold().run()}
+              className={editor.isActive('bold') ? 'is-active' : ''}
+            >
+              <strong>Bold</strong>
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleItalic().run()}
+              disabled={!editor.can().chain().focus().toggleItalic().run()}
+              className={editor.isActive('italic') ? 'is-active' : ''}
+            >
+              <em>Italic</em>
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleStrike().run()}
+              disabled={!editor.can().chain().focus().toggleStrike().run()}
+              className={editor.isActive('strike') ? 'is-active' : ''}
+            >
+              <s>Strike</s>
+            </button>
+            <div className="tiptap-divider" />
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+              className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+            >
+              H1
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+              className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+            >
+              H2
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+              className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+            >
+              H3
+            </button>
+            <div className="tiptap-divider" />
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleBulletList().run()}
+              className={editor.isActive('bulletList') ? 'is-active' : ''}
+            >
+              Bullet List
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleOrderedList().run()}
+              className={editor.isActive('orderedList') ? 'is-active' : ''}
+            >
+              Ordered List
+            </button>
+            <button
+              type="button"
+              onClick={() => editor.chain().focus().toggleBlockquote().run()}
+              className={editor.isActive('blockquote') ? 'is-active' : ''}
+            >
+              Quote
+            </button>
+          </div>
+        )}
+
+        {/* Editor content */}
+        <div
+          className={disabled ? 'opacity-50 cursor-not-allowed' : ''}
+          style={{
+            minHeight: `${minHeight}px`,
+            maxHeight: maxHeight ? `${maxHeight}px` : undefined,
+            overflowY: maxHeight ? 'auto' : undefined,
+          }}
+        >
+          <EditorContent editor={editor} />
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { TiptapField } from './TiptapField.js'
+export type { TiptapFieldProps } from './TiptapField.js'

package/src/config/types.ts

@@ -0,0 +1,35 @@
+import type { BaseFieldConfig } from '@opensaas/stack-core'
+
+/**
+ * Rich text field configuration using Tiptap editor
+ * Stores content as JSON in the database
+ */
+export type RichTextField = BaseFieldConfig & {
+  type: 'richText'
+  validation?: {
+    isRequired?: boolean
+  }
+  ui?: {
+    /**
+     * Placeholder text for empty editor
+     */
+    placeholder?: string
+    /**
+     * Minimum height for editor in pixels
+     */
+    minHeight?: number
+    /**
+     * Maximum height for editor in pixels
+     */
+    maxHeight?: number
+    /**
+     * Custom React component to render this field
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    component?: any
+    /**
+     * Custom field type name to use from the global registry
+     */
+    fieldType?: string
+  }
+}

package/src/fields/index.ts

@@ -0,0 +1,2 @@
+export { richText } from './richText.js'
+export type { RichTextField } from '../config/types.js'

package/src/fields/richText.ts

@@ -0,0 +1,63 @@
+import { z } from 'zod'
+import type { RichTextField } from '../config/types.js'
+
+/**
+ * Rich text field using Tiptap editor
+ * Stores content as JSON in the database
+ *
+ * @example
+ * ```ts
+ * import { richText } from '@opensaas/stack-tiptap/fields'
+ *
+ * fields: {
+ *   content: richText({
+ *     validation: { isRequired: true },
+ *     ui: {
+ *       placeholder: "Write your content here...",
+ *       minHeight: 200
+ *     }
+ *   })
+ * }
+ * ```
+ */
+export function richText(options?: Omit<RichTextField, 'type'>): RichTextField {
+  return {
+    type: 'richText',
+    ...options,
+    getZodSchema: (fieldName: string, operation: 'create' | 'update') => {
+      const validation = options?.validation
+      const isRequired = validation?.isRequired
+
+      // Accept any valid JSON structure from Tiptap
+      // Tiptap outputs JSONContent which is a complex nested structure
+      const baseSchema = z.any()
+
+      if (isRequired && operation === 'create') {
+        // For create, reject undefined
+        return baseSchema
+      } else if (isRequired && operation === 'update') {
+        // For update, allow undefined (partial updates)
+        return z.union([baseSchema, z.undefined()])
+      } else {
+        // Not required
+        return baseSchema.optional()
+      }
+    },
+    getPrismaType: () => {
+      const isRequired = options?.validation?.isRequired
+
+      return {
+        type: 'Json',
+        modifiers: isRequired ? undefined : '?',
+      }
+    },
+    getTypeScriptType: () => {
+      const isRequired = options?.validation?.isRequired
+
+      return {
+        type: 'any',
+        optional: !isRequired,
+      }
+    },
+  }
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+// Field builder
+export { richText } from './fields/richText.js'
+
+// Components
+export { TiptapField } from './components/TiptapField.js'
+
+// Types
+export type { RichTextField } from './config/types.js'
+export type { TiptapFieldProps } from './components/TiptapField.js'

package/src/styles/tiptap.css

@@ -0,0 +1,170 @@
+/* Tiptap Editor Styles */
+
+/* Editor container */
+.tiptap-editor {
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  background: hsl(var(--background));
+}
+
+/* Toolbar */
+.tiptap-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.tiptap-toolbar button {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  border: none;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.tiptap-toolbar button:hover:not(:disabled) {
+  background: hsl(var(--accent));
+}
+
+.tiptap-toolbar button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tiptap-toolbar button.is-active {
+  background: hsl(var(--accent));
+  font-weight: 600;
+}
+
+.tiptap-divider {
+  width: 1px;
+  height: 1.5rem;
+  background: hsl(var(--border));
+  margin: 0 0.25rem;
+}
+
+/* Editor content */
+.tiptap {
+  padding: 1rem;
+  outline: none;
+  min-height: 200px;
+}
+
+.tiptap:focus {
+  outline: none;
+}
+
+/* Prose styles for rich text content */
+.tiptap p {
+  margin: 0.75rem 0;
+}
+
+.tiptap p:first-child {
+  margin-top: 0;
+}
+
+.tiptap p:last-child {
+  margin-bottom: 0;
+}
+
+.tiptap h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 1.5rem 0 1rem;
+  line-height: 1.2;
+}
+
+.tiptap h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 1.25rem 0 0.75rem;
+  line-height: 1.3;
+}
+
+.tiptap h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1rem 0 0.5rem;
+  line-height: 1.4;
+}
+
+.tiptap ul,
+.tiptap ol {
+  padding-left: 1.5rem;
+  margin: 0.75rem 0;
+}
+
+.tiptap ul {
+  list-style-type: disc;
+}
+
+.tiptap ol {
+  list-style-type: decimal;
+}
+
+.tiptap li {
+  margin: 0.25rem 0;
+}
+
+.tiptap blockquote {
+  border-left: 3px solid hsl(var(--border));
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+
+.tiptap code {
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-family: monospace;
+}
+
+.tiptap pre {
+  background: hsl(var(--muted));
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.tiptap pre code {
+  background: transparent;
+  padding: 0;
+}
+
+/* Placeholder */
+.tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: hsl(var(--muted-foreground));
+  pointer-events: none;
+  height: 0;
+}
+
+/* Selection */
+.tiptap ::selection {
+  background: hsl(var(--accent));
+}
+
+/* Read-only mode */
+.tiptap-read-only {
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  background: hsl(var(--muted) / 0.5);
+  padding: 1rem;
+}
+
+.tiptap-read-only .tiptap {
+  padding: 0;
+  min-height: auto;
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}