@nuasite/cms 0.44.2 → 0.45.0

package/dist/editor.js

@@ -386,7 +386,7 @@ function fC(t, e) {
 function mC(t, e) {
   return typeof e == "function" ? e(t) : e;
 }
-const W3 = "0.44.2", K3 = W3, ct = {
+const W3 = "0.45.0", K3 = W3, ct = {
   /** Highlight overlay for hovered elements */
   HIGHLIGHT: 2147483644,
   /** Hover outline for elements/components */

package/package.json

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

package/src/index.ts

@@ -5,6 +5,7 @@ import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 import { createLocalStorageAdapter } from '@nuasite/cms-core'
+import remarkDirective from 'remark-directive'
 import { processBuildOutput } from './build-processor'
 import { scanCollections } from './collection-scanner'
 import { ComponentRegistry } from './component-registry'
@@ -16,10 +17,20 @@ import { ManifestWriter } from './manifest-writer'
 import type { MediaStorageAdapter } from './media/types'
 import { type CmsMode, resolveCmsMode } from './mode'
 import { rehypeCmsMarker } from './rehype-cms-marker'
+import { remarkListDirective } from './remark-list-directive'
 import type { CmsFeatures, CmsMarkerOptions, ComponentDefinition } from './types'
 import { createPublicStaticFileChecker } from './utils'
 import { createVitePlugin } from './vite-plugin'
 
+/**
+ * Remark plugins that make the CMS list-style directive (`:::list{.class}`,
+ * emitted by the editor) render as `<ul class="class">`. `remark-directive`
+ * also stops MDX from treating the `{.class}` attribute block as a JS
+ * expression (which crashes acorn). Wired into the markdown/MDX pipeline by
+ * `@nuasite/nua`.
+ */
+export const cmsRemarkPlugins = [remarkDirective, remarkListDirective]
+
 export interface NuaCmsOptions extends CmsMarkerOptions {
 	/**
 	 * URL to the CMS editor (inline visual-editing widget) script.

package/src/remark-list-directive.ts

@@ -0,0 +1,121 @@
+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.
+
+const LIST_DIRECTIVE_NAME = 'list'
+const LIST_STYLE_CLASS_RE = /^[A-Za-z0-9_-]+$/
+const DIRECTIVE_TYPES = new Set(['textDirective', 'leafDirective', 'containerDirective'])
+
+interface MdastNode {
+	type: string
+	name?: unknown
+	value?: unknown
+	attributes?: Record<string, unknown> | null
+	children?: MdastNode[]
+	data?: { hName?: string; hProperties?: Record<string, unknown> }
+}
+
+function normalizeListStyleClass(value: unknown): string | null {
+	if (typeof value !== 'string') return null
+	const [className] = value.trim().split(/\s+/)
+	if (!className || !LIST_STYLE_CLASS_RE.test(className)) return null
+	return className
+}
+
+function childrenOf(node: MdastNode): MdastNode[] {
+	return Array.isArray(node.children) ? node.children : []
+}
+
+function directiveMarker(type: string): string {
+	if (type === 'containerDirective') return ':::'
+	if (type === 'leafDirective') return '::'
+	return ':'
+}
+
+function stringifyAttributes(attributes: Record<string, unknown> | null | undefined): string {
+	if (!attributes) 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 {
+			parts.push(`${key}="${String(value)}"`)
+		}
+	}
+	return parts.length > 0 ? `{${parts.join(' ')}}` : ''
+}
+
+function text(value: string): MdastNode {
+	return { type: 'text', value }
+}
+
+// Turn a `:::list{.className}` directive into its inner list, tagged with the
+// class so remark-rehype emits `<ul class="className">`. Always unwraps (keeps
+// the list content) even when the class is missing/invalid.
+function unwrapListDirective(node: MdastNode): MdastNode[] {
+	const children = childrenOf(node)
+	const className = normalizeListStyleClass(node.attributes?.class)
+	if (className) {
+		const list = children.find(child => child.type === 'list')
+		if (list) {
+			const data = list.data ?? (list.data = {})
+			const properties = data.hProperties ?? (data.hProperties = {})
+			properties.className = [className]
+		}
+	}
+	return children
+}
+
+// Reconstruct any non-list directive back to literal source so no text is lost.
+function neutralizeDirective(node: MdastNode): MdastNode[] {
+	const marker = directiveMarker(node.type)
+	const name = typeof node.name === 'string' ? node.name : ''
+	const label = childrenOf(node)
+	const attributes = stringifyAttributes(node.attributes)
+
+	if (node.type === 'textDirective') {
+		const parts: MdastNode[] = [text(`${marker}${name}`)]
+		if (label.length > 0) parts.push(text('['), ...label, text(']'))
+		if (attributes) parts.push(text(attributes))
+		return parts
+	}
+
+	// Block-level (leaf/container) false positives are extremely unlikely in
+	// prose; preserve the content and prefix it with the literal opening line.
+	const opener: MdastNode = { type: 'paragraph', children: [text(`${marker}${name}${attributes}`)] }
+	return [opener, ...label]
+}
+
+function transform(node: MdastNode): void {
+	const children = node.children
+	if (!Array.isArray(children)) return
+
+	for (let index = 0; index < children.length; index++) {
+		const child = children[index]
+		if (!child) continue
+		transform(child)
+
+		if (!DIRECTIVE_TYPES.has(child.type)) continue
+
+		const replacement = child.type === 'containerDirective' && child.name === LIST_DIRECTIVE_NAME
+			? unwrapListDirective(child)
+			: neutralizeDirective(child)
+
+		children.splice(index, 1, ...replacement)
+		index += replacement.length - 1
+	}
+}
+
+export const remarkListDirective: Plugin<[]> = () => (tree) => {
+	transform(tree)
+}