pulljosh.com
A world-class math input for the web
1import {
2 CaretVDOMComponentProps,
3 createCaretVDOMComponent,
4 h,
5 t,
6 VNode,
7} from "@caret-js/core";
8import { matrixTokenType } from "../tokens/matrix";
9
10export const MatrixTokenComponent = createCaretVDOMComponent<
11 typeof matrixTokenType
12>(
13 <C>({
14 token,
15 children,
16 }: CaretVDOMComponentProps<typeof matrixTokenType, C>) => {
17 const { rows, cols, style } = token.props;
18
19 let rowsHTML: VNode<C>[] = [];
20 for (let r = 0; r < rows; r++) {
21 let rowCellsHTML: VNode<C>[] = [];
22 for (let c = 0; c < cols; c++) {
23 rowCellsHTML.push(h("td", {}, children.get(`${r}-${c}`)));
24 }
25 rowsHTML.push(h("tr", {}, ...rowCellsHTML));
26 }
27
28 return h(
29 "table",
30 { class: `matrix matrix-${style}` },
31 h("tbody", {}, ...rowsHTML),
32 );
33 },
34);