@growth-labs/cms 0.5.10 → 0.5.12

package/src/ui/editor/serialize.ts

@@ -19,6 +19,7 @@
 //   :::tweet\n<url>\n::: tweet-embed directive
 
 import type { JSONContent } from '@tiptap/core'
+import { normalizeBoundaryMarks } from './trim-boundary-marks.js'
 
 // ─────────────────────────────────────────────────────────────────────────────
 // docToMarkdown — JSONContent → string
@@ -26,8 +27,9 @@ import type { JSONContent } from '@tiptap/core'
 
 /** Serialise a Tiptap JSONContent document to a markdown string. */
 export function docToMarkdown(doc: JSONContent): string {
-	if (!doc.content || doc.content.length === 0) return ''
-	const lines = doc.content.map((node) => serializeBlock(node)).filter((s) => s !== null)
+	const normalized = normalizeBoundaryMarks(doc)
+	if (!normalized.content || normalized.content.length === 0) return ''
+	const lines = normalized.content.map((node) => serializeBlock(node)).filter((s) => s !== null)
 	return lines.join('\n\n')
 }
 

package/src/ui/editor/trim-boundary-marks.ts

@@ -0,0 +1,181 @@
+import { Extension, type JSONContent } from '@tiptap/core'
+import type { Mark, MarkType, Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Plugin } from '@tiptap/pm/state'
+
+const BOUNDARY_MARKS = ['link', 'underline'] as const
+
+function markKey(mark: NonNullable<JSONContent['marks']>[number]): string {
+	return `${mark.type}:${JSON.stringify(mark.attrs ?? {})}`
+}
+
+function sameMarks(
+	a: JSONContent['marks'] | undefined,
+	b: JSONContent['marks'] | undefined,
+): boolean {
+	return JSON.stringify(a ?? []) === JSON.stringify(b ?? [])
+}
+
+function mergeAdjacentText(nodes: JSONContent[]): JSONContent[] {
+	const merged: JSONContent[] = []
+	for (const node of nodes) {
+		const previous = merged.at(-1)
+		if (
+			previous?.type === 'text' &&
+			node.type === 'text' &&
+			sameMarks(previous.marks, node.marks)
+		) {
+			previous.text = (previous.text ?? '') + (node.text ?? '')
+		} else {
+			merged.push(node)
+		}
+	}
+	return merged
+}
+
+function trimJsonMark(nodes: JSONContent[], markType: (typeof BOUNDARY_MARKS)[number]) {
+	const output: JSONContent[] = []
+	let index = 0
+
+	while (index < nodes.length) {
+		const node = nodes[index]
+		const mark =
+			node.type === 'text'
+				? node.marks?.find((candidate) => candidate.type === markType)
+				: undefined
+		if (!mark) {
+			output.push(node)
+			index += 1
+			continue
+		}
+
+		const key = markKey(mark)
+		const run: JSONContent[] = []
+		while (index < nodes.length) {
+			const candidate = nodes[index]
+			const candidateMark =
+				candidate.type === 'text'
+					? candidate.marks?.find((item) => item.type === markType && markKey(item) === key)
+					: undefined
+			if (!candidateMark) break
+			run.push(candidate)
+			index += 1
+		}
+
+		const text = run.map((item) => item.text ?? '').join('')
+		const leading = text.match(/^\s+/u)?.[0].length ?? 0
+		const trailing = text.match(/\s+$/u)?.[0].length ?? 0
+		const markedEnd = Math.max(leading, text.length - trailing)
+		let offset = 0
+
+		for (const item of run) {
+			const itemText = item.text ?? ''
+			const itemStart = offset
+			const itemEnd = offset + itemText.length
+			const cuts = [itemStart, Math.max(itemStart, leading), Math.min(itemEnd, markedEnd), itemEnd]
+				.filter(
+					(value, cutIndex, all) =>
+						value >= itemStart && value <= itemEnd && all.indexOf(value) === cutIndex,
+				)
+				.sort((a, b) => a - b)
+
+			for (let cutIndex = 0; cutIndex < cuts.length - 1; cutIndex += 1) {
+				const from = cuts[cutIndex]
+				const to = cuts[cutIndex + 1]
+				if (from === to) continue
+				const keepMark = from >= leading && to <= markedEnd
+				const marks = keepMark
+					? item.marks
+					: item.marks?.filter((candidate) => candidate.type !== markType)
+				output.push({
+					...item,
+					text: itemText.slice(from - itemStart, to - itemStart),
+					...(marks?.length ? { marks } : { marks: undefined }),
+				})
+			}
+			offset = itemEnd
+		}
+	}
+
+	return mergeAdjacentText(output)
+}
+
+/**
+ * Remove link and underline marks from leading/trailing whitespace in every
+ * inline mark run. Underline follows the same rule as links: whitespace is
+ * layout, not editorial emphasis, and pasted underline is the visible half of
+ * the malformed-link report.
+ */
+export function normalizeBoundaryMarks(node: JSONContent): JSONContent {
+	if (!node.content) return node
+	let content = node.content.map(normalizeBoundaryMarks)
+	for (const markType of BOUNDARY_MARKS) content = trimJsonMark(content, markType)
+	return { ...node, content }
+}
+
+function matchingMark(
+	node: ProseMirrorNode,
+	markType: MarkType,
+	previous?: Mark,
+): Mark | undefined {
+	const mark = markType.isInSet(node.marks)
+	if (!mark) return undefined
+	return previous && !mark.eq(previous) ? undefined : mark
+}
+
+/** Keep the live Tiptap document visually consistent after toolbar and paste transactions. */
+export const TrimBoundaryMarks = Extension.create({
+	name: 'trimBoundaryMarks',
+
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				appendTransaction: (transactions, _oldState, newState) => {
+					if (!transactions.some((transaction) => transaction.docChanged)) return null
+					const transaction = newState.tr
+
+					newState.doc.descendants((parent, parentPosition) => {
+						if (!parent.isTextblock) return true
+
+						for (const markName of BOUNDARY_MARKS) {
+							const markType = newState.schema.marks[markName]
+							if (!markType) continue
+							const children: Array<{ node: ProseMirrorNode; from: number }> = []
+							parent.forEach((child, offset) => {
+								if (child.isText) children.push({ node: child, from: parentPosition + 1 + offset })
+							})
+
+							let index = 0
+							while (index < children.length) {
+								const first = children[index]
+								const mark = matchingMark(first.node, markType)
+								if (!mark) {
+									index += 1
+									continue
+								}
+
+								const run: typeof children = []
+								while (
+									index < children.length &&
+									matchingMark(children[index].node, markType, mark)
+								) {
+									run.push(children[index])
+									index += 1
+								}
+								const text = run.map((item) => item.node.text ?? '').join('')
+								const leading = text.match(/^\s+/u)?.[0].length ?? 0
+								const trailing = text.match(/\s+$/u)?.[0].length ?? 0
+								const runFrom = run[0].from
+								const runTo = run.at(-1)!.from + (run.at(-1)!.node.text?.length ?? 0)
+								if (leading) transaction.removeMark(runFrom, runFrom + leading, markType)
+								if (trailing) transaction.removeMark(runTo - trailing, runTo, markType)
+							}
+						}
+						return false
+					})
+
+					return transaction.steps.length ? transaction : null
+				},
+			}),
+		]
+	},
+})