@dxos/react-ui-markdown 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-markdown",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.cb12b3f963",
   "description": "Markdown components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,9 +19,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -37,40 +34,47 @@
     "@lezer/xml": "^1.0.6",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "json5": "^2.2.3",
     "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
     "remark-gfm": "^4.0.1",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-editor": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae"
+    "@dxos/async": "0.8.4-main.cb12b3f963",
+    "@dxos/echo": "0.8.4-main.cb12b3f963",
+    "@dxos/effect": "0.8.4-main.cb12b3f963",
+    "@dxos/invariant": "0.8.4-main.cb12b3f963",
+    "@dxos/log": "0.8.4-main.cb12b3f963",
+    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.cb12b3f963",
+    "@dxos/ui": "0.8.4-main.cb12b3f963",
+    "@dxos/ui-editor": "0.8.4-main.cb12b3f963",
+    "@dxos/ui-theme": "0.8.4-main.cb12b3f963",
+    "@dxos/util": "0.8.4-main.cb12b3f963",
+    "@dxos/react-ui-editor": "0.8.4-main.cb12b3f963"
   },
   "devDependencies": {
+    "@effect/vitest": "0.29.0",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/lit-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/random": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
-    "@dxos/schema": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "vite": "^8.0.10",
+    "@dxos/lit-ui": "0.8.4-main.cb12b3f963",
+    "@dxos/keys": "0.8.4-main.cb12b3f963",
+    "@dxos/echo": "0.8.4-main.cb12b3f963",
+    "@dxos/react-client": "0.8.4-main.cb12b3f963",
+    "@dxos/random": "0.8.4-main.cb12b3f963",
+    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
+    "@dxos/schema": "0.8.4-main.cb12b3f963",
+    "@dxos/storybook-utils": "0.8.4-main.cb12b3f963",
+    "@dxos/ui-theme": "0.8.4-main.cb12b3f963"
   },
   "peerDependencies": {
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/react-ui": "0.8.4-main.cb12b3f963",
+    "@dxos/ui-theme": "0.8.4-main.cb12b3f963"
   },
   "publishConfig": {
     "access": "public"

package/src/{MarkdownViewer/MarkdownViewer.stories.tsx → MarkdownBlock/MarkdownBlock.stories.tsx}

@@ -4,30 +4,30 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { trim } from '@dxos/util';
 
-import { MarkdownViewer } from './MarkdownViewer';
+import { MarkdownBlock } from './MarkdownBlock';
 
-faker.seed(0);
+random.seed(0);
 
 const meta = {
-  title: 'ui/react-ui-markdown/MarkdownViewer',
-  component: MarkdownViewer,
+  title: 'ui/react-ui-markdown/MarkdownBlock',
+  component: MarkdownBlock,
   decorators: [withTheme(), withLayout({ layout: 'column' })],
-} satisfies Meta<typeof MarkdownViewer>;
+} satisfies Meta<typeof MarkdownBlock>;
 
 export default meta;
 
-type Story = StoryObj<typeof MarkdownViewer>;
+type Story = StoryObj<typeof MarkdownBlock>;
 
 const content = trim`
   # Hello World!
 
-  > An example of the MarkdownViewer component.
+  > An example of the MarkdownBlock component.
 
-  ${faker.lorem.paragraphs(1)}
+  ${random.lorem.paragraphs(1)}
 
   Here's a JSON block:
 
@@ -64,7 +64,7 @@ const content = trim`
 
   ## Examples
 
-  ${faker.lorem.paragraphs(1)}
+  ${random.lorem.paragraphs(1)}
 `;
 
 export const Default: Story = {

package/src/{MarkdownViewer/MarkdownViewer.tsx → MarkdownBlock/MarkdownBlock.tsx}

@@ -10,7 +10,7 @@ import { type ThemedClassName } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/ui-theme';
 
-export type MarkdownViewerProps = ThemedClassName<
+export type MarkdownBlockProps = ThemedClassName<
   PropsWithChildren<{
     content?: string;
     components?: ReactMarkdownOptions['components'];
@@ -23,7 +23,7 @@ export type MarkdownViewerProps = ThemedClassName<
  * markdown -> remark -> [mdast -> remark plugins] -> [hast -> rehype plugins] -> components -> react elements.
  * Consider using @dxos/react-ui-editor.
  */
-export const MarkdownViewer = ({ classNames, children, components, content = '' }: MarkdownViewerProps) => {
+export const MarkdownBlock = ({ classNames, children, components, content = '' }: MarkdownBlockProps) => {
   return (
     <div className={mx(classNames)}>
       <ReactMarkdown remarkPlugins={[remarkGfm]} skipHtml components={{ ...defaultComponents, ...components }}>
@@ -36,16 +36,16 @@ export const MarkdownViewer = ({ classNames, children, components, content = ''
 
 const defaultComponents: ReactMarkdownOptions['components'] = {
   h1: ({ children }) => {
-    return <h1 className='pt-1 pb-1 text-xl'>{children}</h1>;
+    return <h1 className='pt-1 pb-1 text-accent-text text-xl'>{children}</h1>;
   },
   h2: ({ children }) => {
-    return <h2 className='pt-1 pb-1 text-lg'>{children}</h2>;
+    return <h2 className='pt-1 pb-1 text-accent-text text-lg'>{children}</h2>;
   },
   h3: ({ children }) => {
-    return <h3 className='pt-1 pb-1 text-base'>{children}</h3>;
+    return <h3 className='pt-1 pb-1 text-accent-text text-base'>{children}</h3>;
   },
   blockquote: ({ children, ...props }) => (
-    <blockquote className='ps-4 mt-2 mb-2 pt-2 pb-2 border-l-4 border-accent-text text-accent-text' {...props}>
+    <blockquote className='my-2 py-2 ps-4 border-l-4 border-accent-text text-accent-text' {...props}>
       {children}
     </blockquote>
   ),
@@ -79,13 +79,18 @@ const defaultComponents: ReactMarkdownOptions['components'] = {
     </li>
   ),
   pre: ({ children }) => children,
-  // TODO(burdon): Copy/paste button.
-  code: ({ children, className }) => {
+  code: ({ children, className, node }) => {
     const [, language] = /language-(\w+)/.exec(className || '') || [];
+    const inline = !className && node?.position?.start.line === node?.position?.end.line;
+    if (inline) {
+      return <code className='rounded-xs bg-group-surface px-1 py-0.5 text-sm text-info-text'>{children}</code>;
+    }
+
     return (
       <SyntaxHighlighter
         language={language}
-        classNames='mt-2 mb-2 border border-separator rounded-xs text-sm bg-group-surface'
+        classNames='mt-2 mb-2 p-2 border border-separator rounded-xs text-sm bg-group-surface'
+        copyButton
         PreTag='pre'
       >
         {children}

package/src/{MarkdownViewer → MarkdownBlock}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './MarkdownViewer';
+export * from './MarkdownBlock';

package/src/MarkdownStream/MarkdownStream.stories.tsx

@@ -0,0 +1,215 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { WidgetType } from '@codemirror/view';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import '@dxos/lit-ui';
+import { PublicKey } from '@dxos/keys';
+import { random } from '@dxos/random';
+import { Input, Toolbar } from '@dxos/react-ui';
+import { Panel } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Domino } from '@dxos/ui';
+import { type XmlWidgetRegistry, getXmlTextChild } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+import { keyToFallback, trim } from '@dxos/util';
+
+import { MarkdownStream, type MarkdownStreamController, type MarkdownStreamProps } from './MarkdownStream';
+import { type TextStreamOptions, textStream } from './testing';
+import TEXT from './testing/text.md?raw';
+
+random.seed(123);
+
+const userHue = keyToFallback(PublicKey.random()).hue;
+
+const defaultStreamOptions: TextStreamOptions = {
+  wordsPerChunk: 5,
+  chunkDelay: 200,
+  variance: 0.5,
+};
+
+class DOMWidget extends WidgetType {
+  constructor(private text: string) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this.text === other.text;
+  }
+
+  override toDOM() {
+    return Domino.of('span').classNames(mx('flex m-2 p-2 border border-separator rounded')).text(this.text).root;
+  }
+}
+
+const ReactWidget = ({ children }: { children: string }) => {
+  return <div className='m-2 p-2 border border-separator rounded'>{children}</div>;
+};
+
+const registry: XmlWidgetRegistry = {
+  'dom-widget': {
+    block: true,
+    streaming: true,
+    factory: ({ children }) => {
+      const text = getXmlTextChild(children);
+      return text ? new DOMWidget(text) : null;
+    },
+  },
+
+  'react-widget': {
+    block: true,
+    streaming: true,
+    Component: ReactWidget,
+  },
+};
+
+type DefaultStoryProps = MarkdownStreamProps & {
+  initialContent?: string;
+  streamOptions?: TextStreamOptions;
+};
+
+const DefaultStory = ({
+  initialContent,
+  content,
+  streamOptions = defaultStreamOptions,
+  debug: debugProp,
+  ...props
+}: DefaultStoryProps) => {
+  const [controller, setController] = useState<MarkdownStreamController | null>(null);
+  const [streaming, setStreaming] = useState(false);
+  const [debug, setDebug] = useState(debugProp);
+
+  useEffect(() => {
+    if (initialContent) {
+      void controller?.append(initialContent);
+    }
+  }, [controller, initialContent]);
+
+  useEffect(() => {
+    if (!controller || !streaming || !content) {
+      return;
+    }
+
+    let cancelled = false;
+    void (async () => {
+      for await (const chunk of textStream(content + '\n', streamOptions)) {
+        if (cancelled) {
+          break;
+        }
+
+        await controller.append(chunk);
+      }
+
+      setStreaming(false);
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [controller, content, streaming]);
+
+  const handleReset = useCallback(() => {
+    setStreaming(false);
+    void controller?.setContent('');
+  }, [controller]);
+
+  const handleAppend = useCallback(() => {
+    void controller?.append(
+      [
+        random.lorem.paragraph(),
+        `<dom-widget>${random.lorem.paragraphs(3)}</dom-widget>`,
+        random.lorem.paragraph(),
+        `<react-widget>${random.lorem.paragraphs(3)}</react-widget>`,
+        '',
+      ].join('\n\n'),
+    );
+  }, [controller]);
+
+  return (
+    <Panel.Root data-hue={userHue}>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.IconButton
+            disabled={streaming}
+            icon='ph--play--regular'
+            iconOnly
+            label='Start'
+            onClick={() => setStreaming(true)}
+          />
+          <Toolbar.IconButton
+            disabled={!streaming}
+            icon='ph--stop--regular'
+            iconOnly
+            label='Stop'
+            onClick={() => setStreaming(false)}
+          />
+          <Toolbar.IconButton icon='ph--trash--regular' iconOnly label='Reset' onClick={handleReset} />
+          <Toolbar.IconButton
+            disabled={streaming}
+            icon='ph--plus--regular'
+            iconOnly
+            label='Append'
+            onClick={handleAppend}
+          />
+          <Toolbar.Separator />
+          <Input.Root>
+            <Input.Label classNames='pr-1'>Debug</Input.Label>
+            <Input.Switch checked={debug} onCheckedChange={setDebug} />
+          </Input.Root>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <MarkdownStream {...props} debug={debug} ref={setController} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-markdown/MarkdownStream',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    initialContent: TEXT,
+    options: {
+      autoScroll: true,
+    },
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    registry,
+    content: TEXT,
+    options: {
+      autoScroll: true,
+      typewriter: true,
+      fader: true,
+      cursor: true,
+    },
+  },
+};
+
+export const Widgets: Story = {
+  args: {
+    registry,
+    initialContent: trim`
+      # DOM Widget
+      <dom-widget>${random.lorem.paragraph()}</dom-widget>
+
+      # React Widget
+      <react-widget>${random.lorem.paragraph()}</react-widget>
+    `,
+  },
+};