sibling after it (so user can click below) const ensureTrailingParagraph = (root) => { if (!root) return false; let changed = false; root.querySelectorAll('pre').forEach(pre => { const next = pre.nextElementSibling; if (!next || next.tagName !== 'P') { const p = document.createElement('p'); p.appendChild(document.createElement('br')); pre.parentNode.insertBefore(p, pre.nextSibling); changed = true; } }); return changed; }; // Set HTML once when entering edit mode / item changes React.useEffect(() => { if (!ref.current) return; if (ref.current.innerHTML !== (text || '')) { ref.current.innerHTML = text || ''; } // Always guarantee a free
after every code block if (ensureTrailingParagraph(ref.current) && editing) { onUpdate({ content: { es: ref.current.innerHTML, en: ref.current.innerHTML } }); } // Syntax highlight code blocks (only when NOT editing, to avoid cursor jumps) if (!editing && window.hljs) { ref.current.querySelectorAll('pre code').forEach(el => { if (!el.textContent.trim()) return; // skip empty code blocks to prevent highlight.js warning try { if (!el.dataset.highlighted) { el.textContent = el.textContent; // Strip existing HTML spans to prevent warnings window.hljs.highlightElement(el); } } catch {} }); } // eslint-disable-next-line }, [editing, item.id, text]); // Re-highlight on blur (when user finishes editing a code block) const reHighlight = () => { if (!ref.current || !window.hljs) return; ref.current.querySelectorAll('pre code').forEach(el => { if (!el.textContent.trim()) return; try { delete el.dataset.highlighted; el.className = el.className.replace(/\bhljs\b[^\s]*/g, '').trim(); el.textContent = el.textContent; // Strip existing HTML spans to prevent warnings window.hljs.highlightElement(el); } catch {} }); }; const onInput = () => { if (!ref.current) return; // Always keep a free paragraph after any
so the user can click below
ensureTrailingParagraph(ref.current);
onUpdate({ content: { es: ref.current.innerHTML, en: ref.current.innerHTML } });
};
// Live highlight code blocks while preserving caret
const liveHighlight = () => {
if (!ref.current || !window.hljs) return;
const sel = window.getSelection();
let caretOffset = null;
let activeCode = null;
if (sel && sel.rangeCount) {
let node = sel.anchorNode;
while (node && node !== ref.current && !(node.tagName === 'CODE' && node.parentNode?.tagName === 'PRE')) {
node = node.parentNode;
}
if (node && node.tagName === 'CODE') {
activeCode = node;
// compute caret offset as plain text position
const range = sel.getRangeAt(0);
const pre = range.cloneRange();
pre.selectNodeContents(node);
pre.setEnd(range.endContainer, range.endOffset);
caretOffset = pre.toString().length;
}
}
ref.current.querySelectorAll('pre code').forEach(el => {
if (!el.textContent.trim()) return;
try {
delete el.dataset.highlighted;
el.className = el.className.replace(/\bhljs\b[^\s]*|\blanguage-[^\s]+/g, '').trim();
el.textContent = el.textContent; // Strip existing HTML spans to prevent warnings
window.hljs.highlightElement(el);
} catch {}
});
if (activeCode && caretOffset != null) {
// restore caret by walking text nodes
const walker = document.createTreeWalker(activeCode, NodeFilter.SHOW_TEXT);
let total = 0, target = null, targetOffset = 0;
let n;
while ((n = walker.nextNode())) {
const len = n.nodeValue.length;
if (total + len >= caretOffset) {
target = n; targetOffset = caretOffset - total; break;
}
total += len;
}
if (target) {
const range = document.createRange();
range.setStart(target, Math.min(targetOffset, target.nodeValue.length));
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
};
// Throttle highlighting to avoid breaking typing flow
const highlightTimer = React.useRef(null);
const scheduleHighlight = () => {
if (highlightTimer.current) clearTimeout(highlightTimer.current);
highlightTimer.current = setTimeout(liveHighlight, 350);
};
React.useEffect(() => {
if (!ref.current) return;
// Mientras se arrastra/redimensiona no recalculamos: antes este efecto
// revertía la altura en cada frame y por eso la nota "solo se estiraba
// horizontalmente".
if (document.body.classList.contains('odi-busy')) return;
const contentEl = ref.current;
const origHeight = contentEl.style.height;
contentEl.style.height = 'auto';
const naturalHeight = contentEl.scrollHeight;
contentEl.style.height = origHeight;
const totalHeight = Math.max(80, Math.round(naturalHeight + 3));
// Con altura fijada a mano respetamos ese tamaño, pero SÍ crecemos si el
// texto ya no cabe (p. ej. al subir el tamaño con los botones A+). Nunca
// encogemos, para no deshacer la altura elegida.
if (item.manualH) {
if (totalHeight > (item.h || 0)) onUpdate({ h: totalHeight });
return;
}
if (Math.abs((item.h || 0) - totalHeight) > 3) {
onUpdate({ h: totalHeight });
}
// eslint-disable-next-line
}, [item.content, editing, item.h, lang, item.manualH, item.textScale]);
if (editing) {
return (
{ onInput(); scheduleHighlight(); }}
onBlur={reHighlight}
onClick={(e)=>e.stopPropagation()}
onMouseDown={(e)=>e.stopPropagation()}
onKeyDown={(e)=>{
if (e.key === 'Tab') {
const sel = window.getSelection();
if (sel && sel.rangeCount) {
let node = sel.anchorNode;
while (node && node !== ref.current && node.tagName !== 'PRE') {
node = node.parentNode;
}
if (node && node.tagName === 'PRE') {
e.preventDefault();
const range = sel.getRangeAt(0);
if (!range.collapsed) {
// Selection exists: indent or unindent all selected lines
const selectedText = range.toString();
let processedText = '';
if (e.shiftKey) {
// Shift+Tab: remove up to 4 spaces from start of each line
processedText = selectedText.split('\n').map(line => line.replace(/^ {1,4}/, '')).join('\n');
} else {
// Tab: add 4 spaces to start of each line
processedText = selectedText.split('\n').map(line => ' ' + line).join('\n');
}
range.deleteContents();
const textNode = document.createTextNode(processedText);
range.insertNode(textNode);
// Select the new text
const newRange = document.createRange();
newRange.selectNodeContents(textNode);
sel.removeAllRanges();
sel.addRange(newRange);
} else {
// No selection (collapsed cursor)
if (e.shiftKey) {
// Shift+Tab: unindent (remove up to 4 spaces before or after the cursor)
const startNode = range.startContainer;
const startOffset = range.startOffset;
if (startNode.nodeType === Node.TEXT_NODE) {
const textBefore = startNode.textContent.substring(0, startOffset);
const matchBefore = textBefore.match(/ {1,4}$/);
if (matchBefore) {
const numSpaces = matchBefore[0].length;
const newRange = document.createRange();
newRange.setStart(startNode, startOffset - numSpaces);
newRange.setEnd(startNode, startOffset);
sel.removeAllRanges();
sel.addRange(newRange);
newRange.deleteContents();
} else {
const textAfter = startNode.textContent.substring(startOffset);
const matchAfter = textAfter.match(/^ {1,4}/);
if (matchAfter) {
const numSpaces = matchAfter[0].length;
const newRange = document.createRange();
newRange.setStart(startNode, startOffset);
newRange.setEnd(startNode, startOffset + numSpaces);
sel.removeAllRanges();
sel.addRange(newRange);
newRange.deleteContents();
}
}
}
} else {
// Tab: insert 4 spaces at cursor
const spaces = ' ';
range.deleteContents();
const textNode = document.createTextNode(spaces);
range.insertNode(textNode);
const r2 = document.createRange();
r2.setStartAfter(textNode);
r2.collapse(true);
sel.removeAllRanges();
sel.addRange(r2);
}
}
ref.current.dispatchEvent(new Event('input', { bubbles: true }));
onInput();
scheduleHighlight();
return;
}
}
}
if (e.key === 'Escape') { e.target.blur(); return; }
// Exit blockquote/heading/pre on backspace when empty
if (e.key === 'Backspace') {
const sel = window.getSelection();
if (sel && sel.isCollapsed && sel.anchorOffset === 0) {
let node = sel.anchorNode;
let liNode = sel.anchorNode;
while (liNode && liNode !== ref.current && liNode.tagName !== 'LI') {
liNode = liNode.parentNode;
}
if (liNode && liNode.tagName === 'LI') {
e.preventDefault();
const list = liNode.parentNode;
const p = document.createElement('p');
p.innerHTML = liNode.innerHTML || '
';
if (list.children.length === 1) {
list.parentNode.replaceChild(p, list);
} else {
list.parentNode.insertBefore(p, list.nextSibling);
liNode.remove();
}
const range = document.createRange();
range.selectNodeContents(p);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
ref.current.dispatchEvent(new Event('input', { bubbles: true }));
return;
}
while (node && node !== ref.current && !['BLOCKQUOTE','H1','H2','PRE'].includes(node.tagName)) {
node = node.parentNode;
}
if (node && node !== ref.current) {
// If the block has no content, remove the whole block
if (!node.textContent.trim()) {
e.preventDefault();
const p = document.createElement('p');
p.appendChild(document.createElement('br'));
node.parentNode.replaceChild(p, node);
const range = document.createRange();
range.setStart(p, 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
ref.current.dispatchEvent(new Event('input', { bubbles: true }));
} else if (node.tagName !== 'PRE') {
e.preventDefault();
document.execCommand('formatBlock', false, 'P');
ref.current.dispatchEvent(new Event('input', { bubbles: true }));
}
}
}
}
// Enter inside PRE: always insert a newline of code (intuitive).
// To exit the block, click the free paragraph below or press ArrowDown.
if (e.key === 'Enter') {
const sel = window.getSelection();
if (sel && sel.isCollapsed) {
let node = sel.anchorNode;
while (node && node !== ref.current && node.tagName !== 'PRE') {
node = node.parentNode;
}
if (node && node.tagName === 'PRE') {
e.preventDefault();
const range = sel.getRangeAt(0);
range.deleteContents();
// Detect if caret is at the end of the code block. If so we need
// to insert TWO newlines (and place caret between them) because
// a trailing single \n is invisible in pre/contenteditable.
const probe = document.createRange();
probe.selectNodeContents(node);
probe.setStart(range.endContainer, range.endOffset);
const atEnd = probe.toString().replace(/\s+$/, '') === '';
const nl = document.createTextNode('\n');
range.insertNode(nl);
if (atEnd) {
const trail = document.createTextNode('\n');
nl.parentNode.insertBefore(trail, nl.nextSibling);
}
const r2 = document.createRange();
r2.setStartAfter(nl);
r2.collapse(true);
sel.removeAllRanges();
sel.addRange(r2);
ref.current.dispatchEvent(new Event('input', { bubbles: true }));
return;
}
// Enter on empty blockquote/heading line exits it
if (!e.shiftKey) {
let bnode = sel.anchorNode;
while (bnode && bnode !== ref.current && !['BLOCKQUOTE','H1','H2'].includes(bnode.tagName)) {
bnode = bnode.parentNode;
}
if (bnode && bnode !== ref.current && (bnode.textContent || '').trim() === '') {
e.preventDefault();
document.execCommand('formatBlock', false, 'P');
ref.current.dispatchEvent(new Event('input', { bubbles: true }));
}
}
}
}
// Arrow Down at end of pre → exit
if (e.key === 'ArrowDown') {
const sel = window.getSelection();
if (sel && sel.isCollapsed) {
let node = sel.anchorNode;
while (node && node !== ref.current && node.tagName !== 'PRE') {
node = node.parentNode;
}
if (node && node.tagName === 'PRE' && !node.nextSibling) {
e.preventDefault();
const p = document.createElement('p');
p.appendChild(document.createElement('br'));
node.parentNode.appendChild(p);
const range = document.createRange();
range.setStart(p, 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
ref.current.dispatchEvent(new Event('input', { bubbles: true }));
}
}
}
}}
style={{ color: textColor }}
/>
);
}
// Read-only render — HTML content with syntax highlight
return (
);
}
// ──────────────── CAPTION ("leyenda" — shared rich text) ────────────────
// A small contentEditable used by image/link/board/comment/calendar/audio nodes.
// Stores HTML in item.caption[lang] and reports focus/blur so the reduced
// caption format sidebar (Color/H1/B/I/S/U) can show next to it.
function NodeCaption({ item, lang, onUpdate, className, placeholder, style, autoGrow }) {
const ref = React.useRef(null);
const focusedRef = React.useRef(false);
const html = (item.caption && item.caption[lang]) || '';
// Keep current height / latest onUpdate in refs so the ResizeObserver isn't stale
const itemHRef = React.useRef(item.h); itemHRef.current = item.h;
const onUpdateRef = React.useRef(onUpdate); onUpdateRef.current = onUpdate;
React.useEffect(() => {
if (!ref.current) return;
if (!focusedRef.current && ref.current.innerHTML !== html) {
ref.current.innerHTML = html;
}
}, [html, lang]);
// Grow / shrink the NODE so the caption expands downward instead of being squashed.
React.useEffect(() => {
if (!autoGrow || !ref.current || typeof ResizeObserver === 'undefined') return;
const el = ref.current;
let last = null;
const ro = new ResizeObserver(() => {
const h = el.offsetHeight;
if (last == null) { last = h; return; } // ignore the initial measurement
const delta = h - last;
if (Math.abs(delta) >= 1) {
last = h;
onUpdateRef.current({ h: Math.max(40, Math.round((itemHRef.current || 0) + delta)) });
}
});
ro.observe(el);
return () => ro.disconnect();
}, [autoGrow]);
const commit = () => {
if (!ref.current) return;
onUpdate({ caption: { es: ref.current.innerHTML, en: ref.current.innerHTML } });
};
return (
e.stopPropagation()}
onMouseDown={(e)=>e.stopPropagation()}
onDoubleClick={(e)=>e.stopPropagation()}
onFocus={()=>{ focusedRef.current = true; if (window.__odiCaptionFocus) window.__odiCaptionFocus(item.id); }}
onBlur={()=>{ focusedRef.current = false; commit(); if (window.__odiCaptionBlur) window.__odiCaptionBlur(item.id); }}
onKeyDown={(e)=>{ if (e.key === 'Escape') { e.preventDefault(); e.target.blur(); } }}
/>
);
}
// ──────────────── IMAGE ────────────────
function ImageItem({ item, lang, onUpdate, callbacks }) {
const cb = callbacks || {};
const fileRef = React.useRef(null);
const hasImage = !!item.src;
const bg = window.nodeBg(item);
const [naturalRatio, setNaturalRatio] = React.useState(null);
const onUpdateRef = React.useRef(onUpdate);
React.useEffect(() => { onUpdateRef.current = onUpdate; }, [onUpdate]);
const itemWRef = React.useRef(item.w);
React.useEffect(() => { itemWRef.current = item.w; }, [item.w]);
const loadFile = (file) => {
if (!file || !file.type.startsWith('image/')) return false;
const reader = new FileReader();
reader.onload = () => {
const src = reader.result;
const img = new Image();
const rutaOrigen = window.rutaDeArchivo ? window.rutaDeArchivo(file) : null;
img.onload = () => {
const ratio = img.naturalWidth / img.naturalHeight;
setNaturalRatio(ratio);
const w = itemWRef.current || 260;
onUpdateRef.current({ src, w, h: Math.max(60, Math.round(w / ratio)), naturalRatio: ratio, rutaOrigen });
};
img.onerror = () => onUpdateRef.current({ src, rutaOrigen });
img.src = src;
};
reader.readAsDataURL(file);
return true;
};
const onPick = (e) => {
const f = e.target.files && e.target.files[0];
if (!f) return;
loadFile(f);
e.target.value = '';
};
React.useEffect(() => {
if (item._triggerImagePick) {
fileRef.current?.click();
onUpdate({ _triggerImagePick: false });
}
}, [item._triggerImagePick]);
const crop = item.crop || { x: 0, y: 0, w: 100, h: 100 };
const isCropping = cb.croppingId === item.id;
const startCropDrag = (e, handle) => {
e.stopPropagation();
e.preventDefault();
const startX = e.clientX;
const startY = e.clientY;
const imgFrame = e.currentTarget.parentElement;
if (!imgFrame) return;
const rect = imgFrame.getBoundingClientRect();
const initialCrop = { ...crop };
const onMove = (ev) => {
const dx = ev.clientX - startX;
const dy = ev.clientY - startY;
const dpX = (dx / rect.width) * 100;
const dpY = (dy / rect.height) * 100;
let newX = initialCrop.x;
let newY = initialCrop.y;
let newW = initialCrop.w;
let newH = initialCrop.h;
if (handle === 'tl') {
newX = Math.max(0, Math.min(initialCrop.x + initialCrop.w - 10, initialCrop.x + dpX));
newW = initialCrop.x + initialCrop.w - newX;
newY = Math.max(0, Math.min(initialCrop.y + initialCrop.h - 10, initialCrop.y + dpY));
newH = initialCrop.y + initialCrop.h - newY;
} else if (handle === 'tr') {
newW = Math.max(10, Math.min(100 - initialCrop.x, initialCrop.w + dpX));
newY = Math.max(0, Math.min(initialCrop.y + initialCrop.h - 10, initialCrop.y + dpY));
newH = initialCrop.y + initialCrop.h - newY;
} else if (handle === 'bl') {
newX = Math.max(0, Math.min(initialCrop.x + initialCrop.w - 10, initialCrop.x + dpX));
newW = initialCrop.x + initialCrop.w - newX;
newH = Math.max(10, Math.min(100 - initialCrop.y, initialCrop.h + dpY));
} else if (handle === 'br') {
newW = Math.max(10, Math.min(100 - initialCrop.x, initialCrop.w + dpX));
newH = Math.max(10, Math.min(100 - initialCrop.y, initialCrop.h + dpY));
} else if (handle === 'move') {
// Arrastrar el área completa de recorte sin cambiar su tamaño
newX = Math.max(0, Math.min(100 - initialCrop.w, initialCrop.x + dpX));
newY = Math.max(0, Math.min(100 - initialCrop.h, initialCrop.y + dpY));
}
onUpdate({
crop: {
x: parseFloat(newX.toFixed(2)),
y: parseFloat(newY.toFixed(2)),
w: parseFloat(newW.toFixed(2)),
h: parseFloat(newH.toFixed(2))
}
});
};
const onUp = () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseup', onUp);
};
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseup', onUp);
};
// ── La imagen llena su caja, aunque eso la deforme ──
//
// Antes, si la caja no tenía la proporción de la imagen, la imagen se quedaba
// con la suya, centrada, y dejaba bandas vacías: estirabas una foto cuadrada
// hasta hacerla alargada y lo único que crecía era el hueco alrededor. No
// había forma de deformarla aposta.
//
// Ahora la imagen ocupa la caja entera: estirarla la estira. Para devolverle
// su proporción está el botón "Ajustar" de la barra lateral, que ciñe la caja
// a la forma real de la imagen (recortada, si lo está).
//
// Las imágenes que se ponen desde la aplicación nacen ya con la caja a su
// proporción, así que a casi ninguna de las que ya existen les cambia nada:
// solo a las que alguien había estirado, que son justo las que tenían hueco.
const frameW = '100%';
const frameH = '100%';
const frameLeft = '0px';
const frameTop = '0px';
return (
{hasImage ? (
{ e.stopPropagation(); if (!isCropping) fileRef.current?.click(); }}
>
})
{
const img = e.currentTarget;
if (img.naturalWidth && img.naturalHeight) {
const ratio = img.naturalWidth / img.naturalHeight;
setNaturalRatio(ratio);
if (item.naturalRatio !== ratio) {
onUpdate({ naturalRatio: ratio });
}
}
}}
style={{
position: 'absolute',
width: isCropping ? '100%' : `${(100 / crop.w) * 100}%`,
height: isCropping ? '100%' : `${(100 / crop.h) * 100}%`,
left: isCropping ? 0 : `${(-crop.x / crop.w) * 100}%`,
top: isCropping ? 0 : `${(-crop.y / crop.h) * 100}%`,
objectFit: 'fill',
pointerEvents: 'none',
transform: `${item.flipH ? 'scaleX(-1) ' : ''}${item.flipV ? 'scaleY(-1)' : ''}`.trim() || undefined
}}
/>
{isCropping && (
<>
{/* Capas de mascara blanca semitransparente */}
{/* Rectángulo punteado del área visible — arrastrable para mover
el recorte completo sin cambiar su tamaño */}
startCropDrag(e, 'move')}
title={window.t('Arrastra para mover el recorte', 'Drag to move the crop area')}
style={{
position: 'absolute',
left: `${crop.x}%`,
top: `${crop.y}%`,
width: `${crop.w}%`,
height: `${crop.h}%`,
border: '1.5px dashed var(--olive, #6A8546)',
boxSizing: 'border-box',
cursor: 'move',
pointerEvents: 'auto',
zIndex: 14
}}
/>
{/* Tiradores de recorte interactivos */}
startCropDrag(e, 'tl')}
style={{
position: 'absolute',
left: `calc(${crop.x}% - 6px)`,
top: `calc(${crop.y}% - 6px)`,
width: '12px',
height: '12px',
background: '#FFFFFF',
border: '2px solid var(--olive, #6A8546)',
borderRadius: '2px',
cursor: 'nwse-resize',
zIndex: 15
}}
/>
startCropDrag(e, 'tr')}
style={{
position: 'absolute',
left: `calc(${crop.x + crop.w}% - 6px)`,
top: `calc(${crop.y}% - 6px)`,
width: '12px',
height: '12px',
background: '#FFFFFF',
border: '2px solid var(--olive, #6A8546)',
borderRadius: '2px',
cursor: 'nesw-resize',
zIndex: 15
}}
/>
startCropDrag(e, 'bl')}
style={{
position: 'absolute',
left: `calc(${crop.x}% - 6px)`,
top: `calc(${crop.y + crop.h}% - 6px)`,
width: '12px',
height: '12px',
background: '#FFFFFF',
border: '2px solid var(--olive, #6A8546)',
borderRadius: '2px',
cursor: 'nesw-resize',
zIndex: 15
}}
/>
startCropDrag(e, 'br')}
style={{
position: 'absolute',
left: `calc(${crop.x + crop.w}% - 6px)`,
top: `calc(${crop.y + crop.h}% - 6px)`,
width: '12px',
height: '12px',
background: '#FFFFFF',
border: '2px solid var(--olive, #6A8546)',
borderRadius: '2px',
cursor: 'nwse-resize',
zIndex: 15
}}
/>
)}
{!isCropping && (
)}
) : item.bg ? (
{ e.stopPropagation(); fileRef.current?.click(); }}
>
{item.content && {pickLang(item.content, lang)}}
) : (
{ e.stopPropagation(); fileRef.current?.click(); }}
>
add_photo_alternate
{window.t('Clic · pegar · soltar imagen', 'Click · paste · drop image')}
)}
{/* La leyenda va FUERA del marco de la imagen a propósito. Dentro
quedaba superpuesta sobre la foto, y el marco tiene overflow:hidden,
así que tampoco se podía sacar solo con CSS: se recortaba. Aquí
abajo tiene su propia franja y la imagen se ve entera. */}
{item.showCaption && (