tldraw
Version:
A tiny little drawing editor.
109 lines (108 loc) • 3.33 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useEditor, useValue } from "@tldraw/editor";
import { forwardRef, useCallback, useEffect, useRef } from "react";
import { PORTRAIT_BREAKPOINT } from "../../../ui/constants.mjs";
import { useBreakpoint } from "../../../ui/context/breakpoints.mjs";
import { useTranslation } from "../../../ui/hooks/useTranslation/useTranslation.mjs";
import { defaultEmptyAs } from "../frameHelpers.mjs";
const FrameLabelInput = forwardRef(({ id, name, isEditing }, ref) => {
const editor = useEditor();
const breakpoint = useBreakpoint();
const isCoarsePointer = useValue(
"isCoarsePointer",
() => editor.getInstanceState().isCoarsePointer,
[editor]
);
const shouldUseWindowPrompt = breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && isCoarsePointer;
const promptOpen = useRef(false);
const msg = useTranslation();
const handlePointerDown = useCallback(
(e) => {
if (isEditing) editor.markEventAsHandled(e);
},
[editor, isEditing]
);
const handleKeyDown = useCallback(
(e) => {
if (e.key === "Enter" && !e.nativeEvent.isComposing) {
editor.markEventAsHandled(e);
e.currentTarget.blur();
editor.setEditingShape(null);
}
},
[editor]
);
const renameFrame = useCallback(
(value) => {
const shape = editor.getShape(id);
if (!shape) return;
const name2 = shape.props.name;
if (name2 === value) return;
editor.updateShapes([
{
id,
type: "frame",
props: { name: value }
}
]);
},
[id, editor]
);
const handleBlur = useCallback(
(e) => {
renameFrame(e.currentTarget.value);
},
[renameFrame]
);
const handleChange = useCallback(
(e) => {
renameFrame(e.currentTarget.value);
},
[renameFrame]
);
useEffect(() => {
if (!isEditing) {
promptOpen.current = false;
return;
}
if (isEditing && shouldUseWindowPrompt && !promptOpen.current) {
promptOpen.current = true;
const shape = editor.getShape(id);
const currentName = shape?.props.name ?? "";
const newName = window.prompt(msg("action.rename"), currentName);
promptOpen.current = false;
if (newName !== null) renameFrame(newName);
editor.setEditingShape(null);
}
}, [isEditing, shouldUseWindowPrompt, id, msg, renameFrame, editor]);
return /* @__PURE__ */ jsxs(
"div",
{
className: `tl-frame-label ${isEditing && !shouldUseWindowPrompt ? "tl-frame-label__editing" : ""}`,
children: [
/* @__PURE__ */ jsx(
"input",
{
className: "tl-frame-name-input",
ref,
disabled: !isEditing || shouldUseWindowPrompt,
readOnly: !isEditing || shouldUseWindowPrompt,
style: { display: isEditing ? void 0 : "none" },
value: name,
autoFocus: !shouldUseWindowPrompt,
onKeyDown: handleKeyDown,
onBlur: handleBlur,
onChange: handleChange,
onPointerDown: handlePointerDown,
draggable: false
}
),
defaultEmptyAs(name, "Frame") + String.fromCharCode(8203)
]
}
);
});
export {
FrameLabelInput
};
//# sourceMappingURL=FrameLabelInput.mjs.map