pulljosh.com
A world-class math input for the web
1import {
2 Schema,
3 Doc,
4 VNode,
5 h,
6 DocStrand,
7 TokenTypeSchema,
8 DocToken,
9 t,
10} from "@caret-js/core";
11
12export function renderDocumentDebugView<S extends Schema>(doc: Doc<S>): VNode {
13 return h("div", {}, renderStrandDebugView(doc.root));
14}
15
16export function renderStrandDebugView<S extends Schema>(
17 strand: DocStrand<S>,
18): VNode {
19 return h(
20 "div",
21 {
22 style:
23 "display: flex; align-items: flex-start; flex-direction: column; gap: 4px;",
24 },
25 ...strand.tokens.map((token) => renderTokenDebugView(token)),
26 );
27}
28
29export function renderTokenDebugView<
30 T extends TokenTypeSchema,
31 S extends Schema,
32>(token: DocToken<T, S>): VNode {
33 return h(
34 "div",
35 {
36 style: "border: 1px solid black; padding: 4px;",
37 },
38 h("div", { style: "font: 10px monospace;" }, t(token.id)),
39 h("div", { style: "font-weight: bold;" }, t(token.type)),
40 h("pre", { style: "margin: 0;" }, t(JSON.stringify(token.props))),
41 ...[...token.children.entries()].map(([childKey, childStrand]) =>
42 h(
43 "div",
44 { style: "margin-top: 4px;" },
45 h("div", { style: "font: 10px monospace;" }, t(childKey)),
46 renderStrandDebugView(childStrand),
47 ),
48 ),
49 );
50}