@dxos/react-ui-editor 0.8.1-staging.9eaf14f → 0.8.2-main.10c050d

package/src/components/Popover/RefDropdownMenu.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { DropdownMenu } from '@dxos/react-ui';
+
+import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
+
+// TODO(burdon): Reconcile with RefPopover?
+
+const customEventOptions = { capture: true, passive: false };
+
+// Create a context for the dxn value.
+type RefDropdownMenuValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+
+const REF_DROPDOWN_MENU = 'RefDropdownMenu';
+const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
+
+type RefDropdownMenuProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+
+const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
+  const trigger = useRef<DxRefTag | null>(null);
+  const [value, setValue] = useState<RefDropdownMenuValue>({});
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleDxRefTagActivate = useCallback(
+    (event: DxRefTagActivate) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, ref: refId },
+        pending: true,
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, ref: refId }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  useEffect(() => {
+    return rootRef
+      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
+      : undefined;
+  }, [rootRef]);
+
+  return (
+    <RefDropdownMenuContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+        <DropdownMenu.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRootRef}>
+          {children}
+        </div>
+      </DropdownMenu.Root>
+    </RefDropdownMenuContextProvider>
+  );
+};
+
+export const RefDropdownMenu = {
+  Provider: RefDropdownMenuProvider,
+};
+
+export { useRefDropdownMenu };
+
+export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };

package/src/components/Popover/RefPopover.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { Popover } from '@dxos/react-ui';
+
+import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
+
+const customEventOptions = { capture: true, passive: false };
+
+// Create a context for the dxn value.
+type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+
+const REF_POPOVER = 'RefPopover';
+const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
+
+type RefPopoverProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+
+const RefPopoverProvider = ({ children, onLookup }: RefPopoverProviderProps) => {
+  const trigger = useRef<DxRefTag | null>(null);
+  const [value, setValue] = useState<RefPopoverValue>({});
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleDxRefTagActivate = useCallback(
+    (event: DxRefTagActivate) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, ref: refId },
+        pending: true,
+      }));
+      trigger.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, ref: refId }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  useEffect(() => {
+    return rootRef
+      ? addEventListener(rootRef, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions)
+      : undefined;
+  }, [rootRef]);
+
+  return (
+    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.VirtualTrigger virtualRef={trigger as unknown as RefObject<HTMLButtonElement>} />
+        <div role='none' className='contents' ref={setRootRef}>
+          {children}
+        </div>
+      </Popover.Root>
+    </RefPopoverContextProvider>
+  );
+};
+
+export const RefPopover = {
+  Provider: RefPopoverProvider,
+};
+
+export { useRefPopover };
+
+export type { RefPopoverProviderProps, RefPopoverValue };

package/src/components/Popover/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './RefPopover';
+export * from './RefDropdownMenu';

package/src/components/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './EditorToolbar';
+export * from './Popover';

package/src/defaults.ts

@@ -6,29 +6,28 @@ import { EditorView } from '@codemirror/view';
 
 import { mx } from '@dxos/react-ui-theme';
 
+import { type ThemeExtensionsOptions } from './extensions';
 import { fontMono } from './styles';
 
-const margin = '!mt-[1rem]';
-
 /**
  * CodeMirror content width.
  * 40rem = 640px. Corresponds to initial plank width (Google docs, Stashpad, etc.)
  * 50rem = 800px. Maximum content width for solo mode.
  * NOTE: Max width - 4rem = 2rem left/right margin (or 2rem gutter plus 1rem left/right margin).
  */
-// TOOD(burdon): Adjust depending on
-export const editorContent = mx(margin, '!mli-auto w-full max-w-[min(50rem,100%-4rem)]');
+export const editorWidth = '!mli-auto is-full max-is-[min(50rem,100%-4rem)]';
 
-/**
- * Margin for numbers.
- */
-export const editorFullWidth = mx(margin);
+export const editorSlots: ThemeExtensionsOptions['slots'] = {
+  scroll: {
+    className: 'pbs-2',
+  },
+  content: {
+    className: editorWidth,
+  },
+};
 
 export const editorGutter = EditorView.theme({
-  // Match margin from content.
-  // Gutter = 2rem + 1rem margin.
   '.cm-gutters': {
-    marginTop: '1rem',
     paddingRight: '1rem',
   },
 });
@@ -50,6 +49,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'attention-surface is-full border-be !border-separator',
-    role === 'section' && 'sticky block-start-0 z-[1] -mbe-px min-is-0',
+    'relative z-[1] flex is-full bg-toolbarSurface border-be border-subduedSeparator',
+    role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
   );

package/src/extensions/annotations.ts

@@ -2,77 +2,54 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorState, type Extension, StateField } from '@codemirror/state';
-import { Decoration, EditorView } from '@codemirror/view';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { isNotFalsy } from '@dxos/util';
-
-import { Cursor } from '../util';
-
-type Annotation = {
-  cursor: string;
-};
+const annotationMark = Decoration.mark({ class: 'cm-annotation' });
 
 export type AnnotationOptions = {
   match?: RegExp; // TODO(burdon): Update via hook (e.g., for search).
 };
 
-const annotationMark = Decoration.mark({ class: 'cm-annotation' });
-
-export const annotations = (options: AnnotationOptions = {}): Extension => {
-  // TODO(burdon): Build index of matches and cursors (in background function).
-  //  Define annotation action in prompt. E.g., extract company names. Find links, etc.
-  //  Show popover card. A16Z chain demo. Identify, extract, research, link. Multi-agent.
-  const match = (state: EditorState) => {
-    const annotations: Annotation[] = [];
-    const text = state.doc.toString();
-    if (options.match) {
-      const matches = text.matchAll(options.match);
-      for (const match of matches) {
-        const from = match.index!;
-        const to = from + match[0].length;
-        const cursor = Cursor.getCursorFromRange(state, { from, to });
-        annotations.push({ cursor });
-      }
-    }
-
-    return annotations;
-  };
-
-  const annotationsState = StateField.define<Annotation[]>({
-    create: (state) => {
-      return match(state);
-    },
-    update: (value, tr) => {
-      if (!tr.changes.empty) {
-        return match(tr.state);
-      }
-
-      return value;
-    },
-  });
-
+/**
+ *
+ */
+export const annotations = ({ match }: AnnotationOptions = {}): Extension => {
   return [
-    annotationsState,
-    EditorView.decorations.compute([annotationsState], (state) => {
-      const annotations = state.field(annotationsState);
-      const decorations = annotations
-        .map((annotation) => {
-          const range = Cursor.getRangeFromCursor(state, annotation.cursor);
-          return range && annotationMark.range(range.from, range.to);
-        })
-        .filter(isNotFalsy);
-
-      return Decoration.set(decorations);
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet = Decoration.none;
+        update(update: ViewUpdate) {
+          const builder = new RangeSetBuilder<Decoration>();
+          if (match) {
+            // Only process visible lines.
+            const { from, to } = update.view.viewport;
+            const text = update.state.doc.sliceString(from, to);
+            const matches = text.matchAll(match);
+            for (const m of matches) {
+              if (m.index !== undefined) {
+                // Adjust match position relative to viewport.
+                const start = from + m.index;
+                const end = start + m[0].length;
+                builder.add(start, end, annotationMark);
+              }
+            }
+          }
+
+          this.decorations = builder.finish();
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    ),
+
+    EditorView.theme({
+      '.cm-annotation': {
+        textDecoration: 'underline',
+        textDecorationStyle: 'wavy',
+        textDecorationColor: 'var(--dx-errorText)',
+      },
     }),
-    styles,
   ];
 };
-
-const styles = EditorView.theme({
-  '.cm-annotation': {
-    textDecoration: 'underline',
-    textDecorationStyle: 'wavy',
-    textDecorationColor: 'var(--dx-error)',
-  },
-});

package/src/extensions/autocomplete.ts

@@ -17,7 +17,6 @@ import { keymap } from '@codemirror/view';
 export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
-  debug?: boolean;
   activateOnTyping?: boolean;
   override?: CompletionSource[];
   onSearch?: (text: string) => Completion[];
@@ -30,7 +29,7 @@ export type AutocompleteOptions = {
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ debug, activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
+export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
   const extensions: Extension[] = [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -40,16 +39,16 @@ export const autocomplete = ({ debug, activateOnTyping, override, onSearch }: Au
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping,
       override,
-      closeOnBlur: !debug,
-      tooltipClass: () => 'shadow rounded',
+      activateOnTyping,
+      // closeOnBlur: false,
+      // tooltipClass: () => 'rounded-be pbe-1 border-separator',
     }),
   ];
 
   if (onSearch) {
     extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions
+      // TODO(burdon): Optional decoration via addToOptions.
       markdownLanguage.data.of({
         autocomplete: (context: CompletionContext): CompletionResult | null => {
           const match = context.matchBefore(/\w*/);

package/src/extensions/automerge/automerge.stories.tsx

@@ -5,26 +5,19 @@
 import '@dxos-theme';
 
 import '@preact/signals-react';
+
+import { Repo } from '@automerge/automerge-repo';
+import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import React, { useEffect, useState } from 'react';
 
-import { Repo } from '@dxos/automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando } from '@dxos/echo-schema';
-import {
-  DocAccessor,
-  Filter,
-  create,
-  createDocAccessor,
-  useQuery,
-  useSpace,
-  type Space,
-} from '@dxos/react-client/echo';
+import { DocAccessor, live, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { editorContent } from '../../defaults';
+import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
@@ -49,12 +42,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
       initialValue: DocAccessor.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({
-          themeMode,
-          slots: {
-            editor: { className: editorContent },
-          },
-        }),
+        createThemeExtensions({ themeMode, slots: editorSlots }),
         createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
       autoFocus,
@@ -79,11 +67,12 @@ const Story = () => {
         doc.text = initialContent;
       });
 
-      const object2 = repo2.find<TestObject>(object1.url);
+      const object2 = await repo2.find<TestObject>(object1.url);
       await object2.whenReady();
 
-      setObject1({ handle: object1, path: ['text'] });
-      setObject2({ handle: object2, path: ['text'] });
+      // TODO(mykola): Fix types.
+      setObject1({ handle: object1 as any, path: ['text'] });
+      setObject2({ handle: object2 as any, path: ['text'] });
     });
   }, []);
 
@@ -111,7 +100,7 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery<Expando>(space, Filter.from({ type: 'test' }));
+  const objects = useQuery(space, Query.type(Expando, { type: 'test' }));
 
   useEffect(() => {
     if (!source && objects.length) {
@@ -139,9 +128,9 @@ export const WithEcho = {
         createSpace
         onSpaceCreated={async ({ space }) => {
           space.db.add(
-            create({
+            live({
               type: 'test',
-              content: create(Expando, { content: initialContent }),
+              content: live(Expando, { content: initialContent }),
             }),
           );
         }}

package/src/extensions/automerge/automerge.test.tsx

@@ -2,17 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type DocHandle, Repo } from '@automerge/automerge-repo';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
 // TODO(wittjosiah): Move to vitest expect (and remove from package.json).
 import chai, { expect } from 'chai';
 import chaiDom from 'chai-dom';
-import get from 'lodash.get';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { describe, test } from 'vitest';
 
-import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
+import { get } from '@dxos/util';
 
 import { automerge } from './automerge';
 
@@ -24,7 +24,7 @@ const path = ['text'];
 
 class Generator {
   constructor(private readonly _handle: DocHandle<TestObject>) {}
-  update(text: string) {
+  update(text: string): void {
     this._handle.change((doc: TestObject) => {
       doc.text = text;
     });
@@ -36,7 +36,8 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   const [view, setView] = useState<EditorView>();
   useEffect(() => {
     const extensions = [
-      automerge({ handle, path }),
+      // TODO(mykola): Fix types.
+      automerge({ handle: handle as any, path }),
       EditorView.updateListener.of((update) => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
@@ -46,7 +47,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
     ];
 
     const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.docSync()!, path), extensions }),
+      state: EditorState.create({ doc: get(handle.doc()!, path), extensions }),
       parent: ref.current!,
     });
 

package/src/extensions/automerge/automerge.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A } from '@automerge/automerge';
 import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
 import { type DocAccessor } from '@dxos/react-client/echo';
 
 import { cursorConverter } from './cursor';
@@ -19,7 +19,7 @@ export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
     create: () => ({
       path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.docSync()!),
+      lastHeads: A.getHeads(accessor.handle.doc()!),
       unreconciledTransactions: [],
     }),
 

package/src/extensions/automerge/defs.ts

@@ -4,10 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { type Heads, type Prop } from '@automerge/automerge';
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
 
-import { type Heads, type Prop } from '@dxos/automerge/automerge';
-
 export type State = {
   path: Prop[];
   lastHeads: Heads;

package/src/extensions/automerge/sync.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
@@ -26,7 +26,7 @@ export class Syncer {
     private readonly _state: StateField<State>
   ) {}
 
-  reconcile(view: EditorView, editor: boolean) {
+  reconcile(view: EditorView, editor: boolean): void {
     // TODO(burdon): Better way to do mutex?
     if (this._pending) {
       return;
@@ -41,7 +41,7 @@ export class Syncer {
     this._pending = false;
   }
 
-  onEditorChange(view: EditorView) {
+  onEditorChange(view: EditorView): void {
     // Apply the unreconciled transactions to the document.
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
     const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
@@ -54,18 +54,18 @@ export class Syncer {
     }
   }
 
-  onAutomergeChange(view: EditorView) {
+  onAutomergeChange(view: EditorView): void {
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = A.getHeads(this._handle.docSync()!);
-    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
+    const newHeads = A.getHeads(this._handle.doc()!);
+    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.doc()!, oldHeads, newHeads);
 
     const selection = view.state.selection;
     const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
 
     // TODO(burdon): Test conflicts?
-    // A.getConflicts(this._handle.docSync()!, path[0]);
+    // A.getConflicts(this._handle.doc()!, path[0]);
 
     view.dispatch({
       effects: updateHeads(newHeads),

package/src/extensions/automerge/update-automerge.ts

@@ -4,9 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
-import { next as A, type Heads } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { type State } from './defs';

package/src/extensions/automerge/update-codemirror.ts

@@ -4,9 +4,6 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
 import {
   type DelPatch,
   type InsertPatch,
@@ -14,7 +11,9 @@ import {
   type Prop,
   type PutPatch,
   type SpliceTextPatch,
-} from '@dxos/automerge/automerge';
+} from '@automerge/automerge';
+import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 
 import { reconcileAnnotation } from './defs';
 

package/src/extensions/awareness/awareness-provider.ts

@@ -53,7 +53,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._info = params.info;
   }
 
-  open() {
+  open(): void {
     this._ctx = new Context();
     this._postTask = new DeferredTask(this._ctx, async () => {
       if (this._localState) {
@@ -92,7 +92,7 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
       });
   }
 
-  close() {
+  close(): void {
     void this._ctx?.dispose();
     this._ctx = undefined;
     this._postTask = undefined;
@@ -113,12 +113,12 @@ export class SpaceAwarenessProvider implements AwarenessProvider {
     this._postTask.schedule();
   }
 
-  private _handleQueryMessage() {
+  private _handleQueryMessage(): void {
     invariant(this._postTask);
     this._postTask.schedule();
   }
 
-  private _handlePostMessage(message: ProtocolMessage) {
+  private _handlePostMessage(message: ProtocolMessage): void {
     invariant(message.kind === 'post');
     // TODO(wittjosiah): Is it helpful or confusing to show cursors for self on other devices?
     this._remoteStates.set(message.state.peerId, message.state);