@dxos/plugin-thread 0.6.13-main.548ca8d → 0.6.13-staging.1e988a3

package/src/ThreadPlugin.tsx

@@ -2,56 +2,85 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Chat, type IconProps } from '@phosphor-icons/react';
+import { computed, effect } from '@preact/signals-core';
 import React from 'react';
 
 import {
   type IntentPluginProvides,
-  type LocationProvides,
+  LayoutAction,
   NavigationAction,
+  type LocationProvides,
   type Plugin,
   type PluginDefinition,
-  isLayoutParts,
   parseIntentPlugin,
   parseNavigationPlugin,
-  parseMetadataResolverPlugin,
   resolvePlugin,
+  parseGraphPlugin,
+  SLUG_PATH_SEPARATOR,
+  SLUG_COLLECTION_INDICATOR,
+  isLayoutParts,
+  parseMetadataResolverPlugin,
+  type IntentDispatcher,
+  useResolvePlugins,
 } from '@dxos/app-framework';
 import { type UnsubscribeCallback } from '@dxos/async';
-import { create, type EchoReactiveObject, getTypename } from '@dxos/echo-schema';
+import { type EchoReactiveObject, getTypename } from '@dxos/echo-schema';
+import { create } from '@dxos/echo-schema';
 import { LocalStorageStore } from '@dxos/local-storage';
-import { log } from '@dxos/log';
+import { type AttentionPluginProvides, parseAttentionPlugin } from '@dxos/plugin-attention';
 import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup, toSignal } from '@dxos/plugin-graph';
+import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { DocumentType } from '@dxos/plugin-markdown/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { SpaceAction } from '@dxos/plugin-space';
 import { ThreadType, MessageType, ChannelType } from '@dxos/plugin-space/types';
-import { getSpace, fullyQualifiedId, loadObjectReferences, parseFullyQualifiedId } from '@dxos/react-client/echo';
+import {
+  getSpace,
+  getTextInRange,
+  Filter,
+  createDocAccessor,
+  fullyQualifiedId,
+  loadObjectReferences,
+} from '@dxos/react-client/echo';
+import { ScrollArea } from '@dxos/react-ui';
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { comments, createExternalCommentSync, listener } from '@dxos/react-ui-editor';
 import { translations as threadTranslations } from '@dxos/react-ui-thread';
+import { nonNullable } from '@dxos/util';
 
 import {
+  ThreadMain,
+  ThreadSettings,
+  CommentsContainer,
+  CommentsHeading,
   ChatContainer,
   ChatHeading,
   ThreadArticle,
-  ThreadComplementary,
-  ThreadMain,
-  ThreadSettings,
 } from './components';
-import { threads } from './extensions';
 import meta, { THREAD_ITEM, THREAD_PLUGIN } from './meta';
 import translations from './translations';
-import { ThreadAction, type ThreadPluginProvides, type ThreadSettingsProps, type ThreadState } from './types';
+import { ThreadAction, type ThreadProvides, type ThreadPluginProvides, type ThreadSettingsProps } from './types';
 
-type SubjectId = string;
+type ThreadState = {
+  /** An in-memory staging area for threads that are being drafted. */
+  staging: Record<string, ThreadType[]>;
+  current?: string | undefined;
+  focus?: boolean;
+};
 
+type SubjectId = string;
 const initialViewState = { showResolvedThreads: false };
-
 type ViewStore = Record<SubjectId, typeof initialViewState>;
 
+// TODO(Zan): More robust runtime check.
+const providesThreadsConfig = (plugin: any): Plugin<ThreadProvides<any>> | undefined =>
+  'thread' in plugin.provides ? (plugin as Plugin<ThreadProvides<any>>) : undefined;
+
 // TODO(Zan): Every instance of `cursor` should be replaced with `anchor`.
-//  NOTE(burdon): Review/discuss CursorConverter semantics.
 export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
   const settings = new LocalStorageStore<ThreadSettingsProps>(THREAD_PLUGIN);
-  const state = create<ThreadState>({ drafts: {} });
+  const state = create<ThreadState>({ staging: {} });
 
   const viewStore = create<ViewStore>({});
   const getViewState = (subjectId: string) => {
@@ -61,8 +90,10 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
     return viewStore[subjectId];
   };
 
+  let attentionPlugin: Plugin<AttentionPluginProvides> | undefined;
   let navigationPlugin: Plugin<LocationProvides> | undefined;
   let intentPlugin: Plugin<IntentPluginProvides> | undefined;
+  let dispatch: IntentDispatcher | undefined;
 
   const unsubscribeCallbacks = [] as UnsubscribeCallback[];
 
@@ -71,8 +102,45 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
     ready: async (plugins) => {
       settings.prop({ key: 'standalone', type: LocalStorageStore.bool({ allowUndefined: true }) });
 
+      attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin);
       intentPlugin = resolvePlugin(plugins, parseIntentPlugin)!;
+      dispatch = intentPlugin?.provides.intent.dispatch;
+
+      const graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+      const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
+      if (!client) {
+        return;
+      }
+
+      // TODO(wittjosiah): This is a hack to make standalone threads work in the c11y sidebar.
+      //  This should have a better solution when deck is introduced.
+      const channelsQuery = client.spaces.query(Filter.schema(ChannelType));
+      const queryUnsubscribe = channelsQuery.subscribe();
+      const unsubscribe = effect(() => {
+        const attention = attentionPlugin?.provides.attention;
+        if (!attention?.attended) {
+          return;
+        }
+
+        const firstAttendedNodeWithComments = Array.from(attention.attended)
+          .map((id) => graphPlugin?.provides.graph.findNode(id))
+          .find((node) => node?.data instanceof DocumentType && (node.data.threads?.length ?? 0) > 0);
+
+        if (firstAttendedNodeWithComments) {
+          void intentPlugin?.provides.intent.dispatch({
+            action: NavigationAction.OPEN,
+            data: {
+              activeParts: {
+                complementary: `${firstAttendedNodeWithComments.id}${SLUG_PATH_SEPARATOR}comments`,
+              },
+            },
+          });
+        }
+      });
+
+      unsubscribeCallbacks.push(queryUnsubscribe);
+      unsubscribeCallbacks.push(unsubscribe);
     },
     unload: async () => {
       unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
@@ -83,7 +151,8 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
         records: {
           [ChannelType.typename]: {
             placeholder: ['channel title placeholder', { ns: THREAD_PLUGIN }],
-            icon: 'ph--chat--regular',
+            icon: (props: IconProps) => <Chat {...props} />,
+            iconSymbol: 'ph--chat--regular',
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (channel: ChannelType) => loadObjectReferences(channel, (channel) => channel.threads),
           },
@@ -125,46 +194,35 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
             createExtension({
               id: `${THREAD_PLUGIN}/comments-for-subject`,
               resolver: ({ id }) => {
-                // TODO(Zan): Find util (or make one).
                 if (!id.endsWith('~comments')) {
                   return;
                 }
 
-                const [subjectId] = id.split('~');
-                const [spaceId, objectId] = parseFullyQualifiedId(subjectId);
+                // TODO(Zan): Find util (or make one)
+                const docId = id.split('~').at(0);
+                const [spaceId, objectId] = docId?.split(':') ?? [];
                 const space = client.spaces.get().find((space) => space.id === spaceId);
-                const object = toSignal(
-                  (onChange) => {
-                    const timeout = setTimeout(async () => {
-                      await space?.db.loadObjectById(objectId);
-                      onChange();
-                    });
-
-                    return () => clearTimeout(timeout);
-                  },
-                  () => space?.db.getObjectById(objectId),
-                  subjectId,
-                );
-                if (!object || !subjectId) {
+                const doc = space?.db.getObjectById(objectId);
+                if (!doc || !docId) {
                   return;
                 }
 
-                const meta = metadataResolver(getTypename(object) ?? '');
-                const label = meta.label?.(object) ||
-                  object.name ||
-                  meta.placeholder || ['unnamed object threads label', { ns: THREAD_PLUGIN }];
+                const docMeta = metadataResolver(getTypename(doc) ?? '');
+                const label = docMeta.label?.(doc) ||
+                  doc.name ||
+                  docMeta.placeholder || ['unnamed object threads label', { ns: THREAD_PLUGIN }];
+                // const label = docMeta.label?.(doc) || doc.name || docMeta.placeholder;
 
-                const viewState = getViewState(subjectId);
+                const viewState = getViewState(docId);
 
                 return {
                   id,
                   type: 'orphan-comments-for-subject',
-                  data: null,
+                  data: doc,
                   properties: {
-                    icon: 'ph--chat-text--regular',
+                    icon: meta.iconComponent,
                     label,
                     showResolvedThreads: viewState.showResolvedThreads,
-                    object,
                   },
                 };
               },
@@ -198,7 +256,6 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                       menuItemType: 'toggle',
                       isChecked: viewState.showResolvedThreads,
                       testId: 'threadPlugin.toggleShowResolved',
-                      icon: viewState.showResolvedThreads ? 'ph--eye-slash--regular' : 'ph--eye--regular',
                     },
                   },
                 ];
@@ -230,7 +287,8 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                     },
                     properties: {
                       label: ['create channel label', { ns: THREAD_PLUGIN }],
-                      icon: 'ph--chat--regular',
+                      icon: (props: IconProps) => <Chat {...props} />,
+                      iconSymbol: 'ph--chat--regular',
                       testId: 'threadPlugin.createObject',
                     },
                   },
@@ -253,8 +311,11 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               return data.plugin === meta.id ? <ThreadSettings settings={settings.values} /> : null;
             }
 
-            case 'article': {
+            case 'article':
+            case 'complementary': {
               const location = navigationPlugin?.provides.location;
+              const threadsIntegrators = useResolvePlugins(providesThreadsConfig);
+              const threadProvides = threadsIntegrators.map((p) => p.provides.thread);
 
               if (data.object instanceof ChannelType && data.object.threads[0]) {
                 const channel = data.object;
@@ -281,30 +342,93 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 );
               }
 
-              break;
-            }
-
-            case 'complementary--comments': {
               if (
                 data.subject &&
                 typeof data.subject === 'object' &&
                 'threads' in data.subject &&
                 Array.isArray(data.subject.threads)
               ) {
-                const { showResolvedThreads } = getViewState(fullyQualifiedId(data.subject));
+                const threads = data.subject.threads
+                  .concat(state.staging[fullyQualifiedId(data.subject)])
+                  .filter(nonNullable);
+
+                const createSort = threadProvides.find((p) => p.predicate(data.subject))?.createSort;
+                if (createSort) {
+                  const sort = createSort(data.subject);
+                  threads.sort((a, b) => sort(a.anchor, b.anchor));
+                }
+
+                const detached = data.subject.threads
+                  .filter(nonNullable)
+                  .filter(({ anchor }) => !anchor)
+                  .map((thread) => thread.id);
+
+                const qualifiedSubjectId = fullyQualifiedId(data.subject);
+                const attention = attentionPlugin?.provides.attention?.attended ?? new Set([qualifiedSubjectId]);
+                const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
+                const { showResolvedThreads } = getViewState(qualifiedSubjectId);
 
                 return (
-                  <ThreadComplementary
-                    role={role}
-                    subject={data.subject}
-                    drafts={state.drafts[fullyQualifiedId(data.subject)]}
-                    current={state.current}
-                    showResolvedThreads={showResolvedThreads}
-                  />
+                  <div role='none' className='contents group/attention' {...attendableAttrs}>
+                    {role === 'complementary' && <CommentsHeading attendableId={qualifiedSubjectId} />}
+                    <ScrollArea.Root classNames='row-span-2'>
+                      <ScrollArea.Viewport>
+                        <CommentsContainer
+                          threads={threads}
+                          detached={detached}
+                          currentId={attention.has(qualifiedSubjectId) ? state.current : undefined}
+                          autoFocusCurrentTextbox={state.focus}
+                          showResolvedThreads={showResolvedThreads}
+                          onThreadAttend={(thread) => {
+                            if (state.current !== thread.id) {
+                              state.current = thread.id;
+                              void dispatch?.({
+                                action: LayoutAction.SCROLL_INTO_VIEW,
+                                data: {
+                                  id: fullyQualifiedId(data.subject!),
+                                  thread: fullyQualifiedId(thread),
+                                  cursor: thread.anchor,
+                                },
+                              });
+                            }
+                          }}
+                          onThreadDelete={(thread) =>
+                            dispatch?.({
+                              plugin: THREAD_PLUGIN,
+                              action: ThreadAction.DELETE,
+                              data: { subject: data.subject, thread },
+                            })
+                          }
+                          onMessageDelete={(thread, messageId) =>
+                            dispatch?.({
+                              plugin: THREAD_PLUGIN,
+                              action: ThreadAction.DELETE_MESSAGE,
+                              data: { subject: data.subject, thread, messageId },
+                            })
+                          }
+                          onThreadToggleResolved={(thread) =>
+                            dispatch?.({
+                              plugin: THREAD_PLUGIN,
+                              action: ThreadAction.TOGGLE_RESOLVED,
+                              data: { thread },
+                            })
+                          }
+                          onComment={(thread) => {
+                            void intentPlugin?.provides.intent.dispatch({
+                              action: ThreadAction.ON_MESSAGE_ADD,
+                              data: { thread, subject: data.subject },
+                            });
+                          }}
+                        />
+                        <div role='none' className='bs-10' />
+                        <ScrollArea.Scrollbar>
+                          <ScrollArea.Thumb />
+                        </ScrollArea.Scrollbar>
+                      </ScrollArea.Viewport>
+                    </ScrollArea.Root>
+                  </div>
                 );
               }
-
-              break;
             }
           }
 
@@ -318,40 +442,37 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               if (intent.data && intent.data.cursor !== undefined) {
                 const { cursor, name, subject } = intent.data;
 
-                // Seed the threads array if it does not exist.
-                if (subject?.threads === undefined) {
-                  try {
-                    // Static schema will throw an error if subject does not support threads array property.
-                    subject.threads = [];
-                  } catch (err) {
-                    log.error('Subject does not support threads array', subject?.typename);
-                    return;
-                  }
-                }
-
                 const subjectId = fullyQualifiedId(subject);
                 const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
-                const draft = state.drafts[subjectId];
-                if (draft) {
-                  draft.push(thread);
+                const stagingArea = state.staging[subjectId];
+                if (stagingArea) {
+                  stagingArea.push(thread);
                 } else {
-                  state.drafts[subjectId] = [thread];
+                  state.staging[subjectId] = [thread];
                 }
 
                 return {
                   data: thread,
                   intents: [
                     [
+                      {
+                        action: NavigationAction.OPEN,
+                        data: {
+                          activeParts: {
+                            complementary: `${subjectId}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`,
+                          },
+                        },
+                      },
                       {
                         action: ThreadAction.SELECT,
-                        data: { current: fullyQualifiedId(thread) },
+                        data: { current: thread.id, focus: true },
                       },
-                    ],
-                    [
                       {
-                        action: NavigationAction.OPEN,
+                        action: LayoutAction.SET_LAYOUT,
                         data: {
-                          activeParts: { complementary: 'comments' },
+                          element: 'complementary',
+                          subject: subjectId,
+                          state: true,
                         },
                       },
                     ],
@@ -359,30 +480,14 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 };
               } else {
                 // NOTE: This is the standalone thread creation case.
-                return {
-                  data: create(ChannelType, { threads: [create(ThreadType, { messages: [] })] }),
-                };
+                return { data: create(ChannelType, { threads: [create(ThreadType, { messages: [] })] }) };
               }
             }
 
             case ThreadAction.SELECT: {
+              state.focus = intent.data?.current === state.current ? state.focus : intent.data?.focus;
               state.current = intent.data?.current;
-
-              return {
-                data: true,
-                intents: !intent.data?.skipOpen
-                  ? [
-                      [
-                        {
-                          action: NavigationAction.OPEN,
-                          data: {
-                            activeParts: { complementary: 'comments' },
-                          },
-                        },
-                      ],
-                    ]
-                  : [],
-              };
+              return { data: true };
             }
 
             case ThreadAction.TOGGLE_RESOLVED: {
@@ -401,7 +506,6 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const spaceId = space?.id;
 
               return {
-                data: true,
                 intents: [
                   [
                     {
@@ -415,21 +519,19 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
 
             case ThreadAction.DELETE: {
               const { subject, thread } = intent.data ?? {};
-              if (
-                !(thread instanceof ThreadType) ||
-                !(subject && typeof subject === 'object' && 'threads' in subject)
-              ) {
+              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType)) {
                 return;
               }
 
               const subjectId = fullyQualifiedId(subject);
-              const draft = state.drafts[subjectId];
-              if (draft) {
-                // Check if we're deleting a draft; if so, remove it.
-                const index = draft.findIndex((t) => t.id === thread.id);
+              const stagingArea = state.staging[subjectId];
+              if (stagingArea) {
+                // Check if we're deleting a thread that's in the staging area.
+                // If so, remove it from the staging area without ceremony.
+                const index = stagingArea.findIndex((t) => t.id === thread.id);
                 if (index !== -1) {
-                  draft.splice(index, 1);
-                  return { data: true };
+                  stagingArea.splice(index, 1);
+                  return;
                 }
               }
 
@@ -439,7 +541,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               }
 
               if (!intent.undo) {
-                const index = subject.threads.findIndex((t: any) => t?.id === thread.id);
+                const index = subject.threads.findIndex((t) => t?.id === thread.id);
                 const cursor = subject.threads[index]?.anchor;
                 if (index !== -1) {
                   subject.threads?.splice(index, 1);
@@ -485,7 +587,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const { thread, subject } = intent.data ?? {};
               if (
                 !(thread instanceof ThreadType) ||
-                !(subject && typeof subject === 'object' && 'threads' in subject && Array.isArray(subject.threads))
+                !(subject && typeof subject === 'object' && 'threads' in subject)
               ) {
                 return;
               }
@@ -495,11 +597,12 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const intents = [];
               const analyticsProperties = { threadId: thread.id, spaceId: space?.id };
 
-              if (state.drafts[subjectId]?.find((t) => t === thread)) {
-                // Move draft to document.
+              if (state.staging[subjectId]?.find((t) => t === thread)) {
+                // Move thread from staging to document.
                 thread.status = 'active';
                 subject.threads ? subject.threads.push(thread) : (subject.threads = [thread]);
-                state.drafts[subjectId] = state.drafts[subjectId]?.filter(({ id }) => id !== thread.id);
+                state.staging[subjectId] = state.staging[subjectId]?.filter((t) => t.id !== thread.id);
+
                 intents.push({
                   action: ObservabilityAction.SEND_EVENT,
                   data: { name: 'threads.thread-created', properties: analyticsProperties },
@@ -524,10 +627,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const { subject, thread, messageId } = intent.data ?? {};
               const space = getSpace(subject);
 
-              if (
-                !(thread instanceof ThreadType) ||
-                !(subject && typeof subject === 'object' && 'threads' in subject)
-              ) {
+              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType) || !space) {
                 return;
               }
 
@@ -558,7 +658,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                         action: ObservabilityAction.SEND_EVENT,
                         data: {
                           name: 'threads.message.delete',
-                          properties: { threadId: thread.id, spaceId: space?.id },
+                          properties: { threadId: thread.id, spaceId: space.id },
                         },
                       },
                     ],
@@ -567,11 +667,13 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               } else if (intent.undo) {
                 const message = intent.data?.message;
                 const messageIndex = intent.data?.messageIndex;
+
                 if (!(message instanceof MessageType) || !(typeof messageIndex === 'number')) {
                   return;
                 }
 
                 thread.messages.splice(messageIndex, 0, message);
+
                 return {
                   data: true,
                   intents: [
@@ -580,7 +682,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                         action: ObservabilityAction.SEND_EVENT,
                         data: {
                           name: 'threads.message.undo-delete',
-                          properties: { threadId: thread.id, spaceId: space?.id },
+                          properties: { threadId: thread.id, spaceId: space.id },
                         },
                       },
                     ],
@@ -592,8 +694,96 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
         },
       },
       markdown: {
+        // TODO(burdon): Factor out extension factory into separate file (for simplicity).
         extensions: ({ document: doc }) => {
-          return threads(state, doc, intentPlugin?.provides.intent.dispatch);
+          const space = doc && getSpace(doc);
+          if (!doc || !space) {
+            // Include no-op comments extension here to ensure that the facets are always present when they are expected.
+            // TODO(wittjosiah): The Editor should only look for these facets when comments are available.
+            return [comments()];
+          }
+
+          // TODO(Zan): When we have the deepsignal specific equivalent of this we should use that instead.
+          const threads = computed(() =>
+            [...doc.threads.filter(nonNullable), ...(state.staging[fullyQualifiedId(doc)] ?? [])].filter(
+              (thread) => !(thread?.status === 'resolved'),
+            ),
+          );
+
+          return [
+            listener({
+              onChange: () => {
+                doc.threads.forEach((thread) => {
+                  if (thread?.anchor) {
+                    const [start, end] = thread.anchor.split(':');
+                    const name = doc.content && getTextInRange(createDocAccessor(doc.content, ['content']), start, end);
+                    // TODO(burdon): This seems unsafe; review.
+                    // Only update if the name has changed, otherwise this will cause an infinite loop.
+                    // Skip if the name is empty - this means comment text was deleted, but thread name should remain.
+                    if (name && name !== thread.name) {
+                      thread.name = name;
+                    }
+                  }
+                });
+              },
+            }),
+            createExternalCommentSync(
+              doc.id,
+              (sink) => effect(() => sink()),
+              () =>
+                threads.value
+                  .filter((thread) => thread?.anchor)
+                  .map((thread) => ({ id: thread.id, cursor: thread.anchor! })),
+            ),
+            comments({
+              id: doc.id,
+              onCreate: ({ cursor }) => {
+                const [start, end] = cursor.split(':');
+                const name = doc.content && getTextInRange(createDocAccessor(doc.content, ['content']), start, end);
+
+                void intentPlugin?.provides.intent.dispatch({
+                  action: ThreadAction.CREATE,
+                  data: {
+                    cursor,
+                    name,
+                    subject: doc,
+                  },
+                });
+              },
+              onDelete: ({ id }) => {
+                // If the thread is in the staging area, remove it.
+                const stagingArea = state.staging[fullyQualifiedId(doc)];
+                if (stagingArea) {
+                  const index = stagingArea.findIndex((thread) => thread.id === id);
+                  if (index !== -1) {
+                    stagingArea.splice(index, 1);
+                  }
+                }
+
+                const thread = doc.threads.find((thread) => thread?.id === id);
+                if (thread) {
+                  thread.anchor = undefined;
+                }
+              },
+              onUpdate: ({ id, cursor }) => {
+                const thread =
+                  state.staging[fullyQualifiedId(doc)]?.find((thread) => thread.id === id) ??
+                  doc.threads.find((thread) => thread?.id === id);
+
+                if (thread instanceof ThreadType && thread.anchor) {
+                  const [start, end] = thread.anchor.split(':');
+                  thread.name = doc.content && getTextInRange(createDocAccessor(doc.content, ['content']), start, end);
+                  thread.anchor = cursor;
+                }
+              },
+              onSelect: ({ selection: { current, closest } }) => {
+                const dispatch = intentPlugin?.provides.intent.dispatch;
+                if (dispatch) {
+                  void dispatch([{ action: ThreadAction.SELECT, data: { current: current ?? closest } }]);
+                }
+              },
+            }),
+          ];
         },
       },
     },