ul done and dusted
This commit is contained in:
@@ -12,6 +12,12 @@ import StaticGenerationSearchParamsBailoutProvider from "next/dist/client/compon
|
||||
export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
|
||||
const text = use(body);
|
||||
const [elements, tabSpacing] = useMemo(() => createElements(text), [text]);
|
||||
const tada = useMemo(
|
||||
() => (
|
||||
<>{renderer(elements.filter((e) => !e.parent).map((e) => e.token!))}</>
|
||||
),
|
||||
[elements],
|
||||
);
|
||||
return (
|
||||
<div className="text-lg col-span-2">
|
||||
<div>
|
||||
@@ -24,7 +30,7 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
|
||||
</button>
|
||||
</div>
|
||||
{/* {elements.map((e, i) => <Fragment key={e.uuid}>{render(e)}</Fragment>)} */}
|
||||
{renderer(elements.map((e) => e.token!), tabSpacing)}
|
||||
{tada}
|
||||
</div>
|
||||
// <div className="grid grid-cols-3">
|
||||
// {/* <pre suppressHydrationWarning>{JSON.stringify(elements,null,2)}</pre> */}
|
||||
@@ -32,14 +38,14 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const renderer = (tokens: Token[], tabSpacing: number) => {
|
||||
function renderer(tokens: Token[]) {
|
||||
const usedIds: string[] = [];
|
||||
return tokens.map((t) => (
|
||||
<div className="p" key={t.uuid}>{render(t, usedIds, tabSpacing)}</div>
|
||||
<div className="p" key={t.uuid}>{render(t, usedIds)}</div>
|
||||
));
|
||||
};
|
||||
}
|
||||
|
||||
const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
function render(token: Token, usedIds: string[]) {
|
||||
switch (token.type) {
|
||||
case "heading":
|
||||
return (
|
||||
@@ -66,7 +72,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
>
|
||||
{token.children?.map((c, i) => (
|
||||
<div key={c.uuid}>
|
||||
{render(c, usedIds, tabSpacing)}
|
||||
{render(c, usedIds)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -82,7 +88,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
<div className="card mb-6">
|
||||
{token.children?.map((e) => (
|
||||
<Fragment key={e.uuid}>
|
||||
{render(e, usedIds, tabSpacing)}
|
||||
{render(e, usedIds)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
@@ -123,7 +129,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
case "popover":
|
||||
return (
|
||||
<Poppable
|
||||
content={token.children?.map((c) => render(c, usedIds, tabSpacing)) ||
|
||||
content={token.children?.map((c) => render(c, usedIds)) ||
|
||||
token.content}
|
||||
preferredAlign="centered"
|
||||
preferredEdge="bottom"
|
||||
@@ -141,7 +147,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
<div className="p">
|
||||
{token.children?.map((e, i) => (
|
||||
<Fragment key={e.uuid}>
|
||||
{render(e, usedIds, tabSpacing)}
|
||||
{render(e, usedIds)}
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
@@ -155,7 +161,7 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
<AccordionContent>
|
||||
{token.children?.map((e, i) => (
|
||||
<Fragment key={e.uuid}>
|
||||
{render(e, usedIds, tabSpacing)}
|
||||
{render(e, usedIds)}
|
||||
</Fragment>
|
||||
))}
|
||||
</AccordionContent>
|
||||
@@ -174,6 +180,37 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
{token.content}
|
||||
</span>
|
||||
);
|
||||
case "list":
|
||||
const items = token.children || [];
|
||||
return (
|
||||
<>
|
||||
<ul
|
||||
data-depth={(Number(token.metadata.initialDepth) / 2) % 3}
|
||||
className="data-[depth='2']:list-[circle] data-[depth='1']:list-[square] list-disc ml-6"
|
||||
>
|
||||
{items.map((c) => {
|
||||
return (
|
||||
<li
|
||||
key={c.uuid}
|
||||
data-depth={token.metadata.initialDepth}
|
||||
>
|
||||
{c.children?.map((c) => render(c, usedIds))}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
case "list-item":
|
||||
// This probably doesn't need to exist, but I'm leaving it anyway
|
||||
return (
|
||||
<li
|
||||
data-depth={token.metadata.initialDepth}
|
||||
className="ml-2"
|
||||
>
|
||||
{token.children?.map((c) => render(c, usedIds))}
|
||||
</li>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<div className="p bg-red-600 text-white">
|
||||
@@ -181,94 +218,9 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// const renderBlock = (
|
||||
// block: BlockChildren,
|
||||
// usedIds: string[] = [],
|
||||
// ): ReactNode => {
|
||||
// usedIds = usedIds || [];
|
||||
// switch (block.type) {
|
||||
// case "block":
|
||||
// return block.children.map((e, i) => (
|
||||
// <Fragment key={e.uuid}>{renderBlock(e, usedIds)}</Fragment>
|
||||
// ));
|
||||
// case "grid":
|
||||
// return (
|
||||
// <div
|
||||
// style={{
|
||||
// "--grid-cols": block.metadata.columns,
|
||||
// } as React.CSSProperties}
|
||||
// className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
|
||||
// >
|
||||
// {block.children.map((c, i) => (
|
||||
// <div key={c.uuid}>
|
||||
// {renderBlock(c, usedIds)}
|
||||
// </div>
|
||||
// ))}
|
||||
// </div>
|
||||
// );
|
||||
// case "card":
|
||||
// return (
|
||||
// <div className="card mb-6">
|
||||
// {block.children.map((e, i) => (
|
||||
// <Fragment key={e.uuid}>
|
||||
// {renderBlock(e, usedIds)}
|
||||
// </Fragment>
|
||||
// ))}
|
||||
// </div>
|
||||
// );
|
||||
// case "accordion":
|
||||
// return (
|
||||
// <div className="bg-black/20 p-1 rounded-md">
|
||||
// <Accordion
|
||||
// title={block.metadata.title || "Expand"}
|
||||
// >
|
||||
// <AccordionContent>
|
||||
// {block.children.map((e, i) => (
|
||||
// <Fragment key={e.uuid}>
|
||||
// {renderBlock(e, usedIds)}
|
||||
// </Fragment>
|
||||
// ))}
|
||||
// </AccordionContent>
|
||||
// </Accordion>
|
||||
// </div>
|
||||
// );
|
||||
// default:
|
||||
// return (
|
||||
// renderParagraph(block as ParagraphToken, usedIds)
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
// const renderParagraph = (p: ParagraphToken, usedIds: string[]) => {
|
||||
// switch (p.type) {
|
||||
// case "p":
|
||||
// return (
|
||||
// <div className="p">
|
||||
// {p.content.map((e, i) => (
|
||||
// <Fragment key={e.uuid}>
|
||||
// {renderToken(e, usedIds)}
|
||||
// </Fragment>
|
||||
// ))}
|
||||
// </div>
|
||||
// );
|
||||
// case "code":
|
||||
// return (
|
||||
// <pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md">
|
||||
// {p.content.map((c) => c.line.toString()).join("\n\n")}
|
||||
// </pre>
|
||||
// );
|
||||
// default:
|
||||
// return (
|
||||
// <div className="p bg-red-600 text-white">
|
||||
// Block or paragraph missing implementation: {p.type}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
const generateId = (t: string, usedIds: string[]) => {
|
||||
function generateId(t: string, usedIds: string[]) {
|
||||
let id = t.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
|
||||
" ",
|
||||
"-",
|
||||
@@ -280,138 +232,4 @@ const generateId = (t: string, usedIds: string[]) => {
|
||||
idNum++;
|
||||
}
|
||||
return id;
|
||||
};
|
||||
|
||||
// const renderToken = (t: Token, usedIds: string[]) => {
|
||||
// switch (t.type) {
|
||||
// case "h1": {
|
||||
// return (
|
||||
// <div
|
||||
// id={generateId(t.raw, usedIds)}
|
||||
// className="font-bold text-2xl p"
|
||||
// >
|
||||
// {renderInlineToken(t.line)}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// case "h2": {
|
||||
// return (
|
||||
// <div
|
||||
// id={generateId(t.raw, usedIds)}
|
||||
// className="font-bold text-xl p"
|
||||
// >
|
||||
// {renderInlineToken(t.line)}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// case "h3": {
|
||||
// return (
|
||||
// <div
|
||||
// id={generateId(t.raw, usedIds)}
|
||||
// className="font-bold text-lg p"
|
||||
// >
|
||||
// {renderInlineToken(t.line)}
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// case "p":
|
||||
// return (
|
||||
// <div className="p">
|
||||
// {t.lines.map((e, i) => (
|
||||
// <Fragment key={e.uuid}>
|
||||
// {renderInlineToken(e.line)}
|
||||
// </Fragment>
|
||||
// ))}
|
||||
// </div>
|
||||
// );
|
||||
// case "text":
|
||||
// return (
|
||||
// <>
|
||||
// {renderInlineToken(t.line)}
|
||||
//
|
||||
// </>
|
||||
// );
|
||||
// case "list1":
|
||||
// return <li className="list-disc ml-6">{renderInlineToken(t.line)}</li>;
|
||||
// case "list2":
|
||||
// return <li className="list-disc ml-12">{renderInlineToken(t.line)}</li>;
|
||||
// default:
|
||||
// return (
|
||||
// <div className="text-white bg-red-500 p">
|
||||
// Missing implementation for tcMD element `{(t as { type: string })
|
||||
// .type}`
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
// const renderInlineToken = (l: Line) => {
|
||||
// if (typeof l === "string") return l;
|
||||
|
||||
// return l.map((token) => (
|
||||
// <Fragment key={token.uuid}>
|
||||
// {(() => {
|
||||
// switch (token.type) {
|
||||
// case "text":
|
||||
// return <span>{token.content}</span>;
|
||||
// case "bold":
|
||||
// return <span className="font-bold">{token.content}</span>;
|
||||
// case "italic":
|
||||
// return <span className="italic">{token.content}</span>;
|
||||
// case "anchor":
|
||||
// return (
|
||||
// <Link
|
||||
// className={token.data.style?.classes ||
|
||||
// "dark:text-primary-600 underline dark:no-underline"}
|
||||
// href={token.data.href}
|
||||
// >
|
||||
// {token.content}
|
||||
// </Link>
|
||||
// );
|
||||
// case "image": {
|
||||
// token.data.src = token.data.src as string;
|
||||
// if (token.data.src.startsWith("<svg")) {
|
||||
// return (
|
||||
// <div
|
||||
// dangerouslySetInnerHTML={{
|
||||
// __html: sanitize(token.data.src, {
|
||||
// USE_PROFILES: { svg: true },
|
||||
// }),
|
||||
// }}
|
||||
// >
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// // eslint-disable-next-line @next/next/no-img-element
|
||||
// return <img src={token.data.src} alt={token.content} />;
|
||||
// }
|
||||
// case "popover":
|
||||
// return (
|
||||
// <Poppable
|
||||
// content={renderInlineToken(token.data.popover)}
|
||||
// preferredAlign="centered"
|
||||
// preferredEdge="bottom"
|
||||
// className="cursor-pointer"
|
||||
// >
|
||||
// <span className="border-b-2 border-dotted border-white">
|
||||
// {token.content}
|
||||
// </span>
|
||||
// </Poppable>
|
||||
// );
|
||||
// case "inline-code":
|
||||
// return (
|
||||
// <span className="p-1 rounded-md font-mono bg-black/20 border border-mixed-100/20 mx-2">
|
||||
// {token.content}
|
||||
// </span>
|
||||
// );
|
||||
// default:
|
||||
// return (
|
||||
// <span className="bg-red-500">
|
||||
// Inline element not implemented: {token.type}
|
||||
// </span>
|
||||
// );
|
||||
// }
|
||||
// })()}
|
||||
// </Fragment>
|
||||
// ));
|
||||
// };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user