@dxos/react-ui-thread 0.4.10-main.e158b1a → 0.4.10-main.e2d2318

package/dist/types/src/Thread/Comments.stories.d.ts

@@ -1,6 +1,6 @@
 import '@dxosTheme';
 import React from 'react';
-import { TextObject } from '@dxos/echo-schema';
+import { TextV0Type } from '@braneframe/types';
 import { type Range } from '@dxos/react-ui-editor';
 import { type MessageEntity } from '../types';
 type StoryCommentThread = {
@@ -9,7 +9,7 @@ type StoryCommentThread = {
     range?: Range;
     yPos?: number;
     messages: MessageEntity<{
-        text: TextObject;
+        content?: TextV0Type;
     }>[];
 };
 type StoryProps = {

package/dist/types/src/Thread/Comments.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAkB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAK/D,OAAO,EAML,KAAK,KAAK,EAMX,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAoE9C,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE,CAAC,EAAE,CAAC;CACjD,CAAC;AAqIF,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;;;;;;mBA+He,UAAU;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAME;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}
+{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAM5D,OAAO,EAML,KAAK,KAAK,EAMX,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAmE9C,KAAK,kBAAkB,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC;QAAE,OAAO,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC,EAAE,CAAC;CACrD,CAAC;AA6IF,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;;;;;;mBA+He,UAAU;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAME;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC"}

package/dist/types/src/Thread/Thread.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AACpB,OAAO,KAA4B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAwEjD,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AACpB,OAAO,KAAoC,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAwFzD,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-thread",
-  "version": "0.4.10-main.e158b1a",
+  "version": "0.4.10-main.e2d2318",
   "description": "A set of components to use with threads, including comments and messages.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -18,11 +18,11 @@
   "dependencies": {
     "@radix-ui/react-primitive": "^1.0.2",
     "date-fns": "^3.3.1",
-    "@dxos/react-ui": "0.4.10-main.e158b1a",
-    "@dxos/react-ui-editor": "0.4.10-main.e158b1a",
-    "@dxos/react-ui-mosaic": "0.4.10-main.e158b1a",
-    "@dxos/util": "0.4.10-main.e158b1a",
-    "@dxos/react-ui-theme": "0.4.10-main.e158b1a"
+    "@dxos/react-ui-editor": "0.4.10-main.e2d2318",
+    "@dxos/react-ui-theme": "0.4.10-main.e2d2318",
+    "@dxos/react-ui-mosaic": "0.4.10-main.e2d2318",
+    "@dxos/util": "0.4.10-main.e2d2318",
+    "@dxos/react-ui": "0.4.10-main.e2d2318"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -30,13 +30,14 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^5.1.5",
+    "vite": "^5.1.7",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/echo-schema": "0.4.10-main.e158b1a",
-    "@dxos/keys": "0.4.10-main.e158b1a",
-    "@dxos/random": "0.4.10-main.e158b1a",
-    "@dxos/storybook-utils": "0.4.10-main.e158b1a",
-    "@dxos/log": "0.4.10-main.e158b1a"
+    "@braneframe/types": "0.4.10-main.e2d2318",
+    "@dxos/keys": "0.4.10-main.e2d2318",
+    "@dxos/log": "0.4.10-main.e2d2318",
+    "@dxos/random": "0.4.10-main.e2d2318",
+    "@dxos/storybook-utils": "0.4.10-main.e2d2318",
+    "@dxos/echo-schema": "0.4.10-main.e2d2318"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/Thread/Comments.stories.tsx

@@ -7,7 +7,8 @@ import '@dxosTheme';
 import { Check, Trash } from '@phosphor-icons/react';
 import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
 
-import { getTextContent, TextObject } from '@dxos/echo-schema';
+import { MessageType, TextV0Type } from '@braneframe/types';
+import { createDocAccessor, create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
@@ -23,7 +24,7 @@ import {
   createBasicExtensions,
   createThemeExtensions,
   automerge,
-  useDocAccessor,
+  listener,
 } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -42,7 +43,7 @@ const authorId = PublicKey.random().toHex();
 
 const Editor: FC<{
   id?: string;
-  item: { text: TextObject };
+  item: TextV0Type;
   comments: Comment[];
   selected?: string;
   onCreateComment: CommentsOptions['onCreate'];
@@ -62,15 +63,14 @@ const Editor: FC<{
   const [selected, setSelected] = useState<string>();
 
   const { themeMode } = useThemeContext();
-  const { doc, accessor } = useDocAccessor(item.text);
   const { parentRef, view } = useTextEditor(
     () => ({
       id,
-      doc,
+      doc: item.content,
       extensions: [
         createBasicExtensions(),
         createThemeExtensions({ themeMode }),
-        automerge(accessor),
+        automerge(createDocAccessor(item, ['content'])),
         comments({
           onCreate: onCreateComment,
           onDelete: onDeleteComment,
@@ -79,7 +79,7 @@ const Editor: FC<{
         }),
       ],
     }),
-    [doc, accessor, themeMode],
+    [id, item, themeMode],
   );
   useComments(view, id, commentRanges);
   useEffect(() => {
@@ -103,12 +103,13 @@ type StoryCommentThread = {
   cursor?: string;
   range?: Range;
   yPos?: number;
-  messages: MessageEntity<{ text: TextObject }>[];
+  messages: MessageEntity<{ content?: TextV0Type }>[];
 };
 
-const StoryMessageBlock = (props: MessageBlockProps<{ text: TextObject }>) => {
+const StoryMessageBlock = (props: MessageBlockProps<{ content?: TextV0Type }>) => {
   const { themeMode } = useThemeContext();
-  const { doc, accessor } = useDocAccessor(props.block.text);
+  const doc = props.block.content?.content;
+  const accessor = createDocAccessor(props.block.content!, ['content']);
   const { parentRef } = useTextEditor(
     () => ({
       doc,
@@ -133,15 +134,17 @@ const StoryThread: FC<{
 }> = ({ thread, selected, onSelect, onResolve }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { themeMode } = useThemeContext();
-  const [item, setItem] = useState({ text: new TextObject() });
-  const { doc, accessor } = useDocAccessor(item.text);
+  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
+  const [_count, _setCount] = useState(0);
+  const rerenderEditor = () => _setCount((count) => count + 1);
+  const messageRef = useRef('');
   const extensions = useMemo(
     () => [
       createBasicExtensions({ placeholder: 'Enter comment' }),
       createThemeExtensions({ themeMode }),
-      automerge(accessor),
+      listener({ onChange: (text) => (messageRef.current = text) }),
     ],
-    [themeMode, accessor],
+    [themeMode, _count],
   );
 
   const [autoFocus, setAutoFocus] = useState(false);
@@ -156,15 +159,21 @@ const StoryThread: FC<{
   }, [selected]);
 
   const handleCreateMessage = () => {
-    const text = getTextContent(item.text)?.trim();
-    if (text?.length) {
-      thread.messages.push({
-        id: item.text.id,
-        authorId,
-        blocks: [{ text: item.text, timestamp: new Date().toISOString() }],
+    if (messageRef.current?.length) {
+      const message = create(MessageType, {
+        from: { identityKey: authorId },
+        blocks: [
+          {
+            timestamp: new Date().toISOString(),
+            content: create(TextV0Type, { content: messageRef.current }),
+          },
+        ],
       });
-      setItem({ text: new TextObject() });
+      thread.messages.push(message);
+
+      messageRef.current = '';
       setAutoFocus(true);
+      rerenderEditor();
     }
   };
 
@@ -182,13 +191,12 @@ const StoryThread: FC<{
       </ThreadHeading>
 
       {thread.messages.map((message) => (
-        <Message<{ text: TextObject }> key={message.id} {...message} MessageBlockComponent={StoryMessageBlock} />
+        <Message<{ content?: TextV0Type }> key={message.id} {...message} MessageBlockComponent={StoryMessageBlock} />
       ))}
 
       <div ref={containerRef} className='contents'>
         <MessageTextbox
-          id={item.text.id}
-          doc={doc}
+          id={thread.id}
           authorId={authorId}
           autoFocus={autoFocus}
           extensions={extensions}
@@ -243,7 +251,7 @@ type StoryProps = {
 };
 
 const Story = ({ text, autoCreate }: StoryProps) => {
-  const [item] = useState({ text: new TextObject(text) });
+  const [item] = useState(create(TextV0Type, { content: text ?? '' }));
   const [threads, setThreads] = useState<StoryCommentThread[]>([]);
   const [selected, setSelected] = useState<string>();
 
@@ -269,7 +277,7 @@ const Story = ({ text, autoCreate }: StoryProps) => {
                 blocks: [
                   {
                     timestamp: new Date().toISOString(),
-                    text: new TextObject(faker.lorem.sentence()),
+                    content: create(TextV0Type, { content: faker.lorem.sentence() }),
                   },
                 ],
               }),

package/src/Thread/Thread.stories.tsx

@@ -3,11 +3,10 @@
 //
 
 import '@dxosTheme';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
-import { setTextContent, TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
-import { automerge, createBasicExtensions, createThemeExtensions, useDocAccessor } from '@dxos/react-ui-editor';
+import { createBasicExtensions, createThemeExtensions } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Thread, ThreadFooter } from './Thread';
@@ -19,7 +18,7 @@ const Story = () => {
   const [pending, setPending] = useState(false);
   const [identityKey1] = useState(PublicKey.random());
   const [identityKey2] = useState(PublicKey.random());
-  const [messages] = useState<MessageEntity<{ id: string; text: string }>[]>([
+  const [messages, setMesssages] = useState<MessageEntity<{ id: string; text: string }>[]>([
     {
       id: 'm1',
       authorId: identityKey1.toHex(),
@@ -44,17 +43,34 @@ const Story = () => {
     },
   ]);
 
-  const [item] = useState(new TextObject());
-  const { accessor } = useDocAccessor(item);
-  const extensions = useMemo(() => [createBasicExtensions(), createThemeExtensions(), automerge(accessor)], [accessor]);
+  // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
+  const [_count, _setCount] = useState(3);
+  const rerenderEditor = () => _setCount((count) => count + 1);
+  const messageRef = useRef('');
+  const extensions = useMemo(() => [createBasicExtensions(), createThemeExtensions()], []);
 
   // TODO(thure): Why does pressing Enter clear the text content?
   //  Something to do with the in-memory text model perhaps?
   const handleSend = () => {
     setPending(true);
     setTimeout(() => {
-      setTextContent(item, '');
+      setMesssages((messages) => [
+        ...messages,
+        {
+          id: `m${_count}`,
+          authorId: identityKey1.toHex(),
+          blocks: [
+            {
+              id: `b${_count}`,
+              timestamp: new Date().toISOString(),
+              text: messageRef.current,
+            },
+          ],
+        },
+      ]);
+      messageRef.current = '';
       setPending(false);
+      rerenderEditor();
     }, 2_000);
   };
 
@@ -64,7 +80,7 @@ const Story = () => {
         <Message key={message.id} {...message} />
       ))}
       <MessageTextbox
-        id={item.id}
+        id={String(_count)}
         authorId={identityKey1.toHex()}
         disabled={pending}
         extensions={extensions}