@dxos/react-ui-markdown 0.8.4-main.03d5cd7b56

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@dxos/react-ui-markdown",
+  "version": "0.8.4-main.03d5cd7b56",
+  "description": "Markdown components.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "MIT",
+  "author": "DXOS.org",
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.5",
+    "@lezer/common": "^1.2.2",
+    "@lezer/highlight": "^1.2.1",
+    "@lezer/markdown": "^1.3.1",
+    "@lezer/xml": "^1.0.6",
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@radix-ui/react-context": "1.1.1",
+    "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/async": "0.8.4-main.03d5cd7b56",
+    "@dxos/echo": "0.8.4-main.03d5cd7b56",
+    "@dxos/effect": "0.8.4-main.03d5cd7b56",
+    "@dxos/invariant": "0.8.4-main.03d5cd7b56",
+    "@dxos/log": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-editor": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-editor": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.03d5cd7b56",
+    "@dxos/util": "0.8.4-main.03d5cd7b56"
+  },
+  "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": "^8.0.10",
+    "@dxos/echo": "0.8.4-main.03d5cd7b56",
+    "@dxos/keys": "0.8.4-main.03d5cd7b56",
+    "@dxos/random": "0.8.4-main.03d5cd7b56",
+    "@dxos/lit-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-client": "0.8.4-main.03d5cd7b56",
+    "@dxos/schema": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56",
+    "@dxos/storybook-utils": "0.8.4-main.03d5cd7b56"
+  },
+  "peerDependencies": {
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/MarkdownBlock/MarkdownBlock.stories.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { random } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
+
+import { MarkdownBlock } from './MarkdownBlock';
+
+random.seed(0);
+
+const meta = {
+  title: 'ui/react-ui-markdown/MarkdownBlock',
+  component: MarkdownBlock,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof MarkdownBlock>;
+
+export default meta;
+
+type Story = StoryObj<typeof MarkdownBlock>;
+
+const content = trim`
+  # Hello World!
+
+  > An example of the MarkdownBlock component.
+
+  ${random.lorem.paragraphs(1)}
+
+  Here's a JSON block:
+
+  ~~~json
+  {
+    "hello": "world"
+  }
+  ~~~
+
+  And some code:
+
+  ~~~tsx
+  import React from 'react'
+
+  const App = () => {
+    const title = 'Hello, world!'
+    return <div>{title}</div>
+  }
+  ~~~
+
+  ## Task lists
+
+  - [ ] Task one
+  - [x] Task two
+  - [ ] Task three
+
+  ## Tables
+
+  | Column 1 | Column 2 | Column 3 |
+  | -------- | -------- | -------- |
+  | Cell 1   | Cell 2   | Cell 3   |
+  | Cell 4   | Cell 5   | Cell 6   |
+  | Cell 7   | Cell 8   | Cell 9   |
+
+  ## Examples
+
+  ${random.lorem.paragraphs(1)}
+`;
+
+export const Default: Story = {
+  args: {
+    classNames: 'p-4 border border-border rounded-md overflow-y-auto bg-base-surface',
+    content,
+  },
+};

package/src/MarkdownBlock/MarkdownBlock.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+import ReactMarkdown, { type Options as ReactMarkdownOptions } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/ui-theme';
+
+export type MarkdownBlockProps = ThemedClassName<
+  PropsWithChildren<{
+    content?: string;
+    components?: ReactMarkdownOptions['components'];
+  }>
+>;
+
+/**
+ * Transforms markdown text into react elements.
+ * https://github.com/remarkjs/react-markdown
+ * markdown -> remark -> [mdast -> remark plugins] -> [hast -> rehype plugins] -> components -> react elements.
+ * Consider using @dxos/react-ui-editor.
+ */
+export const MarkdownBlock = ({ classNames, children, components, content = '' }: MarkdownBlockProps) => {
+  return (
+    <div className={mx(classNames)}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} skipHtml components={{ ...defaultComponents, ...components }}>
+        {content}
+      </ReactMarkdown>
+      {children}
+    </div>
+  );
+};
+
+const defaultComponents: ReactMarkdownOptions['components'] = {
+  h1: ({ children }) => {
+    return <h1 className='pt-1 pb-1 text-accent-text text-xl'>{children}</h1>;
+  },
+  h2: ({ children }) => {
+    return <h2 className='pt-1 pb-1 text-accent-text text-lg'>{children}</h2>;
+  },
+  h3: ({ children }) => {
+    return <h3 className='pt-1 pb-1 text-accent-text text-base'>{children}</h3>;
+  },
+  blockquote: ({ children, ...props }) => (
+    <blockquote className='my-2 py-2 ps-4 border-l-4 border-accent-text text-accent-text' {...props}>
+      {children}
+    </blockquote>
+  ),
+  p: ({ children }) => {
+    return <div className='pt-1 pb-1'>{children}</div>;
+  },
+  a: ({ children, href, ...props }) => (
+    <a
+      href={href}
+      className='text-primary-500 hover:text-primary-500' // TODO(burdon): Use link token.
+      target='_blank'
+      rel='noopener noreferrer'
+      {...props}
+    >
+      {children}
+    </a>
+  ),
+  ol: ({ children, ...props }) => (
+    <ol className='pt-1 pb-1 ps-6 leading-tight list-decimal' {...props}>
+      {children}
+    </ol>
+  ),
+  ul: ({ children, ...props }) => (
+    <ul className='pt-1 pb-1 ps-6 leading-tight list-disc' {...props}>
+      {children}
+    </ul>
+  ),
+  li: ({ children, ...props }) => (
+    <li className='' {...props}>
+      {children}
+    </li>
+  ),
+  pre: ({ children }) => children,
+  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 p-2 border border-separator rounded-xs text-sm bg-group-surface'
+        copyButton
+        PreTag='pre'
+      >
+        {children}
+      </SyntaxHighlighter>
+    );
+  },
+};

package/src/MarkdownBlock/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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>
+    `,
+  },
+};