tldraw
Version:
A tiny little drawing editor.
46 lines (45 loc) • 1.57 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useEditor } from "@tldraw/editor";
import classNames from "classnames";
import { useCallback } from "react";
import { useEfficientZoomThreshold } from "./useEfficientZoomThreshold.mjs";
const LINK_ICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6M19 5h6m0 0v6m0-6L13 17'/%3E%3C/svg%3E";
function HyperlinkButton({ url }) {
const editor = useEditor();
const hideButton = useEfficientZoomThreshold();
const markAsHandledOnShiftKey = useCallback(
(e) => {
if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e);
},
[editor]
);
return /* @__PURE__ */ jsx(
"a",
{
className: classNames("tl-hyperlink-button", {
"tl-hyperlink-button__hidden": hideButton
}),
href: url,
target: "_blank",
rel: "noopener noreferrer",
onPointerDown: markAsHandledOnShiftKey,
onPointerUp: markAsHandledOnShiftKey,
title: url,
draggable: false,
children: /* @__PURE__ */ jsx(
"div",
{
className: "tl-hyperlink__icon",
style: {
mask: `url("${LINK_ICON}") center 100% / 100% no-repeat`,
WebkitMask: `url("${LINK_ICON}") center 100% / 100% no-repeat`
}
}
)
}
);
}
export {
HyperlinkButton
};
//# sourceMappingURL=HyperlinkButton.mjs.map