@swiftbrowser/web 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/editorSelection.ts

@@ -11,6 +11,8 @@ import type { TextSelectionRange } from './protocol';
 
 /** The selection each bound editor last reported, or was last moved to. */
 const reported = new WeakMap<HTMLElement, string>();
+/** The text each editor last reported (what the viewer typed): a `text` coming back equal to it is an echo, any other came from outside. */
+const reportedText = new WeakMap<HTMLElement, string>();
 /** A selection the app set while the editor was not focused: where its caret goes when the app focuses it. */
 const pending = new WeakMap<HTMLElement, TextSelectionRange>();
 
@@ -41,14 +43,47 @@ export function wantsDeleteBackward(el: HTMLElement): boolean {
   return el.dataset['sbDeleteBackward'] !== undefined;
 }
 
+/** The editor reported `text` (the viewer typed it). */
+export function noteReportedText(el: HTMLElement, text: string): void {
+  reportedText.set(el, text);
+}
+
+/**
+ * Where a `text` the app sends came from: the echo of what the editor
+ * reported, or outside (another person's edit, the app's own change). The
+ * caret survives an echo on its own; an outside change moves what is under
+ * it, so the caret is moved too (`shiftOffset`), or the app's selection
+ * re-applied even when its numbers did not change.
+ */
+export function textArrived(el: HTMLElement, text: string): 'echo' | 'remote' {
+  return reportedText.get(el) === text ? 'echo' : 'remote';
+}
+
+/**
+ * Where an offset into `before` is in `after`: the same offset before the
+ * change (the common prefix), moved by the change's length after it (the
+ * common suffix), and at the change's end inside it.
+ */
+export function shiftOffset(before: string, after: string, offset: number): number {
+  const shortest = Math.min(before.length, after.length);
+  let prefix = 0;
+  while (prefix < shortest && before.charCodeAt(prefix) === after.charCodeAt(prefix)) prefix += 1;
+  let suffix = 0;
+  while (suffix < shortest - prefix && before.charCodeAt(before.length - 1 - suffix) === after.charCodeAt(after.length - 1 - suffix)) suffix += 1;
+  if (offset <= prefix) return offset;
+  if (offset >= before.length - suffix) return offset + (after.length - before.length);
+  return after.length - suffix;
+}
+
 /**
  * The app sent `range` (or no selection): the range the editor moves to now,
  * when it is focused; otherwise null, the range kept for `takePendingSelection`
  * when the app focuses the editor. Nothing for the selection the editor
- * itself reported, coming back.
+ * itself reported, coming back, unless `force` (the text changed from
+ * outside under it, so the same numbers mean a move).
  */
-export function selectionToApply(el: HTMLElement, range: TextSelectionRange | undefined): TextSelectionRange | null {
-  if (!range || reported.get(el) === key(range)) return null;
+export function selectionToApply(el: HTMLElement, range: TextSelectionRange | undefined, force = false): TextSelectionRange | null {
+  if (!range || (!force && reported.get(el) === key(range))) return null;
   reported.set(el, key(range));
   if (el.ownerDocument.activeElement === el) return range;
   pending.set(el, range);

package/src/plainEditor.ts

@@ -9,15 +9,36 @@
  */
 
 import type { TextEditorProps, TextSelectionRange } from './protocol';
-import { editorBlurred, isSelectionBound, markSelectionBound, noteViewerSelection, selectionToApply, takePendingSelection, viewerFocused } from './editorSelection';
+import { editorBlurred, isSelectionBound, markSelectionBound, noteViewerSelection, selectionToApply, shiftOffset, takePendingSelection, viewerFocused } from './editorSelection';
+
+/** A `text` that came from outside, with the editor's value and caret before it was applied (src/editorSelection.ts, `textArrived`). */
+export interface OutsideChange {
+  before: string;
+  caret: TextSelectionRange | null;
+}
 
 export function isPlainEditor(el: unknown): el is HTMLTextAreaElement {
   return el instanceof HTMLTextAreaElement && el.classList.contains('sb-texteditor');
 }
 
-/** After the text: a selection the app set (not the viewer's coming back), moved to now, or when the app focuses the editor. */
-export function applyPlainEditorSelection(area: HTMLTextAreaElement, props: TextEditorProps): void {
+/**
+ * After the text: a selection the app set (not the viewer's coming back),
+ * moved to now, or when the app focuses the editor. After a text from
+ * outside (`outside`): the app's selection even when its numbers did not
+ * change, else the viewer's caret moved past the change (setting a
+ * textarea's value puts it at the end otherwise).
+ */
+export function applyPlainEditorSelection(area: HTMLTextAreaElement, props: TextEditorProps, outside: OutsideChange | null = null): void {
   markSelectionBound(area, props.selection !== undefined);
+  if (outside) {
+    if (props.selection !== undefined) {
+      const range = selectionToApply(area, props.selection, true);
+      if (range) area.setSelectionRange(range.start, range.end);
+    } else if (outside.caret) {
+      area.setSelectionRange(shiftOffset(outside.before, area.value, outside.caret.start), shiftOffset(outside.before, area.value, outside.caret.end));
+    }
+    return;
+  }
   const range = selectionToApply(area, props.selection);
   if (range) area.setSelectionRange(range.start, range.end);
 }

package/src/renderer.ts

@@ -62,7 +62,7 @@ import { LayoutReporter } from './layoutEvents';
 import { createGaugeRing, isCircularGauge, updateGaugeRing } from './gaugeRing';
 import { bitmapStore, showBitmap } from './bitmaps';
 import { clearRichText, runTemplates } from './richText';
-import { markDeleteBackward, wantsDeleteBackward } from './editorSelection';
+import { markDeleteBackward, noteReportedText, textArrived, wantsDeleteBackward } from './editorSelection';
 import { applyPlainEditorSelection, focusPlainEditor, isPlainEditor, listenToPlainEditors } from './plainEditor';
 import { applyRichEditor, createRichEditor, focusRichEditor, isRichEditor, listenToRichEditors, richEditorText } from './richEditor';
 import { applyLayout, setTabHidden, type BoxChange } from './layoutDom';
@@ -899,6 +899,7 @@ export class Renderer {
     const id = Number(owner?.dataset[ID_ATTR]);
     if (!Number.isInteger(id)) return;
     const value = isRichEditor(input) ? richEditorText(input) : input.value;
+    noteReportedText(input, value);
     this.onEvent({ type: 'text', id, value });
   };
 
@@ -3925,16 +3926,25 @@ function setDatePickerValue(el: HTMLElement, seconds: number): void {
   }
 }
 
-/** Like `applyTextField`: the caret survives an echo of the text the editor shows. */
+/**
+ * Like `applyTextField`: the caret survives an echo of the text the editor
+ * shows. A text from outside (not what the editor reported) would put the
+ * caret at the end: the editor's value and caret from before are kept for
+ * `applyPlainEditorSelection` to move it past the change.
+ */
 function applyTextEditor(area: HTMLTextAreaElement, props: TextEditorProps): void {
   const text = props.text ?? '';
-  if (area.value !== text) area.value = text;
+  const before = area.value;
+  const outside = before !== text && textArrived(area, text) === 'remote';
+  const focused = area.ownerDocument.activeElement === area;
+  const caret = outside && focused ? { start: area.selectionStart, end: area.selectionEnd } : null;
+  if (before !== text) area.value = text;
   // Bound focus, as for a `textfield` (moved in `syncFocus` after the commit).
   if (typeof props.focused === 'boolean') area.dataset['sbFocus'] = String(props.focused);
   else delete area.dataset['sbFocus'];
   markDeleteBackward(area, props.deleteBackward === true);
   // A bound selection, under the rich editor's rules (src/plainEditor.ts).
-  applyPlainEditorSelection(area, props);
+  applyPlainEditorSelection(area, props, outside ? { before, caret } : null);
 }
 
 // ---------------------------------------------------------------------------