@valkyrianlabs/payload-markdown 1.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Valkyrian Labs (Cooper Larson)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,222 @@
+![@valkyrianlabs/payload-markdown](https://docs-media.valkyrianlabs.com/payload-markdown_v1.3_release_banner.png)
+
+<a href="https://github.com/valkyrianlabs/payload-markdown/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/valkyrianlabs/payload-markdown/deploy.yml"></a>
+&nbsp;
+<a href="https://www.npmjs.com/package/@valkyrianlabs/payload-markdown"><img alt="npm" src="https://img.shields.io/npm/v/@valkyrianlabs/payload-markdown" /></a>
+&nbsp;
+<a href="https://www.npmjs.com/package/@valkyrianlabs/payload-markdown"><img alt="npm" src="https://img.shields.io/npm/dw/@valkyrianlabs/payload-markdown" /></a>
+&nbsp;
+<a href="https://github.com/valkyrianlabs/payload-markdown?tab=MIT-1-ov-file"><img alt="license" src="https://img.shields.io/npm/l/@valkyrianlabs/payload-markdown" /></a>
+
+# Payload Markdown
+
+Structured Markdown editing and rendering for Payload CMS.
+
+`@valkyrianlabs/payload-markdown` gives Payload a Markdown-first authoring system with a CodeMirror editor, Shiki-powered code blocks, registry-backed directives, named themes, tabs, cards, table-of-contents generation, autocomplete, diagnostics, and server-first rendering.
+
+No bloated rich text editor.  
+No JSON-shaped content prison.  
+No MDX ceremony for common docs/blog layouts.
+
+Just portable Markdown that renders like a real system.
+
+---
+
+## Install
+
+`pnpm add @valkyrianlabs/payload-markdown`
+
+---
+
+## [📖 Explore the Docs](https://docs.valkyrianlabs.com/plugins/payload-markdown)
+
+Full setup, directive syntax, theme configuration, code block options, editor behavior, and migration notes live in the docs.
+
+---
+
+## Why this exists
+
+Most CMS content systems eventually force you into one of two weak paths:
+
+- heavy rich text editors with fragile JSON-shaped content
+- bare Markdown fields with no structure, no layout, and no serious authoring support
+
+This plugin takes the third path:
+
+- Markdown stays the source of truth
+- structure lives directly in the content
+- rendering is production-ready by default
+- directives provide layout without turning content into a page-builder blob
+- themes provide clean visual control without runtime Tailwind roulette
+- autocomplete and diagnostics make authoring fast instead of fussy
+
+**Write fast. Render clean. Stay in control.**
+
+---
+
+## What you get
+
+- **Drop-in fields** — Markdown fields for Payload collections
+- **Markdown blocks** — block support for Payload layouts
+- **Editor UX** — CodeMirror-powered editing
+- **Code rendering** — Shiki-powered highlighting
+- **Server-first output** — clean rendering without client ceremony
+- **Structured directives** — callouts, details, TOCs, steps, cards, tabs, and layouts
+- **Autocomplete** — directive snippets and placeholders
+- **Diagnostics** — lightweight authoring warnings
+- **Heading anchors** — automatic IDs and table-of-contents support
+- **Themes** — themeable directive output with stable hooks
+- **Scoped config** — global and collection-level overrides
+- **Portable storage** — clean Markdown source
+- **AI-friendly workflow** — content that agents and humans can edit sanely
+
+![Payload Markdown v1.3 directive preview](https://docs-media.valkyrianlabs.com/payload-markdown_v1.3_new_directives_example_1.png)
+
+`payload-markdown` renders structured Markdown directly inside the Payload admin preview, including callouts, details, TOCs, steps, cards, tabs, themes, and code blocks — without turning your content into JSON-shaped sludge.
+
+---
+
+## Directive system
+
+Payload Markdown supports structured directives for real content layouts:
+
+- `:::callout`
+- `:::details`
+- `:::toc`
+- `:::steps`
+- `:::cards`
+- `:::card`
+- `:::tabs`
+- `:::tab`
+- `:::section`
+- `:::2col`
+- `:::3col`
+- `:::cell`
+
+Directives are plain Markdown. They stay readable in Git, easy to review in PRs, and simple for AI/editor tooling to maintain.
+
+See the docs for directive syntax, supported attributes, nesting behavior, themes, and examples:
+
+[Directive documentation →](https://docs.valkyrianlabs.com/plugins/payload-markdown/directives)
+
+---
+
+## Themes
+
+Directive themes are first-class.
+
+Themes live beside `config`, not inside it. Theme objects use `classes`, not `className`.
+
+Default themes are included automatically. You only define custom themes when you want to extend or override the built-ins.
+
+Themes can be configured globally or scoped per collection, then selected directly from Markdown using directive attributes.
+
+Stable classes and data attributes are emitted for overrides, including `data-directive`, `data-theme`, and `vl-md-*` hook classes.
+
+[Theme documentation →](https://docs.valkyrianlabs.com/plugins/payload-markdown/configuration/themes)
+
+---
+
+## Code config
+
+Code block rendering has its own top-level `code` namespace.
+
+Use it to configure Shiki languages, the Shiki theme, line numbers, enhanced rendering, and full-bleed code behavior.
+
+Legacy `config.options` still works, but `code` is the preferred API.
+
+Migration mapping:
+
+- `config.options.langs` → `code.langs`
+- `config.options.lineNumbers` → `code.lineNumbers`
+- `config.options.theme` → `code.shikiTheme`
+- `config.options.enhancedCodeBlocks` → `code.enhanced`
+- `config.fullBleedCode` → `code.fullBleed`
+
+[Code block documentation →](https://docs.valkyrianlabs.com/plugins/payload-markdown/configuration/code)
+
+---
+
+## Quick setup
+
+Register the plugin in your Payload config, enable it for one or more collections, then render Markdown content with the server renderer.
+
+The full setup guide covers:
+
+- plugin registration
+- collection configuration
+- field mode
+- block mode
+- server rendering
+- scoped config
+- themes
+- code block options
+
+[Quick start →](https://docs.valkyrianlabs.com/plugins/payload-markdown/getting-started)
+
+---
+
+## Editor experience
+
+The editor is built on CodeMirror and includes:
+
+- Markdown syntax highlighting
+- directive autocomplete
+- directive snippets
+- snippet placeholders/tabstops
+- theme-aware attribute suggestions
+- lightweight diagnostics for malformed directives
+- warnings for unknown directives, invalid variants, invalid themes, malformed attrs, and common structural issues
+
+The goal is simple: author Markdown like text, but get enough tooling that complex docs stay pleasant.
+
+[Editor documentation →](https://docs.valkyrianlabs.com/plugins/payload-markdown/editor)
+
+---
+
+## Tailwind setup
+
+For best rendering defaults, enable Tailwind Typography and scan the plugin output.
+
+Required pieces:
+
+- install `@tailwindcss/typography`
+- enable the typography plugin
+- add the plugin `dist` directory to Tailwind sources
+
+Theme class strings defined in your app config should also live in scanned source files.
+
+Runtime arbitrary Tailwind classes inside CMS-authored Markdown are not the recommended styling path. Use directive `theme="..."` values and configure named themes in source.
+
+[Tailwind setup →](https://docs.valkyrianlabs.com/plugins/payload-markdown/getting-started/tailwind)
+
+---
+
+## Built for docs, blogs, and technical content
+
+Use one Markdown field to author:
+
+- release notes
+- documentation pages
+- technical blog posts
+- plugin docs
+- install guides
+- API walkthroughs
+- landing-page sections
+
+The content stays readable in Git and editable in Payload.
+
+---
+
+## Philosophy
+
+- Markdown should stay the source of truth
+- content should remain portable
+- structure should be readable in plain text
+- rich layouts should not require a page builder
+- defaults should look good without locking you in
+- styling should be centralized, themeable, and overridable
+- the renderer should respect its container
+- AI and human editors should both be able to work with the content
+
+If that aligns with how you build, this will feel right.

package/dist/blocks/MarkdownBlock/Component.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownBlockProps } from '../../types/core.js';
+export declare const MarkdownBlockComponent: ({ collectionSlug, content }: MarkdownBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/blocks/MarkdownBlock/Component.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MarkdownRenderer } from '../../components/MarkdownRenderer/Component.js';
+import { resolveMarkdownBlockDefaults } from '../../runtime/index.js';
+export const MarkdownBlockComponent = ({ collectionSlug, content })=>{
+    const resolvedConfig = resolveMarkdownBlockDefaults(collectionSlug);
+    return /*#__PURE__*/ _jsx(MarkdownRenderer, {
+        markdown: content,
+        ...resolvedConfig,
+        scope: "blocks"
+    });
+};
+
+//# sourceMappingURL=Component.js.map

package/dist/blocks/MarkdownBlock/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/MarkdownBlock/Component.tsx"],"sourcesContent":["import type { MarkdownBlockProps } from '../../types/core.js'\n\nimport { MarkdownRenderer } from '../../components/MarkdownRenderer/Component.js'\nimport { resolveMarkdownBlockDefaults } from '../../runtime/index.js'\n\nexport const MarkdownBlockComponent = ({ collectionSlug, content }: MarkdownBlockProps) => {\n  const resolvedConfig = resolveMarkdownBlockDefaults(collectionSlug)\n\n  return <MarkdownRenderer markdown={content} {...resolvedConfig} scope='blocks' />\n}\n"],"names":["MarkdownRenderer","resolveMarkdownBlockDefaults","MarkdownBlockComponent","collectionSlug","content","resolvedConfig","markdown","scope"],"mappings":";AAEA,SAASA,gBAAgB,QAAQ,iDAAgD;AACjF,SAASC,4BAA4B,QAAQ,yBAAwB;AAErE,OAAO,MAAMC,yBAAyB,CAAC,EAAEC,cAAc,EAAEC,OAAO,EAAsB;IACpF,MAAMC,iBAAiBJ,6BAA6BE;IAEpD,qBAAO,KAACH;QAAiBM,UAAUF;QAAU,GAAGC,cAAc;QAAEE,OAAM;;AACxE,EAAC"}

package/dist/blocks/MarkdownBlock/config.d.ts

@@ -0,0 +1,2 @@
+import type { Block } from 'payload';
+export declare const MarkdownBlock: Block;

package/dist/blocks/MarkdownBlock/config.js

@@ -0,0 +1,20 @@
+import { vlMdConfig } from '../../field/Config/config.js';
+import { markdownField } from '../../field/MarkdownField/config.js';
+export const MarkdownBlock = {
+    slug: 'vlMdBlock',
+    fields: [
+        vlMdConfig(),
+        markdownField({
+            name: 'content',
+            label: 'Markdown Content',
+            required: true
+        })
+    ],
+    interfaceName: 'MarkdownBlock',
+    labels: {
+        plural: 'Markdown Blocks',
+        singular: 'Markdown Block'
+    }
+};
+
+//# sourceMappingURL=config.js.map

package/dist/blocks/MarkdownBlock/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/MarkdownBlock/config.ts"],"sourcesContent":["import type { Block } from 'payload'\n\nimport { vlMdConfig } from '../../field/Config/config.js'\nimport { markdownField } from '../../field/MarkdownField/config.js'\n\nexport const MarkdownBlock: Block = {\n  slug: 'vlMdBlock',\n  fields: [\n    vlMdConfig(),\n    markdownField({\n      name: 'content',\n      label: 'Markdown Content',\n      required: true,\n    }),\n  ],\n  interfaceName: 'MarkdownBlock',\n  labels: {\n    plural: 'Markdown Blocks',\n    singular: 'Markdown Block',\n  },\n}\n"],"names":["vlMdConfig","markdownField","MarkdownBlock","slug","fields","name","label","required","interfaceName","labels","plural","singular"],"mappings":"AAEA,SAASA,UAAU,QAAQ,+BAA8B;AACzD,SAASC,aAAa,QAAQ,sCAAqC;AAEnE,OAAO,MAAMC,gBAAuB;IAClCC,MAAM;IACNC,QAAQ;QACNJ;QACAC,cAAc;YACZI,MAAM;YACNC,OAAO;YACPC,UAAU;QACZ;KACD;IACDC,eAAe;IACfC,QAAQ;QACNC,QAAQ;QACRC,UAAU;IACZ;AACF,EAAC"}

package/dist/blocks/MarkdownBlock/types.d.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.d.js.map

package/dist/blocks/MarkdownBlock/types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/MarkdownBlock/types.d.ts"],"sourcesContent":["export interface MarkdownBlockProps {\n  blockName?: null | string\n  blockType: '@valkyrianlabs/markdown-block'\n  content: string\n  id?: null | string\n}\n"],"names":[],"mappings":"AAAA,WAKC"}

package/dist/components/MarkdownRenderer/Component.client.d.ts

@@ -0,0 +1,5 @@
+type MarkdownRendererClientProps = {
+    containerId: string;
+};
+export declare function MarkdownRendererClient({ containerId }: MarkdownRendererClientProps): null;
+export {};

package/dist/components/MarkdownRenderer/Component.client.js

@@ -0,0 +1,163 @@
+'use client';
+import { useEffect } from 'react';
+function extractCodeText(pre) {
+    const code = pre.querySelector('code');
+    if (!code) return '';
+    const lines = Array.from(code.querySelectorAll('.line'));
+    if (lines.length === 0) return code.textContent ?? '';
+    return lines.map((line)=>{
+        const clone = line.cloneNode(true);
+        clone.querySelectorAll('.md-line-number').forEach((node)=>node.remove());
+        clone.querySelectorAll('.md-empty-line').forEach((node)=>node.remove());
+        return clone.textContent ?? '';
+    }).join('\n');
+}
+function getTabsContainer(element) {
+    return element?.closest('[data-directive="tabs"]');
+}
+function setActiveTab(tabs, value) {
+    const triggers = Array.from(tabs.querySelectorAll('[data-tab-trigger]'));
+    const panels = Array.from(tabs.querySelectorAll('[data-tab-panel]'));
+    for (const trigger of triggers){
+        const active = trigger.getAttribute('data-tab-value') === value;
+        trigger.setAttribute('aria-selected', active ? 'true' : 'false');
+        trigger.setAttribute('tabindex', active ? '0' : '-1');
+        trigger.classList.toggle('vl-md-tabs-trigger--active', active);
+    }
+    for (const panel of panels){
+        const active = panel.getAttribute('data-tab-value') === value;
+        panel.toggleAttribute('hidden', !active);
+    }
+}
+function getEnabledTabTriggers(tabs) {
+    return Array.from(tabs.querySelectorAll('[data-tab-trigger]')).filter((trigger)=>!trigger.hasAttribute('disabled'));
+}
+function focusTabTrigger(triggers, index) {
+    const trigger = triggers[index];
+    if (!trigger) return;
+    trigger.focus();
+}
+function getNextTabIndex(currentIndex, total, direction) {
+    return (currentIndex + direction + total) % total;
+}
+export function MarkdownRendererClient({ containerId }) {
+    useEffect(()=>{
+        const root = document.getElementById(containerId);
+        if (!root) return;
+        const timeoutIds = new Set();
+        const pres = root.querySelectorAll('pre');
+        pres.forEach((pre)=>{
+            if (pre.querySelector('[data-md-copy-button]')) return;
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.setAttribute('data-md-copy-button', 'true');
+            button.setAttribute('data-md-copy-label', 'Copy');
+            button.setAttribute('aria-label', 'Copy code block');
+            button.textContent = 'Copy';
+            button.style.position = 'absolute';
+            button.style.top = '0.6rem';
+            button.style.right = '0.6rem';
+            button.style.zIndex = '1';
+            button.style.border = '1px solid rgba(255,255,255,0.12)';
+            button.style.borderRadius = '0.5rem';
+            button.style.background = 'rgba(24,24,27,0.9)';
+            button.style.color = '#e5e7eb';
+            button.style.fontSize = '0.75rem';
+            button.style.fontWeight = '500';
+            button.style.lineHeight = '1';
+            button.style.padding = '0.45rem 0.65rem';
+            button.style.cursor = 'pointer';
+            button.style.userSelect = 'none';
+            const preStyle = window.getComputedStyle(pre);
+            if (preStyle.position === 'static') pre.style.position = 'relative';
+            pre.appendChild(button);
+        });
+        const resetButtonLabel = (button, originalLabel)=>{
+            const timeoutId = window.setTimeout(()=>{
+                button.textContent = originalLabel;
+                timeoutIds.delete(timeoutId);
+            }, 2000);
+            timeoutIds.add(timeoutId);
+        };
+        const handleClick = async (event)=>{
+            const target = event.target;
+            const button = target?.closest('[data-md-copy-button]');
+            if (!button || !root.contains(button)) return;
+            const pre = button.closest('pre');
+            if (!pre) return;
+            const text = extractCodeText(pre);
+            if (!text) return;
+            const originalLabel = button.getAttribute('data-md-copy-label') || button.textContent || 'Copy';
+            try {
+                await navigator.clipboard.writeText(text);
+                button.textContent = 'Copied';
+                resetButtonLabel(button, originalLabel);
+            } catch  {
+                button.textContent = 'Failed';
+                resetButtonLabel(button, originalLabel);
+            }
+        };
+        const handleTabsClick = (event)=>{
+            const target = event.target;
+            const trigger = target?.closest('[data-tab-trigger]');
+            if (!trigger || !root.contains(trigger) || trigger.hasAttribute('disabled')) return;
+            const tabs = getTabsContainer(trigger);
+            const value = trigger.getAttribute('data-tab-value');
+            if (!tabs || !value) return;
+            setActiveTab(tabs, value);
+            trigger.focus();
+        };
+        const handleTabsKeydown = (event)=>{
+            const target = event.target;
+            const trigger = target?.closest('[data-tab-trigger]');
+            if (!trigger || !root.contains(trigger) || trigger.hasAttribute('disabled')) return;
+            const tabs = getTabsContainer(trigger);
+            if (!tabs) return;
+            const triggers = getEnabledTabTriggers(tabs);
+            const currentIndex = triggers.indexOf(trigger);
+            if (currentIndex < 0) return;
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                focusTabTrigger(triggers, getNextTabIndex(currentIndex, triggers.length, 1));
+                return;
+            }
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                focusTabTrigger(triggers, getNextTabIndex(currentIndex, triggers.length, -1));
+                return;
+            }
+            if (event.key === 'Home') {
+                event.preventDefault();
+                focusTabTrigger(triggers, 0);
+                return;
+            }
+            if (event.key === 'End') {
+                event.preventDefault();
+                focusTabTrigger(triggers, triggers.length - 1);
+                return;
+            }
+            if (event.key !== 'Enter' && event.key !== ' ') return;
+            const value = trigger.getAttribute('data-tab-value');
+            if (!value) return;
+            event.preventDefault();
+            setActiveTab(tabs, value);
+        };
+        root.addEventListener('click', handleClick);
+        root.addEventListener('click', handleTabsClick);
+        root.addEventListener('keydown', handleTabsKeydown);
+        return ()=>{
+            root.removeEventListener('click', handleClick);
+            root.removeEventListener('click', handleTabsClick);
+            root.removeEventListener('keydown', handleTabsKeydown);
+            timeoutIds.forEach((timeoutId)=>{
+                window.clearTimeout(timeoutId);
+            });
+            timeoutIds.clear();
+        };
+    }, [
+        containerId
+    ]);
+    return null;
+}
+
+//# sourceMappingURL=Component.client.js.map

package/dist/components/MarkdownRenderer/Component.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MarkdownRenderer/Component.client.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\ntype MarkdownRendererClientProps = {\n  containerId: string\n}\n\nfunction extractCodeText(pre: HTMLElement): string {\n  const code = pre.querySelector('code')\n  if (!code) return ''\n\n  const lines = Array.from(code.querySelectorAll<HTMLElement>('.line'))\n  if (lines.length === 0) return code.textContent ?? ''\n\n  return lines\n    .map((line) => {\n      const clone = line.cloneNode(true) as HTMLElement\n\n      clone.querySelectorAll('.md-line-number').forEach((node) => node.remove())\n      clone.querySelectorAll('.md-empty-line').forEach((node) => node.remove())\n\n      return clone.textContent ?? ''\n    })\n    .join('\\n')\n}\n\nfunction getTabsContainer(element: HTMLElement | null): HTMLElement | null {\n  return element?.closest('[data-directive=\"tabs\"]') as HTMLElement | null\n}\n\nfunction setActiveTab(tabs: HTMLElement, value: string) {\n  const triggers = Array.from(tabs.querySelectorAll<HTMLElement>('[data-tab-trigger]'))\n  const panels = Array.from(tabs.querySelectorAll<HTMLElement>('[data-tab-panel]'))\n\n  for (const trigger of triggers) {\n    const active = trigger.getAttribute('data-tab-value') === value\n\n    trigger.setAttribute('aria-selected', active ? 'true' : 'false')\n    trigger.setAttribute('tabindex', active ? '0' : '-1')\n    trigger.classList.toggle('vl-md-tabs-trigger--active', active)\n  }\n\n  for (const panel of panels) {\n    const active = panel.getAttribute('data-tab-value') === value\n\n    panel.toggleAttribute('hidden', !active)\n  }\n}\n\nfunction getEnabledTabTriggers(tabs: HTMLElement): HTMLElement[] {\n  return Array.from(tabs.querySelectorAll<HTMLElement>('[data-tab-trigger]')).filter(\n    (trigger) => !trigger.hasAttribute('disabled'),\n  )\n}\n\nfunction focusTabTrigger(triggers: HTMLElement[], index: number) {\n  const trigger = triggers[index]\n  if (!trigger) return\n\n  trigger.focus()\n}\n\nfunction getNextTabIndex(currentIndex: number, total: number, direction: -1 | 1): number {\n  return (currentIndex + direction + total) % total\n}\n\nexport function MarkdownRendererClient({ containerId }: MarkdownRendererClientProps) {\n  useEffect(() => {\n    const root = document.getElementById(containerId)\n    if (!root) return\n\n    const timeoutIds = new Set<number>()\n\n    const pres = root.querySelectorAll('pre')\n\n    pres.forEach((pre) => {\n      if (pre.querySelector('[data-md-copy-button]')) return\n\n      const button = document.createElement('button')\n      button.type = 'button'\n      button.setAttribute('data-md-copy-button', 'true')\n      button.setAttribute('data-md-copy-label', 'Copy')\n      button.setAttribute('aria-label', 'Copy code block')\n      button.textContent = 'Copy'\n\n      button.style.position = 'absolute'\n      button.style.top = '0.6rem'\n      button.style.right = '0.6rem'\n      button.style.zIndex = '1'\n      button.style.border = '1px solid rgba(255,255,255,0.12)'\n      button.style.borderRadius = '0.5rem'\n      button.style.background = 'rgba(24,24,27,0.9)'\n      button.style.color = '#e5e7eb'\n      button.style.fontSize = '0.75rem'\n      button.style.fontWeight = '500'\n      button.style.lineHeight = '1'\n      button.style.padding = '0.45rem 0.65rem'\n      button.style.cursor = 'pointer'\n      button.style.userSelect = 'none'\n\n      const preStyle = window.getComputedStyle(pre)\n      if (preStyle.position === 'static') pre.style.position = 'relative'\n\n      pre.appendChild(button)\n    })\n\n    const resetButtonLabel = (button: HTMLElement, originalLabel: string) => {\n      const timeoutId = window.setTimeout(() => {\n        button.textContent = originalLabel\n        timeoutIds.delete(timeoutId)\n      }, 2000)\n\n      timeoutIds.add(timeoutId)\n    }\n\n    const handleClick = async (event: Event) => {\n      const target = event.target as HTMLElement | null\n      const button = target?.closest('[data-md-copy-button]') as HTMLElement | null\n      if (!button || !root.contains(button)) return\n\n      const pre = button.closest('pre')\n      if (!pre) return\n\n      const text = extractCodeText(pre)\n      if (!text) return\n\n      const originalLabel =\n        button.getAttribute('data-md-copy-label') || button.textContent || 'Copy'\n\n      try {\n        await navigator.clipboard.writeText(text)\n        button.textContent = 'Copied'\n        resetButtonLabel(button, originalLabel)\n      } catch {\n        button.textContent = 'Failed'\n        resetButtonLabel(button, originalLabel)\n      }\n    }\n\n    const handleTabsClick = (event: Event) => {\n      const target = event.target as HTMLElement | null\n      const trigger = target?.closest('[data-tab-trigger]') as HTMLElement | null\n      if (!trigger || !root.contains(trigger) || trigger.hasAttribute('disabled')) return\n\n      const tabs = getTabsContainer(trigger)\n      const value = trigger.getAttribute('data-tab-value')\n      if (!tabs || !value) return\n\n      setActiveTab(tabs, value)\n      trigger.focus()\n    }\n\n    const handleTabsKeydown = (event: KeyboardEvent) => {\n      const target = event.target as HTMLElement | null\n      const trigger = target?.closest('[data-tab-trigger]') as HTMLElement | null\n      if (!trigger || !root.contains(trigger) || trigger.hasAttribute('disabled')) return\n\n      const tabs = getTabsContainer(trigger)\n      if (!tabs) return\n\n      const triggers = getEnabledTabTriggers(tabs)\n      const currentIndex = triggers.indexOf(trigger)\n      if (currentIndex < 0) return\n\n      if (event.key === 'ArrowRight') {\n        event.preventDefault()\n        focusTabTrigger(triggers, getNextTabIndex(currentIndex, triggers.length, 1))\n        return\n      }\n\n      if (event.key === 'ArrowLeft') {\n        event.preventDefault()\n        focusTabTrigger(triggers, getNextTabIndex(currentIndex, triggers.length, -1))\n        return\n      }\n\n      if (event.key === 'Home') {\n        event.preventDefault()\n        focusTabTrigger(triggers, 0)\n        return\n      }\n\n      if (event.key === 'End') {\n        event.preventDefault()\n        focusTabTrigger(triggers, triggers.length - 1)\n        return\n      }\n\n      if (event.key !== 'Enter' && event.key !== ' ') return\n\n      const value = trigger.getAttribute('data-tab-value')\n      if (!value) return\n\n      event.preventDefault()\n      setActiveTab(tabs, value)\n    }\n\n    root.addEventListener('click', handleClick)\n    root.addEventListener('click', handleTabsClick)\n    root.addEventListener('keydown', handleTabsKeydown)\n\n    return () => {\n      root.removeEventListener('click', handleClick)\n      root.removeEventListener('click', handleTabsClick)\n      root.removeEventListener('keydown', handleTabsKeydown)\n\n      timeoutIds.forEach((timeoutId) => {\n        window.clearTimeout(timeoutId)\n      })\n\n      timeoutIds.clear()\n    }\n  }, [containerId])\n\n  return null\n}\n"],"names":["useEffect","extractCodeText","pre","code","querySelector","lines","Array","from","querySelectorAll","length","textContent","map","line","clone","cloneNode","forEach","node","remove","join","getTabsContainer","element","closest","setActiveTab","tabs","value","triggers","panels","trigger","active","getAttribute","setAttribute","classList","toggle","panel","toggleAttribute","getEnabledTabTriggers","filter","hasAttribute","focusTabTrigger","index","focus","getNextTabIndex","currentIndex","total","direction","MarkdownRendererClient","containerId","root","document","getElementById","timeoutIds","Set","pres","button","createElement","type","style","position","top","right","zIndex","border","borderRadius","background","color","fontSize","fontWeight","lineHeight","padding","cursor","userSelect","preStyle","window","getComputedStyle","appendChild","resetButtonLabel","originalLabel","timeoutId","setTimeout","delete","add","handleClick","event","target","contains","text","navigator","clipboard","writeText","handleTabsClick","handleTabsKeydown","indexOf","key","preventDefault","addEventListener","removeEventListener","clearTimeout","clear"],"mappings":"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"}

package/dist/components/MarkdownRenderer/Component.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownRendererProps } from '../../types/core.js';
+import './index.css';
+export declare function MarkdownRenderer(rawProps: MarkdownRendererProps): Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined>;

package/dist/components/MarkdownRenderer/Component.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { randomUUID } from 'node:crypto';
+import { resolveFullBleedCode } from '../../core/codeConfig.js';
+import { compileMarkdown } from '../../core/renderMarkdown.js';
+import { mergeMarkdownRenderConfigs, resolveMarkdownBlockDefaults, resolveMarkdownFieldDefaults } from '../../runtime/index.js';
+import { DIRECTIVE_SURFACE_RENDERER_PRE_CLASS } from '../../styles/directiveSurface.js';
+import { MarkdownRendererClient } from './Component.client.js';
+import './index.css';
+const cx = (...values)=>values.filter(Boolean).join(' ');
+const MARKDOWN_BASE_CLASS_NAME = cx('prose w-full max-w-none mx-0 p-0 text-foreground dark:prose-invert', // headings
+'prose-headings:font-semibold prose-headings:tracking-tight', 'prose-h1:scroll-mt-24 prose-h2:scroll-mt-24 prose-h3:scroll-mt-24', // text
+'prose-p:leading-7 prose-p:text-foreground/90', 'prose-strong:text-foreground', // links
+'prose-a:font-medium prose-a:text-cyan-400 no-underline transition-colors hover:prose-a:text-cyan-300', // hr
+'prose-hr:my-8 prose-hr:border-border', // lists
+'[&_ul]:my-3 [&_ol]:my-3', // only elements immediately before lists
+'[&_p:has(+ul)]:mb-3 [&_p:has(+ol)]:mb-3', '[&_h2:has(+ul)]:mb-3 [&_h2:has(+ol)]:mb-3', '[&_h3:has(+ul)]:mb-3 [&_h3:has(+ol)]:mb-3', // tune list top spacing by predecessor type
+'[&_p+ul]:mt-0 [&_p+ol]:mt-0', '[&_h2+ul]:mt-2 [&_h2+ol]:mt-2', '[&_h3+ul]:mt-2 [&_h3+ol]:mt-2', '[&_ul]:pl-5 [&_ol]:pl-5', '[&_li]:my-0', '[&_li+li]:mt-1.5', '[&_li>p]:my-0', '[&_li>ul]:mt-1.5 [&_li>ol]:mt-1.5', '[&_ul_ul]:my-1 [&_ul_ol]:my-1 [&_ol_ul]:my-1 [&_ol_ol]:my-1', '[&_li::marker]:text-foreground/55', // task lists
+'[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0', // blockquote
+'prose-blockquote:my-6 prose-blockquote:border-l-2 prose-blockquote:border-border prose-blockquote:pl-4 prose-blockquote:text-foreground/75', // tables
+'prose-table:my-6 prose-table:w-full', 'prose-th:border-b prose-th:border-border prose-th:pb-2 prose-th:text-left prose-th:font-semibold', 'prose-td:border-b prose-td:border-border/60 prose-td:py-2', // media
+'prose-img:rounded-xl', // inline code
+'prose-code:rounded prose-code:bg-black/5 prose-code:px-1 prose-code:py-0.5 prose-code:text-[0.9em] prose-code:font-medium dark:prose-code:bg-white/10', 'prose-code:before:content-none prose-code:after:content-none', // fenced code
+'prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-xl', DIRECTIVE_SURFACE_RENDERER_PRE_CLASS, 'prose-pre:px-0 prose-pre:py-0', '[&_pre]:my-6 [&_pre]:p-0', '[&_pre_code]:block [&_pre_code]:m-0 [&_pre_code]:py-2.5 [&_pre_code]:bg-[#18191c]', '[&_pre_.shiki]:my-6 [&_pre_.shiki]:rounded-xl [&_pre_.shiki]:px-4');
+const MARKDOWN_VARIANT_CLASS_NAMES = {
+    blog: cx('prose-h1:mb-5 prose-h1:text-4xl md:prose-h1:text-5xl', 'prose-h2:mt-10 prose-h2:mb-3 prose-h2:text-3xl', 'prose-h3:mt-7 prose-h3:mb-2 prose-h3:text-2xl', 'prose-p:text-[1.02rem]', 'prose-blockquote:text-[1.02rem]'),
+    docs: cx('prose-h1:mb-4 prose-h1:text-3xl md:prose-h1:text-4xl', 'prose-h2:mt-8 prose-h2:mb-2 prose-h2:text-2xl', 'prose-h3:mt-6 prose-h3:mb-2 prose-h3:text-xl', 'prose-p:text-[0.98rem]', 'prose-li:text-[0.98rem]', 'prose-code:text-[0.875em]'),
+    compact: cx('prose-h1:mb-3 prose-h1:text-3xl', 'prose-h2:mt-6 prose-h2:mb-2 prose-h2:text-2xl', 'prose-h3:mt-5 prose-h3:mb-1 prose-h3:text-xl', 'prose-p:leading-6 prose-p:text-[0.95rem]', 'prose-ul:my-3 prose-ol:my-3', 'prose-pre:my-5'),
+    unstyled: ''
+};
+const MARKDOWN_SIZE_CLASS_NAMES = {
+    lg: 'prose-lg',
+    md: 'prose-base',
+    sm: 'prose-sm'
+};
+function buildWrapperClassName({ enableGutter, wrapperClassName }) {
+    return cx('w-full mx-0', enableGutter && 'px-5 sm:px-6 lg:px-8', wrapperClassName);
+}
+function buildMarkdownClassName({ className, fullBleedCode, mutedHeadings, size, variant }) {
+    if (variant === 'unstyled') return className ?? '';
+    return cx(MARKDOWN_BASE_CLASS_NAME, MARKDOWN_VARIANT_CLASS_NAMES[variant ?? 'blog'], MARKDOWN_SIZE_CLASS_NAMES[size ?? 'lg'], mutedHeadings && 'prose-headings:text-foreground/90', fullBleedCode && 'lg:[&_pre]:mx-[-2rem] lg:[&_pre_shiki]:rounded-[1.25rem] lg:[&_pre]:rounded-[1.25rem]', className);
+}
+function resolveScopedDefaults(scope, collectionSlug) {
+    return scope === 'blocks' ? resolveMarkdownBlockDefaults(collectionSlug) : resolveMarkdownFieldDefaults(collectionSlug);
+}
+export async function MarkdownRenderer(rawProps) {
+    const { as = 'article', collectionSlug, emptyFallback = null, errorFallback, lead, markdown = '', scope = 'field' } = rawProps;
+    if (!markdown || !markdown.trim()) return emptyFallback;
+    const resolvedProps = mergeMarkdownRenderConfigs(resolveScopedDefaults(scope, collectionSlug), rawProps) ?? rawProps;
+    const { className, enableGutter = false, mutedHeadings = false, size = 'lg', variant = 'blog', wrapperClassName } = resolvedProps;
+    const fullBleedCode = resolveFullBleedCode(resolvedProps) ?? false;
+    const result = await compileMarkdown(markdown, resolvedProps);
+    const Tag = as;
+    const containerId = `payload-markdown-${randomUUID()}`;
+    if (result.warnings.length > 0 && errorFallback) return errorFallback;
+    const resolvedWrapperClassName = buildWrapperClassName({
+        enableGutter,
+        wrapperClassName
+    });
+    const resolvedMarkdownClassName = buildMarkdownClassName({
+        className,
+        fullBleedCode,
+        mutedHeadings,
+        size,
+        variant
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: resolvedWrapperClassName,
+        children: [
+            /*#__PURE__*/ _jsx(MarkdownRendererClient, {
+                containerId: containerId
+            }),
+            lead ? /*#__PURE__*/ _jsx("div", {
+                className: "mb-8",
+                children: lead
+            }) : null,
+            /*#__PURE__*/ _jsx(Tag, {
+                className: resolvedMarkdownClassName,
+                dangerouslySetInnerHTML: {
+                    __html: result.html
+                },
+                id: containerId
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=Component.js.map

package/dist/components/MarkdownRenderer/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MarkdownRenderer/Component.tsx"],"sourcesContent":["import { randomUUID } from 'node:crypto'\n\nimport type {\n  MarkdownRendererProps,\n  MarkdownRendererScope,\n  MarkdownSize,\n  MarkdownVariant,\n} from '../../types/core.js'\n\nimport { resolveFullBleedCode } from '../../core/codeConfig.js'\nimport { compileMarkdown } from '../../core/renderMarkdown.js'\nimport {\n  mergeMarkdownRenderConfigs,\n  resolveMarkdownBlockDefaults,\n  resolveMarkdownFieldDefaults,\n} from '../../runtime/index.js'\nimport { DIRECTIVE_SURFACE_RENDERER_PRE_CLASS } from '../../styles/directiveSurface.js'\nimport { MarkdownRendererClient } from './Component.client.js'\nimport './index.css'\n\nconst cx = (...values: Array<false | null | string | undefined>) => values.filter(Boolean).join(' ')\n\nconst MARKDOWN_BASE_CLASS_NAME = cx(\n  'prose w-full max-w-none mx-0 p-0 text-foreground dark:prose-invert',\n\n  // headings\n  'prose-headings:font-semibold prose-headings:tracking-tight',\n  'prose-h1:scroll-mt-24 prose-h2:scroll-mt-24 prose-h3:scroll-mt-24',\n\n  // text\n  'prose-p:leading-7 prose-p:text-foreground/90',\n  'prose-strong:text-foreground',\n\n  // links\n  'prose-a:font-medium prose-a:text-cyan-400 no-underline transition-colors hover:prose-a:text-cyan-300',\n\n  // hr\n  'prose-hr:my-8 prose-hr:border-border',\n\n  // lists\n  '[&_ul]:my-3 [&_ol]:my-3',\n\n  // only elements immediately before lists\n  '[&_p:has(+ul)]:mb-3 [&_p:has(+ol)]:mb-3',\n  '[&_h2:has(+ul)]:mb-3 [&_h2:has(+ol)]:mb-3',\n  '[&_h3:has(+ul)]:mb-3 [&_h3:has(+ol)]:mb-3',\n\n  // tune list top spacing by predecessor type\n  '[&_p+ul]:mt-0 [&_p+ol]:mt-0',\n  '[&_h2+ul]:mt-2 [&_h2+ol]:mt-2',\n  '[&_h3+ul]:mt-2 [&_h3+ol]:mt-2',\n\n  '[&_ul]:pl-5 [&_ol]:pl-5',\n  '[&_li]:my-0',\n  '[&_li+li]:mt-1.5',\n  '[&_li>p]:my-0',\n  '[&_li>ul]:mt-1.5 [&_li>ol]:mt-1.5',\n  '[&_ul_ul]:my-1 [&_ul_ol]:my-1 [&_ol_ul]:my-1 [&_ol_ol]:my-1',\n  '[&_li::marker]:text-foreground/55',\n\n  // task lists\n  '[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0',\n\n  // blockquote\n  'prose-blockquote:my-6 prose-blockquote:border-l-2 prose-blockquote:border-border prose-blockquote:pl-4 prose-blockquote:text-foreground/75',\n\n  // tables\n  'prose-table:my-6 prose-table:w-full',\n  'prose-th:border-b prose-th:border-border prose-th:pb-2 prose-th:text-left prose-th:font-semibold',\n  'prose-td:border-b prose-td:border-border/60 prose-td:py-2',\n\n  // media\n  'prose-img:rounded-xl',\n\n  // inline code\n  'prose-code:rounded prose-code:bg-black/5 prose-code:px-1 prose-code:py-0.5 prose-code:text-[0.9em] prose-code:font-medium dark:prose-code:bg-white/10',\n  'prose-code:before:content-none prose-code:after:content-none',\n\n  // fenced code\n  'prose-pre:my-6 prose-pre:overflow-x-auto prose-pre:rounded-xl',\n  DIRECTIVE_SURFACE_RENDERER_PRE_CLASS,\n  'prose-pre:px-0 prose-pre:py-0',\n  '[&_pre]:my-6 [&_pre]:p-0',\n  '[&_pre_code]:block [&_pre_code]:m-0 [&_pre_code]:py-2.5 [&_pre_code]:bg-[#18191c]',\n  '[&_pre_.shiki]:my-6 [&_pre_.shiki]:rounded-xl [&_pre_.shiki]:px-4',\n)\n\nconst MARKDOWN_VARIANT_CLASS_NAMES: Record<MarkdownVariant, string> = {\n  blog: cx(\n    'prose-h1:mb-5 prose-h1:text-4xl md:prose-h1:text-5xl',\n    'prose-h2:mt-10 prose-h2:mb-3 prose-h2:text-3xl',\n    'prose-h3:mt-7 prose-h3:mb-2 prose-h3:text-2xl',\n    'prose-p:text-[1.02rem]',\n    'prose-blockquote:text-[1.02rem]',\n  ),\n\n  docs: cx(\n    'prose-h1:mb-4 prose-h1:text-3xl md:prose-h1:text-4xl',\n    'prose-h2:mt-8 prose-h2:mb-2 prose-h2:text-2xl',\n    'prose-h3:mt-6 prose-h3:mb-2 prose-h3:text-xl',\n    'prose-p:text-[0.98rem]',\n    'prose-li:text-[0.98rem]',\n    'prose-code:text-[0.875em]',\n  ),\n\n  compact: cx(\n    'prose-h1:mb-3 prose-h1:text-3xl',\n    'prose-h2:mt-6 prose-h2:mb-2 prose-h2:text-2xl',\n    'prose-h3:mt-5 prose-h3:mb-1 prose-h3:text-xl',\n    'prose-p:leading-6 prose-p:text-[0.95rem]',\n    'prose-ul:my-3 prose-ol:my-3',\n    'prose-pre:my-5',\n  ),\n\n  unstyled: '',\n}\n\nconst MARKDOWN_SIZE_CLASS_NAMES: Record<MarkdownSize, string> = {\n  lg: 'prose-lg',\n  md: 'prose-base',\n  sm: 'prose-sm',\n}\n\nfunction buildWrapperClassName({\n  enableGutter,\n  wrapperClassName,\n}: Pick<MarkdownRendererProps, 'enableGutter' | 'wrapperClassName'>): string {\n  return cx(\n    'w-full mx-0',\n    enableGutter && 'px-5 sm:px-6 lg:px-8',\n    wrapperClassName,\n  )\n}\n\nfunction buildMarkdownClassName({\n  className,\n  fullBleedCode,\n  mutedHeadings,\n  size,\n  variant,\n}: Pick<\n  MarkdownRendererProps,\n  'className' | 'fullBleedCode' | 'mutedHeadings' | 'size' | 'variant'\n>): string {\n  if (variant === 'unstyled') return className ?? ''\n\n  return cx(\n    MARKDOWN_BASE_CLASS_NAME,\n    MARKDOWN_VARIANT_CLASS_NAMES[variant ?? 'blog'],\n    MARKDOWN_SIZE_CLASS_NAMES[size ?? 'lg'],\n    mutedHeadings && 'prose-headings:text-foreground/90',\n    fullBleedCode &&\n      'lg:[&_pre]:mx-[-2rem] lg:[&_pre_shiki]:rounded-[1.25rem] lg:[&_pre]:rounded-[1.25rem]',\n    className,\n  )\n}\n\nfunction resolveScopedDefaults(scope: MarkdownRendererScope, collectionSlug?: string) {\n  return scope === 'blocks'\n    ? resolveMarkdownBlockDefaults(collectionSlug)\n    : resolveMarkdownFieldDefaults(collectionSlug)\n}\n\nexport async function MarkdownRenderer(rawProps: MarkdownRendererProps) {\n  const {\n    as = 'article',\n    collectionSlug,\n    emptyFallback = null,\n    errorFallback,\n    lead,\n    markdown = '',\n    scope = 'field',\n  } = rawProps\n\n  if (!markdown || !markdown.trim()) return emptyFallback\n\n  const resolvedProps =\n    mergeMarkdownRenderConfigs(resolveScopedDefaults(scope, collectionSlug), rawProps) ?? rawProps\n\n  const {\n    className,\n    enableGutter = false,\n    mutedHeadings = false,\n    size = 'lg',\n    variant = 'blog',\n    wrapperClassName,\n  } = resolvedProps\n  const fullBleedCode = resolveFullBleedCode(resolvedProps) ?? false\n\n  const result = await compileMarkdown(markdown, resolvedProps)\n  const Tag = as\n  const containerId = `payload-markdown-${randomUUID()}`\n\n  if (result.warnings.length > 0 && errorFallback) return errorFallback\n\n  const resolvedWrapperClassName = buildWrapperClassName({\n    enableGutter,\n    wrapperClassName,\n  })\n\n  const resolvedMarkdownClassName = buildMarkdownClassName({\n    className,\n    fullBleedCode,\n    mutedHeadings,\n    size,\n    variant,\n  })\n\n  return (\n    <div className={resolvedWrapperClassName}>\n      <MarkdownRendererClient containerId={containerId} />\n      {lead ? <div className=\"mb-8\">{lead}</div> : null}\n\n      <Tag\n        className={resolvedMarkdownClassName}\n        dangerouslySetInnerHTML={{ __html: result.html }}\n        id={containerId}\n      />\n    </div>\n  )\n}\n"],"names":["randomUUID","resolveFullBleedCode","compileMarkdown","mergeMarkdownRenderConfigs","resolveMarkdownBlockDefaults","resolveMarkdownFieldDefaults","DIRECTIVE_SURFACE_RENDERER_PRE_CLASS","MarkdownRendererClient","cx","values","filter","Boolean","join","MARKDOWN_BASE_CLASS_NAME","MARKDOWN_VARIANT_CLASS_NAMES","blog","docs","compact","unstyled","MARKDOWN_SIZE_CLASS_NAMES","lg","md","sm","buildWrapperClassName","enableGutter","wrapperClassName","buildMarkdownClassName","className","fullBleedCode","mutedHeadings","size","variant","resolveScopedDefaults","scope","collectionSlug","MarkdownRenderer","rawProps","as","emptyFallback","errorFallback","lead","markdown","trim","resolvedProps","result","Tag","containerId","warnings","length","resolvedWrapperClassName","resolvedMarkdownClassName","div","dangerouslySetInnerHTML","__html","html","id"],"mappings":"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"}