@mantine/tiptap/esm/RichTextEditorControl/RichTextEditorLinkControl.mjs

Rich text editor based on tiptap

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { factory, useProps, useResolvedStylesApi, Popover, TextInput, Tooltip, UnstyledButton, rem, Button } from '@mantine/core';
import { useInputState, useDisclosure, useWindowEvent } from '@mantine/hooks';
import { IconExternalLink, IconLink } from '../icons/Icons.mjs';
import { useRichTextEditorContext } from '../RichTextEditor.context.mjs';
import { RichTextEditorControlBase } from './RichTextEditorControl.mjs';
import classes from '../RichTextEditor.module.css.mjs';

const LinkIcon = (props) => /* @__PURE__ */ jsx(IconLink, { ...props });
const defaultProps = {};
const RichTextEditorLinkControl = factory(
  (_props, ref) => {
    const props = useProps("RichTextEditorLinkControl", defaultProps, _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 { 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: ctx.editor?.isActive("link"),
              ref,
              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 = classes;
RichTextEditorLinkControl.displayName = "@mantine/tiptap/RichTextEditorLinkControl";

export { RichTextEditorLinkControl };
//# sourceMappingURL=RichTextEditorLinkControl.mjs.map