@upstart.gg/vite-plugins 0.0.38 → 0.0.40

package/dist/vite-plugin-upstart-editor/runtime/text-editor.js

@@ -1,11 +1,30 @@
 import { sendToParent } from "./utils.js";
-import { getCurrentMode } from "./index.js";
-import { Editor } from "@tiptap/core";
+import { Editor, Extension, Node } from "@tiptap/core";
 import { BubbleMenu } from "@tiptap/extension-bubble-menu";
 import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 
 //#region src/vite-plugin-upstart-editor/runtime/text-editor.ts
+/**
+* Custom Document node for inline elements (e.g. <a>, <span>, headings).
+* Uses `inline*` content instead of the default `block+` to prevent
+* TipTap from wrapping text in <p> tags inside inline elements.
+*/
+const InlineDocument = Node.create({
+	name: "doc",
+	topNode: true,
+	content: "inline*"
+});
+/**
+* Remaps Enter to insert a <br> (hard break) instead of creating a new paragraph.
+* Used in inline-rich mode where block nodes are not allowed.
+*/
+const EnterHardBreak = Extension.create({
+	name: "enterHardBreak",
+	addKeyboardShortcuts() {
+		return { Enter: () => this.editor.commands.setHardBreak() };
+	}
+});
 const DEFAULT_OPTIONS = {
 	richTextElements: [
 		"p",
@@ -13,8 +32,7 @@ const DEFAULT_OPTIONS = {
 		"article",
 		"section"
 	],
-	plainTextElements: [
-		"button",
+	inlineRichTextElements: [
 		"a",
 		"span",
 		"h1",
@@ -22,35 +40,106 @@ const DEFAULT_OPTIONS = {
 		"h3",
 		"h4",
 		"h5",
-		"h6",
-		"label"
+		"h6"
 	],
+	plainTextElements: ["button", "label"],
 	bubbleMenu: true,
 	placeholder: "Start typing...",
 	autoSaveDelay: 1e3
 };
 const activeEditors = /* @__PURE__ */ new Map();
-const saveTimeouts = /* @__PURE__ */ new Map();
+let i18nSyncInProgress = false;
 const styleCache = /* @__PURE__ */ new WeakMap();
-let isInitialized = false;
+let resolvedOptions = DEFAULT_OPTIONS;
 let shortcutsRegistered = false;
+let domObserver = null;
+let reactivateTimer = null;
 /**
 * Initialize TipTap text editing for elements marked as editable.
+* Activation is deferred to avoid conflicting with React hydration.
 */
 function initTextEditor(options = {}) {
-	if (typeof window === "undefined") return;
-	if (isInitialized) return;
-	try {
-		const resolvedOptions = {
-			...DEFAULT_OPTIONS,
-			...options
+	if (typeof window === "undefined") {
+		console.warn("[Upstart Editor] Cannot initialize text editor: not running in a browser environment");
+		return;
+	}
+	resolvedOptions = {
+		...DEFAULT_OPTIONS,
+		...options
+	};
+	registerKeyboardShortcuts();
+	waitForHydration(() => {
+		injectEditorStyles();
+		startDomObserver();
+	});
+}
+function waitForHydration(callback) {
+	const STABILITY_MS = 200;
+	const onReady = () => {
+		let timer = null;
+		const settle = () => {
+			if (timer) clearTimeout(timer);
+			timer = window.setTimeout(() => {
+				observer.disconnect();
+				callback();
+			}, STABILITY_MS);
 		};
+		const observer = new MutationObserver(settle);
+		observer.observe(document.documentElement, {
+			childList: true,
+			subtree: true
+		});
+		settle();
+	};
+	if (document.readyState === "complete") onReady();
+	else window.addEventListener("load", onReady, { once: true });
+}
+/**
+* Inject CSS rules that visually hide original content when an editor is active.
+* This avoids moving DOM nodes (which breaks React hydration).
+*
+* - `font-size: 0` + `color: transparent` hides direct text nodes
+* - `> *:not(.ProseMirror)` hides child elements
+* - ProseMirror gets explicit inline styles to restore text rendering
+*/
+function injectEditorStyles() {
+	if (document.getElementById("upstart-editor-styles")) return;
+	const style = document.createElement("style");
+	style.id = "upstart-editor-styles";
+	style.textContent = [
+		"[data-upstart-editor-active] {",
+		"  cursor: text;",
+		"  transition: outline 100ms;",
+		"}",
+		"[data-upstart-editor-active]:hover {",
+		"  outline: 1px solid #7270c6;",
+		"  outline-offset: 4px;",
+		"}",
+		"[data-upstart-editor-active] .ProseMirror {",
+		"  outline: none !important;",
+		"  font-size: inherit !important;",
+		"  line-height: inherit !important;",
+		"  color: inherit !important;",
+		"  letter-spacing: inherit !important;",
+		"  font-weight: inherit !important;",
+		"  white-space: inherit !important;",
+		"}",
+		"[data-upstart-editor-active] .ProseMirror:focus {",
+		"  outline: none !important;",
+		"}"
+	].join("\n");
+	document.head.appendChild(style);
+}
+/**
+* Activate editors on all editable elements. Safe to call multiple times.
+*/
+function activateAllEditors() {
+	try {
+		cleanupOrphanedEditors();
 		document.querySelectorAll("[data-upstart-editable-text=\"true\"]").forEach((element) => setupEditableElement(element, resolvedOptions));
-		registerKeyboardShortcuts();
-		isInitialized = true;
-		console.log("[Upstart Editor] Text editor initialized");
+		console.log("[Upstart Editor] Text editors activated");
 	} catch (error) {
-		console.error("[Upstart Editor] Failed to initialize text editor:", error);
+		console.error("[Upstart Editor] Failed to activate text editors:", error);
 		sendToParent({
 			type: "editor-error",
 			error: error instanceof Error ? error.message : "Unknown error"
@@ -61,118 +150,190 @@ function initTextEditor(options = {}) {
 * Destroy all active editors.
 */
 function destroyAllActiveEditors() {
+	stopDomObserver();
 	for (const hash of activeEditors.keys()) destroyEditor(hash);
 }
 function setupEditableElement(element, options) {
 	const hash = getEditableHash(element);
-	if (!hash) return;
+	if (!hash || activeEditors.has(hash)) return;
 	cacheStyles(element);
-	element.style.transition = "outline 0.15s ease";
-	element.addEventListener("dblclick", (event) => {
-		if (getCurrentMode() !== "edit") return;
-		event.preventDefault();
-		event.stopPropagation();
-		if (activeEditors.has(hash)) return;
-		activateEditor(element, hash, options);
-	});
-	element.addEventListener("mouseenter", () => {
-		if (getCurrentMode() !== "edit") return;
-		if (!activeEditors.has(hash)) applyHoverStyles(element);
-	});
-	element.addEventListener("mouseleave", () => {
-		if (!activeEditors.has(hash)) restoreStyles(element);
-	});
+	activateEditor(element, hash, options);
 }
 function activateEditor(element, hash, options) {
-	const editor = shouldUseRichText(element, options) ? createRichTextEditor(element, hash, options) : createPlainTextEditor(element, hash, options);
+	const mode = getEditorMode(element, options);
+	let editor;
+	switch (mode) {
+		case "block-rich":
+			editor = createRichTextEditor(element, hash, options);
+			break;
+		case "inline-rich":
+			editor = createInlineRichTextEditor(element, hash, options);
+			break;
+		case "plain":
+			editor = createPlainTextEditor(element, hash, options);
+			break;
+	}
+	element.dataset.upstartEditorActive = "true";
 	applyActiveStyles(element);
 	activeEditors.set(hash, {
 		editor,
 		element,
-		hash
+		hash,
+		mode
 	});
 }
 function createPlainTextEditor(element, hash, options) {
+	const content = element.textContent ?? "";
+	let hasChanged = false;
 	return new Editor({
 		element,
-		extensions: [StarterKit.configure({
-			heading: false,
-			bold: false,
-			italic: false,
-			strike: false,
-			blockquote: false,
-			bulletList: false,
-			orderedList: false,
-			listItem: false,
-			codeBlock: false,
-			horizontalRule: false
-		}), Placeholder.configure({ placeholder: "Click to edit..." })],
-		content: element.textContent ?? "",
-		editorProps: { attributes: {
-			class: "upstart-editor-active",
-			style: "outline: 2px solid #3b82f6; outline-offset: 2px;"
-		} },
-		onUpdate: ({ editor }) => {
-			debouncedSave(hash, editor.getText(), options.autoSaveDelay);
-		},
-		onBlur: ({ editor }) => {
-			saveText(hash, editor.getText());
-			destroyEditor(hash);
+		extensions: [
+			InlineDocument,
+			StarterKit.configure({
+				document: false,
+				heading: false,
+				bold: false,
+				italic: false,
+				strike: false,
+				blockquote: false,
+				bulletList: false,
+				orderedList: false,
+				listItem: false,
+				codeBlock: false,
+				horizontalRule: false
+			}),
+			Placeholder.configure({ placeholder: "Click to edit..." })
+		],
+		content,
+		editorProps: { attributes: { class: "upstart-editor-active" } },
+		onUpdate: ({ editor: e }) => {
+			if (i18nSyncInProgress) return;
+			hasChanged = true;
+			syncI18nSiblings(hash);
 		},
-		onCreate: ({ editor }) => {
-			editor.commands.focus("end");
+		onBlur: ({ editor: e }) => {
+			if (!hasChanged) return;
+			hasChanged = false;
+			saveText(hash, e.getText());
 		}
 	});
 }
 function createRichTextEditor(element, hash, options) {
+	const content = element.innerHTML;
+	element.innerHTML = "";
+	let hasChanged = false;
 	const bubbleMenuElement = createBubbleMenuElement();
 	const extensions = [StarterKit, Placeholder.configure({ placeholder: options.placeholder })];
 	if (options.bubbleMenu) extensions.push(BubbleMenu.configure({ element: bubbleMenuElement }));
-	return new Editor({
+	const editor = new Editor({
 		element,
 		extensions,
-		content: element.innerHTML,
-		editorProps: { attributes: {
-			class: "upstart-editor-active",
-			style: "outline: 2px solid #3b82f6; outline-offset: 2px;"
-		} },
-		onUpdate: ({ editor: updatedEditor }) => {
-			debouncedSave(hash, updatedEditor.getHTML(), options.autoSaveDelay);
+		content,
+		editorProps: { attributes: { class: "upstart-editor-active" } },
+		onUpdate: ({ editor: e }) => {
+			if (i18nSyncInProgress) return;
+			hasChanged = true;
+			syncI18nSiblings(hash);
 		},
-		onBlur: ({ editor: updatedEditor }) => {
-			saveText(hash, updatedEditor.getHTML());
-			destroyEditor(hash);
+		onBlur: ({ editor: e }) => {
+			if (!hasChanged) return;
+			hasChanged = false;
+			saveText(hash, e.getHTML());
+		}
+	});
+	if (options.bubbleMenu) wireBubbleMenu(bubbleMenuElement, editor);
+	return editor;
+}
+function createInlineRichTextEditor(element, hash, options) {
+	const content = element.innerHTML;
+	element.innerHTML = "";
+	let hasChanged = false;
+	const bubbleMenuElement = createBubbleMenuElement("inline");
+	const extensions = [
+		InlineDocument,
+		EnterHardBreak,
+		StarterKit.configure({
+			document: false,
+			heading: false,
+			blockquote: false,
+			bulletList: false,
+			orderedList: false,
+			listItem: false,
+			codeBlock: false,
+			horizontalRule: false
+		}),
+		Placeholder.configure({ placeholder: "Click to edit..." })
+	];
+	if (options.bubbleMenu) extensions.push(BubbleMenu.configure({ element: bubbleMenuElement }));
+	const editor = new Editor({
+		element,
+		extensions,
+		content,
+		editorProps: { attributes: { class: "upstart-editor-active" } },
+		onUpdate: ({ editor: e }) => {
+			if (i18nSyncInProgress) return;
+			hasChanged = true;
+			syncI18nSiblings(hash);
 		},
-		onCreate: ({ editor: createdEditor }) => {
-			if (options.bubbleMenu) wireBubbleMenu(bubbleMenuElement, createdEditor);
-			createdEditor.commands.focus("end");
+		onBlur: ({ editor: e }) => {
+			if (!hasChanged) return;
+			hasChanged = false;
+			saveText(hash, e.getHTML());
 		}
 	});
+	if (options.bubbleMenu) wireBubbleMenu(bubbleMenuElement, editor);
+	return editor;
 }
-function shouldUseRichText(element, options) {
+function getEditorMode(element, options) {
 	const tagName = element.tagName.toLowerCase();
-	if (options.plainTextElements.includes(tagName)) return false;
-	if (options.richTextElements.includes(tagName)) return true;
-	return true;
+	if (options.plainTextElements.includes(tagName)) return "plain";
+	if (options.inlineRichTextElements.includes(tagName)) return "inline-rich";
+	if (options.richTextElements.includes(tagName)) return "block-rich";
+	return "block-rich";
 }
-function debouncedSave(hash, content, delay) {
-	const existingTimeout = saveTimeouts.get(hash);
-	if (existingTimeout) clearTimeout(existingTimeout);
-	const timeoutId = window.setTimeout(() => {
-		sendToParent({
-			type: "text-update",
-			hash,
-			newText: content
-		});
-	}, delay);
-	saveTimeouts.set(hash, timeoutId);
+function syncI18nSiblings(sourceHash) {
+	console.log("[Upstart Editor] Syncing i18n siblings for", sourceHash);
+	const instance = activeEditors.get(sourceHash);
+	if (!instance) {
+		console.warn("[Upstart Editor] No editor instance found for hash:", sourceHash);
+		return;
+	}
+	const i18nKey = instance.element.dataset.upstartI18n;
+	if (!i18nKey) {
+		console.warn("[Upstart Editor] No sibling i18n key found for element:", instance.element);
+		return;
+	}
+	const siblings = document.querySelectorAll(`[data-upstart-i18n="${CSS.escape(i18nKey)}"]`);
+	console.log(`[Upstart Editor] Found ${siblings.length} sibling(s) with i18n key "${i18nKey}"`);
+	const plainContent = instance.editor.getText();
+	i18nSyncInProgress = true;
+	try {
+		for (const sibling of siblings) {
+			if (sibling === instance.element) continue;
+			const siblingHash = sibling.dataset.upstartHash;
+			const siblingInstance = siblingHash ? activeEditors.get(siblingHash) : null;
+			if (siblingInstance) {
+				console.log(`[Upstart Editor] Updating sibling editor (hash: ${siblingHash}) with new content`, siblingInstance);
+				sibling.innerText = plainContent;
+				siblingInstance.editor.chain().selectAll().insertContent(plainContent).run();
+			} else sibling.textContent = plainContent;
+		}
+	} finally {
+		i18nSyncInProgress = false;
+	}
 }
 function saveText(hash, newText) {
 	try {
+		const [namespace, key] = (activeEditors.get(hash)?.element.dataset ?? {}).upstartI18n?.split(":") ?? [];
 		sendToParent({
-			type: "text-save",
-			hash,
-			newText
+			type: "text-edit",
+			payload: {
+				action: "editText",
+				content: newText,
+				namespace,
+				key,
+				language: document.documentElement.lang
+			}
 		});
 		console.log("[Upstart Editor] Text save message sent:", hash);
 	} catch (error) {
@@ -186,13 +347,66 @@ function saveText(hash, newText) {
 function destroyEditor(hash) {
 	const instance = activeEditors.get(hash);
 	if (!instance) return;
+	const finalContent = instance.mode === "plain" ? instance.editor.getText() : instance.editor.getHTML();
 	instance.editor.destroy();
+	const editorDom = instance.element.querySelector(".ProseMirror");
+	if (editorDom) editorDom.remove();
+	delete instance.element.dataset.upstartEditorActive;
+	if (instance.mode === "plain") instance.element.textContent = finalContent;
+	else instance.element.innerHTML = finalContent;
 	restoreStyles(instance.element);
 	activeEditors.delete(hash);
-	const existingTimeout = saveTimeouts.get(hash);
-	if (existingTimeout) {
-		clearTimeout(existingTimeout);
-		saveTimeouts.delete(hash);
+}
+function startDomObserver() {
+	if (domObserver) return;
+	domObserver = new MutationObserver((mutations) => {
+		let needsReactivation = false;
+		for (const mutation of mutations) {
+			if (mutation.type !== "childList") continue;
+			for (const node of mutation.addedNodes) if (node instanceof HTMLElement && (node.matches?.("[data-upstart-editable-text=\"true\"]") || node.querySelector?.("[data-upstart-editable-text=\"true\"]"))) {
+				needsReactivation = true;
+				break;
+			}
+			if (!needsReactivation) {
+				for (const node of mutation.removedNodes) if (node instanceof HTMLElement && (node.matches?.("[data-upstart-editable-text=\"true\"]") || node.querySelector?.("[data-upstart-editable-text=\"true\"]"))) {
+					needsReactivation = true;
+					break;
+				}
+			}
+			if (needsReactivation) break;
+		}
+		if (needsReactivation) scheduleReactivation();
+	});
+	domObserver.observe(document.body, {
+		childList: true,
+		subtree: true
+	});
+}
+function stopDomObserver() {
+	if (domObserver) {
+		domObserver.disconnect();
+		domObserver = null;
+	}
+	if (reactivateTimer) {
+		clearTimeout(reactivateTimer);
+		reactivateTimer = null;
+	}
+}
+function scheduleReactivation() {
+	if (reactivateTimer) clearTimeout(reactivateTimer);
+	reactivateTimer = window.setTimeout(() => {
+		reactivateTimer = null;
+		activateAllEditors();
+	}, 50);
+}
+/**
+* Remove editors whose host element has been detached from the document
+* (e.g. React replaced the subtree during a re-render).
+*/
+function cleanupOrphanedEditors() {
+	for (const [hash, instance] of activeEditors) if (!document.contains(instance.element)) {
+		instance.editor.destroy();
+		activeEditors.delete(hash);
 	}
 }
 function registerKeyboardShortcuts() {
@@ -220,17 +434,8 @@ function cacheStyles(element) {
 		transition: element.style.transition || ""
 	});
 }
-function applyHoverStyles(element) {
-	cacheStyles(element);
-	element.style.outline = "1px dashed #3b82f6";
-	element.style.outlineOffset = "2px";
-	element.style.cursor = "text";
-}
 function applyActiveStyles(element) {
 	cacheStyles(element);
-	element.style.outline = "2px solid #3b82f6";
-	element.style.outlineOffset = "2px";
-	element.style.cursor = "text";
 }
 function restoreStyles(element) {
 	const cached = styleCache.get(element);
@@ -246,31 +451,82 @@ function restoreStyles(element) {
 	element.style.cursor = cached.cursor;
 	element.style.transition = cached.transition;
 }
-function createBubbleMenuElement() {
-	const menu = document.createElement("div");
-	menu.className = "upstart-editor-bubble-menu";
-	menu.style.cssText = "display: flex; gap: 6px; padding: 6px 8px; background: #111827; color: #ffffff; border-radius: 6px; font-size: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.2);";
-	for (const { label, command } of [
+const BUBBLE_MENU_GROUPS = [
+	[
+		{
+			command: "bold",
+			icon: "format-bold",
+			title: "Bold"
+		},
 		{
-			label: "B",
-			command: "bold"
+			command: "italic",
+			icon: "format-italic",
+			title: "Italic"
 		},
 		{
-			label: "I",
-			command: "italic"
+			command: "strike",
+			icon: "format-strikethrough",
+			title: "Strikethrough"
 		},
 		{
-			label: "S",
-			command: "strike"
+			command: "code",
+			icon: "code-tags",
+			title: "Inline Code"
 		}
-	]) {
-		const button = document.createElement("button");
-		button.type = "button";
-		button.textContent = label;
-		button.dataset.command = command;
-		button.style.cssText = "background: transparent; border: none; color: inherit; cursor: pointer; font-weight: 600;";
-		menu.appendChild(button);
-	}
+	],
+	[{
+		command: "heading",
+		icon: "format-header-1",
+		title: "Heading"
+	}, {
+		command: "blockquote",
+		icon: "format-quote-close",
+		title: "Blockquote"
+	}],
+	[{
+		command: "bulletList",
+		icon: "format-list-bulleted",
+		title: "Bullet List"
+	}, {
+		command: "orderedList",
+		icon: "format-list-numbered",
+		title: "Ordered List"
+	}]
+];
+function getIconifyUrl(iconName) {
+	return `https://api.iconify.design/mdi/${iconName}.svg?height=none&color=%23fff`;
+}
+function createBubbleMenuElement(mode = "block") {
+	const groups = mode === "inline" ? [BUBBLE_MENU_GROUPS[0]] : BUBBLE_MENU_GROUPS;
+	const menu = document.createElement("div");
+	menu.className = "upstart-editor-bubble-menu";
+	menu.style.cssText = "display: flex; align-items: center; gap: 2px; padding: 4px; background: #111827; color: #ffffff; border-radius: 8px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);";
+	groups.forEach((group, groupIndex) => {
+		if (groupIndex > 0) {
+			const separator = document.createElement("div");
+			separator.style.cssText = "width: 1px; height: 16px; background: rgba(255,255,255,0.2); margin: 0 4px; flex-shrink: 0;";
+			menu.appendChild(separator);
+		}
+		for (const { command, icon, title } of group) {
+			const button = document.createElement("button");
+			button.type = "button";
+			button.dataset.command = command;
+			button.title = title;
+			button.style.cssText = "background: transparent; border: none; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 4px; border-radius: 4px; transition: background 0.15s ease;";
+			const img = document.createElement("img");
+			img.src = getIconifyUrl(icon);
+			img.alt = title;
+			img.style.cssText = "width: 18px; height: 18px; display: block; pointer-events: none;";
+			button.appendChild(img);
+			button.addEventListener("mouseenter", () => {
+				if (!button.dataset.active) button.style.background = "rgba(255,255,255,0.12)";
+			});
+			button.addEventListener("mouseleave", () => {
+				button.style.background = button.dataset.active ? "rgba(255,255,255,0.2)" : "transparent";
+			});
+			menu.appendChild(button);
+		}
+	});
 	return menu;
 }
 function wireBubbleMenu(menu, editor) {
@@ -281,12 +537,50 @@ function wireBubbleMenu(menu, editor) {
 		const command = event.target?.dataset.command;
 		if (!command) return;
 		const chain = editor.chain().focus();
-		if (command === "bold") chain.toggleBold().run();
-		if (command === "italic") chain.toggleItalic().run();
-		if (command === "strike") chain.toggleStrike().run();
+		switch (command) {
+			case "bold":
+				chain.toggleBold().run();
+				break;
+			case "italic":
+				chain.toggleItalic().run();
+				break;
+			case "strike":
+				chain.toggleStrike().run();
+				break;
+			case "code":
+				chain.toggleCode().run();
+				break;
+			case "heading":
+				chain.toggleHeading({ level: 1 }).run();
+				break;
+			case "blockquote":
+				chain.toggleBlockquote().run();
+				break;
+			case "bulletList":
+				chain.toggleBulletList().run();
+				break;
+			case "orderedList":
+				chain.toggleOrderedList().run();
+				break;
+		}
 	});
+	const updateActiveStates = () => {
+		const buttons = menu.querySelectorAll("button[data-command]");
+		for (const button of buttons) {
+			const command = button.dataset.command;
+			if (command === "heading" ? editor.isActive("heading", { level: 1 }) : editor.isActive(command)) {
+				button.dataset.active = "true";
+				button.style.background = "rgba(255,255,255,0.2)";
+			} else {
+				delete button.dataset.active;
+				button.style.background = "transparent";
+			}
+		}
+	};
+	editor.on("transaction", updateActiveStates);
+	updateActiveStates();
 }
 
 //#endregion
-export { destroyAllActiveEditors, initTextEditor };
+export { activateAllEditors, destroyAllActiveEditors, initTextEditor };
 //# sourceMappingURL=text-editor.js.map