@tristan2828/ui-foundation 4.19.0 → 4.20.0

package/conventions/docs/cell-patterns.md

@@ -856,6 +856,32 @@ view, so a link in the notes is edited there, not followed, and the
 editor loads on every visit. Use it where the notes are what the page is
 for; elsewhere `autosave` alone keeps the read view at rest.
 
+**Edited where it's read (`inline: true`, implies `alwaysEditable`)**,
+Notion-style, for rich text: the editor from the start, drawn as the read
+view rather than as a field (no border, no box, the text where the
+section's text would be), so there's no mode change at all: click into
+the words and type. Its control gets `inline: true` among its props;
+pass it to `RichTextEditor`'s `inline`, with `toolbar="floating"`, which
+keeps the toolbar over a selection (Alt+F10 reaches it) and the "/" menu
+but drops the bar above the text. An empty one shows the editor's
+`placeholder` (say "or type / for blocks" in it), not the view's "Not
+set". It saves like any always-editable value (a pause after typing,
+leaving the page saves first) and is otherwise the same: on the form the
+control is the boxed editor with its fixed toolbar.
+
+```tsx
+notes: editInPlace({
+  kind: 'long-text',
+  inline: true,
+  value: widget.notes,
+  schema: widgetFormSchema.shape.notes,
+  save: (notes) => editField.mutateAsync({ notes }),
+  // The form's own control, spreading what it gets onto RichTextEditor:
+  // inline={props.inline} toolbar={props.inline ? 'floating' : true}
+  control: (props) => <WidgetNotesEditor {...} />,
+}),
+```
+
 ```tsx
 description: editInPlace({
   kind: 'long-text',
@@ -919,7 +945,9 @@ const price = editInPlace({
   beside it add a row or a column, and the toolbar's Table menu inserts
   rows and columns, aligns a column and deletes.
   `toolbar={false}` leaves out the toolbars and the slash menu where a
-  value is short and the shortcuts are enough.
+  value is short and the shortcuts are enough; `toolbar="floating"` keeps
+  the floating one and the slash menu without the bar above (an `inline`
+  field's look).
 - **The save is the single-field save** (`useRecordUpdate` with
   `optimistic: false, toastOnError: false`, the entity's
   `useEdit<Entity>Field`), `mutateAsync` of one field's PATCH.

package/dist/components/app/edit-in-place.d.ts

@@ -24,6 +24,11 @@ export type EditControlProps<TDraft> = {
     describedBy: string;
     /** For a control that can't always produce a value to save (RichTextEditor's `onProblem`). */
     onProblem: (message: string | null) => void;
+    /**
+     * The field is `inline`: always editable, drawn as the text it edits.
+     * Give it to RichTextEditor's `inline` (with `toolbar="floating"`).
+     */
+    inline?: boolean;
 };
 /**
  * How the value saves, which follows from its control:
@@ -60,6 +65,7 @@ export type EditInPlace = {
     isEqual?: (a: unknown, b: unknown) => boolean;
     autosave?: boolean;
     alwaysEditable?: boolean;
+    inline?: boolean;
 };
 export type EditInPlaceOptions<TDraft, TValue> = {
     kind: EditKind;
@@ -100,6 +106,15 @@ export type EditInPlaceOptions<TDraft, TValue> = {
      * in rich text is edited there, not followed.
      */
     alwaysEditable?: boolean;
+    /**
+     * For long text: always editable (implies `alwaysEditable`), and drawn
+     * as the read view, not as a field: no border, no box, typed into where
+     * it's read (Notion-style). The control gets `inline: true`; pass it to
+     * RichTextEditor's `inline`, with `toolbar="floating"` (the toolbar over
+     * a selection and the slash menu, no bar above the text). An empty one
+     * shows the editor's `placeholder`, not the view's "Not set".
+     */
+    inline?: boolean;
 };
 /** What a list item's fields are given while it's edited: a control's props, plus where the item is. */
 export type EditListItemProps<TItem> = EditControlProps<TItem> & {

package/dist/components/app/editable-value.js

@@ -16,6 +16,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   Ctrl/Cmd+Enter and Esc save what's left now and close it.
 // - `alwaysEditable`: the control is shown at rest, with no pencil and no
 //   click to open, and never closes. Ctrl/Cmd+Enter and Esc save now.
+// - `inline`: always editable, and the control is told to look like the
+//   value it edits (`inline` among its props).
 import { CheckIcon, PencilIcon } from 'lucide-react';
 import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { useBlocker } from 'react-router';
@@ -58,10 +60,13 @@ export function EditableField({ label, edit, children, layout = 'block', classNa
     const key = useId();
     const controlId = `${key}-control`;
     const describedBy = `${key}-status`;
-    // The latest config, read by the store whenever it needs it.
+    const always = Boolean(edit.alwaysEditable || edit.inline);
+    const autosave = always || Boolean(edit.autosave);
+    // The latest config, read by the store whenever it needs it (`inline`
+    // is always editable to it).
     const config = useRef(edit);
     useLayoutEffect(() => {
-        config.current = edit;
+        config.current = always && !edit.alwaysEditable ? { ...edit, alwaysEditable: true } : edit;
     });
     useEffect(() => store.register(key, () => config.current), [store, key]);
     const state = useSyncExternalStore(store.subscribe, () => store.state(key), () => store.state(key));
@@ -72,8 +77,6 @@ export function EditableField({ label, edit, children, layout = 'block', classNa
     // Set by a keyboard save or Esc: the caret goes back to the edit button.
     const refocus = useRef(false);
     const blurTimer = useRef(undefined);
-    const always = Boolean(edit.alwaysEditable);
-    const autosave = always || Boolean(edit.autosave);
     // An always-editable control starts over (it's uncontrolled: a rich-text
     // editor reads its value once) when the value changed elsewhere while
     // nothing of its own was unsaved and the caret wasn't in it.
@@ -209,7 +212,7 @@ export function EditableField({ label, edit, children, layout = 'block', classNa
     const open = state.status === 'closed' ? { status: 'open', draft: edit.value, error: null, autosave: undefined, revision: 0 } : state;
     const saving = open.status === 'saving';
     const autosaving = open.autosave === 'saving';
-    return (_jsxs("span", { ref: container, "data-slot": "editable-value", "data-state": saving || autosaving ? 'saving' : open.error ? 'failed' : 'editing', onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, className: cn('flex min-w-0 flex-col gap-1.5', layout === 'block' ? 'w-full' : 'w-fit max-w-full', className), children: [_jsx(Control, { render: edit.control, id: controlId, value: open.draft, onChange: (value) => store.change(key, value), commit: commit, cancel: cancel, disabled: saving, invalid: !saving && open.error !== null, label: label, describedBy: describedBy, onProblem: (problem) => store.report(key, problem) }, open.revision ?? 0), _jsx("span", { id: describedBy, className: "type-body", children: autosave ? (_jsxs(_Fragment, { children: [open.error && _jsx(FieldError, { className: "type-caption", children: open.error }), _jsx("span", { role: "status", className: "inline-flex items-center gap-1.5 type-caption text-muted-foreground", children: autosaving ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", className: "size-3.5" }), "Saving\u2026"] })) : (open.autosave === 'saved' &&
+    return (_jsxs("span", { ref: container, "data-slot": "editable-value", "data-state": saving || autosaving ? 'saving' : open.error ? 'failed' : 'editing', onKeyDown: onKeyDown, onBlur: onBlur, onFocus: onFocus, className: cn('flex min-w-0 flex-col gap-1.5', layout === 'block' ? 'w-full' : 'w-fit max-w-full', className), children: [_jsx(Control, { render: edit.control, id: controlId, value: open.draft, onChange: (value) => store.change(key, value), commit: commit, cancel: cancel, disabled: saving, invalid: !saving && open.error !== null, label: label, describedBy: describedBy, onProblem: (problem) => store.report(key, problem), inline: Boolean(edit.inline) }, open.revision ?? 0), _jsx("span", { id: describedBy, className: "type-body", children: autosave ? (_jsxs(_Fragment, { children: [open.error && _jsx(FieldError, { className: "type-caption", children: open.error }), _jsx("span", { role: "status", className: "inline-flex items-center gap-1.5 type-caption text-muted-foreground", children: autosaving ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { "aria-hidden": "true", className: "size-3.5" }), "Saving\u2026"] })) : (open.autosave === 'saved' &&
                                 !open.error && (_jsxs(_Fragment, { children: [_jsx(CheckIcon, { "aria-hidden": "true", className: "size-3.5" }), "Saved"] }))) })] })) : saving ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1.5 type-caption text-muted-foreground", children: [_jsx(Spinner, { "aria-hidden": "true", className: "size-3.5" }), "Saving\u2026"] })) : (open.error && _jsx(FieldError, { className: "type-caption", children: open.error })) })] }));
 }
 /**

package/dist/components/app/milkdown-editor.d.ts

@@ -1,2 +1,2 @@
 import type { RichTextEditorProps } from './rich-text-editor.js';
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, inline, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;

package/dist/components/app/milkdown-editor.js

@@ -33,11 +33,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   length as it nears `maxLength`.
 // - A fixed toolbar above the text (rich-text-toolbar.tsx), and a
 //   floating one over selected words (rich-text-floating-toolbar.tsx),
-//   unless `toolbar={false}`. Alt+F10 reaches the floating one when it
-//   shows, else the fixed one.
+//   unless `toolbar={false}`; `toolbar="floating"` leaves out the fixed
+//   one. Alt+F10 reaches the floating one when it shows, else the fixed one.
 // - A slash menu (rich-text-slash.ts, rich-text-slash-menu.tsx): "/" at a
 //   line's start lists the blocks it can become, also unless
 //   `toolbar={false}`.
+// - `inline`: the field drawn as the text it edits (no border, no box),
+//   for notes that are always editable where they're read.
 import { useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, parserCtx, remarkStringifyOptionsCtx, rootCtx, schemaCtx, serializerCtx, } from '@milkdown/kit/core';
@@ -238,7 +240,7 @@ function applyLink(view, target, href) {
     }
     view.dispatch(tr.scrollIntoView());
 }
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, inline = false, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
     const rootRef = useRef(null);
     const editorRef = useRef(null);
     const [linkBox, setLinkBox] = useState(null);
@@ -273,6 +275,10 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     useEffect(() => {
         latest.current = { onChange, onProblem, readOnly, placeholder };
     });
+    // The fixed bar above the text, and the menus over it (the floating
+    // toolbar and the slash menu), which `'floating'` keeps on their own.
+    const fixedToolbar = toolbar === true;
+    const menus = toolbar !== false;
     const ids = useId();
     const counterId = `${ids}-count`;
     // The editable element's id: the app's, or one of its own, so the
@@ -297,11 +303,11 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         attributes['aria-invalid'] = 'true';
     if (placeholder)
         attributes['aria-placeholder'] = placeholder;
-    if (toolbar)
+    if (menus)
         attributes['aria-keyshortcuts'] = 'Alt+F10';
     // The slash menu: open while a "/" typed at a line's start is followed
     // by something some block answers to, and the field has focus.
-    const slash = toolbar && !readOnly && focused && editorState ? slashQuery(editorState) : null;
+    const slash = menus && !readOnly && focused && editorState ? slashQuery(editorState) : null;
     const slashMatches = slash ? slashItems(slash.query) : [];
     const slashOpen = slash !== null && slashMatches.length > 0;
     const slashMenuKey = slash ? `${slash.from}:${slash.query}` : '';
@@ -674,7 +680,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     // The floating toolbar: words selected, focus in the field, the mouse up,
     // and nothing else open over the text.
     const selection = editorState?.selection;
-    const floatingOpen = Boolean(toolbar &&
+    const floatingOpen = Boolean(menus &&
         !readOnly &&
         editorView &&
         focused &&
@@ -696,15 +702,19 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col bg-transparent type-body text-foreground break-words', 
+                // Inline, it's the text itself: the caret shows where it's
+                // edited, and a refusal's reason under it says what's wrong.
+                !inline &&
+                    'rounded-lg border border-input transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', !inline && 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [fixedToolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
                         // Only once the editor is made: until then the editable element,
                         // and its id, aren't in the page (axe: aria-valid-attr-value).
-                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, text: textElement })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
+                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, text: textElement })), _jsx("div", { ref: rootRef, className: cn(!inline && 'min-h-24 px-2.5 py-2', 
                         // Read-only text is muted; the toolbar's buttons say so by being disabled.
                         'has-[[aria-readonly=true]]:text-muted-foreground', 
                         // The same type roles <Markdown> uses, so text reads the same
                         // being edited as being read.
-                        '[&_.ProseMirror]:flex [&_.ProseMirror]:min-h-20 [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', 
+                        '[&_.ProseMirror]:flex [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', !inline && '[&_.ProseMirror]:min-h-20', 
                         // ProseMirror's own required style (prosemirror-view's CSS): spaces
                         // as typed, so one at the end of a line isn't kept as &nbsp;.
                         '[&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', 

package/dist/components/app/rich-text-editor.d.ts

@@ -23,10 +23,19 @@ export type RichTextEditorProps = {
      * lists, link, …), each button with its shortcut, and one floating over
      * selected words (bold to link). Alt+F10 reaches them from the text.
      * With them, "/" at a line's start lists the blocks the line can become
-     * (the slash menu). On by default; `false` leaves the text alone, its
-     * shortcuts still working.
+     * (the slash menu). On by default; `'floating'` keeps the floating one
+     * and the slash menu but no bar above the text (Notion-style, with
+     * `inline`); `false` leaves the text alone, its shortcuts still working.
      */
-    toolbar?: boolean;
+    toolbar?: boolean | 'floating';
+    /**
+     * Looks like the text it edits: no border, no box, no padding, so it
+     * sits where `<Markdown>` would and reads the same. For notes that are
+     * always editable in place (`editInPlace`'s `inline`, which the control
+     * gets as `props.inline`); give it `toolbar="floating"` and a
+     * `placeholder`, which is all an empty one shows.
+     */
+    inline?: boolean;
     className?: string;
     /** The field's label. A rich-text area must have one: this, or `aria-labelledby`. */
     'aria-label'?: string;

package/dist/components/app/rich-text-editor.js

@@ -21,5 +21,5 @@ import { cn } from 'cn';
 import { Skeleton } from '../ui/skeleton.js';
 const MilkdownEditor = lazy(() => import('./milkdown-editor.js'));
 export function RichTextEditor(props) {
-    return (_jsx(Suspense, { fallback: _jsxs("div", { "data-slot": "rich-text-editor", "data-state": "loading", className: cn('flex w-full flex-col rounded-lg border border-input', props.className), children: [props.toolbar !== false && _jsx("div", { className: "h-9 border-b border-input" }), _jsxs("div", { className: "flex min-h-24 flex-col gap-2 px-2.5 py-2", children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2" })] })] }), children: _jsx(MilkdownEditor, { ...props }) }));
+    return (_jsx(Suspense, { fallback: _jsxs("div", { "data-slot": "rich-text-editor", "data-state": "loading", className: cn('flex w-full flex-col', !props.inline && 'rounded-lg border border-input', props.className), children: [(props.toolbar ?? true) === true && _jsx("div", { className: "h-9 border-b border-input" }), _jsxs("div", { className: cn('flex flex-col gap-2', props.inline ? 'py-0.5' : 'min-h-24 px-2.5 py-2'), children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2" })] })] }), children: _jsx(MilkdownEditor, { ...props }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.19.0",
+  "version": "4.20.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {