@nyaruka/temba-components 0.156.15 → 0.156.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.15",
+  "version": "0.156.17",
   "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/Editor.ts

@@ -40,7 +40,6 @@ import type { RevisionsWindow } from './RevisionsWindow';
 import {
   ACTION_GROUP_METADATA,
   CONTEXT_MENU_SHORTCUTS,
-  Features,
   FlowType,
   FlowTypes
 } from './types';
@@ -200,10 +199,6 @@ export class Editor extends RapidElement {
   @property({ type: Array })
   public features: string[] = [];
 
-  private get autoTranslateEnabled(): boolean {
-    return this.features?.includes(Features.AUTO_TRANSLATE) ?? false;
-  }
-
   private activityTimer: number | null = null;
   private activityInterval = 100; // Start with 100ms interval for fast initial load
 
@@ -1601,6 +1596,9 @@ export class Editor extends RapidElement {
         }
 
         getStore().getState().setDirtyDate(null);
+
+        // Refresh the revisions list if it's currently open.
+        this.getRevisionsWindow()?.refresh();
       })
       .catch((error) => {
         console.error('Failed to save flow:', error);
@@ -1760,7 +1758,7 @@ export class Editor extends RapidElement {
   }
 
   private handleAutoTranslateClick(): void {
-    if (!this.autoTranslateEnabled || this.viewingRevision) {
+    if (this.viewingRevision) {
       return;
     }
     const at = this.querySelector('temba-auto-translate') as any;
@@ -3694,9 +3692,7 @@ export class Editor extends RapidElement {
     // at 100% — the dialog's "update existing" option lets users re-run
     // translation on already-translated entries.
     const hasPendingTranslations =
-      this.autoTranslateEnabled &&
-      Boolean(activeLanguage) &&
-      progress.total > 0;
+      Boolean(activeLanguage) && progress.total > 0;
 
     return html`
       <temba-editor-toolbar
@@ -3930,14 +3926,12 @@ export class Editor extends RapidElement {
         @temba-revision-reverted=${this.handleRevisionReverted}
         @temba-revisions-closed=${this.handleRevisionsClosed}
       ></temba-revisions-window>
-      ${this.autoTranslateEnabled
-        ? html`<temba-auto-translate
-            .definition=${this.definition}
-            language-code=${this.languageCode}
-            ?disabled=${this.viewingRevision}
-            @temba-auto-translate-changed=${this.handleAutoTranslateChanged}
-          ></temba-auto-translate>`
-        : ''}
+      <temba-auto-translate
+        .definition=${this.definition}
+        language-code=${this.languageCode}
+        ?disabled=${this.viewingRevision}
+        @temba-auto-translate-changed=${this.handleAutoTranslateChanged}
+      ></temba-auto-translate>
       <div id="editor-container">
         ${this.renderToolbarElement()}
         <div id="editor">

package/src/flow/RevisionsWindow.ts

@@ -7,18 +7,28 @@ import { getStore } from '../store/Store';
 import { FlowDefinition } from '../store/flow-definition';
 import { fetchResults } from '../utils';
 import { FLOW_SPEC_VERSION } from '../store/AppState';
+import {
+  labelsFor,
+  RevisionChanges,
+  summarizeChanges
+} from './revision-summary';
+
+const GROUP_WINDOW_MS = 15 * 60 * 1000;
+const MAX_GROUP_LABELS = 3;
 
 export interface Revision {
   id: number;
   user: {
-    id: number;
-    username: string;
-    first_name: string;
-    last_name: string;
+    id?: number;
+    email?: string;
+    username?: string;
+    first_name?: string;
+    last_name?: string;
     name?: string;
   };
   created_on: string;
   comment?: string;
+  changes?: RevisionChanges | null;
 }
 
 export class RevisionsWindow extends RapidElement {
@@ -53,11 +63,18 @@ export class RevisionsWindow extends RapidElement {
     dirtyDate: Date | null;
   } | null = null;
   private browseLanguageCode: string | null = null;
+  private fetchRequestId = 0;
 
   public get isViewingRevision(): boolean {
     return this.viewingRevision !== null;
   }
 
+  public refresh(): void {
+    if (!this.hidden) {
+      this.fetchRevisions();
+    }
+  }
+
   protected updated(changes: PropertyValues): void {
     super.updated(changes);
     if (
@@ -84,8 +101,8 @@ export class RevisionsWindow extends RapidElement {
         name="revisions"
         header="Revisions"
         icon="revisions"
-        .width=${240}
-        .maxHeight=${400}
+        .width=${340}
+        .maxHeight=${500}
         .top=${120}
         color="rgb(142, 94, 167)"
         .saving=${this.saving}
@@ -99,11 +116,15 @@ export class RevisionsWindow extends RapidElement {
           >
             ${this.isLoading && !this.revisions.length
               ? html`<temba-loading></temba-loading>`
-              : this.revisions.map((rev) => {
+              : this.revisions.map((rev, index) => {
+                  const isCurrent = index === 0;
                   const isSelected = this.viewingRevision?.id === rev.id;
+                  const summary = summarizeChanges(rev.changes);
                   return html`
                     <div
-                      class="revision-item ${isSelected ? 'selected' : ''}"
+                      class="revision-item ${isSelected
+                        ? 'selected'
+                        : ''} ${isCurrent ? 'current' : ''}"
                       style="padding:8px; border-radius:4px; cursor:pointer; background:${isSelected
                         ? '#f0f6ff'
                         : '#f9fafb'}; border:1px solid ${isSelected
@@ -111,36 +132,46 @@ export class RevisionsWindow extends RapidElement {
                         : '#e5e7eb'}; transition: all 0.2s ease;"
                       @click=${() => this.handleRevisionClick(rev)}
                     >
+                      ${summary
+                        ? html`<div
+                            class="revision-summary"
+                            style="font-size:13px; color:#111827; line-height:1.3;"
+                          >
+                            ${summary}
+                          </div>`
+                        : ''}
                       <div
-                        style="display:flex; justify-content:space-between; align-items:center;"
+                        class="revision-meta"
+                        style="display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:20px; font-size:11px; color:#6b7280; margin-top:${summary
+                          ? '2px'
+                          : '0'};"
                       >
-                        <div
-                          class="revision-header"
-                          style="margin-bottom: 2px;"
-                        >
-                          <div
-                            style="font-weight:600; font-size:13px; color:#111827;"
-                          >
-                            <temba-date
-                              value=${rev.created_on}
-                              display="duration"
-                            ></temba-date>
-                          </div>
-                          <div style="font-size:11px; color:#6b7280;">
-                            ${rev.user.name || rev.user.username}
-                          </div>
+                        <div style="flex:1; min-width:0;">
+                          <temba-date
+                            value=${rev.created_on}
+                            display="duration"
+                          ></temba-date>
+                          · ${rev.user.name || rev.user.username}
                         </div>
-                        ${isSelected
-                          ? html`<button
-                              class="revert-button"
-                              @click=${(e: Event) => {
-                                e.stopPropagation();
-                                this.handleRevertClick();
-                              }}
+                        ${isCurrent
+                          ? html`<div
+                              class="current-label"
+                              style="font-size:10px; font-weight:600; text-transform:uppercase; color:#6b7280; background:#e5e7eb; padding:2px 6px; border-radius:10px; letter-spacing:0.5px; flex-shrink:0;"
                             >
-                              Revert
-                            </button>`
-                          : html``}
+                              Current
+                            </div>`
+                          : isSelected
+                            ? html`<button
+                                class="revert-button"
+                                style="font-size:10px; font-weight:600; text-transform:uppercase; color:#1e3a8a; background:#a4cafe; padding:2px 6px; border-radius:10px; letter-spacing:0.5px; border:none; cursor:pointer; flex-shrink:0;"
+                                @click=${(e: Event) => {
+                                  e.stopPropagation();
+                                  this.handleRevertClick();
+                                }}
+                              >
+                                Revert
+                              </button>`
+                            : html``}
                       </div>
 
                       ${rev.comment
@@ -162,17 +193,92 @@ export class RevisionsWindow extends RapidElement {
   // --- Private ---
 
   private async fetchRevisions() {
+    const requestId = ++this.fetchRequestId;
     this.isLoading = true;
     try {
       const results = await fetchResults(
         `/flow/revisions/${this.flow}/?version=${FLOW_SPEC_VERSION}`
       );
-      this.revisions = results.slice(1);
+      if (requestId !== this.fetchRequestId) return;
+      this.revisions = this.collapseRevisions(results);
     } catch (e) {
+      if (requestId !== this.fetchRequestId) return;
       console.error('Error fetching revisions', e);
     } finally {
-      this.isLoading = false;
+      if (requestId === this.fetchRequestId) {
+        this.isLoading = false;
+      }
+    }
+  }
+
+  // Lump revisions made in a continuous editing session (within 15 minutes
+  // of each other, by the same author) onto their most recent member,
+  // merging the tag sets so the summary covers everything that happened in
+  // 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[] {
+    // The API returns newest-first today; sort defensively so the head/window
+    // logic stays correct if that ever changes.
+    const sorted = [...revisions].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>();
+
+    const flush = () => {
+      if (group.length === 0) return;
+      const head = group[0];
+      const tagSet = new Set<string>();
+      let anyKnown = false;
+      for (const r of group) {
+        if (r.changes) {
+          anyKnown = true;
+          for (const tag of r.changes.tags || []) tagSet.add(tag);
+        }
+      }
+      result.push({
+        ...head,
+        changes: anyKnown ? { tags: Array.from(tagSet) } : null
+      });
+      group = [];
+      groupLabels = new Set();
+    };
+
+    for (const rev of sorted) {
+      if (group.length === 0) {
+        group.push(rev);
+        groupLabels = labelsFor(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;
+
+      if (withinWindow && sameAuthor && fitsLabelCap) {
+        group.push(rev);
+        groupLabels = prospective;
+      } else {
+        flush();
+        group.push(rev);
+        groupLabels = labelsFor(rev.changes);
+      }
     }
+    flush();
+    return result;
   }
 
   private async handleRevisionClick(revision: Revision) {