@nuasite/cms 0.45.0 → 0.46.1

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/astro-cms"
   },
   "license": "Apache-2.0",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",
@@ -26,8 +26,8 @@
     }
   },
   "dependencies": {
-    "@nuasite/cms-core": "0.45.0",
-    "@nuasite/cms-types": "0.45.0",
+    "@nuasite/cms-core": "0.46.1",
+    "@nuasite/cms-types": "0.46.1",
     "@astrojs/compiler": "^3.0.1",
     "@babel/parser": "^7.29.2",
     "node-html-parser": "^7.1.0",
@@ -35,8 +35,8 @@
     "yaml": "^2.8.3"
   },
   "devDependencies": {
-    "@nuasite/cms-sidecar": "0.45.0",
-    "@nuasite/collections-admin": "0.45.0",
+    "@nuasite/cms-sidecar": "0.46.1",
+    "@nuasite/collections-admin": "0.46.1",
     "@babel/types": "^7.29.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -50,6 +50,8 @@
     "@milkdown/prose": "^7.20.0",
     "@milkdown/transformer": "^7.20.0",
     "@milkdown/utils": "^7.20.0",
+    "mdast-util-directive": "^3.1.0",
+    "micromark-extension-directive": "^3.0.2",
     "remark-mdx": "^3.1.0",
     "unified": "^11.0.5",
     "@preact/signals": "^2.9.0",
@@ -74,8 +76,8 @@
     "typescript": "^6.0.2",
     "vite": "^7.0.0",
     "@aws-sdk/client-s3": "^3.0.0",
-    "@nuasite/cms-sidecar": "0.45.0",
-    "@nuasite/collections-admin": "0.45.0",
+    "@nuasite/cms-sidecar": "0.46.1",
+    "@nuasite/collections-admin": "0.46.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/editor/components/markdown-inline-editor.tsx

@@ -20,7 +20,7 @@ import { insertMdxComponentCommand, mdxComponentPlugin } from '../milkdown-mdx-p
 import { type ActiveFormats, defaultActiveFormats, isInListType, setupFormatTracking, toggleHeading } from '../milkdown-utils'
 import { config, mdxComponentPickerOpen, openMediaLibraryWithCallback, resetMarkdownEditorState, showToast, updateMarkdownContent } from '../signals'
 import { STRINGS } from '../strings'
-import { setBulletListStyleCommand, styledListPlugin } from '../styled-list-plugin'
+import { mdxDirectiveSafetyPlugin, setBulletListStyleCommand, styledListPlugin } from '../styled-list-plugin'
 import { LinkEditPopover } from './link-edit-popover'
 import { MdxComponentIcon } from './mdx-block-view'
 import { MdxComponentPicker } from './mdx-component-picker'
@@ -94,11 +94,15 @@ export function MarkdownInlineEditor({
 					})
 					.use(commonmark)
 
-				// Styled bullet lists are opt-in: only load the plugin (and its `-` bullet
+				// Styled bullet lists are opt-in: only load the full plugin (and its `-` bullet
 				// normalization) when the site configures list styles, so sites that don't use
-				// the feature keep their previous list serialization untouched.
+				// the feature keep their previous list serialization untouched. For .mdx editing
+				// without list styles, still load the directive-safety subset so `:::list{.class}`
+				// and stray colons don't crash acorn under remark-mdx.
 				if (listStyles.length > 0) {
 					builder.use(styledListPlugin)
+				} else if (isMdxRef.current) {
+					builder.use(mdxDirectiveSafetyPlugin)
 				}
 
 				builder

package/src/editor/styled-list-plugin.ts

@@ -4,8 +4,11 @@ import type { Node as PmNode } from '@milkdown/prose/model'
 import type { Command } from '@milkdown/prose/state'
 import type { MarkdownNode, SerializerState } from '@milkdown/transformer'
 import { $command, $remark } from '@milkdown/utils'
+import { directiveFromMarkdown } from 'mdast-util-directive'
+import { directive } from 'micromark-extension-directive'
 
 const LIST_DIRECTIVE_NAME = 'list'
+const DIRECTIVE_TYPES = new Set(['textDirective', 'leafDirective', 'containerDirective'])
 
 function normalizeListStyleClass(value: unknown): string | null {
 	if (typeof value !== 'string') return null
@@ -56,6 +59,61 @@ function stripRawClosingDirective(listNode: any, siblings: any[], indexAfterList
 	return true
 }
 
+interface DirectiveLike {
+	type: string
+	name?: unknown
+	value?: unknown
+	attributes?: unknown
+	children?: DirectiveLike[]
+}
+
+function directiveMarker(type: string): string {
+	if (type === 'containerDirective') return ':::'
+	if (type === 'leafDirective') return '::'
+	return ':'
+}
+
+// Rebuild the `{...}` attribute block from parsed directive attributes. A bare token
+// like `:::youtube{id}` parses to `{ id: '' }`, so an empty value must round-trip back
+// to the bare key (not `key=""`).
+function stringifyAttributes(attributes: unknown): string {
+	if (!attributes || typeof attributes !== 'object') return ''
+	const parts: string[] = []
+	for (const [key, value] of Object.entries(attributes)) {
+		if (key === 'class' && typeof value === 'string') {
+			for (const cls of value.split(/\s+/).filter(Boolean)) parts.push(`.${cls}`)
+		} else if (key === 'id' && typeof value === 'string') {
+			parts.push(`#${value}`)
+		} else if (value === '' || value == null) {
+			parts.push(key)
+		} else {
+			parts.push(`${key}="${String(value)}"`)
+		}
+	}
+	return parts.length > 0 ? `{${parts.join(' ')}}` : ''
+}
+
+// Restore a non-list directive to its literal markdown source. Once `remark-directive`
+// is registered, a stray colon in prose (`klíč:hodnota`) parses as a `textDirective` —
+// which has no Milkdown node, and Milkdown throws on unknown node types. Turning it back
+// into text keeps the editor alive without dropping the user's content.
+function neutralizeDirective(node: DirectiveLike): DirectiveLike[] {
+	const marker = directiveMarker(node.type)
+	const name = typeof node.name === 'string' ? node.name : ''
+	const label = Array.isArray(node.children) ? node.children : []
+	const attributes = stringifyAttributes(node.attributes)
+
+	if (node.type === 'textDirective') {
+		const parts: DirectiveLike[] = [{ type: 'text', value: `${marker}${name}` }]
+		if (label.length > 0) parts.push({ type: 'text', value: '[' }, ...label, { type: 'text', value: ']' })
+		if (attributes) parts.push({ type: 'text', value: attributes })
+		return parts
+	}
+
+	const opener: DirectiveLike = { type: 'paragraph', children: [{ type: 'text', value: `${marker}${name}${attributes}` }] }
+	return [opener, ...label]
+}
+
 function transformListDirectives(parent: any): void {
 	if (!Array.isArray(parent?.children)) return
 
@@ -85,7 +143,17 @@ function transformListDirectives(parent: any): void {
 			continue
 		}
 
+		// Recurse depth-first so nested directives are restored before we touch this node.
 		transformListDirectives(child)
+
+		// Any directive node still standing would crash Milkdown — restore it to text.
+		if (child && DIRECTIVE_TYPES.has(child.type)) {
+			const replacement = child.type === 'containerDirective' && child.name === LIST_DIRECTIVE_NAME
+				? (Array.isArray(child.children) ? child.children : []) // bare `:::list` without a usable class: unwrap, keep the list
+				: neutralizeDirective(child)
+			parent.children.splice(index, 1, ...replacement)
+			index += replacement.length - 1
+		}
 	}
 }
 
@@ -111,6 +179,21 @@ function remarkListDirective(this: { data: () => any }) {
 
 export const remarkListDirectivePlugin: any = $remark('remarkListDirective', () => remarkListDirective as any)
 
+// Parse-only directive support. Registering the micromark + fromMarkdown extensions means
+// directive syntax (`:::list{.class}`, a stray `klíč:hodnota`) is claimed during parsing,
+// so `remark-mdx` never feeds the `{...}` to acorn ("Could not parse expression with
+// acorn"). We deliberately skip `directiveToMarkdown`: its `unsafe` rules would escape
+// every `:` in serialized prose (`klíč\:hodnota`), corrupting content on save.
+function remarkDirectiveParseOnly(this: { data: () => any }) {
+	const data = this.data()
+	const micromarkExtensions = data.micromarkExtensions || (data.micromarkExtensions = [])
+	micromarkExtensions.push(directive())
+	const fromMarkdownExtensions = data.fromMarkdownExtensions || (data.fromMarkdownExtensions = [])
+	fromMarkdownExtensions.push(directiveFromMarkdown())
+}
+
+export const remarkDirectivePlugin: any = $remark('remarkDirective', () => remarkDirectiveParseOnly as any)
+
 export const styledBulletListSchema = bulletListSchema.extendSchema((prev) => (ctx) => {
 	const schema = prev(ctx)
 	return {
@@ -220,7 +303,18 @@ export const setBulletListStyleCommand = $command('SetBulletListStyle', () => {
 	}
 })
 
+// Directive parsing + the list transform + the schema, without the styled-list UI
+// command or the `-` bullet normalization. Loaded for `.mdx` editing even when a site
+// has no list styles configured, so `:::list{.class}` and stray colons in MDX content
+// don't crash acorn — while plain bullet lists keep their default `*` serialization.
+export const mdxDirectiveSafetyPlugin = [
+	remarkDirectivePlugin,
+	remarkListDirectivePlugin,
+	styledBulletListSchema,
+].flat()
+
 export const styledListPlugin = [
+	remarkDirectivePlugin,
 	remarkListDirectivePlugin,
 	styledBulletListSchema,
 	setBulletListStyleCommand,

package/src/remark-list-directive.ts

@@ -1,17 +1,22 @@
 import type { Plugin } from 'unified'
 
-// Render-side counterpart of the editor's styled-list plugin
-// (packages/cms-mdx-editor/src/styled-list-plugin.ts). The editor serializes a
-// styled list as the container directive `:::list{.className}`. On the site we
-// need `remark-directive` to claim that syntax before MDX would otherwise treat
-// `{.className}` as a JSX expression and crash acorn. This plugin then turns the
-// `list` directive into a plain `<ul class="className">` and — crucially —
-// converts every OTHER directive node back to its literal source text, so a
-// stray colon in prose (e.g. `klíč:hodnota` → a `:hodnota` text directive) is
-// never silently dropped by remark-rehype.
+// Render-side counterpart of the editor's directive plugins
+// (packages/cms-mdx-editor/src/{styled-list,youtube}-plugin.ts). The editor
+// serializes a styled list as `:::list{.className}` and a YouTube embed as the leaf
+// directive `::youtube{#id}`. On the site we need `remark-directive` to claim that
+// syntax before MDX would otherwise treat `{…}` as a JSX expression and crash acorn.
+// This plugin then:
+//   - turns the `list` directive into a plain `<ul class="className">`,
+//   - turns the `youtube` directive into an `<iframe class="youtube-embed">` the site
+//     styles (mirrors the list pattern: framework emits the element, site owns CSS),
+//   - converts every OTHER directive back to its literal source text, so a stray colon
+//     in prose (e.g. `klíč:hodnota` → a `:hodnota` text directive) is never silently
+//     dropped by remark-rehype.
 
 const LIST_DIRECTIVE_NAME = 'list'
+const YOUTUBE_DIRECTIVE_NAME = 'youtube'
 const LIST_STYLE_CLASS_RE = /^[A-Za-z0-9_-]+$/
+const VIDEO_ID_RE = /^[A-Za-z0-9_-]+$/
 const DIRECTIVE_TYPES = new Set(['textDirective', 'leafDirective', 'containerDirective'])
 
 interface MdastNode {
@@ -76,6 +81,42 @@ function unwrapListDirective(node: MdastNode): MdastNode[] {
 	return children
 }
 
+// Pull the video id out of a youtube directive's attributes: the emitted `{#id}`
+// form (→ `id`), the legacy bare `{id}` form (→ a single empty-valued key) and
+// `{id=…}`. Returns null for anything that isn't a plausible video id.
+function youtubeVideoId(attributes: Record<string, unknown> | null | undefined): string | null {
+	if (!attributes) return null
+	const id = attributes.id
+	if (typeof id === 'string' && VIDEO_ID_RE.test(id)) return id
+	for (const [key, value] of Object.entries(attributes)) {
+		if ((value === '' || value == null) && VIDEO_ID_RE.test(key)) return key
+	}
+	return null
+}
+
+// Turn `::youtube{#id}` into an `<iframe class="youtube-embed">`. The framework emits
+// a working, privacy-friendly embed; the site owns the styling (e.g. responsive 16:9
+// via `.youtube-embed`), exactly like the styled-list `<ul class>`. Returns false when
+// no id is present so the caller can fall back to neutralizing the directive to text.
+function renderYoutubeDirective(node: MdastNode): boolean {
+	const id = youtubeVideoId(node.attributes)
+	if (!id) return false
+	const data = node.data ?? (node.data = {})
+	data.hName = 'iframe'
+	data.hProperties = {
+		src: `https://www.youtube-nocookie.com/embed/${id}`,
+		title: 'YouTube video',
+		width: '560',
+		height: '315',
+		loading: 'lazy',
+		allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+		allowFullScreen: true,
+		className: ['youtube-embed'],
+	}
+	node.children = []
+	return true
+}
+
 // Reconstruct any non-list directive back to literal source so no text is lost.
 function neutralizeDirective(node: MdastNode): MdastNode[] {
 	const marker = directiveMarker(node.type)
@@ -107,6 +148,9 @@ function transform(node: MdastNode): void {
 
 		if (!DIRECTIVE_TYPES.has(child.type)) continue
 
+		// YouTube renders in place as an <iframe>; keep the node (now carrying hName).
+		if (child.name === YOUTUBE_DIRECTIVE_NAME && renderYoutubeDirective(child)) continue
+
 		const replacement = child.type === 'containerDirective' && child.name === LIST_DIRECTIVE_NAME
 			? unwrapListDirective(child)
 			: neutralizeDirective(child)