alinea/dist/input/richtext/PickTextLink.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../chunks/chunk-U5RRZUYZ.js";

// src/input/richtext/PickTextLink.tsx
import { track, type } from "alinea/core";
import { useForm } from "alinea/dashboard/atoms/FormAtoms";
import { InputForm } from "alinea/dashboard/editor/InputForm";
import { Modal } from "alinea/dashboard/view/Modal";
import { check } from "alinea/input/check";
import { link as createLink } from "alinea/input/link";
import { text } from "alinea/input/text";
import { Button, HStack, Stack, VStack, fromModule } from "alinea/ui";
import { useTrigger } from "alinea/ui/hook/UseTrigger";
import { IcRoundClose } from "alinea/ui/icons/IcRoundClose";
import { useMemo } from "react";

// src/input/richtext/PickLink.module.scss
var PickLink_module_default = {
  "root": "alinea-PickLink"
};

// src/input/richtext/PickTextLink.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(PickLink_module_default);
function linkForm(options) {
  const isExistingLink = Boolean(options.link);
  const fields = type({
    link: createLink("Link", {
      initialValue: options.link
    }),
    description: text("Description", {
      help: "Text to display inside the link element"
    }),
    title: text("Tooltip", {
      optional: true,
      help: "Extra information that describes the link, shown on hover"
    }),
    blank: check("Open link in new tab", {
      inline: true
    })
  });
  track.options(fields.description, (get) => {
    const selected = get(fields.link);
    const isUrl = selected?.type === "url";
    const descriptionRequired = options.requireDescription && !(isExistingLink || isUrl);
    return { hidden: !descriptionRequired };
  });
  track.options(fields.blank, (get) => {
    const selected = get(fields.link);
    const isUrl = selected?.type === "url";
    return { hidden: isUrl };
  });
  return fields;
}
function usePickTextLink() {
  const trigger = useTrigger();
  return {
    options: trigger.options,
    open: trigger.isActive,
    onClose: trigger.reject,
    resolve: trigger.resolve,
    pickLink: trigger.request
  };
}
function PickTextLinkForm({
  open,
  onClose,
  resolve,
  options = {}
}) {
  const type2 = useMemo(() => linkForm(options), [options]);
  const form = useForm(type2, {
    initialValue: options
  });
  function handleSubmit(e) {
    e.preventDefault();
    e.stopPropagation();
    const result = form.data();
    return resolve(result);
  }
  return /* @__PURE__ */ jsx(Fragment, { children: open && /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs(VStack, { gap: 18, children: [
    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(InputForm, { form, border: false }) }),
    /* @__PURE__ */ jsxs(HStack, { children: [
      options.hasLink && /* @__PURE__ */ jsx(
        Button,
        {
          icon: IcRoundClose,
          outline: true,
          type: "button",
          onClick: () => resolve(void 0),
          children: "Remove link"
        }
      ),
      /* @__PURE__ */ jsx(Stack.Right, { children: /* @__PURE__ */ jsxs(HStack, { gap: 16, children: [
        /* @__PURE__ */ jsx(Button, { outline: true, type: "button", onClick: onClose, children: "Cancel" }),
        /* @__PURE__ */ jsx(Button, { children: "Confirm" })
      ] }) })
    ] })
  ] }) }) });
}
function PickTextLink({ picker }) {
  if (!picker.open)
    return null;
  return /* @__PURE__ */ jsx(Modal, { open: true, onClose: picker.onClose, className: styles.root(), children: /* @__PURE__ */ jsx(PickTextLinkForm, { ...picker }) });
}
export {
  PickTextLink,
  PickTextLinkForm,
  usePickTextLink
};