@everystack/admin 0.2.2 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everystack/admin",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "description": "Declarative admin dashboard framework for PostgREST APIs",
   "license": "AGPL-3.0-only",
   "publishConfig": {
@@ -22,6 +22,10 @@
     "./presets/twitter": {
       "types": "./src/presets/twitter.ts",
       "default": "./src/presets/twitter.ts"
+    },
+    "./editors/tiptap": {
+      "types": "./src/editors/tiptap.tsx",
+      "default": "./src/editors/tiptap.tsx"
     }
   },
   "scripts": {
@@ -36,12 +40,23 @@
   "peerDependencies": {
     "@everystack/api": ">=0.2.4",
     "@everystack/ui": ">=0.2.2",
+    "@tiptap/pm": ">=2.0.0",
+    "@tiptap/react": ">=2.0.0",
+    "@tiptap/starter-kit": ">=2.0.0",
     "react": "19.2.6",
     "react-native": "0.83.6"
   },
+  "peerDependenciesMeta": {
+    "@tiptap/pm": { "optional": true },
+    "@tiptap/react": { "optional": true },
+    "@tiptap/starter-kit": { "optional": true }
+  },
   "devDependencies": {
     "@everystack/api": "workspace:*",
     "@everystack/ui": "workspace:*",
+    "@tiptap/pm": "^2.0.0",
+    "@tiptap/react": "^2.0.0",
+    "@tiptap/starter-kit": "^2.0.0",
     "@types/d3-scale": "4.0.9",
     "@types/d3-time-format": "4.0.3",
     "@types/jest": "29.5.14",

package/src/AdminRoot.tsx

@@ -6,27 +6,32 @@
  */
 
 import React from 'react';
-import type { AdminConfig } from './types';
+import type { AdminConfig, EditorRegistry } from './types';
 import type { DataAdapter } from './adapters/types';
 import { AdminConfigProvider } from './providers/AdminConfigProvider';
 import { DataAdapterProvider } from './providers/DataAdapterProvider';
 import { StorageConfigContext } from './hooks/useStorageConfig';
+import { EditorRegistryContext } from './hooks/useEditors';
 
 export interface AdminRootProps {
   /** Admin configuration */
   config: AdminConfig;
   /** Data adapter for backend communication */
   adapter: DataAdapter;
+  /** Editor adapters available to fields via `field.editor` (opt-in plugins). */
+  editors?: EditorRegistry;
   /** Children to render (typically expo-router's Slot or navigator) */
   children?: React.ReactNode;
 }
 
-export function AdminRoot({ config, adapter, children }: AdminRootProps) {
+export function AdminRoot({ config, adapter, editors, children }: AdminRootProps) {
   return (
     <AdminConfigProvider config={config}>
       <DataAdapterProvider adapter={adapter}>
         <StorageConfigContext.Provider value={config.storage ?? null}>
-          {children}
+          <EditorRegistryContext.Provider value={editors ?? {}}>
+            {children}
+          </EditorRegistryContext.Provider>
         </StorageConfigContext.Provider>
       </DataAdapterProvider>
     </AdminConfigProvider>

package/src/adapters/EverystackAdapter.ts

@@ -22,13 +22,35 @@ const POSTGREST_OPERATORS = new Set([
   'sl', 'sr', 'nxl', 'nxr', 'adj', 'ov', 'fts',
 ]);
 
-export interface EverystackAdapterOptions extends ClientOptions {}
+export interface EverystackAdapterOptions extends ClientOptions {
+  /**
+   * Resources whose list rows come from an RPC instead of the PostgREST table.
+   * Maps resource name → RPC function name. The RPC speaks the same list
+   * protocol — body `{ limit, offset, sort, dir, filter }`, result
+   * `{ data, total }` — so the list UI is identical to the REST path. Used to
+   * serve DB-free observability tables (logs, crashes) from the S3 archive.
+   */
+  listRpcs?: Record<string, string>;
+  /**
+   * Resources whose single-record reads + writes go through an RPC instead of
+   * the PostgREST table. Maps resource name → RPC function name. The RPC is
+   * action-dispatched: body `{ action: 'get'|'create'|'update'|'delete', id?,
+   * data? }` → the record (get/create/update) or `{}` (delete). Used to serve
+   * DB-free mutable config (alert rules) from an S3 object with CAS. Pair with
+   * `listRpcs` (same RPC name) for the list view.
+   */
+  crudRpcs?: Record<string, string>;
+}
 
 export class EverystackAdapter implements DataAdapter {
   private client: Client;
+  private listRpcs: Record<string, string>;
+  private crudRpcs: Record<string, string>;
 
   constructor(options: EverystackAdapterOptions) {
     this.client = createClient(options);
+    this.listRpcs = options.listRpcs ?? {};
+    this.crudRpcs = options.crudRpcs ?? {};
   }
 
   async fetchList<T extends DataRecord = DataRecord>(
@@ -39,6 +61,24 @@ export class EverystackAdapter implements DataAdapter {
     const perPage = params.perPage ?? 25;
     const offset = (page - 1) * perPage;
 
+    // RPC-backed list (e.g. DB-free observability tables over the S3 archive).
+    const listRpc = this.listRpcs[resource];
+    if (listRpc) {
+      const result = await this.rpc<{ data: T[]; total: number }>(listRpc, {
+        limit: perPage,
+        offset,
+        sort: params.sort,
+        dir: params.order ?? 'asc',
+        filter: params.filter,
+      });
+      return {
+        data: result?.data ?? [],
+        total: result?.total ?? 0,
+        page,
+        perPage,
+      };
+    }
+
     let builder = this.client.from(resource);
 
     // Apply filters
@@ -70,6 +110,14 @@ export class EverystackAdapter implements DataAdapter {
     resource: string,
     id: string | number,
   ): Promise<T> {
+    // RPC-backed single read (e.g. DB-free alert rules from the S3 config object).
+    const crudRpc = this.crudRpcs[resource];
+    if (crudRpc) {
+      const record = await this.rpc<T | null>(crudRpc, { action: 'get', id: String(id) });
+      if (!record) throw new Error(`${resource}/${id} not found`);
+      return record;
+    }
+
     const result = await this.client.from(resource).eq('id', String(id)).single();
 
     if (result.error) {
@@ -85,6 +133,11 @@ export class EverystackAdapter implements DataAdapter {
     resource: string,
     data: Omit<T, 'id'>,
   ): Promise<T> {
+    const crudRpc = this.crudRpcs[resource];
+    if (crudRpc) {
+      return this.rpcResult<T>(await this.rpc<T | { error: string }>(crudRpc, { action: 'create', data }));
+    }
+
     const result = await this.client.from(resource).insert(data as Record<string, unknown>);
 
     if (result.error) {
@@ -99,6 +152,11 @@ export class EverystackAdapter implements DataAdapter {
     id: string | number,
     data: Partial<T>,
   ): Promise<T> {
+    const crudRpc = this.crudRpcs[resource];
+    if (crudRpc) {
+      return this.rpcResult<T>(await this.rpc<T | { error: string }>(crudRpc, { action: 'update', id: String(id), data }));
+    }
+
     const result = await this.client
       .from(resource)
       .eq('id', String(id))
@@ -113,6 +171,12 @@ export class EverystackAdapter implements DataAdapter {
   }
 
   async delete(resource: string, id: string | number): Promise<void> {
+    const crudRpc = this.crudRpcs[resource];
+    if (crudRpc) {
+      this.rpcResult(await this.rpc<{ error?: string }>(crudRpc, { action: 'delete', id: String(id) }));
+      return;
+    }
+
     const result = await this.client.from(resource).eq('id', String(id)).remove();
 
     if (result.error) {
@@ -120,6 +184,14 @@ export class EverystackAdapter implements DataAdapter {
     }
   }
 
+  /** Unwrap an action RPC result, surfacing a `{ error }` payload as a throw. */
+  private rpcResult<T>(result: T | { error: string }): T {
+    if (result && typeof result === 'object' && 'error' in result && (result as { error?: unknown }).error) {
+      throw new Error(String((result as { error: unknown }).error));
+    }
+    return result as T;
+  }
+
   async rpc<T = unknown>(fn: string, body?: unknown): Promise<T> {
     const result = await this.client.rpc<T>(fn, body);
 
@@ -180,43 +252,50 @@ function applyFilters(builder: QueryBuilder, filter?: Record<string, unknown>):
 
   for (const [key, value] of Object.entries(filter)) {
     if (value == null) continue;
-
-    const strValue = String(value);
-
-    if (isPostgrestFilter(strValue)) {
-      // Already formatted — extract operator and value
-      const dotIndex = strValue.indexOf('.');
-      const op = strValue.substring(0, dotIndex);
-      const val = strValue.substring(dotIndex + 1);
-
-      switch (op) {
-        case 'eq': builder = builder.eq(key, val); break;
-        case 'neq': builder = builder.neq(key, val); break;
-        case 'gt': builder = builder.gt(key, val); break;
-        case 'gte': builder = builder.gte(key, val); break;
-        case 'lt': builder = builder.lt(key, val); break;
-        case 'lte': builder = builder.lte(key, val); break;
-        case 'like': builder = builder.like(key, val); break;
-        case 'ilike': builder = builder.ilike(key, val); break;
-        case 'is': builder = builder.is(key, val); break;
-        case 'in': {
-          const values = val.replace(/^\(/, '').replace(/\)$/, '').split(',');
-          builder = builder.in(key, values);
-          break;
-        }
-        default:
-          // Unknown operator — use eq with full value
-          builder = builder.eq(key, strValue);
-      }
+    // An array applies several conditions to the same column (PostgREST ANDs
+    // them) — e.g. a time range as ['gte.<from>', 'lte.<to>'].
+    if (Array.isArray(value)) {
+      for (const v of value) builder = applyOneFilter(builder, key, v);
     } else {
-      // Plain value — wrap with eq
-      builder = builder.eq(key, strValue);
+      builder = applyOneFilter(builder, key, value);
     }
   }
 
   return builder;
 }
 
+/** Apply one condition: a PostgREST-formatted value (`op.value`) or a plain eq. */
+function applyOneFilter(builder: QueryBuilder, key: string, value: unknown): QueryBuilder {
+  if (value == null) return builder;
+  const strValue = String(value);
+
+  if (!isPostgrestFilter(strValue)) {
+    return builder.eq(key, strValue); // plain value → eq
+  }
+
+  const dotIndex = strValue.indexOf('.');
+  const op = strValue.substring(0, dotIndex);
+  const val = strValue.substring(dotIndex + 1);
+
+  switch (op) {
+    case 'eq': return builder.eq(key, val);
+    case 'neq': return builder.neq(key, val);
+    case 'gt': return builder.gt(key, val);
+    case 'gte': return builder.gte(key, val);
+    case 'lt': return builder.lt(key, val);
+    case 'lte': return builder.lte(key, val);
+    case 'like': return builder.like(key, val);
+    case 'ilike': return builder.ilike(key, val);
+    case 'is': return builder.is(key, val);
+    case 'in': {
+      const values = val.replace(/^\(/, '').replace(/\)$/, '').split(',');
+      return builder.in(key, values);
+    }
+    default:
+      return builder.eq(key, strValue); // unknown operator → eq with full value
+  }
+}
+
 /**
  * Check if a filter value is already in PostgREST format (operator.value).
  */

package/src/components/AnalyticsHeader.tsx

@@ -0,0 +1,134 @@
+/**
+ * AnalyticsHeader — the analytics chrome that sits atop a CRUD ResourceList.
+ *
+ * Stats + counts-over-time (brushable) + per-dimension breakdowns for any
+ * resource that declares a `dashboard` config. Controlled: the parent owns the
+ * filter state (time range + dimension selections) so the same brush/segment
+ * that updates these charts also filters the table below. Data comes from the
+ * resource's `{prefix}DashboardData` RPC.
+ *
+ * This replaces ResourceDashboard's role: the table is now the CRUD list, not a
+ * read-only event table — the header is the analytics layer over it.
+ */
+
+import React, { useMemo } from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { useContainerWidth } from '@everystack/ui/dashboard';
+import { useRpc } from '../hooks/useRpc';
+import { StatDials } from './dashboard/StatDials';
+import { TimeHistogram } from './dashboard/TimeHistogram';
+import { DimensionBars } from './dashboard/DimensionBars';
+import { DimensionDonut } from './dashboard/DimensionDonut';
+import type { ResourceDashboardConfig } from '../types';
+import type { DashboardFilters, DashboardAggregates } from '../rpc/resource-dashboard-rpc';
+
+export interface AnalyticsHeaderProps {
+  /** Resource name — determines the RPC prefix ({prefix}DashboardData). */
+  resource: string;
+  /** The resource's dashboard/analytics config. */
+  dashboard: ResourceDashboardConfig;
+  /** API base for the DashboardData RPC. */
+  baseUrl: string;
+  /** Auth token provider. */
+  getToken?: () => string | null | Promise<string | null>;
+  /** Controlled filter state (time range + dimension selections). */
+  filters: DashboardFilters;
+  /** Emitted when the brush or a dimension chip changes the filters. */
+  onFiltersChange: (filters: DashboardFilters) => void;
+}
+
+function toCamelCase(snake: string): string {
+  return snake.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+export function AnalyticsHeader({
+  resource,
+  dashboard,
+  baseUrl,
+  getToken,
+  filters,
+  onFiltersChange,
+}: AnalyticsHeaderProps): React.ReactElement {
+  const { width: windowWidth } = useWindowDimensions();
+  const chart = useContainerWidth(Math.min(windowWidth - 48, 800));
+
+  const dashboardDataFn = `${toCamelCase(resource)}DashboardData`;
+  const hours = dashboard.defaultHours ?? 168;
+
+  const body = useMemo(() => ({ hours, filters }), [hours, filters]);
+  const { data } = useRpc<DashboardAggregates>({ baseUrl, fn: dashboardDataFn, body, getToken });
+
+  const handleTimeBrush = (extent: [string, string] | null) => {
+    const next = { ...filters };
+    if (extent) next.time = extent;
+    else delete next.time;
+    onFiltersChange(next);
+  };
+
+  const handleDimensionFilter = (column: string, value: string) => {
+    const next = { ...filters };
+    const current = (next[column] as string[] | undefined) ?? [];
+    const updated = current.includes(value)
+      ? current.filter(v => v !== value)
+      : [...current, value];
+    if (updated.length === 0) delete next[column];
+    else next[column] = updated;
+    onFiltersChange(next);
+  };
+
+  const dials = useMemo(() => {
+    const stats = data?.stats;
+    const total = stats?.total ?? stats?.[dashboard.stats[0]?.id] ?? 1;
+    return dashboard.stats.map(stat => {
+      const value = stats?.[stat.id] ?? 0;
+      let ratio: number | undefined;
+      if (stat.ratio === 'of_total' && total > 0 && stat.id !== 'total') ratio = value / total;
+      else if (typeof stat.ratio === 'number') ratio = stat.ratio;
+      return { label: stat.label, value, color: stat.color, ratio };
+    });
+  }, [data?.stats, dashboard.stats]);
+
+  return (
+    <View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
+      <StatDials dials={dials} />
+
+      <View onLayout={chart.onLayout}>
+        <TimeHistogram
+          data={data?.timeHistogram ?? []}
+          width={chart.width}
+          title={dashboard.title ? `${dashboard.title} Over Time` : undefined}
+          onBrush={handleTimeBrush}
+        />
+      </View>
+
+      {dashboard.dimensions.length > 0 && (
+        <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 24, marginTop: 16 }}>
+          {dashboard.dimensions.map(dim => {
+            const dimData = data?.dimensions?.[dim.column] ?? [];
+            const activeFilters = (filters[dim.column] as string[] | undefined) ?? [];
+            return dim.chartType === 'donut' ? (
+              <DimensionDonut
+                key={dim.column}
+                title={dim.label}
+                data={dimData}
+                colors={dim.colors}
+                order={dim.order}
+                activeFilters={activeFilters}
+                onFilter={value => handleDimensionFilter(dim.column, value)}
+              />
+            ) : (
+              <DimensionBars
+                key={dim.column}
+                title={dim.label}
+                data={dimData}
+                colors={dim.colors}
+                activeFilters={activeFilters}
+                onFilter={value => handleDimensionFilter(dim.column, value)}
+              />
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/ImageDisplay.tsx

@@ -11,14 +11,17 @@ import { View, Text, Image } from 'react-native';
 import { Avatar } from '@everystack/ui';
 import { useStorageConfig } from '../hooks/useStorageConfig';
 import { resolveImageUrl } from '../utils/resolve-image-url';
+import { imageRenderSpec, type ImageView } from '../utils/render-resolution';
 import type { FieldDefinition } from '../types';
 
 interface ImageDisplayProps {
   field: FieldDefinition;
   value: unknown;
+  /** Which view is rendering \u2014 drives default sizing. Defaults to 'show'. */
+  view?: ImageView;
 }
 
-export function ImageDisplay({ field, value }: ImageDisplayProps): React.ReactElement {
+export function ImageDisplay({ field, value, view = 'show' }: ImageDisplayProps): React.ReactElement {
   const storage = useStorageConfig();
 
   if (value == null) {
@@ -26,15 +29,14 @@ export function ImageDisplay({ field, value }: ImageDisplayProps): React.ReactEl
   }
 
   const stringValue = String(value);
+  const spec = imageRenderSpec(field, view);
   const uri = resolveImageUrl(stringValue, {
     cdnUrl: storage?.cdnUrl,
     endpoint: storage?.endpoint,
-    transform: field.renderer === 'avatar'
-      ? { width: 128, height: 128, fit: 'cover' }
-      : { width: 400, height: 300, fit: 'cover' },
+    transform: spec.transform,
   });
 
-  if (field.renderer === 'avatar') {
+  if (spec.isAvatar) {
     return (
       <View className="flex-row items-center gap-2">
         <Avatar uri={uri} size="lg" />
@@ -46,12 +48,14 @@ export function ImageDisplay({ field, value }: ImageDisplayProps): React.ReactEl
     <View>
       <Image
         source={{ uri }}
-        className="w-48 h-36 rounded-lg"
-        style={{ resizeMode: 'cover' }}
+        className="rounded-lg"
+        style={{ width: spec.width, height: spec.height, resizeMode: 'cover' }}
       />
-      <Text className="text-xs text-gray-500 mt-1" numberOfLines={1}>
-        {stringValue}
-      </Text>
+      {spec.showCaption && (
+        <Text className="text-xs text-gray-500 mt-1" numberOfLines={1}>
+          {stringValue}
+        </Text>
+      )}
     </View>
   );
 }

package/src/components/RowActionButton.tsx

@@ -0,0 +1,109 @@
+/**
+ * RowActionButton — a declarative record action, shared by the list and show
+ * views. Behavior resolves render → onPress → rpc (see actionBehavior):
+ *
+ *   - render : the app owns the element; we render it as-is.
+ *   - onPress : custom behavior, default button chrome + two-tap confirm.
+ *   - rpc    : adapter.rpc(action.rpc, { id: recordId }), same chrome.
+ *
+ * Two-tap confirm: actions with `confirm` swap their label on first press and
+ * execute on the second. Cross-platform (no Alert/window.confirm); resets after
+ * 3 seconds without the confirming press.
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { View, Text } from 'react-native';
+import { Button } from '@everystack/ui';
+import { actionBehavior } from '../utils/render-resolution';
+import type { RowActionConfig, ActionContext, DataRecord } from '../types';
+import type { DataAdapter } from '../adapters/types';
+
+export interface RowActionButtonProps {
+  action: RowActionConfig;
+  /** The full record the action operates on. */
+  record: DataRecord;
+  /** Value sent as `{ id }` to an rpc action (record[primaryKey]). */
+  recordId: string | number;
+  adapter: DataAdapter;
+  /** Re-fetch the current view after the action completes. */
+  refetch: () => Promise<void> | void;
+  /** Navigate to an admin path, when the route layer provides it. */
+  navigate?: (path: string) => void;
+}
+
+export function RowActionButton({
+  action,
+  record,
+  recordId,
+  adapter,
+  refetch,
+  navigate,
+}: RowActionButtonProps): React.ReactElement | null {
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+    };
+  }, []);
+
+  const behavior = actionBehavior(action);
+
+  const execute = useCallback(async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      if (action.onPress) {
+        await action.onPress({ record, adapter, refetch, navigate });
+      } else if (action.rpc) {
+        if (!adapter.rpc) throw new Error('Adapter does not support RPC actions');
+        await adapter.rpc(action.rpc, { id: recordId });
+      }
+      await refetch();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+      setConfirming(false);
+    }
+  }, [action, record, recordId, adapter, refetch, navigate]);
+
+  const handlePress = useCallback(() => {
+    if (busy) return;
+    if (action.confirm && !confirming) {
+      setConfirming(true);
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = setTimeout(() => setConfirming(false), 3000);
+      return;
+    }
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+    execute();
+  }, [busy, action.confirm, confirming, execute]);
+
+  // Fully custom element — the app owns chrome and behavior.
+  if (behavior === 'render') {
+    return <>{action.render!({ record, adapter, refetch, navigate })}</>;
+  }
+  // Misconfigured action (no rpc/onPress/render) renders nothing.
+  if (behavior === 'none') return null;
+
+  const buttonLabel = busy ? '…' : confirming ? (action.confirm ?? action.label) : action.label;
+
+  return (
+    <View>
+      <Button
+        label={buttonLabel}
+        variant={action.variant ?? 'outline'}
+        onPress={handlePress}
+      />
+      {error && (
+        <Text className="text-xs text-red-600 mt-1" numberOfLines={2}>
+          {error}
+        </Text>
+      )}
+    </View>
+  );
+}

package/src/editors/tiptap.tsx

@@ -0,0 +1,69 @@
+/**
+ * TipTap editor adapter — a reference EditorRegistry plugin (HTML).
+ *
+ * Opt-in and web-only. The core admin never imports this; tiptap is an
+ * optional peer dependency. To use:
+ *
+ *   pnpm add @tiptap/react @tiptap/starter-kit @tiptap/pm
+ *   import { TiptapEditor } from '@everystack/admin/editors/tiptap';
+ *   <AdminShell editors={{ tiptap: TiptapEditor }} ... />
+ *   // field: { name: 'body', type: 'html', editor: 'tiptap' }
+ *
+ * Reads and writes an HTML string via the EditorProps contract. The toolbar
+ * uses React Native primitives; the editable surface is tiptap's EditorContent
+ * (a DOM contenteditable, which is why this is web-only). See
+ * docs/plans/admin-editors.md.
+ */
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import type { EditorProps } from '../types';
+
+interface ToolbarButtonProps {
+  label: string;
+  active?: boolean;
+  onPress: () => void;
+}
+
+function ToolbarButton({ label, active, onPress }: ToolbarButtonProps): React.ReactElement {
+  return (
+    <Pressable
+      onPress={onPress}
+      className={active ? 'px-2 py-1 rounded bg-blue-100' : 'px-2 py-1 rounded border border-gray-200'}
+    >
+      <Text className={active ? 'text-sm text-blue-700 font-semibold' : 'text-sm text-gray-700'}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+export function TiptapEditor({ value, onChange, error }: EditorProps): React.ReactElement {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: typeof value === 'string' ? value : '',
+    // Render on the client only — the admin shell SSRs, and a contenteditable
+    // can't hydrate from server output.
+    immediatelyRender: false,
+    onUpdate: ({ editor }) => onChange(editor.getHTML()),
+  });
+
+  return (
+    <View>
+      <View className="flex-row flex-wrap gap-1 mb-2">
+        <ToolbarButton label="B" active={editor?.isActive('bold')} onPress={() => editor?.chain().focus().toggleBold().run()} />
+        <ToolbarButton label="I" active={editor?.isActive('italic')} onPress={() => editor?.chain().focus().toggleItalic().run()} />
+        <ToolbarButton label="H2" active={editor?.isActive('heading', { level: 2 })} onPress={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} />
+        <ToolbarButton label="List" active={editor?.isActive('bulletList')} onPress={() => editor?.chain().focus().toggleBulletList().run()} />
+        <ToolbarButton label="1." active={editor?.isActive('orderedList')} onPress={() => editor?.chain().focus().toggleOrderedList().run()} />
+        <ToolbarButton label="Quote" active={editor?.isActive('blockquote')} onPress={() => editor?.chain().focus().toggleBlockquote().run()} />
+      </View>
+      <View className="border border-gray-200 rounded-lg px-3 py-2">
+        <EditorContent editor={editor} />
+      </View>
+      {error ? <Text className="text-xs text-red-600 mt-1">{error}</Text> : null}
+    </View>
+  );
+}