@dxos/react-ui-markdown 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-markdown",
-  "version": "0.8.4-main.74a063c4e0",
+  "version": "0.8.4-main.765dc60934",
   "description": "Markdown components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "type": "module",
   "exports": {
@@ -19,9 +19,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -30,7 +27,7 @@
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/view": "^6.38.5",
     "@lezer/common": "^1.2.2",
     "@lezer/highlight": "^1.2.1",
     "@lezer/markdown": "^1.3.1",
@@ -42,35 +39,42 @@
     "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
     "remark-gfm": "^4.0.1",
-    "@dxos/async": "0.8.4-main.74a063c4e0",
-    "@dxos/echo": "0.8.4-main.74a063c4e0",
-    "@dxos/log": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui-editor": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.74a063c4e0",
-    "@dxos/invariant": "0.8.4-main.74a063c4e0",
-    "@dxos/util": "0.8.4-main.74a063c4e0"
+    "@dxos/async": "0.8.4-main.765dc60934",
+    "@dxos/echo": "0.8.4-main.765dc60934",
+    "@dxos/invariant": "0.8.4-main.765dc60934",
+    "@dxos/effect": "0.8.4-main.765dc60934",
+    "@dxos/log": "0.8.4-main.765dc60934",
+    "@dxos/react-ui": "0.8.4-main.765dc60934",
+    "@dxos/react-ui-editor": "0.8.4-main.765dc60934",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.765dc60934",
+    "@dxos/ui": "0.8.4-main.765dc60934",
+    "@dxos/ui-theme": "0.8.4-main.765dc60934",
+    "@dxos/ui-editor": "0.8.4-main.765dc60934",
+    "@dxos/util": "0.8.4-main.765dc60934"
   },
   "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.74a063c4e0",
-    "@dxos/echo": "0.8.4-main.74a063c4e0",
-    "@dxos/random": "0.8.4-main.74a063c4e0",
-    "@dxos/react-client": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui": "0.8.4-main.74a063c4e0",
-    "@dxos/schema": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0",
-    "@dxos/storybook-utils": "0.8.4-main.74a063c4e0"
+    "vite": "^8.0.13",
+    "@dxos/lit-ui": "0.8.4-main.765dc60934",
+    "@dxos/keys": "0.8.4-main.765dc60934",
+    "@dxos/echo": "0.8.4-main.765dc60934",
+    "@dxos/random": "0.8.4-main.765dc60934",
+    "@dxos/react-ui": "0.8.4-main.765dc60934",
+    "@dxos/react-client": "0.8.4-main.765dc60934",
+    "@dxos/schema": "0.8.4-main.765dc60934",
+    "@dxos/storybook-utils": "0.8.4-main.765dc60934",
+    "@dxos/ui-theme": "0.8.4-main.765dc60934"
   },
   "peerDependencies": {
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0"
+    "@dxos/ui-theme": "0.8.4-main.765dc60934",
+    "@dxos/react-ui": "0.8.4-main.765dc60934"
   },
   "publishConfig": {
     "access": "public"

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>
+    `,
+  },
+};