@dxos/react-ui-markdown 0.8.4-main.21d9917

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@dxos/react-ui-markdown",
+  "version": "0.8.4-main.21d9917",
+  "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",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "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",
+    "@lezer/xml": "^1.0.6",
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@radix-ui/react-context": "1.1.1",
+    "effect": "3.19.11",
+    "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.21d9917",
+    "@dxos/echo": "0.8.4-main.21d9917",
+    "@dxos/invariant": "0.8.4-main.21d9917",
+    "@dxos/react-ui-editor": "0.8.4-main.21d9917",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.21d9917",
+    "@dxos/log": "0.8.4-main.21d9917",
+    "@dxos/util": "0.8.4-main.21d9917"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "7.1.9",
+    "@dxos/lit-ui": "0.8.4-main.21d9917",
+    "@dxos/random": "0.8.4-main.21d9917",
+    "@dxos/react-client": "0.8.4-main.21d9917",
+    "@dxos/react-ui": "0.8.4-main.21d9917",
+    "@dxos/storybook-utils": "0.8.4-main.21d9917",
+    "@dxos/echo": "0.8.4-main.21d9917",
+    "@dxos/ui-theme": "0.8.4-main.21d9917",
+    "@dxos/schema": "0.8.4-main.21d9917"
+  },
+  "peerDependencies": {
+    "effect": "3.19.11",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.21d9917",
+    "@dxos/react-ui": "0.8.4-main.21d9917"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/MarkdownViewer/MarkdownViewer.stories.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { trim } from '@dxos/util';
+
+import { MarkdownViewer } from './MarkdownViewer';
+
+faker.seed(0);
+
+const meta = {
+  title: 'ui/react-ui-markdown/MarkdownViewer',
+  component: MarkdownViewer,
+  decorators: [withTheme, withLayout({ layout: 'column' })],
+} satisfies Meta<typeof MarkdownViewer>;
+
+export default meta;
+
+type Story = StoryObj<typeof MarkdownViewer>;
+
+const content = trim`
+  # Hello World!
+
+  > An example of the MarkdownViewer component.
+
+  ${faker.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
+
+  ${faker.lorem.paragraphs(1)}
+`;
+
+export const Default: Story = {
+  args: {
+    classNames: 'p-4 border border-border rounded-md overflow-y-auto bg-baseSurface',
+    content,
+  },
+};

package/src/MarkdownViewer/MarkdownViewer.tsx

@@ -0,0 +1,95 @@
+//
+// 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 MarkdownViewerProps = 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 MarkdownViewer = ({ classNames, children, components, content = '' }: MarkdownViewerProps) => {
+  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='pbs-1 pbe-1 text-xl'>{children}</h1>;
+  },
+  h2: ({ children }) => {
+    return <h2 className='pbs-1 pbe-1 text-lg'>{children}</h2>;
+  },
+  h3: ({ children }) => {
+    return <h3 className='pbs-1 pbe-1 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}>
+      {children}
+    </blockquote>
+  ),
+  p: ({ children }) => {
+    return <div className='pbs-1 pbe-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='pbs-1 pbe-1 pis-6 leading-tight list-decimal' {...props}>
+      {children}
+    </ol>
+  ),
+  ul: ({ children, ...props }) => (
+    <ul className='pbs-1 pbe-1 pis-6 leading-tight list-disc' {...props}>
+      {children}
+    </ul>
+  ),
+  li: ({ children, ...props }) => (
+    <li className='' {...props}>
+      {children}
+    </li>
+  ),
+  pre: ({ children }) => children,
+  // TODO(burdon): Copy/paste button.
+  code: ({ children, className }) => {
+    const [, language] = /language-(\w+)/.exec(className || '') || [];
+    return (
+      <SyntaxHighlighter
+        language={language}
+        classNames='mbs-2 mbe-2 border border-separator rounded-sm text-sm bg-groupSurface'
+        PreTag='pre'
+      >
+        {children}
+      </SyntaxHighlighter>
+    );
+  },
+};

package/src/MarkdownViewer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownViewer';

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './MarkdownViewer';

package/src/typings.d.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+declare module '*.md?raw' {
+  const content: string;
+  export default content;
+}