feat: use commonDirectiveOptions everywhere

packages/myst-directives/src/admonition.ts

@@ -69,7 +69,6 @@ export const admonitionDirective: DirectiveSpec = {
         data.name !== 'admonition'
           ? (data.name.replace('.callout-', '') as Admonition['kind'])
           : undefined,
-      class: data.options?.class as string,
       children: children as any[],
     };
     if (data.options?.icon === false) {

packages/myst-directives/src/aside.ts

@@ -1,7 +1,7 @@
 import type { DirectiveSpec, DirectiveData, GenericNode } from 'myst-common';
 import type { Aside } from 'myst-spec-ext';
 import type { FlowContent, ListContent, PhrasingContent } from 'myst-spec';
-import { addCommonDirectiveOptions, labelDirectiveOption } from './utils.js';
+import { addCommonDirectiveOptions, commonDirectiveOptions } from './utils.js';
 
 export const asideDirective: DirectiveSpec = {
   name: 'aside',
@@ -11,11 +11,7 @@ export const asideDirective: DirectiveSpec = {
     doc: 'An optional title',
   },
   options: {
-    ...labelDirectiveOption('aside'),
-    // TODO: Add enumeration in future
-    class: {
-      type: String,
-    },
+    ...commonDirectiveOptions('aside'),
   },
   body: {
     type: 'myst',
@@ -34,7 +30,6 @@ export const asideDirective: DirectiveSpec = {
       kind:
         data.name == 'aside' || data.name == 'margin' ? undefined : (data.name as Aside['kind']),
       children,
-      class: data.options?.class as string | undefined,
     };
     addCommonDirectiveOptions(data, aside);
     return [aside];

packages/myst-directives/src/blockquote.ts

@@ -1,14 +1,14 @@
 import type { DirectiveSpec, DirectiveData, GenericNode } from 'myst-common';
 import type { Container } from 'myst-spec-ext';
 import classNames from 'classnames';
-import { addCommonDirectiveOptions, labelDirectiveOption } from './utils.js';
+import { addCommonDirectiveOptions, commonDirectiveOptions } from './utils.js';
 
 export const blockquoteDirective: DirectiveSpec = {
   name: 'blockquote',
   alias: ['epigraph', 'pull-quote'],
   doc: 'Block quotes are used to indicate that the enclosed content forms an extended quotation. They may be followed by an inscription or attribution formed of a paragraph beginning with `--`, `---`, or an em-dash.',
   options: {
-    ...labelDirectiveOption('blockquote'),
+    ...commonDirectiveOptions('blockquote'),
 
     // TODO: Add enumeration in future
     class: {
@@ -28,11 +28,9 @@ export const blockquoteDirective: DirectiveSpec = {
     if (data.body) {
       children.push(...(data.body as GenericNode[]));
     }
-    const className = data.options?.class as string;
     const container: Container = {
       type: 'container',
       kind: 'quote',
-      class: classNames({ [className]: className, [data.name]: data.name !== 'blockquote' }),
       children: [
         {
           // @ts-expect-error: myst-spec needs updating to support blockquote
@@ -42,6 +40,12 @@ export const blockquoteDirective: DirectiveSpec = {
       ],
     };
     addCommonDirectiveOptions(data, container);
+    // Override class to include name of container
+    const className = data.options?.class as string;
+    container.class = classNames({
+      [className]: className,
+      [data.name]: data.name !== 'blockquote',
+    });
     return [container];
   },
 };

packages/myst-directives/src/code.ts

@@ -142,10 +142,6 @@ export const codeDirective: DirectiveSpec = {
   },
   options: {
     ...commonDirectiveOptions('code'),
-    class: {
-      type: String,
-      // class_option: list of strings?
-    },
     ...CODE_DIRECTIVE_OPTIONS,
   },
   body: {
@@ -157,7 +153,6 @@ export const codeDirective: DirectiveSpec = {
     const code: Code = {
       type: 'code',
       lang: data.arg as string,
-      class: data.options?.class as string,
       ...opts,
       value: data.body as string,
     };

packages/myst-directives/src/div.ts

@@ -1,15 +1,11 @@
 import type { DirectiveSpec, DirectiveData, GenericNode } from 'myst-common';
 import type { FlowContent, ListContent, PhrasingContent } from 'myst-spec';
-import { addCommonDirectiveOptions, labelDirectiveOption } from './utils.js';
+import { addCommonDirectiveOptions, commonDirectiveOptions } from './utils.js';
 
 export const divDirective: DirectiveSpec = {
   name: 'div',
   options: {
-    ...labelDirectiveOption('div'),
-    // TODO: Add enumeration in future
-    class: {
-      type: String,
-    },
+    ...commonDirectiveOptions('div'),
   },
   body: {
     type: 'myst',
@@ -18,7 +14,6 @@ export const divDirective: DirectiveSpec = {
   run(data: DirectiveData): GenericNode[] {
     const div: GenericNode = {
       type: 'div',
-      class: data.options?.class as string | undefined,
       children: data.body as unknown as (FlowContent | ListContent | PhrasingContent)[],
     };
     addCommonDirectiveOptions(data, div);

packages/myst-directives/src/dropdown.ts

@@ -1,13 +1,13 @@
 import type { DirectiveSpec, DirectiveData, GenericNode } from 'myst-common';
-import { addCommonDirectiveOptions, labelDirectiveOption } from './utils.js';
+import { addCommonDirectiveOptions, commonDirectiveOptions } from './utils.js';
 
 export const dropdownDirective: DirectiveSpec = {
   name: 'dropdown',
   arg: {
     type: 'myst',
   },
   options: {
-    ...labelDirectiveOption('dropdown'),
+    ...commonDirectiveOptions('dropdown'),
     // TODO: Add enumeration in future
     open: {
       type: Boolean,

packages/myst-directives/src/figure.ts

@@ -102,7 +102,6 @@ export const figureDirective: DirectiveSpec = {
     const container: GenericParent = {
       type: 'container',
       kind: (data.options?.kind as string) || 'figure',
-      class: data.options?.class,
       children,
     };
     addCommonDirectiveOptions(data, container);

packages/myst-directives/src/iframe.ts

@@ -11,10 +11,6 @@ export const iframeDirective: DirectiveSpec = {
   },
   options: {
     ...commonDirectiveOptions('iframe'),
-    class: {
-      type: String,
-      // class_option: list of strings?
-    },
     width: {
       type: String,
       doc: 'The iframe width, in CSS units, for example `50%` or `300px`.',
@@ -50,14 +46,12 @@ export const iframeDirective: DirectiveSpec = {
       ];
     }
     if (!data.body) {
-      iframe.class = data.options?.class as string;
       addCommonDirectiveOptions(data, iframe);
       return [iframe];
     }
     const container = {
       type: 'container',
       kind: 'figure',
-      class: data.options?.class,
       children: [iframe, { type: 'caption', children: data.body as GenericNode[] }],
     };
     addCommonDirectiveOptions(data, container);

packages/myst-directives/src/image.ts

@@ -11,10 +11,6 @@ export const imageDirective: DirectiveSpec = {
   },
   options: {
     ...commonDirectiveOptions('image'),
-    class: {
-      type: String,
-      // class_option: list of strings?
-    },
     height: {
       type: String,
       doc: 'The image height, in CSS units, for example `4em` or `300px`.',
@@ -46,13 +42,12 @@ export const imageDirective: DirectiveSpec = {
     },
   },
   run(data: DirectiveData): GenericNode[] {
-    const { alt, class: c, height, width, align, title } = data.options || {};
+    const { alt, height, width, align, title } = data.options || {};
     const image = {
       type: 'image',
       url: data.arg as string,
       alt: alt ?? (data.body ? toText(data.body as GenericNode[]) : undefined),
       title,
-      class: c,
       height,
       width,
       align: align ?? 'center',

packages/myst-directives/src/mermaid.ts

@@ -1,10 +1,10 @@
 import type { DirectiveSpec, DirectiveData, GenericNode } from 'myst-common';
-import { addCommonDirectiveOptions, labelDirectiveOption } from './utils.js';
+import { addCommonDirectiveOptions, commonDirectiveOptions } from './utils.js';
 
 export const mermaidDirective: DirectiveSpec = {
   name: 'mermaid',
   options: {
-    ...labelDirectiveOption('mermaid'),
+    ...commonDirectiveOptions('mermaid'),
   },
   body: {
     type: String,

packages/myst-directives/src/table.ts

@@ -47,7 +47,6 @@ export const tableDirective: DirectiveSpec = {
     const container = {
       type: 'container',
       kind: 'table',
-      class: data.options?.class,
       children,
     };
     addCommonDirectiveOptions(data, container);
@@ -156,7 +155,6 @@ export const listTableDirective: DirectiveSpec = {
     const container = {
       type: 'container',
       kind: 'table',
-      class: data.options?.class,
       children,
     };
     addCommonDirectiveOptions(data, container);
@@ -324,7 +322,6 @@ export const csvTableDirective: DirectiveSpec = {
     const container = {
       type: 'container',
       kind: 'table',
-      class: data.options?.class,
       children: [...captions, table],
     };
     addCommonDirectiveOptions(data, container);

packages/myst-directives/src/utils.ts

@@ -5,6 +5,15 @@ import {
   type GenericNode,
 } from 'myst-common';
 
+export function classDirectiveOption(nodeType = 'node') {
+  return {
+    class: {
+      type: String,
+      doc: `Annotate the ${nodeType} with a set of space-delimited class names.`,
+    },
+  };
+}
+
 export function labelDirectiveOption(nodeType = 'node') {
   return {
     label: {
@@ -31,15 +40,23 @@ export function enumerationDirectiveOptions(nodeType = 'node'): Required<Directi
 }
 
 /**
- * Adds `label`, `enumerated` and `enumerator`.
+ * Adds `class`, `label`, `enumerated`, and `enumerator`.
  */
 export function commonDirectiveOptions(nodeType = 'node'): Required<DirectiveSpec>['options'] {
   return {
+    ...classDirectiveOption(nodeType),
     ...labelDirectiveOption(nodeType),
     ...enumerationDirectiveOptions(nodeType),
   };
 }
 
+export function addClassOptions(data: DirectiveData, node: GenericNode): GenericNode {
+  if (typeof data.options?.class === 'string') {
+    node.class = data.options.class;
+  }
+  return node;
+}
+
 export function addLabelOptions(data: DirectiveData, node: GenericNode): GenericNode {
   const { label, identifier } = normalizeLabel(data.options?.label as string | undefined) || {};
   if (label) node.label = label;
@@ -58,6 +75,7 @@ export function addEnumerationOptions(data: DirectiveData, node: GenericNode): G
 }
 
 export function addCommonDirectiveOptions(data: DirectiveData, node: GenericNode) {
+  addClassOptions(data, node);
   addLabelOptions(data, node);
   addEnumerationOptions(data, node);
   return node;

packages/myst-ext-exercise/src/exercise.ts

@@ -1,5 +1,6 @@
 import type { DirectiveSpec, DirectiveData, GenericNode } from 'myst-common';
 import { createId, normalizeLabel } from 'myst-common';
+import { addCommonDirectiveOptions, commonDirectiveOptions } from 'myst-directives';
 
 export const exerciseDirective: DirectiveSpec = {
   name: 'exercise',
@@ -8,12 +9,7 @@ export const exerciseDirective: DirectiveSpec = {
     type: 'myst',
   },
   options: {
-    label: {
-      type: String,
-    },
-    class: {
-      type: String,
-    },
+    ...commonDirectiveOptions('exercise'),
     nonumber: {
       type: Boolean,
     },
@@ -36,19 +32,21 @@ export const exerciseDirective: DirectiveSpec = {
       children.push(...(data.body as GenericNode[]));
     }
     const nonumber = (data.options?.nonumber as boolean) ?? false;
-    // Numbered, unlabeled exercises still need a label
-    const backupLabel = nonumber ? undefined : `exercise-${createId()}`;
-    const rawLabel = (data.options?.label as string) || backupLabel;
-    const { label, identifier } = normalizeLabel(rawLabel) || {};
     const exercise: GenericNode = {
       type: 'exercise',
-      label,
-      identifier,
-      class: data.options?.class as string,
       hidden: data.options?.hidden as boolean,
       enumerated: !nonumber,
       children: children as any[],
     };
+    addCommonDirectiveOptions(data, exercise);
+
+    // Numbered, unlabeled exercises still need a label
+    const backupLabel = nonumber ? undefined : `exercise-${createId()}`;
+    const rawLabel = (data.options?.label as string) || backupLabel;
+    const { label, identifier } = normalizeLabel(rawLabel) || {};
+    exercise.label = label;
+    exercise.identifier = identifier;
+
     if (data.name.endsWith('-start')) {
       exercise.gate = 'start';
     }

packages/myst-ext-grid/src/index.ts

@@ -4,6 +4,7 @@ import {
   type GenericNode,
   normalizeLabel,
 } from 'myst-common';
+import { addCommonDirectiveOptions, commonDirectiveOptions } from 'myst-directives';
 
 function getColumns(columnString?: string) {
   const columns = (columnString ?? '1 2 2 3')
@@ -29,18 +30,21 @@ export const gridDirective: DirectiveSpec = {
   // padding
   // reverse
   // outline
+  options: {
+    ...commonDirectiveOptions('grid'),
+  },
   body: {
     type: 'myst',
     required: true,
   },
   run(data: DirectiveData): GenericNode[] {
-    return [
-      {
-        type: 'grid',
-        columns: getColumns(data.arg as string | undefined),
-        children: data.body as GenericNode[],
-      },
-    ];
+    const grid = {
+      type: 'grid',
+      columns: getColumns(data.arg as string | undefined),
+      children: data.body as GenericNode[],
+    };
+    addCommonDirectiveOptions(data, grid);
+    return [grid];
   },
 };