@oml/markdown 0.7.0

package/src/renderers/index.ts

@@ -0,0 +1,16 @@
+// Copyright (c) 2026 Modelware. All rights reserved.
+
+export * from './types.js';
+export * from './renderer.js';
+export * from './table-editor-renderer.js';
+export * from './table-renderer.js';
+export * from './tree-renderer.js';
+export * from './text-renderer.js';
+export * from './message-renderer.js';
+export * from './matrix-renderer.js';
+export * from './list-renderer.js';
+export * from './graph-renderer.js';
+export * from './diagram-renderer.js';
+export * from './chart-renderer.js';
+export * from './registry.js';
+export * from './wikilink-utils.js';

package/src/renderers/list-renderer.ts

@@ -0,0 +1,289 @@
+// Copyright (c) 2026 Modelware. All rights reserved.
+
+import { QueryMarkdownBlockRenderer } from './renderer.js';
+import type { MdBlockExecutionResult } from './types.js';
+import { appendInlineValue } from './wikilink-utils.js';
+
+type ListStyleSelectorKind = 'list' | 'item';
+type ListStyleTarget = 'value' | 'marker';
+
+type CompiledListStyleRule = {
+    selectors: Array<{ kind: ListStyleSelectorKind; condition?: string }>;
+    target: ListStyleTarget;
+    style: Record<string, string>;
+};
+
+type ListSelectorContext =
+    | { kind: 'list'; context: Record<string, never> }
+    | {
+        kind: 'item';
+        context: {
+            index: number;
+            value: string;
+            row: { get: (key?: unknown) => { value: string } | undefined };
+        };
+    };
+
+export class ListMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
+    canRender(result: MdBlockExecutionResult): boolean {
+        return result.status === 'ok'
+            && result.kind === 'list'
+            && result.format === 'table'
+            && !!result.payload;
+    }
+
+    render(result: MdBlockExecutionResult): HTMLElement {
+        const container = this.createResultContainer(result.status);
+        container.classList.add('oml-md-result-plain');
+        const payload = result.payload;
+        if (!payload || payload.rows.length === 0) {
+            container.appendChild(this.createMessageContainer('No results.'));
+            return container;
+        }
+        const stylesheet = compileListStylesheet(result.options);
+
+        const list = document.createElement('ul');
+        list.className = 'oml-md-result-list';
+        const listContext: ListSelectorContext = { kind: 'list', context: {} };
+        for (const rule of stylesheet) {
+            if (!matchesListRule(rule, [listContext])) {
+                continue;
+            }
+            if (rule.target === 'marker') {
+                continue;
+            }
+            applyValueStyles(list, rule.style);
+        }
+
+        payload.rows.forEach((row, index) => {
+            const item = document.createElement('li');
+            const valueSpan = document.createElement('span');
+            valueSpan.className = 'oml-md-result-list-value';
+            appendInlineValue(valueSpan, row[0] ?? '');
+            item.appendChild(valueSpan);
+
+            const itemContext: ListSelectorContext = {
+                kind: 'item',
+                context: {
+                    index,
+                    value: row[0] ?? '',
+                    row: createRowAccessor(payload.columns, row)
+                }
+            };
+            for (const rule of stylesheet) {
+                if (!matchesListRule(rule, [itemContext])) {
+                    continue;
+                }
+                if (rule.target === 'marker') {
+                    applyMarkerStyles(item, rule.style);
+                } else {
+                    applyValueStyles(valueSpan, rule.style);
+                }
+            }
+            list.appendChild(item);
+        });
+
+        container.appendChild(list);
+        return container;
+    }
+}
+
+function compileListStylesheet(options: Record<string, unknown> | undefined): CompiledListStyleRule[] {
+    const rawStylesheet = options?.stylesheet;
+    if (!Array.isArray(rawStylesheet)) {
+        return [];
+    }
+    const compiled: CompiledListStyleRule[] = [];
+    for (const rawRule of rawStylesheet) {
+        if (!isRecord(rawRule)) {
+            continue;
+        }
+        const selectors = parseListSelectors(rawRule.selector);
+        if (selectors.length === 0) {
+            continue;
+        }
+        const style = normalizeStyle(rawRule.style);
+        if (Object.keys(style).length === 0) {
+            continue;
+        }
+        const target = rawRule.target === 'marker' ? 'marker' : 'value';
+        compiled.push({ selectors, target, style });
+    }
+    return compiled;
+}
+
+function matchesListRule(rule: CompiledListStyleRule, contexts: ReadonlyArray<ListSelectorContext>): boolean {
+    return rule.selectors.some((selector) => {
+        const contextEntry = contexts.find((entry) => entry.kind === selector.kind);
+        if (!contextEntry) {
+            return false;
+        }
+        return evaluateCondition(selector.condition, contextEntry.context);
+    });
+}
+
+function applyValueStyles(target: HTMLElement, style: Record<string, string>): void {
+    for (const [property, cssValue] of Object.entries(style)) {
+        target.style.setProperty(property, cssValue);
+    }
+}
+
+function applyMarkerStyles(listItem: HTMLElement, style: Record<string, string>): void {
+    for (const [property, cssValue] of Object.entries(style)) {
+        const normalized = property.trim().toLowerCase();
+        if (normalized === 'color') {
+            listItem.style.setProperty('--oml-list-marker-color', cssValue);
+            continue;
+        }
+        if (normalized === 'font-size') {
+            listItem.style.setProperty('--oml-list-marker-font-size', cssValue);
+            continue;
+        }
+        if (normalized === 'font-weight') {
+            listItem.style.setProperty('--oml-list-marker-font-weight', cssValue);
+            continue;
+        }
+        if (normalized === 'font-style') {
+            listItem.style.setProperty('--oml-list-marker-font-style', cssValue);
+        }
+    }
+}
+
+function parseListSelectors(rawSelector: unknown): Array<{ kind: ListStyleSelectorKind; condition?: string }> {
+    if (typeof rawSelector !== 'string') {
+        return [];
+    }
+    const parts = splitSelectors(rawSelector);
+    const selectors: Array<{ kind: ListStyleSelectorKind; condition?: string }> = [];
+    for (const part of parts) {
+        const parsed = parseListSelector(part);
+        if (parsed) {
+            selectors.push(parsed);
+        }
+    }
+    return selectors;
+}
+
+function splitSelectors(rawSelector: string): string[] {
+    const parts: string[] = [];
+    let current = '';
+    let bracketDepth = 0;
+    let quote: '"' | "'" | undefined;
+    for (let index = 0; index < rawSelector.length; index += 1) {
+        const char = rawSelector[index];
+        if (quote) {
+            current += char;
+            if (char === quote && rawSelector[index - 1] !== '\\') {
+                quote = undefined;
+            }
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            current += char;
+            continue;
+        }
+        if (char === '[') {
+            bracketDepth += 1;
+            current += char;
+            continue;
+        }
+        if (char === ']' && bracketDepth > 0) {
+            bracketDepth -= 1;
+            current += char;
+            continue;
+        }
+        if (char === ',' && bracketDepth === 0) {
+            parts.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += char;
+    }
+    if (current.trim()) {
+        parts.push(current.trim());
+    }
+    return parts;
+}
+
+function parseListSelector(selector: string): { kind: ListStyleSelectorKind; condition?: string } | undefined {
+    const trimmed = selector.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    const bracketStart = trimmed.indexOf('[');
+    if (bracketStart === -1) {
+        return toListSelector(trimmed, undefined);
+    }
+    if (!trimmed.endsWith(']')) {
+        return undefined;
+    }
+    const kind = trimmed.slice(0, bracketStart).trim();
+    const condition = trimmed.slice(bracketStart + 1, -1).trim();
+    return toListSelector(kind, condition || undefined);
+}
+
+function toListSelector(kind: string, condition: string | undefined): { kind: ListStyleSelectorKind; condition?: string } | undefined {
+    const normalized = kind.trim().toLowerCase();
+    if (normalized !== 'list' && normalized !== 'item') {
+        return undefined;
+    }
+    return { kind: normalized, condition };
+}
+
+function normalizeStyle(rawStyle: unknown): Record<string, string> {
+    if (!isRecord(rawStyle)) {
+        return {};
+    }
+    const style: Record<string, string> = {};
+    for (const [property, rawValue] of Object.entries(rawStyle)) {
+        if (!property.trim()) {
+            continue;
+        }
+        if (rawValue === undefined || rawValue === null) {
+            continue;
+        }
+        style[property] = String(rawValue);
+    }
+    return style;
+}
+
+function createRowAccessor(columns: string[], row: string[]): { get: (key?: unknown) => { value: string } | undefined } {
+    return {
+        get: (key?: unknown) => {
+            if (typeof key === 'number' && Number.isInteger(key)) {
+                const value = row[key];
+                return value === undefined ? undefined : { value };
+            }
+            if (typeof key === 'string') {
+                const index = columns.indexOf(key);
+                if (index < 0) {
+                    return undefined;
+                }
+                const value = row[index];
+                return value === undefined ? undefined : { value };
+            }
+            return undefined;
+        }
+    };
+}
+
+function evaluateCondition(condition: string | undefined, context: object): boolean {
+    if (!condition) {
+        return true;
+    }
+    try {
+        const scope = Object.assign(Object.create(null), context) as Record<string, unknown>;
+        const keys = Object.keys(scope);
+        const values = keys.map((key) => scope[key]);
+        // eslint-disable-next-line no-new-func
+        const evaluator = new Function(...keys, `"use strict"; return (${condition});`);
+        return Boolean(evaluator(...values));
+    } catch {
+        return false;
+    }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}