@dxos/plugin-thread 0.6.12-main.7907542 → 0.6.12-main.ac23639

package/src/ThreadPlugin.tsx

@@ -2,12 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { computed, effect } from '@preact/signals-core';
 import React from 'react';
 
 import {
   type IntentPluginProvides,
-  LayoutAction,
   NavigationAction,
   type LocationProvides,
   type Plugin,
@@ -28,39 +26,27 @@ import { type ActionGroup, createExtension, isActionGroup, toSignal } from '@dxo
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { SpaceAction } from '@dxos/plugin-space';
 import { ThreadType, MessageType, ChannelType } from '@dxos/plugin-space/types';
-import {
-  getSpace,
-  getTextInRange,
-  createDocAccessor,
-  fullyQualifiedId,
-  loadObjectReferences,
-} from '@dxos/react-client/echo';
-import { comments, createExternalCommentSync, listener } from '@dxos/react-ui-editor';
+import { getSpace, fullyQualifiedId, loadObjectReferences } from '@dxos/react-client/echo';
 import { translations as threadTranslations } from '@dxos/react-ui-thread';
-import { nonNullable } from '@dxos/util';
 
 import { ThreadMain, ThreadSettings, ChatContainer, ChatHeading, ThreadArticle } from './components';
 import { ThreadComplementary } from './components/ThreadComplementary';
+import { threads } from './extensions';
 import meta, { THREAD_ITEM, THREAD_PLUGIN } from './meta';
 import translations from './translations';
-import { ThreadAction, type ThreadPluginProvides, type ThreadSettingsProps } from './types';
-
-type ThreadState = {
-  /** An in-memory staging area for threads that are being drafted. */
-  staging: Record<string, ThreadType[]>;
-  current?: string | undefined;
-};
+import { ThreadAction, type ThreadPluginProvides, type ThreadSettingsProps, type ThreadState } from './types';
 
 type SubjectId = string;
+
 const initialViewState = { showResolvedThreads: false };
-type ViewStore = Record<SubjectId, typeof initialViewState>;
 
-// TODO(Zan): More robust runtime check.
+type ViewStore = Record<SubjectId, typeof initialViewState>;
 
 // 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>({ staging: {} });
+  const state = create<ThreadState>({ drafts: {} });
 
   const viewStore = create<ViewStore>({});
   const getViewState = (subjectId: string) => {
@@ -262,8 +248,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               return data.plugin === meta.id ? <ThreadSettings settings={settings.values} /> : null;
             }
 
-            case 'article':
-            case 'complementary': {
+            case 'article': {
               const location = navigationPlugin?.provides.location;
 
               if (data.object instanceof ChannelType && data.object.threads[0]) {
@@ -291,6 +276,10 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 );
               }
 
+              break;
+            }
+
+            case 'complementary--comments': {
               if (
                 data.subject &&
                 typeof data.subject === 'object' &&
@@ -303,12 +292,14 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                   <ThreadComplementary
                     role={role}
                     subject={data.subject}
-                    stagedThreads={state.staging[fullyQualifiedId(data.subject)]}
+                    drafts={state.drafts[fullyQualifiedId(data.subject)]}
                     current={state.current}
                     showResolvedThreads={showResolvedThreads}
                   />
                 );
               }
+
+              break;
             }
           }
 
@@ -327,7 +318,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                   try {
                     // Static schema will throw an error if subject does not support threads array property.
                     subject.threads = [];
-                  } catch (e) {
+                  } catch (err) {
                     log.error('Subject does not support threads array', subject?.typename);
                     return;
                   }
@@ -335,11 +326,11 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
 
                 const subjectId = fullyQualifiedId(subject);
                 const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
-                const stagingArea = state.staging[subjectId];
-                if (stagingArea) {
-                  stagingArea.push(thread);
+                const draft = state.drafts[subjectId];
+                if (draft) {
+                  draft.push(thread);
                 } else {
-                  state.staging[subjectId] = [thread];
+                  state.drafts[subjectId] = [thread];
                 }
 
                 return {
@@ -350,12 +341,12 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                         action: ThreadAction.SELECT,
                         data: { current: fullyQualifiedId(thread) },
                       },
+                    ],
+                    [
                       {
-                        action: LayoutAction.SET_LAYOUT,
+                        action: NavigationAction.OPEN,
                         data: {
-                          element: 'complementary',
-                          subject: subjectId,
-                          state: true,
+                          activeParts: { complementary: 'comments' },
                         },
                       },
                     ],
@@ -363,13 +354,30 @@ 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.current = intent.data?.current;
-              return { data: true };
+
+              return {
+                data: true,
+                intents: !intent.data?.skipOpen
+                  ? [
+                      [
+                        {
+                          action: NavigationAction.OPEN,
+                          data: {
+                            activeParts: { complementary: 'comments' },
+                          },
+                        },
+                      ],
+                    ]
+                  : [],
+              };
             }
 
             case ThreadAction.TOGGLE_RESOLVED: {
@@ -388,6 +396,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const spaceId = space?.id;
 
               return {
+                data: true,
                 intents: [
                   [
                     {
@@ -409,13 +418,12 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               }
 
               const subjectId = fullyQualifiedId(subject);
-              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);
+              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);
                 if (index !== -1) {
-                  stagingArea.splice(index, 1);
+                  draft.splice(index, 1);
                   return { data: true };
                 }
               }
@@ -482,12 +490,11 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const intents = [];
               const analyticsProperties = { threadId: thread.id, spaceId: space?.id };
 
-              if (state.staging[subjectId]?.find((t) => t === thread)) {
-                // Move thread from staging to document.
+              if (state.drafts[subjectId]?.find((t) => t === thread)) {
+                // Move draft to document.
                 thread.status = 'active';
                 subject.threads ? subject.threads.push(thread) : (subject.threads = [thread]);
-                state.staging[subjectId] = state.staging[subjectId]?.filter((t) => t.id !== thread.id);
-
+                state.drafts[subjectId] = state.drafts[subjectId]?.filter(({ id }) => id !== thread.id);
                 intents.push({
                   action: ObservabilityAction.SEND_EVENT,
                   data: { name: 'threads.thread-created', properties: analyticsProperties },
@@ -555,13 +562,11 @@ 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: [
@@ -582,96 +587,8 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
         },
       },
       markdown: {
-        // TODO(burdon): Factor out extension factory into separate file (for simplicity).
         extensions: ({ document: doc }) => {
-          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(
-              fullyQualifiedId(doc),
-              (sink) => effect(() => sink()),
-              () =>
-                threads.value
-                  .filter((thread) => thread?.anchor)
-                  .map((thread) => ({ id: fullyQualifiedId(thread), cursor: thread.anchor! })),
-            ),
-            comments({
-              id: fullyQualifiedId(doc),
-              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) => fullyQualifiedId(thread) === 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) => fullyQualifiedId(thread) === 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 } }]);
-                }
-              },
-            }),
-          ];
+          return threads(state, doc, intentPlugin?.provides.intent.dispatch);
         },
       },
     },

package/src/components/ThreadComplementary.tsx

@@ -21,13 +21,13 @@ const providesThreadsConfig = (plugin: any): Plugin<ThreadProvides<any>> | undef
 export const ThreadComplementary = ({
   role,
   subject,
-  stagedThreads,
+  drafts,
   current,
   showResolvedThreads,
 }: {
   role: string;
   subject: any;
-  stagedThreads: ThreadType[] | undefined;
+  drafts: ThreadType[] | undefined;
   current?: string;
   showResolvedThreads?: boolean;
 }) => {
@@ -42,8 +42,8 @@ export const ThreadComplementary = ({
   const sort = useMemo(() => createSort?.(subject), [createSort, subject]);
 
   const threads = useMemo(() => {
-    return subject.threads.concat(stagedThreads ?? []).filter(nonNullable) as ThreadType[];
-  }, [JSON.stringify(subject.threads), JSON.stringify(stagedThreads)]);
+    return subject.threads.concat(drafts ?? []).filter(nonNullable) as ThreadType[];
+  }, [JSON.stringify(subject.threads), JSON.stringify(drafts)]);
 
   const detachedIds = useMemo(() => {
     return threads.filter(({ anchor }) => !anchor).map((thread) => fullyQualifiedId(thread));

package/src/extensions/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './threads';

package/src/extensions/threads.ts

@@ -0,0 +1,117 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { computed, effect } from '@preact/signals-core';
+
+import { type IntentDispatcher } from '@dxos/app-framework';
+import { type DocumentType } from '@dxos/plugin-markdown/types';
+import { ThreadType } from '@dxos/plugin-space/types';
+import { getSpace, getTextInRange, createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
+import { comments, createExternalCommentSync } from '@dxos/react-ui-editor';
+import { nonNullable } from '@dxos/util';
+
+import { ThreadAction, type ThreadState } from '../types';
+
+// TODO(burdon): Factor out.
+const getName = (doc: DocumentType, anchor: string): string | undefined => {
+  if (doc.content) {
+    const [start, end] = anchor.split(':');
+    return getTextInRange(createDocAccessor(doc.content, ['content']), start, end);
+  }
+};
+
+/**
+ * Construct plugins.
+ */
+export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: IntentDispatcher): Extension => {
+  const space = doc && getSpace(doc);
+  if (!doc || !space || !dispatch) {
+    // 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.drafts[fullyQualifiedId(doc)] ?? [])].filter(
+      (thread) => !(thread?.status === 'resolved'),
+    ),
+  );
+
+  return [
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        doc.threads.forEach((thread) => {
+          if (thread?.anchor) {
+            // 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.
+            const name = getName(doc, thread.anchor);
+            if (name && name !== thread.name) {
+              thread.name = name;
+            }
+          }
+        });
+      }
+    }),
+
+    createExternalCommentSync(
+      fullyQualifiedId(doc),
+      (sink) => effect(() => sink()),
+      () =>
+        threads.value
+          .filter((thread) => thread?.anchor)
+          .map((thread) => ({ id: fullyQualifiedId(thread), cursor: thread.anchor! })),
+    ),
+
+    comments({
+      id: fullyQualifiedId(doc),
+      onCreate: ({ cursor }) => {
+        const name = getName(doc, cursor);
+        void dispatch({
+          action: ThreadAction.CREATE,
+          data: {
+            cursor,
+            name,
+            subject: doc,
+          },
+        });
+      },
+      onDelete: ({ id }) => {
+        const draft = state.drafts[fullyQualifiedId(doc)];
+        if (draft) {
+          const index = draft.findIndex((thread) => fullyQualifiedId(thread) === id);
+          if (index !== -1) {
+            draft.splice(index, 1);
+          }
+        }
+
+        const thread = doc.threads.find((thread) => thread?.id === id);
+        if (thread) {
+          thread.anchor = undefined;
+        }
+      },
+      onUpdate: ({ id, cursor }) => {
+        const thread =
+          state.drafts[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id) ??
+          doc.threads.find((thread) => thread?.id === id);
+
+        if (thread instanceof ThreadType && thread.anchor) {
+          thread.name = getName(doc, thread.anchor);
+          thread.anchor = cursor;
+        }
+      },
+      onSelect: ({ selection: { current, closest } }) => {
+        void dispatch({
+          action: ThreadAction.SELECT,
+          data: {
+            current: current ?? closest,
+            skipOpen: true,
+          },
+        });
+      },
+    }),
+  ];
+};

package/src/{meta.tsx → meta.ts}

@@ -2,15 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { pluginMeta } from '@dxos/app-framework';
+import { type PluginMeta } from '@dxos/app-framework';
 
 export const THREAD_PLUGIN = 'dxos.org/plugin/thread';
 export const THREAD_ITEM = `${THREAD_PLUGIN}/item`;
 
-export default pluginMeta({
+export default {
   id: THREAD_PLUGIN,
   name: 'Threads',
-  // TODO(wittjosiah): Update once scope of threads expands.
   description: 'Comment threads on documents.',
   icon: 'ph--chat--regular',
-});
+} satisfies PluginMeta;

package/src/types.ts

@@ -26,8 +26,7 @@ export enum ThreadAction {
   TOGGLE_RESOLVED = `${THREAD_ACTION}/toggle-resolved`,
 }
 
-// TODO(Zan): Move this to the plugin-space plugin or another common location
-// when we implement threads in sheets.
+// TODO(Zan): Move this to the plugin-space plugin or another common location when we implement threads in sheets.
 export type ThreadProvides<T> = {
   thread: {
     predicate: (obj: any) => obj is T;
@@ -49,3 +48,9 @@ export type ThreadSettingsProps = { standalone?: boolean };
 export interface ThreadModel {
   root: ThreadType;
 }
+
+export type ThreadState = {
+  /** In-memory draft threads. */
+  drafts: Record<string, ThreadType[]>;
+  current?: string | undefined;
+};

package/dist/lib/browser/chunk-7NUYW5IW.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const THREAD_PLUGIN = 'dxos.org/plugin/thread';\nexport const THREAD_ITEM = `${THREAD_PLUGIN}/item`;\n\nexport default pluginMeta({\n  id: THREAD_PLUGIN,\n  name: 'Threads',\n  // TODO(wittjosiah): Update once scope of threads expands.\n  description: 'Comment threads on documents.',\n  icon: 'ph--chat--regular',\n});\n"],
-  "mappings": ";AAIA,SAASA,kBAAkB;AAEpB,IAAMC,gBAAgB;AACtB,IAAMC,cAAc,GAAGD,aAAAA;AAE9B,IAAA,eAAeE,WAAW;EACxBC,IAAIH;EACJI,MAAM;;EAENC,aAAa;EACbC,MAAM;AACR,CAAA;",
-  "names": ["pluginMeta", "THREAD_PLUGIN", "THREAD_ITEM", "pluginMeta", "id", "name", "description", "icon"]
-}

package/dist/lib/node/chunk-6EVXCSDS.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const THREAD_PLUGIN = 'dxos.org/plugin/thread';\nexport const THREAD_ITEM = `${THREAD_PLUGIN}/item`;\n\nexport default pluginMeta({\n  id: THREAD_PLUGIN,\n  name: 'Threads',\n  // TODO(wittjosiah): Update once scope of threads expands.\n  description: 'Comment threads on documents.',\n  icon: 'ph--chat--regular',\n});\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,2BAA2B;AAEpB,IAAMA,gBAAgB;AACtB,IAAMC,cAAc,GAAGD,aAAAA;AAE9B,IAAA,mBAAeE,iCAAW;EACxBC,IAAIH;EACJI,MAAM;;EAENC,aAAa;EACbC,MAAM;AACR,CAAA;",
-  "names": ["THREAD_PLUGIN", "THREAD_ITEM", "pluginMeta", "id", "name", "description", "icon"]
-}

package/dist/lib/node-esm/chunk-Y475KZTX.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const THREAD_PLUGIN = 'dxos.org/plugin/thread';\nexport const THREAD_ITEM = `${THREAD_PLUGIN}/item`;\n\nexport default pluginMeta({\n  id: THREAD_PLUGIN,\n  name: 'Threads',\n  // TODO(wittjosiah): Update once scope of threads expands.\n  description: 'Comment threads on documents.',\n  icon: 'ph--chat--regular',\n});\n"],
-  "mappings": ";;;AAIA,SAASA,kBAAkB;AAEpB,IAAMC,gBAAgB;AACtB,IAAMC,cAAc,GAAGD,aAAAA;AAE9B,IAAA,eAAeE,WAAW;EACxBC,IAAIH;EACJI,MAAM;;EAENC,aAAa;EACbC,MAAM;AACR,CAAA;",
-  "names": ["pluginMeta", "THREAD_PLUGIN", "THREAD_ITEM", "pluginMeta", "id", "name", "description", "icon"]
-}