@dxos/react-ui-thread 0.4.1-main.2495eb8 → 0.4.1-main.29ad906
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 +6 -8
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/Thread/Thread.d.ts +4 -2
- package/dist/types/src/Thread/Thread.d.ts.map +1 -1
- package/package.json +11 -11
- package/src/Thread/Comments.stories.tsx +2 -2
- package/src/Thread/Thread.tsx +17 -12
|
@@ -35,17 +35,15 @@ var Thread = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...pro
|
|
|
35
35
|
ref: forwardedRef
|
|
36
36
|
}, children);
|
|
37
37
|
});
|
|
38
|
-
var ThreadHeading = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }, forwardedRef) => {
|
|
39
|
-
return /* @__PURE__ */ React.createElement("div", {
|
|
38
|
+
var ThreadHeading = /* @__PURE__ */ forwardRef(({ classNames, children, detached, ...props }, forwardedRef) => {
|
|
39
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
|
|
40
|
+
role: "none",
|
|
41
|
+
className: "grid place-items-end pie-3.5 fg-description"
|
|
42
|
+
}, /* @__PURE__ */ React.createElement(ArrowBendLeftDown, null)), /* @__PURE__ */ React.createElement("p", {
|
|
40
43
|
role: "heading",
|
|
41
44
|
...props,
|
|
42
|
-
className: mx("
|
|
45
|
+
className: mx("fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]", detached && "line-through decoration-1"),
|
|
43
46
|
ref: forwardedRef
|
|
44
|
-
}, /* @__PURE__ */ React.createElement("div", {
|
|
45
|
-
role: "none",
|
|
46
|
-
className: "grid place-items-end pie-3.5 fg-separator"
|
|
47
|
-
}, /* @__PURE__ */ React.createElement(ArrowBendLeftDown, null)), /* @__PURE__ */ React.createElement("p", {
|
|
48
|
-
className: "truncate"
|
|
49
47
|
}, children));
|
|
50
48
|
});
|
|
51
49
|
var ThreadFooter = /* @__PURE__ */ forwardRef(({ activity, classNames, children, ...props }, forwardedRef) => {
|
|
@@ -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, DotsThreeOutline } 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 Thread = forwardRef<HTMLDivElement, ThreadProps>(\n ({ current, children, classNames, ...props }, forwardedRef) => {\n return (\n <div\n role='group'\n {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n {...props}\n className={mx(\n 'is-full place-self-start grid grid-cols-[3rem_1fr] 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 hoverableFocusedWithinControls,\n classNames,\n )}\n ref={forwardedRef}\n >\n {children}\n </div>\n );\n },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>>;\n\nexport const ThreadHeading = forwardRef<HTMLDivElement, ThreadHeadingProps>(\n ({ classNames, children, ...props }, forwardedRef) => {\n return (\n <div\n role='heading'\n {...props}\n className={mx('col-span-2 grid grid-cols-subgrid fg-description font-medium', classNames)}\n ref={forwardedRef}\n >\n <div role='none' className='grid place-items-end pie-3.5 fg-separator'>\n <ArrowBendLeftDown />\n </div>\n <p className='truncate'>{children}</p>\n </div>\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 <DotsThreeOutline\n weight='fill'\n data-visible={activity ? 'show' : 'hide'}\n className='is-6 bs-4 invisible data-[visible=show]:visible'\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 } 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 {...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 { onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, disabled, extensions = [], ...editorProps },\n forwardedRef,\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={[\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 {...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,wBAAwB;AACpD,OAAOC,SAA0DC,kBAAkB;AAEnF,SAA+BC,sBAAsB;AACrD,SAASC,sBAAsBC,gCAAgCC,UAAU;AAQlE,IAAMC,SAASC,2BACpB,CAAC,EAAEC,SAASC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AAC5C,SACE,sBAAA,cAACC,OAAAA;IACCC,MAAK;IACJ,GAAIN,WAAW;MAAE,gBAAgB,OAAOA,YAAY,WAAWA,UAAU;IAAW;IACpF,GAAGG;IACJI,WAAWC,GACT,qNACAC,gCACAP,UAAAA;IAEFQ,KAAKN;KAEJH,QAAAA;AAGP,CAAA;AAKK,IAAMU,gBAAgBZ,2BAC3B,CAAC,EAAEG,YAAYD,UAAU,
|
|
6
|
-
"names": ["translationKey", "ArrowBendLeftDown", "DotsThreeOutline", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "ArrowBendLeftDown", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "DotsThreeOutline", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "X", "formatDistanceToNow", "React", "forwardRef", "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", "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", "editorProps", "model", "TextEditor", "slots", "root", "focusRing", "readonly", "keymap", "of", "run", "listener", "onFocus", "focused"]
|
|
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, DotsThreeOutline } 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 Thread = forwardRef<HTMLDivElement, ThreadProps>(\n ({ current, children, classNames, ...props }, forwardedRef) => {\n return (\n <div\n role='group'\n {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n {...props}\n className={mx(\n 'is-full place-self-start grid grid-cols-[3rem_1fr] 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 hoverableFocusedWithinControls,\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 {...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 <DotsThreeOutline\n weight='fill'\n data-visible={activity ? 'show' : 'hide'}\n className='is-6 bs-4 invisible data-[visible=show]:visible'\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 } 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 {...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 { onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, disabled, extensions = [], ...editorProps },\n forwardedRef,\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={[\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 {...editorProps}\n ref={forwardedRef}\n />\n </MessageMeta>\n );\n },\n);\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["translationKey", "ArrowBendLeftDown", "DotsThreeOutline", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "ArrowBendLeftDown", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "DotsThreeOutline", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "X", "formatDistanceToNow", "React", "forwardRef", "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", "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", "editorProps", "model", "TextEditor", "slots", "root", "focusRing", "readonly", "keymap", "of", "run", "listener", "onFocus", "focused"]
|
|
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":
|
|
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":8924,"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":19961,"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":16657},"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","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":2373},"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":5324},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":8640}}}
|
|
@@ -5,8 +5,10 @@ export type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> & Thread
|
|
|
5
5
|
current?: boolean | ComponentProps<'div'>['aria-current'];
|
|
6
6
|
};
|
|
7
7
|
export declare const Thread: React.ForwardRefExoticComponent<Pick<ThreadProps, "current" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classNames" | keyof ThreadEntity> & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
-
export type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'
|
|
9
|
-
|
|
8
|
+
export type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
|
|
9
|
+
detached?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export declare const ThreadHeading: React.ForwardRefExoticComponent<Pick<ThreadHeadingProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classNames" | "detached"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
10
12
|
export type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
|
|
11
13
|
activity?: boolean;
|
|
12
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAItE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GACrE,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,MAAM,knJAkBlB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAItE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GACrE,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,MAAM,knJAkBlB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAExG,eAAO,MAAM,aAAa,2mJAqBzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,omJAqBxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-thread",
|
|
3
|
-
"version": "0.4.1-main.
|
|
3
|
+
"version": "0.4.1-main.29ad906",
|
|
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.1-main.
|
|
22
|
-
"@dxos/react-ui-
|
|
23
|
-
"@dxos/react-ui-
|
|
24
|
-
"@dxos/
|
|
25
|
-
"@dxos/
|
|
21
|
+
"@dxos/react-ui": "0.4.1-main.29ad906",
|
|
22
|
+
"@dxos/react-ui-mosaic": "0.4.1-main.29ad906",
|
|
23
|
+
"@dxos/react-ui-theme": "0.4.1-main.29ad906",
|
|
24
|
+
"@dxos/util": "0.4.1-main.29ad906",
|
|
25
|
+
"@dxos/react-ui-editor": "0.4.1-main.29ad906"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"react-dom": "^18.2.0",
|
|
33
33
|
"vite": "^5.0.12",
|
|
34
34
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/
|
|
38
|
-
"@dxos/
|
|
39
|
-
"@dxos/
|
|
35
|
+
"@dxos/keys": "0.4.1-main.29ad906",
|
|
36
|
+
"@dxos/echo-schema": "0.4.1-main.29ad906",
|
|
37
|
+
"@dxos/log": "0.4.1-main.29ad906",
|
|
38
|
+
"@dxos/random": "0.4.1-main.29ad906",
|
|
39
|
+
"@dxos/storybook-utils": "0.4.1-main.29ad906"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -257,7 +257,7 @@ const Story = ({ text, autoCreate }: StoryProps) => {
|
|
|
257
257
|
return id;
|
|
258
258
|
};
|
|
259
259
|
|
|
260
|
-
const handleDeleteComment: CommentsOptions['onDelete'] = (id) => {
|
|
260
|
+
const handleDeleteComment: CommentsOptions['onDelete'] = ({ id }) => {
|
|
261
261
|
log.info('delete', { id: id.slice(0, 4) });
|
|
262
262
|
setThreads((threads) =>
|
|
263
263
|
threads.map((thread) => {
|
|
@@ -272,7 +272,7 @@ const Story = ({ text, autoCreate }: StoryProps) => {
|
|
|
272
272
|
setSelected((selected) => (selected === id ? undefined : selected));
|
|
273
273
|
};
|
|
274
274
|
|
|
275
|
-
const handleUpdateComment: CommentsOptions['onUpdate'] = (id, cursor) => {
|
|
275
|
+
const handleUpdateComment: CommentsOptions['onUpdate'] = ({ id, cursor }) => {
|
|
276
276
|
log.info('update', { id: id.slice(0, 4), cursor });
|
|
277
277
|
setThreads((threads) =>
|
|
278
278
|
threads.map((thread) => {
|
package/src/Thread/Thread.tsx
CHANGED
|
@@ -34,22 +34,27 @@ export const Thread = forwardRef<HTMLDivElement, ThreadProps>(
|
|
|
34
34
|
},
|
|
35
35
|
);
|
|
36
36
|
|
|
37
|
-
export type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'
|
|
37
|
+
export type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };
|
|
38
38
|
|
|
39
|
-
export const ThreadHeading = forwardRef<
|
|
40
|
-
({ classNames, children, ...props }, forwardedRef) => {
|
|
39
|
+
export const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(
|
|
40
|
+
({ classNames, children, detached, ...props }, forwardedRef) => {
|
|
41
41
|
return (
|
|
42
|
-
|
|
43
|
-
role='
|
|
44
|
-
{...props}
|
|
45
|
-
className={mx('col-span-2 grid grid-cols-subgrid fg-description font-medium', classNames)}
|
|
46
|
-
ref={forwardedRef}
|
|
47
|
-
>
|
|
48
|
-
<div role='none' className='grid place-items-end pie-3.5 fg-separator'>
|
|
42
|
+
<>
|
|
43
|
+
<div role='none' className='grid place-items-end pie-3.5 fg-description'>
|
|
49
44
|
<ArrowBendLeftDown />
|
|
50
45
|
</div>
|
|
51
|
-
<p
|
|
52
|
-
|
|
46
|
+
<p
|
|
47
|
+
role='heading'
|
|
48
|
+
{...props}
|
|
49
|
+
className={mx(
|
|
50
|
+
'fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]',
|
|
51
|
+
detached && 'line-through decoration-1',
|
|
52
|
+
)}
|
|
53
|
+
ref={forwardedRef}
|
|
54
|
+
>
|
|
55
|
+
{children}
|
|
56
|
+
</p>
|
|
57
|
+
</>
|
|
53
58
|
);
|
|
54
59
|
},
|
|
55
60
|
);
|