@dxos/react-ui-markdown 0.8.4-main.3c1ae3b → 0.8.4-main.937b3ca
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +13 -19
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +30 -28
- package/src/MarkdownViewer/MarkdownViewer.stories.tsx +1 -1
- package/src/MarkdownViewer/MarkdownViewer.tsx +1 -1
|
@@ -1,28 +1,22 @@
|
|
|
1
1
|
// src/MarkdownViewer/MarkdownViewer.tsx
|
|
2
|
-
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
3
2
|
import React from "react";
|
|
4
3
|
import ReactMarkdown from "react-markdown";
|
|
5
4
|
import remarkGfm from "remark-gfm";
|
|
6
5
|
import { SyntaxHighlighter } from "@dxos/react-ui-syntax-highlighter";
|
|
7
|
-
import { mx } from "@dxos/
|
|
6
|
+
import { mx } from "@dxos/ui-theme";
|
|
8
7
|
var MarkdownViewer = ({ classNames, children, components, content = "" }) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
components
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
}, content), children);
|
|
23
|
-
} finally {
|
|
24
|
-
_effect.f();
|
|
25
|
-
}
|
|
8
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
9
|
+
className: mx(classNames)
|
|
10
|
+
}, /* @__PURE__ */ React.createElement(ReactMarkdown, {
|
|
11
|
+
remarkPlugins: [
|
|
12
|
+
remarkGfm
|
|
13
|
+
],
|
|
14
|
+
skipHtml: true,
|
|
15
|
+
components: {
|
|
16
|
+
...defaultComponents,
|
|
17
|
+
...components
|
|
18
|
+
}
|
|
19
|
+
}, content), children);
|
|
26
20
|
};
|
|
27
21
|
var defaultComponents = {
|
|
28
22
|
h1: ({ children }) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MarkdownViewer/MarkdownViewer.tsx"],
|
|
4
|
-
"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/
|
|
5
|
-
"mappings": "
|
|
4
|
+
"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='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"],
|
|
5
|
+
"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;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;",
|
|
6
6
|
"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"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/MarkdownViewer/MarkdownViewer.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/MarkdownViewer/MarkdownViewer.tsx":{"bytes":9683,"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":4973},"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":2509},"src/MarkdownViewer/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":2614}}}
|