ttcmd: did I.... did I win? I think I won
This commit is contained in:
parent
3ae4dfcc82
commit
42a671d49d
@ -2,7 +2,7 @@
|
||||
|
||||
import { Accordion, AccordionContent } from "@/lib/accordion";
|
||||
import { Poppable } from "@/lib/poppables/components/poppable";
|
||||
import { buildAbstractSyntaxTree, createElements } from "@/lib/tcmd";
|
||||
import { createElements } from "@/lib/tcmd";
|
||||
import Link from "next/link";
|
||||
import React, { FC, Fragment, ReactNode, use, useMemo } from "react";
|
||||
|
||||
@ -24,7 +24,7 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
|
||||
</button>
|
||||
</div>
|
||||
{/* {elements.map((e, i) => <Fragment key={e.uuid}>{render(e)}</Fragment>)} */}
|
||||
{renderer(elements, tabSpacing)}
|
||||
{renderer(elements.map((e) => e.token!), tabSpacing)}
|
||||
</div>
|
||||
// <div className="grid grid-cols-3">
|
||||
// {/* <pre suppressHydrationWarning>{JSON.stringify(elements,null,2)}</pre> */}
|
||||
@ -35,7 +35,7 @@ export const TTCMD: FC<{ body: Promise<string> }> = ({ body }) => {
|
||||
const renderer = (tokens: Token[], tabSpacing: number) => {
|
||||
const usedIds: string[] = [];
|
||||
return tokens.map((t) => (
|
||||
<Fragment key={t.uuid}>{render(t, usedIds, tabSpacing)}</Fragment>
|
||||
<div className="p" key={t.uuid}>{render(t, usedIds, tabSpacing)}</div>
|
||||
));
|
||||
};
|
||||
|
||||
@ -51,7 +51,6 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
data-[strength="1"]:text-4xl
|
||||
data-[strength="2"]:text-3xl
|
||||
data-[strength="3"]:text-2xl
|
||||
p
|
||||
`}
|
||||
>
|
||||
{token.content}
|
||||
@ -163,6 +162,18 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
case "bold":
|
||||
return (
|
||||
<span className="font-bold">
|
||||
{token.content}
|
||||
</span>
|
||||
);
|
||||
case "italic":
|
||||
return (
|
||||
<span className="italic">
|
||||
{token.content}
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<div className="p bg-red-600 text-white">
|
||||
@ -172,90 +183,90 @@ const render = (token: Token, usedIds: string[], tabSpacing: number) => {
|
||||
}
|
||||
};
|
||||
|
||||
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 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 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[]) => {
|
||||
let id = t.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
|
||||
@ -271,136 +282,136 @@ const generateId = (t: string, usedIds: string[]) => {
|
||||
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 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;
|
||||
// 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>
|
||||
));
|
||||
};
|
||||
// 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>
|
||||
// ));
|
||||
// };
|
||||
|
||||
@ -140,6 +140,36 @@ TokenIdentifiers.set("inline-code", {
|
||||
};
|
||||
},
|
||||
});
|
||||
TokenIdentifiers.set("bold", {
|
||||
rx: /\*{2}(.*?)\*{2}/g,
|
||||
parse(s) {
|
||||
return {
|
||||
// content: inline,
|
||||
content: s.match(new RegExp(this.rx, "i"))?.at(1) ||
|
||||
"Unable to parse bold",
|
||||
raw: s,
|
||||
metadata: {},
|
||||
type: "bold",
|
||||
uuid: crypto.randomUUID(),
|
||||
rendersContentOnly,
|
||||
};
|
||||
},
|
||||
});
|
||||
TokenIdentifiers.set("italic", {
|
||||
rx: /(?<!\*)\*([^\*]+?)\*(?!\*)/g,
|
||||
parse(s) {
|
||||
return {
|
||||
// content: inline,
|
||||
content: s.match(new RegExp(this.rx, "i"))?.at(1) ||
|
||||
"Unable to parse italic",
|
||||
raw: s,
|
||||
metadata: {},
|
||||
type: "italic",
|
||||
uuid: crypto.randomUUID(),
|
||||
rendersContentOnly,
|
||||
};
|
||||
},
|
||||
});
|
||||
TokenIdentifiers.set("popover", {
|
||||
rx: /\^\[(.*?)\]\<<(.*?)\>>/g,
|
||||
parse(s) {
|
||||
@ -172,6 +202,7 @@ TokenIdentifiers.set("accordion", {
|
||||
},
|
||||
});
|
||||
TokenIdentifiers.set("p", {
|
||||
// rx: /(?<=\n)\n?([\s\S]*?)\n(?=\n)/g,
|
||||
rx: /(?<=\n\n)([\s\S]*?)(?=\n\n)/g,
|
||||
parse(s) {
|
||||
// const [_, content] = s.match(new RegExp(this.rx, ""))!;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { zipArrays } from "../zip";
|
||||
import { TokenIdentifiers } from "./TokenIdentifiers";
|
||||
|
||||
export const createElements = (body: string): [Token[], number] => {
|
||||
export const createElements = (body: string): [TokenMarker[], number] => {
|
||||
const tabOptions = [
|
||||
/^\s{2}(?!\s|\t)/m,
|
||||
/^\s{4}(?!\s|\t)/m,
|
||||
@ -18,13 +18,13 @@ export const createElements = (body: string): [Token[], number] => {
|
||||
}
|
||||
}
|
||||
const tokens = tokenize(body);
|
||||
return [buildAbstractSyntaxTree(tokens, body), tabSpacing];
|
||||
return [buildAbstractSyntaxTree(tokens), tabSpacing];
|
||||
};
|
||||
|
||||
const tokenize = (body: string) => {
|
||||
const tokenizedBody: tokenMarker[] = [];
|
||||
const tokenizedBody: TokenMarker[] = [];
|
||||
|
||||
const addToken = (thing: tokenMarker) => {
|
||||
const addToken = (thing: TokenMarker) => {
|
||||
tokenizedBody.push(thing);
|
||||
};
|
||||
|
||||
@ -35,145 +35,93 @@ const tokenize = (body: string) => {
|
||||
const start = match.index;
|
||||
const end = rx.lastIndex;
|
||||
|
||||
if (type !== "p" || !tokenizedBody.find((i) => i.start === start)) {
|
||||
addToken({
|
||||
start,
|
||||
end,
|
||||
type,
|
||||
token: token.parse(match[0]),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return tokenizedBody;
|
||||
};
|
||||
|
||||
export const buildAbstractSyntaxTree = (
|
||||
markers: tokenMarker[],
|
||||
body: string,
|
||||
): Token[] => {
|
||||
ensureNoOrphans(markers);
|
||||
function buildAbstractSyntaxTree(markers: TokenMarker[]) {
|
||||
markers.sort((a, b) => a.start - b.start);
|
||||
|
||||
markers.sort((a, b) => {
|
||||
if (a.start === b.start) {
|
||||
console.log(a, b);
|
||||
if (a.type === "p") return -1;
|
||||
if (b.type === "p") return 1;
|
||||
}
|
||||
// if (a.type === "p" && a.start === b.start) return -1;
|
||||
// if (b.type === "p" && a.start === b.start) return 1;
|
||||
return a.start - b.start;
|
||||
});
|
||||
markers = filterOverlappingPBlocks(markers);
|
||||
|
||||
establishClosestParent(markers);
|
||||
|
||||
for (const marker of markers) {
|
||||
marker.token = TokenIdentifiers.get(marker.type)?.parse(
|
||||
body.substring(marker.start, marker.end),
|
||||
);
|
||||
// if (marker.type === "p" && marker.parent && marker.parent?.type !== "p") {
|
||||
// marker.parent = undefined;
|
||||
// continue;
|
||||
// }
|
||||
if (!marker.token) {
|
||||
throw new Error("Failed to parse token. Token type not found?");
|
||||
}
|
||||
if (!marker.parent) continue;
|
||||
|
||||
if (!marker.parent.token) {
|
||||
// debugger;
|
||||
throw new Error("Failed to parse token. Child tokenized before parent");
|
||||
}
|
||||
|
||||
if (marker.parent) {
|
||||
marker.parent.token.children = marker.parent.token.children || [];
|
||||
marker.parent.token.children.push(marker.token);
|
||||
// marker.token.parent = marker.parent.token;
|
||||
}
|
||||
}
|
||||
|
||||
const tokens = markers.filter((m) =>
|
||||
markers.filter((a) => a !== m && (a.end === m.end || a.start === m.start))
|
||||
.length || m.type !== "p"
|
||||
).map((t) => t.token!);
|
||||
|
||||
for (const token of tokens) {
|
||||
contentToChildren(token);
|
||||
// By starting at the end, we can always assure that we are not filtering out children that haven't been processed yet
|
||||
for (const marker of [...markers].reverse()) {
|
||||
contentToChildren(marker.token);
|
||||
}
|
||||
|
||||
return tokens.filter((t) => !t.parent);
|
||||
};
|
||||
return markers.filter((m) => !m.parent);
|
||||
// return markers;
|
||||
}
|
||||
|
||||
const ensureNoOrphansOld = (tokens: tokenMarker[]) => {
|
||||
for (const token of tokens) {
|
||||
const parentPs = tokens.filter((t) => (
|
||||
t.type === "p" && (
|
||||
// any p that fully encapsulates the token
|
||||
(t.start <= token.start && t.end >= token.end) ||
|
||||
// any p that contains the start of the token
|
||||
(t.start <= token.start && t.end >= token.start) ||
|
||||
// any p that contains the end of the token
|
||||
(t.start <= token.end && t.end >= token.end)
|
||||
function establishClosestParent(blocks: TokenMarker[]): void {
|
||||
blocks.sort((a, b) => a.start - b.start); // Sort blocks by start position
|
||||
|
||||
for (let i = 0; i < blocks.length; i++) {
|
||||
const block = blocks[i];
|
||||
if (block.parent) continue; // Skip blocks that already have a parent
|
||||
|
||||
let closestParent: TokenMarker | undefined = undefined;
|
||||
let minDistance = Number.MAX_SAFE_INTEGER;
|
||||
|
||||
// Find the closest parent block for each block
|
||||
for (let j = 0; j < i; j++) {
|
||||
const otherBlock = blocks[j];
|
||||
if (otherBlock.end >= block.start && otherBlock.start <= block.start) {
|
||||
const distance = block.start - otherBlock.start;
|
||||
if (distance < minDistance) {
|
||||
minDistance = distance;
|
||||
closestParent = otherBlock;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (closestParent) {
|
||||
block.parent = closestParent; // Assign the closest parent block
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function filterOverlappingPBlocks(blocks: TokenMarker[]): TokenMarker[] {
|
||||
return blocks.filter((block) => {
|
||||
if (block.type !== "p") {
|
||||
return true; // Keep blocks that are not 'p' type
|
||||
}
|
||||
|
||||
// Filter out 'p' blocks that overlap with any other block
|
||||
for (const otherBlock of blocks) {
|
||||
if (
|
||||
otherBlock !== block && (
|
||||
otherBlock.start === block.start ||
|
||||
otherBlock.end === block.end
|
||||
)
|
||||
)).sort((a, b) => (a.start - b.start));
|
||||
|
||||
if (parentPs.length > 1) {
|
||||
parentPs[0].end = parentPs.at(-1)!.end;
|
||||
const remainingParents = parentPs.slice(1);
|
||||
for (const token of tokens) {
|
||||
if (token.parent && remainingParents.includes(token.parent)) {
|
||||
token.parent = parentPs[0];
|
||||
) {
|
||||
return false; // Overlapping 'p' block found, filter it out
|
||||
}
|
||||
}
|
||||
if (parentPs[0] && parentPs[0].end < token.end) {
|
||||
parentPs[0].end = token.end;
|
||||
}
|
||||
tokens = tokens.filter((t) => !remainingParents.includes(t));
|
||||
}
|
||||
|
||||
const potentialParents = tokens.filter((t) =>
|
||||
(t.start < token.start && t.end > token.end) ||
|
||||
(t.type === "p" && t.start <= token.start &&
|
||||
t.end >= token.end && t !== token)
|
||||
).sort((a, b) => {
|
||||
if (token.start - a.start < token.start - b.start) return -1;
|
||||
return 1;
|
||||
return true; // Keep 'p' block if it doesn't overlap with any other block
|
||||
});
|
||||
|
||||
token.parent = potentialParents.find((p) => p.type !== "p") ??
|
||||
potentialParents[0];
|
||||
|
||||
if (token.type === "grid") {
|
||||
debugger;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const ensureNoOrphans = (tokens: tokenMarker[]) => {
|
||||
ensureNoOrphansOld(tokens);
|
||||
};
|
||||
}
|
||||
|
||||
const contentToChildren = (token: Token) => {
|
||||
const children: Token[] = [];
|
||||
let part, content = token.content;
|
||||
let content = token.content;
|
||||
|
||||
// for (const child of token.children || []) {
|
||||
// if (!content) continue;
|
||||
// [part, content] = content.split(child.raw);
|
||||
// part && children.push({
|
||||
// content: part.trim(),
|
||||
// metadata: {},
|
||||
// raw: part,
|
||||
// type: "text",
|
||||
// uuid: crypto.randomUUID(),
|
||||
// });
|
||||
// children.push(child);
|
||||
// }
|
||||
|
||||
// if (content) {
|
||||
// children.push({
|
||||
// content: content.trim(),
|
||||
// metadata: {},
|
||||
// raw: content,
|
||||
// type: "text",
|
||||
// uuid: crypto.randomUUID(),
|
||||
// });
|
||||
// }
|
||||
const splitMarker = "{{^^}}";
|
||||
for (const child of token.children || []) {
|
||||
content = content.replace(child.raw, splitMarker);
|
||||
@ -181,7 +129,7 @@ const contentToChildren = (token: Token) => {
|
||||
|
||||
token.children = zipArrays(
|
||||
content.split(splitMarker).map((c): Token => ({
|
||||
content: c.trim(),
|
||||
content: c.replaceAll("\n", ""),
|
||||
metadata: {},
|
||||
raw: c,
|
||||
type: "text",
|
||||
@ -191,96 +139,3 @@ const contentToChildren = (token: Token) => {
|
||||
token.children || [],
|
||||
).filter((c) => c.children?.length || (c.rendersContentOnly && c.content));
|
||||
};
|
||||
|
||||
// const tokenize = (body: string) => {
|
||||
// body = body.replace(/\n?<!--(.*?)-->\n?/gs, "");
|
||||
|
||||
// const paragraphs = body.split("\n\n");
|
||||
|
||||
// const blockTokens: BlockToken[] = [];
|
||||
// const paragraphTokens: ParagraphToken[] = [];
|
||||
|
||||
// for (const paragraph of paragraphs) {
|
||||
// const block = tokenizeBlock(paragraph);
|
||||
// let openBT = blockTokens.findLast((bt) => !bt.closed);
|
||||
// if (block) {
|
||||
// if (typeof block === "string") {
|
||||
// if (openBT) {
|
||||
// openBT.closed = true;
|
||||
// }
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (openBT) {
|
||||
// openBT.children.push(block);
|
||||
// block.parent = openBT.type;
|
||||
// }
|
||||
// blockTokens.push(block);
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// if (!openBT) {
|
||||
// openBT = {
|
||||
// children: [],
|
||||
// closed: false,
|
||||
// metadata: {},
|
||||
// type: "block",
|
||||
// uuid: crypto.randomUUID(),
|
||||
// };
|
||||
// blockTokens.push(openBT);
|
||||
// }
|
||||
|
||||
// const multiline = tokenizeParagraph(paragraph);
|
||||
// let openP = paragraphTokens.findLast((p) => !p.closed);
|
||||
// if (multiline) {
|
||||
// if (Array.isArray(multiline)) {
|
||||
// if (openP) {
|
||||
// openP.closed = true;
|
||||
// openP.content = openP.content.concat(multiline);
|
||||
// }
|
||||
// continue;
|
||||
// }
|
||||
|
||||
// openBT.children.push(multiline);
|
||||
// paragraphTokens.push(multiline);
|
||||
// continue;
|
||||
// } else if (openP && !openP?.allowsInline) {
|
||||
// openP.content.push({
|
||||
// line: paragraph,
|
||||
// raw: paragraph,
|
||||
// type: "text",
|
||||
// uuid: crypto.randomUUID(),
|
||||
// });
|
||||
// }
|
||||
|
||||
// // I don't think the closed check is necessary, but just in case
|
||||
// // if (openP && !openP.closed && !openP.allowsInline) continue;
|
||||
// if (!openP) {
|
||||
// openP = {
|
||||
// allowsInline: true,
|
||||
// closed: true,
|
||||
// content: [],
|
||||
// metadata: {},
|
||||
// type: "p",
|
||||
// uuid: crypto.randomUUID(),
|
||||
// };
|
||||
// openBT.children.push(openP);
|
||||
// paragraphTokens.push(openP);
|
||||
// }
|
||||
|
||||
// const lines = paragraph.split("\n");
|
||||
// let previous;
|
||||
// for (const line of lines) {
|
||||
// const singleLine = tokenizeLine(line, previous);
|
||||
|
||||
// if (singleLine) {
|
||||
// if (singleLine !== previous) {
|
||||
// openP.content.push(singleLine);
|
||||
// }
|
||||
// previous = singleLine;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// return blockTokens.filter((b) => !b.parent);
|
||||
// };
|
||||
|
||||
@ -21,12 +21,14 @@ This section will cover all of the enhancements that are added for basic markdow
|
||||
You can use the typical link syntax: `[link name](/link/location)`, but there are a few presets that allow you to style them to look a bit nicer.
|
||||
|
||||
**Primary Button:**
|
||||
|
||||
Prefix the link name with ````button` to create a button.
|
||||
`[```button link name](#links)` produces:
|
||||
|
||||
[```button link name](#links)
|
||||
|
||||
**Call to Action:**
|
||||
|
||||
Prefix the link name with ````cta` to create a modestly styled button/call to action.
|
||||
`[```cta link name](#links)` produces:
|
||||
|
||||
@ -59,7 +61,6 @@ Accordions are when you can click an item to expand it to show additional inform
|
||||
Syntax:
|
||||
|
||||
[][][]
|
||||
|
||||
```
|
||||
[accordion title]
|
||||
|
||||
@ -77,11 +78,7 @@ As you can see, I can do normal markdown in here.
|
||||
I can include a [link](#accordions), or *italic* and **bold** text.
|
||||
|
||||
[[
|
||||
|
||||
I can even include a card, like this one
|
||||
|
||||
]]
|
||||
|
||||
[/accordion]
|
||||
|
||||
/[]
|
||||
7
types.d.ts
vendored
7
types.d.ts
vendored
@ -42,7 +42,6 @@ type SingleLineToken = {
|
||||
type Token = {
|
||||
type: string;
|
||||
metadata: Record<string, string>;
|
||||
parent?: Token;
|
||||
children?: Token[];
|
||||
uuid: string;
|
||||
raw: string;
|
||||
@ -51,12 +50,12 @@ type Token = {
|
||||
rendersContentOnly?: boolean;
|
||||
};
|
||||
|
||||
type tokenMarker = {
|
||||
type TokenMarker = {
|
||||
start: number;
|
||||
end: number;
|
||||
type: string;
|
||||
parent?: tokenMarker;
|
||||
token?: Token;
|
||||
parent?: TokenMarker;
|
||||
token: Token;
|
||||
};
|
||||
|
||||
type MultilineCfg = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user