@getdom/studio 0.1.0

package/src/pages/data/document-editor/documentEditorCodeBlock.js

@@ -0,0 +1,282 @@
+import {
+	CODE_LANGUAGE_OPTIONS,
+	codeLanguageOptionValue,
+	highlight,
+} from '../../lib/vue/codeHighlighter.js';
+
+const DEFAULT_CODE_LANGUAGE = 'txt';
+const HIGHLIGHT_DELAY = 80;
+
+export const documentEditorCodeLanguages = CODE_LANGUAGE_OPTIONS;
+
+/**
+ * Creates the editable code-block node with a persistent DOM Studio language value.
+ *
+ * @param {unknown} CodeBlock Tiptap code-block extension.
+ * @param {Function} mergeAttributes Tiptap HTML attribute merger.
+ * @returns {unknown} Configured code-block extension.
+ */
+export function createDocumentEditorCodeBlockExtension(CodeBlock, mergeAttributes) {
+	return CodeBlock.extend({
+		/**
+		 * Renders a language-aware pre/code structure for saved editor HTML.
+		 *
+		 * @param {Record<string, unknown>} context Tiptap render context.
+		 * @returns {Array<unknown>} ProseMirror DOM output specification.
+		 */
+		renderHTML({ node, HTMLAttributes }) {
+			const language = codeLanguageOptionValue(node.attrs.language || DEFAULT_CODE_LANGUAGE);
+			const classPrefix = this.options.languageClassPrefix || 'language-';
+			return [
+				'pre',
+				mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+					class: 'dom-code-block',
+					'data-language': language,
+				}),
+				[
+					'code',
+					{ class: `${classPrefix}${language}` },
+					0,
+				],
+			];
+		},
+	}).configure({
+		defaultLanguage: DEFAULT_CODE_LANGUAGE,
+	});
+}
+
+/**
+ * Creates a ProseMirror extension that highlights editable code with shared Shiki output.
+ *
+ * @param {Record<string, unknown>} modules Tiptap and ProseMirror runtime modules.
+ * @returns {unknown} Tiptap highlighting extension.
+ */
+export function createDocumentEditorCodeHighlightExtension(modules) {
+	const pluginKey = new modules.PluginKey('domDocumentEditorCodeHighlight');
+	return modules.Extension.create({
+		name: 'domDocumentEditorCodeHighlight',
+
+		/**
+		 * Installs the asynchronous syntax-decoration plugin.
+		 *
+		 * @returns {Array<unknown>} ProseMirror plugins.
+		 */
+		addProseMirrorPlugins() {
+			return [createCodeHighlightPlugin(modules, pluginKey)];
+		},
+	});
+}
+
+/**
+ * Creates the stateful ProseMirror plugin that schedules syntax decoration refreshes.
+ *
+ * @param {Record<string, unknown>} modules Tiptap and ProseMirror runtime modules.
+ * @param {unknown} pluginKey ProseMirror plugin key.
+ * @returns {unknown} ProseMirror plugin.
+ */
+function createCodeHighlightPlugin(modules, pluginKey) {
+	return new modules.Plugin({
+		key: pluginKey,
+		state: {
+			/**
+			 * Initializes the editor with no syntax decorations.
+			 *
+			 * @returns {unknown} Empty ProseMirror decoration set.
+			 */
+			init() {
+				return modules.DecorationSet.empty;
+			},
+
+			/**
+			 * Maps existing decorations or applies a completed asynchronous refresh.
+			 *
+			 * @param {unknown} transaction ProseMirror transaction.
+			 * @param {unknown} decorations Current decoration set.
+			 * @returns {unknown} Next ProseMirror decoration set.
+			 */
+			apply(transaction, decorations) {
+				const highlighted = transaction.getMeta(pluginKey);
+				if (highlighted !== undefined) return highlighted;
+				return decorations.map(transaction.mapping, transaction.doc);
+			},
+		},
+		props: {
+			/**
+			 * Returns the current syntax decorations for the editor view.
+			 *
+			 * @param {unknown} state ProseMirror editor state.
+			 * @returns {unknown} Current ProseMirror decoration set.
+			 */
+			decorations(state) {
+				return pluginKey.getState(state);
+			},
+		},
+		/**
+		 * Creates the browser view lifecycle that debounces asynchronous highlighting.
+		 *
+		 * @param {unknown} editorView ProseMirror editor view.
+		 * @returns {Record<string, Function>} ProseMirror plugin view handlers.
+		 */
+		view(editorView) {
+			let destroyed = false;
+			let lastSignature = '';
+			let requestId = 0;
+			let timer = null;
+
+			/**
+			 * Schedules a highlight refresh when code content or languages change.
+			 *
+			 * @param {unknown} view Current ProseMirror editor view.
+			 * @param {boolean} immediate Skip the typing debounce for initial rendering.
+			 * @returns {void}
+			 */
+			function scheduleHighlight(view, immediate = false) {
+				const signature = codeBlockSignature(view.state.doc);
+				if (signature === lastSignature) return;
+				lastSignature = signature;
+				requestId += 1;
+				const scheduledRequest = requestId;
+				if (timer) window.clearTimeout(timer);
+				timer = window.setTimeout(async () => {
+					const sourceDocument = view.state.doc;
+					const decorations = await buildCodeDecorations(sourceDocument, modules);
+					if (destroyed || scheduledRequest !== requestId) return;
+					if (codeBlockSignature(view.state.doc) !== signature) return;
+					view.dispatch(view.state.tr.setMeta(pluginKey, decorations));
+				}, immediate ? 0 : HIGHLIGHT_DELAY);
+			}
+
+			scheduleHighlight(editorView, true);
+			return {
+				/**
+				 * Refreshes highlighting after document transactions that affect code blocks.
+				 *
+				 * @param {unknown} view Updated ProseMirror editor view.
+				 * @param {unknown} previousState Previous ProseMirror editor state.
+				 * @returns {void}
+				 */
+				update(view, previousState) {
+					if (view.state.doc !== previousState.doc) scheduleHighlight(view);
+				},
+
+				/**
+				 * Cancels pending syntax work when the editor view is destroyed.
+				 *
+				 * @returns {void}
+				 */
+				destroy() {
+					destroyed = true;
+					requestId += 1;
+					if (timer) window.clearTimeout(timer);
+				},
+			};
+		},
+	});
+}
+
+/**
+ * Builds a stable signature for the code blocks that affect syntax decorations.
+ *
+ * @param {unknown} documentNode ProseMirror document node.
+ * @returns {string} Serialized code-block signature.
+ */
+function codeBlockSignature(documentNode) {
+	return JSON.stringify(collectCodeBlocks(documentNode).map((block) => [block.position, block.language, block.code]));
+}
+
+/**
+ * Collects language-aware code blocks and their ProseMirror positions.
+ *
+ * @param {unknown} documentNode ProseMirror document node.
+ * @returns {Array<{ position: number, code: string, language: string }>} Code-block records.
+ */
+function collectCodeBlocks(documentNode) {
+	const blocks = [];
+	documentNode.descendants((node, position) => {
+		if (node.type.name !== 'codeBlock') return;
+		blocks.push({
+			position,
+			code: node.textContent,
+			language: codeLanguageOptionValue(node.attrs.language || DEFAULT_CODE_LANGUAGE),
+		});
+	});
+	return blocks;
+}
+
+/**
+ * Highlights every code block and combines the results into one decoration set.
+ *
+ * @param {unknown} documentNode ProseMirror document node.
+ * @param {Record<string, unknown>} modules Tiptap and ProseMirror runtime modules.
+ * @returns {Promise<unknown>} ProseMirror decoration set.
+ */
+async function buildCodeDecorations(documentNode, modules) {
+	const blocks = collectCodeBlocks(documentNode);
+	const results = await Promise.all(blocks.map((block) => buildBlockDecorations(block, modules.Decoration)));
+	return modules.DecorationSet.create(documentNode, results.flat());
+}
+
+/**
+ * Converts one Shiki-rendered code block into editable inline decorations.
+ *
+ * @param {{ position: number, code: string, language: string }} block Code-block record.
+ * @param {unknown} Decoration ProseMirror decoration factory.
+ * @returns {Promise<Array<unknown>>} Inline syntax decorations.
+ */
+async function buildBlockDecorations(block, Decoration) {
+	const highlighted = await highlight(block.code, block.language);
+	if (!highlighted) return [];
+	return highlightedStyleRanges(highlighted)
+		.filter((range) => range.from < range.to && range.from < block.code.length)
+		.map((range) => Decoration.inline(
+			block.position + 1 + range.from,
+			block.position + 1 + Math.min(range.to, block.code.length),
+			{
+				class: 'dom-code-token',
+				style: range.style,
+			},
+		));
+}
+
+/**
+ * Extracts Shiki token styles and UTF-16 text offsets from highlighted HTML.
+ *
+ * @param {string} highlightedHtml Shiki HTML output.
+ * @returns {Array<{ from: number, to: number, style: string }>} Styled text ranges.
+ */
+function highlightedStyleRanges(highlightedHtml) {
+	if (typeof DOMParser === 'undefined') return [];
+	const parsed = new DOMParser().parseFromString(highlightedHtml, 'text/html');
+	const code = parsed.querySelector('pre.shiki code') || parsed.querySelector('code');
+	if (!code) return [];
+	const ranges = [];
+	let offset = 0;
+
+	/**
+	 * Walks highlighted nodes while carrying inherited inline token styles.
+	 *
+	 * @param {Node} node Current highlighted DOM node.
+	 * @param {string} inheritedStyle Nearest ancestor token style.
+	 * @returns {void}
+	 */
+	function visit(node, inheritedStyle = '') {
+		if (node.nodeType === 3) {
+			const length = node.nodeValue?.length || 0;
+			if (length && inheritedStyle) {
+				ranges.push({
+					from: offset,
+					to: offset + length,
+					style: inheritedStyle,
+				});
+			}
+			offset += length;
+			return;
+		}
+		if (node.nodeType !== 1) return;
+		const style = node.getAttribute('style') || inheritedStyle;
+		node.childNodes.forEach((child) => visit(child, style));
+	}
+
+	visit(code);
+	return ranges;
+}

package/src/pages/data/document-editor/examples/documentEditorMockApi.js

@@ -0,0 +1,272 @@
+let revisionCounter = 3;
+
+/**
+ * Creates an in-memory document API for editor demos.
+ *
+ * @returns {Record<string, Function>} API methods for document loading, saving, and rewrite suggestions.
+ */
+export function createDocumentEditorMockApi() {
+	const state = createInitialState();
+
+	/**
+	 * Loads a saved document.
+	 *
+	 * @returns {Promise<Record<string, unknown>>} Document response.
+	 */
+	async function loadDocument() {
+		await wait(220);
+		return {
+			document: clone(state.document),
+			meta: {
+				requestedAt: new Date().toISOString(),
+				action: 'load-document',
+			},
+		};
+	}
+
+	/**
+	 * Saves a document snapshot.
+	 *
+	 * @param {{ content: Record<string, unknown>|string, html?: string, text?: string }} request Save request.
+	 * @returns {Promise<Record<string, unknown>>} Save response.
+	 */
+	async function saveDocument(request = {}) {
+		await wait(260);
+		revisionCounter += 1;
+		state.document = {
+			...state.document,
+			content: clone(request.content || state.document.content),
+			html: String(request.html || ''),
+			text: String(request.text || ''),
+			revision: revisionCounter,
+			updatedAt: new Date().toISOString(),
+		};
+		return {
+			document: clone(state.document),
+			meta: {
+				requestedAt: new Date().toISOString(),
+				action: 'save-document',
+				revision: state.document.revision,
+			},
+		};
+	}
+
+	/**
+	 * Generates a rewrite suggestion for the selected editor text.
+	 *
+	 * @param {{ selectedText?: string, instruction?: string }} request Rewrite request.
+	 * @returns {Promise<Record<string, unknown>>} Rewrite response.
+	 */
+	async function rewriteSelection(request = {}) {
+		await wait(680);
+		const selectedText = String(request.selectedText || '').trim();
+		const instruction = String(request.instruction || '').trim();
+		const proposed = proposeRewrite(selectedText, instruction);
+		return {
+			suggestion: {
+				id: `sug_ai_${Date.now()}`,
+				type: 'replace',
+				original: selectedText,
+				proposed,
+				instruction,
+				author: {
+					id: 'ai-editor',
+					name: 'AI editor',
+					color: '#2563eb',
+					type: 'ai',
+				},
+				createdAt: new Date().toISOString(),
+			},
+			meta: {
+				requestedAt: new Date().toISOString(),
+				action: 'rewrite-selection',
+			},
+		};
+	}
+
+	return {
+		loadDocument,
+		saveDocument,
+		rewriteSelection,
+	};
+}
+
+/**
+ * Creates initial demo API state.
+ *
+ * @returns {{ document: Record<string, unknown> }} Initial mock database state.
+ */
+function createInitialState() {
+	return {
+		document: {
+			id: 'doc_launch_brief',
+			title: 'July launch note',
+			revision: revisionCounter,
+			updatedAt: '2026-07-07T08:30:00.000Z',
+			content: createInitialDocumentContent(),
+			html: '',
+			text: '',
+		},
+	};
+}
+
+/**
+ * Creates the initial editor document in Tiptap JSON format.
+ *
+ * @returns {Record<string, unknown>} Tiptap document JSON.
+ */
+function createInitialDocumentContent() {
+	return {
+		type: 'doc',
+		content: [
+			{
+				type: 'heading',
+				attrs: { level: 1 },
+				content: [{ type: 'text', text: 'July product launch note' }],
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: 'The July release introduces a faster way for teams to draft pages, review AI suggestions, and keep every edit connected to structured document data.',
+					},
+				],
+			},
+			{
+				type: 'heading',
+				attrs: { level: 2 },
+				content: [{ type: 'text', text: 'Audience' }],
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: 'This note is for product leads, content teams, and developers who need an editor that feels familiar while still giving the application a reliable content model.',
+					},
+				],
+			},
+			{
+				type: 'heading',
+				attrs: { level: 2 },
+				content: [{ type: 'text', text: 'Draft message' }],
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: 'The new editing workspace should make everyday writing calm and direct. Authors can shape the document by hand, bring in the AI for a specific passage, and review the proposed change before it becomes part of the saved draft.',
+					},
+				],
+			},
+			{
+				type: 'bulletList',
+				content: [
+					createListItem('Position the editor as the place where human writing, AI suggestions, and media choices meet.'),
+					createListItem('Keep the saved draft as structured JSON so public rendering can be handled by a separate output pipeline.'),
+					createListItem('Use the existing media browser for product images, screenshots, and campaign assets.'),
+				],
+			},
+			{
+				type: 'blockquote',
+				content: [
+					{
+						type: 'paragraph',
+						content: [
+							{
+								type: 'text',
+								text: 'Open question: should accepted AI suggestions become normal text immediately, or should the saved revision keep an audit trail for later review?',
+							},
+						],
+					},
+				],
+			},
+			{
+				type: 'heading',
+				attrs: { level: 2 },
+				content: [{ type: 'text', text: 'Next edit' }],
+			},
+			{
+				type: 'paragraph',
+				content: [
+					{
+						type: 'text',
+						text: 'Tighten the draft message, add a product screenshot, and make the audience section less formal before the next review.',
+					},
+				],
+			},
+		],
+	};
+}
+
+/**
+ * Creates a Tiptap list item.
+ *
+ * @param {string} text List item text.
+ * @returns {Record<string, unknown>} Tiptap list item node.
+ */
+function createListItem(text) {
+	return {
+		type: 'listItem',
+		content: [
+			{
+				type: 'paragraph',
+				content: [{ type: 'text', text }],
+			},
+		],
+	};
+}
+
+/**
+ * Builds a deterministic rewrite from a selected phrase and instruction.
+ *
+ * @param {string} selectedText Selected editor text.
+ * @param {string} instruction Rewrite instruction.
+ * @returns {string} Proposed rewrite.
+ */
+function proposeRewrite(selectedText, instruction) {
+	if (!selectedText) return 'Select copy in the editor before asking the AI for a rewrite.';
+	const cleaned = selectedText.replace(/\s+/g, ' ').trim();
+	if (/short|concise|tight/i.test(instruction)) {
+		return tightenCopy(cleaned);
+	}
+	if (/formal|polish|professional/i.test(instruction)) {
+		return `This editor gives teams a controlled writing surface where human edits, AI suggestions, and publishing requirements can move through one reviewable document workflow.`;
+	}
+	return `The editor should let people write naturally, invite AI into a selected passage, and review the proposed change before it alters the saved document.`;
+}
+
+/**
+ * Produces a shorter version of selected copy.
+ *
+ * @param {string} value Selected text.
+ * @returns {string} Concise rewrite.
+ */
+function tightenCopy(value) {
+	if (value.length < 120) return value;
+	return `${value.slice(0, 112).replace(/[,\s]+$/, '')}.`;
+}
+
+/**
+ * Waits for a small delay to make loading and pending states visible.
+ *
+ * @param {number} ms Delay in milliseconds.
+ * @returns {Promise<void>} Resolves after the delay.
+ */
+function wait(ms) {
+	return new Promise((resolve) => {
+		setTimeout(resolve, ms);
+	});
+}
+
+/**
+ * Deep-clones JSON-compatible data.
+ *
+ * @param {unknown} value Value to clone.
+ * @returns {unknown} Cloned value.
+ */
+function clone(value) {
+	return JSON.parse(JSON.stringify(value));
+}