@nuasite/cms-mdx-editor 0.43.4 → 0.44.2

package/package.json

@@ -14,7 +14,7 @@
     "directory": "packages/cms-mdx-editor"
   },
   "license": "Apache-2.0",
-  "version": "0.43.4",
+  "version": "0.44.2",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "type": "module",
@@ -31,7 +31,7 @@
     "@milkdown/preset-commonmark": "^7.20.0",
     "@milkdown/preset-gfm": "^7.20.0",
     "@milkdown/utils": "^7.20.0",
-    "@nuasite/cms-types": "0.43.4",
+    "@nuasite/cms-types": "0.44.2",
     "remark-mdx": "^3.1.0",
     "remark-parse": "^11.0.0",
     "unified": "^11.0.5"

package/src/format-toolbar.tsx

@@ -16,13 +16,17 @@ import {
 	wrapInBulletListCommand,
 	wrapInOrderedListCommand,
 } from '@milkdown/preset-commonmark'
-import { toggleStrikethroughCommand } from '@milkdown/preset-gfm'
+import { insertTableCommand, toggleStrikethroughCommand } from '@milkdown/preset-gfm'
 import { callCommand } from '@milkdown/utils'
+import type { CmsListStyle } from '@nuasite/cms-types'
 import { useEffect, useState } from 'react'
+import { ImagePopover } from './image-popover'
 import { LinkPopover } from './link-popover'
 import { MediaLibrary } from './media-library'
 import type { MediaContext, MediaSource } from './media-source'
 import { type ActiveFormats, defaultActiveFormats, isInListType, removeLinkMark, setupFormatTracking, toggleHeading } from './milkdown-utils'
+import { setListStyleCommand } from './styled-list-plugin'
+import { YoutubePopover } from './youtube-popover'
 
 /** Track active formats on the editor, re-attaching when the instance changes. */
 export function useFormatTracking(editor: Editor | null): ActiveFormats {
@@ -51,18 +55,38 @@ function toggleList(editor: Editor, type: 'bullet' | 'ordered') {
 	}
 }
 
-function insertImage(editor: Editor, src: string, alt: string) {
+function applyListStyle(editor: Editor, listStyle: string | null) {
+	const view = editor.ctx.get(editorViewCtx)
+	view.focus()
+	editor.action(callCommand(setListStyleCommand.key, listStyle))
+}
+
+function insertImage(editor: Editor, src: string, alt: string, title: string) {
 	editor.action((ctx) => {
 		const view = ctx.get(editorViewCtx)
 		const imageType = view.state.schema.nodes.image
 		if (!imageType) return
 		view.focus()
-		view.dispatch(view.state.tr.replaceSelectionWith(imageType.create({ src, alt })).scrollIntoView())
+		view.dispatch(view.state.tr.replaceSelectionWith(imageType.create({ src, alt, title })).scrollIntoView())
+	})
+}
+
+function insertYoutubeDirective(editor: Editor, id: string) {
+	editor.action((ctx) => {
+		const view = ctx.get(editorViewCtx)
+		const paragraphType = view.state.schema.nodes.paragraph
+		if (!paragraphType) return
+
+		// Directive format: `:::youtube{<id>}` where id is the bare 11-char video id, with no surrounding spaces.
+		const paragraph = paragraphType.create(null, view.state.schema.text(`:::youtube{${id}}`))
+		view.focus()
+		view.dispatch(view.state.tr.replaceSelectionWith(paragraph).scrollIntoView())
 	})
 }
 
 export interface FormatToolbarProps {
 	editor: Editor | null
+	listStyles?: CmsListStyle[]
 	media?: MediaSource
 	mediaContext?: MediaContext
 	/** Upload field the image is filed under (e.g. 'body'). */
@@ -92,6 +116,17 @@ const baseBtn: React.CSSProperties = {
 	color: '#52525b',
 }
 const activeBtn: React.CSSProperties = { ...baseBtn, background: '#2563eb', borderColor: '#2563eb', color: '#fff' }
+const selectStyle: React.CSSProperties = {
+	border: '1px solid #d4d4d8',
+	borderRadius: 4,
+	background: '#fff',
+	color: '#3f3f46',
+	font: 'inherit',
+	fontSize: 12,
+	lineHeight: 1.4,
+	padding: '2px 6px',
+	maxWidth: 150,
+}
 
 function Btn({ active, title, onClick, style, children }: {
 	active?: boolean
@@ -114,11 +149,16 @@ function Btn({ active, title, onClick, style, children }: {
 	)
 }
 
-export function FormatToolbar({ editor, media, mediaContext, field, onInsertComponent }: FormatToolbarProps) {
+export function FormatToolbar({ editor, listStyles, media, mediaContext, field, onInsertComponent }: FormatToolbarProps) {
 	const formats = useFormatTracking(editor)
 	const [linkOpen, setLinkOpen] = useState(false)
 	const [mediaOpen, setMediaOpen] = useState(false)
+	const [youtubeOpen, setYoutubeOpen] = useState(false)
+	const [pendingImage, setPendingImage] = useState<{ url: string; alt: string } | null>(null)
 	const disabled = editor === null
+	const hasListStyles = (listStyles?.length ?? 0) > 0
+	const inList = formats.bulletList || formats.orderedList
+	const currentListStyle = formats.listStyle && listStyles?.some(style => style.class === formats.listStyle) ? formats.listStyle : ''
 
 	const applyLink = (url: string) => {
 		setLinkOpen(false)
@@ -163,7 +203,31 @@ export function FormatToolbar({ editor, media, mediaContext, field, onInsertComp
 				<span style={sep} />
 				<Btn active={formats.bulletList} title="Bullet list" onClick={() => editor && toggleList(editor, 'bullet')}>• List</Btn>
 				<Btn active={formats.orderedList} title="Numbered list" onClick={() => editor && toggleList(editor, 'ordered')}>1. List</Btn>
+				{hasListStyles
+					? (
+						<select
+							title="List style"
+							aria-label="List style"
+							disabled={disabled || !inList}
+							value={currentListStyle}
+							onChange={(event) => {
+								if (!editor) return
+								applyListStyle(editor, event.currentTarget.value || null)
+							}}
+							style={{
+								...selectStyle,
+								opacity: disabled || !inList ? 0.55 : 1,
+								cursor: disabled || !inList ? 'not-allowed' : 'default',
+							}}
+						>
+							<option value="">Default</option>
+							{listStyles?.map(style => <option key={style.class} value={style.class}>{style.label}</option>)}
+						</select>
+					)
+					: null}
 				<Btn active={formats.blockquote} title="Quote" onClick={() => editor?.action(callCommand(wrapInBlockquoteCommand.key))}>❝</Btn>
+				<Btn title="Insert table" onClick={() => editor?.action(callCommand(insertTableCommand.key, { row: 3, col: 3 }))}>▦ Table</Btn>
+				<Btn active={youtubeOpen} title="Insert YouTube" onClick={() => !disabled && setYoutubeOpen(v => !v)}>YouTube</Btn>
 				<span style={sep} />
 				<Btn active={formats.link || linkOpen} title="Link" onClick={() => !disabled && setLinkOpen(v => !v)}>🔗 Link</Btn>
 				{media ? <Btn title="Insert image" onClick={() => !disabled && setMediaOpen(true)}>🖼 Image</Btn> : null}
@@ -193,6 +257,36 @@ export function FormatToolbar({ editor, media, mediaContext, field, onInsertComp
 				)
 				: null}
 
+			{youtubeOpen
+				? (
+					<div style={{ padding: '0 6px' }}>
+						<YoutubePopover
+							onApply={(id) => {
+								setYoutubeOpen(false)
+								if (editor) insertYoutubeDirective(editor, id)
+							}}
+							onClose={() => setYoutubeOpen(false)}
+						/>
+					</div>
+				)
+				: null}
+
+			{pendingImage
+				? (
+					<div style={{ padding: '0 6px' }}>
+						<ImagePopover
+							initialAlt={pendingImage.alt}
+							onApply={(alt, caption) => {
+								const { url } = pendingImage
+								setPendingImage(null)
+								if (editor) insertImage(editor, url, alt, caption)
+							}}
+							onClose={() => setPendingImage(null)}
+						/>
+					</div>
+				)
+				: null}
+
 			{mediaOpen && media
 				? (
 					<MediaLibrary
@@ -202,7 +296,7 @@ export function FormatToolbar({ editor, media, mediaContext, field, onInsertComp
 						accept="image/*"
 						onSelect={(url, alt) => {
 							setMediaOpen(false)
-							if (editor) insertImage(editor, url, alt ?? '')
+							if (editor) setPendingImage({ url, alt: alt ?? '' })
 						}}
 						onClose={() => setMediaOpen(false)}
 					/>

package/src/image-popover.tsx

@@ -0,0 +1,62 @@
+/**
+ * Inline popover shown after an image is picked from the media library: confirm the
+ * alt text (prefilled from the library) and optionally add a caption/source. Apply
+ * inserts the image; Cancel aborts insertion entirely. Mirrors the LinkPopover style.
+ */
+import { useState } from 'react'
+import { popoverBtn, popoverInput, popoverWrap } from './link-popover'
+
+export interface ImagePopoverProps {
+	initialAlt: string
+	onApply: (alt: string, caption: string) => void
+	onClose: () => void
+}
+
+const wrap: React.CSSProperties = { ...popoverWrap, flexWrap: 'wrap' }
+const label: React.CSSProperties = { fontSize: 11, color: '#71717a', whiteSpace: 'nowrap' }
+
+export function ImagePopover({ initialAlt, onApply, onClose }: ImagePopoverProps) {
+	const [alt, setAlt] = useState(initialAlt)
+	const [caption, setCaption] = useState('')
+
+	const apply = () => onApply(alt.trim(), caption.trim())
+
+	const onKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.preventDefault()
+			apply()
+		}
+		if (e.key === 'Escape') onClose()
+	}
+
+	return (
+		<div style={wrap} data-mdx-action="image" onMouseDown={e => e.stopPropagation()}>
+			<span style={label}>Alt</span>
+			<input
+				style={popoverInput}
+				autoFocus
+				placeholder="Alt text for screen readers"
+				value={alt}
+				onChange={e => setAlt(e.currentTarget.value)}
+				onKeyDown={onKeyDown}
+			/>
+			<span style={label}>Caption</span>
+			<input
+				style={popoverInput}
+				placeholder="Caption / source (optional)"
+				value={caption}
+				onChange={e => setCaption(e.currentTarget.value)}
+				onKeyDown={onKeyDown}
+			/>
+			<button
+				type="button"
+				style={{ ...popoverBtn, background: '#2563eb', borderColor: '#2563eb', color: '#fff' }}
+				onMouseDown={e => e.preventDefault()}
+				onClick={apply}
+			>
+				Insert
+			</button>
+			<button type="button" style={popoverBtn} onMouseDown={e => e.preventDefault()} onClick={onClose}>Cancel</button>
+		</div>
+	)
+}

package/src/link-popover.tsx

@@ -14,7 +14,8 @@ export interface LinkPopoverProps {
 	onClose: () => void
 }
 
-const wrap: React.CSSProperties = {
+/** Shared popover styles, reused by the image and YouTube insert popovers. */
+export const popoverWrap: React.CSSProperties = {
 	display: 'flex',
 	gap: 6,
 	alignItems: 'center',
@@ -25,7 +26,7 @@ const wrap: React.CSSProperties = {
 	boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
 	marginTop: 6,
 }
-const input: React.CSSProperties = {
+export const popoverInput: React.CSSProperties = {
 	flex: 1,
 	border: '1px solid #d4d4d8',
 	borderRadius: 4,
@@ -34,7 +35,7 @@ const input: React.CSSProperties = {
 	outline: 'none',
 	minWidth: 0,
 }
-const btn: React.CSSProperties = {
+export const popoverBtn: React.CSSProperties = {
 	border: '1px solid #d4d4d8',
 	background: '#fff',
 	borderRadius: 4,
@@ -45,6 +46,9 @@ const btn: React.CSSProperties = {
 	color: '#3f3f46',
 	whiteSpace: 'nowrap',
 }
+const wrap = popoverWrap
+const input = popoverInput
+const btn = popoverBtn
 
 export function LinkPopover({ initialUrl, isEdit, onApply, onRemove, onClose }: LinkPopoverProps) {
 	const [url, setUrl] = useState(initialUrl)

package/src/mdx-body-editor.tsx

@@ -13,19 +13,22 @@ import { listener, listenerCtx } from '@milkdown/plugin-listener'
 import { commonmark } from '@milkdown/preset-commonmark'
 import { gfm } from '@milkdown/preset-gfm'
 import { callCommand, replaceAll } from '@milkdown/utils'
-import type { ComponentDefinition } from '@nuasite/cms-types'
+import type { CmsListStyle, ComponentDefinition } from '@nuasite/cms-types'
 import { useEffect, useRef, useState } from 'react'
 import { ComponentPicker } from './component-picker'
 import { FormatToolbar } from './format-toolbar'
 import { insertMdxComponentCommand, mdxComponentNode, mdxEsmNode, remarkMdxPlugin } from './mdx-plugin'
 import { type ComponentResolver, createMdxComponentView } from './mdx-view'
 import type { MediaContext, MediaSource } from './media-source'
+import { styledListPlugin } from './styled-list-plugin'
 
 export interface MdxBodyEditorProps {
 	value: string
 	onChange: (markdown: string) => void
 	/** Project component definitions — drives the insert picker and prop labels. */
 	components?: ComponentDefinition[]
+	/** Project-defined list styles shown in the toolbar. */
+	listStyles?: CmsListStyle[]
 	/**
 	 * Media source (the host's `CmsClient` satisfies it) — enables the toolbar's
 	 * image insert and image-prop browse/upload. Absent → those affordances hide.
@@ -71,6 +74,15 @@ const EDITOR_CSS = `
 .nua-mdx-editor .ProseMirror pre code { background: none; padding: 0; }
 .nua-mdx-editor .ProseMirror img { max-width: 100%; height: auto; border-radius: 4px; }
 .nua-mdx-editor .ProseMirror hr { border: none; border-top: 1px solid #e4e4e7; margin: 1em 0; }
+/* tables (GFM) — PM/prosemirror-tables ship no usable styles; without these the
+   cells collapse to 0 width and the table is invisible & uneditable */
+.nua-mdx-editor .ProseMirror .tableWrapper { overflow-x: auto; margin: 0.8em 0; }
+.nua-mdx-editor .ProseMirror table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0.8em 0; overflow: hidden; }
+.nua-mdx-editor .ProseMirror th, .nua-mdx-editor .ProseMirror td { border: 1px solid #d4d4d8; padding: 0.4em 0.6em; vertical-align: top; box-sizing: border-box; position: relative; min-width: 5em; }
+.nua-mdx-editor .ProseMirror th { background: #f4f4f5; font-weight: 600; text-align: left; }
+.nua-mdx-editor .ProseMirror th > p, .nua-mdx-editor .ProseMirror td > p { margin: 0; }
+.nua-mdx-editor .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; z-index: 20; background-color: #93c5fd; pointer-events: none; }
+.nua-mdx-editor .ProseMirror .selectedCell:after { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(200,200,255,0.4); pointer-events: none; }
 `
 
 function useEditorStyles() {
@@ -83,7 +95,7 @@ function useEditorStyles() {
 	}, [])
 }
 
-export function MdxBodyEditor({ value, onChange, components, media, mediaContext, allowComponents = true }: MdxBodyEditorProps) {
+export function MdxBodyEditor({ value, onChange, components, listStyles, media, mediaContext, allowComponents = true }: MdxBodyEditorProps) {
 	useEditorStyles()
 	const hostRef = useRef<HTMLDivElement>(null)
 	const editorRef = useRef<Editor | null>(null)
@@ -130,6 +142,7 @@ export function MdxBodyEditor({ value, onChange, components, media, mediaContext
 					})
 				})
 				.use(commonmark)
+				.use(styledListPlugin)
 				.use(gfm)
 				.use(listener)
 				.use(remarkMdxPlugin)
@@ -182,6 +195,7 @@ export function MdxBodyEditor({ value, onChange, components, media, mediaContext
 		<div className="nua-mdx-editor" style={wrapper}>
 			<FormatToolbar
 				editor={editorInstance}
+				listStyles={listStyles}
 				media={media}
 				mediaContext={mediaContext}
 				field="body"

package/src/milkdown-utils.ts

@@ -15,6 +15,7 @@ export interface ActiveFormats {
 	linkHref: string | null
 	bulletList: boolean
 	orderedList: boolean
+	listStyle: string | null
 	blockquote: boolean
 	heading: number | null
 }
@@ -27,6 +28,7 @@ export const defaultActiveFormats: ActiveFormats = {
 	linkHref: null,
 	bulletList: false,
 	orderedList: false,
+	listStyle: null,
 	blockquote: false,
 	heading: null,
 }
@@ -69,13 +71,17 @@ export function getActiveFormats(view: EditorView): ActiveFormats {
 
 	let bulletList = false
 	let orderedList = false
+	let listStyle: string | null = null
 	let blockquote = false
 	let heading: number | null = null
 
 	for (let depth = $from.depth; depth > 0; depth--) {
 		const node = $from.node(depth)
-		if (node.type.name === 'bullet_list') bulletList = true
-		if (node.type.name === 'ordered_list') orderedList = true
+		if (node.type.name === 'bullet_list' || node.type.name === 'ordered_list') {
+			if (node.type.name === 'bullet_list') bulletList = true
+			if (node.type.name === 'ordered_list') orderedList = true
+			if (listStyle === null) listStyle = typeof node.attrs.listStyle === 'string' ? node.attrs.listStyle : null
+		}
 		if (node.type.name === 'blockquote') blockquote = true
 	}
 
@@ -84,7 +90,7 @@ export function getActiveFormats(view: EditorView): ActiveFormats {
 		heading = typeof level === 'number' ? level : null
 	}
 
-	return { bold, italic, strikethrough, link, linkHref, bulletList, orderedList, blockquote, heading }
+	return { bold, italic, strikethrough, link, linkHref, bulletList, orderedList, listStyle, blockquote, heading }
 }
 
 /** Whether the current selection is inside a list of the given node-type name. */
@@ -143,6 +149,7 @@ function formatsEqual(a: ActiveFormats, b: ActiveFormats): boolean {
 		&& a.linkHref === b.linkHref
 		&& a.bulletList === b.bulletList
 		&& a.orderedList === b.orderedList
+		&& a.listStyle === b.listStyle
 		&& a.blockquote === b.blockquote
 		&& a.heading === b.heading
 }