margin doubles up with the padding).
// `font-size: inherit` so the paragraphs follow the field's size instead
// of WP admin's default `p { font-size: 13px }`.
'wpchat:[&_p]:m-0 wpchat:[&_p]:[font-size:inherit] wpchat:[&_p:not(:first-child)]:mt-2',
// Links should read as links inside the editor, not plain text.
// Link color matches the primary button blue.
'wpchat:[&_a]:cursor-pointer wpchat:[&_a]:text-wp-blue-500 wpchat:[&_a]:underline wpchat:[&_a]:underline-offset-2',
// Keep the targeted text highlighted while the link editor is open
// (native selection vanishes once the URL input takes focus).
'wpchat:[&_.wpc-link-active]:bg-wp-light-blue-500-20',
inputClassName,
),
},
},
});
// Reactive editor state. Reading editor.isActive() directly in render is not
// reliable here (React Compiler memoizes it); useEditorState subscribes properly.
const editorState = useEditorState({
editor,
selector: ({ editor: e }) => ({
isBold: e?.isActive('bold') ?? false,
isItalic: e?.isActive('italic') ?? false,
isLink: e?.isActive('link') ?? false,
count: e?.storage.characterCount?.characters() ?? 0,
}),
});
const isBold = editorState?.isBold ?? false;
const isItalic = editorState?.isItalic ?? false;
const isLink = editorState?.isLink ?? false;
const count = editorState?.count ?? 0;
const isOverLimit = maxLength ? count >= maxLength : false;
// The link range under a collapsed caret (keyboard navigation), or null.
// Lets us surface the popover without a mouse.
const caretLink = useEditorState({
editor,
selector: ({ editor: e }) => {
if (!e || !e.isFocused) return null;
const sel = e.state.selection;
if (!sel.empty) return null;
const range = getMarkRange(e.state.doc.resolve(sel.from), e.schema.marks.link);
return range ? { from: range.from, to: range.to } : null;
},
});
// Bottom toolbar is shown while the field is focused or a link popover is open.
const barVisible = isFocused || linkMode !== 'closed';
// Highlight (or clear) the range being linked via the LinkHighlight plugin.
const setLinkHighlight = (range) => {
if (!editor?.view) return;
editor.view.dispatch(editor.state.tr.setMeta(linkHighlightKey, range || { clear: true }));
};
// Resolve the link at a document position into {from, to, text, href} (or null).
const linkAt = (pos) => {
if (!editor) return null;
const { doc, schema } = editor.state;
const range = getMarkRange(doc.resolve(pos), schema.marks.link);
if (!range) return null;
const text = doc.textBetween(range.from, range.to, ' ');
let href = '';
doc.nodesBetween(range.from, range.to, (node) => {
const mark = node.marks?.find((m) => m.type.name === 'link');
if (mark) href = mark.attrs.href;
});
return { from: range.from, to: range.to, text, href };
};
// The DOM element covering a document position, used to anchor the popover.
const linkElAt = (pos) => {
if (!editor) return null;
const dom = editor.view.domAtPos(pos)?.node;
const el = dom?.nodeType === 3 ? dom.parentElement : dom;
return el?.closest?.('a') || null;
};
// Viewport rect for a document range — the link's box if there is one,
// otherwise the bounding box of the selected text. So a brand-new link from a
// text selection anchors to that text, not to the toolbar button.
const selRect = (from, to) => {
const a = editor.view.coordsAtPos(from);
const b = editor.view.coordsAtPos(to);
const top = Math.min(a.top, b.top);
const bottom = Math.max(a.bottom, b.bottom);
const left = Math.min(a.left, b.left);
const right = Math.max(a.right, b.right);
return {
top,
left,
bottom,
right,
width: Math.max(right - left, 1),
height: Math.max(bottom - top, 1),
};
};
const rectForRange = (from, to) => {
const el = linkElAt(from + 1) || linkElAt(from);
return el ? el.getBoundingClientRect() : selRect(from, to);
};
// Move the invisible anchor to a viewport rect, stored in document coords so it
// scrolls with the page and react-aria can keep the popover attached.
const placeAnchor = (rect) => {
const el = anchorRef.current;
if (!el || !rect) return;
el.style.top = `${rect.top + window.scrollY}px`;
el.style.left = `${rect.left + window.scrollX}px`;
el.style.width = `${rect.width}px`;
el.style.height = `${rect.height}px`;
};
const closePopover = () => {
setMode('closed');
setLinkHighlight(null);
suppressCaretRef.current = true;
};
const showRead = (link) => {
targetRangeRef.current = { from: link.from, to: link.to };
placeAnchor(rectForRange(link.from, link.to));
setReadData({ text: link.text, href: link.href });
setMode('read');
};
const openEdit = (seed) => {
targetRangeRef.current = { from: seed.from, to: seed.to };
placeAnchor(rectForRange(seed.from, seed.to));
setEditText(seed.text);
setEditUrl(seed.href);
setLinkHighlight(seed.from !== seed.to ? targetRangeRef.current : null);
setMode('edit');
};
// Keep the editor in sync with external value changes without disrupting
// the cursor while the user is typing.
useEffect(() => {
if (!editor) return;
if (value !== editor.getHTML()) {
editor.commands.setContent(value, false);
}
}, [value, editor]);
// Surface (or dismiss) the read popover as the caret moves in/out of a link
// via the keyboard. Hover is handled separately on the editor element.
useEffect(() => {
if (!editor || linkModeRef.current === 'edit') return;
if (caretLink) {
if (suppressCaretRef.current) {
suppressCaretRef.current = false;
return;
}
const link = linkAt(caretLink.from);
if (!link) return;
showRead(link);
} else if (linkModeRef.current === 'read' && !hoveringRef.current) {
closePopover();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [caretLink, editor]);
if (!editor) return null;
/** Build the seed for the toolbar link button from the current selection. */
const seedFromSelection = () => {
const sel = editor.state.selection;
if (sel.empty) {
const link = linkAt(sel.from);
if (link) return link;
return { from: sel.from, to: sel.from, text: '', href: '' };
}
return {
from: sel.from,
to: sel.to,
text: editor.state.doc.textBetween(sel.from, sel.to, ' '),
href: '',
};
};
/** Toolbar link button always opens the editor — it never silently deletes. */
const onLinkButton = () => openEdit(seedFromSelection());
// `urlHasError` drives the red error state — only once the user has typed
// something malformed, so an empty field is not flagged. `canApply` also
// requires a non-empty URL, so Apply is disabled by default (removing a link
// is done with the dedicated Remove button, not by clearing the URL).
const urlIsValid = isValidLinkUrl(editUrl);
const urlHasError = editUrl.trim() !== '' && !urlIsValid;
const canApply = editUrl.trim() !== '' && urlIsValid;
/** Apply the edit form. */
const applyEdit = () => {
// Bail when there's nothing valid to apply — the Apply button is disabled,
// but Enter can still fire here.
if (!canApply) return;
const range = targetRangeRef.current;
const url = normalizeLinkUrl(editUrl);
const finalText = editText.trim() || url;
const node = { type: 'text', text: finalText, marks: [{ type: 'link', attrs: { href: url } }] };
if (range.from !== range.to) {
editor.chain().focus().insertContentAt(range, node).run();
} else {
editor.chain().focus().insertContentAt(range.from, node).run();
}
closePopover();
};
/** Remove the link the popover is acting on. */
const removeLink = () => {
const range = targetRangeRef.current;
if (range) editor.chain().focus().setTextSelection(range).unsetLink().run();
closePopover();
};
/** Switch the popover from read to edit, seeded from the targeted link. */
const editFromRead = () => {
const range = targetRangeRef.current;
const link = range ? linkAt(range.from) : null;
openEdit(link || seedFromSelection());
};
const handleEditKeyDown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
applyEdit();
} else if (e.key === 'Escape') {
e.preventDefault();
closePopover();
editor.commands.focus();
}
};
// Reveal the read popover on hover, with a small grace period so moving the
// pointer from the link onto the popover does not dismiss it.
const scheduleHide = () => {
clearTimeout(hideTimerRef.current);
hideTimerRef.current = setTimeout(() => {
hoveringRef.current = false;
if (linkModeRef.current === 'read') closePopover();
}, 160);
};
const handleEditorMouseOver = (e) => {
const anchor = e.target.closest('a');
if (!anchor || linkModeRef.current === 'edit') return;
clearTimeout(hideTimerRef.current);
hoveringRef.current = true;
const pos = editor.view.posAtDOM(anchor, 0);
const link = linkAt(pos) || linkAt(pos + 1);
if (link) showRead(link);
};
const handleEditorMouseOut = (e) => {
if (e.target.closest('a') && linkModeRef.current === 'read') scheduleHide();
};
return (