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

package/dist/lib/browser/index.mjs

@@ -1,52 +1,46 @@
 // src/MarkdownViewer/MarkdownViewer.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
-import { mx } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/ui-theme";
 var MarkdownViewer = ({ classNames, children, components, content = "" }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: mx(classNames)
-    }, /* @__PURE__ */ React.createElement(ReactMarkdown, {
-      remarkPlugins: [
-        remarkGfm
-      ],
-      skipHtml: true,
-      components: {
-        ...defaultComponents,
-        ...components
-      }
-    }, content), children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: mx(classNames)
+  }, /* @__PURE__ */ React.createElement(ReactMarkdown, {
+    remarkPlugins: [
+      remarkGfm
+    ],
+    skipHtml: true,
+    components: {
+      ...defaultComponents,
+      ...components
+    }
+  }, content), children);
 };
 var defaultComponents = {
   h1: ({ children }) => {
     return /* @__PURE__ */ React.createElement("h1", {
-      className: "pbs-1 pbe-1 text-xl"
+      className: "pt-1 pb-1 text-accent-text text-xl"
     }, children);
   },
   h2: ({ children }) => {
     return /* @__PURE__ */ React.createElement("h2", {
-      className: "pbs-1 pbe-1 text-lg"
+      className: "pt-1 pb-1 text-accent-text text-lg"
     }, children);
   },
   h3: ({ children }) => {
     return /* @__PURE__ */ React.createElement("h3", {
-      className: "pbs-1 pbe-1 text-base"
+      className: "pt-1 pb-1 text-accent-text text-base"
     }, children);
   },
   blockquote: ({ children, ...props }) => /* @__PURE__ */ React.createElement("blockquote", {
-    className: "pis-4 mbs-2 mbe-2 pbs-2 pbe-2 border-l-4 border-accentText text-accentText",
+    className: "ps-4 mt-2 mb-2 pt-2 pb-2 border-l-4 border-accent-text text-accent-text",
     ...props
   }, children),
   p: ({ children }) => {
     return /* @__PURE__ */ React.createElement("div", {
-      className: "pbs-1 pbe-1"
+      className: "pt-1 pb-1"
     }, children);
   },
   a: ({ children, href, ...props }) => /* @__PURE__ */ React.createElement("a", {
@@ -57,11 +51,11 @@ var defaultComponents = {
     ...props
   }, children),
   ol: ({ children, ...props }) => /* @__PURE__ */ React.createElement("ol", {
-    className: "pbs-1 pbe-1 pis-6 leading-tight list-decimal",
+    className: "pt-1 pb-1 ps-6 leading-tight list-decimal",
     ...props
   }, children),
   ul: ({ children, ...props }) => /* @__PURE__ */ React.createElement("ul", {
-    className: "pbs-1 pbe-1 pis-6 leading-tight list-disc",
+    className: "pt-1 pb-1 ps-6 leading-tight list-disc",
     ...props
   }, children),
   li: ({ children, ...props }) => /* @__PURE__ */ React.createElement("li", {
@@ -69,12 +63,18 @@ var defaultComponents = {
     ...props
   }, children),
   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 /* @__PURE__ */ React.createElement("code", {
+        className: "rounded-xs bg-group-surface px-1 py-0.5 text-sm text-info-text"
+      }, children);
+    }
     return /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
       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: true,
       PreTag: "pre"
     }, children);
   }

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MarkdownViewer/MarkdownViewer.tsx"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\nimport ReactMarkdown, { type Options as ReactMarkdownOptions } from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type MarkdownViewerProps = ThemedClassName<\n  PropsWithChildren<{\n    content?: string;\n    components?: ReactMarkdownOptions['components'];\n  }>\n>;\n\n/**\n * Transforms markdown text into react elements.\n * https://github.com/remarkjs/react-markdown\n * markdown -> remark -> [mdast -> remark plugins] -> [hast -> rehype plugins] -> components -> react elements.\n * Consider using @dxos/react-ui-editor.\n */\nexport const MarkdownViewer = ({ classNames, children, components, content = '' }: MarkdownViewerProps) => {\n  return (\n    <div className={mx(classNames)}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]} skipHtml components={{ ...defaultComponents, ...components }}>\n        {content}\n      </ReactMarkdown>\n      {children}\n    </div>\n  );\n};\n\nconst defaultComponents: ReactMarkdownOptions['components'] = {\n  h1: ({ children }) => {\n    return <h1 className='pbs-1 pbe-1 text-xl'>{children}</h1>;\n  },\n  h2: ({ children }) => {\n    return <h2 className='pbs-1 pbe-1 text-lg'>{children}</h2>;\n  },\n  h3: ({ children }) => {\n    return <h3 className='pbs-1 pbe-1 text-base'>{children}</h3>;\n  },\n  blockquote: ({ children, ...props }) => (\n    <blockquote className='pis-4 mbs-2 mbe-2 pbs-2 pbe-2 border-l-4 border-accentText text-accentText' {...props}>\n      {children}\n    </blockquote>\n  ),\n  p: ({ children }) => {\n    return <div className='pbs-1 pbe-1'>{children}</div>;\n  },\n  a: ({ children, href, ...props }) => (\n    <a\n      href={href}\n      className='text-primary-500 hover:text-primary-500' // TODO(burdon): Use link token.\n      target='_blank'\n      rel='noopener noreferrer'\n      {...props}\n    >\n      {children}\n    </a>\n  ),\n  ol: ({ children, ...props }) => (\n    <ol className='pbs-1 pbe-1 pis-6 leading-tight list-decimal' {...props}>\n      {children}\n    </ol>\n  ),\n  ul: ({ children, ...props }) => (\n    <ul className='pbs-1 pbe-1 pis-6 leading-tight list-disc' {...props}>\n      {children}\n    </ul>\n  ),\n  li: ({ children, ...props }) => (\n    <li className='' {...props}>\n      {children}\n    </li>\n  ),\n  pre: ({ children }) => children,\n  // TODO(burdon): Copy/paste button.\n  code: ({ children, className }) => {\n    const [, language] = /language-(\\w+)/.exec(className || '') || [];\n    return (\n      <SyntaxHighlighter\n        language={language}\n        classNames='mbs-2 mbe-2 border border-separator rounded-sm text-sm bg-groupSurface'\n        PreTag='pre'\n      >\n        {children}\n      </SyntaxHighlighter>\n    );\n  },\n};\n"],
-  "mappings": ";;AAIA,OAAOA,WAAuC;AAC9C,OAAOC,mBAA6D;AACpE,OAAOC,eAAe;AAGtB,SAASC,yBAAyB;AAClC,SAASC,UAAU;AAeZ,IAAMC,iBAAiB,CAAC,EAAEC,YAAYC,UAAUC,YAAYC,UAAU,GAAE,MAAuB;;;AACpG,WACE,sBAAA,cAACC,OAAAA;MAAIC,WAAWC,GAAGN,UAAAA;OACjB,sBAAA,cAACO,eAAAA;MAAcC,eAAe;QAACC;;MAAYC,UAAAA;MAASR,YAAY;QAAE,GAAGS;QAAmB,GAAGT;MAAW;OACnGC,OAAAA,GAEFF,QAAAA;;;;AAGP;AAEA,IAAMU,oBAAwD;EAC5DC,IAAI,CAAC,EAAEX,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACW,MAAAA;MAAGP,WAAU;OAAuBJ,QAAAA;EAC9C;EACAY,IAAI,CAAC,EAAEZ,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACY,MAAAA;MAAGR,WAAU;OAAuBJ,QAAAA;EAC9C;EACAa,IAAI,CAAC,EAAEb,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACa,MAAAA;MAAGT,WAAU;OAAyBJ,QAAAA;EAChD;EACAc,YAAY,CAAC,EAAEd,UAAU,GAAGe,MAAAA,MAC1B,sBAAA,cAACD,cAAAA;IAAWV,WAAU;IAA8E,GAAGW;KACpGf,QAAAA;EAGLgB,GAAG,CAAC,EAAEhB,SAAQ,MAAE;AACd,WAAO,sBAAA,cAACG,OAAAA;MAAIC,WAAU;OAAeJ,QAAAA;EACvC;EACAiB,GAAG,CAAC,EAAEjB,UAAUkB,MAAM,GAAGH,MAAAA,MACvB,sBAAA,cAACE,KAAAA;IACCC;IACAd,WAAU;IACVe,QAAO;IACPC,KAAI;IACH,GAAGL;KAEHf,QAAAA;EAGLqB,IAAI,CAAC,EAAErB,UAAU,GAAGe,MAAAA,MAClB,sBAAA,cAACM,MAAAA;IAAGjB,WAAU;IAAgD,GAAGW;KAC9Df,QAAAA;EAGLsB,IAAI,CAAC,EAAEtB,UAAU,GAAGe,MAAAA,MAClB,sBAAA,cAACO,MAAAA;IAAGlB,WAAU;IAA6C,GAAGW;KAC3Df,QAAAA;EAGLuB,IAAI,CAAC,EAAEvB,UAAU,GAAGe,MAAAA,MAClB,sBAAA,cAACQ,MAAAA;IAAGnB,WAAU;IAAI,GAAGW;KAClBf,QAAAA;EAGLwB,KAAK,CAAC,EAAExB,SAAQ,MAAOA;;EAEvByB,MAAM,CAAC,EAAEzB,UAAUI,UAAS,MAAE;AAC5B,UAAM,CAAA,EAAGsB,QAAAA,IAAY,iBAAiBC,KAAKvB,aAAa,EAAA,KAAO,CAAA;AAC/D,WACE,sBAAA,cAACwB,mBAAAA;MACCF;MACA3B,YAAW;MACX8B,QAAO;OAEN7B,QAAAA;EAGP;AACF;",
-  "names": ["React", "ReactMarkdown", "remarkGfm", "SyntaxHighlighter", "mx", "MarkdownViewer", "classNames", "children", "components", "content", "div", "className", "mx", "ReactMarkdown", "remarkPlugins", "remarkGfm", "skipHtml", "defaultComponents", "h1", "h2", "h3", "blockquote", "props", "p", "a", "href", "target", "rel", "ol", "ul", "li", "pre", "code", "language", "exec", "SyntaxHighlighter", "PreTag"]
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\nimport ReactMarkdown, { type Options as ReactMarkdownOptions } from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';\nimport { mx } from '@dxos/ui-theme';\n\nexport type MarkdownViewerProps = ThemedClassName<\n  PropsWithChildren<{\n    content?: string;\n    components?: ReactMarkdownOptions['components'];\n  }>\n>;\n\n/**\n * Transforms markdown text into react elements.\n * https://github.com/remarkjs/react-markdown\n * markdown -> remark -> [mdast -> remark plugins] -> [hast -> rehype plugins] -> components -> react elements.\n * Consider using @dxos/react-ui-editor.\n */\nexport const MarkdownViewer = ({ classNames, children, components, content = '' }: MarkdownViewerProps) => {\n  return (\n    <div className={mx(classNames)}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]} skipHtml components={{ ...defaultComponents, ...components }}>\n        {content}\n      </ReactMarkdown>\n      {children}\n    </div>\n  );\n};\n\nconst defaultComponents: ReactMarkdownOptions['components'] = {\n  h1: ({ children }) => {\n    return <h1 className='pt-1 pb-1 text-accent-text text-xl'>{children}</h1>;\n  },\n  h2: ({ children }) => {\n    return <h2 className='pt-1 pb-1 text-accent-text text-lg'>{children}</h2>;\n  },\n  h3: ({ children }) => {\n    return <h3 className='pt-1 pb-1 text-accent-text text-base'>{children}</h3>;\n  },\n  blockquote: ({ children, ...props }) => (\n    <blockquote className='ps-4 mt-2 mb-2 pt-2 pb-2 border-l-4 border-accent-text text-accent-text' {...props}>\n      {children}\n    </blockquote>\n  ),\n  p: ({ children }) => {\n    return <div className='pt-1 pb-1'>{children}</div>;\n  },\n  a: ({ children, href, ...props }) => (\n    <a\n      href={href}\n      className='text-primary-500 hover:text-primary-500' // TODO(burdon): Use link token.\n      target='_blank'\n      rel='noopener noreferrer'\n      {...props}\n    >\n      {children}\n    </a>\n  ),\n  ol: ({ children, ...props }) => (\n    <ol className='pt-1 pb-1 ps-6 leading-tight list-decimal' {...props}>\n      {children}\n    </ol>\n  ),\n  ul: ({ children, ...props }) => (\n    <ul className='pt-1 pb-1 ps-6 leading-tight list-disc' {...props}>\n      {children}\n    </ul>\n  ),\n  li: ({ children, ...props }) => (\n    <li className='' {...props}>\n      {children}\n    </li>\n  ),\n  pre: ({ children }) => children,\n  code: ({ children, className, node }) => {\n    const [, language] = /language-(\\w+)/.exec(className || '') || [];\n    const inline = !className && node?.position?.start.line === node?.position?.end.line;\n    if (inline) {\n      return <code className='rounded-xs bg-group-surface px-1 py-0.5 text-sm text-info-text'>{children}</code>;\n    }\n\n    return (\n      <SyntaxHighlighter\n        language={language}\n        classNames='mt-2 mb-2 p-2 border border-separator rounded-xs text-sm bg-group-surface'\n        copyButton\n        PreTag='pre'\n      >\n        {children}\n      </SyntaxHighlighter>\n    );\n  },\n};\n"],
+  "mappings": ";AAIA,OAAOA,WAAuC;AAC9C,OAAOC,mBAA6D;AACpE,OAAOC,eAAe;AAGtB,SAASC,yBAAyB;AAClC,SAASC,UAAU;AAeZ,IAAMC,iBAAiB,CAAC,EAAEC,YAAYC,UAAUC,YAAYC,UAAU,GAAE,MAAuB;AACpG,SACE,sBAAA,cAACC,OAAAA;IAAIC,WAAWC,GAAGN,UAAAA;KACjB,sBAAA,cAACO,eAAAA;IAAcC,eAAe;MAACC;;IAAYC,UAAAA;IAASR,YAAY;MAAE,GAAGS;MAAmB,GAAGT;IAAW;KACnGC,OAAAA,GAEFF,QAAAA;AAGP;AAEA,IAAMU,oBAAwD;EAC5DC,IAAI,CAAC,EAAEX,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACW,MAAAA;MAAGP,WAAU;OAAsCJ,QAAAA;EAC7D;EACAY,IAAI,CAAC,EAAEZ,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACY,MAAAA;MAAGR,WAAU;OAAsCJ,QAAAA;EAC7D;EACAa,IAAI,CAAC,EAAEb,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACa,MAAAA;MAAGT,WAAU;OAAwCJ,QAAAA;EAC/D;EACAc,YAAY,CAAC,EAAEd,UAAU,GAAGe,MAAAA,MAC1B,sBAAA,cAACD,cAAAA;IAAWV,WAAU;IAA2E,GAAGW;KACjGf,QAAAA;EAGLgB,GAAG,CAAC,EAAEhB,SAAQ,MAAE;AACd,WAAO,sBAAA,cAACG,OAAAA;MAAIC,WAAU;OAAaJ,QAAAA;EACrC;EACAiB,GAAG,CAAC,EAAEjB,UAAUkB,MAAM,GAAGH,MAAAA,MACvB,sBAAA,cAACE,KAAAA;IACCC;IACAd,WAAU;IACVe,QAAO;IACPC,KAAI;IACH,GAAGL;KAEHf,QAAAA;EAGLqB,IAAI,CAAC,EAAErB,UAAU,GAAGe,MAAAA,MAClB,sBAAA,cAACM,MAAAA;IAAGjB,WAAU;IAA6C,GAAGW;KAC3Df,QAAAA;EAGLsB,IAAI,CAAC,EAAEtB,UAAU,GAAGe,MAAAA,MAClB,sBAAA,cAACO,MAAAA;IAAGlB,WAAU;IAA0C,GAAGW;KACxDf,QAAAA;EAGLuB,IAAI,CAAC,EAAEvB,UAAU,GAAGe,MAAAA,MAClB,sBAAA,cAACQ,MAAAA;IAAGnB,WAAU;IAAI,GAAGW;KAClBf,QAAAA;EAGLwB,KAAK,CAAC,EAAExB,SAAQ,MAAOA;EACvByB,MAAM,CAAC,EAAEzB,UAAUI,WAAWsB,KAAI,MAAE;AAClC,UAAM,CAAA,EAAGC,QAAAA,IAAY,iBAAiBC,KAAKxB,aAAa,EAAA,KAAO,CAAA;AAC/D,UAAMyB,SAAS,CAACzB,aAAasB,MAAMI,UAAUC,MAAMC,SAASN,MAAMI,UAAUG,IAAID;AAChF,QAAIH,QAAQ;AACV,aAAO,sBAAA,cAACJ,QAAAA;QAAKrB,WAAU;SAAkEJ,QAAAA;IAC3F;AAEA,WACE,sBAAA,cAACkC,mBAAAA;MACCP;MACA5B,YAAW;MACXoC,YAAAA;MACAC,QAAO;OAENpC,QAAAA;EAGP;AACF;",
+  "names": ["React", "ReactMarkdown", "remarkGfm", "SyntaxHighlighter", "mx", "MarkdownViewer", "classNames", "children", "components", "content", "div", "className", "mx", "ReactMarkdown", "remarkPlugins", "remarkGfm", "skipHtml", "defaultComponents", "h1", "h2", "h3", "blockquote", "props", "p", "a", "href", "target", "rel", "ol", "ul", "li", "pre", "code", "node", "language", "exec", "inline", "position", "start", "line", "end", "SyntaxHighlighter", "copyButton", "PreTag"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/MarkdownViewer/MarkdownViewer.tsx":{"bytes":9923,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-markdown","kind":"import-statement","external":true},{"path":"remark-gfm","kind":"import-statement","external":true},{"path":"@dxos/react-ui-syntax-highlighter","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/MarkdownViewer/index.ts":{"bytes":489,"imports":[{"path":"src/MarkdownViewer/MarkdownViewer.tsx","kind":"import-statement","original":"./MarkdownViewer"}],"format":"esm"},"src/index.ts":{"bytes":474,"imports":[{"path":"src/MarkdownViewer/index.ts","kind":"import-statement","original":"./MarkdownViewer"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":4985},"dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-markdown","kind":"import-statement","external":true},{"path":"remark-gfm","kind":"import-statement","external":true},{"path":"@dxos/react-ui-syntax-highlighter","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["MarkdownViewer"],"entryPoint":"src/index.ts","inputs":{"src/MarkdownViewer/MarkdownViewer.tsx":{"bytesInOutput":2694},"src/MarkdownViewer/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":2799}}}
+{"inputs":{"src/MarkdownViewer/MarkdownViewer.tsx":{"bytes":10639,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-markdown","kind":"import-statement","external":true},{"path":"remark-gfm","kind":"import-statement","external":true},{"path":"@dxos/react-ui-syntax-highlighter","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/MarkdownViewer/index.ts":{"bytes":489,"imports":[{"path":"src/MarkdownViewer/MarkdownViewer.tsx","kind":"import-statement","original":"./MarkdownViewer"}],"format":"esm"},"src/index.ts":{"bytes":474,"imports":[{"path":"src/MarkdownViewer/index.ts","kind":"import-statement","original":"./MarkdownViewer"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":5464},"dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-markdown","kind":"import-statement","external":true},{"path":"remark-gfm","kind":"import-statement","external":true},{"path":"@dxos/react-ui-syntax-highlighter","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["MarkdownViewer"],"entryPoint":"src/index.ts","inputs":{"src/MarkdownViewer/MarkdownViewer.tsx":{"bytesInOutput":2815},"src/MarkdownViewer/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":2920}}}