@stll/folio-core 0.0.1-placeholder.0 → 0.1.0

package/dist/utils/clipboard.js

@@ -0,0 +1,622 @@
+//#region src/utils/clipboard.ts
+/**
+* Custom MIME type for internal clipboard format
+*/
+const INTERNAL_CLIPBOARD_TYPE = "application/x-stella-folio";
+/**
+* Standard clipboard MIME types
+*/
+const CLIPBOARD_TYPES = {
+	HTML: "text/html",
+	PLAIN: "text/plain"
+};
+const SKIPPED_CLIPBOARD_ELEMENTS = /* @__PURE__ */ new Set([
+	"script",
+	"style",
+	"iframe",
+	"object",
+	"embed",
+	"svg",
+	"math"
+]);
+function getClipboardImageFiles(clipboardData) {
+	if (!clipboardData) return [];
+	const collectFromItems = () => {
+		const items = clipboardData.items;
+		if (!items || items.length === 0) return [];
+		const files = [];
+		for (const item of Array.from(items)) {
+			if (item.kind !== "file") continue;
+			if (!item.type.startsWith("image/")) continue;
+			const file = item.getAsFile();
+			if (file) files.push(file);
+		}
+		return files;
+	};
+	const collectFromFiles = () => {
+		const clipboardFiles = clipboardData.files;
+		if (!clipboardFiles || clipboardFiles.length === 0) return [];
+		return Array.from(clipboardFiles).filter((file) => file.type.startsWith("image/"));
+	};
+	const candidates = collectFromItems();
+	const files = candidates.length ? candidates : collectFromFiles();
+	if (files.length <= 1) return files;
+	const preferredTypes = [
+		"image/png",
+		"image/jpeg",
+		"image/webp",
+		"image/gif",
+		"image/svg+xml",
+		"image/bmp",
+		"image/tiff"
+	];
+	const pickBest = (group) => {
+		let best = group[0];
+		let bestRank = preferredTypes.indexOf(best.type);
+		if (bestRank < 0) bestRank = Number.MAX_SAFE_INTEGER;
+		for (const file of group.slice(1)) {
+			let rank = preferredTypes.indexOf(file.type);
+			if (rank < 0) rank = Number.MAX_SAFE_INTEGER;
+			if (rank < bestRank) {
+				best = file;
+				bestRank = rank;
+				continue;
+			}
+			if (rank === bestRank && file.size > best.size) best = file;
+		}
+		return best;
+	};
+	const groups = /* @__PURE__ */ new Map();
+	for (const file of files) {
+		const rawName = file.name.trim();
+		const key = (rawName ? rawName.replace(/\.[^/.]+$/, "").toLowerCase() : "") || `size:${file.size}`;
+		const bucket = groups.get(key);
+		if (bucket) bucket.push(file);
+		else groups.set(key, [file]);
+	}
+	const deduped = [];
+	for (const group of groups.values()) deduped.push(pickBest(group));
+	return deduped;
+}
+/**
+* Copy runs to clipboard with formatting
+*/
+async function copyRuns(runs, options = {}) {
+	const { includeFormatting = true, onError } = options;
+	try {
+		return await writeToClipboard(runsToClipboardContent(runs, includeFormatting));
+	} catch (error) {
+		onError?.(error);
+		return false;
+	}
+}
+/**
+* Copy paragraphs to clipboard with formatting
+*/
+async function copyParagraphs(paragraphs, options = {}) {
+	const { includeFormatting = true, onError } = options;
+	try {
+		return await writeToClipboard(paragraphsToClipboardContent(paragraphs, includeFormatting));
+	} catch (error) {
+		onError?.(error);
+		return false;
+	}
+}
+/**
+* Convert runs to clipboard content (HTML and plain text)
+*/
+function runsToClipboardContent(runs, includeFormatting = true) {
+	const plainText = runs.map(getRunText).join("");
+	return {
+		plainText,
+		html: includeFormatting ? runsToHtml(runs) : escapeHtml(plainText),
+		internal: JSON.stringify(runs)
+	};
+}
+/**
+* Convert paragraphs to clipboard content
+*/
+function paragraphsToClipboardContent(paragraphs, includeFormatting = true) {
+	const plainText = paragraphs.map(getParagraphText).join("\n");
+	return {
+		plainText,
+		html: includeFormatting ? paragraphsToHtml(paragraphs) : escapeHtml(plainText),
+		internal: JSON.stringify(paragraphs)
+	};
+}
+/**
+* Write content to clipboard
+*/
+async function writeToClipboard(content) {
+	try {
+		const items = [new ClipboardItem({
+			[CLIPBOARD_TYPES.PLAIN]: new Blob([content.plainText], { type: CLIPBOARD_TYPES.PLAIN }),
+			[CLIPBOARD_TYPES.HTML]: new Blob([content.html], { type: CLIPBOARD_TYPES.HTML })
+		})];
+		await navigator.clipboard.write(items);
+		return true;
+	} catch {
+		return writeToClipboardFallback(content);
+	}
+}
+/**
+* Fallback method using execCommand
+*/
+function writeToClipboardFallback(content) {
+	const tempDiv = document.createElement("div");
+	tempDiv.innerHTML = content.html;
+	tempDiv.style.position = "fixed";
+	tempDiv.style.left = "-9999px";
+	document.body.append(tempDiv);
+	try {
+		const selection = window.getSelection();
+		if (!selection) return false;
+		const range = document.createRange();
+		range.selectNodeContents(tempDiv);
+		selection.removeAllRanges();
+		selection.addRange(range);
+		const result = document.execCommand("copy");
+		selection.removeAllRanges();
+		return result;
+	} finally {
+		tempDiv.remove();
+	}
+}
+/**
+* Read content from clipboard
+*/
+async function readFromClipboard(options = {}) {
+	const { cleanWordFormatting = true, onError } = options;
+	try {
+		return await parseClipboardItems(await navigator.clipboard.read(), cleanWordFormatting);
+	} catch (error) {
+		onError?.(error);
+		return null;
+	}
+}
+/**
+* Parse clipboard items
+*/
+async function parseClipboardItems(items, cleanWordFormatting) {
+	let html = "";
+	let plainText = "";
+	for (const item of items) {
+		if (item.types.includes(CLIPBOARD_TYPES.HTML)) html = await (await item.getType(CLIPBOARD_TYPES.HTML)).text();
+		if (item.types.includes(CLIPBOARD_TYPES.PLAIN)) plainText = await (await item.getType(CLIPBOARD_TYPES.PLAIN)).text();
+	}
+	return parseClipboardHtml(html, plainText, cleanWordFormatting);
+}
+/**
+* Handle paste event
+*/
+function handlePasteEvent(event, options = {}) {
+	const { cleanWordFormatting = true } = options;
+	const clipboardData = event.clipboardData;
+	if (!clipboardData) return null;
+	return parseClipboardHtml(clipboardData.getData(CLIPBOARD_TYPES.HTML), clipboardData.getData(CLIPBOARD_TYPES.PLAIN), cleanWordFormatting);
+}
+/**
+* Parse HTML from clipboard
+*/
+function parseClipboardHtml(html, plainText, cleanWordFormatting = true) {
+	const fromWord = isWordHtml(html);
+	const fromEditor = isEditorHtml(html);
+	if (fromEditor) {
+		const internalMatch = /data-folio-content="(?<content>[^"]+)"/.exec(html);
+		if (internalMatch) try {
+			return {
+				runs: JSON.parse(decodeURIComponent(internalMatch.groups["content"])),
+				fromWord: false,
+				fromEditor: true,
+				plainText
+			};
+		} catch {}
+	}
+	let processedHtml = html;
+	if (fromWord && cleanWordFormatting) processedHtml = cleanWordHtml(html);
+	return {
+		runs: htmlToRuns(processedHtml, plainText),
+		fromWord,
+		fromEditor,
+		plainText
+	};
+}
+/**
+* Check if HTML is from Microsoft Word
+*/
+function isWordHtml(html) {
+	return html.includes("urn:schemas-microsoft-com:office") || html.includes("mso-") || html.includes("MsoNormal") || html.includes("class=\"Mso") || html.includes("<!--[if gte mso");
+}
+/**
+* Check if HTML is from our editor
+*/
+function isEditorHtml(html) {
+	return html.includes("data-folio") || html.includes("docx-run") || html.includes("docx-paragraph");
+}
+/**
+* Strip every HTML comment, including unterminated comments.
+*/
+function stripHtmlComments(html) {
+	let result = "";
+	let cursor = 0;
+	while (cursor < html.length) {
+		const start = html.indexOf("<!--", cursor);
+		if (start === -1) {
+			result += html.slice(cursor);
+			break;
+		}
+		result += html.slice(cursor, start);
+		const end = html.indexOf("-->", start + 4);
+		if (end === -1) break;
+		cursor = end + 3;
+	}
+	return result;
+}
+const ASCII_UPPER_A = 65;
+const ASCII_UPPER_Z = 90;
+const ASCII_LOWERCASE_OFFSET = 32;
+function toAsciiLowerCode(code) {
+	if (code < ASCII_UPPER_A || code > ASCII_UPPER_Z) return code;
+	return code + ASCII_LOWERCASE_OFFSET;
+}
+function indexOfAsciiCaseInsensitive(text, search, fromIndex) {
+	const maxStart = text.length - search.length;
+	for (let index = fromIndex; index <= maxStart; index++) {
+		let matches = true;
+		for (let offset = 0; offset < search.length; offset++) if (toAsciiLowerCode(text.codePointAt(index + offset) ?? -1) !== (search.codePointAt(offset) ?? -1)) {
+			matches = false;
+			break;
+		}
+		if (matches) return index;
+	}
+	return -1;
+}
+/**
+* Remove paired namespace blocks such as Word/Office `<w:...>` and `<o:...>`
+* tags without regex backtracking on hostile clipboard HTML.
+*/
+function stripPairedNamespaceTags(html, prefix) {
+	const open = `<${prefix}`;
+	const close = `</${prefix}`;
+	let result = "";
+	let cursor = 0;
+	while (cursor < html.length) {
+		const start = indexOfAsciiCaseInsensitive(html, open, cursor);
+		if (start === -1) {
+			result += html.slice(cursor);
+			break;
+		}
+		const openTagEnd = html.indexOf(">", start);
+		if (openTagEnd === -1) {
+			result += html.slice(cursor);
+			break;
+		}
+		if (html.slice(start, openTagEnd).trimEnd().endsWith("/")) {
+			result += html.slice(cursor, start);
+			cursor = openTagEnd + 1;
+			continue;
+		}
+		const closeStart = indexOfAsciiCaseInsensitive(html, close, openTagEnd + 1);
+		const closeTagEnd = closeStart === -1 ? -1 : html.indexOf(">", closeStart);
+		if (closeTagEnd === -1) {
+			result += html.slice(cursor);
+			break;
+		}
+		result += html.slice(cursor, start);
+		cursor = closeTagEnd + 1;
+	}
+	return result;
+}
+/**
+* Clean Microsoft Word HTML
+*/
+function cleanWordHtml(html) {
+	let cleaned = html;
+	cleaned = stripHtmlComments(cleaned);
+	cleaned = cleaned.replace(/<\?xml[^>]*>/gi, "");
+	cleaned = stripPairedNamespaceTags(cleaned, "o:");
+	cleaned = cleaned.replace(/<o:[^>]*\/>/gi, "");
+	cleaned = stripPairedNamespaceTags(cleaned, "w:");
+	cleaned = cleaned.replace(/<w:[^>]*\/>/gi, "");
+	cleaned = cleanWordAttributes(cleaned);
+	cleaned = cleaned.replace(/<span[^>]*>\s*<\/span>/gi, "");
+	cleaned = cleaned.replace(/<\/?font[^>]*>/gi, "");
+	cleaned = cleaned.replace(/\s+/g, " ").trim();
+	return cleaned;
+}
+function cleanWordAttributes(html) {
+	const container = new DOMParser().parseFromString(html, "text/html").body;
+	for (const element of Array.from(container.querySelectorAll("*"))) {
+		const filteredClasses = Array.from(element.classList).filter((className) => !className.includes("Mso"));
+		if (filteredClasses.length === 0) element.removeAttribute("class");
+		else element.setAttribute("class", filteredClasses.join(" "));
+		const keptStyleProperties = [];
+		for (const property of Array.from(element.style)) {
+			if (property.toLowerCase().startsWith("mso-")) continue;
+			const value = element.style.getPropertyValue(property);
+			if (value) keptStyleProperties.push(`${property}: ${value}`);
+		}
+		if (keptStyleProperties.length === 0) element.removeAttribute("style");
+		else element.setAttribute("style", keptStyleProperties.join("; "));
+	}
+	return container.innerHTML;
+}
+/**
+* Convert HTML to runs
+*/
+function htmlToRuns(html, plainTextFallback) {
+	if (!html || html.trim() === "") return plainTextFallback ? [createTextRun(plainTextFallback)] : [];
+	const container = new DOMParser().parseFromString(html, "text/html").body;
+	const runs = [];
+	processNode(container, runs, {});
+	if (runs.length === 0 && plainTextFallback) return [createTextRun(plainTextFallback)];
+	return runs;
+}
+/**
+* Process a DOM node and extract runs
+*/
+function processNode(node, runs, inheritedFormatting) {
+	if (node.nodeType === Node.TEXT_NODE) {
+		const text = node.textContent || "";
+		if (text.trim() || text.includes(" ")) runs.push(createTextRun(text, inheritedFormatting));
+		return;
+	}
+	if (!(node instanceof HTMLElement)) return;
+	const element = node;
+	const tagName = element.tagName.toLowerCase();
+	if (SKIPPED_CLIPBOARD_ELEMENTS.has(tagName)) return;
+	const formatting = {
+		...inheritedFormatting,
+		...extractFormatting(element)
+	};
+	switch (tagName) {
+		case "br":
+			runs.push(createBreakRun(formatting));
+			return;
+		case "p":
+		case "div":
+			for (const child of element.childNodes) processNode(child, runs, formatting);
+			if (element.nextSibling) runs.push(createBreakRun(formatting));
+			return;
+		case "b":
+		case "strong":
+			formatting.bold = true;
+			break;
+		case "i":
+		case "em":
+			formatting.italic = true;
+			break;
+		case "u":
+			formatting.underline = { style: "single" };
+			break;
+		case "s":
+		case "strike":
+		case "del":
+			formatting.strike = true;
+			break;
+		case "sup":
+			formatting.vertAlign = "superscript";
+			break;
+		case "sub":
+			formatting.vertAlign = "subscript";
+			break;
+		case "code":
+		case "pre":
+			formatting.fontFamily = { ascii: "Courier New" };
+			break;
+		default: break;
+	}
+	for (const child of element.childNodes) processNode(child, runs, formatting);
+}
+/**
+* Extract formatting from an HTML element
+*/
+function extractFormatting(element) {
+	const formatting = {};
+	const style = element.style;
+	if (style.fontWeight === "bold" || Number.parseInt(style.fontWeight, 10) >= 700) formatting.bold = true;
+	if (style.fontStyle === "italic") formatting.italic = true;
+	const textDecoration = style.textDecoration || style.textDecorationLine;
+	if (textDecoration) {
+		if (textDecoration.includes("underline")) formatting.underline = { style: "single" };
+		if (textDecoration.includes("line-through")) formatting.strike = true;
+	}
+	if (style.fontSize) {
+		const sizePx = Number.parseFloat(style.fontSize);
+		if (!Number.isNaN(sizePx)) formatting.fontSize = Math.round(sizePx / 1.333 * 2);
+	}
+	if (style.fontFamily) {
+		const fontFamily = style.fontFamily.replace(/["']/g, "").split(",")[0].trim();
+		if (fontFamily) formatting.fontFamily = { ascii: fontFamily };
+	}
+	if (style.color) {
+		const hex = colorToHex(style.color);
+		if (hex) formatting.color = { rgb: hex };
+	}
+	if (style.backgroundColor && style.backgroundColor !== "transparent") {
+		const hex = colorToHex(style.backgroundColor);
+		if (hex) formatting.shading = { fill: { rgb: hex } };
+	}
+	return formatting;
+}
+/**
+* Convert a CSS color value to hex
+*/
+function colorToHex(color) {
+	if (!color || color === "transparent" || color === "inherit") return null;
+	if (color.startsWith("#")) return color.slice(1).toUpperCase();
+	const rgbMatch = /rgba?\((?<r>\d+),\s*(?<g>\d+),\s*(?<b>\d+)/.exec(color);
+	if (rgbMatch) {
+		const groups = rgbMatch.groups;
+		const r = Number.parseInt(groups["r"], 10).toString(16).padStart(2, "0");
+		const g = Number.parseInt(groups["g"], 10).toString(16).padStart(2, "0");
+		const b = Number.parseInt(groups["b"], 10).toString(16).padStart(2, "0");
+		return (r + g + b).toUpperCase();
+	}
+	return null;
+}
+/**
+* Get plain text from a run
+*/
+function getRunText(run) {
+	return run.content.map((content) => {
+		if (content.type === "text") return content.text;
+		if (content.type === "tab") return "	";
+		if (content.type === "break") return content.breakType === "textWrapping" ? "\n" : "";
+		return "";
+	}).join("");
+}
+/**
+* Get plain text from a paragraph
+*/
+function getParagraphText(paragraph) {
+	return paragraph.content.map((content) => {
+		if (content.type === "run") return getRunText(content);
+		return "";
+	}).join("");
+}
+/**
+* Convert runs to HTML
+*/
+function runsToHtml(runs) {
+	return runs.map(runToHtml).join("");
+}
+/**
+* Convert paragraphs to HTML
+*/
+function paragraphsToHtml(paragraphs) {
+	return paragraphs.map((p) => `<p>${runsToHtml(p.content.filter((c) => c.type === "run"))}</p>`).join("");
+}
+/**
+* Convert a run to HTML
+*/
+function runToHtml(run) {
+	const text = getRunText(run);
+	if (!text) return "";
+	let html = escapeHtml(text);
+	const formatting = run.formatting;
+	if (!formatting) return html;
+	if (formatting.bold) html = `<strong>${html}</strong>`;
+	if (formatting.italic) html = `<em>${html}</em>`;
+	if (formatting.underline) html = `<u>${html}</u>`;
+	if (formatting.strike) html = `<s>${html}</s>`;
+	if (formatting.vertAlign === "superscript") html = `<sup>${html}</sup>`;
+	if (formatting.vertAlign === "subscript") html = `<sub>${html}</sub>`;
+	const styles = [];
+	const fontSize = formatting.fontSize;
+	if (fontSize !== void 0 && Number.isFinite(fontSize) && fontSize > 0) {
+		const sizePt = fontSize / 2;
+		styles.push(`font-size: ${sizePt}pt`);
+	}
+	if (formatting.fontFamily?.ascii) styles.push(`font-family: "${escapeCssString(formatting.fontFamily.ascii)}"`);
+	const textColor = formatCssRgb(formatting.color?.rgb);
+	if (textColor !== null) styles.push(`color: ${textColor}`);
+	const fillColor = formatCssRgb(formatting.shading?.fill?.rgb);
+	if (fillColor !== null) styles.push(`background-color: ${fillColor}`);
+	if (styles.length > 0) html = `<span style="${escapeHtml(styles.join("; "))}">${html}</span>`;
+	return html;
+}
+const CSS_RGB_RE = /^[\dA-F]{6}$/iu;
+function formatCssRgb(value) {
+	if (value === void 0 || !CSS_RGB_RE.test(value)) return null;
+	return `#${value}`;
+}
+function escapeCssString(value) {
+	return value.replaceAll("\\", "\\\\").replaceAll("\"", "\\\"").replaceAll("\n", "\\A ").replaceAll("\r", "\\D ").replaceAll("\f", "\\C ");
+}
+/**
+* Escape HTML special characters
+*/
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+/**
+* Create a text run
+*/
+function createTextRun(text, formatting) {
+	return {
+		type: "run",
+		...formatting !== void 0 ? { formatting } : {},
+		content: [{
+			type: "text",
+			text
+		}]
+	};
+}
+/**
+* Create a break run
+*/
+function createBreakRun(formatting) {
+	return {
+		type: "run",
+		...formatting !== void 0 ? { formatting } : {},
+		content: [{
+			type: "break",
+			breakType: "textWrapping"
+		}]
+	};
+}
+/**
+* Create clipboard keyboard handlers for an editor
+*/
+function createClipboardHandlers(options) {
+	const { onCopy, onCut, onPaste, clipboardOptions = {} } = options;
+	const handleCopy = async (event) => {
+		if (!onCopy) return;
+		const data = onCopy();
+		if (!data) return;
+		event.preventDefault();
+		const content = runsToClipboardContent(data.runs);
+		if (event.clipboardData) {
+			event.clipboardData.setData(CLIPBOARD_TYPES.PLAIN, content.plainText);
+			event.clipboardData.setData(CLIPBOARD_TYPES.HTML, content.html);
+		} else await writeToClipboard(content);
+	};
+	const handleCut = async (event) => {
+		if (!onCut) return;
+		const data = onCut();
+		if (!data) return;
+		event.preventDefault();
+		const content = runsToClipboardContent(data.runs);
+		if (event.clipboardData) {
+			event.clipboardData.setData(CLIPBOARD_TYPES.PLAIN, content.plainText);
+			event.clipboardData.setData(CLIPBOARD_TYPES.HTML, content.html);
+		} else await writeToClipboard(content);
+	};
+	const handlePaste = (event) => {
+		if (!onPaste) return;
+		event.preventDefault();
+		const content = handlePasteEvent(event, clipboardOptions);
+		if (content) onPaste(content);
+	};
+	const handleKeyDown = async (event) => {
+		const isCtrlOrMeta = event.ctrlKey || event.metaKey;
+		if (isCtrlOrMeta && event.key === "c" && !event.shiftKey && onCopy) {
+			const data = onCopy();
+			if (data) await copyRuns(data.runs, clipboardOptions);
+		}
+		if (isCtrlOrMeta && event.key === "x" && !event.shiftKey && onCut) {
+			const data = onCut();
+			if (data) await copyRuns(data.runs, clipboardOptions);
+		}
+	};
+	return {
+		handleCopy,
+		handleCut,
+		handlePaste,
+		handleKeyDown
+	};
+}
+var clipboard_default = {
+	copyRuns,
+	copyParagraphs,
+	readFromClipboard,
+	handlePasteEvent,
+	htmlToRuns,
+	cleanWordHtml,
+	isWordHtml,
+	isEditorHtml,
+	createClipboardHandlers
+};
+//#endregion
+export { CLIPBOARD_TYPES, INTERNAL_CLIPBOARD_TYPE, cleanWordHtml, copyParagraphs, copyRuns, createClipboardHandlers, clipboard_default as default, getClipboardImageFiles, handlePasteEvent, htmlToRuns, isEditorHtml, isWordHtml, paragraphsToClipboardContent, parseClipboardHtml, readFromClipboard, runsToClipboardContent, writeToClipboard };