@mdsrs/markdown 0.0.0

package/README.md

@@ -0,0 +1,26 @@
+# @mdsrs/markdown
+
+Safe Markdown, math, and media rendering for `mdsrs` card faces.
+
+## Example
+
+```ts
+import { renderCard, renderMarkdown } from '@mdsrs/markdown';
+
+const html = renderMarkdown('The derivative is $2x$.');
+const card = renderCard({
+	filePath: 'math/algebra.md',
+	frontMarkdown: 'What is $x + x$?',
+	backMarkdown: '$2x$'
+});
+```
+
+## Media
+
+Markdown image syntax is reused for media:
+
+- `![alt](image.png)` renders an image.
+- `![alt](clip.mp4)` renders a controlled video.
+- `![alt](audio.mp3)` renders a controlled audio player.
+
+Use `resolveAsset` to map Markdown URLs to application URLs.

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export type AssetResolver = (url: string) => string;
+export interface RenderMarkdownOptions {
+    macros?: Record<string, string>;
+    resolveAsset?: AssetResolver;
+}
+export interface RenderableCard {
+    frontMarkdown: string;
+    backMarkdown: string;
+}
+export interface RenderedCard {
+    frontHtml: string;
+    backHtml: string;
+}
+export declare const getMediaExtension: (url: string) => string;
+export declare const parseKatexMacros: (source: string) => Record<string, string>;
+export declare const renderMarkdown: (markdown: string, options?: RenderMarkdownOptions) => string;
+export declare const renderCard: <T extends RenderableCard>(card: T, options?: RenderMarkdownOptions) => T & RenderedCard;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC9B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CACjB;AAiBD,eAAO,MAAM,iBAAiB,GAAI,KAAK,MAAM,WAG5C,CAAC;AAyEF,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,2BAW9C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,UAAU,MAAM,EAAE,UAAS,qBAA0B,WAmBnF,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,cAAc,EAClD,MAAM,CAAC,EACP,UAAS,qBAA0B,KACjC,CAAC,GAAG,YAIL,CAAC"}

package/dist/index.js

@@ -0,0 +1,116 @@
+import rehypeKatex from 'rehype-katex';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import rehypeStringify from 'rehype-stringify';
+import remarkMath from 'remark-math';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+import { visit } from 'unist-util-visit';
+const mediaExtensions = {
+    audio: new Set(['.mp3', '.wav', '.ogg', '.m4a', '.flac']),
+    video: new Set(['.mp4', '.webm', '.mov', '.m4v'])
+};
+const extensionPattern = /\.[a-z0-9]+(?:[?#].*)?$/i;
+export const getMediaExtension = (url) => {
+    const path = url.split(/[?#]/, 1)[0]?.toLowerCase() ?? '';
+    return path.match(extensionPattern)?.[0].replace(/[?#].*$/, '') ?? '';
+};
+const remarkMdsrsMedia = (resolveAsset) => (tree) => {
+    visit(tree, 'image', (node) => {
+        const image = node;
+        const originalUrl = typeof image.url === 'string' ? image.url : '';
+        const resolvedUrl = resolveAsset(originalUrl);
+        const extension = getMediaExtension(originalUrl);
+        const alt = typeof image.alt === 'string' ? image.alt : '';
+        if (mediaExtensions.audio.has(extension)) {
+            image.data = {
+                hName: 'audio',
+                hProperties: {
+                    className: ['mdsrs-media', 'mdsrs-media-audio'],
+                    controls: true,
+                    src: resolvedUrl
+                }
+            };
+            return;
+        }
+        if (mediaExtensions.video.has(extension)) {
+            image.data = {
+                hName: 'video',
+                hProperties: {
+                    className: ['mdsrs-media', 'mdsrs-media-video'],
+                    controls: true,
+                    src: resolvedUrl
+                }
+            };
+            return;
+        }
+        image.url = resolvedUrl;
+        image.data = {
+            hProperties: {
+                alt,
+                className: ['mdsrs-media', 'mdsrs-media-image'],
+                decoding: 'async',
+                loading: 'lazy'
+            }
+        };
+    });
+};
+const schema = {
+    ...defaultSchema,
+    tagNames: [...(defaultSchema.tagNames ?? []), 'audio', 'video', 'source'],
+    attributes: {
+        ...defaultSchema.attributes,
+        '*': [
+            ...(defaultSchema.attributes?.['*'] ?? []),
+            'className',
+            ['className', /^mdsrs-/, /^language-/, /^math/, /^katex/]
+        ],
+        img: [
+            ...(defaultSchema.attributes?.img ?? []),
+            'alt',
+            'decoding',
+            'loading',
+            'src',
+            'title'
+        ],
+        audio: ['className', 'controls', 'src', 'title'],
+        video: ['className', 'controls', 'src', 'title']
+    },
+    protocols: {
+        ...defaultSchema.protocols,
+        src: [...(defaultSchema.protocols?.src ?? []), 'data']
+    }
+};
+export const parseKatexMacros = (source) => {
+    const macros = {};
+    for (const rawLine of source.split(/\r?\n/)) {
+        const line = rawLine.trim();
+        if (!line || line.startsWith('%'))
+            continue;
+        const match = line.match(/^(\\[A-Za-z]+|\\.)\s+(.+)$/);
+        if (match)
+            macros[match[1] ?? ''] = match[2] ?? '';
+    }
+    return macros;
+};
+export const renderMarkdown = (markdown, options = {}) => {
+    const katexOptions = {
+        ...(options.macros ? { macros: options.macros } : {}),
+        strict: false,
+        trust: false
+    };
+    return String(unified()
+        .use(remarkParse)
+        .use(remarkMath)
+        .use(remarkMdsrsMedia, options.resolveAsset ?? ((url) => url))
+        .use(remarkRehype)
+        .use(rehypeSanitize, schema)
+        .use(rehypeKatex, katexOptions)
+        .use(rehypeStringify)
+        .processSync(markdown));
+};
+export const renderCard = (card, options = {}) => ({
+    ...card,
+    frontHtml: renderMarkdown(card.frontMarkdown, options),
+    backHtml: renderMarkdown(card.backMarkdown, options)
+});

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@mdsrs/markdown",
+  "version": "0.0.0",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "katex": "^0.16.47",
+    "rehype-katex": "^7.0.1",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-math": "^6.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.1.0",
+    "@mdsrs/core": "0.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}