@everystack/admin 0.4.1 → 0.4.3

package/src/components/RowActionButton.tsx

@@ -25,12 +25,16 @@ export interface RowActionButtonProps {
   /** Value sent as `{ id }` to an rpc action (record[primaryKey]). */
   recordId: string | number;
   adapter: DataAdapter;
-  /** Re-fetch the current view after the action completes. */
+  /** Re-fetch the current view after the action completes or fails. */
   refetch: () => Promise<void> | void;
   /** Navigate to an admin path, when the route layer provides it. */
   navigate?: (path: string) => void;
 }
 
+function messageOf(err: unknown): string {
+  return err instanceof Error ? err.message : String(err);
+}
+
 export function RowActionButton({
   action,
   record,
@@ -56,15 +60,26 @@ export function RowActionButton({
     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 });
+      let failed = false;
+      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 });
+        }
+      } catch (err) {
+        failed = true;
+        setError(messageOf(err));
+      }
+      // Refetch on failure too: a delete of a row another session already
+      // removed fails, and the list must still drop the stale row.
+      try {
+        await refetch();
+      } catch (err) {
+        // A refetch fault never replaces the action's own error.
+        if (!failed) setError(messageOf(err));
       }
-      await refetch();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
     } finally {
       setBusy(false);
       setConfirming(false);

package/src/components/TagsDisplay.tsx

@@ -0,0 +1,22 @@
+/**
+ * TagsDisplay — read-only pills for a `type: 'tags'` value on the show view.
+ * Labels come from the field's groups; a value no group lists shows as itself.
+ */
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { Badge } from '@everystack/ui';
+import { tagLabel, tagValues } from '../utils/tags';
+import type { FieldDefinition } from '../types';
+
+export function TagsDisplay({ field, value }: { field: FieldDefinition; value: unknown }): React.ReactElement {
+  const tags = tagValues(value);
+  if (tags.length === 0) return <Text className="text-sm text-gray-900">{'—'}</Text>;
+  return (
+    <View testID={`tags-${field.name}`} className="flex-row flex-wrap gap-2">
+      {tags.map((tag, i) => (
+        <Badge key={`${i}-${tag}`} label={tagLabel(field, tag)} />
+      ))}
+    </View>
+  );
+}

package/src/components/TagsFieldInput.tsx

@@ -0,0 +1,95 @@
+/**
+ * TagsFieldInput
+ *
+ * Create/edit input for `type: 'tags'` (a text[] column). Each group from
+ * `field.tagGroups` is a row of pills. A press toggles that one value and
+ * keeps every other stored value in place. Stored values that no group lists
+ * show in an "Other" row as selected pills, so they stay visible and a save
+ * keeps them; pressing one removes it.
+ */
+
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { FormField, Badge } from '@everystack/ui';
+import { tagValues, toggleTag, unlistedTags } from '../utils/tags';
+import type { FieldDefinition } from '../types';
+
+export interface TagsFieldInputProps {
+  field: FieldDefinition;
+  value: unknown;
+  error?: string;
+  onChange: (value: unknown) => void;
+}
+
+interface PillOption {
+  value: string;
+  label: string;
+}
+
+export function TagsFieldInput({ field, value, error, onChange }: TagsFieldInputProps): React.ReactElement {
+  const label = field.label ?? field.name;
+  const selected = tagValues(value);
+  const toggle = (tag: string): void => onChange(toggleTag(selected, tag));
+  const other = unlistedTags(field, selected);
+
+  return (
+    <FormField label={label} error={error} required={field.validation?.required}>
+      {(field.tagGroups ?? []).map((group, i) => (
+        <PillRow
+          key={i}
+          testID={`tags-${field.name}-group-${i}`}
+          fieldName={field.name}
+          heading={group.label}
+          options={group.options.map(o => ({ value: o.value, label: o.label ?? o.value }))}
+          selected={selected}
+          onToggle={toggle}
+        />
+      ))}
+      {other.length > 0 && (
+        <PillRow
+          testID={`tags-${field.name}-other`}
+          fieldName={field.name}
+          heading="Other"
+          options={other.map(v => ({ value: v, label: v }))}
+          selected={selected}
+          onToggle={toggle}
+        />
+      )}
+    </FormField>
+  );
+}
+
+interface PillRowProps {
+  testID: string;
+  fieldName: string;
+  heading?: string;
+  options: PillOption[];
+  selected: readonly string[];
+  onToggle: (tag: string) => void;
+}
+
+function PillRow({ testID, fieldName, heading, options, selected, onToggle }: PillRowProps): React.ReactElement {
+  return (
+    <View testID={testID} className="mb-2">
+      {heading ? <Text className="text-xs font-medium text-gray-500 mb-1">{heading}</Text> : null}
+      <View className="flex-row flex-wrap gap-2">
+        {options.map(option => {
+          const isSelected = selected.includes(option.value);
+          return (
+            <Pressable
+              key={option.value}
+              testID={`tag-${fieldName}-${option.value}`}
+              accessibilityRole="button"
+              accessibilityLabel={option.label}
+              accessibilityState={{ selected: isSelected }}
+              hitSlop={6}
+              onPress={() => onToggle(option.value)}
+            >
+              <Badge label={option.label} variant={isSelected ? 'info' : 'default'} />
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/editors/rich-html-extensions.ts

@@ -0,0 +1,63 @@
+import { Node, type Extensions } from '@tiptap/react';
+import type { DOMOutputSpec, TagParseRule } from '@tiptap/pm/model';
+import StarterKit from '@tiptap/starter-kit';
+import { Code } from '@tiptap/extension-code';
+import { CodeBlock } from '@tiptap/extension-code-block';
+import { Image } from '@tiptap/extension-image';
+import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
+import { Subscript } from '@tiptap/extension-subscript';
+import { Superscript } from '@tiptap/extension-superscript';
+
+export const Figure = Node.create({
+  name: 'figure',
+  group: 'block',
+  content: 'image+ figcaption?',
+  isolating: true,
+  draggable: true,
+  parseHTML(): TagParseRule[] {
+    return [{
+      tag: 'figure',
+      // An unparseable image must not make ProseMirror invent a required image.
+      getAttrs: (element: HTMLElement): null | false => element.querySelector('img[src]') ? null : false,
+    }];
+  },
+  renderHTML(): DOMOutputSpec {
+    return ['figure', 0];
+  },
+});
+
+export const Figcaption = Node.create({
+  name: 'figcaption',
+  // Images are inline; the figure's content rule cannot mix inline and block nodes.
+  inline: true,
+  content: 'inline*',
+  defining: true,
+  parseHTML(): TagParseRule[] {
+    return [{ tag: 'figcaption', context: 'figure/' }];
+  },
+  renderHTML(): DOMOutputSpec {
+    return ['figcaption', 0];
+  },
+});
+
+export function richHtmlExtensions(): Extensions {
+  return [
+    StarterKit.configure({
+      code: false,
+      codeBlock: false,
+      link: { openOnClick: false, HTMLAttributes: { target: null, rel: null } },
+    }),
+    // Preserve links without changing code's treatment of the other stock marks.
+    Code.extend({ excludes: 'bold italic underline strike subscript superscript code' }),
+    CodeBlock.extend({ marks: 'link' }),
+    Image.configure({ inline: true, allowBase64: true }),
+    Figure,
+    Figcaption,
+    Table,
+    TableRow,
+    TableCell,
+    TableHeader,
+    Subscript,
+    Superscript,
+  ];
+}

package/src/editors/tiptap.tsx

@@ -2,23 +2,29 @@
  * 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:
+ * optional peer dependency. Tiptap 3 is required. To use:
  *
- *   pnpm add @tiptap/react @tiptap/starter-kit @tiptap/pm
+ *   pnpm add @tiptap/react@^3 @tiptap/starter-kit@^3 @tiptap/pm@^3
+ *     @tiptap/extension-image@^3 @tiptap/extension-table@^3
+ *     @tiptap/extension-subscript@^3 @tiptap/extension-superscript@^3
+ *     @tiptap/extension-code@^3 @tiptap/extension-code-block@^3
  *   import { TiptapEditor } from '@everystack/admin/editors/tiptap';
  *   <AdminShell editors={{ tiptap: TiptapEditor }} ... />
  *   // field: { name: 'body', type: 'string', editor: 'tiptap', format: 'html' }
  *
- * Reads and writes an HTML string via the EditorProps contract. The toolbar
+ * Reads and writes an HTML string via the EditorProps contract. The schema
+ * keeps inline images, figures with captions, tables, links, underline,
+ * subscript and superscript. 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 React, { useEffect, useMemo, useRef, useState } from 'react';
+import { View, Text, Pressable, TextInput } from 'react-native';
 import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
+import { richHtmlExtensions } from './rich-html-extensions';
+import { unsupportedMarkup } from './unsupported-markup';
 import type { EditorProps } from '../types';
 
 interface ToolbarButtonProps {
@@ -40,29 +46,124 @@ function ToolbarButton({ label, active, onPress }: ToolbarButtonProps): React.Re
   );
 }
 
-export function TiptapEditor({ value, onChange, error }: EditorProps): React.ReactElement {
+// The registry calls adapters as plain functions, so hooks belong in the element.
+export function TiptapEditor(props: EditorProps): React.ReactElement {
+  return <RichHtmlEditor {...props} />;
+}
+
+function RichHtmlEditor({ value, onChange, error }: EditorProps): React.ReactElement {
+  const incoming = typeof value === 'string' ? value : '';
+  const [html, setHtml] = useState(incoming);
+  const [mode, setMode] = useState<'visual' | 'html'>(() =>
+    unsupportedMarkup(incoming).length > 0 ? 'html' : 'visual');
+  const original = useRef(incoming);
+  const dirty = useRef(false);
+  const currentMode = useRef(mode);
+  const loadingContent = useRef(false);
+  const extensions = useMemo(richHtmlExtensions, []);
+  const unsupported = useMemo(() => unsupportedMarkup(html), [html]);
   const editor = useEditor({
-    extensions: [StarterKit],
-    content: typeof value === 'string' ? value : '',
+    extensions,
+    content: mode === 'visual' ? html : '',
     // 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()),
+    onUpdate: ({ editor, transaction, appendedTransactions }) => {
+      // Loading/normalizing is not a user edit. setContent below also suppresses
+      // update events; the initialization guard covers plugin updates on load.
+      if (loadingContent.current || !editor.isInitialized || currentMode.current !== 'visual'
+        || ![transaction, ...appendedTransactions].some(tr => tr.docChanged)) return;
+      dirty.current = true;
+      const next = editor.getHTML();
+      setHtml(next);
+      onChange(next);
+    },
   });
 
+  useEffect(() => {
+    if (dirty.current || incoming === original.current) return;
+    original.current = incoming;
+    const nextMode = unsupportedMarkup(incoming).length > 0 ? 'html' : 'visual';
+    currentMode.current = nextMode;
+    setHtml(incoming);
+    setMode(nextMode);
+    if (editor) {
+      loadingContent.current = true;
+      try {
+        editor.commands.setContent(nextMode === 'visual' ? incoming : '', { emitUpdate: false });
+      } finally {
+        loadingContent.current = false;
+      }
+    }
+  }, [incoming, editor]);
+
+  const showVisual = () => {
+    if (mode === 'visual' || unsupported.length > 0 || !editor) return;
+    loadingContent.current = true;
+    try {
+      editor.commands.setContent(html, { emitUpdate: false });
+    } finally {
+      loadingContent.current = false;
+    }
+    currentMode.current = 'visual';
+    setMode('visual');
+  };
+  const showHtml = () => {
+    if (mode === 'html') return;
+    // Keep stored bytes until an edit, even if Tiptap normalized its own copy.
+    setHtml(dirty.current && editor ? editor.getHTML() : original.current);
+    currentMode.current = 'html';
+    setMode('html');
+  };
+
   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 className="flex-row gap-1 mb-2">
+        <Pressable onPress={showVisual} disabled={unsupported.length > 0}
+          accessibilityRole="button" accessibilityState={{ disabled: unsupported.length > 0, selected: mode === 'visual' }}
+          className={unsupported.length > 0 ? 'px-2 py-1 rounded opacity-50' : 'px-2 py-1 rounded border border-gray-200'}>
+          <Text className="text-sm text-gray-700">Visual</Text>
+        </Pressable>
+        <Pressable onPress={showHtml} accessibilityRole="button" accessibilityState={{ selected: mode === 'html' }}
+          className="px-2 py-1 rounded border border-gray-200">
+          <Text className="text-sm text-gray-700">HTML</Text>
+        </Pressable>
       </View>
+      {unsupported.length > 0 ? (
+        <Text className="text-sm text-gray-700 mb-2">
+          {`This content has ${unsupported.map(({ name, count }) => `${count} ${name}`).join(' and ')} that the visual editor would delete. Edit the HTML, or remove them to use the visual editor.`}
+        </Text>
+      ) : null}
+      {mode === 'html' ? (
+        <TextInput
+          accessibilityLabel="HTML source"
+          multiline
+          value={html}
+          onChangeText={next => {
+            dirty.current = true;
+            setHtml(next);
+            onChange(next);
+          }}
+          autoCapitalize="none"
+          autoCorrect={false}
+          style={{ fontFamily: 'monospace', minHeight: 200, textAlignVertical: 'top' }}
+          className="border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-900"
+        />
+      ) : (
+        <>
+          <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>
   );

package/src/editors/unsupported-markup.ts

@@ -0,0 +1,150 @@
+const UNSUPPORTED_ELEMENTS = new Set([
+  'iframe', 'video', 'audio', 'picture', 'source', 'svg', 'math', 'form', 'input',
+  'button', 'select', 'textarea', 'noscript', 'embed', 'object',
+]);
+
+// These bodies may be text, depending on the parser's tree and scripting mode.
+const TEXT_ELEMENTS = new Set([
+  'iframe', 'script', 'style', 'textarea', 'title', 'xmp', 'noembed', 'noframes', 'noscript',
+]);
+
+interface Tag {
+  name: string;
+  closing: boolean;
+  hasSource: boolean;
+  end: number;
+}
+
+function isSpace(char: string): boolean {
+  return char === ' ' || char === '\t' || char === '\n' || char === '\r' || char === '\f';
+}
+
+function readTag(html: string, start: number, limit: number): Tag | null {
+  const opening = /<(\/?)([a-z][^\t\n\f\r />]*)/iy;
+  opening.lastIndex = start;
+  const match = opening.exec(html);
+  if (!match || opening.lastIndex > limit) return null;
+
+  let cursor = opening.lastIndex;
+  let sourceSeen = false;
+  let hasSource = false;
+  while (cursor < limit) {
+    if (html[cursor] === '>') {
+      const name = match[2].toLowerCase();
+      return { name: name === 'image' ? 'img' : name, closing: match[1] === '/', hasSource, end: cursor + 1 };
+    }
+    if (isSpace(html[cursor]) || html[cursor] === '/') {
+      cursor++;
+      continue;
+    }
+
+    const attrStart = cursor;
+    // Always consume a character, including malformed attribute names beginning with '='.
+    cursor++;
+    while (cursor < limit && !isSpace(html[cursor]) && !'/=>'.includes(html[cursor])) cursor++;
+    const attribute = html.slice(attrStart, cursor).toLowerCase();
+    while (cursor < limit && isSpace(html[cursor])) cursor++;
+    let value = '';
+    if (html[cursor] === '=') {
+      cursor++;
+      while (cursor < limit && isSpace(html[cursor])) cursor++;
+      const quote = html[cursor];
+      if (quote === '"' || quote === "'") {
+        const valueStart = ++cursor;
+        cursor = html.indexOf(quote, cursor);
+        if (cursor === -1 || cursor >= limit) return null;
+        value = html.slice(valueStart, cursor++);
+      } else {
+        const valueStart = cursor;
+        while (cursor < limit && !isSpace(html[cursor]) && html[cursor] !== '>') cursor++;
+        value = html.slice(valueStart, cursor);
+      }
+    }
+    // Duplicate HTML attributes keep their first value.
+    if (attribute === 'src' && !sourceSeen) {
+      sourceSeen = true;
+      hasSource = value.length > 0;
+    }
+  }
+  return null; // An unfinished tag at EOF creates no element.
+}
+
+/** Content-bearing elements outside the stock editor schema, in first-occurrence order.
+ * This scans HTML tokens without a DOM; it is not an HTML sanitizer.
+ */
+export function unsupportedMarkup(html: string): Array<{ kind: 'element'; name: string; count: number }> {
+  if (typeof html !== 'string' || !html) return [];
+  const found = new Map<string, { kind: 'element'; name: string; count: number }>();
+  const ranges = [{ start: 0, end: html.length }];
+  // Foreign content, select/frameset parsing and noscript can change text-element rules.
+  // Once these occur, scan text bodies conservatively rather than guessing the tree.
+  let uncertainText = false;
+  while (ranges.length) {
+    const range = ranges.pop()!;
+    let cursor = range.start;
+    let limit = range.end;
+    while ((cursor = html.indexOf('<', cursor)) !== -1 && cursor < limit) {
+      if (html.startsWith('<!--', cursor)) {
+        cursor += 4;
+        if (html[cursor] === '>') cursor++;
+        else if (html.startsWith('->', cursor)) cursor += 2;
+        else {
+          const ending = /--!?>/g;
+          ending.lastIndex = cursor;
+          if (!ending.exec(html) || ending.lastIndex > limit) break;
+          cursor = ending.lastIndex;
+        }
+        continue;
+      }
+      // Declarations (including CDATA outside foreign content) and processing instructions
+      // consume through the first '>'. Doing so in foreign content can only over-report.
+      if (html.startsWith('<!', cursor) || html.startsWith('<?', cursor)) {
+        const end = html.indexOf('>', cursor + 2);
+        if (end === -1 || end >= limit) break;
+        cursor = end + 1;
+        continue;
+      }
+
+      const tag = readTag(html, cursor, limit);
+      if (!tag) {
+        // A real tag prefix consumes to EOF if its attributes or closing bracket never finish.
+        if (/^<\/?[a-z]/i.test(html.slice(cursor, cursor + 3))) break;
+        cursor++;
+        continue;
+      }
+      cursor = tag.end;
+      if (tag.closing) continue;
+
+      const name = UNSUPPORTED_ELEMENTS.has(tag.name) ? tag.name
+        : tag.name === 'img' && !tag.hasSource ? 'img[no-src]' : null;
+      if (name) {
+        const entry = found.get(name);
+        if (entry) entry.count++;
+        else found.set(name, { kind: 'element', name, count: 1 });
+      }
+
+      if (['svg', 'math', 'select', 'frameset', 'noscript'].includes(tag.name)) uncertainText = true;
+      if (tag.name === 'plaintext' && !uncertainText) break;
+      if (TEXT_ELEMENTS.has(tag.name)) {
+        const closing = new RegExp(`</${tag.name}(?=[\\t\\n\\f\\r />])`, 'ig');
+        closing.lastIndex = cursor;
+        const end = closing.exec(html);
+        // Escaped scripts can contain apparent closing tags that do not end the script.
+        // Scan possible suffixes conservatively instead of trusting the first one.
+        if (tag.name === 'script') {
+          const escaped = html.indexOf('<!--', cursor);
+          if (escaped !== -1 && escaped < (end?.index ?? limit)) uncertainText = true;
+        }
+        if (!end || end.index >= limit) {
+          if (!uncertainText) break;
+        } else if (uncertainText) {
+          // A quote or comment in a possible text body must not swallow its closing tag
+          // and the real elements after it. Scan the body and the suffix separately.
+          ranges.push({ start: end.index, end: limit });
+          limit = end.index;
+        } else cursor = end.index;
+      }
+    }
+  }
+  return Array.from(found.values());
+}