@dxos/react-ui-markdown 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-markdown",
-  "version": "0.8.4-main.abd8ff62ef",
+  "version": "0.8.4-main.bc2380dfbc",
   "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": {
@@ -27,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",
@@ -39,18 +39,18 @@
     "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
     "remark-gfm": "^4.0.1",
-    "@dxos/async": "0.8.4-main.abd8ff62ef",
-    "@dxos/echo": "0.8.4-main.abd8ff62ef",
-    "@dxos/effect": "0.8.4-main.abd8ff62ef",
-    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-editor": "0.8.4-main.abd8ff62ef",
-    "@dxos/log": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.abd8ff62ef",
-    "@dxos/ui": "0.8.4-main.abd8ff62ef",
-    "@dxos/ui-editor": "0.8.4-main.abd8ff62ef",
-    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
-    "@dxos/util": "0.8.4-main.abd8ff62ef"
+    "@dxos/echo": "0.8.4-main.bc2380dfbc",
+    "@dxos/effect": "0.8.4-main.bc2380dfbc",
+    "@dxos/async": "0.8.4-main.bc2380dfbc",
+    "@dxos/invariant": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-editor": "0.8.4-main.bc2380dfbc",
+    "@dxos/log": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-editor": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui": "0.8.4-main.bc2380dfbc",
+    "@dxos/util": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc"
   },
   "devDependencies": {
     "@effect/vitest": "0.29.0",
@@ -58,23 +58,23 @@
     "@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.abd8ff62ef",
-    "@dxos/keys": "0.8.4-main.abd8ff62ef",
-    "@dxos/random": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
-    "@dxos/lit-ui": "0.8.4-main.abd8ff62ef",
-    "@dxos/schema": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
-    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
-    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
+    "vite": "^8.0.13",
+    "@dxos/keys": "0.8.4-main.bc2380dfbc",
+    "@dxos/echo": "0.8.4-main.bc2380dfbc",
+    "@dxos/lit-ui": "0.8.4-main.bc2380dfbc",
+    "@dxos/random": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-client": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui": "0.8.4-main.bc2380dfbc",
+    "@dxos/schema": "0.8.4-main.bc2380dfbc",
+    "@dxos/storybook-utils": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc"
   },
   "peerDependencies": {
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
-    "@dxos/react-ui": "0.8.4-main.abd8ff62ef"
+    "@dxos/react-ui": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownStream/MarkdownStream.tsx

@@ -37,7 +37,7 @@ import {
   navigatePreviousEffect,
   preview,
   scroller,
-  scrollerLineEffect,
+  crawlerLineEffect,
   fader,
   typewriter,
   typewriterBypass,
@@ -45,7 +45,6 @@ import {
   xmlTagResetEffect,
   xmlTagUpdateEffect,
   xmlTags,
-  autoScroll,
   documentSlots,
   xmlFormatting,
   xmlBlockDecoration,
@@ -213,14 +212,12 @@ export const MarkdownStream = forwardRef<MarkdownStreamController | null, Markdo
     return (
       <>
         {/* Markdown editor. */}
-        <div role='none' className={mx('dx-container', classNames)} ref={parentRef} />
+        <div className={mx('dx-container', classNames)} ref={parentRef} />
 
         {/* React widgets are rendered in portals outside of the editor. */}
         <ErrorBoundary name='markdown-stream'>
           {widgets.map(({ Component, root, id, props }) => (
-            <div key={id} role='none'>
-              {createPortal(<Component view={view} {...props} />, root)}
-            </div>
+            <div key={id}>{createPortal(<Component view={view} {...props} />, root)}</div>
           ))}
           {footerRoot && footerVisible && createPortal(footer, footerRoot)}
         </ErrorBoundary>
@@ -289,8 +286,7 @@ const useMarkdownStreamTextEditor = (
               hideTags: true,
             }),
             xmlTags({ registry, setWidgets, bookmarks: ['prompt'] }),
-            scroller({ overScroll: 80 }),
-            options?.autoScroll && autoScroll(),
+            scroller({ overScroll: 80, autoScroll: options?.autoScroll }),
             options?.typewriter &&
               typewriter({
                 cursor: options?.cursor,
@@ -392,7 +388,7 @@ const createMarkdownStreamController = ({
     /** Scroll to bottom. */
     scrollToBottom: (behavior?: ScrollBehavior) => {
       viewRef.current?.dispatch({
-        effects: scrollerLineEffect.of({ line: -1, behavior }),
+        effects: crawlerLineEffect.of({ line: -1, behavior }),
       });
     },
 

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

@@ -8,24 +8,24 @@ import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { trim } from '@dxos/util';
 
-import { MarkdownBlock } from './MarkdownBlock';
+import { MarkdownView } from './MarkdownView';
 
 random.seed(0);
 
 const meta = {
-  title: 'ui/react-ui-markdown/MarkdownBlock',
-  component: MarkdownBlock,
+  title: 'ui/react-ui-markdown/MarkdownView',
+  component: MarkdownView,
   decorators: [withTheme(), withLayout({ layout: 'column' })],
-} satisfies Meta<typeof MarkdownBlock>;
+} satisfies Meta<typeof MarkdownView>;
 
 export default meta;
 
-type Story = StoryObj<typeof MarkdownBlock>;
+type Story = StoryObj<typeof MarkdownView>;
 
 const content = trim`
   # Hello World!
 
-  > An example of the MarkdownBlock component.
+  > An example of the MarkdownView component.
 
   ${random.lorem.paragraphs(1)}
 

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

@@ -6,11 +6,11 @@ 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 { MediaPlayer, type ThemedClassName } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { mx } from '@dxos/ui-theme';
 
-export type MarkdownBlockProps = ThemedClassName<
+export type MarkdownViewProps = ThemedClassName<
   PropsWithChildren<{
     content?: string;
     components?: ReactMarkdownOptions['components'];
@@ -23,7 +23,7 @@ export type MarkdownBlockProps = ThemedClassName<
  * 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) => {
+export const MarkdownView = ({ classNames, children, components, content = '' }: MarkdownViewProps) => {
   return (
     <div className={mx(classNames)}>
       <ReactMarkdown remarkPlugins={[remarkGfm]} skipHtml components={{ ...defaultComponents, ...components }}>
@@ -44,6 +44,9 @@ const defaultComponents: ReactMarkdownOptions['components'] = {
   h3: ({ children }) => {
     return <h3 className='pt-1 pb-1 text-accent-text text-base'>{children}</h3>;
   },
+  h4: ({ children }) => {
+    return <h4 className='pt-1 pb-1 uppercase text-base'>{children}</h4>;
+  },
   blockquote: ({ children, ...props }) => (
     <blockquote className='my-2 py-2 ps-4 border-l-4 border-accent-text text-accent-text' {...props}>
       {children}
@@ -63,6 +66,19 @@ const defaultComponents: ReactMarkdownOptions['components'] = {
       {children}
     </a>
   ),
+  // Hide broken images: many markdown sources reference remote URLs that
+  // 404 or are blocked. Drop the element on load failure rather than
+  // leaving the browser's broken-image placeholder.
+  //
+  // Media URLs (mp4/mp3/etc. or legacy `iframe`-style embeds) are swapped to a
+  // native `<video>` / `<audio>` element by {@link MediaPlayer} so playable
+  // media in the source document renders inline.
+  img: ({ src, alt }) => {
+    if (!src) {
+      return null;
+    }
+    return <MediaPlayer src={src} alt={alt} mediaClassNames='aspect-video w-full' imgClassNames='w-full' />;
+  },
   ol: ({ children, ...props }) => (
     <ol className='pt-1 pb-1 ps-6 leading-tight list-decimal' {...props}>
       {children}

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

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

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './MarkdownBlock';
+export * from './MarkdownView';
 export * from './MarkdownStream';

package/dist/types/src/MarkdownBlock/MarkdownBlock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MarkdownBlock.d.ts","sourceRoot":"","sources":["../../../../src/MarkdownBlock/MarkdownBlock.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAsB,EAAE,KAAK,OAAO,IAAI,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGrF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAItD,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAC9C,iBAAiB,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;CACjD,CAAC,CACH,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,kDAAwD,kBAAkB,sBASnG,CAAC"}

package/dist/types/src/MarkdownBlock/MarkdownBlock.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MarkdownBlock.stories.d.ts","sourceRoot":"","sources":["../../../../src/MarkdownBlock/MarkdownBlock.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMjE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,QAAA,MAAM,IAAI;;;;CAI4B,CAAC;eAExB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AA+C5C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/types/src/MarkdownBlock/index.d.ts

@@ -1,2 +0,0 @@
-export * from './MarkdownBlock';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/MarkdownBlock/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/MarkdownBlock/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}