124 lines
2.7 KiB
TypeScript
124 lines
2.7 KiB
TypeScript
import { zipArrays } from "@/lib/zip";
|
|
import { FC, PropsWithChildren, useMemo } from "react";
|
|
|
|
export const TCMD: FC<{ body: string }> = ({ body }) => {
|
|
const elements = useMemo(() => createElements(body), [body]);
|
|
return (
|
|
<>
|
|
<pre>{JSON.stringify(elements,null,2)}</pre>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const createElements = (body: string) => {
|
|
const tokens = tokenize(body);
|
|
|
|
return tokens;
|
|
};
|
|
|
|
type InlineToken = {
|
|
type: "text" | "bold";
|
|
content: string;
|
|
};
|
|
|
|
type Line = string | InlineToken[];
|
|
|
|
type MultilineToken = {
|
|
type: "code";
|
|
lines: Token[];
|
|
};
|
|
|
|
type Token = {
|
|
type: "h1" | "h2" | "h3" | "p";
|
|
line: Line;
|
|
};
|
|
|
|
const tokenize = (md: string) => {
|
|
const tokens: (Token | MultilineToken)[] = [];
|
|
md = md.replace(/(?<=[a-z])\n(?=[a-z])/g, " ");
|
|
const lines = md.split("\n");
|
|
const multilineFlags = {
|
|
heading: 0,
|
|
};
|
|
|
|
const tokenMatches = [
|
|
{
|
|
rx: /^\s*#\s/,
|
|
create: (line: Line) => tokens.push({ type: "h1", line }),
|
|
},
|
|
{
|
|
rx: /^\s*##\s/,
|
|
create: (line: Line) => tokens.push({ type: "h2", line }),
|
|
},
|
|
{
|
|
rx: /^\s*###\s/,
|
|
create: (line: Line) => tokens.push({ type: "h3", line }),
|
|
},
|
|
];
|
|
|
|
for (let line of lines) {
|
|
let foundLine = false;
|
|
token:
|
|
for (const token of tokenMatches) {
|
|
if (!token.rx.test(line)) continue token;
|
|
foundLine = true;
|
|
line = line.replace(token.rx, "").trim();
|
|
|
|
const lineContent = tokenizeInline(line);
|
|
token.create(lineContent);
|
|
}
|
|
|
|
if (foundLine) continue;
|
|
|
|
tokens.push({
|
|
type: "p",
|
|
line: tokenizeInline(line),
|
|
});
|
|
}
|
|
|
|
console.log(tokens);
|
|
return tokens.filter((t) => (t as Token).line || (t as MultilineToken).lines);
|
|
};
|
|
|
|
const tokenizeInline = (line: string) => {
|
|
line = line.trim();
|
|
const originalLine = line;
|
|
const insertMarker = "{^}";
|
|
const tokens: InlineToken[] = [];
|
|
|
|
const tokenMatches = [
|
|
{
|
|
rx: /\*\*(.*?)\*\*/g,
|
|
create: (content: string) =>
|
|
tokens.push({
|
|
content,
|
|
type: "bold",
|
|
}),
|
|
},
|
|
];
|
|
for (const token of tokenMatches) {
|
|
let match;
|
|
let last = 0;
|
|
while ((match = token.rx.exec(line)) !== null) {
|
|
const tokenStart = match.index;
|
|
const tokenEnd = match.index + match[0].length;
|
|
console.log(tokenEnd, token.rx.lastIndex);
|
|
token.create(line.substring(tokenStart, tokenEnd));
|
|
line = line.slice(last, tokenStart) + "{^}" +
|
|
line.slice(tokenEnd, line.length);
|
|
last = tokenEnd;
|
|
}
|
|
}
|
|
|
|
if (tokens.length) {
|
|
return zipArrays(
|
|
line.split(insertMarker).map((t): InlineToken => ({
|
|
content: t,
|
|
type: "text",
|
|
})),
|
|
tokens,
|
|
).filter((t) => t.content);
|
|
}
|
|
return originalLine;
|
|
};
|