mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-09-21 15:38:59 +03:00
GraphContent: unify rendering
This commit is contained in:
parent
6c5d13bce0
commit
c74ad3170e
@ -24,7 +24,13 @@ import { GraphContentWide } from './GraphContentWide';
|
|||||||
import { PropFunc } from '~/types';
|
import { PropFunc } from '~/types';
|
||||||
import fromMarkdown from 'mdast-util-from-markdown';
|
import fromMarkdown from 'mdast-util-from-markdown';
|
||||||
import Dot from '~/views/components/Dot';
|
import Dot from '~/views/components/Dot';
|
||||||
import { Root, Parent, Content as AstContent, BlockContent } from '@types/mdast';
|
import {
|
||||||
|
Root,
|
||||||
|
Parent,
|
||||||
|
Content as AstContent,
|
||||||
|
BlockContent,
|
||||||
|
} from '@types/mdast';
|
||||||
|
import { parseTall, parseWide } from './parse';
|
||||||
|
|
||||||
type StitchMode = 'merge' | 'block' | 'inline';
|
type StitchMode = 'merge' | 'block' | 'inline';
|
||||||
|
|
||||||
@ -44,19 +50,33 @@ interface GraphUrl {
|
|||||||
type: 'graph-url';
|
type: 'graph-url';
|
||||||
url: string;
|
url: string;
|
||||||
}
|
}
|
||||||
|
const codeToMdAst = (content: CodeContent) => {
|
||||||
|
return {
|
||||||
|
type: 'root',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: 'code',
|
||||||
|
value: content.code.expression
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'code',
|
||||||
|
value: (content.code.output || []).join('\n')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
function contentToMdAst(content: Content): [StitchMode, any] {
|
}
|
||||||
|
|
||||||
|
const contentToMdAst = (tall: boolean) => (
|
||||||
|
content: Content
|
||||||
|
): [StitchMode, any] => {
|
||||||
if ('text' in content) {
|
if ('text' in content) {
|
||||||
return ['merge', fromMarkdown(content.text)];
|
return ['merge', tall ? parseTall(content.text) : parseWide(content.text)] as [StitchMode, any];
|
||||||
} else if ('code' in content) {
|
} else if ('code' in content) {
|
||||||
return [
|
return [
|
||||||
'block',
|
'block',
|
||||||
fromMarkdown(`
|
codeToMdAst(content)
|
||||||
\`\`\`
|
|
||||||
${content.code.expression}
|
|
||||||
${(content.code.output || []).join('\n')}
|
|
||||||
\`\`\`
|
|
||||||
`),
|
|
||||||
];
|
];
|
||||||
} else if ('reference' in content) {
|
} else if ('reference' in content) {
|
||||||
return [
|
return [
|
||||||
@ -105,7 +125,7 @@ function contentToMdAst(content: Content): [StitchMode, any] {
|
|||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
}
|
};
|
||||||
|
|
||||||
function stitchInline(a: any, b: any) {
|
function stitchInline(a: any, b: any) {
|
||||||
if (!a?.children) {
|
if (!a?.children) {
|
||||||
@ -122,11 +142,9 @@ function stitchInline(a: any, b: any) {
|
|||||||
...a.children.slice(lastParaIdx + 1),
|
...a.children.slice(lastParaIdx + 1),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
//console.log(ros);
|
|
||||||
return ros;
|
return ros;
|
||||||
}
|
}
|
||||||
const res = { ...a, children: [...a.children, ...b] };
|
const res = { ...a, children: [...a.children, ...b] };
|
||||||
//console.log(res);
|
|
||||||
return res;
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -134,7 +152,7 @@ function last<T>(arr: T[]) {
|
|||||||
return arr[arr.length - 1];
|
return arr[arr.length - 1];
|
||||||
}
|
}
|
||||||
|
|
||||||
function getChildren<T extends any>(node: T): AstContent[] {
|
function getChildren<T extends {}>(node: T): AstContent[] {
|
||||||
if ('children' in node) {
|
if ('children' in node) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return node.children;
|
return node.children;
|
||||||
@ -227,8 +245,6 @@ const header = ({ children, depth, ...rest }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const tall = true;
|
|
||||||
|
|
||||||
const renderers = {
|
const renderers = {
|
||||||
heading: header,
|
heading: header,
|
||||||
inlineCode: ({ language, value }) => {
|
inlineCode: ({ language, value }) => {
|
||||||
@ -245,7 +261,7 @@ const renderers = {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
blockquote: ({ children }) => {
|
blockquote: ({ children, tall, ...rest }) => {
|
||||||
return (
|
return (
|
||||||
<Text
|
<Text
|
||||||
lineHeight="20px"
|
lineHeight="20px"
|
||||||
@ -253,6 +269,7 @@ const renderers = {
|
|||||||
borderLeft="1px solid"
|
borderLeft="1px solid"
|
||||||
color="black"
|
color="black"
|
||||||
paddingLeft={2}
|
paddingLeft={2}
|
||||||
|
py="1"
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</Text>
|
</Text>
|
||||||
@ -281,7 +298,8 @@ const renderers = {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
code: ({ language, value }) => {
|
code: ({ language, tall, value, ...rest }) => {
|
||||||
|
console.log(rest);
|
||||||
const inner = (
|
const inner = (
|
||||||
<Text
|
<Text
|
||||||
p="1"
|
p="1"
|
||||||
@ -332,30 +350,46 @@ const renderers = {
|
|||||||
export function Graphdown<T extends {} = {}>(
|
export function Graphdown<T extends {} = {}>(
|
||||||
props: {
|
props: {
|
||||||
ast: GraphAstNode;
|
ast: GraphAstNode;
|
||||||
|
tall?: boolean;
|
||||||
|
depth?: number;
|
||||||
} & T
|
} & T
|
||||||
) {
|
) {
|
||||||
const { ast, ...rest } = props;
|
const { ast, depth = 0, ...rest } = props;
|
||||||
const { type, children = [], ...nodeRest } = ast;
|
const { type, children = [], ...nodeRest } = ast;
|
||||||
const Renderer = renderers[ast.type] ?? (() => `unknown element: ${type}`);
|
const Renderer = renderers[ast.type] ?? (() => `unknown element: ${type}`);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Renderer {...rest} {...nodeRest}>
|
<Renderer depth={depth} {...rest} {...nodeRest}>
|
||||||
{children.map((c) => (
|
{children.map((c) => (
|
||||||
<Graphdown {...rest} ast={c} />
|
<Graphdown depth={depth+1} {...rest} ast={c} />
|
||||||
))}
|
))}
|
||||||
</Renderer>
|
</Renderer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function GraphContentTall(
|
export const GraphContent = React.memo(function GraphContent(
|
||||||
props: {
|
props: {
|
||||||
|
tall?: boolean;
|
||||||
transcluded?: number;
|
transcluded?: number;
|
||||||
post: Post;
|
contents: Content[];
|
||||||
api: GlobalApi;
|
api: GlobalApi;
|
||||||
showOurContact: boolean;
|
showOurContact: boolean;
|
||||||
} & PropFunc<typeof Box>
|
} & PropFunc<typeof Box>
|
||||||
) {
|
) {
|
||||||
const { post, transcluded = 0, showOurContact, api, ...rest } = props;
|
const {
|
||||||
const [, ast] = stitchAsts(post.contents.slice(1).map(contentToMdAst));
|
post,
|
||||||
return <Graphdown api={api} ast={ast} />;
|
contents,
|
||||||
}
|
tall = false,
|
||||||
|
transcluded = 0,
|
||||||
|
showOurContact,
|
||||||
|
api,
|
||||||
|
...rest
|
||||||
|
} = props;
|
||||||
|
const [,ast] = stitchAsts(contents.map(contentToMdAst(tall)));
|
||||||
|
return (
|
||||||
|
<Box {...rest}>
|
||||||
|
<Graphdown api={api} ast={ast} />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
33
pkg/interface/src/views/landscape/components/Graph/parse.ts
Normal file
33
pkg/interface/src/views/landscape/components/Graph/parse.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import remark from 'remark';
|
||||||
|
import RemarkDisableTokenizers from 'remark-disable-tokenizers';
|
||||||
|
|
||||||
|
const DISABLED_BLOCK_TOKENS = [
|
||||||
|
'indentedCode',
|
||||||
|
'atxHeading',
|
||||||
|
'thematicBreak',
|
||||||
|
'list',
|
||||||
|
'setextHeading',
|
||||||
|
'html',
|
||||||
|
'definition',
|
||||||
|
'table',
|
||||||
|
];
|
||||||
|
|
||||||
|
const DISABLED_INLINE_TOKENS = ['autoLink', 'url', 'email', 'reference'];
|
||||||
|
|
||||||
|
const tallParser = remark().freeze();
|
||||||
|
|
||||||
|
export const parseTall = (text: string) => tallParser.parse(text);
|
||||||
|
|
||||||
|
const wideParser = remark()
|
||||||
|
.use([
|
||||||
|
[
|
||||||
|
RemarkDisableTokenizers,
|
||||||
|
{
|
||||||
|
block: DISABLED_BLOCK_TOKENS,
|
||||||
|
inline: DISABLED_INLINE_TOKENS,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
])
|
||||||
|
.freeze();
|
||||||
|
|
||||||
|
export const parseWide = (text: string) => wideParser.parse(text);
|
Loading…
Reference in New Issue
Block a user