@lotics/ui 44.14.0 → 45.3.0

package/src/inline_markdown.tsx

@@ -1,11 +1,8 @@
-import { useCallback, useRef, useState, type ReactNode } from "react";
-import { View, type LayoutChangeEvent, type NativeSyntheticEvent, type TextInputKeyPressEventData } from "react-native";
 import { InlineEditFrame, useInlineEdit, type InlineEditVariant } from "./inline_edit";
-import { Markdown } from "./markdown";
-import { TextInputField } from "./text_input_field";
+import { MarkdownEditor } from "./markdown_editor";
 
 export interface InlineMarkdownProps {
-  /** The markdown SOURCE. Rendered at rest, edited raw. */
+  /** The markdown SOURCE. Rendered rich, edited in place. */
   value: string;
   /** Persist the new source. May be async — the field shows a saving state and
    *  surfaces a thrown error inline, staying in edit mode so nothing is lost. */
@@ -14,80 +11,55 @@ export interface InlineMarkdownProps {
   disabled?: boolean;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
-  /** The editor's floor, in lines, before the resting height is taken into
-   *  account. Keeps a short or empty value from opening a one-line slot. */
-  minLines?: number;
+  /** Line budget for the field. The box reserves this whether or not the value
+   *  fills it, so nothing moves as the value grows into it. */
+  numberOfLines?: number;
   accessibilityLabel?: string;
 }
 
-/** A short prose reserve, so an empty field is still obviously somewhere to write. */
-const DEFAULT_MIN_LINES = 3;
-const APPROX_LINE_HEIGHT = 22;
-
 /**
- * An inline-editable MARKDOWN value: rendered at rest, raw source while editing.
+ * An inline-editable MARKDOWN value.
+ *
+ * **ONE element, always mounted — it does not swap.** This started as a swap
+ * (rendered prose at rest, an editor on press) and every problem that followed
+ * came from there: the box changed height when it opened, a toolbar rolled in
+ * and pushed the rest of the form down, and the resting state was a BUTTON, so
+ * it took the pointer cursor while `userSelect: none` denied a reader the
+ * ability to select a sentence out of their own note.
  *
- * This one SWAPS, and it is allowed to for the same reason the number and date
- * editors do: its resting display and its editor show genuinely different
- * strings (`**bold**` against **bold**), so the sub-pixel drift that forced
- * `InlineTextInput` to stay a single element is not perceptible here. That rule
- * — same string ⇒ one element, different string ⇒ swap — is what decides which
- * shape a new editor takes, and markdown is the clearest case of the second.
+ * None of those are fixable while two elements draw one value. There is no
+ * arrangement of two renderers of the same markdown that GUARANTEES zero shift —
+ * so the guarantee has to come from there being one. The editor renders at rest
+ * and simply gains a draft when focused, exactly as `InlineTextInput` is one
+ * `<input>` in both states.
  *
- * **The editor never opens SHORTER than the view it replaced.** A swap editor
- * is supposed to leave the box where it was; for markdown it cannot exactly,
- * because rendered prose and its source are different lengths by nature. What it
- * CAN do is refuse to collapse: the resting height is measured and becomes the
- * input's floor, so pressing a long note opens a long editor. Growing is the
- * tolerable direction — shrinking pulls the text the reader was just looking at
- * out from under them, and everything below it jumps up.
+ * What that costs is a ProseMirror view per field, mounted whether or not anyone
+ * edits. That is a real price, paid deliberately: a record surface holds a
+ * handful of these, and "the layout never moves" is worth more than the
+ * instances. If a screen ever holds dozens, the answer is fewer markdown fields
+ * on it — not a swap that reintroduces the shift.
  *
- * Reach for it wherever a field holds markdown a PERSON wrote. A model's output
- * is read-only (you re-run it, you do not hand-edit it) and belongs in a plain
- * `Markdown`.
+ * The toolbar is OFF here for the same reason: a band that appears with the edit
+ * moves everything under it. `MarkdownEditor` keeps it for surfaces whose whole
+ * job is the document, where it is always present and so shifts nothing.
  */
 export function InlineMarkdown(props: InlineMarkdownProps) {
-  const { value, onSave, placeholder, disabled, variant, minLines, accessibilityLabel } = props;
+  const { value, onSave, placeholder, disabled, variant, numberOfLines, accessibilityLabel } = props;
   const edit = useInlineEdit<string>({ value, onSave });
-  const [restingHeight, setRestingHeight] = useState(0);
-  // Not state: it must be current for the render that mounts the input, and a
-  // set during layout would arrive one frame late — as a visible jump.
-  const measured = useRef(0);
-
-  const onViewLayout = useCallback((e: LayoutChangeEvent) => {
-    measured.current = e.nativeEvent.layout.height;
-  }, []);
-
-  const begin = useCallback(() => {
-    setRestingHeight(measured.current);
-    edit.begin();
-  }, [edit]);
-
-  const onKeyPress = useCallback(
-    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      // Enter is a PARAGRAPH BREAK here — this is prose, and `numberOfLines > 1`
-      // is what declares that everywhere else in the family. Blur commits.
-      if (e.nativeEvent.key === "Escape") edit.cancel();
-    },
-    [edit],
-  );
-
-  const floor = Math.max((minLines ?? DEFAULT_MIN_LINES) * APPROX_LINE_HEIGHT, restingHeight);
-
-  const display: ReactNode = value === "" ? "" : (
-    <View onLayout={onViewLayout}>
-      <Markdown>{value}</Markdown>
-    </View>
-  );
 
   return (
     <InlineEditFrame
-      // Unlike `InlineTextInput`, `editing` here IS the mount: the input exists
-      // only during an edit, which is what makes the rendered view possible.
-      editing={edit.editing}
-      display={display}
+      // ALWAYS the editor. `editing` is a MOUNT decision, and mounting
+      // unconditionally is what makes the resting and editing states the same
+      // element — see the note above on why nothing else holds the no-shift
+      // guarantee.
+      editing
+      // ...but the ✓/✕ verbs still key off a REAL edit: at rest there is nothing
+      // to accept and nothing to revert.
+      editOpen={edit.editing}
+      display={value}
       placeholder={placeholder}
-      onBegin={begin}
+      onBegin={edit.begin}
       controls="blur"
       onCommit={() => void edit.commit()}
       onCancel={edit.cancel}
@@ -95,23 +67,24 @@ export function InlineMarkdown(props: InlineMarkdownProps) {
       error={edit.error}
       disabled={disabled}
       variant={variant}
+      numberOfLines={numberOfLines}
       accessibilityLabel={accessibilityLabel}
     >
-      <TextInputField
-        value={edit.draft}
+      <MarkdownEditor
+        // The DRAFT only exists once editing has begun; before that the field
+        // must show the record's value, or an external update would be masked by
+        // a stale draft from the last edit (`begin` is what syncs them).
+        value={edit.editing ? edit.draft : value}
         onChangeText={edit.setDraft}
+        // Focus IS begin — the element the reader clicks is already the editor,
+        // so the gesture that used to mount one now just opens a draft on it.
+        onFocus={edit.begin}
         onBlur={() => void edit.commit()}
-        onKeyPress={onKeyPress}
-        multiline
-        // The input ARRIVES with the edit, so it takes the caret on mount. This
-        // is the case `InlineTextInput` cannot serve — it is permanently mounted
-        // and deliberately has no `autoFocus`, so a revealed field there would
-        // cost the reader a second click.
-        autoFocus
+        toolbar={false}
         placeholder={placeholder}
-        accessibilityLabel={accessibilityLabel}
+        numberOfLines={numberOfLines}
         disabled={disabled}
-        style={{ minHeight: floor }}
+        accessibilityLabel={accessibilityLabel}
       />
     </InlineEditFrame>
   );

package/src/inline_text_input.tsx

@@ -54,8 +54,8 @@ export interface InlineTextInputProps {
    * a payment term — where reserving the space keeps the page still. It is wrong
    * for open prose, and it fails in the worst way: the field renders a box the
    * value does not fit, with no ellipsis, no scrollbar and no scroll, so the
-   * reader is given no evidence that anything is missing. Measured on a record
-   * note, 285 characters drew 76px of a 116px value — two lines gone, silently.
+   * reader is given no evidence that anything is missing — a long note simply
+   * loses its tail.
    *
    * Growing costs nothing this control was protecting: the field is ONE input in
    * both states, so a grown box is the same height resting and editing, and
@@ -139,9 +139,8 @@ export function InlineTextInput(props: InlineTextInputProps) {
       // same string identically, and nothing enforces it: the padding drifted
       // (8px), then the transparent border (1px), then the ink (zinc-900 vs the
       // UA's black) — each fixed in turn, each revealing the next. The last one
-      // cannot be fixed at all: measured on an interior 4x crop with no border or
-      // ring in frame, the glyph mass sits 1 DEVICE pixel lower while editing
-      // (row centroid 12.985 -> 13.985, identical ink, identical column
+      // cannot be fixed at all: the glyph mass sits one DEVICE pixel lower while
+      // editing (identical ink, identical column
       // centroid). Both paths compute a 10px text top, so it is not a padding
       // mistake — an `<input>` centres its text by FONT METRICS and a `<div>`
       // positions it by LINE BOX, and the residual is a quarter of a CSS pixel.

package/src/ledger.tsx

@@ -257,9 +257,9 @@ export function LedgerRow(props: LedgerRowProps) {
   const rowDetails = useLoticsLocale().ledger.rowDetails;
   const { format, dropMeta } = useLedger();
   // The caption goes entirely rather than shrinking to nothing. Yielding first
-  // (below) is the right ORDER but not a floor: measured at 375, a 30-character
-  // caption still wanted 184px of a ~250px text budget and clipped — and took
-  // the label down with it, ellipsising a 74px identity at 71px. Two separate
+  // (below) is the right ORDER but not a floor: at phone width a long caption
+  // still claims most of the text budget, clips, and takes the label down with
+  // it. Two separate
   // authors had already worked around this by dropping `meta` at small widths
   // in their own apps, which is the component's job.
   const showMeta = meta != null && meta !== "" && !dropMeta;

package/src/locale.tsx

@@ -171,6 +171,22 @@ export interface LoticsLocale {
   /** `FilesEditor`'s shipped bar pieces (upload, select, select-all, download,
    *  remove) and the remove confirm. A HOST verb is a plain `Button` and names
    *  itself, so nothing here is about what an app happens to do with a file. */
+  markdownToolbar: {
+    linkUrl: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    bold: string;
+    italic: string;
+    inlineCode: string;
+    bulletList: string;
+    numberedList: string;
+    quote: string;
+    codeBlock: string;
+    link: string;
+    insertTable: string;
+    divider: string;
+  };
   filesEditor: {
     upload: string;
     select: string;
@@ -388,6 +404,22 @@ export const en: LoticsLocale = {
   overlay: { close: "Close" },
   fileDropzone: { label: "Drag files here", hint: "or click, or paste (⌘V)", drop: "Drop to upload" },
   fileThumbnail: { remove: "Remove" },
+  markdownToolbar: {
+    linkUrl: "Link URL",
+    heading1: "Heading 1",
+    heading2: "Heading 2",
+    heading3: "Heading 3",
+    bold: "Bold",
+    italic: "Italic",
+    inlineCode: "Inline code",
+    bulletList: "Bullet list",
+    numberedList: "Numbered list",
+    quote: "Quote",
+    codeBlock: "Code block",
+    link: "Link",
+    insertTable: "Insert table",
+    divider: "Divider",
+  },
   filesEditor: {
     upload: "Upload",
     select: "Select",
@@ -578,6 +610,22 @@ export const vi: LoticsLocale = {
   overlay: { close: "Đóng" },
   fileDropzone: { label: "Kéo tệp vào đây", hint: "hoặc bấm chọn, hoặc dán (Ctrl+V)", drop: "Thả để tải lên" },
   fileThumbnail: { remove: "Xóa" },
+  markdownToolbar: {
+    linkUrl: "Địa chỉ liên kết",
+    heading1: "Tiêu đề 1",
+    heading2: "Tiêu đề 2",
+    heading3: "Tiêu đề 3",
+    bold: "Đậm",
+    italic: "Nghiêng",
+    inlineCode: "Mã trong dòng",
+    bulletList: "Danh sách gạch đầu dòng",
+    numberedList: "Danh sách đánh số",
+    quote: "Trích dẫn",
+    codeBlock: "Khối mã",
+    link: "Liên kết",
+    insertTable: "Chèn bảng",
+    divider: "Đường phân cách",
+  },
   filesEditor: {
     upload: "Tải lên",
     select: "Chọn",

package/src/markdown.web.tsx

@@ -34,12 +34,9 @@ const markdownComponents = {
  * Sizing the headings down fixes what a screen SHOWS and nothing about what it
  * ANNOUNCES: an `h2` the author of the text happened to write is still an `h2`,
  * so it lands in heading navigation as a PEER of the page's own sections.
- * Measured on a record surface, the outline read
- *
- *   Activity · "Tóm tắt cuộc họp (AI) — …" · "Bài học …" · Details · Next action
- *
- * — a model's call-summary title sitting between two real sections, from inside
- * one row of a feed that can hold twenty more. No visual probe finds this, and
+ * A model's call-summary title then sits in the heading outline between two of
+ * the page's real sections, from inside one row of a feed that can hold twenty
+ * more. No visual probe finds this, and
  * fixing the size is what makes it invisible: the defect stops looking wrong at
  * the exact moment it stops being measurable.
  *

package/src/markdown_editor.css

@@ -0,0 +1,144 @@
+/* WYSIWYG markdown editor chrome. Typography is inherited from `.ui-markdown`
+   (markdown.css) — this file only covers the editing surface and ProseMirror. */
+
+/* The frame around the DOCUMENT. The toolbar is a sibling above it, so this
+   encloses content and nothing else — and it takes a softer radius than a
+   control would, because it is a sheet of writing rather than a field. */
+.md-editor {
+  border: 1px solid rgba(228, 228, 231, 1);
+  border-radius: 16px;
+  background-color: rgba(255, 255, 255, 1);
+  overflow: hidden;
+  /* The ProseMirror editable element is this node's only child; let it fill the
+     configured min-height so clicks anywhere in the field focus the editor. */
+  display: flex;
+  flex-direction: column;
+}
+
+/* The kit's field grammar, which this editor was not following: hover moves the
+   BORDER, focus adds the RING, and the border never changes colour on focus.
+   It painted a blue border on focus-within instead — a colour that appears
+   nowhere else in the system and a mechanism no other input uses, so the one
+   multi-line field on a page announced focus differently from every field
+   beside it.
+
+   Literal rgba because this is plain CSS with no access to the tokens; the
+   values are `HOVER_BORDER` (zinc-500) and `FOCUS_RING` (2px zinc-900) from
+   `@lotics/ui/control_surface`, and they are the two to update if those move. */
+.md-editor:hover {
+  border-color: rgba(113, 113, 122, 1);
+}
+
+.md-editor:focus-within {
+  box-shadow: 0 0 0 2px rgba(24, 24, 27, 1);
+}
+
+.md-editor[data-disabled="true"] {
+  opacity: 0.6;
+}
+
+.md-editor-content {
+  flex: 1 1 auto;
+  /* position:relative anchors the absolutely-positioned gap cursor. */
+  position: relative;
+  padding: 8px 12px;
+  outline: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.md-editor-content .ProseMirror-selectednode {
+  outline: 2px solid rgba(59, 130, 246, 0.6);
+}
+
+.md-editor-content > :first-child {
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.md-editor-content > :last-child {
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+/* Empty-document placeholder */
+
+.md-editor-placeholder::before {
+  content: attr(data-placeholder);
+  color: rgba(161, 161, 170, 1);
+  pointer-events: none;
+  height: 0;
+  float: left;
+}
+
+/* ProseMirror selection / gap cursor */
+
+.ProseMirror[contenteditable="false"] {
+  cursor: default;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror-gapcursor::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid rgba(24, 24, 27, 1);
+  animation: md-editor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes md-editor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+/* Table editing (prosemirror-tables) */
+
+.md-editor-content .tableWrapper {
+  overflow-x: auto;
+  margin: 4px 0;
+}
+
+.md-editor-content td,
+.md-editor-content th {
+  position: relative;
+}
+
+.md-editor-content .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(59, 130, 246, 0.16);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.md-editor-content .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: rgba(59, 130, 246, 1);
+  pointer-events: none;
+  z-index: 3;
+}
+
+.md-editor-content.resize-cursor {
+  cursor: col-resize;
+}

package/src/markdown_editor.tsx

@@ -0,0 +1,29 @@
+import { TextInputField } from "./text_input_field";
+import type { MarkdownEditorProps } from "./markdown_editor_props";
+
+/**
+ * Native fallback for the markdown editor. The WYSIWYG editor is DOM/ProseMirror
+ * based and web-only (see `markdown_editor.web.tsx`); on native, markdown is
+ * edited as raw text.
+ */
+export function MarkdownEditor(props: MarkdownEditorProps) {
+  const { value, onChangeText, onBlur, onFocus, placeholder, numberOfLines, disabled, autoFocus, accessibilityLabel, testID } =
+    props;
+
+  return (
+    <TextInputField
+      testID={testID}
+      value={value}
+      onChangeText={onChangeText}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      placeholder={placeholder}
+      numberOfLines={numberOfLines ?? 6}
+      multiline
+      autoGrow
+      disabled={disabled}
+      autoFocus={autoFocus}
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+}

package/src/markdown_editor.web.tsx

@@ -0,0 +1,89 @@
+import "./markdown.css";
+import "./markdown_editor.css";
+import { useEffect, useReducer, useRef, useState } from "react";
+import {
+  createMarkdownEditorView,
+  type MarkdownEditorHandle,
+} from "@lotics/markdown-editor/editor_view";
+import { getInputLineHeight } from "./text_utils";
+import { useContainerSize } from "./size_boundary";
+import type { MarkdownEditorProps } from "./markdown_editor_props";
+import { MarkdownToolbar } from "./markdown_toolbar.web";
+
+/**
+ * WYSIWYG markdown editor. Users edit rich text directly; the value stays a
+ * plain markdown string. The ProseMirror engine lives in `@lotics/markdown-editor`.
+ */
+export function MarkdownEditor(props: MarkdownEditorProps) {
+  const { value, onChangeText, onBlur, onFocus, toolbar = true, placeholder, numberOfLines, disabled, autoFocus, accessibilityLabel, testID } =
+    props;
+
+  const hostRef = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<MarkdownEditorHandle | null>(null);
+  const valueRef = useRef(value);
+  const callbacks = useRef({ onChangeText, onBlur, onFocus });
+  callbacks.current = { onChangeText, onBlur, onFocus };
+
+  const [handle, setHandle] = useState<MarkdownEditorHandle | null>(null);
+  const [, forceRender] = useReducer((tick: number) => tick + 1, 0);
+
+  const { small } = useContainerSize();
+  const minHeight = (numberOfLines ?? 6) * getInputLineHeight(small) + 16;
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    const created = createMarkdownEditorView(host, {
+      markdown: valueRef.current,
+      editable: !disabled,
+      placeholder,
+      autoFocus,
+      ariaLabel: accessibilityLabel,
+      onChange: (markdown) => {
+        valueRef.current = markdown;
+        callbacks.current.onChangeText(markdown);
+      },
+      onStateChange: forceRender,
+      onBlur: () => callbacks.current.onBlur?.(),
+      onFocus: () => callbacks.current.onFocus?.(),
+    });
+    handleRef.current = created;
+    setHandle(created);
+
+    return () => {
+      created.destroy();
+      handleRef.current = null;
+      setHandle(null);
+    };
+  }, [disabled, placeholder, autoFocus, accessibilityLabel]);
+
+  useEffect(() => {
+    if (value !== valueRef.current) {
+      valueRef.current = value;
+      handleRef.current?.setMarkdown(value);
+    }
+  }, [value]);
+
+  return (
+    // ONE node for the field. It used to be three — an RN `View` holding a
+    // styled `.md-editor` holding a `.md-editor-host` — and each was doing a job
+    // the others could: ProseMirror mounts into whatever node it is handed, so
+    // the styled frame IS the host, and the outer `View` existed only to sit two
+    // siblings next to each other, which a fragment does without a box.
+    //
+    // The toolbar is a SIBLING of the field, not a band inside it. What the
+    // border encloses is the document; the controls that act on it belong
+    // outside that boundary, the way a page's actions sit outside the page.
+    <>
+      {toolbar ? <MarkdownToolbar handle={handle} disabled={disabled} /> : null}
+      <div
+        ref={hostRef}
+        className="md-editor"
+        data-testid={testID}
+        data-disabled={disabled ? "true" : undefined}
+        style={{ minHeight }}
+      />
+    </>
+  );
+}

package/src/markdown_editor_props.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared prop contract for the markdown editor. Declared platform-neutrally so
+ * the web (`markdown_editor.web.tsx`) and native (`markdown_editor.tsx`)
+ * implementations cannot drift.
+ */
+export interface MarkdownEditorProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  /**
+   * Show the formatting toolbar.
+   *
+   * OFF for a field embedded in a record row: it is a band that appears with the
+   * edit, and anything that appears moves everything under it. On a surface
+   * whose whole job is the document — a knowledge doc, a settings screen — it is
+   * always there and shifts nothing, so it stays on.
+   */
+  toolbar?: boolean;
+  placeholder?: string;
+  numberOfLines?: number;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  /** Accessible name. Required in spirit whenever the field's visible label is
+   *  a sibling rather than a wrapping `FormField` — a `DetailRow`, an inline
+   *  editor's frame. */
+  accessibilityLabel?: string;
+  testID?: string;
+}