@dxos/react-ui-thread 0.4.8-main.0602afb → 0.4.8-main.2d8e727

package/dist/lib/browser/index.mjs

@@ -72,10 +72,11 @@ import { X } from "@phosphor-icons/react";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
 import React2, { forwardRef as forwardRef2, useMemo } from "react";
 import { Avatar, Button, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { keymap, listener, TextEditor } from "@dxos/react-ui-editor";
+import { TextEditor, keymap, listener } from "@dxos/react-ui-editor";
 import { focusRing, hoverableControlItem as hoverableControlItem2, hoverableControls, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx2 } from "@dxos/react-ui-theme";
-import { safeParseJson, hexToEmoji, hexToHue, isNotFalsy } from "@dxos/util";
+import { safeParseJson, hexToEmoji, hexToHue } from "@dxos/util";
 var avatarSize = 7;
+var messageCell = "plb-1 min-is-0";
 var MessageMeta = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps }, forwardedRef) => {
   return /* @__PURE__ */ React2.createElement(Avatar.Root, {
     size: avatarSize,
@@ -88,7 +89,7 @@ var MessageMeta = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorN
     ref: forwardedRef
   }, /* @__PURE__ */ React2.createElement("div", {
     role: "none",
-    className: mx2("flex flex-col items-center gap-2 plb-2")
+    className: mx2("flex flex-col items-center gap-2", messageCell)
   }, /* @__PURE__ */ React2.createElement(Avatar.Frame, null, /* @__PURE__ */ React2.createElement(Avatar.Fallback, {
     text: authorAvatarProps?.emoji || hexToEmoji(authorId ?? "0")
   }), authorImgSrc && /* @__PURE__ */ React2.createElement(Avatar.Image, {
@@ -98,7 +99,7 @@ var MessageMeta = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorN
     className: "is-px grow surface-separator"
   })), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
-    className: "plb-1 min-is-0"
+    className: messageCell
   }, children)));
 });
 var DefaultMessageBlock = ({ block, onBlockDelete }) => {
@@ -151,63 +152,65 @@ var Message = (props) => {
     onBlockDelete: onDelete && (() => onDelete(id, i))
   }))));
 };
-var keyBindings = ({ onSend, onClear }) => [
-  {
-    key: "Enter",
-    run: () => {
-      if (onSend) {
-        onSend();
-        return true;
-      } else {
-        return false;
-      }
-    }
-  },
-  {
-    // TODO(burdon): Other key bindings.
-    key: "Meta+Backspace",
-    run: () => {
-      if (onClear) {
-        onClear();
-        return true;
-      } else {
-        return false;
-      }
-    }
-  }
-];
-var MessageTextbox = ({ id, onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, authorAvatarProps, disabled, extensions: _extensions, ...editorProps }) => {
-  const extensions = useMemo(() => {
-    return [
-      _extensions,
-      keymap.of(keyBindings({
-        onSend,
-        onClear
-      })),
-      listener({
-        onFocus: (focusing) => {
-          if (focusing) {
-            onEditorFocus?.();
+var MessageTextbox = /* @__PURE__ */ forwardRef2(({ onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, authorAvatarProps, disabled, extensions: _extensions, ...editorProps }, forwardedRef) => {
+  const extensions = useMemo(() => [
+    ..._extensions ?? [],
+    keymap.of([
+      {
+        key: "Enter",
+        run: () => {
+          if (onSend) {
+            onSend();
+            return true;
+          } else {
+            return false;
           }
         }
-      })
-    ].filter(isNotFalsy);
-  }, [
-    _extensions
+      },
+      {
+        key: "Meta+Backspace",
+        run: () => {
+          if (onClear) {
+            onClear();
+            return true;
+          } else {
+            return false;
+          }
+        }
+      }
+    ]),
+    listener({
+      onFocus: (focused) => {
+        if (focused) {
+          onEditorFocus?.();
+        }
+      }
+    })
+  ], [
+    _extensions,
+    onSend,
+    onClear,
+    onEditorFocus
   ]);
   return /* @__PURE__ */ React2.createElement(MessageMeta, {
-    id,
+    id: editorProps.model.id,
     authorId,
     authorName,
     authorImgSrc,
     authorAvatarProps,
     continues: false
   }, /* @__PURE__ */ React2.createElement(TextEditor, {
-    ...editorProps,
+    slots: {
+      root: {
+        className: mx2("plb-0.5 mie-1 rounded-sm", focusRing, disabled && "opacity-50")
+      }
+    },
+    readonly: disabled,
     extensions,
-    className: mx2("plb-0.5 mie-1 rounded-sm", focusRing, disabled && "opacity-50")
+    ...editorProps,
+    ref: forwardedRef
   }));
-};
+});
 export {
   Message,
   MessageMeta,

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/translations.ts", "../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'plugin name': 'Threads',\n        'thread title placeholder': 'New thread',\n        'thread title label': 'Title',\n        'delete thread label': 'Delete',\n        'create thread label': 'Create thread',\n        'message placeholder': 'Enter message...',\n        'comment placeholder': 'Enter comment...',\n        'settings standalone label': 'Enable standalone thread creation',\n        'anonymous label': 'Anonymous',\n        'enter to send message': 'Enter to add ⏎',\n      },\n    },\n  },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ArrowBendLeftDown, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs border-be plb-1.5 attention attention-within attention-current [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n  ({ classNames, children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='grid place-items-end pie-3.5 fg-description'>\n          <ArrowBendLeftDown />\n        </div>\n        <p\n          role='heading'\n          data-testid='thread.heading'\n          {...props}\n          className={mx(\n            'fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]',\n            detached && 'line-through decoration-1',\n          )}\n          ref={forwardedRef}\n        >\n          {children}\n        </p>\n      </>\n    );\n  },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n  activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx('col-start-2 grid grid-cols-[min-content_1fr_max-content] text-xs fg-description', classNames)}\n        ref={forwardedRef}\n      >\n        <Spinner\n          weight='bold'\n          data-visible={activity ? 'show' : 'hide'}\n          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n        />\n        <span className='truncate min-is-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end pie-1', hoverableControlItem)}>{t('enter to send message')}</span>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { X } from '@phosphor-icons/react';\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, type FC, forwardRef, useMemo } from 'react';\n\n// TODO(burdon): Remove dep.\nimport { Avatar, Button, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { type TextEditorProps, keymap, listener, TextEditor } from '@dxos/react-ui-editor';\nimport {\n  focusRing,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\nimport { safeParseJson, hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nexport type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  MessageMetadata &\n  Partial<{ continues: boolean }>;\n\nexport const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(\n  (\n    { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    return (\n      <Avatar.Root size={avatarSize} hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className={mx('flex flex-col items-center gap-2 plb-2')}>\n            <Avatar.Frame>\n              <Avatar.Fallback text={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')} />\n              {authorImgSrc && <Avatar.Image href={authorImgSrc} />}\n            </Avatar.Frame>\n            {continues && <div role='none' className='is-px grow surface-separator' />}\n          </div>\n          <div role='none' className='plb-1 min-is-0'>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageBlockProps<BlockValue> = {\n  block: MessageEntityBlock<BlockValue>;\n  authorId?: string;\n  onBlockDelete?: () => void;\n};\n\nconst DefaultMessageBlock = ({ block, onBlockDelete }: MessageBlockProps<{ data?: any; text?: string }>) => {\n  const contentWidth = onBlockDelete ? 'col-span-2' : 'col-span-3';\n  return (\n    <div\n      role='none'\n      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}\n    >\n      {block.data ? (\n        <pre className={mx('font-mono max-is-full overflow-x-auto', contentWidth)}>\n          <code>{JSON.stringify(safeParseJson(block.data), undefined, 2)}</code>\n        </pre>\n      ) : (\n        <p className={contentWidth}>{block.text ?? ''}</p>\n      )}\n      {onBlockDelete && (\n        <Button\n          variant='ghost'\n          classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}\n          onClick={() => onBlockDelete()}\n        >\n          <X />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type MessageProps<BlockValue> = MessageEntity<BlockValue> & {\n  onDelete?: (messageId: string, blockIndex: number) => void;\n  MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;\n};\n\nexport const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {\n  const { id, authorName, onDelete, blocks, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;\n  const { t, dtLocale } = useTranslation(translationKey);\n  const firstBlock = blocks[0];\n  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : undefined;\n\n  return (\n    <MessageMeta {...metaProps} id={id} continues>\n      <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>\n        <Avatar.Label classNames={['truncate text-sm font-medium', !authorName && 'fg-description']}>\n          {authorName ?? t('anonymous label')}\n        </Avatar.Label>\n        <time className='fg-description text-xs pbs-0.5' dateTime={dt?.toISOString()}>\n          {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n        </time>\n      </p>\n      <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>\n        {blocks.map((block, i) => (\n          <MessageBlockComponent\n            key={i}\n            block={block}\n            authorId={metaProps.authorId}\n            onBlockDelete={onDelete && (() => onDelete(id, i))}\n          />\n        ))}\n      </div>\n    </MessageMeta>\n  );\n};\n\nexport type MessageTextboxProps = {\n  disabled?: boolean;\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n} & MessageMetadata &\n  TextEditorProps;\n\nconst keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | 'onClear'>) => [\n  {\n    key: 'Enter',\n    run: () => {\n      if (onSend) {\n        onSend();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n  {\n    // TODO(burdon): Other key bindings.\n    key: 'Meta+Backspace',\n    run: () => {\n      if (onClear) {\n        onClear();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n];\n\nexport const MessageTextbox = ({\n  id,\n  onSend,\n  onClear,\n  onEditorFocus,\n  authorId,\n  authorName,\n  authorImgSrc,\n  authorAvatarProps,\n  disabled,\n  extensions: _extensions,\n  ...editorProps\n}: MessageTextboxProps) => {\n  const extensions = useMemo<TextEditorProps['extensions']>(() => {\n    return [\n      _extensions,\n      keymap.of(keyBindings({ onSend, onClear })),\n      listener({\n        onFocus: (focusing) => {\n          if (focusing) {\n            onEditorFocus?.();\n          }\n        },\n      }),\n    ].filter(isNotFalsy);\n  }, [_extensions]);\n\n  return (\n    <MessageMeta {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>\n      <TextEditor\n        {...editorProps}\n        extensions={extensions}\n        className={mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}\n      />\n    </MessageMeta>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["translationKey", "ArrowBendLeftDown", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "ArrowBendLeftDown", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "X", "formatDistanceToNow", "React", "forwardRef", "useMemo", "Avatar", "Button", "useTranslation", "keymap", "listener", "TextEditor", "focusRing", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "safeParseJson", "hexToEmoji", "hexToHue", "isNotFalsy", "avatarSize", "MessageMeta", "forwardRef", "authorImgSrc", "authorId", "authorName", "authorAvatarProps", "continues", "children", "classNames", "rootProps", "forwardedRef", "React", "Avatar", "Root", "size", "hue", "hexToHue", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "text", "emoji", "hexToEmoji", "Image", "href", "DefaultMessageBlock", "block", "onBlockDelete", "contentWidth", "hoverableControls", "hoverableFocusedWithinControls", "data", "pre", "code", "JSON", "stringify", "safeParseJson", "undefined", "p", "Button", "variant", "hoverableControlItem", "onClick", "X", "Message", "props", "id", "onDelete", "blocks", "MessageBlockComponent", "metaProps", "t", "dtLocale", "useTranslation", "translationKey", "firstBlock", "dt", "timestamp", "Date", "Label", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "map", "i", "key", "keyBindings", "onSend", "onClear", "run", "MessageTextbox", "onEditorFocus", "disabled", "extensions", "_extensions", "editorProps", "useMemo", "keymap", "of", "listener", "onFocus", "focusing", "filter", "isNotFalsy", "TextEditor", "focusRing"]
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'plugin name': 'Threads',\n        'thread title placeholder': 'New thread',\n        'thread title label': 'Title',\n        'delete thread label': 'Delete',\n        'create thread label': 'Create thread',\n        'message placeholder': 'Enter message...',\n        'comment placeholder': 'Enter comment...',\n        'settings standalone label': 'Enable standalone thread creation',\n        'anonymous label': 'Anonymous',\n        'enter to send message': 'Enter to add ⏎',\n      },\n    },\n  },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ArrowBendLeftDown, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs border-be plb-1.5 attention attention-within attention-current [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n  ({ classNames, children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='grid place-items-end pie-3.5 fg-description'>\n          <ArrowBendLeftDown />\n        </div>\n        <p\n          role='heading'\n          data-testid='thread.heading'\n          {...props}\n          className={mx(\n            'fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]',\n            detached && 'line-through decoration-1',\n          )}\n          ref={forwardedRef}\n        >\n          {children}\n        </p>\n      </>\n    );\n  },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n  activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx('col-start-2 grid grid-cols-[min-content_1fr_max-content] text-xs fg-description', classNames)}\n        ref={forwardedRef}\n      >\n        <Spinner\n          weight='bold'\n          data-visible={activity ? 'show' : 'hide'}\n          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n        />\n        <span className='truncate min-is-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end pie-1', hoverableControlItem)}>{t('enter to send message')}</span>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { X } from '@phosphor-icons/react';\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, type FC, forwardRef, useMemo } from 'react';\n\nimport { Avatar, Button, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { TextEditor, type TextEditorProps, keymap, type EditorView, listener } from '@dxos/react-ui-editor';\nimport {\n  focusRing,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\nimport { safeParseJson, hexToEmoji, hexToHue } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\nconst messageCell = 'plb-1 min-is-0';\n\nexport type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  MessageMetadata &\n  Partial<{ continues: boolean }>;\n\nexport const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(\n  (\n    { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    return (\n      <Avatar.Root size={avatarSize} hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className={mx('flex flex-col items-center gap-2', messageCell)}>\n            <Avatar.Frame>\n              <Avatar.Fallback text={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')} />\n              {authorImgSrc && <Avatar.Image href={authorImgSrc} />}\n            </Avatar.Frame>\n            {continues && <div role='none' className='is-px grow surface-separator' />}\n          </div>\n          <div role='none' className={messageCell}>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageBlockProps<BlockValue> = {\n  block: MessageEntityBlock<BlockValue>;\n  authorId?: string;\n  onBlockDelete?: () => void;\n};\n\nconst DefaultMessageBlock = ({ block, onBlockDelete }: MessageBlockProps<{ data?: any; text?: string }>) => {\n  const contentWidth = onBlockDelete ? 'col-span-2' : 'col-span-3';\n  return (\n    <div\n      role='none'\n      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}\n    >\n      {block.data ? (\n        <pre className={mx('font-mono max-is-full overflow-x-auto', contentWidth)}>\n          <code>{JSON.stringify(safeParseJson(block.data), undefined, 2)}</code>\n        </pre>\n      ) : (\n        <p className={contentWidth}>{block.text ?? ''}</p>\n      )}\n      {onBlockDelete && (\n        <Button\n          variant='ghost'\n          classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}\n          onClick={() => onBlockDelete()}\n        >\n          <X />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type MessageProps<BlockValue> = MessageEntity<BlockValue> & {\n  onDelete?: (messageId: string, blockIndex: number) => void;\n  MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;\n};\n\nexport const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {\n  const { id, authorName, onDelete, blocks, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;\n  const { t, dtLocale } = useTranslation(translationKey);\n  const firstBlock = blocks[0];\n  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : undefined;\n\n  return (\n    <MessageMeta {...metaProps} id={id} continues>\n      <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>\n        <Avatar.Label classNames={['truncate text-sm font-medium', !authorName && 'fg-description']}>\n          {authorName ?? t('anonymous label')}\n        </Avatar.Label>\n        <time className='fg-description text-xs pbs-0.5' dateTime={dt?.toISOString()}>\n          {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n        </time>\n      </p>\n      <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>\n        {blocks.map((block, i) => (\n          <MessageBlockComponent\n            key={i}\n            block={block}\n            authorId={metaProps.authorId}\n            onBlockDelete={onDelete && (() => onDelete(id, i))}\n          />\n        ))}\n      </div>\n    </MessageMeta>\n  );\n};\n\nexport type MessageTextboxProps = {\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n  disabled?: boolean;\n} & Omit<MessageMetadata, 'id'> &\n  TextEditorProps;\n\nexport const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(\n  (\n    {\n      onSend,\n      onClear,\n      onEditorFocus,\n      authorId,\n      authorName,\n      authorImgSrc,\n      authorAvatarProps,\n      disabled,\n      extensions: _extensions,\n      ...editorProps\n    },\n    forwardedRef,\n  ) => {\n    const extensions = useMemo(\n      () => [\n        ...(_extensions ?? []),\n        keymap.of([\n          {\n            key: 'Enter',\n            run: () => {\n              if (onSend) {\n                onSend();\n                return true;\n              } else {\n                return false;\n              }\n            },\n          },\n          {\n            key: 'Meta+Backspace',\n            run: () => {\n              if (onClear) {\n                onClear();\n                return true;\n              } else {\n                return false;\n              }\n            },\n          },\n        ]),\n        listener({\n          onFocus: (focused) => {\n            if (focused) {\n              onEditorFocus?.();\n            }\n          },\n        }),\n      ],\n      [_extensions, onSend, onClear, onEditorFocus],\n    );\n\n    return (\n      <MessageMeta\n        {...{ id: editorProps.model.id, authorId, authorName, authorImgSrc, authorAvatarProps }}\n        continues={false}\n      >\n        {/* TODO(burdon): Change to hook. */}\n        <TextEditor\n          slots={{ root: { className: mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50') } }}\n          readonly={disabled}\n          extensions={extensions}\n          {...editorProps}\n          ref={forwardedRef}\n        />\n      </MessageMeta>\n    );\n  },\n);\n"],
+  "mappings": "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",
+  "names": ["translationKey", "ArrowBendLeftDown", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "ArrowBendLeftDown", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "X", "formatDistanceToNow", "React", "forwardRef", "useMemo", "Avatar", "Button", "useTranslation", "TextEditor", "keymap", "listener", "focusRing", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "safeParseJson", "hexToEmoji", "hexToHue", "avatarSize", "messageCell", "MessageMeta", "forwardRef", "authorImgSrc", "authorId", "authorName", "authorAvatarProps", "continues", "children", "classNames", "rootProps", "forwardedRef", "React", "Avatar", "Root", "size", "hue", "hexToHue", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "text", "emoji", "hexToEmoji", "Image", "href", "DefaultMessageBlock", "block", "onBlockDelete", "contentWidth", "hoverableControls", "hoverableFocusedWithinControls", "data", "pre", "code", "JSON", "stringify", "safeParseJson", "undefined", "p", "Button", "variant", "hoverableControlItem", "onClick", "X", "Message", "props", "id", "onDelete", "blocks", "MessageBlockComponent", "metaProps", "t", "dtLocale", "useTranslation", "translationKey", "firstBlock", "dt", "timestamp", "Date", "Label", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "map", "i", "key", "MessageTextbox", "onSend", "onClear", "onEditorFocus", "disabled", "extensions", "_extensions", "editorProps", "useMemo", "keymap", "of", "run", "listener", "onFocus", "focused", "model", "TextEditor", "slots", "root", "focusRing", "readonly"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2281,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":9343,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":472,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":19971,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":474,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":1115,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":877,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16824},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Message","MessageMeta","MessageTextbox","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2487},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":5333},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":8779}}}
+{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2281,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":9343,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":472,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":20678,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":474,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":1115,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":877,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":17219},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Message","MessageMeta","MessageTextbox","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2487},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":5458},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":8904}}}

package/dist/types/src/Message/Message.d.ts

@@ -1,6 +1,6 @@
 import React, { type ComponentPropsWithRef, type FC } from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { type TextEditorProps } from '@dxos/react-ui-editor';
+import { type TextEditorProps, type EditorView } from '@dxos/react-ui-editor';
 import { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';
 export type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> & MessageMetadata & Partial<{
     continues: boolean;
@@ -17,10 +17,15 @@ export type MessageProps<BlockValue> = MessageEntity<BlockValue> & {
 };
 export declare const Message: <BlockValue>(props: MessageProps<BlockValue>) => JSX.Element;
 export type MessageTextboxProps = {
-    disabled?: boolean;
     onSend?: () => void;
     onClear?: () => void;
     onEditorFocus?: () => void;
-} & MessageMetadata & TextEditorProps;
-export declare const MessageTextbox: ({ id, onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, authorAvatarProps, disabled, extensions: _extensions, ...editorProps }: MessageTextboxProps) => JSX.Element;
+    disabled?: boolean;
+} & Omit<MessageMetadata, 'id'> & TextEditorProps;
+export declare const MessageTextbox: React.ForwardRefExoticComponent<{
+    onSend?: (() => void) | undefined;
+    onClear?: (() => void) | undefined;
+    onEditorFocus?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+} & Omit<MessageMetadata, "id"> & TextEditorProps & React.RefAttributes<EditorView>>;
 //# sourceMappingURL=Message.d.ts.map

package/dist/types/src/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAkB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AACtF,OAAO,EAAE,KAAK,eAAe,EAAgC,MAAM,uBAAuB,CAAC;AAW3F,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAI7F,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAC1E,eAAe,GACf,OAAO,CAAC;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAElC,eAAO,MAAM,WAAW,qnJA4BvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,UAAU,IAAI;IAC1C,KAAK,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AA6BF,MAAM,MAAM,YAAY,CAAC,UAAU,IAAI,aAAa,CAAC,UAAU,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,qBAAqB,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,OAAO,8DA4BnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,eAAe,GACjB,eAAe,CAAC;AA4BlB,eAAO,MAAM,cAAc,qJAYxB,mBAAmB,gBAwBrB,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAE,KAAK,EAAE,EAAuB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAkB,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AACtF,OAAO,EAAc,KAAK,eAAe,EAAU,KAAK,UAAU,EAAY,MAAM,uBAAuB,CAAC;AAW5G,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAK7F,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAC1E,eAAe,GACf,OAAO,CAAC;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAElC,eAAO,MAAM,WAAW,qnJA4BvB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,UAAU,IAAI;IAC1C,KAAK,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AA6BF,MAAM,MAAM,YAAY,CAAC,UAAU,IAAI,aAAa,CAAC,UAAU,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,qBAAqB,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,OAAO,8DA4BnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAC7B,eAAe,CAAC;AAElB,eAAO,MAAM,cAAc;oBAPV,IAAI;qBACH,IAAI;2BACE,IAAI;;oFA2E3B,CAAC"}

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

@@ -52,4 +52,10 @@ export declare const Default: {
         text: string;
     };
 };
+export declare const Testing: {
+    args: {
+        text: string;
+        autoCreate: boolean;
+    };
+};
 //# sourceMappingURL=Comments.stories.d.ts.map

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;AAK/C,OAAO,EAOL,KAAK,KAAK,EAIX,MAAM,uBAAuB,CAAC;AAM/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAkE9C,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;AAiHF,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;;;;;;;;;;mBA8He,UAAU;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAME;AAWF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,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;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AA+DxC,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-thread",
-  "version": "0.4.8-main.0602afb",
+  "version": "0.4.8-main.2d8e727",
   "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.8-main.0602afb",
-    "@dxos/react-ui-editor": "0.4.8-main.0602afb",
-    "@dxos/react-ui-theme": "0.4.8-main.0602afb",
-    "@dxos/react-ui-mosaic": "0.4.8-main.0602afb",
-    "@dxos/util": "0.4.8-main.0602afb"
+    "@dxos/react-ui": "0.4.8-main.2d8e727",
+    "@dxos/react-ui-editor": "0.4.8-main.2d8e727",
+    "@dxos/react-ui-theme": "0.4.8-main.2d8e727",
+    "@dxos/util": "0.4.8-main.2d8e727",
+    "@dxos/react-ui-mosaic": "0.4.8-main.2d8e727"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -32,11 +32,11 @@
     "react-dom": "^18.2.0",
     "vite": "^5.1.5",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/echo-schema": "0.4.8-main.0602afb",
-    "@dxos/log": "0.4.8-main.0602afb",
-    "@dxos/random": "0.4.8-main.0602afb",
-    "@dxos/storybook-utils": "0.4.8-main.0602afb",
-    "@dxos/keys": "0.4.8-main.0602afb"
+    "@dxos/keys": "0.4.8-main.2d8e727",
+    "@dxos/echo-schema": "0.4.8-main.2d8e727",
+    "@dxos/log": "0.4.8-main.2d8e727",
+    "@dxos/random": "0.4.8-main.2d8e727",
+    "@dxos/storybook-utils": "0.4.8-main.2d8e727"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/Message/Message.tsx

@@ -6,9 +6,8 @@ import { X } from '@phosphor-icons/react';
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 import React, { type ComponentPropsWithRef, type FC, forwardRef, useMemo } from 'react';
 
-// TODO(burdon): Remove dep.
 import { Avatar, Button, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { type TextEditorProps, keymap, listener, TextEditor } from '@dxos/react-ui-editor';
+import { TextEditor, type TextEditorProps, keymap, type EditorView, listener } from '@dxos/react-ui-editor';
 import {
   focusRing,
   hoverableControlItem,
@@ -16,12 +15,13 @@ import {
   hoverableFocusedWithinControls,
   mx,
 } from '@dxos/react-ui-theme';
-import { safeParseJson, hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';
+import { safeParseJson, hexToEmoji, hexToHue } from '@dxos/util';
 
 import { translationKey } from '../translations';
 import { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';
 
 const avatarSize = 7;
+const messageCell = 'plb-1 min-is-0';
 
 export type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
   MessageMetadata &
@@ -41,14 +41,14 @@ export const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(
           className={mx('grid grid-cols-subgrid col-span-2', classNames)}
           ref={forwardedRef}
         >
-          <div role='none' className={mx('flex flex-col items-center gap-2 plb-2')}>
+          <div role='none' className={mx('flex flex-col items-center gap-2', messageCell)}>
             <Avatar.Frame>
               <Avatar.Fallback text={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')} />
               {authorImgSrc && <Avatar.Image href={authorImgSrc} />}
             </Avatar.Frame>
             {continues && <div role='none' className='is-px grow surface-separator' />}
           </div>
-          <div role='none' className='plb-1 min-is-0'>
+          <div role='none' className={messageCell}>
             {children}
           </div>
         </div>
@@ -126,73 +126,81 @@ export const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {
 };
 
 export type MessageTextboxProps = {
-  disabled?: boolean;
   onSend?: () => void;
   onClear?: () => void;
   onEditorFocus?: () => void;
-} & MessageMetadata &
+  disabled?: boolean;
+} & Omit<MessageMetadata, 'id'> &
   TextEditorProps;
 
-const keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | 'onClear'>) => [
-  {
-    key: 'Enter',
-    run: () => {
-      if (onSend) {
-        onSend();
-        return true;
-      } else {
-        return false;
-      }
-    },
-  },
-  {
-    // TODO(burdon): Other key bindings.
-    key: 'Meta+Backspace',
-    run: () => {
-      if (onClear) {
-        onClear();
-        return true;
-      } else {
-        return false;
-      }
+export const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(
+  (
+    {
+      onSend,
+      onClear,
+      onEditorFocus,
+      authorId,
+      authorName,
+      authorImgSrc,
+      authorAvatarProps,
+      disabled,
+      extensions: _extensions,
+      ...editorProps
     },
-  },
-];
-
-export const MessageTextbox = ({
-  id,
-  onSend,
-  onClear,
-  onEditorFocus,
-  authorId,
-  authorName,
-  authorImgSrc,
-  authorAvatarProps,
-  disabled,
-  extensions: _extensions,
-  ...editorProps
-}: MessageTextboxProps) => {
-  const extensions = useMemo<TextEditorProps['extensions']>(() => {
-    return [
-      _extensions,
-      keymap.of(keyBindings({ onSend, onClear })),
-      listener({
-        onFocus: (focusing) => {
-          if (focusing) {
-            onEditorFocus?.();
-          }
-        },
-      }),
-    ].filter(isNotFalsy);
-  }, [_extensions]);
+    forwardedRef,
+  ) => {
+    const extensions = useMemo(
+      () => [
+        ...(_extensions ?? []),
+        keymap.of([
+          {
+            key: 'Enter',
+            run: () => {
+              if (onSend) {
+                onSend();
+                return true;
+              } else {
+                return false;
+              }
+            },
+          },
+          {
+            key: 'Meta+Backspace',
+            run: () => {
+              if (onClear) {
+                onClear();
+                return true;
+              } else {
+                return false;
+              }
+            },
+          },
+        ]),
+        listener({
+          onFocus: (focused) => {
+            if (focused) {
+              onEditorFocus?.();
+            }
+          },
+        }),
+      ],
+      [_extensions, onSend, onClear, onEditorFocus],
+    );
 
-  return (
-    <MessageMeta {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>
-      <TextEditor
-        {...editorProps}
-        extensions={extensions}
-        className={mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}
-      />
-    </MessageMeta>
-  );
-};
+    return (
+      <MessageMeta
+        {...{ id: editorProps.model.id, authorId, authorName, authorImgSrc, authorAvatarProps }}
+        continues={false}
+      >
+        {/* TODO(burdon): Change to hook. */}
+        <TextEditor
+          slots={{ root: { className: mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50') } }}
+          readonly={disabled}
+          extensions={extensions}
+          {...editorProps}
+          ref={forwardedRef}
+        />
+      </MessageMeta>
+    );
+  },
+);

package/src/Thread/Comments.stories.tsx

@@ -7,23 +7,22 @@ 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 { TextObject } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { Button, useThemeContext } from '@dxos/react-ui';
+import { Button } from '@dxos/react-ui';
 import {
+  MarkdownEditor,
   comments,
   type CommentsOptions,
   focusComment,
   useComments,
   type Comment,
   type Range,
-  useTextEditor,
-  createBasicExtensions,
-  createThemeExtensions,
-  automerge,
-  useDocAccessor,
+  useTextModel,
+  type EditorView,
+  TextEditor,
 } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/storybook-utils';
 
@@ -59,39 +58,37 @@ const Editor: FC<{
   onUpdateComment,
   onSelectComment,
 }) => {
+  const model = useTextModel({ text: item.text });
+  const view = useRef<EditorView>(null);
   const [selected, setSelected] = useState<string>();
-
-  const { themeMode } = useThemeContext();
-  const { doc, accessor } = useDocAccessor(item.text);
-  const { parentRef, view } = useTextEditor(
-    () => ({
-      id,
-      doc,
-      extensions: [
-        createBasicExtensions(),
-        createThemeExtensions({ themeMode }),
-        automerge(accessor),
-        comments({
-          onCreate: onCreateComment,
-          onDelete: onDeleteComment,
-          onUpdate: onUpdateComment,
-          onSelect: onSelectComment,
-        }),
-      ],
-    }),
-    [doc, accessor, themeMode],
-  );
-  useComments(view, id, commentRanges);
   useEffect(() => {
-    if (view && !view.hasFocus && selectedValue !== selected) {
+    if (!view.current?.hasFocus && selectedValue !== selected) {
       setSelected(selectedValue);
       if (selectedValue) {
-        focusComment(view, selectedValue);
+        focusComment(view.current!, selectedValue);
       }
     }
-  }, [view, selected, commentRanges, selectedValue]);
+  }, [selected, commentRanges, selectedValue]);
+
+  useComments(view.current, id, commentRanges);
+
+  const extensions = useMemo(() => {
+    return [
+      comments({
+        onCreate: onCreateComment,
+        onDelete: onDeleteComment,
+        onUpdate: onUpdateComment,
+        onSelect: onSelectComment,
+      }),
+    ];
+  }, []);
+
+  if (!model) {
+    return null;
+  }
 
-  return <div ref={parentRef} />;
+  // TODO(burdon): Highlight currently selected comment.
+  return <MarkdownEditor ref={view} model={model} extensions={extensions} />;
 };
 
 //
@@ -107,22 +104,8 @@ type StoryCommentThread = {
 };
 
 const StoryMessageBlock = (props: MessageBlockProps<{ text: TextObject }>) => {
-  const { themeMode } = useThemeContext();
-  const { doc, accessor } = useDocAccessor(props.block.text);
-  const { parentRef } = useTextEditor(
-    () => ({
-      doc,
-      extensions: [
-        //
-        createBasicExtensions(),
-        createThemeExtensions({ themeMode }),
-        automerge(accessor),
-      ],
-    }),
-    [doc, accessor, themeMode],
-  );
-
-  return <div ref={parentRef} className='col-span-3' />;
+  const model = useTextModel({ text: props.block.text });
+  return model ? <TextEditor model={model} slots={{ root: { className: 'col-span-3' } }} /> : null;
 };
 
 const StoryThread: FC<{
@@ -131,32 +114,24 @@ const StoryThread: FC<{
   onSelect: () => void;
   onResolve: () => void;
 }> = ({ thread, selected, onSelect, onResolve }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { themeMode } = useThemeContext();
+  const [autoFocus, setAutoFocus] = useState(false);
   const [item, setItem] = useState({ text: new TextObject() });
-  const { doc, accessor } = useDocAccessor(item.text);
-  const extensions = useMemo(
-    () => [
-      createBasicExtensions({ placeholder: 'Enter comment' }),
-      createThemeExtensions({ themeMode }),
-      automerge(accessor),
-    ],
-    [themeMode, accessor],
-  );
+  const model = useTextModel({ text: item.text });
+  const editorRef = useRef<EditorView>(null);
+
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  const [autoFocus, setAutoFocus] = useState(false);
   useEffect(() => {
     if (selected) {
       containerRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' });
       if (thread.messages.length === 0) {
-        // TODO(burdon): Causes thread to be reselected when loses focus.
         setAutoFocus(true);
       }
     }
   }, [selected]);
 
   const handleCreateMessage = () => {
-    const text = getTextContent(item.text)?.trim();
+    const text = model?.text().trim();
     if (text?.length) {
       thread.messages.push({
         id: item.text.id,
@@ -168,6 +143,10 @@ const StoryThread: FC<{
     }
   };
 
+  if (!model) {
+    return null;
+  }
+
   return (
     <Thread current={selected} onClickCapture={onSelect}>
       <div className='col-start-2 flex gap-1 text-xs fg-description'>
@@ -176,7 +155,6 @@ const StoryThread: FC<{
         <span className='grow' />
         {!thread.cursor && <Trash />}
       </div>
-
       <ThreadHeading>
         {thread.range?.from} &ndash; {thread.range?.to}
       </ThreadHeading>
@@ -187,12 +165,11 @@ const StoryThread: FC<{
 
       <div ref={containerRef} className='contents'>
         <MessageTextbox
-          id={item.text.id}
-          doc={doc}
           authorId={authorId}
+          ref={editorRef}
           autoFocus={autoFocus}
-          extensions={extensions}
           onEditorFocus={onSelect}
+          model={model}
           onSend={handleCreateMessage}
         />
         <ThreadFooter />
@@ -278,7 +255,7 @@ const Story = ({ text, autoCreate }: StoryProps) => {
           : [],
       },
     ]);
-
+    setSelected(id); // TODO(burdon): Not required.
     return id;
   };
 
@@ -324,10 +301,9 @@ const Story = ({ text, autoCreate }: StoryProps) => {
       }),
     );
 
-    setSelected(current);
+    setSelected(current ?? closest);
   };
 
-  // TODO(burdon): Focus switches to other thread.
   const handleSelectThread = (id: string) => {
     setSelected(id);
   };
@@ -385,3 +361,10 @@ export const Default = {
     text: document,
   },
 };
+
+export const Testing = {
+  args: {
+    text: document,
+    autoCreate: true,
+  },
+};

package/src/Thread/Thread.stories.tsx

@@ -3,11 +3,11 @@
 //
 
 import '@dxosTheme';
-import React, { useMemo, useState } from 'react';
 
-import { setTextContent, TextObject } from '@dxos/echo-schema';
+import React, { useState } from 'react';
+
 import { PublicKey } from '@dxos/keys';
-import { automerge, createBasicExtensions, createThemeExtensions, useDocAccessor } from '@dxos/react-ui-editor';
+import { useInMemoryTextModel } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Thread, ThreadFooter } from './Thread';
@@ -44,16 +44,14 @@ const Story = () => {
     },
   ]);
 
-  const [item] = useState(new TextObject());
-  const { accessor } = useDocAccessor(item);
-  const extensions = useMemo(() => [createBasicExtensions(), createThemeExtensions(), automerge(accessor)], [accessor]);
+  const nextMessageModel = useInMemoryTextModel({ id: 't1__next' });
 
   // 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, '');
+      nextMessageModel.setContent('');
       setPending(false);
     }, 2_000);
   };
@@ -63,13 +61,7 @@ const Story = () => {
       {messages.map((message) => (
         <Message key={message.id} {...message} />
       ))}
-      <MessageTextbox
-        id={item.id}
-        authorId={identityKey1.toHex()}
-        disabled={pending}
-        extensions={extensions}
-        onSend={handleSend}
-      />
+      <MessageTextbox disabled={pending} authorId={identityKey1.toHex()} onSend={handleSend} model={nextMessageModel} />
       <ThreadFooter activity>Processing...</ThreadFooter>
     </Thread>
   );