34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
// Rôle : monte le hook d'édition réel sous StrictMode pour observer ses commits DOM.
|
|
import { createElement, StrictMode, useLayoutEffect } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { flushSync } from "react-dom";
|
|
import { useInlineEdit } from "../../website/src/hooks/useInlineEdit.js";
|
|
|
|
export function mountInlineEditProbe(element, contentEditable) {
|
|
const commits = [];
|
|
const renders = [];
|
|
const root = createRoot(element);
|
|
|
|
function Probe({ value }) {
|
|
const edit = useInlineEdit({
|
|
value,
|
|
onCommit: (next) => commits.push(next),
|
|
blurOnEscape: true
|
|
});
|
|
useLayoutEffect(() => {
|
|
renders.push({ value, draft: edit.draft });
|
|
});
|
|
return createElement("section", null,
|
|
contentEditable
|
|
? createElement("div", edit.getContentEditableProps({ role: "textbox", "aria-label": "Edit" }))
|
|
: createElement("input", edit.getInputProps({ type: "text", "aria-label": "Edit" })),
|
|
createElement("button", { type: "button" }, "Outside")
|
|
);
|
|
}
|
|
|
|
function update(value) {
|
|
flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe, { value }))));
|
|
}
|
|
update("Initial");
|
|
return { update, commits, renders, unmount: () => root.unmount() };
|
|
}
|