alinea/dist/picker/url/UrlPicker.browser.js

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

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

// src/picker/url/UrlPicker.browser.tsx
import { Picker, createId, 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 { text } from "alinea/input/text";
import { Button, HStack, Stack } from "alinea/ui";
import { urlPicker as createUrlPicker } from "./UrlPicker.js";
import { UrlPickerRow } from "./UrlPickerRow.js";
export * from "./UrlPicker.js";
import { jsx, jsxs } from "react/jsx-runtime";
var urlPicker = Picker.withView(createUrlPicker, {
  view: UrlPickerModal,
  viewRow: UrlPickerRow
});
var linkForm = type("Link", {
  url: text("Url", {
    help: "Url of the link"
  }),
  title: text("Description", {
    optional: true,
    help: "Text to display inside the link element"
  }),
  blank: check("Target", {
    description: "Open link in new tab",
    initialValue: true
  })
});
function UrlPickerForm({
  selection,
  options,
  onConfirm,
  onCancel
}) {
  const preSelected = selection?.[0];
  const form = useForm(linkForm, {
    initialValue: preSelected ? { ...preSelected, blank: preSelected.target === "_blank" } : void 0
  });
  function handleSubmit(e) {
    e.preventDefault();
    e.stopPropagation();
    const data = form.data();
    const reference = {
      id: preSelected?.id ?? createId(),
      type: "url",
      ref: "url",
      url: data.url,
      title: data.title || "",
      target: data.blank ? "_blank" : "_self"
    };
    onConfirm([reference]);
  }
  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
    /* @__PURE__ */ jsx(InputForm, { border: false, form }),
    /* @__PURE__ */ jsx(HStack, { children: /* @__PURE__ */ jsx(Stack.Right, { children: /* @__PURE__ */ jsxs(HStack, { gap: 16, children: [
      /* @__PURE__ */ jsx(Button, { outline: true, type: "button", onClick: onCancel, children: "Cancel" }),
      /* @__PURE__ */ jsx(Button, { children: "Confirm" })
    ] }) }) })
  ] });
}
function UrlPickerModal(props) {
  return /* @__PURE__ */ jsx(Modal, { open: true, onClose: props.onCancel, children: /* @__PURE__ */ jsx(UrlPickerForm, { ...props }) });
}
export {
  UrlPickerForm,
  UrlPickerModal,
  urlPicker
};