@mantine/tiptap/cjs/RichTextEditorControl/RichTextEditorLinkControl.cjs

Rich text editor based on tiptap

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var Icons = require('../icons/Icons.cjs');
var RichTextEditor_context = require('../RichTextEditor.context.cjs');
var RichTextEditorControl = require('./RichTextEditorControl.cjs');
var RichTextEditor_module = require('../RichTextEditor.module.css.cjs');

const LinkIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(Icons.IconLink, { ...props });
const RichTextEditorLinkControl = core.factory(
  (_props, ref) => {
    const props = core.useProps("RichTextEditorLinkControl", null, _props);
    const {
      classNames,
      className,
      style,
      styles,
      vars,
      icon,
      popoverProps,
      disableTooltips,
      initialExternal,
      ...others
    } = props;
    const ctx = RichTextEditor_context.useRichTextEditorContext();
    const stylesApiProps = { classNames, styles };
    const [url, setUrl] = hooks.useInputState("");
    const [external, setExternal] = react.useState(initialExternal);
    const [opened, { open, close }] = 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();
      }
    };
    hooks.useWindowEvent("edit-link", handleOpen, false);
    const { resolvedClassNames, resolvedStyles } = core.useResolvedStylesApi({ classNames, styles, props });
    return /* @__PURE__ */ jsxRuntime.jsxs(
      core.Popover,
      {
        trapFocus: true,
        shadow: "md",
        withinPortal: true,
        opened,
        onChange: (_opened) => !_opened && handleClose(),
        offset: -44,
        zIndex: 1e4,
        ...popoverProps,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
            RichTextEditorControl.RichTextEditorControlBase,
            {
              icon: icon || LinkIcon,
              ...others,
              "aria-label": ctx.labels.linkControlLabel,
              title: ctx.labels.linkControlLabel,
              onClick: handleOpen,
              active: ctx.editor?.isActive("link"),
              ref,
              classNames: resolvedClassNames,
              styles: resolvedStyles,
              className,
              style,
              variant: ctx.variant
            }
          ) }),
          /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Dropdown, { ...ctx.getStyles("linkEditorDropdown", stylesApiProps), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...ctx.getStyles("linkEditor", stylesApiProps), children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              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__ */ jsxRuntime.jsx(
                  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__ */ jsxRuntime.jsx(
                      core.UnstyledButton,
                      {
                        onClick: () => setExternal((e) => !e),
                        "data-active": external || void 0,
                        ...ctx.getStyles("linkEditorExternalControl", stylesApiProps),
                        children: /* @__PURE__ */ jsxRuntime.jsx(Icons.IconExternalLink, { style: { width: core.rem(14), height: core.rem(14) } })
                      }
                    )
                  }
                )
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              core.Button,
              {
                variant: "default",
                onClick: setLink,
                ...ctx.getStyles("linkEditorSave", stylesApiProps),
                children: ctx.labels.linkEditorSave
              }
            )
          ] }) })
        ]
      }
    );
  }
);
RichTextEditorLinkControl.classes = RichTextEditor_module;
RichTextEditorLinkControl.displayName = "@mantine/tiptap/RichTextEditorLinkControl";

exports.RichTextEditorLinkControl = RichTextEditorLinkControl;
//# sourceMappingURL=RichTextEditorLinkControl.cjs.map