@nyaruka/temba-components 0.156.16 → 0.156.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.16",
+  "version": "0.156.18",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/display/Options.ts

@@ -562,6 +562,14 @@ export class Options extends RapidElement {
       return;
     }
 
+    // Don't intercept keys when the popup isn't visible to the user. The
+    // element can still be in the layout tree (so offsetParent is non-null)
+    // while being hidden via opacity/pointer-events, in which case handling
+    // keys would steal them from the underlying input.
+    if (!this.block && !this.visible) {
+      return;
+    }
+
     // Only intercept keys when the event originated within our owning component.
     // Without this, any temba-options with populated options would swallow arrow
     // keys document-wide, breaking cursor movement in unrelated text editors.

package/src/excellent/caret-utils.ts

@@ -1,8 +1,14 @@
 // ---------------------------------------------------------------------------
-// Cursor management utilities for contenteditable
-// Newlines are represented as \n characters inside <span class="tok-newline">
-// elements, so they're handled as regular text by cursor utilities.
-// Browser-added <br> artifacts are ignored (treated as zero-length).
+// Cursor management utilities for contenteditable.
+//
+// The DOM produced by our renderer is a flat list of <span> tokens (newlines
+// are "\n" characters inside <span class="tok-newline">) plus an optional
+// trailing <br data-sentinel> that exists only so Firefox renders an empty
+// final line. Browser-inserted structures (e.g. from yank/paste) are also
+// possible: a bare <br> represents a real newline, and a <div> or <p> at the
+// editable's root level represents a line block. Both are translated to "\n"
+// when computing plain-text offsets so the rebuild after handleInput sees the
+// correct value.
 // ---------------------------------------------------------------------------
 
 /** Gets the Selection object, handling shadow DOM. */
@@ -14,20 +20,51 @@ export function getSelectionFromRoot(element: HTMLElement): Selection | null {
   return window.getSelection();
 }
 
-/** Returns the plain-text length of a DOM node. Ignores browser <br> artifacts. */
-function nodeTextLength(node: Node): number {
+function isSentinelBr(node: Node): boolean {
+  return (
+    node.nodeName === 'BR' &&
+    typeof (node as Element).hasAttribute === 'function' &&
+    (node as Element).hasAttribute('data-sentinel')
+  );
+}
+
+function isBlockElement(node: Node): boolean {
+  return node.nodeName === 'DIV' || node.nodeName === 'P';
+}
+
+/** Plain-text contribution of a node and its descendants. */
+function textOfNode(node: Node): string {
   if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent.length;
+    return node.textContent || '';
   }
-  // Ignore browser-added <br> artifacts
   if (node.nodeName === 'BR') {
-    return 0;
+    return isSentinelBr(node) ? '' : '\n';
   }
-  let len = 0;
-  for (const child of Array.from(node.childNodes)) {
-    len += nodeTextLength(child);
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return '';
   }
-  return len;
+  return textOfChildren(node);
+}
+
+/** Plain-text contribution of an element's children, with block-prefix \n. */
+function textOfChildren(parent: Node): string {
+  let text = '';
+  let hasContent = false;
+  for (const child of Array.from(parent.childNodes)) {
+    if (
+      child.nodeType === Node.ELEMENT_NODE &&
+      isBlockElement(child) &&
+      hasContent
+    ) {
+      text += '\n';
+    }
+    const piece = textOfNode(child);
+    text += piece;
+    if (piece.length > 0) {
+      hasContent = true;
+    }
+  }
+  return text;
 }
 
 /** Converts a DOM selection position (container + offset) to a plain-text offset. */
@@ -36,38 +73,70 @@ function domPositionToTextOffset(
   targetContainer: Node,
   targetOffset: number
 ): number {
-  let total = 0;
+  // Build the text from `root` up to (target, targetOffset) and return its
+  // length. This mirrors textOfChildren so block-prefix newlines and BR
+  // newlines are accounted for the same way when reading and writing.
+  let text = '';
+  let stopped = false;
+
+  const walk = (node: Node): void => {
+    if (stopped) return;
 
-  const walk = (node: Node): boolean => {
     if (node === targetContainer) {
       if (node.nodeType === Node.TEXT_NODE) {
-        total += targetOffset;
-      } else {
-        // offset is a child index
-        for (let i = 0; i < targetOffset && i < node.childNodes.length; i++) {
-          total += nodeTextLength(node.childNodes[i]);
+        text += (node.textContent || '').substring(0, targetOffset);
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const children = Array.from(node.childNodes);
+        let hasContent = false;
+        for (let i = 0; i < Math.min(targetOffset, children.length); i++) {
+          const child = children[i];
+          if (
+            child.nodeType === Node.ELEMENT_NODE &&
+            isBlockElement(child) &&
+            hasContent
+          ) {
+            text += '\n';
+          }
+          const piece = textOfNode(child);
+          text += piece;
+          if (piece.length > 0) hasContent = true;
         }
       }
-      return true; // found
+      stopped = true;
+      return;
     }
 
     if (node.nodeType === Node.TEXT_NODE) {
-      total += node.textContent.length;
-      return false;
+      text += node.textContent || '';
+      return;
     }
-    // Ignore browser-added <br> artifacts
     if (node.nodeName === 'BR') {
-      return false;
+      if (!isSentinelBr(node)) text += '\n';
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
     }
 
+    let hasContent = false;
     for (const child of Array.from(node.childNodes)) {
-      if (walk(child)) return true;
+      if (stopped) break;
+      if (
+        child.nodeType === Node.ELEMENT_NODE &&
+        isBlockElement(child) &&
+        hasContent
+      ) {
+        text += '\n';
+      }
+      const before = text.length;
+      walk(child);
+      if (stopped) break;
+      if (text.length > before) hasContent = true;
     }
-    return false;
   };
 
   walk(root);
-  return total;
+  return text.length;
 }
 
 /** Converts a plain-text offset to a DOM position (node + offset). */
@@ -76,49 +145,103 @@ function textOffsetToDomPosition(
   targetOffset: number
 ): { node: Node; offset: number } | null {
   let remaining = targetOffset;
+  // Track the last text node passed through so we can fall back to its end
+  // when the offset sits past all text content.
+  let lastTextNode: Node | null = null;
+  let lastTextOffset = 0;
+  let result: { node: Node; offset: number } | null = null;
+
+  const walk = (node: Node, parent: Node | null): void => {
+    if (result !== null) return;
 
-  const walk = (node: Node): { node: Node; offset: number } | null => {
     if (node.nodeType === Node.TEXT_NODE) {
-      if (remaining <= node.textContent.length) {
-        return { node, offset: remaining };
+      const len = node.textContent.length;
+      // Use strict "<" so positions at the boundary between two text nodes
+      // resolve to the START of the next node rather than the END of the
+      // previous one. Firefox doesn't paint the caret reliably when it lands
+      // at the end of an inline span whose text is just "\n", but happily
+      // renders it at the start of the following node.
+      if (remaining < len) {
+        result = { node, offset: remaining };
+        return;
       }
-      remaining -= node.textContent.length;
-      return null;
+      lastTextNode = node;
+      lastTextOffset = len;
+      remaining -= len;
+      return;
     }
-    // Ignore browser-added <br> artifacts
+
     if (node.nodeName === 'BR') {
-      return null;
+      if (isSentinelBr(node)) return;
+      if (remaining === 0 && parent) {
+        const idx = Array.from(parent.childNodes).indexOf(node as ChildNode);
+        if (idx >= 0) {
+          result = { node: parent, offset: idx };
+          return;
+        }
+      }
+      remaining -= 1;
+      return;
+    }
+
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
     }
 
+    let hasContent = false;
     for (const child of Array.from(node.childNodes)) {
-      const result = walk(child);
-      if (result) return result;
+      if (result !== null) return;
+      if (
+        child.nodeType === Node.ELEMENT_NODE &&
+        isBlockElement(child) &&
+        hasContent
+      ) {
+        if (remaining === 0) {
+          const idx = Array.from(node.childNodes).indexOf(child as ChildNode);
+          if (idx >= 0) {
+            result = { node, offset: idx };
+            return;
+          }
+        }
+        remaining -= 1;
+      }
+      const before = remaining;
+      walk(child, node);
+      if (result !== null) return;
+      if (remaining < before) hasContent = true;
     }
-    return null;
   };
 
-  return walk(root);
+  walk(root, null);
+  if (result) return result;
+
+  if (remaining === 0) {
+    // Past all content. If the editor ends in a <br>, position relative to it
+    // so the caret renders on the empty trailing line in Firefox.
+    const lastChild = root.lastChild;
+    if (lastChild && lastChild.nodeName === 'BR') {
+      // Sentinel: render before it. Non-sentinel (transient post-yank state):
+      // render after it so the caret sits on the empty line the BR produces.
+      const offset = isSentinelBr(lastChild)
+        ? root.childNodes.length - 1
+        : root.childNodes.length;
+      return { node: root, offset };
+    }
+    if (lastTextNode) {
+      return { node: lastTextNode, offset: lastTextOffset };
+    }
+  }
+  return null;
 }
 
 /**
- * Extracts plain text from the contenteditable DOM by walking our span structure.
- * Ignores browser-added <br> artifacts. Our newlines are \n chars inside spans.
+ * Extracts plain text from the contenteditable DOM. Translates non-sentinel
+ * <br> elements to "\n" and inserts a "\n" before block-level (DIV/P) children
+ * that follow other content, so yank/paste-inserted DOM structures round-trip
+ * through handleInput correctly.
  */
 export function getTextFromEditableDiv(element: HTMLElement): string {
-  let text = '';
-  for (const child of Array.from(element.childNodes)) {
-    if (child.nodeType === Node.TEXT_NODE) {
-      text += child.textContent;
-    } else if (child.nodeType === Node.ELEMENT_NODE) {
-      // Skip browser-added <br> artifacts
-      if (child.nodeName === 'BR') {
-        continue;
-      }
-      // Recurse into spans and other elements
-      text += getTextFromEditableDiv(child as HTMLElement);
-    }
-  }
-  return text;
+  return textOfChildren(element);
 }
 
 /** Gets the caret (selection start) as a plain-text offset. */
@@ -171,3 +294,4 @@ export function setCaretRange(
   selection.removeAllRanges();
   selection.addRange(range);
 }
+

package/src/flow/RevisionsWindow.ts

@@ -9,6 +9,7 @@ import { fetchResults } from '../utils';
 import { FLOW_SPEC_VERSION } from '../store/AppState';
 import {
   labelsFor,
+  normalizeChanges,
   RevisionChanges,
   summarizeChanges
 } from './revision-summary';
@@ -151,7 +152,7 @@ export class RevisionsWindow extends RapidElement {
                             value=${rev.created_on}
                             display="duration"
                           ></temba-date>
-                          · ${rev.user.name || rev.user.username}
+                          · ${this.renderUser(rev.user)}
                         </div>
                         ${isCurrent
                           ? html`<div
@@ -192,6 +193,13 @@ export class RevisionsWindow extends RapidElement {
 
   // --- Private ---
 
+  private renderUser(user: Revision['user']): TemplateResult | string {
+    if (user?.email === 'system') {
+      return html`<em>System update</em>`;
+    }
+    return user?.name || user?.username || '';
+  }
+
   private async fetchRevisions() {
     const requestId = ++this.fetchRequestId;
     this.isLoading = true;
@@ -217,19 +225,36 @@ export class RevisionsWindow extends RapidElement {
   // the window. The merged revision is capped at three distinct displayed
   // labels — once a fourth would be introduced we break out into a new row.
   private collapseRevisions(revisions: Revision[]): Revision[] {
+    // Normalize at the boundary so the rest of the logic reasons about real
+    // edits only. After this step, `changes === null` is the single signal
+    // for "no-op" — used both for the author-barrier bypass and for keeping
+    // housekeeping tags out of the merged tag set and label cap.
+    const cleaned = revisions.map((r) => ({
+      ...r,
+      changes: normalizeChanges(r.changes)
+    }));
     // The API returns newest-first today; sort defensively so the head/window
     // logic stays correct if that ever changes.
-    const sorted = [...revisions].sort(
+    const sorted = [...cleaned].sort(
       (a, b) =>
         new Date(b.created_on).getTime() - new Date(a.created_on).getTime()
     );
     const result: Revision[] = [];
     let group: Revision[] = [];
     let groupLabels = new Set<string>();
+    let groupHasRealChange = false;
 
     const flush = () => {
       if (group.length === 0) return;
       const head = group[0];
+      // Pick the user from the most recent real-change revision in the
+      // group. No-op authors (typically the system, doing spec bumps)
+      // shouldn't appear as the editor when a real user's edit was
+      // absorbed into the row — that would mislabel the change as
+      // "System update" even though a real person did the work. Fall back
+      // to the head if every revision was a no-op.
+      const realChange = group.find((r) => r.changes);
+      const displayUser = realChange?.user ?? head.user;
       const tagSet = new Set<string>();
       let anyKnown = false;
       for (const r of group) {
@@ -240,41 +265,62 @@ export class RevisionsWindow extends RapidElement {
       }
       result.push({
         ...head,
+        user: displayUser,
         changes: anyKnown ? { tags: Array.from(tagSet) } : null
       });
       group = [];
       groupLabels = new Set();
+      groupHasRealChange = false;
     };
 
     for (const rev of sorted) {
       if (group.length === 0) {
         group.push(rev);
         groupLabels = labelsFor(rev.changes);
+        groupHasRealChange = !!rev.changes;
         continue;
       }
       const head = group[0];
       const headTime = new Date(head.created_on).getTime();
       const revTime = new Date(rev.created_on).getTime();
-      const withinWindow = headTime - revTime < GROUP_WINDOW_MS;
       // Compare on whichever identifier the server provides — real data
       // arrives with `email`, while test fixtures use `username`. Falling
       // back through the chain keeps both shapes working.
       const headId = head.user?.email ?? head.user?.username;
       const revId = rev.user?.email ?? rev.user?.username;
-      const sameAuthor = headId === revId;
-      const prospective = new Set([
-        ...groupLabels,
-        ...labelsFor(rev.changes)
-      ]);
-      const fitsLabelCap = prospective.size <= MAX_GROUP_LABELS;
+      // Two conditions bypass the time/author barriers:
+      //   1. The incoming rev is itself a no-op — it carries no editorial
+      //      intent and should disappear into whichever group it neighbors.
+      //   2. The group hasn't accumulated a real change yet — we never want
+      //      to surface a row showing "nothing changed", so a no-op-only
+      //      chain reaches forward to absorb the first real edit even if
+      //      that edit is far away in time or by a different author.
+      const isNoOp = !rev.changes;
+      const bypassBarriers = isNoOp || !groupHasRealChange;
+      const withinWindow =
+        bypassBarriers || headTime - revTime < GROUP_WINDOW_MS;
+      const sameAuthor = bypassBarriers || headId === revId;
+      const prospective = new Set([...groupLabels, ...labelsFor(rev.changes)]);
+      // The label cap is meaningful only when adding a real change to a
+      // group that already has one. A no-op contributes zero labels by
+      // construction, so it never trips the cap; and a no-op-only chain
+      // reaching forward to absorb its first real edit must ignore the cap
+      // too, or a sweeping edit (4+ label areas) would still strand the
+      // no-op group as an empty-summary row.
+      const fitsLabelCap =
+        isNoOp ||
+        !groupHasRealChange ||
+        prospective.size <= MAX_GROUP_LABELS;
 
       if (withinWindow && sameAuthor && fitsLabelCap) {
         group.push(rev);
         groupLabels = prospective;
+        if (!isNoOp) groupHasRealChange = true;
       } else {
         flush();
         group.push(rev);
         groupLabels = labelsFor(rev.changes);
+        groupHasRealChange = !!rev.changes;
       }
     }
     flush();

package/src/flow/revision-summary.ts

@@ -2,6 +2,23 @@ export interface RevisionChanges {
   tags: string[];
 }
 
+// "spec" is the housekeeping tag the system attaches when it bumps a flow's
+// spec version. It carries no editorial intent, so we strip it at the
+// boundary — every downstream consumer (summaries, label caps, no-op
+// detection) then operates on a clean tag set without needing special cases.
+const NOOP_TAGS = new Set(['spec']);
+
+// Drop tags that don't represent real edits and collapse to null when nothing
+// meaningful remains. Returning null lets `isNoOpChanges` and the collapse
+// logic treat empty-after-filtering and originally-null the same way.
+export function normalizeChanges(
+  changes: RevisionChanges | null | undefined
+): RevisionChanges | null {
+  if (!changes) return null;
+  const tags = (changes.tags || []).filter((t) => !NOOP_TAGS.has(t));
+  return tags.length === 0 ? null : { tags };
+}
+
 const TAG_LABELS: Record<string, { label: string; order: number }> = {
   metadata: { label: 'metadata', order: 0 },
   nodes: { label: 'nodes', order: 1 },
@@ -32,6 +49,14 @@ export function labelsFor(
   return result;
 }
 
+// A revision is a no-op when, after stripping housekeeping tags, nothing
+// meaningful is left. These shouldn't break up adjacent edits in the browser.
+export function isNoOpChanges(
+  changes: RevisionChanges | null | undefined
+): boolean {
+  return normalizeChanges(changes) === null;
+}
+
 export function summarizeChanges(
   changes: RevisionChanges | null | undefined
 ): string {

package/src/form/RichEditor.ts

@@ -97,6 +97,7 @@ export class RichEditor extends FieldElement {
         overflow-y: auto;
         min-height: var(--textarea-min-height, 100px);
         resize: none;
+        position: relative;
       }
 
       :host(:not([textarea])) {
@@ -119,6 +120,12 @@ export class RichEditor extends FieldElement {
         content: attr(data-placeholder);
         color: var(--color-placeholder, #999);
         pointer-events: none;
+        /* Take the placeholder out of flow so the caret sits at offset 0
+           visually, not after the placeholder text (Firefox honors flow
+           strictly here while Chrome happens to overlay the caret). */
+        position: absolute;
+        inset: 0;
+        padding: inherit;
       }
 
       /* Token styles (shared) */
@@ -302,6 +309,11 @@ export class RichEditor extends FieldElement {
 
     if (this.disableCompletion) {
       div.textContent = text || '';
+      if (text && text.endsWith('\n')) {
+        const br = document.createElement('br');
+        br.setAttribute('data-sentinel', '');
+        div.appendChild(br);
+      }
       return;
     }
 
@@ -359,6 +371,15 @@ export class RichEditor extends FieldElement {
     // Ensure there's at least an empty text node for cursor placement
     if (!text || text === '') {
       div.appendChild(document.createTextNode(''));
+    } else if (text.endsWith('\n')) {
+      // A trailing "\n" text node is collapsed by Firefox in contenteditable,
+      // making the empty final line invisible. A sentinel <br> forces the
+      // line break to render. The data-sentinel attribute distinguishes it
+      // from browser-inserted <br>s (which represent real newlines and must
+      // be preserved by the caret/text utilities).
+      const br = document.createElement('br');
+      br.setAttribute('data-sentinel', '');
+      div.appendChild(br);
     }
   }