@pixelvault-dev/paste

Paste-and-host for any textarea. Paste, drop, or select an image and get a hosted CDN URL inserted at the caret — like GitHub's markdown editor, backed by PixelVault publishable keys.

Framework-agnostic core. No dependencies.

Usage

import { attachPaste } from "@pixelvault-dev/paste";

const detach = attachPaste(document.querySelector("textarea"), {
  publishableKey: "pv_pub_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
});

// later, to remove the listeners:
detach();

Pasting or dropping an image inserts an ![Uploading…]() placeholder, uploads the file, then replaces the placeholder with ![name](https://img.pixelvault.dev/…).

Click to select

A textarea has no built-in "upload" button, so wire openFilePicker to your own:

import { openFilePicker } from "@pixelvault-dev/paste";

button.addEventListener("click", () =>
  openFilePicker(document.querySelector("textarea"), {
    publishableKey: "pv_pub_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  }),
);

It opens the OS file dialog and runs the same upload-and-insert flow for the chosen image(s).

Options

| Option | Type | Description | | --- | --- | --- | | publishableKey | string | Required. A pv_pub_ key. Create one in the PixelVault dashboard with an origin allowlist. | | endpoint | string | Upload endpoint. Defaults to https://api.pixelvault.dev/v1/images. | | folder | string | Optional folder to store uploads under. | | render | (result, file) => string | Text inserted on success. Default: a markdown image tag. Override for HTML, BBCode, a bare URL, etc. | | onUploadStart | (file) => void | Called when an upload begins. | | onUploadComplete | (result, file) => void | Called on success. | | onError | (error, file) => string \| void | Called on failure. Return a string to replace the placeholder with it; return nothing to remove the placeholder. |

Get a publishable key

Publishable keys are safe to ship in browser code: they are upload-only and restricted to the request Origins you allowlist. Create one in the dashboard under your project's "Publishable keys" section.

Lower-level API

uploadImage(file, options) uploads a single File and resolves with { id, url, mimeType, size } (throws PixelVaultPasteError on failure). The event helpers (imageFilesFromClipboard, imageFilesFromDrop) and text helpers (buildImageMarkdown, insertText) are exported for building custom flows.