🔧 More typst export improvements

.changeset/beige-ways-learn.md

@@ -0,0 +1,5 @@
+---
+'myst-to-typst': patch
+---
+
+Allow overriding default breakable value for typst figures

.changeset/clean-toys-work.md

@@ -0,0 +1,5 @@
+---
+'myst-to-typst': patch
+---
+
+Add hook for customizing table columns in typst

.changeset/heavy-melons-count.md

@@ -0,0 +1,5 @@
+---
+'myst-to-typst': patch
+---
+
+Render table legends below tables in typst

.changeset/soft-shrimps-brake.md

@@ -0,0 +1,5 @@
+---
+'myst-to-typst': patch
+---
+
+Support lists that do not start at 1 in typst

.changeset/tidy-crabs-rhyme.md

@@ -0,0 +1,5 @@
+---
+'myst-to-typst': patch
+---
+
+Render cross-references with correct text in typst

.changeset/unlucky-adults-fry.md

@@ -0,0 +1,5 @@
+---
+'myst-to-typst': patch
+---
+
+Support table cell background color in typst

packages/myst-to-typst/src/container.ts

@@ -35,6 +35,11 @@ export function determineCaptionKind(node: GenericNode): CaptionKind | null {
 
 function renderFigureChild(node: GenericNode, state: ITypstSerializer) {
   const useBrackets = node.type !== 'image' && node.type !== 'table';
+  if (node.type === 'legend') {
+    state.useMacro('#let legendStyle = (fill: black.lighten(20%), size: 8pt, style: "italic")');
+    state.write('text(..legendStyle)');
+    node.type = 'paragraph';
+  }
   if (useBrackets) state.write('[\n');
   else state.write('\n  ');
   state.renderChildren({ children: [node] });
@@ -60,12 +65,17 @@ export const containerHandler: Handler = (node, state) => {
   state.data.isInFigure = true;
   const { identifier, kind } = node;
   let label: string | undefined = identifier;
-  const captions = node.children?.filter(
-    (child: GenericNode) => child.type === 'caption' || child.type === 'legend',
-  );
-  const nonCaptions = node.children?.filter(
-    (child: GenericNode) => child.type !== 'caption' && child.type !== 'legend',
-  );
+  const captionTypes = node.kind === 'table' ? ['caption'] : ['caption', 'legend'];
+  const captions: GenericNode[] = node.children?.filter((child: GenericNode) => {
+    return captionTypes.includes(child.type);
+  });
+  let nonCaptions: GenericNode[] = node.children?.filter((child: GenericNode) => {
+    return !captionTypes.includes(child.type);
+  });
+  nonCaptions = [
+    ...nonCaptions.filter((child) => child.type !== 'legend'),
+    ...nonCaptions.filter((child) => child.type === 'legend'),
+  ];
   if (!nonCaptions || nonCaptions.length === 0) {
     fileError(state.file, `Figure with no non-caption content: ${label}`, {
       node,
@@ -99,7 +109,10 @@ export const containerHandler: Handler = (node, state) => {
       nonCaptions.filter((item: GenericNode) => item.type === 'container').length ===
       nonCaptions.length;
     state.useMacro('#import "@preview/subpar:0.1.1"');
-    state.write(`#show figure: set block(breakable: ${allSubFigs ? 'false' : 'true'})\n`);
+    state.useMacro('#let breakableDefault = true');
+    state.write(
+      `#show figure: set block(breakable: ${allSubFigs ? 'false' : 'breakableDefault'})\n`,
+    );
     state.write('#subpar.grid(');
     let columns = nonCaptions.length <= 3 ? nonCaptions.length : 2; // TODO: allow this to be customized
     nonCaptions.forEach((item: GenericNode) => {
@@ -123,12 +136,14 @@ export const containerHandler: Handler = (node, state) => {
       label = undefined;
     }
   } else if (nonCaptions && nonCaptions.length === 1) {
-    state.write('#show figure: set block(breakable: true)\n');
+    state.useMacro('#let breakableDefault = true');
+    state.write('#show figure: set block(breakable: breakableDefault)\n');
     state.write('#figure(');
     renderFigureChild(nonCaptions[0], state);
     state.write(',');
   } else {
-    state.write('#show figure: set block(breakable: true)\n');
+    state.useMacro('#let breakableDefault = true');
+    state.write('#show figure: set block(breakable: breakableDefault)\n');
     state.write('#figure([\n  ');
     state.renderChildren(node, 1);
     state.write('],');

packages/myst-to-typst/src/index.ts

@@ -189,10 +189,17 @@ const handlers: Record<string, Handler> = {
     state.addNewLine();
   },
   list(node, state) {
+    const setStart = node.ordered && node.start && node.start !== 1;
+    if (setStart) {
+      state.write(`#set enum(start: ${node.start})`);
+    }
     state.data.list ??= { env: [] };
     state.data.list.env.push(node.ordered ? '+' : '-');
-    state.renderChildren(node, 2);
+    state.renderChildren(node, setStart ? 1 : 2);
     state.data.list.env.pop();
+    if (setStart) {
+      state.write('#set enum(start: 1)\n\n');
+    }
   },
   listItem(node, state) {
     const listEnv = state.data.list?.env ?? [];
@@ -345,7 +352,7 @@ const handlers: Record<string, Handler> = {
   caption: captionHandler,
   legend: captionHandler,
   captionNumber: () => undefined,
-  crossReference(node: CrossReference, state, parent) {
+  crossReference(node: CrossReference, state) {
     if (node.remote) {
       // We don't want to handle remote references, treat them as links
       const url =
@@ -355,13 +362,10 @@ const handlers: Record<string, Handler> = {
       linkHandler({ ...node, url: url }, state);
       return;
     }
-    // Look up reference and add the text
-    // const usedTemplate = node.template?.includes('%s') ? node.template : undefined;
-    // const text = (usedTemplate ?? toText(node))?.replace(/\s/g, '~') || '%s';
     const id = node.identifier;
-    // state.write(text.replace(/%s/g, `@${id}`));
-    const next = nextCharacterIsText(parent, node);
-    state.write(next ? `#[@${id}]` : `@${id}`);
+    state.write(`#link(<${id}>)[`);
+    state.renderChildren(node);
+    state.write(']');
   },
   citeGroup(node, state) {
     state.renderChildren(node, 0, { delim: ' ' });

packages/myst-to-typst/src/table.ts

@@ -34,9 +34,12 @@ export const tableHandler: Handler = (node, state) => {
     return;
   }
   state.useMacro('#import "@preview/tablex:0.0.9": tablex, cellx, hlinex, vlinex');
+  // These two separate style hooks are somewhat redundant, but they allow defining
+  // article-wide styles and single-table styles separately
   state.useMacro('#let tableStyle = (:)');
+  state.useMacro('#let columnStyle = (:)');
   state.write(
-    `${command}(columns: ${columns}, header-rows: ${countHeaderRows(node)}, repeat-header: true, ..tableStyle,\n`,
+    `${command}(columns: ${columns}, header-rows: ${countHeaderRows(node)}, repeat-header: true, ..tableStyle, ..columnStyle,\n`,
   );
   state.renderChildren(node, 1);
   state.write(')\n');
@@ -48,7 +51,7 @@ export const tableRowHandler: Handler = (node, state) => {
 };
 
 export const tableCellHandler: Handler = (node, state) => {
-  if (node.rowspan || node.colspan || node.align) {
+  if (node.rowspan || node.colspan || node.align || node.style?.backgroundColor) {
     state.write('cellx(');
     if (node.rowspan) {
       state.write(`rowspan: ${node.rowspan}, `);
@@ -59,6 +62,9 @@ export const tableCellHandler: Handler = (node, state) => {
     if (node.align) {
       state.write(`align: ${node.align}, `);
     }
+    if (node.style?.backgroundColor) {
+      state.write(`fill: rgb("${node.style.backgroundColor}"), `);
+    }
     state.write(')');
   }
   state.write('[\n');