@dxos/react-ui-thread 0.4.4 → 0.4.5-main.414d832
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +5 -1
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/Message/Message.d.ts +5 -3
- package/dist/types/src/Message/Message.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/Message/Message.tsx +8 -2
- package/src/Thread/Comments.stories.tsx +4 -4
|
@@ -153,7 +153,7 @@ var Message = (props) => {
|
|
|
153
153
|
onBlockDelete: onDelete && (() => onDelete(id, i))
|
|
154
154
|
}))));
|
|
155
155
|
};
|
|
156
|
-
var MessageTextbox = /* @__PURE__ */ forwardRef2(({ onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, disabled, extensions: _extensions, ...editorProps }, forwardedRef) => {
|
|
156
|
+
var MessageTextbox = /* @__PURE__ */ forwardRef2(({ onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, disabled, autoFocusRef, extensions: _extensions, ...editorProps }, forwardedRef) => {
|
|
157
157
|
const extensions = useMemo(() => [
|
|
158
158
|
..._extensions ?? [],
|
|
159
159
|
keymap.of([
|
|
@@ -183,6 +183,9 @@ var MessageTextbox = /* @__PURE__ */ forwardRef2(({ onSend, onClear, onEditorFoc
|
|
|
183
183
|
listener({
|
|
184
184
|
onFocus: (focused) => {
|
|
185
185
|
if (focused) {
|
|
186
|
+
if (autoFocusRef) {
|
|
187
|
+
autoFocusRef.current = false;
|
|
188
|
+
}
|
|
186
189
|
onEditorFocus?.();
|
|
187
190
|
}
|
|
188
191
|
}
|
|
@@ -208,6 +211,7 @@ var MessageTextbox = /* @__PURE__ */ forwardRef2(({ onSend, onClear, onEditorFoc
|
|
|
208
211
|
},
|
|
209
212
|
readonly: disabled,
|
|
210
213
|
extensions,
|
|
214
|
+
autoFocus: autoFocusRef?.current ?? false,
|
|
211
215
|
...editorProps,
|
|
212
216
|
ref: forwardedRef
|
|
213
217
|
}));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/translations.ts", "../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
|
|
4
|
-
"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, useJdenticonHref, 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 } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\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, authorStatus, authorId, authorName, continues = true, children, classNames, ...rootProps },\n forwardedRef,\n ) => {\n const jdenticon = useJdenticonHref(authorId ?? '', avatarSize);\n\n return (\n <Avatar.Root status={authorStatus ?? 'inactive'} size={avatarSize}>\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={'flex flex-col items-center gap-2 ' + messageCell}>\n <Avatar.Frame>\n <Avatar.Fallback href={jdenticon} />\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 { t, dtLocale } = useTranslation(translationKey);\n\n const { authorName, onDelete, blocks, id, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;\n\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' | 'authorStatus'> &\n TextEditorProps;\n\nexport const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(\n (\n {\n onSend,\n onClear,\n onEditorFocus,\n authorId,\n authorName,\n authorImgSrc,\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 }}\n authorStatus='active'\n continues={false}\n >\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"],
|
|
5
|
-
"mappings": ";AAIO,IAAMA,iBAAiB;AAE9B,IAAA,uBAAe;EACb;IACE,SAAS;MACP,CAACA,cAAAA,GAAiB;QAChB,eAAe;QACf,4BAA4B;QAC5B,sBAAsB;QACtB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,6BAA6B;QAC7B,mBAAmB;QACnB,yBAAyB;MAC3B;IACF;EACF;;;;AClBF,SAASC,mBAAmBC,eAAe;AAC3C,OAAOC,SAA0DC,kBAAkB;AAEnF,SAA+BC,sBAAsB;AACrD,SAASC,sBAAsBC,gCAAgCC,UAAU;AAQlE,IAAMC,eAAe;AAErB,IAAMC,SAASC,2BACpB,CAAC,EAAEC,SAASC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AAC5C,SACE,sBAAA,cAACC,OAAAA;IACCC,MAAK;IACLC,eAAY;IACX,GAAIP,WAAW;MAAE,gBAAgB,OAAOA,YAAY,WAAWA,UAAU;IAAW;IACpF,GAAGG;IACJK,WAAWC,GACTZ,cACAa,gCACA,kKACAR,UAAAA;IAEFS,KAAKP;KAEJH,QAAAA;AAGP,CAAA;AAKK,IAAMW,gBAAgBb,2BAC3B,CAAC,EAAEG,YAAYD,UAAUY,UAAU,GAAGV,MAAAA,GAASC,iBAAAA;AAC7C,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOE,WAAU;KACzB,sBAAA,cAACM,mBAAAA,IAAAA,CAAAA,GAEH,sBAAA,cAACC,KAAAA;IACCT,MAAK;IACLC,eAAY;IACX,GAAGJ;IACJK,WAAWC,GACT,+FACAI,YAAY,2BAAA;IAEdF,KAAKP;KAEJH,QAAAA,CAAAA;AAIT,CAAA;AAOK,IAAMe,eAAejB,2BAC1B,CAAC,EAAEkB,UAAUf,YAAYD,UAAU,GAAGE,MAAAA,GAASC,iBAAAA;AAC7C,QAAM,EAAEc,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,SACE,sBAAA,cAACf,OAAAA;IACE,GAAGF;IACJK,WAAWC,GAAG,mFAAmFP,UAAAA;IACjGS,KAAKP;KAEL,sBAAA,cAACiB,SAAAA;IACCC,QAAO;IACPC,gBAAcN,WAAW,SAAS;IAClCT,WAAU;MAEZ,sBAAA,cAACgB,QAAAA;IAAKhB,WAAU;IAAoBiB,aAAU;KAC3CR,WAAWhB,WAAW,IAAA,GAEzB,sBAAA,cAACuB,QAAAA;IAAKhB,WAAWC,GAAG,kBAAkBiB,oBAAAA;KAAwBR,EAAE,uBAAA,CAAA,CAAA;AAGtE,CAAA;;;ACtFF,SAASS,SAAS;AAClB,SAASC,2BAA2B;AACpC,OAAOC,UAA8CC,cAAAA,
|
|
6
|
-
"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", "useJdenticonHref", "useTranslation", "TextEditor", "keymap", "listener", "focusRing", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "safeParseJson", "avatarSize", "messageCell", "MessageMeta", "forwardRef", "authorImgSrc", "authorStatus", "authorId", "authorName", "continues", "children", "classNames", "rootProps", "forwardedRef", "jdenticon", "useJdenticonHref", "React", "Avatar", "Root", "status", "size", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "href", "Image", "DefaultMessageBlock", "block", "onBlockDelete", "contentWidth", "hoverableControls", "hoverableFocusedWithinControls", "data", "pre", "code", "JSON", "stringify", "safeParseJson", "undefined", "p", "text", "Button", "variant", "hoverableControlItem", "onClick", "X", "Message", "props", "t", "dtLocale", "useTranslation", "translationKey", "onDelete", "blocks", "id", "MessageBlockComponent", "metaProps", "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"]
|
|
4
|
+
"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, type MutableRefObject, useMemo } from 'react';\n\nimport { Avatar, Button, type ThemedClassName, useJdenticonHref, 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 } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\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, authorStatus, authorId, authorName, continues = true, children, classNames, ...rootProps },\n forwardedRef,\n ) => {\n const jdenticon = useJdenticonHref(authorId ?? '', avatarSize);\n\n return (\n <Avatar.Root status={authorStatus ?? 'inactive'} size={avatarSize}>\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={'flex flex-col items-center gap-2 ' + messageCell}>\n <Avatar.Frame>\n <Avatar.Fallback href={jdenticon} />\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 { t, dtLocale } = useTranslation(translationKey);\n\n const { authorName, onDelete, blocks, id, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;\n\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 autoFocusRef?: MutableRefObject<boolean>;\n} & Omit<MessageMetadata, 'id' | 'authorStatus'> &\n Omit<TextEditorProps, 'autoFocus'>;\n\nexport const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(\n (\n {\n onSend,\n onClear,\n onEditorFocus,\n authorId,\n authorName,\n authorImgSrc,\n disabled,\n autoFocusRef,\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 if (autoFocusRef) {\n autoFocusRef.current = false;\n }\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 }}\n authorStatus='active'\n continues={false}\n >\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 autoFocus={autoFocusRef?.current ?? false}\n {...editorProps}\n ref={forwardedRef}\n />\n </MessageMeta>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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", "useJdenticonHref", "useTranslation", "TextEditor", "keymap", "listener", "focusRing", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "safeParseJson", "avatarSize", "messageCell", "MessageMeta", "forwardRef", "authorImgSrc", "authorStatus", "authorId", "authorName", "continues", "children", "classNames", "rootProps", "forwardedRef", "jdenticon", "useJdenticonHref", "React", "Avatar", "Root", "status", "size", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "href", "Image", "DefaultMessageBlock", "block", "onBlockDelete", "contentWidth", "hoverableControls", "hoverableFocusedWithinControls", "data", "pre", "code", "JSON", "stringify", "safeParseJson", "undefined", "p", "text", "Button", "variant", "hoverableControlItem", "onClick", "X", "Message", "props", "t", "dtLocale", "useTranslation", "translationKey", "onDelete", "blocks", "id", "MessageBlockComponent", "metaProps", "firstBlock", "dt", "timestamp", "Date", "Label", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "map", "i", "key", "MessageTextbox", "onSend", "onClear", "onEditorFocus", "disabled", "autoFocusRef", "extensions", "_extensions", "editorProps", "useMemo", "keymap", "of", "run", "listener", "onFocus", "focused", "current", "model", "TextEditor", "slots", "root", "focusRing", "readonly", "autoFocus"]
|
|
7
7
|
}
|
|
@@ -1 +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":
|
|
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":21238,"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":1067,"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":17503},"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":5575},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":9021}}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { type ComponentPropsWithRef, type FC } from 'react';
|
|
1
|
+
import React, { type ComponentPropsWithRef, type FC, type MutableRefObject } from 'react';
|
|
2
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
3
|
import { type TextEditorProps, type EditorView } from '@dxos/react-ui-editor';
|
|
4
4
|
import { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';
|
|
@@ -21,11 +21,13 @@ export type MessageTextboxProps = {
|
|
|
21
21
|
onClear?: () => void;
|
|
22
22
|
onEditorFocus?: () => void;
|
|
23
23
|
disabled?: boolean;
|
|
24
|
-
|
|
24
|
+
autoFocusRef?: MutableRefObject<boolean>;
|
|
25
|
+
} & Omit<MessageMetadata, 'id' | 'authorStatus'> & Omit<TextEditorProps, 'autoFocus'>;
|
|
25
26
|
export declare const MessageTextbox: React.ForwardRefExoticComponent<{
|
|
26
27
|
onSend?: (() => void) | undefined;
|
|
27
28
|
onClear?: (() => void) | undefined;
|
|
28
29
|
onEditorFocus?: (() => void) | undefined;
|
|
29
30
|
disabled?: boolean | undefined;
|
|
30
|
-
|
|
31
|
+
autoFocusRef?: React.MutableRefObject<boolean> | undefined;
|
|
32
|
+
} & Omit<MessageMetadata, "id" | "authorStatus"> & Omit<TextEditorProps, "autoFocus"> & React.RefAttributes<EditorView>>;
|
|
31
33
|
//# sourceMappingURL=Message.d.ts.map
|
|
@@ -1 +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,
|
|
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,EAAc,KAAK,gBAAgB,EAAW,MAAM,OAAO,CAAC;AAE/G,OAAO,EAAkB,KAAK,eAAe,EAAoC,MAAM,gBAAgB,CAAC;AACxG,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;AAM7F,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,qnJA8BvB,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,8DA8BnB,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;IACnB,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC1C,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,cAAc,CAAC,GAC9C,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AAErC,eAAO,MAAM,cAAc;oBARV,IAAI;qBACH,IAAI;2BACE,IAAI;;;wHAgF3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-thread",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5-main.414d832",
|
|
4
4
|
"description": "A set of components to use with threads, including comments and messages.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@radix-ui/react-primitive": "^1.0.2",
|
|
20
20
|
"date-fns": "^3.3.1",
|
|
21
|
-
"@dxos/react-ui": "0.4.
|
|
22
|
-
"@dxos/react-ui-
|
|
23
|
-
"@dxos/react-ui-
|
|
24
|
-
"@dxos/react-ui-
|
|
25
|
-
"@dxos/util": "0.4.
|
|
21
|
+
"@dxos/react-ui": "0.4.5-main.414d832",
|
|
22
|
+
"@dxos/react-ui-editor": "0.4.5-main.414d832",
|
|
23
|
+
"@dxos/react-ui-theme": "0.4.5-main.414d832",
|
|
24
|
+
"@dxos/react-ui-mosaic": "0.4.5-main.414d832",
|
|
25
|
+
"@dxos/util": "0.4.5-main.414d832"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"@types/react-dom": "^18.0.6",
|
|
31
31
|
"react": "^18.2.0",
|
|
32
32
|
"react-dom": "^18.2.0",
|
|
33
|
-
"vite": "^5.
|
|
33
|
+
"vite": "^5.1.3",
|
|
34
34
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
35
|
-
"@dxos/echo-schema": "0.4.
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
35
|
+
"@dxos/echo-schema": "0.4.5-main.414d832",
|
|
36
|
+
"@dxos/log": "0.4.5-main.414d832",
|
|
37
|
+
"@dxos/keys": "0.4.5-main.414d832",
|
|
38
|
+
"@dxos/random": "0.4.5-main.414d832",
|
|
39
|
+
"@dxos/storybook-utils": "0.4.5-main.414d832"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@phosphor-icons/react": "^2.0.5",
|
package/src/Message/Message.tsx
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
import { X } from '@phosphor-icons/react';
|
|
6
6
|
import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
|
|
7
|
-
import React, { type ComponentPropsWithRef, type FC, forwardRef, useMemo } from 'react';
|
|
7
|
+
import React, { type ComponentPropsWithRef, type FC, forwardRef, type MutableRefObject, useMemo } from 'react';
|
|
8
8
|
|
|
9
9
|
import { Avatar, Button, type ThemedClassName, useJdenticonHref, useTranslation } from '@dxos/react-ui';
|
|
10
10
|
import { TextEditor, type TextEditorProps, keymap, type EditorView, listener } from '@dxos/react-ui-editor';
|
|
@@ -135,8 +135,9 @@ export type MessageTextboxProps = {
|
|
|
135
135
|
onClear?: () => void;
|
|
136
136
|
onEditorFocus?: () => void;
|
|
137
137
|
disabled?: boolean;
|
|
138
|
+
autoFocusRef?: MutableRefObject<boolean>;
|
|
138
139
|
} & Omit<MessageMetadata, 'id' | 'authorStatus'> &
|
|
139
|
-
TextEditorProps
|
|
140
|
+
Omit<TextEditorProps, 'autoFocus'>;
|
|
140
141
|
|
|
141
142
|
export const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(
|
|
142
143
|
(
|
|
@@ -148,6 +149,7 @@ export const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(
|
|
|
148
149
|
authorName,
|
|
149
150
|
authorImgSrc,
|
|
150
151
|
disabled,
|
|
152
|
+
autoFocusRef,
|
|
151
153
|
extensions: _extensions,
|
|
152
154
|
...editorProps
|
|
153
155
|
},
|
|
@@ -183,6 +185,9 @@ export const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(
|
|
|
183
185
|
listener({
|
|
184
186
|
onFocus: (focused) => {
|
|
185
187
|
if (focused) {
|
|
188
|
+
if (autoFocusRef) {
|
|
189
|
+
autoFocusRef.current = false;
|
|
190
|
+
}
|
|
186
191
|
onEditorFocus?.();
|
|
187
192
|
}
|
|
188
193
|
},
|
|
@@ -201,6 +206,7 @@ export const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(
|
|
|
201
206
|
slots={{ root: { className: mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50') } }}
|
|
202
207
|
readonly={disabled}
|
|
203
208
|
extensions={extensions}
|
|
209
|
+
autoFocus={autoFocusRef?.current ?? false}
|
|
204
210
|
{...editorProps}
|
|
205
211
|
ref={forwardedRef}
|
|
206
212
|
/>
|
|
@@ -114,7 +114,7 @@ const StoryThread: FC<{
|
|
|
114
114
|
onSelect: () => void;
|
|
115
115
|
onResolve: () => void;
|
|
116
116
|
}> = ({ thread, selected, onSelect, onResolve }) => {
|
|
117
|
-
const
|
|
117
|
+
const autoFocusRef = useRef(false);
|
|
118
118
|
const [item, setItem] = useState({ text: new TextObject() });
|
|
119
119
|
const model = useTextModel({ text: item.text });
|
|
120
120
|
const editorRef = useRef<EditorView>(null);
|
|
@@ -125,7 +125,7 @@ const StoryThread: FC<{
|
|
|
125
125
|
if (selected) {
|
|
126
126
|
containerRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
127
127
|
if (thread.messages.length === 0) {
|
|
128
|
-
|
|
128
|
+
autoFocusRef.current = true;
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
}, [selected]);
|
|
@@ -139,7 +139,7 @@ const StoryThread: FC<{
|
|
|
139
139
|
blocks: [{ text: item.text, timestamp: new Date().toISOString() }],
|
|
140
140
|
});
|
|
141
141
|
setItem({ text: new TextObject() });
|
|
142
|
-
|
|
142
|
+
autoFocusRef.current = true;
|
|
143
143
|
}
|
|
144
144
|
};
|
|
145
145
|
|
|
@@ -167,7 +167,7 @@ const StoryThread: FC<{
|
|
|
167
167
|
<MessageTextbox
|
|
168
168
|
authorId={authorId}
|
|
169
169
|
ref={editorRef}
|
|
170
|
-
|
|
170
|
+
autoFocusRef={autoFocusRef}
|
|
171
171
|
onEditorFocus={onSelect}
|
|
172
172
|
model={model}
|
|
173
173
|
onSend={handleCreateMessage}
|