@growth-labs/cms 0.5.18 → 0.5.20

package/src/ui/editor/slash-menu.ts

@@ -0,0 +1,218 @@
+// src/ui/editor/slash-menu.ts
+// `/` block-insert menu for the rich-text editor, built on @tiptap/suggestion.
+// The item list + filter are pure and unit-tested; the dropdown itself is a
+// vanilla-DOM renderer created only when the Suggestion plugin runs inside a
+// live (browser) editor, so this module stays importable in Node.
+
+import { type Editor, Extension, type Range } from '@tiptap/core'
+import { PluginKey } from '@tiptap/pm/state'
+import Suggestion, { type SuggestionKeyDownProps, type SuggestionProps } from '@tiptap/suggestion'
+
+export interface SlashMenuItem {
+	title: string
+	hint: string
+	/** Lowercase match terms beyond the title. */
+	keywords: string
+	run: (editor: Editor, range: Range) => void
+}
+
+export const SLASH_MENU_ITEMS: SlashMenuItem[] = [
+	{
+		title: 'Heading 2',
+		hint: 'Section heading',
+		keywords: 'h2 title section',
+		run: (editor, range) =>
+			editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run(),
+	},
+	{
+		title: 'Heading 3',
+		hint: 'Sub-section heading',
+		keywords: 'h3 subtitle',
+		run: (editor, range) =>
+			editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run(),
+	},
+	{
+		title: 'Bullet list',
+		hint: 'Unordered list',
+		keywords: 'ul bullets',
+		run: (editor, range) => editor.chain().focus().deleteRange(range).toggleBulletList().run(),
+	},
+	{
+		title: 'Numbered list',
+		hint: 'Ordered list',
+		keywords: 'ol ordered numbers',
+		run: (editor, range) => editor.chain().focus().deleteRange(range).toggleOrderedList().run(),
+	},
+	{
+		title: 'Quote',
+		hint: 'Blockquote',
+		keywords: 'blockquote',
+		run: (editor, range) => editor.chain().focus().deleteRange(range).toggleBlockquote().run(),
+	},
+	{
+		title: 'Callout',
+		hint: 'Highlighted aside with a tone',
+		keywords: 'aside note warning tip alert',
+		run: (editor, range) =>
+			editor.chain().focus().deleteRange(range).toggleWrap('callout', { tone: 'note' }).run(),
+	},
+	{
+		title: 'Pull quote',
+		hint: 'Large excerpted quote',
+		keywords: 'pullquote excerpt',
+		run: (editor, range) => editor.chain().focus().deleteRange(range).toggleWrap('pullQuote').run(),
+	},
+	{
+		title: 'Table',
+		hint: '3×3 table with a header row',
+		keywords: 'grid rows columns',
+		run: (editor, range) =>
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+				.run(),
+	},
+	{
+		title: 'Divider',
+		hint: 'Horizontal rule',
+		keywords: 'hr rule separator',
+		run: (editor, range) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
+	},
+	{
+		title: 'Tweet embed',
+		hint: 'Embed a post by URL',
+		keywords: 'twitter x embed',
+		run: (editor, range) => {
+			const url = typeof window !== 'undefined' ? window.prompt('Tweet URL') : null
+			if (!url) return
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.insertContent({ type: 'tweetEmbed', attrs: { url } })
+				.run()
+		},
+	},
+]
+
+/** Case-insensitive filter over titles + keywords; empty query returns all. */
+export function filterSlashMenuItems(query: string): SlashMenuItem[] {
+	const needle = query.trim().toLowerCase()
+	if (!needle) return SLASH_MENU_ITEMS
+	return SLASH_MENU_ITEMS.filter(
+		(item) =>
+			item.title.toLowerCase().includes(needle) || item.keywords.toLowerCase().includes(needle),
+	)
+}
+
+function createSlashMenuRenderer() {
+	let container: HTMLDivElement | null = null
+	let items: SlashMenuItem[] = []
+	let selected = 0
+	let executeSelected: (() => void) | null = null
+
+	function paint(props: SuggestionProps<SlashMenuItem, SlashMenuItem>) {
+		items = props.items
+		selected = Math.min(selected, Math.max(0, items.length - 1))
+		executeSelected = () => {
+			const item = items[selected]
+			if (item) props.command(item)
+		}
+		if (!container) return
+		container.innerHTML = ''
+		if (items.length === 0) {
+			container.style.display = 'none'
+			return
+		}
+		container.style.display = 'block'
+		items.forEach((item, index) => {
+			const button = document.createElement('button')
+			button.type = 'button'
+			button.className = `slash-menu-item${index === selected ? ' is-selected' : ''}`
+			const title = document.createElement('span')
+			title.className = 'slash-menu-title'
+			title.textContent = item.title
+			const hint = document.createElement('span')
+			hint.className = 'slash-menu-hint'
+			hint.textContent = item.hint
+			button.append(title, hint)
+			button.addEventListener('mousedown', (event) => {
+				event.preventDefault()
+				props.command(item)
+			})
+			container?.append(button)
+		})
+		const rect = props.clientRect?.()
+		if (rect) {
+			container.style.left = `${rect.left + window.scrollX}px`
+			container.style.top = `${rect.bottom + window.scrollY + 4}px`
+		}
+	}
+
+	return {
+		onStart(props: SuggestionProps<SlashMenuItem, SlashMenuItem>) {
+			selected = 0
+			container = document.createElement('div')
+			container.className = 'slash-menu'
+			document.body.append(container)
+			paint(props)
+		},
+		onUpdate(props: SuggestionProps<SlashMenuItem, SlashMenuItem>) {
+			paint(props)
+		},
+		onKeyDown({ event }: SuggestionKeyDownProps): boolean {
+			if (event.key === 'ArrowDown') {
+				selected = items.length ? (selected + 1) % items.length : 0
+				refreshSelection()
+				return true
+			}
+			if (event.key === 'ArrowUp') {
+				selected = items.length ? (selected - 1 + items.length) % items.length : 0
+				refreshSelection()
+				return true
+			}
+			if (event.key === 'Enter') {
+				executeSelected?.()
+				return true
+			}
+			if (event.key === 'Escape') {
+				container?.remove()
+				container = null
+				return true
+			}
+			return false
+		},
+		onExit() {
+			container?.remove()
+			container = null
+		},
+	}
+
+	function refreshSelection() {
+		if (!container) return
+		container.querySelectorAll('.slash-menu-item').forEach((el, index) => {
+			el.classList.toggle('is-selected', index === selected)
+		})
+	}
+}
+
+/** `/` at the start of a line opens the block-insert menu. */
+export const SlashMenu = Extension.create({
+	name: 'slashMenu',
+
+	addProseMirrorPlugins() {
+		return [
+			Suggestion<SlashMenuItem, SlashMenuItem>({
+				editor: this.editor,
+				pluginKey: new PluginKey('slashMenu'),
+				char: '/',
+				startOfLine: true,
+				items: ({ query }) => filterSlashMenuItems(query),
+				command: ({ editor, range, props }) => props.run(editor, range),
+				render: createSlashMenuRenderer,
+			}),
+		]
+	},
+})

package/src/ui/styles/broadsheet.css

@@ -403,3 +403,23 @@ input, textarea, select { font-family: inherit; }
 .ProseMirror table .column-resize-handle { background: var(--accent); bottom: -2px; pointer-events: none; position: absolute; right: -2px; top: 0; width: 4px; }
 .ProseMirror .tableWrapper { margin: 1.5em 0; overflow-x: auto; }
 .ProseMirror.resize-cursor { cursor: col-resize; }
+
+/* ── Typed editorial blocks (Phase 1) ──────────────────────────────────── */
+.ProseMirror div[data-callout] { border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 6px; padding: 10px 14px; margin: 1em 0; }
+.ProseMirror div[data-callout][data-tone="warning"], .ProseMirror div[data-callout][data-tone="caution"] { border-left-color: #b45309; }
+.ProseMirror div[data-callout][data-tone="tip"] { border-left-color: #15803d; }
+.ProseMirror div[data-callout][data-tone="important"] { border-left-color: #7c3aed; }
+.ProseMirror figure[data-pull-quote] { border-left: 3px solid var(--ink-faint); margin: 1.5em 0; padding: 4px 18px; font-size: 1.15em; font-style: italic; color: var(--ink-soft); }
+.ProseMirror figure[data-pull-quote][data-attribution]::after { content: "— " attr(data-attribution); display: block; font-size: 0.8em; font-style: normal; color: var(--ink-faint); margin-top: 6px; }
+.ProseMirror div[data-generated-faq] { border: 1px dashed var(--border); border-radius: 6px; padding: 8px 12px; margin: 1em 0; color: var(--ink-faint); font-size: 0.85em; user-select: none; }
+.ProseMirror a[data-citation] { text-decoration: underline dotted; color: var(--accent); }
+
+/* ── Slash menu + drag handle ─────────────────────────────────────────── */
+.slash-menu { position: absolute; z-index: 90; min-width: 240px; max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px; }
+.slash-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
+.slash-menu-item.is-selected, .slash-menu-item:hover { background: var(--hover); }
+.slash-menu-title { font-size: 13px; font-weight: 600; color: var(--ink); }
+.slash-menu-hint { font-size: 11px; color: var(--ink-faint); }
+.drag-handle { display: flex; align-items: center; justify-content: center; width: 18px; height: 22px; border-radius: 4px; color: var(--ink-faint); font-size: 11px; letter-spacing: -2px; cursor: grab; user-select: none; }
+.drag-handle:hover { background: var(--hover); color: var(--ink-soft); }
+.drag-handle:active { cursor: grabbing; }