Molecule.dev

@molecule/app-clipboard-web

Provider bond · clipboard · App (browser) · v1.0.1 · Apache-2.0

Web clipboard provider for molecule.dev — the browser's async Clipboard API, with a selection-and-copy fallback for older contexts

npm install @molecule/app-clipboard-web

npm · Source on GitHub · Implements @molecule/app-clipboard

How it works

@molecule/app-clipboard-web is a provider bond on the app (browser) side: it implements the clipboard core interface (@molecule/app-clipboard) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { setProvider, writeText } from '@molecule/app-clipboard'
import { provider } from '@molecule/app-clipboard-web'

setProvider(provider)

button.addEventListener('click', () => writeText('npx mlcl create my-app'))

Works with: @molecule/app-clipboard

Reference

Web bond for @molecule/app-clipboard.

The browser's async Clipboard API — navigator.clipboard for text, and ClipboardItem for HTML and images where the browser has it — with a selection-and-copy fallback so "copy this command" works on every page.

Quick Start

import { setProvider, writeText } from '@molecule/app-clipboard'
import { provider } from '@molecule/app-clipboard-web'

setProvider(provider)

button.addEventListener('click', () => writeText('npx mlcl create my-app'))

Type

provider

Installation

npm install @molecule/app-clipboard-web @molecule/app-clipboard

API

Interfaces

WebClipboardConfig

Provider-specific configuration options.

interface WebClipboardConfig {
  /**
   * When the async Clipboard API is unavailable (an insecure origin, an old
   * browser, a document without focus), copy text by selecting it in a hidden
   * element and running the `copy` command. Defaults to `true`.
   */
  legacyCopyFallback?: boolean
}

Functions

createWebClipboardProvider(config)

Creates a web clipboard provider.

function createWebClipboardProvider(config?: WebClipboardConfig): ClipboardProvider
  • config — Provider configuration.

Returns: A clipboard provider.

Constants

provider

Default web clipboard provider instance.

const provider: ClipboardProvider

Core Interface

Implements @molecule/app-clipboard interface.

Bond Wiring

Setup function to register this provider with the core interface:

import { setProvider } from '@molecule/app-clipboard'
import { provider } from '@molecule/app-clipboard-web'

export function setupNativeClipboardWeb(): void {
  setProvider(provider)
}

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-clipboard ^1.0.1

Runtime Dependencies

  • @molecule/app-clipboard

  • Writing text works almost everywhere; reading needs permission. readText/read prompt the person in most browsers and reject when they decline or the page is not focused; call them from a click, never on load.

  • Copy from a user gesture. Browsers allow clipboard writes only in response to a click or key press; a copy started from a timer or a fetch callback fails, and the fallback cannot help either.

  • The fallback (legacyCopyFallback, on by default) covers insecure origins and a document that lost focus; it handles text only, and it moves the selection for a moment.

  • Images are written as a ClipboardItem; a data: URL is fetched into a Blob first. Browsers without ClipboardItem get the text part only.