@dxos/react-ui-markdown 0.8.4-main.3c1ae3b → 0.8.4-main.422d1c7879

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-markdown",
-  "version": "0.8.4-main.3c1ae3b",
+  "version": "0.8.4-main.422d1c7879",
   "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",
@@ -15,9 +19,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -31,44 +32,42 @@
     "@lezer/highlight": "^1.2.1",
     "@lezer/markdown": "^1.3.1",
     "@lezer/xml": "^1.0.6",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
-    "effect": "3.18.3",
+    "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.3c1ae3b",
-    "@dxos/invariant": "0.8.4-main.3c1ae3b",
-    "@dxos/echo": "0.8.4-main.3c1ae3b",
-    "@dxos/log": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-editor": "0.8.4-main.3c1ae3b",
-    "@dxos/util": "0.8.4-main.3c1ae3b"
+    "@dxos/async": "0.8.4-main.422d1c7879",
+    "@dxos/invariant": "0.8.4-main.422d1c7879",
+    "@dxos/echo": "0.8.4-main.422d1c7879",
+    "@dxos/log": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.422d1c7879",
+    "@dxos/util": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui-editor": "0.8.4-main.422d1c7879"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/echo": "0.8.4-main.3c1ae3b",
-    "@dxos/lit-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/random": "0.8.4-main.3c1ae3b",
-    "@dxos/react-client": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b",
-    "@dxos/schema": "0.8.4-main.3c1ae3b",
-    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b"
+    "@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/echo": "0.8.4-main.422d1c7879",
+    "@dxos/lit-ui": "0.8.4-main.422d1c7879",
+    "@dxos/random": "0.8.4-main.422d1c7879",
+    "@dxos/react-client": "0.8.4-main.422d1c7879",
+    "@dxos/react-ui": "0.8.4-main.422d1c7879",
+    "@dxos/storybook-utils": "0.8.4-main.422d1c7879",
+    "@dxos/ui-theme": "0.8.4-main.422d1c7879",
+    "@dxos/schema": "0.8.4-main.422d1c7879"
   },
   "peerDependencies": {
-    "effect": "3.17.7",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b"
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.422d1c7879",
+    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
   },
   "publishConfig": {
     "access": "public"

package/src/MarkdownViewer/MarkdownViewer.stories.tsx

@@ -4,18 +4,18 @@
 
 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';
 
-faker.seed(0);
+random.seed(0);
 
 const meta = {
   title: 'ui/react-ui-markdown/MarkdownViewer',
   component: MarkdownViewer,
-  decorators: [withTheme, withLayout({ container: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof MarkdownViewer>;
 
 export default meta;
@@ -27,7 +27,7 @@ const content = trim`
 
   > An example of the MarkdownViewer component.
 
-  ${faker.lorem.paragraphs(1)}
+  ${random.lorem.paragraphs(1)}
 
   Here's a JSON block:
 
@@ -64,12 +64,12 @@ const content = trim`
 
   ## Examples
 
-  ${faker.lorem.paragraphs(1)}
+  ${random.lorem.paragraphs(1)}
 `;
 
 export const Default: Story = {
   args: {
-    classNames: 'p-4 border border-border rounded-md overflow-y-auto bg-baseSurface',
+    classNames: 'p-4 border border-border rounded-md overflow-y-auto bg-base-surface',
     content,
   },
 };

package/src/MarkdownViewer/MarkdownViewer.tsx

@@ -8,7 +8,7 @@ import remarkGfm from 'remark-gfm';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export type MarkdownViewerProps = ThemedClassName<
   PropsWithChildren<{
@@ -36,21 +36,21 @@ export const MarkdownViewer = ({ classNames, children, components, content = ''
 
 const defaultComponents: ReactMarkdownOptions['components'] = {
   h1: ({ children }) => {
-    return <h1 className='pbs-1 pbe-1 text-xl'>{children}</h1>;
+    return <h1 className='pt-1 pb-1 text-accent-text text-xl'>{children}</h1>;
   },
   h2: ({ children }) => {
-    return <h2 className='pbs-1 pbe-1 text-lg'>{children}</h2>;
+    return <h2 className='pt-1 pb-1 text-accent-text text-lg'>{children}</h2>;
   },
   h3: ({ children }) => {
-    return <h3 className='pbs-1 pbe-1 text-base'>{children}</h3>;
+    return <h3 className='pt-1 pb-1 text-accent-text text-base'>{children}</h3>;
   },
   blockquote: ({ children, ...props }) => (
-    <blockquote className='pis-4 mbs-2 mbe-2 pbs-2 pbe-2 border-l-4 border-accentText text-accentText' {...props}>
+    <blockquote className='ps-4 mt-2 mb-2 pt-2 pb-2 border-l-4 border-accent-text text-accent-text' {...props}>
       {children}
     </blockquote>
   ),
   p: ({ children }) => {
-    return <div className='pbs-1 pbe-1'>{children}</div>;
+    return <div className='pt-1 pb-1'>{children}</div>;
   },
   a: ({ children, href, ...props }) => (
     <a
@@ -64,12 +64,12 @@ const defaultComponents: ReactMarkdownOptions['components'] = {
     </a>
   ),
   ol: ({ children, ...props }) => (
-    <ol className='pbs-1 pbe-1 pis-6 leading-tight list-decimal' {...props}>
+    <ol className='pt-1 pb-1 ps-6 leading-tight list-decimal' {...props}>
       {children}
     </ol>
   ),
   ul: ({ children, ...props }) => (
-    <ul className='pbs-1 pbe-1 pis-6 leading-tight list-disc' {...props}>
+    <ul className='pt-1 pb-1 ps-6 leading-tight list-disc' {...props}>
       {children}
     </ul>
   ),
@@ -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='mbs-2 mbe-2 border border-separator rounded-sm text-sm bg-groupSurface'
+        classNames='mt-2 mb-2 p-2 border border-separator rounded-xs text-sm bg-group-surface'
+        copyButton
         PreTag='pre'
       >
         {children}