701 lines
16 KiB
TypeScript
701 lines
16 KiB
TypeScript
import {
|
|
IdentifiedToken,
|
|
Token,
|
|
TokenAttributes,
|
|
TokenRenderer,
|
|
} from "@/types";
|
|
import { sanitize } from "isomorphic-dompurify";
|
|
import Link from "next/link";
|
|
import { Fragment } from "react";
|
|
import { Poppable } from "../poppables/components/poppable";
|
|
import { Accordion, AccordionContent } from "../accordion";
|
|
|
|
type SearchFunction = (s: string, start: number, end: number) => {
|
|
start: number;
|
|
end: number;
|
|
text: string;
|
|
lastIndex: number;
|
|
};
|
|
|
|
type TokenIdentifier = {
|
|
rx: RegExp;
|
|
parse: (s: string) => Token;
|
|
search?: SearchFunction;
|
|
};
|
|
|
|
type TokenIdentifierMap = Map<
|
|
string,
|
|
TokenIdentifier
|
|
>;
|
|
|
|
export const TokenRenderers = new Map<
|
|
string,
|
|
TokenRenderer
|
|
>();
|
|
|
|
type IdentifierRegistration = (
|
|
type: string,
|
|
match: RegExp,
|
|
parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
|
|
renderFunction: TokenRenderer,
|
|
openTagRx?: RegExp,
|
|
closeTagRx?: RegExp,
|
|
) => void;
|
|
|
|
export function buildIdentifierMap(): [
|
|
TokenIdentifierMap,
|
|
IdentifierRegistration,
|
|
] {
|
|
const TokenIdentifiers = new Map<
|
|
string,
|
|
TokenIdentifier
|
|
>();
|
|
|
|
function registerIdentifier(
|
|
type: string,
|
|
match: RegExp,
|
|
parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
|
|
renderFunction: TokenRenderer,
|
|
): void;
|
|
function registerIdentifier(
|
|
type: string,
|
|
match: RegExp,
|
|
parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
|
|
renderFunction: TokenRenderer,
|
|
openTagRx: RegExp,
|
|
closeTagRx: RegExp,
|
|
): void;
|
|
function registerIdentifier(
|
|
type: string,
|
|
match: RegExp,
|
|
parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
|
|
renderFunction: TokenRenderer,
|
|
openTagRx?: RegExp,
|
|
closeTagRx?: RegExp,
|
|
) {
|
|
TokenIdentifiers.set(type, {
|
|
rx: match,
|
|
parse(s) {
|
|
const identifiedToken = parseFunction(s, this.rx);
|
|
const token: TokenAttributes = {
|
|
render: renderFunction,
|
|
type,
|
|
};
|
|
|
|
return { ...token, ...identifiedToken };
|
|
},
|
|
search: (openTagRx && closeTagRx)
|
|
? (s, start, end) => {
|
|
return search(
|
|
s,
|
|
start,
|
|
end,
|
|
new RegExp(openTagRx, "g"),
|
|
new RegExp(closeTagRx, "g"),
|
|
);
|
|
}
|
|
: undefined,
|
|
});
|
|
TokenRenderers.set(type, renderFunction);
|
|
}
|
|
|
|
return [TokenIdentifiers, registerIdentifier];
|
|
}
|
|
|
|
export const buildOnlyDefaultElements = () => {
|
|
const [TokenIdentifiers, registerIdentifier] = buildIdentifierMap();
|
|
|
|
TokenRenderers.set("text", (t) => {
|
|
debugger;
|
|
return (
|
|
<span className="whitespace-pre-wrap">
|
|
{t.content.replaceAll("\\n", "\n")}
|
|
</span>
|
|
);
|
|
});
|
|
|
|
const rendersContentOnly = true;
|
|
const rendersChildrenOnly = true;
|
|
|
|
// grid
|
|
registerIdentifier(
|
|
"grid",
|
|
/(?<!\/)(?:\[\])+\n+((?:.|\n)*?)\n+\/\[\]/g,
|
|
(s) => {
|
|
const rx = /((?:\[\])+)\n+([\s\S]*)\n+\/\[\]/;
|
|
const [_, columns, content] = s.match(rx) ||
|
|
["", "..", "Unable to parse grid"];
|
|
return {
|
|
content,
|
|
raw: s,
|
|
metadata: {
|
|
columns: (columns.length / 2).toString(),
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
rendersChildrenOnly,
|
|
};
|
|
},
|
|
(token) => {
|
|
const { content, children, metadata, uuid } = token;
|
|
return (
|
|
<div
|
|
style={{
|
|
"--grid-cols": metadata.columns,
|
|
} as React.CSSProperties}
|
|
className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
|
|
>
|
|
{children?.map((c, i) => (
|
|
<div key={c.uuid}>
|
|
{c.render(c)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
/(?<!\/)(?:\[\])+/g,
|
|
/\/\[\]/g,
|
|
);
|
|
|
|
// card
|
|
registerIdentifier(
|
|
"card",
|
|
/\[{2}([\s\S]*?)\n+\]{2}/g,
|
|
(s) => {
|
|
const rx = /\[{2}(!?)\s*?\n+([\s\S]*)\n+\]{2}/;
|
|
const match = s.match(rx);
|
|
const [_, isBlock, content] = match || ["", "", s];
|
|
|
|
return {
|
|
content: content.trim(),
|
|
raw: s,
|
|
metadata: {
|
|
isBlock,
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
rendersChildrenOnly,
|
|
};
|
|
},
|
|
(token) => {
|
|
const { children, metadata, uuid } = token;
|
|
return (
|
|
<div
|
|
data-block={!!metadata.isBlock}
|
|
className="data-[block=false]:card mb-6"
|
|
>
|
|
{children?.map((e) => (
|
|
<Fragment key={e.uuid}>
|
|
{e.render(e)}
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
/\[\[/g,
|
|
/\]\]/g,
|
|
);
|
|
|
|
// fenced code block
|
|
registerIdentifier("code", /`{3}\n+((?:.|\n)*?)\n+`{3}/g, (s, rx) => {
|
|
return {
|
|
content: s.match(new RegExp(rx, ""))?.at(1) ||
|
|
"Unable to parse code",
|
|
raw: s,
|
|
metadata: {},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
return (
|
|
<pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md">
|
|
{token.content}
|
|
</pre>
|
|
);
|
|
});
|
|
|
|
// list
|
|
registerIdentifier(
|
|
"list",
|
|
/^\s*-\s([\s\S]*?)\n\n/gm,
|
|
(s, rx) => {
|
|
return {
|
|
content: s.match(new RegExp(rx, ""))?.at(1) ||
|
|
"Unable to parse list",
|
|
raw: s,
|
|
metadata: {
|
|
initialDepth:
|
|
s.replace("\n", "").split("-").at(0)?.length.toString() ||
|
|
"1",
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
rendersChildrenOnly,
|
|
};
|
|
},
|
|
(token) => {
|
|
const { children, metadata, uuid } = token;
|
|
return (
|
|
<>
|
|
<ul
|
|
data-depth={(Number(metadata.initialDepth) / 2) % 3}
|
|
className="data-[depth='2']:list-[circle] data-[depth='1']:list-[square] list-disc ml-6"
|
|
>
|
|
{children?.map((c) => {
|
|
return (
|
|
<li
|
|
key={c.uuid}
|
|
data-depth={metadata.initialDepth}
|
|
>
|
|
{c.children?.map((c) => (
|
|
<Fragment key={c.uuid}>{c.render(c)}</Fragment>
|
|
))}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</>
|
|
);
|
|
},
|
|
);
|
|
|
|
// list-item
|
|
registerIdentifier(
|
|
"list-item",
|
|
/^\s*-\s(.*?)$/gm,
|
|
(s, rx) => {
|
|
return {
|
|
content: s.match(new RegExp(rx, ""))?.at(1) ||
|
|
"Unable to parse list-item",
|
|
raw: s,
|
|
metadata: {
|
|
initialDepth:
|
|
s.replace("\n", "").split("-").at(0)?.length.toString() ||
|
|
"1",
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
};
|
|
},
|
|
(token) => {
|
|
const { children, metadata, uuid } = token;
|
|
return (
|
|
<li
|
|
data-depth={metadata.initialDepth}
|
|
className="ml-2"
|
|
>
|
|
{children?.map((c) => (
|
|
<Fragment key={c.uuid}>
|
|
(c.render(c))
|
|
</Fragment>
|
|
))}
|
|
</li>
|
|
);
|
|
},
|
|
);
|
|
|
|
// heading
|
|
registerIdentifier("heading", /^#+\s(.*?)$/gm, (s, rx) => {
|
|
return {
|
|
content: s.match(new RegExp(rx, ""))?.at(1) ||
|
|
"Unable to parse heading",
|
|
raw: s,
|
|
metadata: {
|
|
strength: s.match(/#/g)?.length.toString() || "1",
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
return (
|
|
<div
|
|
// id={generateId(token.raw, usedIds)}
|
|
data-strength={token.metadata.strength}
|
|
className={`
|
|
font-bold
|
|
data-[strength="1"]:text-4xl
|
|
data-[strength="2"]:text-3xl
|
|
data-[strength="3"]:text-2xl
|
|
`}
|
|
>
|
|
{token.content}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
// image
|
|
registerIdentifier("image", /\!\[(.*?)\]\((.*?)\)/g, (s, rx) => {
|
|
const [_, title, src] = s.match(new RegExp(rx, ""))!;
|
|
|
|
return {
|
|
// content: inline,
|
|
content: title.trim(),
|
|
raw: s,
|
|
metadata: {
|
|
src,
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
const { metadata } = token;
|
|
metadata.src = metadata.src as string;
|
|
if (metadata.src.startsWith("<svg")) {
|
|
return (
|
|
<div
|
|
dangerouslySetInnerHTML={{
|
|
__html: sanitize(metadata.src, {
|
|
USE_PROFILES: { svg: true },
|
|
}),
|
|
}}
|
|
>
|
|
</div>
|
|
);
|
|
}
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
return <img src={metadata.src} alt={token.content} />;
|
|
});
|
|
|
|
// anchor
|
|
registerIdentifier("anchor", /(?<![\!^])\[(.*?)\]\((.*?)\)/g, (s, rx) => {
|
|
let preset, [_, title, href] = s.match(new RegExp(rx, ""))!;
|
|
const match = title.match(/`{3}(cta|button)?(.*)/);
|
|
|
|
if (match) {
|
|
[_, preset, title] = match;
|
|
}
|
|
|
|
const classes = {
|
|
button: "btn-primary inline-block",
|
|
cta: "btn-secondary inline-block uppercase",
|
|
};
|
|
return {
|
|
content: title.trim(),
|
|
raw: s,
|
|
metadata: {
|
|
href,
|
|
classes: classes[preset as keyof typeof classes],
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
const { metadata } = token;
|
|
return (
|
|
<Link
|
|
className={metadata.classes ||
|
|
"dark:text-primary-600 underline dark:no-underline"}
|
|
href={metadata.href}
|
|
>
|
|
{token.content}
|
|
</Link>
|
|
);
|
|
});
|
|
|
|
// inline-code
|
|
registerIdentifier(
|
|
"inline-code",
|
|
/(?<=\s|^)`(.*?)`(?=[\s,.!?)]|$)/gi,
|
|
(s, rx) => {
|
|
return {
|
|
content: s.match(new RegExp(rx, "i"))?.at(1) ||
|
|
"Unable to parse inline-code",
|
|
raw: s,
|
|
metadata: {},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
},
|
|
(token) => {
|
|
return (
|
|
<span className="p-1 rounded-md font-mono bg-black/20 border border-mixed-100/20 mx-1">
|
|
{token.content}
|
|
</span>
|
|
);
|
|
},
|
|
);
|
|
|
|
// bold
|
|
registerIdentifier("bold", /\*{2}(.*?)\*{2}/g, (s, rx) => {
|
|
return {
|
|
content: s.match(new RegExp(rx, "i"))?.at(1) ||
|
|
"Unable to parse bold",
|
|
raw: s,
|
|
metadata: {},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
return (
|
|
<span className="font-bold">
|
|
{token.content}
|
|
</span>
|
|
);
|
|
});
|
|
|
|
// italic
|
|
registerIdentifier("italic", /(?<!\*)\*([^\*]+?)\*(?!\*)/g, (s, rx) => {
|
|
return {
|
|
content: s.match(new RegExp(rx, "i"))?.at(1) ||
|
|
"Unable to parse italic",
|
|
raw: s,
|
|
metadata: {},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
return (
|
|
<span className="italic">
|
|
{token.content}
|
|
</span>
|
|
);
|
|
});
|
|
|
|
// popover
|
|
registerIdentifier("popover", /\^\[(.*?)\]\<<(.*?)\>>/g, (s, rx) => {
|
|
const [_, title, content] = s.match(new RegExp(rx, ""))!;
|
|
|
|
return {
|
|
content,
|
|
raw: s,
|
|
metadata: { title },
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
const { children, metadata, uuid } = token;
|
|
return (
|
|
<Poppable
|
|
content={children?.map((c) => (
|
|
<Fragment key={uuid}>{c.render(c)}</Fragment>
|
|
)) ||
|
|
metadata.content}
|
|
preferredAlign="centered"
|
|
preferredEdge="bottom"
|
|
className="cursor-pointer mx-2"
|
|
>
|
|
<span className="border-b-2 border-dotted border-white">
|
|
{metadata.title}
|
|
</span>
|
|
</Poppable>
|
|
);
|
|
});
|
|
|
|
registerIdentifier(
|
|
"accordion",
|
|
/\[accordion(\s.*?)?]\n+((?:.|\n)*?)\n+\[\/accordion\]/g,
|
|
(s, rx) => {
|
|
const [_, title, content] = s.match(new RegExp(rx, ""))!;
|
|
|
|
return {
|
|
content,
|
|
raw: s,
|
|
metadata: { title },
|
|
uuid: crypto.randomUUID(),
|
|
};
|
|
},
|
|
(token) => {
|
|
const { children, metadata, uuid } = token;
|
|
return (
|
|
<div className="bg-black/20 p-1 accordion">
|
|
<Accordion
|
|
title={metadata.title || "Expand"}
|
|
>
|
|
<AccordionContent>
|
|
{children?.map((e, i) => (
|
|
<Fragment key={e.uuid}>
|
|
{e.render(e)}
|
|
</Fragment>
|
|
))}
|
|
</AccordionContent>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
registerIdentifier("p", /(?<=\n\n)([\s\S]*?)(?=\n\n)/g, (s, rx) => {
|
|
return {
|
|
content: s,
|
|
raw: s,
|
|
metadata: {},
|
|
uuid: crypto.randomUUID(),
|
|
};
|
|
}, (token) => {
|
|
const { children, uuid } = token;
|
|
|
|
debugger;
|
|
|
|
return (
|
|
<div className="p">
|
|
{children?.map((e) => {
|
|
console.log(e);
|
|
return (
|
|
<Fragment key={e.uuid}>
|
|
{e.render(e)}
|
|
</Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
registerIdentifier("hr", /^-{3,}$/gm, (s, rx) => {
|
|
return {
|
|
content: s,
|
|
raw: s,
|
|
metadata: {},
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
return <div className="w-full border-b border-mixed-500 my-3"></div>;
|
|
});
|
|
|
|
registerIdentifier("comment", /<!--[\s\S]+?-->/g, (s, rx) => {
|
|
return {
|
|
content: "",
|
|
metadata: { comment: s },
|
|
raw: "",
|
|
uuid: crypto.randomUUID(),
|
|
rendersContentOnly,
|
|
};
|
|
}, (token) => {
|
|
return <></>;
|
|
});
|
|
|
|
registerIdentifier("frontmatter", /^---([\s\S]*?)---/g, (s, rx) => {
|
|
return {
|
|
content: "",
|
|
metadata: {
|
|
frontmatterString: s.match(rx)?.at(0) || "",
|
|
},
|
|
raw: "",
|
|
uuid: "frontmatter",
|
|
};
|
|
}, (token) => {
|
|
return <>{token.raw}</>;
|
|
});
|
|
|
|
registerIdentifier("table", /^\|\s[\s\S]*?\|(?=(\n\n)|$)/g, (s, rx) => {
|
|
const rowSections = s.split(/-/gm).map((s) =>
|
|
s.split("\n").map((r) => r.split(/\s?\|\s?/g))
|
|
);
|
|
|
|
let headerRows: string[][] = [],
|
|
bodyRows: string[][] = [],
|
|
footerRows: string[][] = [];
|
|
|
|
switch (rowSections.length) {
|
|
case 1:
|
|
bodyRows = rowSections[0];
|
|
break;
|
|
case 2:
|
|
headerRows = rowSections[0];
|
|
bodyRows = rowSections[1];
|
|
break;
|
|
case 3:
|
|
headerRows = rowSections[0];
|
|
bodyRows = rowSections[1];
|
|
footerRows = rowSections[3];
|
|
break;
|
|
}
|
|
|
|
const maxColumns = Math.max(
|
|
...[...headerRows, ...bodyRows, ...footerRows].map((r) => r.length),
|
|
);
|
|
|
|
return {
|
|
content: s,
|
|
raw: s,
|
|
metadata: {
|
|
headerRows: headerRows.join(" | "),
|
|
bodyRows: bodyRows.join(" | "),
|
|
footerRows: footerRows.join(" | "),
|
|
columns: maxColumns.toString(),
|
|
},
|
|
uuid: crypto.randomUUID(),
|
|
};
|
|
}, (t) => {
|
|
return <>{t.raw}</>;
|
|
});
|
|
|
|
return TokenIdentifiers;
|
|
};
|
|
|
|
function findMatchingClosedParenthesis(
|
|
str: string,
|
|
openRegex: RegExp,
|
|
closedRegex: RegExp,
|
|
): number | null {
|
|
let openings = 0;
|
|
let closings = 0;
|
|
|
|
openRegex = new RegExp(openRegex, "g");
|
|
closedRegex = new RegExp(closedRegex, "g");
|
|
|
|
let lastOpeningSuccessIndex = 0;
|
|
let lastClosingSuccessIndex = 0;
|
|
|
|
do {
|
|
const openingMatch = openRegex.exec(str);
|
|
const closingMatch = closedRegex.exec(str);
|
|
|
|
if ((openingMatch && !closingMatch)) {
|
|
throw Error("Things have gone horribly wrong");
|
|
}
|
|
|
|
// if ((!openingMatch && closingMatch) || (!openingMatch && !closingMatch)) break;
|
|
|
|
if (
|
|
openingMatch && closingMatch && openingMatch.index < closingMatch.index
|
|
) {
|
|
openings++;
|
|
lastOpeningSuccessIndex = openingMatch.index + openingMatch[0].length;
|
|
closedRegex.lastIndex = lastClosingSuccessIndex;
|
|
} else if (
|
|
(!openingMatch && closingMatch) ||
|
|
(openingMatch && closingMatch && openingMatch.index > closingMatch.index)
|
|
) {
|
|
closings++;
|
|
lastClosingSuccessIndex = closingMatch.index + closingMatch[0].length;
|
|
openRegex.lastIndex = lastOpeningSuccessIndex;
|
|
} else {
|
|
return closingMatch?.index ?? null;
|
|
}
|
|
} while (openings > closings);
|
|
|
|
return closedRegex.lastIndex;
|
|
}
|
|
|
|
interface SearchResult {
|
|
start: number;
|
|
end: number;
|
|
text: string;
|
|
lastIndex: number;
|
|
}
|
|
|
|
function search(
|
|
s: string,
|
|
start: number,
|
|
end: number,
|
|
openRx: RegExp,
|
|
closeRx: RegExp,
|
|
): SearchResult {
|
|
const oldEnd = end;
|
|
|
|
const newEnd = findMatchingClosedParenthesis(
|
|
s,
|
|
// s.substring(0, end - start),
|
|
openRx,
|
|
closeRx,
|
|
);
|
|
|
|
if (newEnd === null) throw Error("There was an issue finding a closing tag");
|
|
|
|
end = newEnd + start;
|
|
|
|
return {
|
|
start,
|
|
end,
|
|
text: s.substring(0, newEnd),
|
|
lastIndex: oldEnd === end ? end : start + s.match(openRx)![0].length,
|
|
};
|
|
}
|