tcmd: image element, heading links
This commit is contained in:
parent
6ef8c20149
commit
2e9bfa1557
@ -2,7 +2,7 @@
|
||||
|
||||
import { createElements } from "@/lib/tcmd";
|
||||
import Link from "next/link";
|
||||
import React, { FC, ReactNode, use, useMemo } from "react";
|
||||
import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
|
||||
|
||||
export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
|
||||
const text = use(body);
|
||||
@ -27,10 +27,12 @@ const renderBlock = (block: BlockChildren): ReactNode => {
|
||||
style={{
|
||||
"--grid-cols": block.metadata.columns,
|
||||
} as React.CSSProperties}
|
||||
className="grid grid-cols-dynamic gap-x-8 gap-y-6"
|
||||
className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
|
||||
>
|
||||
{block.children.map((c, i) => (
|
||||
<div key={"block-grid" + c.type + i}>{renderBlock(c)}</div>
|
||||
<Fragment key={"block-grid" + c.type + i}>
|
||||
{renderBlock(c)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
@ -66,19 +68,37 @@ const renderToken = (t: Token) => {
|
||||
switch (t.type) {
|
||||
case "h1":
|
||||
return (
|
||||
<p className="font-bold text-2xl">
|
||||
<p
|
||||
id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
|
||||
" ",
|
||||
"-",
|
||||
)}
|
||||
className="font-bold text-2xl"
|
||||
>
|
||||
{renderInlineToken(t.line)}
|
||||
</p>
|
||||
);
|
||||
case "h2":
|
||||
return (
|
||||
<p className="font-bold text-xl">
|
||||
<p
|
||||
id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
|
||||
" ",
|
||||
"-",
|
||||
)}
|
||||
className="font-bold text-xl"
|
||||
>
|
||||
{renderInlineToken(t.line)}
|
||||
</p>
|
||||
);
|
||||
case "h3":
|
||||
return (
|
||||
<p className="font-bold text-lg">
|
||||
<p
|
||||
id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
|
||||
" ",
|
||||
"-",
|
||||
)}
|
||||
className="font-bold text-lg"
|
||||
>
|
||||
{renderInlineToken(t.line)}
|
||||
</p>
|
||||
);
|
||||
@ -124,6 +144,9 @@ const renderInlineToken = (l: Line) => {
|
||||
{token.content}
|
||||
</Link>
|
||||
);
|
||||
case "image":
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
return <img src={token.data.src} alt={token.content} />;
|
||||
default:
|
||||
return (
|
||||
<span className="bg-red-500">
|
||||
|
||||
@ -24,7 +24,7 @@ export const inlineTokens: {
|
||||
},
|
||||
},
|
||||
{
|
||||
rx: /\[(.*?)\]\((.*?)\)/g,
|
||||
rx: /(?<!\!)\[(.*?)\]\((.*?)\)/g,
|
||||
create(content, start, end, tokens) {
|
||||
const [_, label, href] = content;
|
||||
tokens.push({
|
||||
@ -42,4 +42,22 @@ export const inlineTokens: {
|
||||
// return l
|
||||
},
|
||||
},
|
||||
{
|
||||
rx: /!\[(.*?)\]\((.*?)\)/g,
|
||||
create(content, start, end, tokens) {
|
||||
const [_, alt, src] = content;
|
||||
tokens.push({
|
||||
content: alt,
|
||||
end,
|
||||
start,
|
||||
type: "image",
|
||||
data: {
|
||||
src,
|
||||
},
|
||||
});
|
||||
},
|
||||
replace(l) {
|
||||
return l;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
74
test.md
74
test.md
@ -60,4 +60,78 @@ const blockTokens: {
|
||||
|
||||
]]
|
||||
|
||||
[[
|
||||
|
||||
|
||||
|
||||
[Google link](https://google.com/)
|
||||
|
||||
]]
|
||||
|
||||
/[]
|
||||
|
||||
[][][][][]
|
||||
|
||||
[[
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua. Sollicitudin tempor id eu nisl nunc
|
||||
mi ipsum faucibus vitae. Lobortis elementum nibh tellus molestie nunc. Purus non
|
||||
enim praesent elementum facilisis leo vel. Orci nulla pellentesque dignissim
|
||||
enim sit amet venenatis. Eu feugiat pretium nibh ipsum. Gravida dictum fusce ut
|
||||
placerat orci nulla pellentesque. Tincidunt vitae semper quis lectus nulla at
|
||||
volutpat diam ut. Proin sed libero enim sed faucibus turpis in eu mi. Dui sapien
|
||||
eget mi proin sed libero enim sed faucibus. Felis donec et odio pellentesque
|
||||
diam volutpat commodo sed egestas. Massa tincidunt dui ut ornare lectus sit amet
|
||||
est placerat. Auctor urna nunc id cursus metus aliquam eleifend.
|
||||
|
||||
Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Ac turpis
|
||||
egestas sed tempus urna et pharetra pharetra. In arcu cursus euismod quis
|
||||
viverra nibh cras. Volutpat est velit egestas dui. Dictum non consectetur a erat
|
||||
nam at lectus urna. Vulputate eu scelerisque felis imperdiet. Pharetra pharetra
|
||||
massa massa ultricies mi. Nec ultrices dui sapien eget mi proin sed libero.
|
||||
Dictum at tempor commodo ullamcorper a lacus vestibulum. Odio morbi quis commodo
|
||||
odio aenean sed adipiscing diam. Euismod elementum nisi quis eleifend quam. Nisi
|
||||
est sit amet facilisis magna etiam tempor. Quisque id diam vel quam elementum.
|
||||
Quis blandit turpis cursus in hac habitasse. Mattis pellentesque id nibh tortor
|
||||
id aliquet lectus proin nibh. Sit amet consectetur adipiscing elit pellentesque
|
||||
habitant morbi tristique senectus. Nec tincidunt praesent semper feugiat. Quis
|
||||
risus sed vulputate odio ut enim blandit volutpat.
|
||||
|
||||
Cursus metus aliquam eleifend mi in nulla. Enim sit amet venenatis urna cursus
|
||||
eget. Adipiscing diam donec adipiscing tristique risus nec. Ullamcorper
|
||||
malesuada proin libero nunc consequat. Auctor neque vitae tempus quam
|
||||
pellentesque nec nam aliquam. Facilisi etiam dignissim diam quis enim. Ultrices
|
||||
dui sapien eget mi. Aliquet risus feugiat in ante metus dictum at. Leo vel orci
|
||||
porta non pulvinar. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis
|
||||
gravida. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo.
|
||||
Gravida dictum fusce ut placerat orci nulla pellentesque dignissim. Rhoncus est
|
||||
pellentesque elit ullamcorper dignissim cras tincidunt.
|
||||
|
||||
Platea dictumst vestibulum rhoncus est. Amet tellus cras adipiscing enim eu. Sit
|
||||
amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Egestas
|
||||
fringilla phasellus faucibus scelerisque. Ac turpis egestas integer eget aliquet
|
||||
nibh praesent tristique. Integer enim neque volutpat ac tincidunt. Nec feugiat
|
||||
nisl pretium fusce. Eget lorem dolor sed viverra ipsum nunc aliquet. Faucibus
|
||||
nisl tincidunt eget nullam. Lacus suspendisse faucibus interdum posuere lorem
|
||||
ipsum dolor sit amet. Adipiscing vitae proin sagittis nisl rhoncus mattis
|
||||
rhoncus. Porta lorem mollis aliquam ut. Blandit volutpat maecenas volutpat
|
||||
blandit. Sed libero enim sed faucibus turpis. In hendrerit gravida rutrum
|
||||
quisque non tellus. A erat nam at lectus urna duis convallis convallis tellus.
|
||||
Pellentesque elit ullamcorper dignissim cras tincidunt. Eget nunc lobortis
|
||||
mattis aliquam faucibus purus in massa. Purus in massa tempor nec feugiat nisl
|
||||
pretium fusce id.
|
||||
|
||||
Quisque non tellus orci ac. Varius morbi enim nunc faucibus a pellentesque sit
|
||||
amet. Purus semper eget duis at tellus at urna condimentum mattis. Et malesuada
|
||||
fames ac turpis. Pellentesque id nibh tortor id. Turpis tincidunt id aliquet
|
||||
risus feugiat in ante metus. Pharetra et ultrices neque ornare aenean euismod
|
||||
elementum nisi. Scelerisque eu ultrices vitae auctor eu augue ut. Massa placerat
|
||||
duis ultricies lacus sed. Ornare arcu odio ut sem. Adipiscing diam donec
|
||||
adipiscing tristique risus nec feugiat.
|
||||
|
||||
[Top](#hello-welcome-to-tabletop-commander)
|
||||
|
||||
]]
|
||||
|
||||
/[]
|
||||
|
||||
2
types.d.ts
vendored
2
types.d.ts
vendored
@ -1,5 +1,5 @@
|
||||
type InlineToken = {
|
||||
type: "text" | "bold" | "anchor";
|
||||
type: "text" | "bold" | "anchor" | "image";
|
||||
content: string;
|
||||
data?: any;
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user