+ {children?.map((c, i) => (
+
+ );
},
/(? {
(s) => {
const rx = /\[{2}(!?)\s*?\n+([\s\S]*)\n+\]{2}/;
const match = s.match(rx);
- if (!match) debugger;
- const [_, isBlock, content] = match ||
- ["", "", s];
+ const [_, isBlock, content] = match || ["", "", s];
return {
content: content.trim(),
@@ -148,8 +175,20 @@ export const buildOnlyDefaultElements = () => {
rendersChildrenOnly,
};
},
- (t) => {
- return <>{t.raw};
+ (token) => {
+ const { children, metadata, uuid } = token;
+ return (
+
+ {c.render(c)}
+
+ ))}
+
+ {children?.map((e) => (
+
+ {e.render(e)}
+
+ ))}
+
+ );
},
/\[\[/g,
/\]\]/g,
@@ -165,8 +204,12 @@ export const buildOnlyDefaultElements = () => {
uuid: crypto.randomUUID(),
rendersContentOnly,
};
- }, (t) => {
- return <>{t.raw};
+ }, (token) => {
+ return (
+
+ {token.content}
+
+ );
});
// list
@@ -187,8 +230,29 @@ export const buildOnlyDefaultElements = () => {
rendersChildrenOnly,
};
},
- (t) => {
- return <>{t.raw};
+ (token) => {
+ const { children, metadata, uuid } = token;
+ return (
+ <>
+ -
+ {children?.map((c) => {
+ return (
+
-
+ {c.children?.map((c) => (
+
{c.render(c)} + ))} +
+ );
+ })}
+
+ {token.content}
+
+ );
});
// image
@@ -244,8 +333,23 @@ export const buildOnlyDefaultElements = () => {
uuid: crypto.randomUUID(),
rendersContentOnly,
};
- }, (t) => {
- return <>{t.raw};
+ }, (token) => {
+ const { metadata } = token;
+ metadata.src = metadata.src as string;
+ if (metadata.src.startsWith("
+
+
+ {children?.map((e, i) => (
+
+ {e.render(e)}
+
+ ))}
+
+
+
+ );
},
);
@@ -362,8 +517,23 @@ export const buildOnlyDefaultElements = () => {
metadata: {},
uuid: crypto.randomUUID(),
};
- }, (t) => {
- return <>{t.raw};
+ }, (token) => {
+ const { children, uuid } = token;
+
+ debugger;
+
+ return (
+
+ {children?.map((e) => {
+ console.log(e);
+ return (
+
+ {e.render(e)}
+
+ );
+ })}
+
+ );
});
registerIdentifier("hr", /^-{3,}$/gm, (s, rx) => {
@@ -374,8 +544,8 @@ export const buildOnlyDefaultElements = () => {
uuid: crypto.randomUUID(),
rendersContentOnly,
};
- }, (t) => {
- return <>{t.raw};
+ }, (token) => {
+ return ;
});
registerIdentifier("comment", //g, (s, rx) => {
@@ -386,8 +556,8 @@ export const buildOnlyDefaultElements = () => {
uuid: crypto.randomUUID(),
rendersContentOnly,
};
- }, (t) => {
- return <>{t.raw};
+ }, (token) => {
+ return <>;
});
registerIdentifier("frontmatter", /^---([\s\S]*?)---/g, (s, rx) => {
@@ -399,8 +569,8 @@ export const buildOnlyDefaultElements = () => {
raw: "",
uuid: "frontmatter",
};
- }, (t) => {
- return <>{t.raw};
+ }, (token) => {
+ return <>{token.raw};
});
registerIdentifier("table", /^\|\s[\s\S]*?\|(?=(\n\n)|$)/g, (s, rx) => {
diff --git a/lib/tcmd/index.ts b/lib/tcmd/index.ts
index 794df84..9e93631 100644
--- a/lib/tcmd/index.ts
+++ b/lib/tcmd/index.ts
@@ -1,7 +1,8 @@
"use client";
+import { FrontMatter, Token, TokenMarker } from "@/types";
import { zipArrays } from "../zip";
-import { TokenIdentifiers } from "./TokenIdentifiers";
+import { buildOnlyDefaultElements, TokenRenderers } from "./TokenIdentifiers";
export const createElements = (body: string): Token[] => {
const tokens = tokenize(body);
@@ -15,7 +16,9 @@ const tokenize = (body: string) => {
tokenizedBody.push(thing);
};
- for (const [type, token] of TokenIdentifiers.entries()) {
+ const ti = buildOnlyDefaultElements();
+
+ for (const [type, token] of ti.entries()) {
const rx = new RegExp(token.rx);
let match;
while ((match = rx.exec(body)) !== null) {
@@ -114,13 +117,13 @@ function isAcceptableChild(parentType: string, childType: string): boolean {
return acceptableChildren ? acceptableChildren.includes(childType) : true;
}
+// Occasionally, some P blocks start exactly at the same point as another block (a side effect of needing to exclude preceding linebreaks from the regex while also having the only clear delineation being those linebreaks) so we just remove those P blocks so that when searching for a parent, it doesn't need to figure out if the P block is valid or not. This doesn't cause issues during rendering since each block handles its own container element
function filterOverlappingPBlocks(blocks: TokenMarker[]): TokenMarker[] {
return blocks.filter((block) => {
if (block.type !== "p") {
- return true; // Keep blocks that are not 'p' type
+ return true;
}
- // Filter out 'p' blocks that overlap with any other block
for (const otherBlock of blocks) {
if (
otherBlock !== block &&
@@ -129,11 +132,11 @@ function filterOverlappingPBlocks(blocks: TokenMarker[]): TokenMarker[] {
(otherBlock.end === block.end && otherBlock.start < block.start)
)
) {
- return false; // Overlapping 'p' block found, filter it out
+ return false;
}
}
- return true; // Keep 'p' block if it doesn't overlap with any other block
+ return true;
});
}
@@ -157,7 +160,8 @@ const contentToChildren = (token: Token) => {
raw: c,
type: token.rendersChildrenOnly ? "p" : "text",
uuid: crypto.randomUUID(),
- rendersContentOnly: true,
+ rendersContentOnly: token.rendersChildrenOnly ? false : true,
+ render: TokenRenderers.get(token.rendersChildrenOnly ? "p" : "text")!,
children: token.rendersChildrenOnly && c.replaceAll("\n", "")
? [
{
@@ -166,6 +170,8 @@ const contentToChildren = (token: Token) => {
raw: c,
type: "text",
uuid: crypto.randomUUID(),
+ render: TokenRenderers.get("text")!,
+ rendersContentOnly: true,
},
]
: undefined,
@@ -238,6 +244,7 @@ function processChunks(chunks: Token[][]) {
metadata: { initialDepth: currentChunk[0].metadata.initialDepth },
uuid: crypto.randomUUID(),
children: currentChunk,
+ render: TokenRenderers.get("list")!,
});
mergedChunks.push(currentChunk);
break;
diff --git a/lib/tcmd/tokenizeParagraph.ts b/lib/tcmd/tokenizeParagraph.ts
index d0c1b3d..1a9f5c1 100644
--- a/lib/tcmd/tokenizeParagraph.ts
+++ b/lib/tcmd/tokenizeParagraph.ts
@@ -42,3 +42,48 @@ const paragraphTokens: {
},
},
];
+
+TokenIdentifiers.set("table", {
+ rx: /^\|\s[\s\S]*?\|(?=(\n\n)|$)/g,
+ parse(s) {
+ 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(),
+ },
+ type: "table",
+ uuid: crypto.randomUUID(),
+ };
+ },
+});
diff --git a/md/help articles/test.md b/md/help articles/test.md
index 9918c1d..593986b 100644
--- a/md/help articles/test.md
+++ b/md/help articles/test.md
@@ -1,40 +1,4 @@
-[][][]
-[[
-
-```
-[][][]
-
-This will make three columns, just like how this is laid out right now.
-
-Each element will get its own cell in the grid.
-
-So each of these paragraphs will end up in a separate column.
-
-/[]
-```
-
-]]
-
-[[
-```
-[][]
-
-This will make two columns
-
-[[
-Each column can use a different element
-]]
-
-/[]
-```
-]]
-
-[[
-This card will end up in the third column...
-]]
-
-[[
-... but since there isn't enough for this one, it will automatically get moved to the next row.
-]]
-
-/[]
\ No newline at end of file
+| test | Table | header |
+-------------------------
+| test | table | row |
+| look | another |
\ No newline at end of file
diff --git a/types.d.ts b/types.d.ts
index a04a730..142510f 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
type InlineToken = {
type:
| "text"
@@ -39,8 +41,7 @@ type SingleLineToken = {
cfg?: SingleLineCfg;
uuid: string;
};
-type Token = {
- type: string;
+type IdentifiedToken = {
metadata: Record