@nyaruka/temba-components 0.142.1 → 0.142.3

package/src/flow/Plumber.ts

@@ -2,6 +2,21 @@ import { isRightClick } from './utils';
 
 export type TargetFace = 'top' | 'left' | 'right';
 
+/** Extract clientX/clientY from a MouseEvent or the first touch of a TouchEvent. */
+function getClientCoords(e: MouseEvent | TouchEvent): {
+  clientX: number;
+  clientY: number;
+} {
+  if ('touches' in e) {
+    const touch = e.touches[0] || (e as TouchEvent).changedTouches[0];
+    return { clientX: touch.clientX, clientY: touch.clientY };
+  }
+  return {
+    clientX: (e as MouseEvent).clientX,
+    clientY: (e as MouseEvent).clientY
+  };
+}
+
 // Shared arrow/drag constants used by both Plumber and Editor
 export const ARROW_LENGTH = 13;
 export const ARROW_HALF_WIDTH = 6.5;
@@ -33,8 +48,8 @@ interface DragState {
   svgEl: SVGSVGElement;
   pathEl: SVGPathElement;
   arrowEl: SVGPolygonElement;
-  onMove: (e: MouseEvent) => void;
-  onUp: (e: MouseEvent) => void;
+  onMove: (e: MouseEvent | TouchEvent) => void;
+  onUp: (e: MouseEvent | TouchEvent) => void;
 }
 
 /**
@@ -242,56 +257,75 @@ export class Plumber {
     let pendingDrag: {
       startX: number;
       startY: number;
-      onMove: (e: MouseEvent) => void;
-      onUp: (e: MouseEvent) => void;
+      onMove: (e: MouseEvent | TouchEvent) => void;
+      onUp: (e: MouseEvent | TouchEvent) => void;
+      isTouch: boolean;
     } | null = null;
 
     const DRAG_THRESHOLD = 5;
 
-    const onMouseDown = (e: MouseEvent) => {
-      if (isRightClick(e)) return;
+    const beginPendingDrag = (e: MouseEvent | TouchEvent) => {
+      if ('button' in e && isRightClick(e)) return;
 
       // Don't start drag from exit if it already has a connection —
       // existing connections are picked up from the arrowhead instead
       if (this.connections.has(exitId)) return;
 
-      const startX = e.clientX;
-      const startY = e.clientY;
+      const isTouch = 'touches' in e;
+      if (isTouch) e.preventDefault();
+
+      const { clientX: startX, clientY: startY } = getClientCoords(e);
 
       const nodeEl = element.closest('temba-flow-node');
       const scope = nodeEl?.getAttribute('uuid') || '';
       const originalTargetId: string | null = null;
 
-      const onMove = (me: MouseEvent) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
+      const onMove = (me: MouseEvent | TouchEvent) => {
+        const { clientX, clientY } = getClientCoords(me);
+        const dx = clientX - startX;
+        const dy = clientY - startY;
         if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
           // Exceeded threshold — start actual drag
-          document.removeEventListener('mousemove', onMove);
-          document.removeEventListener('mouseup', onUp);
-          pendingDrag = null;
+          removePendingListeners();
           this.startDrag(exitId, scope, originalTargetId, me);
         }
       };
 
       const onUp = () => {
-        // Mouse released without dragging — let click handler fire
+        // Released without dragging — let click handler fire
+        removePendingListeners();
+      };
+
+      const removePendingListeners = () => {
         document.removeEventListener('mousemove', onMove);
         document.removeEventListener('mouseup', onUp);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onUp);
+        document.removeEventListener('touchcancel', onUp);
         pendingDrag = null;
       };
 
       document.addEventListener('mousemove', onMove);
       document.addEventListener('mouseup', onUp);
-      pendingDrag = { startX, startY, onMove, onUp };
+      document.addEventListener('touchmove', onMove, { passive: false });
+      document.addEventListener('touchend', onUp);
+      document.addEventListener('touchcancel', onUp);
+      pendingDrag = { startX, startY, onMove, onUp, isTouch };
     };
 
-    element.addEventListener('mousedown', onMouseDown);
+    element.addEventListener('mousedown', beginPendingDrag);
+    element.addEventListener('touchstart', beginPendingDrag, {
+      passive: false
+    });
     this.sources.set(exitId, () => {
-      element.removeEventListener('mousedown', onMouseDown);
+      element.removeEventListener('mousedown', beginPendingDrag);
+      element.removeEventListener('touchstart', beginPendingDrag);
       if (pendingDrag) {
         document.removeEventListener('mousemove', pendingDrag.onMove);
         document.removeEventListener('mouseup', pendingDrag.onUp);
+        document.removeEventListener('touchmove', pendingDrag.onMove);
+        document.removeEventListener('touchend', pendingDrag.onUp);
+        document.removeEventListener('touchcancel', pendingDrag.onUp);
         pendingDrag = null;
       }
     });
@@ -714,19 +748,23 @@ export class Plumber {
 
     // Make arrowhead draggable for picking up existing connections
     const DRAG_THRESHOLD = 5;
-    const onArrowMouseDown = (e: MouseEvent) => {
-      if (isRightClick(e)) return;
+    const onArrowDown = (e: MouseEvent | TouchEvent) => {
+      if ('button' in e && isRightClick(e)) return;
       e.stopPropagation();
+      if ('touches' in e) e.preventDefault();
 
-      const startX = e.clientX;
-      const startY = e.clientY;
+      const { clientX: startX, clientY: startY } = getClientCoords(e);
 
-      const onMove = (me: MouseEvent) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
+      const onMove = (me: MouseEvent | TouchEvent) => {
+        const { clientX, clientY } = getClientCoords(me);
+        const dx = clientX - startX;
+        const dy = clientY - startY;
         if (Math.sqrt(dx * dx + dy * dy) > DRAG_THRESHOLD) {
           document.removeEventListener('mousemove', onMove);
           document.removeEventListener('mouseup', onUp);
+          document.removeEventListener('touchmove', onMove);
+          document.removeEventListener('touchend', onUp);
+          document.removeEventListener('touchcancel', onUp);
           this.startDrag(exitId, scope, toId, me);
         }
       };
@@ -734,12 +772,21 @@ export class Plumber {
       const onUp = () => {
         document.removeEventListener('mousemove', onMove);
         document.removeEventListener('mouseup', onUp);
+        document.removeEventListener('touchmove', onMove);
+        document.removeEventListener('touchend', onUp);
+        document.removeEventListener('touchcancel', onUp);
       };
 
       document.addEventListener('mousemove', onMove);
       document.addEventListener('mouseup', onUp);
+      document.addEventListener('touchmove', onMove, { passive: false });
+      document.addEventListener('touchend', onUp);
+      document.addEventListener('touchcancel', onUp);
     };
-    arrowEl.addEventListener('mousedown', onArrowMouseDown);
+    arrowEl.addEventListener('mousedown', onArrowDown);
+    arrowEl.addEventListener('touchstart', onArrowDown, { passive: false });
+    pathEl.addEventListener('mousedown', onArrowDown);
+    pathEl.addEventListener('touchstart', onArrowDown, { passive: false });
 
     // Mark the exit element as connected
     const exitEl = document.getElementById(exitId);
@@ -1087,7 +1134,9 @@ export class Plumber {
           const contactUuid = target.getAttribute('data-uuid');
           if (contactUuid) {
             this.editor.fireCustomEvent('temba-contact-clicked', {
-              uuid: contactUuid
+              uuid: contactUuid,
+              metaKey: e.metaKey,
+              ctrlKey: e.ctrlKey
             });
           }
         }
@@ -1200,10 +1249,18 @@ export class Plumber {
     exitId: string,
     scope: string,
     originalTargetId: string | null,
-    e: MouseEvent
+    e: MouseEvent | TouchEvent
   ) {
-    // Remove existing connection SVG for this exit (the connection is being dragged away)
-    this.removeConnectionSVG(exitId);
+    // Hide (don't remove) the existing connection SVG while dragging.
+    // On iOS Safari, removing the element that received the original
+    // touchstart can trigger touchcancel, prematurely ending the drag.
+    // We defer removal until the drag ends.
+    const oldConn = this.connections.get(exitId);
+    if (oldConn) {
+      oldConn.svgEl.style.display = 'none';
+      const overlay = this.overlays.get(exitId);
+      if (overlay) overlay.style.display = 'none';
+    }
 
     const { svgEl, pathEl, arrowEl } = this.createSVGElement();
     svgEl.classList.add('dragging');
@@ -1281,26 +1338,33 @@ export class Plumber {
     };
 
     // Initial path to cursor (convert viewport to canvas coordinates)
-    const cursorX = this.toCanvas(e.clientX - canvasRect.left);
-    const cursorY = this.toCanvas(e.clientY - canvasRect.top);
+    const { clientX: initX, clientY: initY } = getClientCoords(e);
+    const cursorX = this.toCanvas(initX - canvasRect.left);
+    const cursorY = this.toCanvas(initY - canvasRect.top);
     updateDragPath(cursorX, cursorY);
 
     this.connectionDragging = true;
 
-    const onMove = (me: MouseEvent) => {
+    const onMove = (me: MouseEvent | TouchEvent) => {
+      if ('touches' in me) me.preventDefault();
       // Re-read canvasRect each move since scroll may have changed
       const rect = this.canvas.getBoundingClientRect();
-      const cx = this.toCanvas(me.clientX - rect.left);
-      const cy = this.toCanvas(me.clientY - rect.top);
+      const { clientX, clientY } = getClientCoords(me);
+      const cx = this.toCanvas(clientX - rect.left);
+      const cy = this.toCanvas(clientY - rect.top);
       updateDragPath(cx, cy);
     };
 
-    const onUp = (_me: MouseEvent) => {
+    const onUp = (_me: MouseEvent | TouchEvent) => {
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', onUp);
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onUp);
+      document.removeEventListener('touchcancel', onUp);
 
-      // Remove the drag SVG
+      // Remove the drag SVG and the hidden old connection SVG
       svgEl.remove();
+      this.removeConnectionSVG(exitId);
       this.connectionDragging = false;
       this.dragState = null;
 
@@ -1315,6 +1379,9 @@ export class Plumber {
 
     document.addEventListener('mousemove', onMove);
     document.addEventListener('mouseup', onUp);
+    document.addEventListener('touchmove', onMove, { passive: false });
+    document.addEventListener('touchend', onUp);
+    document.addEventListener('touchcancel', onUp);
 
     this.dragState = {
       sourceId: exitId,

package/src/flow/StickyNote.ts

@@ -21,6 +21,11 @@ export class StickyNote extends RapidElement {
   @property({ type: Boolean })
   private colorPickerExpanded = false;
 
+  // On touch devices, contenteditable starts false to prevent Apple Pencil
+  // Scribble from hijacking touches. It is set to true on explicit tap.
+  private isTouchDevice = navigator.maxTouchPoints > 0;
+  private editingField: HTMLElement | null = null;
+
   @fromStore(zustand, (state: AppState) => state.isTranslating)
   private isTranslating!: boolean;
 
@@ -289,6 +294,7 @@ export class StickyNote extends RapidElement {
   }
 
   private handleTitleBlur(event: FocusEvent): void {
+    this.handleContentBlurForTouch(event);
     const target = event.target as HTMLElement;
     const newTitle = target.textContent || '';
 
@@ -304,6 +310,7 @@ export class StickyNote extends RapidElement {
   }
 
   private handleBodyBlur(event: FocusEvent): void {
+    this.handleContentBlurForTouch(event);
     const target = event.target as HTMLElement;
     const newBody = target.innerText || '';
 
@@ -318,6 +325,46 @@ export class StickyNote extends RapidElement {
     this.requestUpdate();
   }
 
+  /* c8 ignore start -- touch-only handlers untestable in headless Chromium */
+  private handleDragHandleTouchStart(event: TouchEvent): void {
+    // Prevent Apple Pencil Scribble from activating on the adjacent
+    // contenteditable fields when touching/dragging the handle.
+    event.preventDefault();
+  }
+
+  /**
+   * On touch devices, contenteditable is off by default. A tap on the
+   * title or body enables it and focuses the element for editing.
+   */
+  private handleContentTap(event: TouchEvent): void {
+    if (!this.isTouchDevice) return;
+    const target = event.target as HTMLElement;
+    if (
+      !target.classList.contains('sticky-title') &&
+      !target.classList.contains('sticky-body')
+    )
+      return;
+
+    // Enable editing and focus
+    target.setAttribute('contenteditable', 'true');
+    this.editingField = target;
+    target.focus();
+    event.stopPropagation();
+  }
+
+  /**
+   * When a contenteditable field loses focus on a touch device,
+   * disable contenteditable again to prevent Scribble.
+   */
+  private handleContentBlurForTouch(event: FocusEvent): void {
+    const target = event.target as HTMLElement;
+    if (this.isTouchDevice && this.editingField === target) {
+      target.setAttribute('contenteditable', 'false');
+      this.editingField = null;
+    }
+  }
+  /* c8 ignore stop */
+
   private handleContentMouseDown(event: MouseEvent): void {
     // If this sticky note is selected, don't stop propagation
     // so that group dragging can work
@@ -356,11 +403,19 @@ export class StickyNote extends RapidElement {
     this.colorPickerExpanded = false;
   }
 
+  /* c8 ignore next 5 -- touch-only */
+  private handleColorPickerTap(event: TouchEvent): void {
+    event.stopPropagation();
+    event.preventDefault();
+    this.colorPickerExpanded = !this.colorPickerExpanded;
+  }
+
   private handleColorOptionClick(
-    event: MouseEvent,
+    event: MouseEvent | TouchEvent,
     color: 'yellow' | 'blue' | 'pink' | 'green' | 'gray'
   ): void {
     event.stopPropagation();
+    event.preventDefault();
 
     if (this.data && color !== this.data.color) {
       getStore()
@@ -391,23 +446,29 @@ export class StickyNote extends RapidElement {
         data-uuid="${this.uuid}"
       >
         <div class="sticky-title-container">
-          <temba-icon name="drag" class="drag-handle"></temba-icon>
+          <temba-icon
+            name="drag"
+            class="drag-handle"
+            @touchstart=${this.handleDragHandleTouchStart}
+          ></temba-icon>
           <div
             class="sticky-title"
-            contenteditable="${!this.isTranslating}"
+            contenteditable="${!this.isTranslating && !this.isTouchDevice}"
             @blur="${this.handleTitleBlur}"
             @keydown="${this.handleTitleKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
+            @touchend="${this.handleContentTap}"
             .textContent="${this.data.title}"
           ></div>
         </div>
         <div class="sticky-body-container">
           <div
             class="sticky-body"
-            contenteditable="${!this.isTranslating}"
+            contenteditable="${!this.isTranslating && !this.isTouchDevice}"
             @blur="${this.handleBodyBlur}"
             @keydown="${this.handleBodyKeyDown}"
             @mousedown="${this.handleContentMouseDown}"
+            @touchend="${this.handleContentTap}"
             .textContent="${this.data.body}"
           ></div>
           ${!this.isTranslating
@@ -419,6 +480,7 @@ export class StickyNote extends RapidElement {
             class="color-picker"
             @mouseenter="${this.handleColorPickerMouseEnter}"
             @mouseleave="${this.handleColorPickerMouseLeave}"
+            @touchend="${this.handleColorPickerTap}"
           >
             <div
               class="color-options ${this.colorPickerExpanded
@@ -429,26 +491,36 @@ export class StickyNote extends RapidElement {
                 class="color-option yellow"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'yellow')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'yellow')}"
               ></div>
               <div
                 class="color-option blue"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'blue')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'blue')}"
               ></div>
               <div
                 class="color-option pink"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'pink')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'pink')}"
               ></div>
               <div
                 class="color-option green"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'green')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'green')}"
               ></div>
               <div
                 class="color-option gray"
                 @click="${(e: MouseEvent) =>
                   this.handleColorOptionClick(e, 'gray')}"
+                @touchend="${(e: TouchEvent) =>
+                  this.handleColorOptionClick(e, 'gray')}"
               ></div>
             </div>
           </div>

package/src/flow/actions/add_contact_urn.ts

@@ -7,7 +7,7 @@ import {
   FlowTypes
 } from '../types';
 import { Node, AddContactUrn } from '../../store/flow-definition';
-import { SCHEMES } from '../utils';
+import { SCHEMES, renderClamped } from '../utils';
 
 export const add_contact_urn: ActionConfig = {
   name: 'Add URN',
@@ -16,11 +16,10 @@ export const add_contact_urn: ActionConfig = {
   render: (_node: Node, action: AddContactUrn) => {
     const schemeObj = SCHEMES.find((s) => s.scheme === action.scheme);
     const friendlyScheme = schemeObj?.path || action.scheme;
-    return html`<div
-      style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-    >
-      Add ${friendlyScheme} <strong>${action.path}</strong>
-    </div>`;
+    return renderClamped(
+      html`Add ${friendlyScheme} <strong>${action.path}</strong>`,
+      `Add ${friendlyScheme} ${action.path}`
+    );
   },
 
   toFormData: (action: AddContactUrn) => {

package/src/flow/actions/enter_flow.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { Node, EnterFlow } from '../../store/flow-definition';
-import { renderNamedObjects } from '../utils';
+import { renderFlowLinks } from '../utils';
 
 export const enter_flow: ActionConfig = {
   name: 'Enter a Flow',
@@ -9,7 +9,7 @@ export const enter_flow: ActionConfig = {
   hideFromActions: true,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: EnterFlow) => {
-    return html`${renderNamedObjects([action.flow], 'flow')}`;
+    return html`${renderFlowLinks([action.flow], 'flow')}`;
   },
   toFormData: (action: EnterFlow) => {
     return {

package/src/flow/actions/say_msg.ts

@@ -3,6 +3,7 @@ import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SayMsg } from '../../store/flow-definition';
 import { renderAudioPlayer } from './audio-player';
+import { renderClamped } from '../utils';
 
 export const say_msg: ActionConfig = {
   name: 'Say Message',
@@ -11,7 +12,7 @@ export const say_msg: ActionConfig = {
   render: (_node: Node, action: SayMsg) => {
     const text = (action.text || '').replace(/\n/g, '<br>');
     return html`
-      ${unsafeHTML(text)}
+      ${renderClamped(html`${unsafeHTML(text)}`, action.text || '')}
       ${action.audio_url
         ? html`<div style="margin-top: 0.5em;">
             ${renderAudioPlayer(action.audio_url)}

package/src/flow/actions/send_broadcast.ts

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SendBroadcast } from '../../store/flow-definition';
-import { renderStringList } from '../utils';
+import { renderStringList, renderClamped } from '../utils';
 import { Icon } from '../../Icons';
 
 export const send_broadcast: ActionConfig = {
@@ -17,11 +17,7 @@ export const send_broadcast: ActionConfig = {
     return html`<div>
       <div>${renderStringList(recipients, Icon.contacts)}</div>
       <div style="margin-top: 0.5em">
-        <div
-          style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-        >
-          ${action.text}
-        </div>
+        ${renderClamped(action.text, action.text)}
       </div>
     </div>`;
   },

package/src/flow/actions/send_email.ts

@@ -7,7 +7,7 @@ import {
   FlowTypes
 } from '../types';
 import { Node, SendEmail } from '../../store/flow-definition';
-import { renderStringList } from '../utils';
+import { renderStringList, renderClamped } from '../utils';
 import { Icon } from '../../Icons';
 
 export const send_email: ActionConfig = {
@@ -18,11 +18,7 @@ export const send_email: ActionConfig = {
     return html`<div>
       <div>${renderStringList(action.addresses, Icon.email)}</div>
       <div style="margin-top: 0.5em">
-        <div
-          style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-        >
-          ${action.subject}
-        </div>
+        ${renderClamped(action.subject, action.subject)}
       </div>
     </div>`;
   },