@oml/markdown 0.10.0 → 0.12.0

package/src/renderers/table-renderer.ts

@@ -1,8 +1,8 @@
 // Copyright (c) 2026 Modelware. All rights reserved.
 
 import { QueryMarkdownBlockRenderer, type TableBlockKind } from './renderer.js';
-import type { MdBlockExecutionResult } from './types.js';
-import { appendTokenizedValueParts, isIriValue, shortLabelFromIri } from './wikilink-utils.js';
+import type { MdBlockExecutionResult, MdTableCell } from './types.js';
+import { shortLabelFromIri } from './wikilink-utils.js';
 
 type TableEditorActionKind = 'add' | 'remove' | 'validate' | 'link' | 'undo' | 'redo' | 'ai' | 'properties';
 type TableEditorActionContext = {
@@ -27,6 +27,28 @@ type TableEditorActionContext = {
     pointerY?: number;
 };
 
+type TableRootWithAiContext = HTMLDivElement & {
+    __omlAiContext?: {
+        columns: string[];
+        rows: Array<{ iri: string; cells: string[] }>;
+        blockSource?: string;
+    };
+};
+
+type PersistedTableUiState = {
+    search: string;
+    pageSize: number;
+    page: number;
+    sortKey: string;
+    sortDir: 'asc' | 'desc';
+    hasUserSort: boolean;
+};
+
+type TableRendererWindow = Window & typeof globalThis & {
+    __omlGetPersistedTableUiState?: (blockId: string) => Partial<PersistedTableUiState> | undefined;
+    __omlSetPersistedTableUiState?: (blockId: string, state: PersistedTableUiState) => void;
+};
+
 export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
     protected readonly tableKinds: ReadonlyArray<TableBlockKind> = ['table'];
 
@@ -44,9 +66,11 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         const tableRoot = this.renderInteractiveTable(
             result.payload?.columns ?? [],
             result.payload?.rows ?? [],
+            result.payload?.rowsTyped,
             stylesheet,
             result.options,
-            result.blockSource
+            result.blockSource,
+            result.blockId
         );
         if (typeof result.blockId === 'string' && result.blockId.length > 0) {
             tableRoot.dataset.tableBlockId = result.blockId;
@@ -88,14 +112,20 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
     protected renderInteractiveTable(
         columns: string[],
         rows: string[][],
+        rowsTyped: MdTableCell[][] | undefined,
         stylesheet: CompiledTableStyleRule[],
         options: Record<string, unknown> | undefined,
-        blockSource?: string
+        blockSource?: string,
+        blockId?: string
     ): HTMLElement {
-        const root = document.createElement('div');
+        const root = document.createElement('div') as TableRootWithAiContext;
         root.className = 'table-root graph-root';
         const isTree = this.tableKinds.includes('tree');
-        const allRowsWithIndex = rows.map((cells, index) => ({ index, cells }));
+        const allRowsWithIndex = rows.map((cells, index) => ({
+            index,
+            cells,
+            typedCells: rowsTyped?.[index],
+        }));
         const containmentColumns = isTree ? resolveContainmentColumns(columns, options) : [];
         const baseVisibleColumnIndexes = isTree
             ? columns.map((_, index) => index).filter((index) => !containmentColumns.includes(index))
@@ -104,6 +134,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         const baseRowsWithIndex = allRowsWithIndex.map((row) => ({
             ...row,
             cells: baseVisibleColumnIndexes.map((columnIndex) => row.cells[columnIndex] ?? ''),
+            typedCells: baseVisibleColumnIndexes.map((columnIndex) => row.typedCells?.[columnIndex]),
         }));
         const selectorRowsByIndex = new Map(baseRowsWithIndex.map((row) => [row.index, row] as const));
         const baseColumnContexts = createColumnContexts(baseVisibleColumns, baseRowsWithIndex);
@@ -113,7 +144,18 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         const rowsWithIndex = allRowsWithIndex.map((row) => ({
             ...row,
             cells: visibleColumnIndexes.map((columnIndex) => row.cells[columnIndex] ?? ''),
+            typedCells: visibleColumnIndexes.map((columnIndex) => row.typedCells?.[columnIndex]),
         }));
+        root.__omlAiContext = {
+            columns: visibleColumns.slice(),
+            rows: rowsWithIndex
+                .map((row) => ({
+                    iri: (row.cells[0] ?? '').trim(),
+                    cells: row.cells.slice(),
+                }))
+                .filter((row) => row.iri.length > 0),
+            blockSource,
+        };
         const columnContexts = createColumnContexts(visibleColumns, rowsWithIndex);
         const treeModel = isTree
             ? this.createTreeModel(columns, allRowsWithIndex, visibleColumnIndexes, options)
@@ -121,19 +163,36 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         const fullyExpandedTreeRows = isTree && treeModel
             ? this.flattenAllTreeRows(treeModel)
             : undefined;
+        const persistedState = blockId
+            ? (window as TableRendererWindow).__omlGetPersistedTableUiState?.(blockId)
+            : undefined;
 
         const state = {
-            search: '',
-            pageSize: 50,
-            page: 0,
-            sortKey: '' as string,
-            sortDir: 'asc' as 'asc' | 'desc',
-            hasUserSort: false,
+            search: persistedState?.search ?? '',
+            pageSize: persistedState?.pageSize ?? 50,
+            page: persistedState?.page ?? 0,
+            sortKey: persistedState?.sortKey ?? '' as string,
+            sortDir: persistedState?.sortDir ?? 'asc' as 'asc' | 'desc',
+            hasUserSort: persistedState?.hasUserSort ?? false,
             columnWidths: new Array<number | undefined>(columns.length).fill(undefined),
             initialAutosizeApplied: false,
             expanded: new Set<string>(treeModel?.expandableNodes ?? []),
         };
 
+        const persistUiState = () => {
+            if (!blockId) {
+                return;
+            }
+            (window as TableRendererWindow).__omlSetPersistedTableUiState?.(blockId, {
+                search: state.search,
+                pageSize: state.pageSize,
+                page: state.page,
+                sortKey: state.sortKey,
+                sortDir: state.sortDir,
+                hasUserSort: state.hasUserSort,
+            });
+        };
+
         const controls = document.createElement('div');
         controls.className = 'table-controls';
 
@@ -150,9 +209,11 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
             }
             pageSize.appendChild(option);
         }
+        pageSize.value = String(state.pageSize);
         pageSize.addEventListener('change', () => {
             state.pageSize = Number.parseInt(pageSize.value, 10);
             state.page = 0;
+            persistUiState();
             renderPage();
         });
         if (!isTree) {
@@ -187,9 +248,11 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         searchInput.type = 'search';
         searchInput.className = 'tree-filter';
         searchInput.placeholder = 'Filter...';
+        searchInput.value = state.search;
         searchInput.addEventListener('input', () => {
             state.search = searchInput.value.trim().toLowerCase();
             state.page = 0;
+            persistUiState();
             renderPage();
         });
         controlsRight.appendChild(searchInput);
@@ -211,17 +274,23 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         downloadButton.appendChild(iconSvg);
         downloadButton.addEventListener('click', () => {
             const sourceRows = isTree && treeModel
-                ? this.resolveTreeSourceRows(treeModel, visibleColumns, state.expanded, state.search)
+                ? this.resolveTreeSourceRows(treeModel, visibleColumns, state.expanded, state.search, blockSource, options)
                 : rowsWithIndex;
             if (isTree && treeModel) {
                 this.requestTreeJsonDownload(visibleColumns, treeModel, sourceRows);
                 return;
             }
-            const filtered = this.applyFiltersAndSorting(columns, sourceRows, state);
-            this.requestCsvDownload(visibleColumns, filtered.map((entry) => entry.cells));
+            const filtered = this.applyFiltersAndSorting(visibleColumns, sourceRows, state, blockSource, options);
+            const csvExport = this.transformCsvDownloadData(visibleColumns, filtered.map((entry) => entry.cells));
+            this.requestCsvDownload(csvExport.columns, csvExport.rows);
         });
         controlsRight.appendChild(downloadButton);
 
+        const uploadButton = this.createUploadCsvButton(visibleColumns, rowsWithIndex, isTree, blockSource);
+        if (uploadButton) {
+            controlsRight.appendChild(uploadButton);
+        }
+
         controls.appendChild(controlsLeft);
         controls.appendChild(controlsRight);
         root.appendChild(controls);
@@ -259,6 +328,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
             }
             if (state.page > 0) {
                 state.page -= 1;
+                persistUiState();
                 renderPage();
             }
         });
@@ -266,10 +336,11 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
             if (isTree) {
                 return;
             }
-            const filtered = this.applyFiltersAndSorting(columns, rowsWithIndex, state);
+            const filtered = this.applyFiltersAndSorting(visibleColumns, rowsWithIndex, state, blockSource, options);
             const totalPages = Math.max(1, Math.ceil(filtered.length / state.pageSize));
             if (state.page < totalPages - 1) {
                 state.page += 1;
+                persistUiState();
                 renderPage();
             }
         });
@@ -287,9 +358,11 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
 
         const renderPage = () => {
             const sourceRows = isTree && treeModel
-                ? this.resolveTreeSourceRows(treeModel, visibleColumns, state.expanded, state.search)
+                ? this.resolveTreeSourceRows(treeModel, visibleColumns, state.expanded, state.search, blockSource, options)
                 : rowsWithIndex;
-            const filtered = isTree ? sourceRows.slice() : this.applyFiltersAndSorting(columns, sourceRows, state);
+            const filtered = isTree
+                ? sourceRows.slice()
+                : this.applyFiltersAndSorting(visibleColumns, sourceRows, state, blockSource, options);
             const total = filtered.length;
             const totalTreeRows = isTree
                 ? (fullyExpandedTreeRows?.length ?? total)
@@ -297,6 +370,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
             const totalPages = isTree ? 1 : Math.max(1, Math.ceil(total / state.pageSize));
             if (!isTree && state.page >= totalPages) {
                 state.page = totalPages - 1;
+                persistUiState();
             }
             const gridTemplateColumns = this.buildGridTemplate(visibleColumns.length, state.columnWidths);
 
@@ -324,6 +398,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
                         }
                         state.hasUserSort = true;
                         state.page = 0;
+                        persistUiState();
                         renderPage();
                     });
                 }
@@ -351,6 +426,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
                 const rowContext = createRowContext(baseVisibleColumns, selectorRow);
                 for (let columnIndex = 0; columnIndex < visibleColumns.length; columnIndex += 1) {
                     const value = rowEntry.cells[columnIndex] ?? '';
+                    const typedValue = rowEntry.typedCells?.[columnIndex];
                     const td = document.createElement('div');
                     td.className = 'table-cell';
                     const valueElement = this.renderValue(this.formatCellDisplayValue(value, {
@@ -358,7 +434,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
                         columns: visibleColumns,
                         blockSource,
                         options,
-                    }));
+                    }), typedValue);
                     if (isTree && columnIndex === 0) {
                         const treeCell = this.renderTreeCell(valueElement, rowEntry, treeModel, state.expanded, () => renderPage());
                         td.appendChild(treeCell);
@@ -433,15 +509,23 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         model: TreeModel,
         columns: string[],
         expanded: ReadonlySet<string>,
-        search: string
+        search: string,
+        blockSource?: string,
+        options?: Record<string, unknown>
     ): TableRowData[] {
         if (search) {
-            return this.filterTreeRowsBySearch(model, columns, search);
+            return this.filterTreeRowsBySearch(model, columns, search, blockSource, options);
         }
         return this.flattenTreeRows(model, expanded);
     }
 
-    private filterTreeRowsBySearch(model: TreeModel, columns: string[], search: string): TableRowData[] {
+    private filterTreeRowsBySearch(
+        model: TreeModel,
+        columns: string[],
+        search: string,
+        blockSource?: string,
+        options?: Record<string, unknown>
+    ): TableRowData[] {
         const fullyExpanded = this.flattenTreeRows(model, new Set<string>(model.expandableNodes));
         const matchedIds = new Set<string>();
         for (const row of fullyExpanded) {
@@ -449,7 +533,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
             if (!nodeId) {
                 continue;
             }
-            if (matchesFilterQuery(columns, row.cells, search)) {
+            if (matchesFilterQuery(columns, this.getDisplayFilterCells(row, columns, blockSource, options), search)) {
                 matchedIds.add(nodeId);
             }
         }
@@ -493,6 +577,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         const projectRow = (row: TableRowData): TableRowData => ({
             ...row,
             cells: visibleColumnIndexes.map((columnIndex) => row.cells[columnIndex] ?? ''),
+            typedCells: visibleColumnIndexes.map((columnIndex) => row.typedCells?.[columnIndex]),
         });
         for (const row of allRows) {
             const id = row.cells[idColumnIndex] ?? '';
@@ -539,7 +624,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
                         const syntheticAll = new Array<string>(allColumns.length).fill('');
                         syntheticAll[idColumnIndex] = child;
                         const synthetic = visibleColumnIndexes.map((columnIndex) => syntheticAll[columnIndex] ?? '');
-                        const syntheticRow: TableRowData = { index: allRows.length + rowsById.size, cells: synthetic };
+                        const syntheticRow: TableRowData = { index: allRows.length + rowsById.size, cells: synthetic, typedCells: new Array(visibleColumnIndexes.length).fill(undefined) };
                         rowsById.set(child, syntheticRow);
                         order.push(child);
                     }
@@ -692,9 +777,15 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         columns: string[],
         rows: TableRowData[],
         state: { search: string; sortKey: string; sortDir: 'asc' | 'desc'; hasUserSort: boolean },
+        blockSource?: string,
+        options?: Record<string, unknown>
     ): TableRowData[] {
         const filtered = state.search
-            ? rows.filter((row) => matchesFilterQuery(columns, row.cells, state.search))
+            ? rows.filter((row) => matchesFilterQuery(
+                columns,
+                this.getDisplayFilterCells(row, columns, blockSource, options),
+                state.search
+            ))
             : rows.slice();
         if (!state.hasUserSort) {
             return filtered;
@@ -711,6 +802,27 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         });
     }
 
+    private getDisplayFilterCells(
+        row: TableRowData,
+        columns: string[],
+        blockSource?: string,
+        options?: Record<string, unknown>
+    ): string[] {
+        return columns.map((_, columnIndex) => {
+            const raw = row.cells[columnIndex] ?? '';
+            const typedValue = row.typedCells?.[columnIndex];
+            if (typedValue?.values?.length) {
+                return this.formatCellDisplayText(raw, typedValue);
+            }
+            return this.formatCellDisplayValue(raw, {
+                columnIndex,
+                columns,
+                blockSource,
+                options,
+            });
+        });
+    }
+
     private applyStylesheet(
         cellElement: HTMLElement,
         valueElement: HTMLElement | undefined,
@@ -886,13 +998,12 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         headerFontOverride?: string
     ): number {
         const headerText = `${columns[columnIndex] ?? ''} ▲`;
-        const values = rows.map((row) => formatCellDisplayText(row.cells[columnIndex] ?? ''));
         const valueFont = typeof referenceCellOrFont === 'string'
             ? referenceCellOrFont
             : this.resolveFont(referenceCellOrFont);
         const headerFont = headerFontOverride ?? valueFont;
-        const widestValue = values.reduce((max, text) => {
-            const width = this.measureTextWidth(text, valueFont);
+        const widestValue = rows.reduce((max, row) => {
+            const width = this.measureRenderedCellContentWidth(row, columnIndex, columns, valueFont);
             return Math.max(max, width);
         }, 0);
         const headerWidth = this.measureTextWidth(headerText, headerFont);
@@ -922,6 +1033,41 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         }, 0);
     }
 
+    private measureRenderedCellContentWidth(
+        row: TableRowData,
+        columnIndex: number,
+        columns: string[],
+        font: string
+    ): number {
+        const rawValue = row.cells[columnIndex] ?? '';
+        const typedValue = row.typedCells?.[columnIndex];
+        const formattedValue = this.formatCellDisplayValue(rawValue, {
+            columnIndex,
+            columns,
+        });
+        const valueElement = this.renderValue(formattedValue, typedValue);
+        const decorated = this.decorateCellValueElement({
+            row: { index: row.index, cells: row.cells },
+            columnIndex,
+            columns,
+            value: rawValue,
+            valueElement,
+        });
+
+        const probe = document.createElement('div');
+        probe.style.position = 'fixed';
+        probe.style.left = '-10000px';
+        probe.style.top = '-10000px';
+        probe.style.visibility = 'hidden';
+        probe.style.whiteSpace = 'nowrap';
+        probe.style.font = font;
+        probe.appendChild(decorated);
+        document.body.appendChild(probe);
+        const width = probe.getBoundingClientRect().width;
+        probe.remove();
+        return width;
+    }
+
     private resolveFont(referenceCell: HTMLElement): string {
         const computed = window.getComputedStyle(referenceCell);
         const lineHeight = computed.lineHeight && computed.lineHeight !== 'normal' ? computed.lineHeight : computed.fontSize;
@@ -950,11 +1096,21 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         return raw;
     }
 
-    private renderValue(raw: string): HTMLElement {
-        const value = document.createElement('span');
-        value.className = 'table-value';
-        appendTokenizedValueParts(value, raw, 'table-value-part');
-        return value;
+    private renderValue(raw: string, typedValue?: MdTableCell): HTMLElement {
+        return this.renderCellValue(raw, typedValue);
+    }
+
+    protected createUploadCsvButton(
+        _columns: string[],
+        _rows: Array<{ index: number; cells: string[] }>,
+        _isTree: boolean,
+        _blockSource: string | undefined
+    ): HTMLElement | undefined {
+        return undefined;
+    }
+
+    protected transformCsvDownloadData(columns: string[], rows: string[][]): { columns: string[]; rows: string[][] } {
+        return { columns, rows };
     }
 
     private requestCsvDownload(columns: string[], rows: string[][]): void {
@@ -1047,6 +1203,7 @@ export class TableMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
 type TableRowData = {
     index: number;
     cells: string[];
+    typedCells?: Array<MdTableCell | undefined>;
     treeNodeId?: string;
     treeDepth?: number;
     treeHasChildren?: boolean;
@@ -1381,14 +1538,6 @@ function resolveHiddenColumns(
     return hidden;
 }
 
-function formatCellDisplayText(raw: string): string {
-    const parts = raw.split(/[\s,]+/).filter((entry) => entry.length > 0);
-    if (parts.length === 0) {
-        return raw;
-    }
-    return parts.map((part) => isIriValue(part) ? shortLabelFromIri(part) : part).join(' ');
-}
-
 type ParsedFilterTerm =
     | { kind: 'global'; value: string }
     | { kind: 'scoped'; columns: string[]; value: string };

package/src/renderers/types.ts

@@ -2,9 +2,29 @@
 
 export type MdExecutionStatus = 'ok' | 'error' | 'unimplemented';
 
+export type MdTableCellValueKind = 'iri' | 'literal' | 'bnode' | 'unknown';
+
+export interface MdTableCellValue {
+    kind: MdTableCellValueKind;
+    value: string;
+    datatype?: string;
+    language?: string;
+}
+
+export type MdTableCellKind = 'iri' | 'literal' | 'bnode' | 'unknown';
+
+export interface MdTableCell {
+    kind: MdTableCellKind;
+    value: string;
+    values: MdTableCellValue[];
+    datatype?: string;
+    language?: string;
+}
+
 export interface MdTablePayload {
     columns: string[];
     rows: string[][];
+    rowsTyped?: MdTableCell[][];
 }
 
 export interface MdBlockExecutionResult {

package/src/renderers/wikilink-utils.ts

@@ -1,26 +1,23 @@
 // Copyright (c) 2026 Modelware. All rights reserved.
 
+import MarkdownIt from 'markdown-it';
+import type { RuleInline } from 'markdown-it/lib/parser_inline.mjs';
 import { displayLabelFromIri } from './renderer.js';
 
+const INLINE_MARKDOWN_RENDERER = new MarkdownIt({
+    html: true,
+    linkify: true,
+    typographer: false,
+});
+
 export function appendInlineValue(container: HTMLElement, value: string): void {
-    const wikilinkPattern = /\[\[([^\]]+)\]\]/g;
-    let cursor = 0;
-    for (const match of value.matchAll(wikilinkPattern)) {
-        const index = match.index ?? 0;
-        if (index > cursor) {
-            appendPlainSegment(container, value.slice(cursor, index));
-        }
-        const iri = (match[1] ?? '').trim();
-        if (iri.length > 0) {
-            container.appendChild(createWikiLinkElement(iri, shortLabelFromIri(iri)));
-        } else {
-            container.appendChild(document.createTextNode(match[0] ?? ''));
-        }
-        cursor = index + (match[0]?.length ?? 0);
-    }
-    if (cursor < value.length) {
-        appendPlainSegment(container, value.slice(cursor));
+    const rendered = INLINE_MARKDOWN_RENDERER.renderInline(value);
+    if (!rendered) {
+        return;
     }
+    const template = document.createElement('template');
+    template.innerHTML = rendered;
+    container.append(...Array.from(template.content.childNodes));
 }
 
 export function appendTokenizedValueParts(container: HTMLElement, raw: string, partClass: string): void {
@@ -43,8 +40,8 @@ export function appendTokenizedValueParts(container: HTMLElement, raw: string, p
         }
 
         fragment.dataset.value = token;
-        if (isIriValue(token)) {
-            fragment.appendChild(createWikiLinkElement(token, shortLabelFromIri(token)));
+        if (isUrlValue(token)) {
+            fragment.appendChild(createExternalLinkElement(token));
         } else {
             appendInlineValue(fragment, token);
         }
@@ -77,21 +74,26 @@ export function createWikiLinkElement(iri: string, label: string): HTMLAnchorEle
     return link;
 }
 
-function appendPlainSegment(container: HTMLElement, value: string): void {
-    const parts = value.split(/([\s,]+)/).filter((part) => part.length > 0);
-    for (const part of parts) {
-        if (/^[\s,]+$/.test(part)) {
-            container.appendChild(document.createTextNode(part));
-            continue;
-        }
-        if (!isIriValue(part)) {
-            container.appendChild(document.createTextNode(part));
-            continue;
-        }
-        container.appendChild(createWikiLinkElement(part, shortLabelFromIri(part)));
+export function isUrlValue(value: string): boolean {
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return false;
+    }
+    try {
+        const parsed = new URL(trimmed);
+        return parsed.protocol.length > 1;
+    } catch {
+        return false;
     }
 }
 
+function createExternalLinkElement(href: string, label?: string): HTMLAnchorElement {
+    const link = document.createElement('a');
+    link.href = href;
+    link.textContent = label ?? href;
+    return link;
+}
+
 function parseWikilinkToken(value: string): string | undefined {
     const match = /^\[\[([^\]]+)\]\]$/.exec(value);
     if (!match) {
@@ -100,3 +102,36 @@ function parseWikilinkToken(value: string): string | undefined {
     const iri = (match[1] ?? '').trim();
     return iri.length > 0 ? iri : undefined;
 }
+
+const wikilinkRule: RuleInline = (state, silent): boolean => {
+    const { src } = state;
+    const start = state.pos;
+    if (src.charCodeAt(start) !== 0x5b || src.charCodeAt(start + 1) !== 0x5b) {
+        return false;
+    }
+    const close = src.indexOf(']]', start + 2);
+    if (close < 0) {
+        return false;
+    }
+    const iri = src.slice(start + 2, close).trim();
+    if (!iri) {
+        return false;
+    }
+    if (!silent) {
+        const label = shortLabelFromIri(iri);
+        const open = state.push('link_open', 'a', 1);
+        open.attrSet('class', 'wikilink');
+        open.attrSet('iri', iri);
+        open.attrSet('href', '#');
+        open.attrSet('title', iri);
+
+        const text = state.push('text', '', 0);
+        text.content = label;
+
+        state.push('link_close', 'a', -1);
+    }
+    state.pos = close + 2;
+    return true;
+};
+
+INLINE_MARKDOWN_RENDERER.inline.ruler.before('link', 'wiki-link', wikilinkRule);

package/src/static/browser-runtime.ts

@@ -110,7 +110,6 @@ function applyWikilinks(
             const span = document.createElement('span');
             span.className = 'wikilink';
             span.setAttribute('iri', iri);
-            span.title = iri;
             span.textContent = label;
             link.replaceWith(span);
             continue;
@@ -123,7 +122,6 @@ function applyWikilinks(
         const span = document.createElement('span');
         span.className = 'wikilink';
         span.setAttribute('iri', iri);
-        span.title = iri;
         span.textContent = label;
         link.replaceWith(span);
     }
@@ -172,6 +170,25 @@ function setupDownloadHandler(): void {
     });
 }
 
+function setupIriNavigationHandler(
+    wikilinkIndex: Record<string, string>,
+    iriAliasIndex: Record<string, string>,
+    linkingEnabled: boolean
+): void {
+    window.addEventListener('md-navigate-iri', (event: Event) => {
+        const detail = (event as CustomEvent<{ iri?: string }>).detail;
+        const iri = typeof detail?.iri === 'string' ? detail.iri.trim() : '';
+        if (!iri || !linkingEnabled) {
+            return;
+        }
+        const href = resolveWikiHref(iri, wikilinkIndex, iriAliasIndex);
+        if (!href) {
+            return;
+        }
+        window.location.assign(href);
+    });
+}
+
 function getMdKindFromCodeElement(code: Element): string | undefined {
     for (const className of Array.from(code.classList)) {
         if (!className.startsWith('language-')) {
@@ -211,6 +228,7 @@ async function applyExecutionResults(): Promise<void> {
     applyWikilinks(document, wikilinkIndex, iriAliasIndex, linkingEnabled);
     // Re-apply wikilinks for dynamic renderer re-renders (tables, filters, paging, etc.).
     installWikilinkObserver(wikilinkIndex, iriAliasIndex, linkingEnabled);
+    setupIriNavigationHandler(wikilinkIndex, iriAliasIndex, linkingEnabled);
 
     const manifest = parseJsonNode<ManifestEntry[]>('oml-md-block-manifest', []);
     if (!Array.isArray(manifest) || manifest.length === 0) {