@mantine/tiptap
Version:
Rich text editor based on tiptap
128 lines (127 loc) • 5.17 kB
JavaScript
"use client";
require("../_virtual/_rolldown/runtime.cjs");
const require_RichTextEditor_module = require("../RichTextEditor.module.cjs");
const require_RichTextEditor_context = require("../RichTextEditor.context.cjs");
const require_Icons = require("../icons/Icons.cjs");
const require_RichTextEditorControl = require("./RichTextEditorControl.cjs");
let react = require("react");
let _mantine_core = require("@mantine/core");
let _tiptap_react = require("@tiptap/react");
let react_jsx_runtime = require("react/jsx-runtime");
let _mantine_hooks = require("@mantine/hooks");
//#region packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorLinkControl.tsx
const LinkIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.IconLink, { ...props });
const RichTextEditorLinkControl = (0, _mantine_core.factory)((_props) => {
const props = (0, _mantine_core.useProps)("RichTextEditorLinkControl", null, _props);
const { classNames, className, style, styles, vars, icon, popoverProps, disableTooltips, initialExternal, ...others } = props;
const ctx = require_RichTextEditor_context.useRichTextEditorContext();
const stylesApiProps = {
classNames,
styles
};
const [url, setUrl] = (0, _mantine_hooks.useInputState)("");
const [external, setExternal] = (0, react.useState)(initialExternal);
const [opened, { open, close }] = (0, _mantine_hooks.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();
}
};
(0, _mantine_hooks.useWindowEvent)("edit-link", handleOpen, false);
const active = (0, _tiptap_react.useEditorState)({
editor: ctx.editor ?? null,
selector: (state) => state.editor?.isActive("link") ?? false
});
const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
classNames,
styles,
props
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Popover, {
trapFocus: true,
shadow: "md",
withinPortal: true,
opened,
onChange: (_opened) => !_opened && handleClose(),
offset: -44,
zIndex: 1e4,
...popoverProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RichTextEditorControl.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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Dropdown, {
...ctx.getStyles("linkEditorDropdown", stylesApiProps),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
...ctx.getStyles("linkEditor", stylesApiProps),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.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__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
onClick: () => setExternal((e) => !e),
"data-active": external || void 0,
...ctx.getStyles("linkEditorExternalControl", stylesApiProps),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.IconExternalLink, { style: {
width: (0, _mantine_core.rem)(14),
height: (0, _mantine_core.rem)(14)
} })
})
})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Button, {
variant: "default",
onClick: setLink,
...ctx.getStyles("linkEditorSave", stylesApiProps),
children: ctx.labels.linkEditorSave
})]
})
})]
});
});
RichTextEditorLinkControl.classes = require_RichTextEditor_module.default;
RichTextEditorLinkControl.displayName = "@mantine/tiptap/RichTextEditorLinkControl";
//#endregion
exports.RichTextEditorLinkControl = RichTextEditorLinkControl;
//# sourceMappingURL=RichTextEditorLinkControl.cjs.map