@dxos/react-ui-markdown 0.8.4-main.fcc0d83b33 → 0.8.4-staging.60fe92afc8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-markdown",
-  "version": "0.8.4-main.fcc0d83b33",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "Markdown components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,14 +8,14 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "type": "module",
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "default": "./dist/lib/browser/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -24,33 +24,33 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.19.0",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
-    "@lezer/common": "^1.2.2",
-    "@lezer/highlight": "^1.2.1",
-    "@lezer/markdown": "^1.3.1",
+    "@codemirror/autocomplete": "^6.20.2",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
+    "@lezer/common": "^1.5.2",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/markdown": "^1.6.3",
     "@lezer/xml": "^1.0.6",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "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.fcc0d83b33",
-    "@dxos/echo": "0.8.4-main.fcc0d83b33",
-    "@dxos/effect": "0.8.4-main.fcc0d83b33",
-    "@dxos/invariant": "0.8.4-main.fcc0d83b33",
-    "@dxos/log": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-editor": "0.8.4-main.fcc0d83b33",
-    "@dxos/ui-editor": "0.8.4-main.fcc0d83b33",
-    "@dxos/ui": "0.8.4-main.fcc0d83b33",
-    "@dxos/util": "0.8.4-main.fcc0d83b33",
-    "@dxos/ui-theme": "0.8.4-main.fcc0d83b33"
+    "@dxos/async": "0.8.4-staging.60fe92afc8",
+    "@dxos/effect": "0.8.4-staging.60fe92afc8",
+    "@dxos/invariant": "0.8.4-staging.60fe92afc8",
+    "@dxos/log": "0.8.4-staging.60fe92afc8",
+    "@dxos/echo": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui-editor": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-editor": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/util": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8"
   },
   "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.fcc0d83b33",
-    "@dxos/lit-ui": "0.8.4-main.fcc0d83b33",
-    "@dxos/keys": "0.8.4-main.fcc0d83b33",
-    "@dxos/random": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-client": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui": "0.8.4-main.fcc0d83b33",
-    "@dxos/schema": "0.8.4-main.fcc0d83b33",
-    "@dxos/storybook-utils": "0.8.4-main.fcc0d83b33",
-    "@dxos/ui-theme": "0.8.4-main.fcc0d83b33"
+    "vite": "^8.0.16",
+    "@dxos/echo": "0.8.4-staging.60fe92afc8",
+    "@dxos/keys": "0.8.4-staging.60fe92afc8",
+    "@dxos/random": "0.8.4-staging.60fe92afc8",
+    "@dxos/lit-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-client": "0.8.4-staging.60fe92afc8",
+    "@dxos/schema": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/storybook-utils": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
   },
   "peerDependencies": {
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.fcc0d83b33",
-    "@dxos/ui-theme": "0.8.4-main.fcc0d83b33"
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownStream/MarkdownStream.stories.tsx

@@ -124,7 +124,7 @@ const DefaultStory = ({
         random.lorem.paragraph(),
         `<react-widget>${random.lorem.paragraphs(3)}</react-widget>`,
         '',
-      ].join('\n\n'),
+      ].join('\n'),
     );
   }, [controller]);
 

package/src/MarkdownStream/MarkdownStream.tsx

@@ -21,7 +21,7 @@ import React, {
 import { createPortal } from 'react-dom';
 
 import { addEventListener } from '@dxos/async';
-import { runAndForwardErrors } from '@dxos/effect';
+import { EffectEx } from '@dxos/effect';
 import { ErrorBoundary, type ThemedClassName, useDynamicRef, useStateWithRef, useThemeContext } from '@dxos/react-ui';
 import { useTextEditor, type UseTextEditor } from '@dxos/react-ui-editor';
 import {
@@ -37,7 +37,7 @@ import {
   navigatePreviousEffect,
   preview,
   scroller,
-  scrollerLineEffect,
+  crawlerLineEffect,
   fader,
   typewriter,
   typewriterBypass,
@@ -45,10 +45,10 @@ import {
   xmlTagResetEffect,
   xmlTagUpdateEffect,
   xmlTags,
-  autoScroll,
   documentSlots,
   xmlFormatting,
   xmlBlockDecoration,
+  lineSpacing,
 } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 import { isTruthy } from '@dxos/util';
@@ -213,14 +213,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>
@@ -272,12 +270,16 @@ const useMarkdownStreamTextEditor = (
           [
             extendedMarkdown({ registry }),
             decorateMarkdown({
-              // `dxn:` links/images are reference widgets owned by `preview()` (PreviewInlineWidget /
+              // `echo:`/`dxn:` links/images are reference widgets owned by `preview()` (PreviewInlineWidget /
               // PreviewBlockWidget). Skipping them here avoids `decorateMarkdown` adding a
               // non-functional `LinkButton` anchor on top of the same node — e.g. for
-              // `[DXOS](dxn:echo:BNPMIBEDJLRIILYUYZVM6GT64VWI6WPPZ:01KQ889PZBRNHAEECV0ANFAYX7)`.
-              skip: (node) => (node.name === 'Link' || node.name === 'Image') && node.url.startsWith('dxn:'),
+              // `[DXOS](echo://BNPMIBEDJLRIILYUYZVM6GT64VWI6WPPZ/01KQ889PZBRNHAEECV0ANFAYX7)`.
+              skip: (node) =>
+                (node.name === 'Link' || node.name === 'Image') &&
+                (node.url.startsWith('dxn:') || node.url.startsWith('echo:')),
             }),
+            // TODO(burdon): Make optional; Removes need for '\n\n'.
+            lineSpacing(),
             preview(),
             // NOTE: An ancestor element must set `data-hue` so `.dx-panel` resolves to the user's
             // hue tokens (see `packages/ui/ui-theme/src/css/components/panel.css`). Tailwind picks
@@ -285,12 +287,11 @@ const useMarkdownStreamTextEditor = (
             xmlBlockDecoration({
               tag: 'prompt',
               lineClass: 'cm-prompt-line my-8',
-              contentClass: 'cm-prompt-bubble dx-panel px-2 py-1.5 rounded-sm [&_*]:text-inherit!',
+              contentClass: 'cm-prompt-bubble dx-panel px-2 py-1.5 box-decoration-clone rounded-sm [&_*]:text-inherit!',
               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,
@@ -358,7 +359,7 @@ const useMarkdownStreamQueue = (
     );
 
     return () => {
-      void runAndForwardErrors(Fiber.interrupt(fork));
+      void EffectEx.runAndForwardErrors(Fiber.interrupt(fork));
     };
   }, [view, queue, chunkSize, delayMs]);
 };
@@ -392,7 +393,7 @@ const createMarkdownStreamController = ({
     /** Scroll to bottom. */
     scrollToBottom: (behavior?: ScrollBehavior) => {
       viewRef.current?.dispatch({
-        effects: scrollerLineEffect.of({ line: -1, behavior }),
+        effects: crawlerLineEffect.of({ line: -1, behavior }),
       });
     },
 
@@ -431,7 +432,7 @@ const createMarkdownStreamController = ({
         // collected several streaming partials before React rendered.
         const queue = queueRef.current;
         if (queue) {
-          await runAndForwardErrors(Queue.offer(queue, text));
+          await EffectEx.runAndForwardErrors(Queue.offer(queue, text));
         }
       }
     },

package/src/MarkdownStream/stream.ts

@@ -8,7 +8,7 @@ import * as Stream from 'effect/Stream';
 import { Obj } from '@dxos/echo';
 
 export const renderObjectLink = (obj: Obj.Unknown, block?: boolean) =>
-  `${block ? '!' : ''}[${Obj.getLabel(obj)}](${Obj.getDXN(obj).toString()})`;
+  `${block ? '!' : ''}[${Obj.getLabel(obj)}](${Obj.getURI(obj)})`;
 
 export type StreamerOptions = {
   /**

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} classNames='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"}