@react-x11/components 0.9.0 → 0.11.0

package/src/qml/layouts.tsx

@@ -35,23 +35,38 @@ import {
   cancelAfterLayout,
   type LayoutTick,
 } from '../internal/timers.js';
+import { scaleOf } from '../internal/units.js';
 
 function isRow(inst: QmlInstance): boolean {
   return inst.typeInfo.name === 'RowLayout';
 }
 
-/** Reflect yoga's answers into the managed children's geometry slots. */
+/**
+ * Reflect yoga's answers into the managed children's geometry slots.
+ *
+ * `abs` is device pixels and the slots are the logical ones the document is
+ * written in (react-x11's docs/scale.md), and this is not only read-back:
+ * an author `width:` is the item's size hint and the slot this writes, so a
+ * device number here came back as a hint twice the size and the row drew
+ * it that way. Divided once, after the subtraction: `(a - b) / s` rounds
+ * once where `a / s - b / s` rounds three times, and at a scale of 1.25
+ * half the positions would read like 78.39999999999999 rather than 78.4.
+ * And from `abs` rather than `getClientRects()`, which answers nothing for
+ * a box with no area: a 0×0 item in a row still has an `x`.
+ */
 function feedbackLayout(inst: QmlInstance): void {
   if (inst.destroyed) return;
-  const containerAbs = hostNode(inst)?.abs;
+  const container = hostNode(inst);
+  const containerAbs = container?.abs;
   if (!containerAbs) return;
+  const s = scaleOf(container);
   for (const child of inst.visualChildren()) {
     const abs = hostNode(child)?.abs;
     if (!abs) continue; // a custom view without captureNode: skip quietly
-    child.slots.get('x')?.reflect(abs.x - containerAbs.x);
-    child.slots.get('y')?.reflect(abs.y - containerAbs.y);
-    child.slots.get('width')?.reflect(abs.width);
-    child.slots.get('height')?.reflect(abs.height);
+    child.slots.get('x')?.reflect((abs.x - containerAbs.x) / s);
+    child.slots.get('y')?.reflect((abs.y - containerAbs.y) / s);
+    child.slots.get('width')?.reflect(abs.width / s);
+    child.slots.get('height')?.reflect(abs.height / s);
   }
 }
 

package/src/qml/qtquick.tsx

@@ -40,6 +40,7 @@ import { layoutTypes } from './layouts.js';
 import { modelTypes } from './models.js';
 import { stateTypes } from './states.js';
 import { cancel, schedule, warn } from './globals.js';
+import { scaleOf } from '../internal/units.js';
 
 // Qt namespace constants used from expressions (`Qt.LeftButton`,
 // `mouse.modifiers & Qt.ShiftModifier`, `Qt.AlignHCenter`).
@@ -120,8 +121,14 @@ function TextView({ inst }: { inst: QmlInstance }): ReactElement {
     if (!node?.app?.fonts || !node.resolvedTextStyle) return;
     try {
       const layout = node.app.fonts.layout(text, node.resolvedTextStyle());
-      inst.slots.get('implicitWidth')?.assign(Math.ceil(layout.width));
-      inst.slots.get('implicitHeight')?.assign(Math.ceil(layout.height));
+      // The resolved size is the device one — the cascade resolves a
+      // theme's size once, at the root, in device pixels — so at scale 2 a
+      // `font.pixelSize: 20` is laid out at 40 and measured in device
+      // pixels. Divided back into the logical ones an implicit size is read
+      // in, or every binding on it reads double.
+      const s = scaleOf(node);
+      inst.slots.get('implicitWidth')?.assign(Math.ceil(layout.width / s));
+      inst.slots.get('implicitHeight')?.assign(Math.ceil(layout.height / s));
     } catch {
       // No fonts loaded (headless without the fonts option): leave 0.
     }

package/src/qml/react.tsx

@@ -175,7 +175,9 @@ export const QmlView = forwardRef(function QmlView(
 
   // Root-size feedback. `afterLayout` (not a bare effect): react-x11 lays
   // out on the frame flush, so an effect body reads the geometry of the
-  // previous pass — src/internal/timers.ts documents the shape.
+  // previous pass — src/internal/timers.ts documents the shape. The client
+  // rect, not `abs`: `abs` is device pixels, and the root's size is read in
+  // the logical ones the document and the wrapper's `style` are written in.
   const wrapRef = useRef<DrawnNode>(null);
   const rootW = root.slots.get('width');
   const rootH = root.slots.get('height');
@@ -183,10 +185,10 @@ export const QmlView = forwardRef(function QmlView(
   useEffect(() => {
     if (sized) return;
     const tick = afterLayout(() => {
-      const abs = wrapRef.current?.abs;
-      if (!abs || root.destroyed) return;
-      if (abs.width) root.slots.get('implicitWidth')?.assign(abs.width);
-      if (abs.height) root.slots.get('implicitHeight')?.assign(abs.height);
+      const box = wrapRef.current?.getClientRects()[0];
+      if (!box || root.destroyed) return;
+      if (box.width) root.slots.get('implicitWidth')?.assign(box.width);
+      if (box.height) root.slots.get('implicitHeight')?.assign(box.height);
       flushBindings();
     });
     return () => cancelAfterLayout(tick);

package/src/reorder/clock.ts

@@ -0,0 +1,27 @@
+// The drop flight's clock — the time it reads and the timer that steps it —
+// in a module of its own, so that a test can hold it.
+//
+// The flight home is wall-clock time on purpose: `dropAnimation={180}` is a
+// hundred and eighty milliseconds however many frames the machine manages.
+// That is also what makes it hard to look at. A runner slow enough to spend
+// the whole flight inside the `await` that released the item finds it
+// already landed, which is how "a drag that landed nowhere flies back"
+// failed on CI. `test/held-clock.ts` stands in for this object and nothing
+// else, so the drag, and the layout tick the flight starts from, stay real.
+//
+// Exported from this module and not from `./index.ts`: everything there is
+// the package's `./reorder` subpath, and this is for the tests.
+import { cancelLater, later } from '../internal/timers.js';
+import type { DelayTick } from '../internal/timers.js';
+
+export const flightClock = {
+  now(): number {
+    return Date.now();
+  },
+  arm(step: () => void, ms: number): DelayTick {
+    return later(step, ms);
+  },
+  disarm(handle: DelayTick): void {
+    cancelLater(handle);
+  },
+};

package/src/reorder/index.ts

@@ -47,7 +47,12 @@
 //    is over. It is one object for one gesture, never read at import time.
 //  - **The indicator, not the slide.** Neighbours do not glide out of the
 //    way: this renderer has no transform, and a line at the closest edge
-//    answers the same question for a rectangle per item. The one thing that
+//    answers the same question for a rectangle per item. That is the
+//    *default*, not a limit — an app that wants the gap instead can open one
+//    from `onDragUpdate` and let flex layout move the rows, which is what
+//    `examples/reorder.tsx`'s first list does in about twenty lines. What
+//    this component will not do is pick that for everyone: a gap costs a
+//    reflow per pointer move, and a line costs none. The one thing that
 //    does move is the drop: `dropAnimation` flies a copy of the item from
 //    where the pointer let go to where the item landed. That copy is a box
 //    **inside the item**, not the ghost popup carried on — a popup outlives
@@ -147,14 +152,11 @@ import {
 import { hx } from './hx.js';
 // Shared with <Tree> and <Table> — internal, deliberately not a shared
 // *module*; the header of src/internal/timers.ts says why. The drop flight
-// needs both: a tick after the layout that placed the item, and a clock.
-import {
-  afterLayout,
-  cancelAfterLayout,
-  cancelLater,
-  later,
-} from '../internal/timers.js';
+// needs both: a tick after the layout that placed the item, and a clock —
+// which is `./clock.ts`'s, where a test can hold it.
+import { afterLayout, cancelAfterLayout } from '../internal/timers.js';
 import type { DelayTick, LayoutTick } from '../internal/timers.js';
+import { flightClock } from './clock.js';
 import {
   closestSlot,
   insertManyAtSlot,
@@ -338,14 +340,39 @@ export interface ReorderDragStart {
 
 /** Where the drag is now. Fires on the list the item belongs to, whichever
  *  list the pointer is over — `over` is null over anything that is not a
- *  list in the group. `over.index` is the index the item would **land at**,
- *  which is what `onReorder`'s `to` and `onInsert`'s `index` will say, not
- *  the raw gap it is hovering. */
+ *  list in the group, and **only** then. `over.index` is the index the item
+ *  would **land at**, which is what `onReorder`'s `to` and `onInsert`'s
+ *  `index` will say, not the raw gap it is hovering; `over.settled` says the
+ *  drop would land there and change nothing. */
 export interface ReorderDragUpdate {
   id: ReorderId;
   ids: ReorderId[];
   from: number;
-  over: { list: string | undefined; index: number } | null;
+  over: {
+    list: string | undefined;
+    /** Where the row would **end up** — what `onReorder`'s `to` will say. */
+    index: number;
+    /**
+     * Which gap the pointer is over, counting the one before the first row
+     * as 0 and the one past the last as `length`.
+     *
+     * Not the same number as `index`, and the difference is not a detail: a
+     * row moving within its own list closes the hole it leaves behind, so
+     * dragging row 0 down onto the gap after row 1 is **slot 2** and lands
+     * at **index 1**. Draw a drop position from `index` and it sits one
+     * place too high for every downward drag and exactly right for every
+     * upward one, which is what an off-by-one that only happens half the
+     * time looks like.
+     *
+     * So: `slot` to draw *where the drop would go*, `index` to say *what
+     * the list will become*.
+     */
+    slot: number;
+    /** The drop would land here and change nothing. A position, not an
+     *  absence: the pointer is over the list, at an index it can name, and
+     *  the rows are simply already in that order. */
+    settled: boolean;
+  } | null;
   combine: ReorderId | null;
   input: ReorderInput;
 }
@@ -539,7 +566,14 @@ interface DragOver {
   listUid: string;
   list: string | undefined;
   index: number;
+  /** The gap the pointer is over. **Not** `index`: for a move within one
+   *  list the row leaves a hole behind it, so dragging row 0 down to the
+   *  gap after row 1 is slot 2 and lands at index 1. */
+  slot: number;
   combine: ReorderId | null;
+  /** The drop would land here and change nothing — the rows are already in
+   *  this order. Still a position, and still over the list. */
+  settled: boolean;
 }
 
 /**
@@ -843,11 +877,30 @@ function refuse(): boolean {
   return false;
 }
 
+/**
+ * Whether two answers say the same thing — the gate that keeps one
+ * `onDragUpdate` per *change* rather than one per pointer motion.
+ *
+ * `slot` is part of the comparison and not an afterthought: it and `index`
+ * move independently. Dragging a row down its own list, the gap after the
+ * next row and the gap after the one beyond it are slots 2 and 3, and both
+ * land the row at index 1 and 2 — but the pair (1,2) and (2,3) differ in
+ * both. Where they *don't* is at the top of a downward drag: slots 1 and 2
+ * both land at index 1, because the row closes the hole it left. Comparing
+ * on `index` alone therefore swallowed the move from slot 1 to slot 2, and a
+ * list drawing the drop as a space kept it a row too high for as long as the
+ * pointer stayed in that band — an off-by-one that looked like a rule
+ * problem and was a dropped notification.
+ */
 function sameOver(a: DragOver | null, b: DragOver | null): boolean {
   if (a === b) return true;
   if (!a || !b) return false;
   return (
-    a.listUid === b.listUid && a.index === b.index && a.combine === b.combine
+    a.listUid === b.listUid &&
+    a.index === b.index &&
+    a.slot === b.slot &&
+    a.settled === b.settled &&
+    a.combine === b.combine
   );
 }
 
@@ -1144,18 +1197,26 @@ export function ReorderList(props: ReorderListProps): ReactElement {
       ev.reject();
       return;
     }
-    // one of this list's own items, over a gap that is already its own:
-    // nothing would move, so nothing is promised
+    // One of this list's own items, over a slot it already occupies: the
+    // drop would change nothing.
     const move =
       !combining && moving.length > 0
         ? moveManyToSlot(ids, moving, slot, payload!.id)
         : null;
-    if (!combining && moving.length > 0 && move === null) {
-      mark(null);
-      if (activeDrag?.over?.listUid === uid) activeDrag.over = null;
-      return;
-    }
-    mark(at);
+    const settled = !combining && moving.length > 0 && move === null;
+    // No line: there is no insertion to point at. But the drag **is** over
+    // this list, at a position this list can name, and saying `over: null`
+    // for it conflated two different facts — "nowhere" and "here, and
+    // already in order".
+    //
+    // That conflation is visible, not theoretical. A list that draws the
+    // drop as a gap closes the gap when told `over` is null; closing it
+    // moves the rows back up; the pointer is then over a different row, so
+    // a gap opens again, which moves the rows down, which puts the pointer
+    // back over the gap. Walking a pointer down the list a step at a time,
+    // that alternates every other sample — and what it looks like is a drop
+    // target one slot away from the pointer.
+    mark(settled ? null : at);
     if (activeDrag) {
       activeDrag.over = {
         listUid: uid,
@@ -1163,7 +1224,9 @@ export function ReorderList(props: ReorderListProps): ReactElement {
         // where it would land, not the gap it is over — a same-list move
         // closes the hole it left behind, and a newcomer lands at the gap
         index: move ? move.to : slot,
+        slot,
         combine: combining,
+        settled,
       };
     }
   };
@@ -1361,7 +1424,10 @@ export function ReorderList(props: ReorderListProps): ReactElement {
         id: itemId,
         ids: move.ids,
         from,
-        over: { list: id, index: move.to },
+        // The keyboard path is not a preview: the row has already *moved*,
+        // so where it is and where it would land are the same place and
+        // there is no hole still open behind it.
+        over: { list: id, index: move.to, slot: move.to, settled: false },
         combine: null,
         input: 'keyboard',
       });
@@ -1423,7 +1489,14 @@ export function ReorderList(props: ReorderListProps): ReactElement {
       id: itemId,
       ids: payload?.ids ?? [itemId],
       from: payload?.index ?? -1,
-      over: over ? { list: over.list, index: over.index } : null,
+      over: over
+        ? {
+            list: over.list,
+            index: over.index,
+            slot: over.slot,
+            settled: over.settled,
+          }
+        : null,
       combine: over?.combine ?? null,
       input: 'pointer',
     });
@@ -1746,7 +1819,7 @@ export function ReorderItem(props: ReorderItemProps): ReactElement {
   useEffect(
     () => () => {
       cancelAfterLayout(ticks.current.layout);
-      cancelLater(ticks.current.timer);
+      flightClock.disarm(ticks.current.timer);
     },
     [],
   );
@@ -1796,9 +1869,9 @@ export function ReorderItem(props: ReorderItemProps): ReactElement {
           setFlight(null);
           return;
         }
-        const started = Date.now();
+        const started = flightClock.now();
         const stepOn = (): void => {
-          const t = Math.min((Date.now() - started) / ms, 1);
+          const t = Math.min((flightClock.now() - started) / ms, 1);
           if (t >= 1) {
             ticks.current.timer = null;
             setFlight(null);
@@ -1806,7 +1879,7 @@ export function ReorderItem(props: ReorderItemProps): ReactElement {
           }
           const left = 1 - ease(t);
           setFlight({ x: dx * left, y: dy * left });
-          ticks.current.timer = later(stepOn, FLIGHT_STEP_MS);
+          ticks.current.timer = flightClock.arm(stepOn, FLIGHT_STEP_MS);
         };
         stepOn();
       });

package/src/rich-text-editor/index.ts

@@ -50,11 +50,10 @@ import type {
 import { XK_ESCAPE, XK_KP_ENTER, XK_RETURN } from 'react-x11/keysyms';
 import { tint } from 'react-x11/style';
 import type { Style } from 'react-x11/style';
-import { toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { Fragment, Slice } from 'prosemirror-model';
 import type { Node as PMNode, Schema } from 'prosemirror-model';
-import { EditorState, Selection } from 'prosemirror-state';
+import { EditorState } from 'prosemirror-state';
 import type { Command, Plugin, Transaction } from 'prosemirror-state';
 import type { EditorProps, EditorView } from 'prosemirror-view';
 
@@ -80,11 +79,13 @@ import type { DropAnswer } from './drag.js';
 import { docFromHTML, htmlFromContent } from './html.js';
 import { defaultPlugins } from './keymap.js';
 import { deriveLook } from './look.js';
+import { toggleMark } from './marks.js';
 import type { MarkStyle } from './look.js';
 import { docFromText, markdownCodec, textFromDoc } from './markdown.js';
 import type { MarkdownCodec } from './markdown.js';
 import { registerEditorElements, ROOT_ELEMENT, TEXT_ELEMENT } from './nodes.js';
 import { renderBlockRange, renderBlocks } from './render.js';
+import { replaceDocumentTr } from './replace.js';
 import type { ImageInfo, NodeViewProps, RenderContext } from './render.js';
 import type { RunStyle } from './inline.js';
 import { schema as defaultSchema } from './schema.js';
@@ -106,6 +107,7 @@ import type { ToolbarEntry } from './toolbar.js';
 import { RichEditorView } from './view.js';
 import type { ViewConfig, ViewProps } from './view.js';
 import { useBlockWindow } from './virtual.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
 
 registerRichText();
 registerEditorElements();
@@ -337,16 +339,7 @@ function replaceDocument(
   doc: PMNode,
   addToHistory: boolean,
 ): void {
-  const { state } = view;
-  const tr = state.tr.replaceWith(0, state.doc.content.size, doc.content);
-  // keep the caret about where it was, inside what is there now
-  tr.setSelection(
-    Selection.near(
-      tr.doc.resolve(Math.min(state.selection.head, tr.doc.content.size)),
-    ),
-  );
-  if (!addToHistory) tr.setMeta('addToHistory', false);
-  view.dispatch(tr);
+  view.dispatch(replaceDocumentTr(view.state, doc, addToHistory));
 }
 
 function inListOrCode(state: EditorState): boolean {
@@ -384,6 +377,33 @@ interface LinkEdit {
  * />
  * ```
  */
+/**
+ * Whether the document an editor mounts with has code in it: a code span or
+ * block as markdown spells one, as HTML does, or as a node's schema says.
+ */
+function hasCode(props: RichTextEditorProps, format: EditorFormat): boolean {
+  const content = props.state?.doc ?? props.value ?? props.defaultValue;
+  if (content == null) return false;
+  if (typeof content === 'string') {
+    if (format === 'markdown') {
+      return content.includes('`') || content.includes('~~~');
+    }
+    if (format === 'html') {
+      return content.includes('<code') || content.includes('<pre');
+    }
+    return false;
+  }
+  let found = false;
+  content.descendants((node) => {
+    if (found) return false;
+    if (node.type.spec.code || node.marks.some((m) => m.type.spec.code)) {
+      found = true;
+    }
+    return !found;
+  });
+  return found;
+}
+
 export function RichTextEditor(props: RichTextEditorProps): ReactElement {
   const theme = useTheme() as unknown as Record<string, unknown>;
   const clipboard = useClipboard();
@@ -431,6 +451,11 @@ export function RichTextEditor(props: RichTextEditorProps): ReactElement {
       disabled,
     ],
   );
+  // A document that mounts with code in it sets that code in the mono
+  // family on its first frame: warmed while the editor renders, asked of
+  // the content it mounts with, once.
+  const [mountsWithCode] = useState(() => hasCode(props, format));
+  useFontPrewarm(mountsWithCode ? look.mono : null);
 
   // The editor's own plugins, made once per schema and option set — a
   // plugin instance carries its state across a reconfigure, so the undo

package/src/rich-text-editor/keymap.ts

@@ -29,7 +29,6 @@ import {
   chainCommands,
   exitCode,
   setBlockType,
-  toggleMark,
   wrapIn,
 } from 'prosemirror-commands';
 import { history, redo, undo } from 'prosemirror-history';
@@ -64,6 +63,7 @@ import {
   toggleTaskList,
 } from './commands.js';
 import { hasTables, tableRepair } from './tables.js';
+import { toggleMark } from './marks.js';
 
 // --- the event ---------------------------------------------------------------