@everystack/admin 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -4,16 +4,111 @@ All notable changes to `@everystack/admin` are documented here.
 
 Format based on [Keep a Changelog](https://keepachangelog.com/).
 
-## [Unreleased]
+## [0.4.4] - 2026-10-15
+
+### Added
+
+- the Show screen renders html and markdown fields as sanitised HTML
+- list and show can embed related rows with ResourceConfig.select
+- relation fields show the related name as a link in the list and on Show
+- relation fields get a searchable picker in the Create and Edit forms
+- soft-deletable resources get a Deleted tab and Restore
+- Delete shows how many rows link to the record before it confirms
+
+### Fixed
+
+- a dashboard dimension named size, page or sort no longer clashes with view state
+- clicking the default tab clears ?tab, and the tabs are a tablist
+- the delete preview counts by exact id and ignores a second Confirm press
+
+### Documentation
+
+- the Show screen allowlist, the install step and the known sanitize gap
+- RPC list search covers the first field, counts cover all of them
+- use posts and comments in the Embeds and Association examples
+
+## [0.4.3] - 2026-10-14
+
+### Added
+
+- list query model: search, scope, sort and page as one URL state
+- adapter applies ListParams.search across searchFields
+- list search, sort and page live in the URL; search all fields after a pause
+- column headers sort ascending, descending, then off, with an arrow
+- scope tabs: named filters above the list, kept in the URL
+- opt-in scope tab counts; one grouped query for an enum's tabs
+- detect unsupported rich-text markup
+- preserve rich HTML in the stock editor schema
+- guard rich HTML against visual data loss
+- list page size from resource config, kept in the URL as size
+- fixed list column width
+- Save/Cancel also at the bottom of Edit and Create
+- tags field type with grouped pills, and form values on InputContext
+- resolveColumns and FieldColumns for screen layouts
+- Show, Edit and Create in columns, and scroll to the first error
+- listPriority and listHideBelow on fields; Actions is always kept
+- inline editable enum cell (inlineEdit on an enum field)
+
+### Fixed
+
+- adapter sends not.* and or/and filters instead of eq
+- list state updates the URL in place; the search box keeps focus
+- list URL names tab and dir; review-gate fixes
+- preserve search across RPC and custom adapters
+- detect HTML5 markup without silent misses
+- declare parse5 as a test dependency
+- keep links in inline code and code blocks
+- a resource perPage that is not a whole number above 0 falls back to 20
+- size the Actions column from its button labels
+- export ./package.json
+- render field.input as its own component
+- wrap a bare string or number from field.render in the cell Text
+- scroll to the topmost errored field on screen
+- size the Actions column from idle labels and let the buttons wrap
+- scroll to the first error after the errors render
+- inlineEdit follows actions.edit
+- the inline enum cell refuses a double save; pin the value after a save
+- refuse an update or delete by id that matches zero rows
+- refetch resolves after its fetch lands; add refreshing
+- keep the list table mounted through a refetch
+- refetch after unmount resolves; a newer pick wins over an older save's re-sync
+- refetch after a failed row action, keeping its error
+- the detail screen keeps a failed row action's error through the refetch
+- ResourceList keys table rows by the resource's primaryKey
+- ResourceShow keeps only the latest fetch's record, error and loading
+- a stale-id refetch cannot write under a newer id; row keys cannot collide with index fallbacks
+- ResourceShow sets the current id when it commits and drops the dead post-await id check
+- the inline enum cell stays busy until its refresh lands
+
+### Documentation
+
+- aggregate with fetchList, rowActions in the list, navigate, field.input as a component
+- column priority notes: never-dropping fields, hideBelow exception, identifying field, sort arrow
+- search, sort, scope tabs, tab counts and the list's URL params
+- FormActionBar, perPage limits, controlled setPerPage, label-based Actions width
+- document TagsFieldInput and its props
+
+## [0.4.2] - 2026-09-22
+
+### Fixed
+
+- refresh expired JWT instead of silently failing every request
+
+## [0.4.1] - 2026-09-22
 
 ### Added
 
 - auto-generated changelogs from conventional commits
 - automate the version-drift check — a manual note is not a gate
+- wire date/datetime field types to DateInput
 
 ### Fixed
 
 - the test suite compiled with type checking off
+- twitter preset field names must match the API's camelCase wire format
+- date fields no longer shift a day in UTC-negative timezones on List/Show
+- DateInput crash on malformed data; restore lost validation in date formatters
+- DateInput/admin date-value edge cases from final review pass
 
 ## [0.4.0] - 2026-07-19
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everystack/admin",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Declarative admin dashboard framework for PostgREST APIs",
   "license": "AGPL-3.0-only",
   "author": "Scalable Technology, Inc. <licensing@scalable.technology>",
@@ -41,7 +41,8 @@
       "source": "./src/editors/tiptap.tsx",
       "types": "./src/editors/tiptap.tsx",
       "default": "./src/editors/tiptap.tsx"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "dependencies": {
     "d3-scale": "4.0.2",
@@ -49,15 +50,39 @@
   },
   "peerDependencies": {
     "drizzle-orm": "0.41.0",
-    "@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",
+    "@everystack/api": ">=0.4.4",
+    "@everystack/ui": ">=0.4.2",
+    "@tiptap/extension-code": ">=3.0.0",
+    "@tiptap/extension-code-block": ">=3.0.0",
+    "@tiptap/extension-image": ">=3.0.0",
+    "@tiptap/extension-subscript": ">=3.0.0",
+    "@tiptap/extension-superscript": ">=3.0.0",
+    "@tiptap/extension-table": ">=3.0.0",
+    "@tiptap/pm": ">=3.0.0",
+    "@tiptap/react": ">=3.0.0",
+    "@tiptap/starter-kit": ">=3.0.0",
     "react": "19.2.0",
     "react-native": "0.83.6"
   },
   "peerDependenciesMeta": {
+    "@tiptap/extension-code": {
+      "optional": true
+    },
+    "@tiptap/extension-code-block": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-subscript": {
+      "optional": true
+    },
+    "@tiptap/extension-superscript": {
+      "optional": true
+    },
+    "@tiptap/extension-table": {
+      "optional": true
+    },
     "@tiptap/pm": {
       "optional": true
     },
@@ -69,22 +94,31 @@
     }
   },
   "devDependencies": {
-    "@tiptap/pm": "^2.0.0",
-    "@tiptap/react": "^2.0.0",
-    "@tiptap/starter-kit": "^2.0.0",
+    "@tiptap/extension-code": "^3.0.0",
+    "@tiptap/extension-code-block": "^3.0.0",
+    "@tiptap/extension-image": "^3.0.0",
+    "@tiptap/extension-subscript": "^3.0.0",
+    "@tiptap/extension-superscript": "^3.0.0",
+    "@tiptap/extension-table": "^3.0.0",
+    "@tiptap/pm": "^3.0.0",
+    "@tiptap/react": "^3.0.0",
+    "@tiptap/starter-kit": "^3.0.0",
     "@types/d3-scale": "4.0.9",
     "@types/d3-time-format": "4.0.3",
     "@types/jest": "29.5.14",
     "@types/node": "22.19.18",
     "@types/react": "19.2.14",
     "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jsdom": "^20.0.3",
+    "parse5": "^7.3.0",
     "react": "19.2.0",
     "react-native": "0.83.6",
     "react-test-renderer": "19.2.0",
     "ts-jest": "29.4.9",
     "typescript": "5.9.3",
-    "@everystack/api": "0.4.2",
-    "@everystack/ui": "0.4.1"
+    "@everystack/api": "0.4.4",
+    "@everystack/ui": "0.4.3"
   },
   "scripts": {
     "test": "jest",

package/src/adapters/EverystackAdapter.ts

@@ -7,8 +7,10 @@
 
 import { createClient, type Client, type ClientOptions, type QueryBuilder } from '@everystack/api/client';
 import { toCamelCaseKeys } from '../utils/naming';
+import { mergeFilters, normalizeSearchText } from '../utils/list-query';
 import type { DataAdapter } from './types';
 import type {
+  DeletedMode,
   ListParams,
   ListResult,
   DataRecord,
@@ -23,6 +25,14 @@ const POSTGREST_OPERATORS = new Set([
   'sl', 'sr', 'nxl', 'nxr', 'adj', 'ov', 'fts',
 ]);
 
+/**
+ * The handler answers 200 [] when a write matches no row, whether the row is gone or a policy
+ * hides it. A write by one id that touched nothing failed, so update and delete refuse it with
+ * one message for both causes: naming the cause would tell a caller whether the row exists.
+ */
+const ZERO_ROW_UPDATE = 'No row was updated. It may not exist, or you may not have permission.';
+const ZERO_ROW_DELETE = 'No row was deleted. It may not exist, or you may not have permission.';
+
 /**
  * `onTokenExpired` and `onAuthFailure` (inherited from `ClientOptions`) are how
  * the admin survives a session longer than the access token's TTL. Without
@@ -53,7 +63,8 @@ export interface EverystackAdapterOptions extends ClientOptions {
 }
 
 export class EverystackAdapter implements DataAdapter {
-  private client: Client;
+  readonly supportsSearch = true;
+  protected readonly client: Client;
   private listRpcs: Record<string, string>;
   private crudRpcs: Record<string, string>;
 
@@ -74,6 +85,12 @@ export class EverystackAdapter implements DataAdapter {
     // RPC-backed list (e.g. DB-free observability tables over the S3 archive).
     const listRpc = this.listRpcs[resource];
     if (listRpc) {
+      const text = normalizeSearchText(params.search);
+      const field = params.searchFields?.[0];
+      // RPC lists keep the first-field filter protocol; escape wildcard text for the S3 matcher.
+      const filter = text && field
+        ? mergeFilters(params.filter, { [field]: `ilike.*${text.replace(/[\\*%]/g, c => `\\${c}`)}*` })
+        : params.filter;
       // Accept either the S3 list shape ({ data, total }) or the dashboard eventList shape
       // ({ rows, total }) so a resource can be served by either kind of RPC.
       const result = await this.rpc<{ data?: T[]; rows?: T[]; total: number }>(listRpc, {
@@ -81,7 +98,8 @@ export class EverystackAdapter implements DataAdapter {
         offset,
         sort: params.sort,
         dir: params.order ?? 'asc',
-        filter: params.filter,
+        filter,
+        ...(params.deleted ? { deleted: params.deleted } : {}),
       });
       // Normalize row keys to camelCase so the list columns resolve regardless of whether
       // the RPC returns snake_case (e.g. jobsEventList over ops.runs) or camelCase (S3 lists,
@@ -96,9 +114,12 @@ export class EverystackAdapter implements DataAdapter {
     }
 
     let builder = this.client.from(resource);
+    if (params.select) builder = builder.select(params.select);
+    if (params.deleted) builder = builder.deleted(params.deleted);
 
-    // Apply filters
+    // Apply filters, then the search group beside them
     builder = applyFilters(builder, params.filter);
+    builder = applySearch(builder, params);
 
     // Apply sort
     if (params.sort) {
@@ -125,16 +146,24 @@ export class EverystackAdapter implements DataAdapter {
   async fetchOne<T extends DataRecord = DataRecord>(
     resource: string,
     id: string | number,
+    params?: { select?: string; deleted?: DeletedMode },
   ): 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) });
+      const record = await this.rpc<T | null>(crudRpc, {
+        action: 'get',
+        id: String(id),
+        ...(params?.deleted ? { deleted: params.deleted } : {}),
+      });
       if (!record) throw new Error(`${resource}/${id} not found`);
       return record;
     }
 
-    const result = await this.client.from(resource).eq('id', String(id)).single();
+    let builder = this.client.from(resource).eq('id', String(id));
+    if (params?.select) builder = builder.select(params.select);
+    if (params?.deleted) builder = builder.deleted(params.deleted);
+    const result = await builder.single();
 
     if (result.error) {
       throw new Error(result.error.status === 406
@@ -167,22 +196,31 @@ export class EverystackAdapter implements DataAdapter {
     resource: string,
     id: string | number,
     data: Partial<T>,
+    params?: { deleted?: DeletedMode },
   ): 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 }));
+      return this.rpcResult<T>(await this.rpc<T | { error: string }>(crudRpc, {
+        action: 'update',
+        id: String(id),
+        data,
+        ...(params?.deleted ? { deleted: params.deleted } : {}),
+      }));
     }
 
-    const result = await this.client
-      .from(resource)
-      .eq('id', String(id))
-      .update(data as Record<string, unknown>);
+    let builder = this.client.from(resource).eq('id', String(id));
+    if (params?.deleted) builder = builder.deleted(params.deleted);
+    const result = await builder.update(data as Record<string, unknown>);
 
     if (result.error) {
       throw new Error(result.error.message);
     }
 
-    const rows = result.data as T[];
+    const rows = (result.data ?? []) as T[];
+    if (rows.length === 0) {
+      // A restore that matched nothing: the row is not deleted, or not there.
+      throw new Error(params?.deleted ? `${resource}/${id} not found or not changed` : ZERO_ROW_UPDATE);
+    }
     return rows[0];
   }
 
@@ -198,6 +236,8 @@ export class EverystackAdapter implements DataAdapter {
     if (result.error) {
       throw new Error(result.error.message);
     }
+
+    if ((result.data ?? []).length === 0) throw new Error(ZERO_ROW_DELETE);
   }
 
   /** Unwrap an action RPC result, surfacing a `{ error }` payload as a throw. */
@@ -238,9 +278,11 @@ export class EverystackAdapter implements DataAdapter {
     }
 
     let builder = this.client.from(resource).select(selectParts.join(','));
+    if (params.deleted) builder = builder.deleted(params.deleted);
 
-    // Apply filters
+    // Apply filters, then the search group beside them (the same rules as a list)
     builder = applyFilters(builder, params.filter);
+    builder = applySearch(builder, params);
 
     const result = await builder.execute();
 
@@ -268,6 +310,15 @@ function applyFilters(builder: QueryBuilder, filter?: Record<string, unknown>):
 
   for (const [key, value] of Object.entries(filter)) {
     if (value == null) continue;
+    // `or` / `and` are PostgREST logical groups, not columns. The handler reads
+    // one of each, so a second expression would silently replace the first.
+    if (key === 'or' || key === 'and') {
+      if (typeof value !== 'string') {
+        throw new Error(`filter "${key}" takes one expression string, e.g. "(a.eq.1,b.eq.2)"`);
+      }
+      builder = builder[key](stripOuterParens(value));
+      continue;
+    }
     // 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)) {
@@ -293,6 +344,8 @@ function applyOneFilter(builder: QueryBuilder, key: string, value: unknown): Que
   const op = strValue.substring(0, dotIndex);
   const val = strValue.substring(dotIndex + 1);
 
+  if (op === 'not') return applyNegatedFilter(builder, key, val, strValue);
+
   switch (op) {
     case 'eq': return builder.eq(key, val);
     case 'neq': return builder.neq(key, val);
@@ -312,6 +365,68 @@ function applyOneFilter(builder: QueryBuilder, key: string, value: unknown): Que
   }
 }
 
+/**
+ * Apply `not.<op>.<value>`. `rest` is everything after `not.`; `whole` is the
+ * full original value, used for the same eq fallback an unknown operator gets.
+ */
+function applyNegatedFilter(builder: QueryBuilder, key: string, rest: string, whole: string): QueryBuilder {
+  const dotIndex = rest.indexOf('.');
+  const op = dotIndex < 0 ? rest : rest.substring(0, dotIndex);
+  const val = dotIndex < 0 ? '' : rest.substring(dotIndex + 1);
+
+  switch (op) {
+    case 'eq': return builder.notEq(key, val);
+    case 'neq': return builder.notNeq(key, val);
+    case 'gt': return builder.notGt(key, val);
+    case 'gte': return builder.notGte(key, val);
+    case 'lt': return builder.notLt(key, val);
+    case 'lte': return builder.notLte(key, val);
+    case 'like': return builder.notLike(key, val);
+    case 'ilike': return builder.notIlike(key, val);
+    case 'is': return builder.notIs(key, val);
+    case 'in': return builder.notIn(key, val.replace(/^\(/, '').replace(/\)$/, '').split(','));
+    default:
+      return builder.eq(key, whole);
+  }
+}
+
+/** Plain column names only: a search field is spliced into an `or=(...)` expression. */
+const SEARCH_FIELD = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+/**
+ * Match `params.search` in any of `params.searchFields`, as one `or()` group.
+ *
+ * The handler splits an `or` group on every comma and has no quoting, so user
+ * text must not carry `,` `(` `)`. `\` `%` `_` are escaped so they match
+ * literally; the structural characters and a typed `*` (the handler turns every
+ * `*` into `%`) become `_`, the one-character wildcard, so a stored value that
+ * contains them ("Alpha, Beta") still matches.
+ */
+function applySearch(builder: QueryBuilder, params: Pick<ListParams, 'filter' | 'search' | 'searchFields'>): QueryBuilder {
+  const fields = params.searchFields ?? [];
+  for (const field of fields) {
+    if (!SEARCH_FIELD.test(field)) throw new Error(`invalid search field "${field}": plain column names only`);
+  }
+
+  const text = normalizeSearchText(params.search);
+  if (!text) return builder;
+
+  if (fields.length === 0) {
+    throw new Error('ListParams.search needs ListParams.searchFields (the columns to look in)');
+  }
+  if (params.filter?.or != null) {
+    throw new Error('search cannot be combined with an "or" filter: the handler reads one or group');
+  }
+
+  const pattern = `*${text.replace(/[\\%_]/g, c => `\\${c}`).replace(/[,()*]/g, '_')}*`;
+  return builder.or(fields.map(field => `${field}.ilike.${pattern}`).join(','));
+}
+
+/** `(a.eq.1,b.eq.2)` → `a.eq.1,b.eq.2`; the client builder adds its own parentheses. */
+function stripOuterParens(expression: string): string {
+  return expression.startsWith('(') && expression.endsWith(')') ? expression.slice(1, -1) : expression;
+}
+
 /**
  * Check if a filter value is already in PostgREST format (operator.value).
  */

package/src/adapters/types.ts

@@ -6,6 +6,7 @@
  */
 
 import type {
+  DeletedMode,
   ListParams,
   ListResult,
   DataRecord,
@@ -18,6 +19,9 @@ import type {
 // =============================================================================
 
 export interface DataAdapter {
+  /** Handles search + searchFields in both list and aggregate params. Otherwise the UI uses a first-field filter. */
+  supportsSearch?: boolean;
+
   /**
    * Fetch a list of records with pagination, sorting, and filtering
    */
@@ -27,9 +31,15 @@ export interface DataAdapter {
   ): Promise<ListResult<T>>;
 
   /**
-   * Fetch a single record by ID
+   * Fetch a single record by ID. `params.select` is a PostgREST select string,
+   * embeds included. EverystackAdapter ignores it on the crudRpcs branch.
+   * `params.deleted` reads a soft-deleted row (see ListParams.deleted).
    */
-  fetchOne<T extends DataRecord = DataRecord>(resource: string, id: string | number): Promise<T>;
+  fetchOne<T extends DataRecord = DataRecord>(
+    resource: string,
+    id: string | number,
+    params?: { select?: string; deleted?: DeletedMode }
+  ): Promise<T>;
 
   /**
    * Create a new record
@@ -37,12 +47,14 @@ export interface DataAdapter {
   create<T extends DataRecord = DataRecord>(resource: string, data: Omit<T, 'id'>): Promise<T>;
 
   /**
-   * Update an existing record
+   * Update an existing record. `params.deleted` lets the write match a
+   * soft-deleted row: Restore sends `{ [column]: null }` with `{ deleted: 'only' }`.
    */
   update<T extends DataRecord = DataRecord>(
     resource: string,
     id: string | number,
-    data: Partial<T>
+    data: Partial<T>,
+    params?: { deleted?: DeletedMode }
   ): Promise<T>;
 
   /**
@@ -51,7 +63,12 @@ export interface DataAdapter {
   delete(resource: string, id: string | number): Promise<void>;
 
   /**
-   * Fetch aggregate data (count, sum, avg, min, max) with optional grouping
+   * Fetch aggregate data (count, sum, avg, min, max) with optional grouping.
+   * EverystackAdapter queries the table named after the resource; unlike its
+   * fetchList it has no listRpcs path. For a resource whose name is not a
+   * table, override aggregate() together with fetchList().
+   * Honour `params.deleted`: an aggregate that ignores it counts live rows on
+   * a Deleted tab, and the admin cannot tell.
    */
   aggregate?(resource: string, params: AggregateParams): Promise<AggregateResult>;
 

package/src/components/AdminLink.tsx

@@ -0,0 +1,59 @@
+/**
+ * AdminLink — a link to an admin screen of another resource.
+ *
+ * The href comes from adminHref, the same builder AdminRouter uses. With no
+ * AdminNavigationContext, or a resource the admin does not configure, it
+ * renders the children as plain Text: there is nowhere to go.
+ *
+ * The link claims the press, so a press in a list row does not also fire the
+ * row's onRowPress. `href` lets react-native-web render an anchor.
+ */
+
+import React, { type ReactNode } from 'react';
+import { Pressable, Text } from 'react-native';
+import { useAdminNavigation } from '../hooks/useAdminNavigation';
+import { adminHref } from '../utils/admin-routing';
+
+export interface AdminLinkProps {
+  to: { resource: string; id?: string | number; action?: 'show' | 'edit' };
+  children: ReactNode;
+  numberOfLines?: number;
+}
+
+interface PressEvent {
+  stopPropagation?: () => void;
+  preventDefault?: () => void;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  shiftKey?: boolean;
+}
+
+export function AdminLink({ to, children, numberOfLines }: AdminLinkProps): React.ReactElement {
+  const navigation = useAdminNavigation();
+  if (!navigation || !navigation.resources.includes(to.resource)) {
+    return <Text className="text-sm text-gray-900" numberOfLines={numberOfLines}>{children}</Text>;
+  }
+  const href = adminHref(navigation.basePath, {
+    resource: to.resource,
+    id: to.id,
+    action: to.action === 'edit' ? 'edit' : undefined,
+  });
+  // react-native's Pressable types have no `href`; react-native-web reads it.
+  const anchor = { href } as Record<string, unknown>;
+  return (
+    <Pressable
+      accessibilityRole="link"
+      {...anchor}
+      onPress={(e?: PressEvent) => {
+        e?.stopPropagation?.();
+        // A modifier click is the browser's: the anchor opens a new tab.
+        if (e?.metaKey || e?.ctrlKey || e?.shiftKey) return;
+        // The anchor would load the page itself on web; the router navigates instead.
+        e?.preventDefault?.();
+        navigation.push(href);
+      }}
+    >
+      <Text className="text-sm text-blue-600 underline" numberOfLines={numberOfLines}>{children}</Text>
+    </Pressable>
+  );
+}

package/src/components/CellText.tsx

@@ -0,0 +1,18 @@
+/**
+ * Wraps a bare string or number from a custom field.render in the default cell
+ * Text. react-native cannot render a text node outside <Text>, so a render
+ * that returns `42` or `'abc'` would otherwise crash on native. Elements,
+ * arrays, null, undefined and booleans pass through untouched.
+ */
+
+import React, { type ReactNode } from 'react';
+import { Text } from 'react-native';
+
+export function wrapBareText(node: ReactNode, numberOfLines?: number): ReactNode {
+  if (typeof node !== 'string' && typeof node !== 'number') return node;
+  return (
+    <Text className="text-sm text-gray-900" numberOfLines={numberOfLines}>
+      {node}
+    </Text>
+  );
+}