@mantine/tiptap
Version:
Rich text editor based on tiptap
127 lines (126 loc) • 4.58 kB
JavaScript
"use client";
import RichTextEditor_module_default from "../RichTextEditor.module.mjs";
import { useRichTextEditorContext } from "../RichTextEditor.context.mjs";
import { IconExternalLink, IconLink } from "../icons/Icons.mjs";
import { RichTextEditorControlBase } from "./RichTextEditorControl.mjs";
import { useState } from "react";
import { Button, Popover, TextInput, Tooltip, UnstyledButton, factory, rem, useProps, useResolvedStylesApi } from "@mantine/core";
import { useEditorState } from "@tiptap/react";
import { jsx, jsxs } from "react/jsx-runtime";
import { useDisclosure, useInputState, useWindowEvent } from "@mantine/hooks";
//#region packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorLinkControl.tsx
const LinkIcon = (props) => /* @__PURE__ */ jsx(IconLink, { ...props });
const RichTextEditorLinkControl = factory((_props) => {
const props = useProps("RichTextEditorLinkControl", null, _props);
const { classNames, className, style, styles, vars, icon, popoverProps, disableTooltips, initialExternal, ...others } = props;
const ctx = useRichTextEditorContext();
const stylesApiProps = {
classNames,
styles
};
const [url, setUrl] = useInputState("");
const [external, setExternal] = useState(initialExternal);
const [opened, { open, close }] = useDisclosure(false);
const handleOpen = () => {
open();
const linkData = ctx.editor?.getAttributes("link");
setUrl(linkData?.href || "");
setExternal(linkData?.href ? linkData?.target === "_blank" : initialExternal);
};
const handleClose = () => {
close();
setUrl("");
setExternal(initialExternal);
};
const setLink = () => {
handleClose();
url === "" ? ctx.editor?.chain().focus().extendMarkRange("link").unsetLink().run() : ctx.editor?.chain().focus().extendMarkRange("link").setLink({
href: url,
target: external ? "_blank" : null
}).run();
};
const handleInputKeydown = (event) => {
if (event.key === "Enter") {
event.preventDefault();
setLink();
}
};
useWindowEvent("edit-link", handleOpen, false);
const active = useEditorState({
editor: ctx.editor ?? null,
selector: (state) => state.editor?.isActive("link") ?? false
});
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
classNames,
styles,
props
});
return /* @__PURE__ */ jsxs(Popover, {
trapFocus: true,
shadow: "md",
withinPortal: true,
opened,
onChange: (_opened) => !_opened && handleClose(),
offset: -44,
zIndex: 1e4,
...popoverProps,
children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(RichTextEditorControlBase, {
icon: icon || LinkIcon,
...others,
"aria-label": ctx.labels.linkControlLabel,
title: ctx.labels.linkControlLabel,
onClick: handleOpen,
active: active ?? false,
classNames: resolvedClassNames,
styles: resolvedStyles,
className,
style,
variant: ctx.variant
}) }), /* @__PURE__ */ jsx(Popover.Dropdown, {
...ctx.getStyles("linkEditorDropdown", stylesApiProps),
children: /* @__PURE__ */ jsxs("div", {
...ctx.getStyles("linkEditor", stylesApiProps),
children: [/* @__PURE__ */ jsx(TextInput, {
placeholder: ctx.labels.linkEditorInputPlaceholder,
"aria-label": ctx.labels.linkEditorInputLabel,
type: "url",
value: url,
onChange: setUrl,
classNames: { input: ctx.getStyles("linkEditorInput", stylesApiProps).className },
onKeyDown: handleInputKeydown,
rightSection: /* @__PURE__ */ jsx(Tooltip, {
label: external ? ctx.labels.linkEditorExternalLink : ctx.labels.linkEditorInternalLink,
events: {
hover: true,
focus: true,
touch: true
},
withinPortal: true,
withArrow: true,
disabled: disableTooltips,
zIndex: 1e4,
children: /* @__PURE__ */ jsx(UnstyledButton, {
onClick: () => setExternal((e) => !e),
"data-active": external || void 0,
...ctx.getStyles("linkEditorExternalControl", stylesApiProps),
children: /* @__PURE__ */ jsx(IconExternalLink, { style: {
width: rem(14),
height: rem(14)
} })
})
})
}), /* @__PURE__ */ jsx(Button, {
variant: "default",
onClick: setLink,
...ctx.getStyles("linkEditorSave", stylesApiProps),
children: ctx.labels.linkEditorSave
})]
})
})]
});
});
RichTextEditorLinkControl.classes = RichTextEditor_module_default;
RichTextEditorLinkControl.displayName = "@mantine/tiptap/RichTextEditorLinkControl";
//#endregion
export { RichTextEditorLinkControl };
//# sourceMappingURL=RichTextEditorLinkControl.mjs.map