@dxos/react-ui-markdown 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae
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 +8 -8
- 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 +21 -21
- package/src/MarkdownViewer/MarkdownViewer.stories.tsx +2 -2
- package/src/MarkdownViewer/MarkdownViewer.tsx +8 -8
|
@@ -21,26 +21,26 @@ var MarkdownViewer = ({ classNames, children, components, content = "" }) => {
|
|
|
21
21
|
var defaultComponents = {
|
|
22
22
|
h1: ({ children }) => {
|
|
23
23
|
return /* @__PURE__ */ React.createElement("h1", {
|
|
24
|
-
className: "
|
|
24
|
+
className: "pt-1 pb-1 text-xl"
|
|
25
25
|
}, children);
|
|
26
26
|
},
|
|
27
27
|
h2: ({ children }) => {
|
|
28
28
|
return /* @__PURE__ */ React.createElement("h2", {
|
|
29
|
-
className: "
|
|
29
|
+
className: "pt-1 pb-1 text-lg"
|
|
30
30
|
}, children);
|
|
31
31
|
},
|
|
32
32
|
h3: ({ children }) => {
|
|
33
33
|
return /* @__PURE__ */ React.createElement("h3", {
|
|
34
|
-
className: "
|
|
34
|
+
className: "pt-1 pb-1 text-base"
|
|
35
35
|
}, children);
|
|
36
36
|
},
|
|
37
37
|
blockquote: ({ children, ...props }) => /* @__PURE__ */ React.createElement("blockquote", {
|
|
38
|
-
className: "
|
|
38
|
+
className: "ps-4 mt-2 mb-2 pt-2 pb-2 border-l-4 border-accent-text text-accent-text",
|
|
39
39
|
...props
|
|
40
40
|
}, children),
|
|
41
41
|
p: ({ children }) => {
|
|
42
42
|
return /* @__PURE__ */ React.createElement("div", {
|
|
43
|
-
className: "
|
|
43
|
+
className: "pt-1 pb-1"
|
|
44
44
|
}, children);
|
|
45
45
|
},
|
|
46
46
|
a: ({ children, href, ...props }) => /* @__PURE__ */ React.createElement("a", {
|
|
@@ -51,11 +51,11 @@ var defaultComponents = {
|
|
|
51
51
|
...props
|
|
52
52
|
}, children),
|
|
53
53
|
ol: ({ children, ...props }) => /* @__PURE__ */ React.createElement("ol", {
|
|
54
|
-
className: "
|
|
54
|
+
className: "pt-1 pb-1 ps-6 leading-tight list-decimal",
|
|
55
55
|
...props
|
|
56
56
|
}, children),
|
|
57
57
|
ul: ({ children, ...props }) => /* @__PURE__ */ React.createElement("ul", {
|
|
58
|
-
className: "
|
|
58
|
+
className: "pt-1 pb-1 ps-6 leading-tight list-disc",
|
|
59
59
|
...props
|
|
60
60
|
}, children),
|
|
61
61
|
li: ({ children, ...props }) => /* @__PURE__ */ React.createElement("li", {
|
|
@@ -68,7 +68,7 @@ var defaultComponents = {
|
|
|
68
68
|
const [, language] = /language-(\w+)/.exec(className || "") || [];
|
|
69
69
|
return /* @__PURE__ */ React.createElement(SyntaxHighlighter, {
|
|
70
70
|
language,
|
|
71
|
-
classNames: "
|
|
71
|
+
classNames: "mt-2 mb-2 border border-separator rounded-xs text-sm bg-group-surface",
|
|
72
72
|
PreTag: "pre"
|
|
73
73
|
}, children);
|
|
74
74
|
}
|
|
@@ -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/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='
|
|
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;
|
|
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='pt-1 pb-1 text-xl'>{children}</h1>;\n },\n h2: ({ children }) => {\n return <h2 className='pt-1 pb-1 text-lg'>{children}</h2>;\n },\n h3: ({ children }) => {\n return <h3 className='pt-1 pb-1 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 // 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='mt-2 mb-2 border border-separator rounded-xs text-sm bg-group-surface'\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;OAAqBJ,QAAAA;EAC5C;EACAY,IAAI,CAAC,EAAEZ,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACY,MAAAA;MAAGR,WAAU;OAAqBJ,QAAAA;EAC5C;EACAa,IAAI,CAAC,EAAEb,SAAQ,MAAE;AACf,WAAO,sBAAA,cAACa,MAAAA;MAAGT,WAAU;OAAuBJ,QAAAA;EAC9C;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;;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":9641,"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":4955},"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":2491},"src/MarkdownViewer/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":2596}}}
|