# docs/copybutton.md

# CopyButton

All parameters are optional.

| Parameter       |  Type   | Description of Parameter                                           |
| :-------------- | :-----: | :--------------------------------------------------------------------------- |
| `text` <CB />   | String  | Text to be copied                                                            |
| `next` <CB />   | Boolean | Copy next element text                                                       |
| `prev` <CB />   | Boolean | Copy previous element text                                                   |
| `all` <CB />    | Boolean | Copy parent element text                                                     |
| `anchor` <CB /> | Boolean | Copy anchor text (the id)                                                    |
| `margin` <CB /> | String  | [CSS margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) String |

## Usage

With automatic text detection:

```markdown
<CB />
```

With a set text:

```markdown
<CB text="I Copied This" />
```

With a boolean parameter:

```markdown
<CB prev />
```

See the [Examples](../guides/examples.md) for more ways to use the CopyButton.

&nbsp;

::: tip Request a Feature
If you need more options, please [open a feature request](https://github.com/cssnr/vitepress-plugin-copybutton/discussions/categories/feature-requests)
:::

<style>
.copybutton-page table td:nth-child(1) {
  white-space: nowrap;
}
</style>

---

# guides/examples.md

# Copy Button Examples

Can be added directly to [headings](#headings), [text](#text), [tables](#table) and [more](#demos).

## Headings

### Heading 1 <CB />

::: code-group

```markdown [Code]
### Heading 1 <CB />
```

```plain [Result]
Heading 1
```

:::

### Heading 2 <Badge type="tip" text="Badge" /> <CB />

::: code-group

```markdown [Code]
### Heading 2 <Badge type="tip" text="Badge" /> <CB />
```

```plain [Result]
Heading 2
```

:::

### Heading 3 <CB /> <Badge type="tip" text="Badge" />

::: code-group

```markdown [Code]
### Heading 3 <CB /> <Badge type="tip" text="Badge" />
```

```plain [Result]
Heading 3
```

:::

### Heading 4 <CB anchor /> <Badge type="tip" text="Badge" /> {#custom_anchor_2}

::: code-group

```markdown [Code]
### Heading 4 <CB anchor /> <Badge type="tip" text="Badge" /> {#custom_anchor_2}
```

```plain [Result]
custom_anchor_2
```

:::

### Heading 5 <CB text="Custom Text" />

::: code-group

```markdown [Code]
### Heading 5 <CB text="Custom Text" />
```

```plain [Result]
Custom Text
```

:::

## Text

Lorem ipsum dolor sit amet. <CB />

::: code-group

```markdown [Code]
Lorem ipsum dolor sit amet. <CB />
```

```plain [Result]
Lorem ipsum dolor sit amet.
```

:::

Some text. `some inline code` <CB />

::: code-group

```markdown [Code]
Some text. `some inline code` <CB />
```

```plain [Result]
Some text.
```

:::

Some text. `some inline code` <CB prev />

::: code-group

```markdown [Code]
Some text. `some inline code` <CB prev />
```

```plain [Result]
some inline code
```

:::

Some text. `some inline code` <CB all />

::: code-group

```markdown [Code]
Some text. `some inline code` <CB all />
```

```plain [Result]
Some text. some inline code
```

:::

## Table

| Key                                   | Tag&nbsp;Used | Result                  |
| :------------------------------------ | :-----------: | ----------------------- |
| `inline code` <CB />                  |   `<CB />`    | inline code             |
| text string <CB />                    |   `<CB />`    | text string             |
| text string `inline code` <CB />      |   `<CB />`    | text string             |
| text string `inline code` <CB prev /> | `<CB prev />` | inline code             |
| text string `inline code` <CB all />  | `<CB all />`  | inline code text string |

## Demos

The plugin is used extensively on these pages:

- https://docker-deploy.cssnr.com/docs/inputs
- https://portainer-deploy.cssnr.com/docs/inputs

If you have a live demo, let us know and we will post it here...

<div class="tip custom-block" style="padding-top: 8px; margin-top: 64px;">

See the [CopyButton Documentation](../docs/copybutton.md) for `<CB />` tag usage.

</div>

---

# guides/get-started.md

# Getting Started <CB />

A [VitePress](https://vitepress.dev/) Plugin to easily add a copy button to a heading, table, code snippet or paragraph with automatic text detection or pass any string. <CB all />

To get started, [install](#install) the package, [setup](#setup) the plugin, and view the [usage](#usage).

## Install

<span class="search-keywords">Install or Download from NPM npmjs.com</span>

Install directly to your VitePress from [npmjs](https://www.npmjs.com/package/@cssnr/vitepress-plugin-copybutton) with the following command.

::: code-group

```shell [npm]
npm i @cssnr/vitepress-plugin-copybutton
```

```shell [pnpm]
pnpm i @cssnr/vitepress-plugin-copybutton
```

```shell [yarn]
yarn add @cssnr/vitepress-plugin-copybutton
```

```shell [bun]
bun i @cssnr/vitepress-plugin-copybutton
```

:::

_Note: you can also [copy the source](source.md) file to your project._ <Badge type="warning">WIP</Badge>

## Setup

Add these 3 lines to your `index.[js,ts]`.

_If you don't have a [.vitepress/theme/index.ts](https://vitepress.dev/guide/custom-theme#theme-resolving) file, create one._

```javascript [.vitepress/theme/index.ts]
import DefaultTheme, { VPBadge } from 'vitepress/theme' // [!code highlight]

import CopyButton from '@cssnr/vitepress-plugin-copybutton' // [!code ++]
import '@cssnr/vitepress-plugin-copybutton/style.css' // [!code ++]

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', VPBadge) // [!code highlight]

    app.component('CB', CopyButton) // [!code ++]
  },
}
```

<Badge type="info">VPBadge</Badge> Only required if you are using the VitePress [Badge](https://vitepress.dev/reference/default-theme-badge#badge).

Note: The component name `CB` is an arbitrary string based on your preference.

## Usage

Simply add a `<CB />` tag to your markdown or component.

Jump to the [documentation](../docs/copybutton.md) or view [examples](examples.md).

With a set text:

```markdown
<CB text="I Copied This" />
```

With automatic text detection:

```markdown
<CB />
```

<div class="tip custom-block" style="padding-top: 8px; margin-top: 64px;">

See the [CopyButton Documentation](../docs/copybutton.md) for `<CB />` tag usage or view the [Examples](examples.md).

</div>

---

# guides/source.md

# Use from Source

::: warning Work in Progress
This guide is not yet complete but should get you started.
:::

You can easily add the source file to your project for full control over the [template](../docs/copybutton.md).

Download or copy the [CopyButton.vue](https://github.com/cssnr/vitepress-plugin-copybutton/blob/master/src/CopyButton.vue)
file to your project.

- Source File: [CopyButton.vue](https://github.com/cssnr/vitepress-plugin-copybutton/blob/master/src/CopyButton.vue)
- Target Location: `.vitepress/theme/components/CopyButton.vue`

Add these 2 lines to your `index.[js,ts]`.

```javascript [.vitepress/theme/index.ts]
import DefaultTheme, { VPBadge } from 'vitepress/theme' // [!code highlight]

import CopyButton from './components/CopyButton.vue' // [!code ++]

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    app.component('Badge', VPBadge) // [!code highlight]

    app.component('CB', CopyButton) // [!code ++]
  },
}
```

<Badge type="info">VPBadge</Badge> Only required if you are using the VitePress [Badge](https://vitepress.dev/reference/default-theme-badge#badge).

<div class="tip custom-block" style="padding-top: 8px; margin-top: 32px;">

See the [CopyButton Documentation](../docs/copybutton.md) for `<CB />` tag usage or view the [Examples](examples.md).

</div>

---

# support.md

# Support

[![Features](https://img.shields.io/badge/features-brightgreen?style=for-the-badge&logo=rocket&logoColor=white)](https://github.com/cssnr/vitepress-plugin-copybutton/issues/new?template=1-feature.yaml)
[![Issues](https://img.shields.io/badge/issues-red?style=for-the-badge&logo=southwestairlines&logoColor=white)](https://github.com/cssnr/vitepress-plugin-copybutton/issues)
[![Discussions](https://img.shields.io/badge/discussions-blue?style=for-the-badge&logo=theconversation)](https://github.com/cssnr/vitepress-plugin-copybutton/discussions)
[![Discord](https://img.shields.io/badge/discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/wXy6m2X8wY)

If you run into any issues or want to see any new features, please let us know!

Contributing is as easy as telling us [what features or changes](https://github.com/cssnr/vitepress-plugin-copybutton/discussions/categories/feature-requests) you want to see next…

[[toc]]

### GitHub Discussions

If you have a question or need help with anything,
start a discussion in [General](https://github.com/cssnr/vitepress-plugin-copybutton/discussions/categories/general)
or [Q&A](https://github.com/cssnr/vitepress-plugin-copybutton/discussions/categories/q-a).

If you want to see a new feature, start a discussion in
the [Feature Requests](https://github.com/cssnr/vitepress-plugin-copybutton/discussions/categories/feature-requests) section.

[![Start A Discussion](https://img.shields.io/badge/Start_A_Discussion-blue?style=for-the-badge&logo=github)](https://github.com/cssnr/vitepress-plugin-copybutton/discussions)

### GitHub Issues

If you run into any problems or find a bug, please [open an issue](https://github.com/cssnr/vitepress-plugin-copybutton/issues).

**These reports are treated with the highest priority.**

[![Report an Issue](https://img.shields.io/badge/Report_an_Issue-blue?style=for-the-badge&logo=github)](https://github.com/cssnr/vitepress-plugin-copybutton/issues)

### Discord Chat

You can chat with us about anything [on discord](https://discord.gg/wXy6m2X8wY).

From here you can contact me directly, `Shane@111150265075298304`.

[![Chat on Discord](https://img.shields.io/badge/Chat_on_Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/wXy6m2X8wY)

&nbsp;

[![Support on Ko-fi](https://cdn.prod.website-files.com/5c14e387dab576fe667689cf/670f5a01c01ea9191809398c_support_me_on_kofi_blue.png){ width="360" }](https://ko-fi.com/cssnr)

<a href="https://github.com/cssnr/vitepress-swiper">
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=cssnr/vitepress-swiper&type=date&legend=bottom-right&theme=dark" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=cssnr/vitepress-swiper&type=date&legend=bottom-right" />
   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=cssnr/vitepress-swiper&type=date&legend=bottom-right" />
 </picture>
</a>