tldraw
Version:
A tiny little drawing editor.
51 lines (50 loc) • 1.42 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useEditor } from "@tldraw/editor";
import { useCallback, useRef } from "react";
import { useUiEvents } from "../../context/events.mjs";
import { TldrawUiInput } from "../primitives/TldrawUiInput.mjs";
const PageItemInput = function PageItemInput2({
name,
id,
isCurrentPage,
onCancel
}) {
const editor = useEditor();
const trackEvent = useUiEvents();
const rInput = useRef(null);
const rMark = useRef(null);
const handleFocus = useCallback(() => {
rMark.current = editor.markHistoryStoppingPoint("rename page");
}, [editor]);
const handleChange = useCallback(
(value) => {
editor.renamePage(id, value || "New Page");
trackEvent("rename-page", { source: "page-menu" });
},
[editor, id, trackEvent]
);
const handleCancel = useCallback(() => {
if (rMark.current) {
editor.bailToMark(rMark.current);
}
onCancel();
}, [editor, onCancel]);
return /* @__PURE__ */ jsx(
TldrawUiInput,
{
className: "tlui-page-menu__item__input",
ref: (el) => rInput.current = el,
defaultValue: name,
onValueChange: handleChange,
onCancel: handleCancel,
onFocus: handleFocus,
shouldManuallyMaintainScrollPositionWhenFocused: true,
autoFocus: isCurrentPage,
autoSelect: true
}
);
};
export {
PageItemInput
};
//# sourceMappingURL=PageItemInput.mjs.map