@dxos/react-ui-editor 0.3.11-main.8be6c8a → 0.3.11-main.8ef1cc6

package/src/extensions/awareness.ts

@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { CursorConverter } from '../util';
+import { Cursor, type CursorConverter } from './cursor';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;
@@ -91,7 +91,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
   private _lastHead?: number = undefined;
 
   constructor(view: EditorView) {
-    this._cursorConverter = view.state.facet(CursorConverter);
+    this._cursorConverter = view.state.facet(Cursor.converter);
     this._provider = view.state.facet(AwarenessProvider);
     this._provider.open();
     this._provider.remoteStateChange.on(this._ctx, () => {
@@ -156,7 +156,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
           to: end,
           value: Decoration.mark({
             attributes: { style: `background-color: ${lightColor}` },
-            class: 'cm-ySelection',
+            class: 'cm-collab-selection',
           }),
         });
       } else {
@@ -166,7 +166,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
           to: startLine.from + startLine.length,
           value: Decoration.mark({
             attributes: { style: `background-color: ${color}` },
-            class: 'cm-ySelection',
+            class: 'cm-collab-selection',
           }),
         });
 
@@ -176,7 +176,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
           to: end,
           value: Decoration.mark({
             attributes: { style: `background-color: ${color}` },
-            class: 'cm-ySelection',
+            class: 'cm-collab-selection',
           }),
         });
 
@@ -186,7 +186,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
             from: linePos,
             to: linePos,
             value: Decoration.line({
-              attributes: { style: `background-color: ${color}`, class: 'cm-yLineSelection' },
+              attributes: { style: `background-color: ${color}`, class: 'cm-collab-selectionLine' },
             }),
           });
         }
@@ -208,24 +208,22 @@ export class RemoteSelectionsDecorator implements PluginValue {
 }
 
 class RemoteCaretWidget extends WidgetType {
-  constructor(public name: string, public color: string) {
+  constructor(private readonly _name: string, private readonly _color: string) {
     super();
-    this.name = name;
-    this.color = color;
   }
 
-  toDOM(): HTMLElement {
+  override toDOM(): HTMLElement {
     const span = document.createElement('span');
-    span.className = 'cm-ySelectionCaret';
-    span.style.backgroundColor = this.color;
-    span.style.borderColor = this.color;
+    span.className = 'cm-collab-selectionCaret';
+    span.style.backgroundColor = this._color;
+    span.style.borderColor = this._color;
 
     const dot = document.createElement('div');
-    dot.className = 'cm-ySelectionCaretDot';
+    dot.className = 'cm-collab-selectionCaretDot';
 
     const info = document.createElement('div');
-    info.className = 'cm-ySelectionInfo';
-    info.innerText = this.name;
+    info.className = 'cm-collab-selectionInfo';
+    info.innerText = this._name;
 
     span.appendChild(document.createTextNode('\u2060'));
     span.appendChild(dot);
@@ -236,18 +234,14 @@ class RemoteCaretWidget extends WidgetType {
     return span;
   }
 
-  override eq(widget: this) {
-    return widget.color === this.color;
-  }
-
-  compare(widget: this) {
-    return widget.color === this.color;
-  }
-
   override updateDOM() {
     return false;
   }
 
+  override eq(widget: this) {
+    return widget._color === this._color;
+  }
+
   override get estimatedHeight() {
     return -1;
   }
@@ -257,14 +251,14 @@ class RemoteCaretWidget extends WidgetType {
   }
 }
 
-// TODO(burdon): Rename prefix (y for yjs?)
+// TODO(burdon): Mixed case?
 const styles = EditorView.baseTheme({
-  '.cm-ySelection': {},
-  '.cm-yLineSelection': {
+  '.cm-collab-selection': {},
+  '.cm-collab-selectionLine': {
     padding: 0,
     margin: '0px 2px 0px 4px',
   },
-  '.cm-ySelectionCaret': {
+  '.cm-collab-selectionCaret': {
     position: 'relative',
     borderLeft: '1px solid black',
     borderRight: '1px solid black',
@@ -273,7 +267,7 @@ const styles = EditorView.baseTheme({
     boxSizing: 'border-box',
     display: 'inline',
   },
-  '.cm-ySelectionCaretDot': {
+  '.cm-collab-selectionCaretDot': {
     borderRadius: '50%',
     position: 'absolute',
     width: '.4em',
@@ -284,11 +278,11 @@ const styles = EditorView.baseTheme({
     transition: 'transform .3s ease-in-out',
     boxSizing: 'border-box',
   },
-  '.cm-ySelectionCaret:hover > .cm-ySelectionCaretDot': {
+  '.cm-collab-selectionCaret:hover > .cm-collab-selectionCaretDot': {
     transformOrigin: 'bottom center',
     transform: 'scale(0)',
   },
-  '.cm-ySelectionInfo': {
+  '.cm-collab-selectionInfo': {
     position: 'absolute',
     top: '-1.05em',
     left: '-1px',
@@ -304,12 +298,12 @@ const styles = EditorView.baseTheme({
     zIndex: 101,
     transition: 'opacity .3s ease-in-out',
     backgroundColor: 'inherit',
-    // these should be separate
+    // These should be separate.
     opacity: 0,
     transitionDelay: '0s',
     whiteSpace: 'nowrap',
   },
-  '.cm-ySelectionCaret:hover > .cm-ySelectionInfo': {
+  '.cm-collab-selectionCaret:hover > .cm-collab-selectionInfo': {
     opacity: 1,
     transitionDelay: '0s',
   },

package/src/extensions/code.ts

@@ -53,22 +53,20 @@ const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
 };
 
 export const code = () => {
-  const getDecorations = (view: EditorView) => {
+  const buildDecorations = (view: EditorView) => {
     const decorations: Range<Decoration>[] = [];
-    if (view.state.readOnly) {
-      const text = view.state.doc.sliceString(0);
-      const matches = text.matchAll(CODE_REGEX);
-      const blocks = view.viewportLineBlocks;
-      for (const match of matches) {
-        const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
-        for (let i = range[0]; i <= range[1]; i++) {
-          const block = blocks[i];
-          decorations.push(
-            Decoration.line({
-              class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
-            }).range(block.from),
-          );
-        }
+    const text = view.state.doc.sliceString(0);
+    const matches = text.matchAll(CODE_REGEX);
+    const blocks = view.viewportLineBlocks;
+    for (const match of matches) {
+      const range = getLineRange(blocks, match.index!, match.index! + match[0].length);
+      for (let i = range[0]; i <= range[1]; i++) {
+        const block = blocks[i];
+        decorations.push(
+          Decoration.line({
+            class: mx('cm-codeblock', i === range[0] && 'cm-codeblock-first', i === range[1] && 'cm-codeblock-last'),
+          }).range(block.from),
+        );
       }
     }
 
@@ -78,14 +76,22 @@ export const code = () => {
   return [
     ViewPlugin.fromClass(
       class {
+        hasFocus = false;
         decorations: DecorationSet;
         constructor(view: EditorView) {
-          this.decorations = getDecorations(view);
+          this.decorations = buildDecorations(view);
         }
 
         update(update: ViewUpdate) {
-          if (update.docChanged || update.viewportChanged) {
-            this.decorations = getDecorations(update.view);
+          if (
+            // TODO(burdon): Generalize for other extensions.
+            this.hasFocus !== update.view.hasFocus ||
+            update.startState.readOnly !== update.view.state.readOnly ||
+            update.docChanged ||
+            update.viewportChanged
+          ) {
+            this.hasFocus = update.view.hasFocus;
+            this.decorations = buildDecorations(update.view);
           }
         }
       },

package/src/extensions/comments.ts

@@ -2,45 +2,22 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Extension, StateEffect, StateField } from '@codemirror/state';
-import {
-  hoverTooltip,
-  keymap,
-  type Command,
-  type DecorationSet,
-  type ViewUpdate,
-  Decoration,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  WidgetType,
-  type Rect,
-} from '@codemirror/view';
+import { type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
+import { hoverTooltip, keymap, type Command, Decoration, EditorView, type Rect } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 
 import { debounce } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
-import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
+import { semaphoreFacet } from './automerge/defs';
+import { Cursor } from './cursor';
 import { type CommentRange, type EditorModel, type Range } from '../hooks';
 import { getToken } from '../styles';
-import { callbackWrapper, CursorConverter } from '../util';
-
-// TODO(burdon): Handle delete, cut, copy, and paste (separately) text that includes comment range.
-// TODO(burdon): Consider breaking into separate plugin (since not standalone)? Like mermaid?
+import { callbackWrapper } from '../util';
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
-  '& .cm-bookmark': {
-    cursor: 'pointer',
-    margin: '4px',
-    padding: '4px',
-    backgroundColor: 'yellow',
-  },
-  '& .cm-bookmark-selected': {
-    backgroundColor: 'orange',
-  },
   '& .cm-comment': {
     backgroundColor: getToken('extend.colors.yellow.50'),
   },
@@ -80,7 +57,7 @@ export const setFocus = (view: EditorView, thread: string) => {
   view.dispatch({
     effects: setSelection.of({ active: thread }),
     selection: { anchor: range.from },
-    scrollIntoView: true,
+    scrollIntoView: true, // TODO(burdon): Scroll to y-position (or center of screen?)
   });
 };
 
@@ -92,13 +69,12 @@ const setCommentState = StateEffect.define<CommentsState>();
 
 /**
  * State field (reducer) that tracks comment ranges.
- * The ranges are tracked as codemirror ranges (i.e., not relative YJS/Automerge positions), and
- * therefore must be updated when the document changes.
+ * The ranges are tracked as Automerge cursors from which the absolute indexed ranges can be computed.
  */
 const commentsStateField = StateField.define<CommentsState>({
   create: () => ({ ranges: [] }),
   update: (value, tr) => {
-    const cursorConverter = tr.state.facet(CursorConverter);
+    const cursorConverter = tr.state.facet(Cursor.converter);
 
     for (const effect of tr.effects) {
       // Update selection.
@@ -111,7 +87,8 @@ const commentsStateField = StateField.define<CommentsState>({
         const { comments } = effect.value;
         const ranges: ExtendedCommentRange[] = comments
           .map((comment) => {
-            const range = getRangeFromCursor(cursorConverter, comment.cursor);
+            const range = Cursor.getRangeFromCursor(cursorConverter, comment.cursor);
+            // console.log('update', JSON.stringify({ range, cursor: comment.cursor }, undefined, 2));
             return range && { ...comment, ...range };
           })
           .filter(nonNullable);
@@ -154,42 +131,23 @@ const highlightDecorations = EditorView.decorations.compute([commentsStateField]
   return Decoration.set(decorations);
 });
 
-/**
- * Optional bookmark widget at the start/end of the selection.
- * May correspond to a markdown bookmark.
- */
-class BookmarkWidget extends WidgetType {
-  constructor(
-    private readonly _anchor: number,
-    private readonly _id: string,
-    private readonly _handleClick?: () => void,
-  ) {
-    super();
-    invariant(this._id);
-  }
-
-  override eq(other: BookmarkWidget) {
-    return this._anchor === other._anchor && this._id === other._id;
-  }
-
-  override toDOM() {
-    const span = document.createElement('span');
-    span.className = 'cm-bookmark';
-    span.textContent = '※';
-    if (this._handleClick) {
-      span.onclick = () => this._handleClick!();
-    }
-    return span;
-  }
-}
-
 export type CommentsOptions = {
+  /**
+   * Key shortcut to create a new thread.
+   */
   key?: string;
-  footnote?: boolean;
   /**
    * Called to create a new thread and return the thread id.
    */
-  onCreate?: (range: string) => string | undefined;
+  onCreate?: (cursor: string, location?: Rect | null) => string | undefined;
+  /**
+   * Selection cut/deleted.
+   */
+  onDelete?: (thread: string) => void;
+  /**
+   * Called when a comment is moved.
+   */
+  onUpdate?: (thread: string, cursor: string) => void;
   /**
    * Called to notify which thread is currently closest to the cursor.
    */
@@ -197,7 +155,88 @@ export type CommentsOptions = {
   /**
    * Called to render tooltip.
    */
-  onHover?: (el: Element) => void;
+  onHover?: (el: Element, shortcut: string) => void;
+};
+
+// TODO(burdon): Handle cut/restore via undo (need to integrate with history?)
+const trackPastedComments = (onUpdate: NonNullable<CommentsOptions['onUpdate']>) => {
+  // Cut/deleted comments.
+  // Tracks indexed selections within text.
+  let tracked: { text: Text; comments: { id: string; from: number; to: number }[] } | null = null;
+
+  // Track cut or copy (enables cut-and-paste and copy-delete-paste to restore comment selection).
+  const handleTrack = (event: Event, view: EditorView) => {
+    const comments = view.state.field(commentsStateField);
+    const { main } = view.state.selection;
+    const selectedRanges = comments.ranges.filter(
+      (range) => range.from >= main.from && range.to <= main.to && range.from < range.to,
+    );
+
+    if (!selectedRanges.length) {
+      tracked = null;
+    } else {
+      tracked = {
+        text: view.state.doc.slice(main.from, main.to),
+        comments: selectedRanges.map((range) => ({
+          id: range.id,
+          from: range.from - main.from,
+          to: range.to - main.from,
+        })),
+      };
+    }
+
+    // console.log('track', JSON.stringify({ tracked }, undefined, 2));
+  };
+
+  return [
+    EditorView.domEventHandlers({
+      cut: handleTrack,
+      copy: handleTrack,
+    }),
+
+    // Handle paste.
+    EditorView.updateListener.of(({ view, state, transactions }) => {
+      if (tracked) {
+        const paste = transactions.find((tr) => tr.isUserEvent('input.paste'));
+        if (paste) {
+          let found = -1;
+          paste.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+            if (text.eq(tracked!.text)) {
+              for (let i = transactions.indexOf(paste!) + 1; i < transactions.length; i++) {
+                fromB = transactions[i].changes.mapPos(fromB);
+              }
+
+              found = fromB;
+            }
+          });
+
+          if (found > -1) {
+            const comments = tracked.comments;
+
+            // Sync before recomputing cursor/range.
+            // TODO(burdon): Generalize sync facet to decouple from automerge?
+            view.state.facet(semaphoreFacet).reconcile(view);
+
+            const active = state.field(commentsStateField).ranges;
+            for (const moved of comments) {
+              if (active.some((range) => range.id === moved.id && range.from === range.to)) {
+                const range = {
+                  from: found + moved.from,
+                  to: found + moved.to,
+                };
+
+                const cursor = Cursor.getCursorFromRange(state.facet(Cursor.converter), range);
+                // console.log('paste', JSON.stringify({ moved, range, cursor }, undefined, 2));
+                onUpdate(moved.id, cursor);
+              }
+            }
+          }
+
+          tracked = null;
+        }
+      }
+    }),
+  ];
 };
 
 /**
@@ -209,28 +248,29 @@ export type CommentsOptions = {
  * 4). Tracks the current cursor position to:
  *     a). Update the decoration to show if the cursor is within a current selection.
  *     b). Calls a handler to indicate which is the closest selection (e.g., to update the thread sidebar).
- * 5). Optionally, inserts a markdown footnote when creating a comment thread.
- * 6). Optionally, implements a hoverTooltip to show hints when creating a selection range.
+ * 5). Optionally, implements a hoverTooltip to show hints when creating a selection range.
  */
 export const comments = (options: CommentsOptions = {}): Extension => {
+  const { key: shortcut = "meta-'" } = options;
+
   const handleSelect = debounce((state: CommentsState) => options.onSelect?.(state), 200);
 
   /**
    * Create comment thread action.
    */
   const createCommentThread: Command = (view) => {
-    const cursorConverter = view.state.facet(CursorConverter);
+    const cursorConverter = view.state.facet(Cursor.converter);
 
     invariant(options.onCreate);
-    const { head, from, to } = view.state.selection.main;
+    const { from, to } = view.state.selection.main;
     if (from === to) {
       return false;
     }
 
-    const relPos = getCursorFromRange(cursorConverter, { from, to });
-    if (relPos) {
+    const cursor = Cursor.getCursorFromRange(cursorConverter, { from, to });
+    if (cursor) {
       // Create thread via callback.
-      const id = callbackWrapper(options.onCreate)(relPos);
+      const id = callbackWrapper(options.onCreate)(cursor, view.coordsAtPos(from));
       if (id) {
         // Update range.
         view.dispatch({
@@ -238,15 +278,6 @@ export const comments = (options: CommentsOptions = {}): Extension => {
           selection: { anchor: from },
         });
 
-        // Insert footnote.
-        if (options.footnote) {
-          const tag = `[^${id}]`;
-          view.dispatch({
-            changes: { from: head, insert: tag },
-            selection: { anchor: head + tag.length },
-          });
-        }
-
         return true;
       }
     }
@@ -254,44 +285,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     return false;
   };
 
-  /**
-   * Bookmark widget decoration.
-   */
-  const bookmarksViewPlugin = ViewPlugin.fromClass(
-    class BookmarkViewPlugin {
-      // Match markdown footnotes (option).
-      // https://www.markdownguide.org/extended-syntax/#footnotes
-      static bookmarkMatcher = new MatchDecorator({
-        regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
-          const id = match[1];
-          return Decoration.replace({
-            id,
-            widget: new BookmarkWidget(pos, id),
-          });
-        },
-      });
-
-      bookmarks: DecorationSet;
-      constructor(view: EditorView) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
-      }
-
-      update(update: ViewUpdate) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update, this.bookmarks);
-      }
-    },
-    {
-      decorations: (instance) => instance.bookmarks,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.bookmarks || Decoration.none;
-        }),
-    },
-  );
-
   return [
-    bookmarksViewPlugin,
     commentsStateField,
     highlightDecorations,
     styles,
@@ -302,7 +296,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     options.onCreate
       ? keymap.of([
           {
-            key: options?.key ?? "meta-'",
+            key: shortcut,
             run: callbackWrapper(createCommentThread),
           },
         ])
@@ -322,9 +316,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
                 end: selection.to,
                 above: true,
                 create: () => {
-                  // TODO(burdon): Dispatch to react callback to render (or use SSR)?
                   const el = document.createElement('div');
-                  options.onHover?.(el);
+                  options.onHover!(el, shortcut);
                   return { dom: el, offset: { x: 0, y: 8 } };
                 },
               };
@@ -332,7 +325,11 @@ export const comments = (options: CommentsOptions = {}): Extension => {
 
             return null;
           },
-          { hideOnChange: true, hoverTime: 1000 },
+          {
+            // TODO(burdon): Hide on change triggered immediately?
+            // hideOnChange: true,
+            hoverTime: 1_000,
+          },
         )
       : [],
 
@@ -341,7 +338,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // TODO(burdon): Is there a better (finer grained) way to do this?
     //
     EditorView.updateListener.of(({ view, state, changes }) => {
-      const cursorConverter = view.state.facet(CursorConverter);
+      const cursorConverter = view.state.facet(Cursor.converter);
 
       //
       // Test if need to recompute indexed range if document changes before the end of the range.
@@ -350,17 +347,17 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         let mod = false;
         const { active, ranges } = state.field(commentsStateField);
         changes.iterChanges((from, to, from2, to2) => {
+          // TODO(burdon): Skip deleted (tracked) ranges.
           ranges.forEach((range) => {
             if (from2 === to2) {
-              const newRange = getRangeFromCursor(cursorConverter, range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
-                // TODO(burdon): Delete range if empty.
-                log.info('deleted comment', { thread: range.id });
+                options.onDelete?.(range.id);
               }
             }
 
             if (from <= range.to) {
-              const newRange = getRangeFromCursor(cursorConverter, range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
               Object.assign(range, newRange);
               mod = true;
             }
@@ -381,6 +378,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         let min = Infinity;
         const { active, closest, ranges } = state.field(commentsStateField);
         const selected: CommentSelected = { active: undefined, closest: undefined };
+
+        // TODO(burdon): Skip deleted (tracked) ranges.
         ranges.forEach((comment) => {
           const d = Math.min(Math.abs(head - comment.from), Math.abs(head - comment.to));
           if (head >= comment.from && head <= comment.to) {
@@ -403,18 +402,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
         }
       }
     }),
-  ];
-};
 
-const getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
-  const from = cursorConverter.toCursor(range.from);
-  const to = cursorConverter.toCursor(range.to, -1);
-  return [from, to].join(':');
-};
-
-const getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
-  const parts = cursor.split(':');
-  const from = cursorConverter.fromCursor(parts[0]);
-  const to = cursorConverter.fromCursor(parts[1]);
-  return from !== undefined && to !== undefined ? { from, to } : undefined;
+    options.onUpdate ? trackPastedComments(options.onUpdate) : [],
+  ];
 };

package/src/extensions/cursor.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+import type { Range } from '../hooks';
+
+/**
+ * Converts indexes into the text document into stable peer-independent cursors.
+ *
+ * See:
+ *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+ *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+ *
+ * @param {assoc} number Negative values will associate the cursor with the previous character
+ *                       while positive - with the next one.
+ */
+export interface CursorConverter {
+  toCursor(position: number, assoc?: -1 | 1 | undefined): string;
+  fromCursor(cursor: string): number;
+}
+
+const defaultCursorConverter: CursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor),
+};
+
+export class Cursor {
+  static readonly converter = Facet.define<CursorConverter, CursorConverter>({
+    combine: (providers) => providers[0] ?? defaultCursorConverter,
+  });
+
+  static readonly getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
+    const from = cursorConverter.toCursor(range.from);
+    const to = cursorConverter.toCursor(range.to, -1);
+    return [from, to].join(':');
+  };
+
+  static readonly getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
+    const parts = cursor.split(':');
+    const from = cursorConverter.fromCursor(parts[0]);
+    const to = cursorConverter.fromCursor(parts[1]);
+    return from !== undefined && to !== undefined ? { from, to } : undefined;
+  };
+}