@cocreate/clipboard 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/FUNDING.yml +3 -0
- package/.github/workflows/automated.yml +44 -0
- package/.github/workflows/manual.yml +44 -0
- package/CHANGELOG.md +6 -0
- package/CONTRIBUTING.md +96 -0
- package/CoCreate.config.js +20 -0
- package/LICENSE +21 -0
- package/README.md +83 -0
- package/demo/index.html +42 -0
- package/docs/index.html +230 -0
- package/package.json +65 -0
- package/prettier.config.js +16 -0
- package/release.config.js +22 -0
- package/src/index.js +132 -0
- package/webpack.config.js +94 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
name: Automated Workflow
|
|
2
|
+
on:
|
|
3
|
+
push:
|
|
4
|
+
branches:
|
|
5
|
+
- master
|
|
6
|
+
jobs:
|
|
7
|
+
about:
|
|
8
|
+
runs-on: ubuntu-latest
|
|
9
|
+
steps:
|
|
10
|
+
- name: Checkout
|
|
11
|
+
uses: actions/checkout@v3
|
|
12
|
+
- name: Setup Node.js
|
|
13
|
+
uses: actions/setup-node@v3
|
|
14
|
+
with:
|
|
15
|
+
node-version: 16
|
|
16
|
+
- name: Jaid/action-sync-node-meta
|
|
17
|
+
uses: jaid/action-sync-node-meta@v1.4.0
|
|
18
|
+
with:
|
|
19
|
+
direction: overwrite-github
|
|
20
|
+
githubToken: "${{ secrets.GITHUB }}"
|
|
21
|
+
release:
|
|
22
|
+
runs-on: ubuntu-latest
|
|
23
|
+
steps:
|
|
24
|
+
- name: Checkout
|
|
25
|
+
uses: actions/checkout@v3
|
|
26
|
+
- name: Setup Node.js
|
|
27
|
+
uses: actions/setup-node@v3
|
|
28
|
+
with:
|
|
29
|
+
node-version: 14
|
|
30
|
+
- name: Semantic Release
|
|
31
|
+
uses: cycjimmy/semantic-release-action@v3
|
|
32
|
+
id: semantic
|
|
33
|
+
with:
|
|
34
|
+
extra_plugins: |
|
|
35
|
+
@semantic-release/changelog
|
|
36
|
+
@semantic-release/git
|
|
37
|
+
@semantic-release/github
|
|
38
|
+
env:
|
|
39
|
+
GITHUB_TOKEN: "${{ secrets.GITHUB }}"
|
|
40
|
+
NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
|
|
41
|
+
outputs:
|
|
42
|
+
new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
|
|
43
|
+
new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
|
|
44
|
+
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
name: Manual Workflow
|
|
2
|
+
on:
|
|
3
|
+
workflow_dispatch:
|
|
4
|
+
inputs:
|
|
5
|
+
invalidations:
|
|
6
|
+
description: |
|
|
7
|
+
If set to 'true', invalidates previous upload.
|
|
8
|
+
default: "true"
|
|
9
|
+
required: true
|
|
10
|
+
|
|
11
|
+
jobs:
|
|
12
|
+
cdn:
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
env:
|
|
15
|
+
DRY_RUN: ${{ github.event.inputs.dry_run }}
|
|
16
|
+
GITHUB_TOKEN: "${{ secrets.GITHUB }}"
|
|
17
|
+
NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
|
|
18
|
+
|
|
19
|
+
steps:
|
|
20
|
+
- name: Checkout
|
|
21
|
+
uses: actions/checkout@v3
|
|
22
|
+
- name: setup nodejs
|
|
23
|
+
uses: actions/setup-node@v3
|
|
24
|
+
with:
|
|
25
|
+
node-version: 16
|
|
26
|
+
- name: yarn install
|
|
27
|
+
run: >
|
|
28
|
+
echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
|
|
29
|
+
.npmrc
|
|
30
|
+
|
|
31
|
+
yarn install
|
|
32
|
+
- name: yarn build
|
|
33
|
+
run: yarn build
|
|
34
|
+
- name: upload latest bundle
|
|
35
|
+
uses: CoCreate-app/CoCreate-s3@master
|
|
36
|
+
with:
|
|
37
|
+
aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
|
|
38
|
+
aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
|
|
39
|
+
distributionId: "${{ secrets.DISTRIBUTION_ID }}"
|
|
40
|
+
bucket: testcrudbucket
|
|
41
|
+
source: ./dist
|
|
42
|
+
destination: /clipboard/latest
|
|
43
|
+
acl: public-read
|
|
44
|
+
invalidations: ${{ github.event.inputs.invalidations }}
|
package/CHANGELOG.md
ADDED
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Contributing to CoCreate-clipboard
|
|
2
|
+
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-clipboard/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-clipboard/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-clipboard/issues).
|
|
6
|
+
|
|
7
|
+
In the examples below, substitute your Github username for `contributor` in URLs.
|
|
8
|
+
|
|
9
|
+
## Fork the Project
|
|
10
|
+
|
|
11
|
+
Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-clipboard) and check out your copy.
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
git clone https://github.com/contributor/CoCreate-clipboard.git
|
|
15
|
+
cd CoCreate-clipboard
|
|
16
|
+
git remote add upstream https://github.com/CoCreate-app/CoCreate-clipboard.git
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Create a Topic Branch
|
|
20
|
+
|
|
21
|
+
Make sure your fork is up-to-date and create a topic branch for your feature or bug fix on dev branch.
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
git checkout dev
|
|
25
|
+
git pull upstream dev
|
|
26
|
+
git checkout -b my-feature-branch
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Write Tests
|
|
30
|
+
|
|
31
|
+
Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build.
|
|
32
|
+
|
|
33
|
+
We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix.
|
|
34
|
+
|
|
35
|
+
## Write Code
|
|
36
|
+
|
|
37
|
+
Implement your feature or bug fix.
|
|
38
|
+
|
|
39
|
+
## Write Documentation
|
|
40
|
+
|
|
41
|
+
Document any external behavior in the [README](README.md).
|
|
42
|
+
|
|
43
|
+
## Commit Changes
|
|
44
|
+
|
|
45
|
+
Make sure git knows your name and email address:
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
git config --global user.name "Your Name"
|
|
49
|
+
git config --global user.email "contributor@example.com"
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
We use [semantic-release](https://github.com/semantic-release/semantic-release) as process to generate changelog
|
|
53
|
+
and to release. Write meaningful commits according to
|
|
54
|
+
[Commit Message Formats](https://github.com/semantic-release/semantic-release#commit-message-format) is important.
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
git add ...
|
|
58
|
+
git commit -am "commit-type(optional topic): a meaningful message"
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Here is an example of the release type that should be done based on a [semantic-release](https://github.com/semantic-release/semantic-release):
|
|
62
|
+
|
|
63
|
+
| Commit message | Release type |
|
|
64
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
|
|
65
|
+
| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release |
|
|
66
|
+
| `feat(pencil): add 'graphiteWidth' option` | ~~Minor~~ Feature Release |
|
|
67
|
+
| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
|
|
68
|
+
|
|
69
|
+
## Push
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
git push origin my-feature-branch
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Make a Pull Request
|
|
76
|
+
|
|
77
|
+
Go to [https://github.com/CoCreate-app/CoCreate-clipboard](https://github.com/CoCreate-app/CoCreate-clipboard) and select your feature branch.
|
|
78
|
+
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
79
|
+
|
|
80
|
+
## Rebase
|
|
81
|
+
|
|
82
|
+
If you've been working on a change for a while, rebase with upstream/dev.
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
git fetch upstream
|
|
86
|
+
git rebase upstream/dev
|
|
87
|
+
git push origin my-feature-branch -f
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Be Patient
|
|
91
|
+
|
|
92
|
+
It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang in there!
|
|
93
|
+
|
|
94
|
+
## Thank You
|
|
95
|
+
|
|
96
|
+
Please do know that we really appreciate and value your time and work. We love you, really.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
organization_id: "",
|
|
3
|
+
key: "",
|
|
4
|
+
host: "",
|
|
5
|
+
sources: [
|
|
6
|
+
{
|
|
7
|
+
array: "files",
|
|
8
|
+
object: {
|
|
9
|
+
_id: "639dac751fff0844144f971d",
|
|
10
|
+
name: "index.html",
|
|
11
|
+
path: "/docs/clipboard/index.html",
|
|
12
|
+
src: "{{./docs/index.html}}",
|
|
13
|
+
host: ["cocreate.app", "general.cocreate.app"],
|
|
14
|
+
directory: "clipboard",
|
|
15
|
+
"content-type": "{{content-type}}",
|
|
16
|
+
public: "true"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
]
|
|
20
|
+
};
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 CoCreate LLC
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# CoCreate-clipboard
|
|
2
|
+
|
|
3
|
+
Highlights syntax within a textarea. Easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/clipboard)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [Docs & Demo](https://cocreate.app/docs/clipboard)
|
|
15
|
+
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/clipboard)
|
|
17
|
+
|
|
18
|
+
## CDN
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<script src="https://cdn.cocreate.app/clipboard/latest/CoCreate-clipboard.min.js"></script>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="https://cdn.cocreate.app/clipboard/latest/CoCreate-clipboard.min.css"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## NPM
|
|
29
|
+
|
|
30
|
+
```shell
|
|
31
|
+
$ npm i @cocreate/clipboard
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## yarn
|
|
35
|
+
|
|
36
|
+
```shell
|
|
37
|
+
$ yarn install @cocreate/clipboard
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
# Table of Contents
|
|
41
|
+
|
|
42
|
+
- [Table of Contents](#table-of-contents)
|
|
43
|
+
- [Announcements](#announcements)
|
|
44
|
+
- [Roadmap](#roadmap)
|
|
45
|
+
- [How to Contribute](#how-to-contribute)
|
|
46
|
+
- [About](#about)
|
|
47
|
+
- [License](#license)
|
|
48
|
+
|
|
49
|
+
<a name="announcements"></a>
|
|
50
|
+
|
|
51
|
+
# Announcements
|
|
52
|
+
|
|
53
|
+
All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-clipboard/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-clipboard/releases). You may also subscribe to email for releases and breaking changes.
|
|
54
|
+
|
|
55
|
+
<a name="roadmap"></a>
|
|
56
|
+
|
|
57
|
+
# Roadmap
|
|
58
|
+
|
|
59
|
+
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreate-clipboard/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-clipboard/pulls). We would love to hear your feedback.
|
|
60
|
+
|
|
61
|
+
<a name="about"></a>
|
|
62
|
+
|
|
63
|
+
# About
|
|
64
|
+
|
|
65
|
+
CoCreate-clipboard is guided and supported by the CoCreate Developer Experience Team.
|
|
66
|
+
|
|
67
|
+
Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
|
|
68
|
+
|
|
69
|
+
CoCreate-clipboard is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
|
|
70
|
+
|
|
71
|
+
<a name="contribute"></a>
|
|
72
|
+
|
|
73
|
+
# How to Contribute
|
|
74
|
+
|
|
75
|
+
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-clipboard/blob/master/CONTRIBUTING.md) guide for details.
|
|
76
|
+
|
|
77
|
+
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-clipboard/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-clipboard/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
78
|
+
|
|
79
|
+
We appreciate your continued support, thank you!
|
|
80
|
+
|
|
81
|
+
# License
|
|
82
|
+
|
|
83
|
+
[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-clipboard/blob/master/LICENSE)
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Demo | CoCreateJS</title>
|
|
5
|
+
<link
|
|
6
|
+
rel="icon"
|
|
7
|
+
type="image/png"
|
|
8
|
+
sizes="32x32"
|
|
9
|
+
href="../assets/favicon.ico" />
|
|
10
|
+
|
|
11
|
+
<link parse="true" />
|
|
12
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
13
|
+
</head>
|
|
14
|
+
<body class="padding:20px">
|
|
15
|
+
<textarea
|
|
16
|
+
type="code"
|
|
17
|
+
theme="tomorrow"
|
|
18
|
+
lang="HTML"
|
|
19
|
+
line-numbers
|
|
20
|
+
placeholder="HTML"
|
|
21
|
+
array="demos"
|
|
22
|
+
object="639b325f6f44f0f162f0bcbf"
|
|
23
|
+
key="demo-code"
|
|
24
|
+
class="height:100vh width:100%">
|
|
25
|
+
test</textarea
|
|
26
|
+
>
|
|
27
|
+
|
|
28
|
+
<clipboard>
|
|
29
|
+
<div
|
|
30
|
+
type="code"
|
|
31
|
+
theme="tomorrow"
|
|
32
|
+
lang="HTML"
|
|
33
|
+
line-numbers
|
|
34
|
+
contenteditable="true"
|
|
35
|
+
value-type="text"></div>
|
|
36
|
+
</clipboard>
|
|
37
|
+
|
|
38
|
+
<!-- <script src="../dist/CoCreate-clipboard.js"></script> -->
|
|
39
|
+
<script src="../../../CoCreateJS/dist/CoCreate.js"></script>
|
|
40
|
+
<!-- <script src="https://CoCreate.app/dist/CoCreate.js"></script> -->
|
|
41
|
+
</body>
|
|
42
|
+
</html>
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>CoCreate-clipboard Documentation | CoCreateJS</title>
|
|
8
|
+
<link
|
|
9
|
+
rel="icon"
|
|
10
|
+
type="image/png"
|
|
11
|
+
sizes="32x32"
|
|
12
|
+
href="https://cocreate.app/images/favicon.ico" />
|
|
13
|
+
<meta
|
|
14
|
+
name="description"
|
|
15
|
+
content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
|
|
16
|
+
<meta
|
|
17
|
+
name="keywords"
|
|
18
|
+
content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
19
|
+
<meta name="robots" content="index,follow" />
|
|
20
|
+
|
|
21
|
+
<!-- CoCreate CSS CDN -->
|
|
22
|
+
|
|
23
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
24
|
+
</head>
|
|
25
|
+
|
|
26
|
+
<body>
|
|
27
|
+
<div array="" object="" key="" id="cocreate-clipboard">
|
|
28
|
+
<div
|
|
29
|
+
class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
|
|
30
|
+
<div class="display:flex align-items:center">
|
|
31
|
+
<h2>CoCreate-clipboard</h2>
|
|
32
|
+
</div>
|
|
33
|
+
<div
|
|
34
|
+
class="display:flex align-items:center font-size:20px"
|
|
35
|
+
share-height="600"
|
|
36
|
+
share-width="500"
|
|
37
|
+
share-media="https://via.placeholder.com/300/09f/fff.png">
|
|
38
|
+
<a
|
|
39
|
+
href="https://github.com/CoCreate-app/CoCreate-clipboard"
|
|
40
|
+
target="_blank"
|
|
41
|
+
class="margin-right:15px"
|
|
42
|
+
><i src="/assets/svg/github.svg"></i
|
|
43
|
+
></a>
|
|
44
|
+
<a
|
|
45
|
+
class="margin-right:15px share"
|
|
46
|
+
share-network="twitter"
|
|
47
|
+
title="Share on twitter"
|
|
48
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
49
|
+
></a>
|
|
50
|
+
<a
|
|
51
|
+
class="margin-right:15px share"
|
|
52
|
+
share-network="facebook"
|
|
53
|
+
title="Share on Facebook"
|
|
54
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
55
|
+
></a>
|
|
56
|
+
<a
|
|
57
|
+
class="margin-right:15px share"
|
|
58
|
+
share-network="instagram"
|
|
59
|
+
title="Share on instagram"
|
|
60
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
61
|
+
></a>
|
|
62
|
+
<a
|
|
63
|
+
class="margin-right:15px share"
|
|
64
|
+
share-network="share"
|
|
65
|
+
title="Share on share"
|
|
66
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
67
|
+
></a>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
<h1 class="max-width:500px margin:20px_10px">
|
|
71
|
+
A simple HTML5, CSS and pure javascript component. Easy
|
|
72
|
+
configuration using data-attributes and highly styleable.
|
|
73
|
+
</h1>
|
|
74
|
+
<div id="clipboard-section" class="display:flex flex-wrap:wrap">
|
|
75
|
+
<div class="flex-grow:1 width:300px padding:20px_10px">
|
|
76
|
+
<h2
|
|
77
|
+
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
|
|
78
|
+
Install
|
|
79
|
+
</h2>
|
|
80
|
+
<pre
|
|
81
|
+
class="margin-top:15px"><code class="language-javascript">npm install cocreate-clipboard</code></pre>
|
|
82
|
+
<p class="padding:10px_0px">Or you can use cdn link:</p>
|
|
83
|
+
<pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-clipboard.min.js</code></pre>
|
|
84
|
+
|
|
85
|
+
<h2
|
|
86
|
+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
|
|
87
|
+
Usage
|
|
88
|
+
</h2>
|
|
89
|
+
<p class="padding:10px_0px">clipboard usage content</p>
|
|
90
|
+
<pre><code class="language-html"><div></div></code></pre>
|
|
91
|
+
|
|
92
|
+
<h2
|
|
93
|
+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
|
|
94
|
+
Reference
|
|
95
|
+
</h2>
|
|
96
|
+
<p class="padding:10px_0px">
|
|
97
|
+
This is clipboard reference content
|
|
98
|
+
</p>
|
|
99
|
+
<pre><code class="language-javascript"><div></div></code></pre>
|
|
100
|
+
<p class="padding:10px_0px">
|
|
101
|
+
This is clipboard reference content
|
|
102
|
+
</p>
|
|
103
|
+
|
|
104
|
+
<h2
|
|
105
|
+
class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
|
|
106
|
+
Attributes
|
|
107
|
+
</h2>
|
|
108
|
+
<ul class="list-style-type:none">
|
|
109
|
+
<li
|
|
110
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
111
|
+
<h4>
|
|
112
|
+
<span>clipboard</span>
|
|
113
|
+
<span class="cocreate-badge success"
|
|
114
|
+
>string</span
|
|
115
|
+
>
|
|
116
|
+
<span class="cocreate-badge warning"
|
|
117
|
+
>optional</span
|
|
118
|
+
>
|
|
119
|
+
</h4>
|
|
120
|
+
<p>clipboard-attribute</p>
|
|
121
|
+
</li>
|
|
122
|
+
<li
|
|
123
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
124
|
+
<h4>
|
|
125
|
+
<span>clipboard</span>
|
|
126
|
+
<span class="cocreate-badge success"
|
|
127
|
+
>string</span
|
|
128
|
+
>
|
|
129
|
+
<span class="cocreate-badge warning"
|
|
130
|
+
>optional</span
|
|
131
|
+
>
|
|
132
|
+
</h4>
|
|
133
|
+
<p>clipboard-attribute</p>
|
|
134
|
+
</li>
|
|
135
|
+
</ul>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div
|
|
139
|
+
class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
|
|
140
|
+
<!-- SandBox -->
|
|
141
|
+
<h2
|
|
142
|
+
class="border-bottom:1px_solid_lightgrey padding:5px_0px">
|
|
143
|
+
Demo
|
|
144
|
+
</h2>
|
|
145
|
+
<div
|
|
146
|
+
class="position:sticky top:0 padding:10px_0px height:100vh">
|
|
147
|
+
<!-- SandBox -->
|
|
148
|
+
<div
|
|
149
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
150
|
+
id="playground">
|
|
151
|
+
<div
|
|
152
|
+
id="demo-code"
|
|
153
|
+
resizable
|
|
154
|
+
class="position:relative height:50%">
|
|
155
|
+
<textarea
|
|
156
|
+
type="code"
|
|
157
|
+
lang="html"
|
|
158
|
+
array="demos"
|
|
159
|
+
object=""
|
|
160
|
+
key="demo"
|
|
161
|
+
save="false"
|
|
162
|
+
id="demo"
|
|
163
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
164
|
+
<div
|
|
165
|
+
resize="bottom"
|
|
166
|
+
class="background:lightgrey"></div>
|
|
167
|
+
</div>
|
|
168
|
+
|
|
169
|
+
<div
|
|
170
|
+
id="demo-preview"
|
|
171
|
+
class="position:relative overflow:auto background-color:white">
|
|
172
|
+
<div class="demopreview padding:20px"></div>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<div
|
|
176
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
|
|
177
|
+
<a
|
|
178
|
+
class="margin-right:10px"
|
|
179
|
+
id="eye"
|
|
180
|
+
show="#eye-slash"
|
|
181
|
+
hide="#eye, #demo-preview"
|
|
182
|
+
toggle="code-height"
|
|
183
|
+
toggle-selector="#demo-code"
|
|
184
|
+
><i
|
|
185
|
+
class="height:18px"
|
|
186
|
+
src="/assets/svg/eye.svg"></i
|
|
187
|
+
></a>
|
|
188
|
+
<a
|
|
189
|
+
class="margin-right:10px"
|
|
190
|
+
hidden
|
|
191
|
+
id="eye-slash"
|
|
192
|
+
show="#eye, #demo-preview"
|
|
193
|
+
hide="#eye-slash"
|
|
194
|
+
toggle="code-height"
|
|
195
|
+
toggle-selector="#demo-code"
|
|
196
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
197
|
+
></a>
|
|
198
|
+
<a
|
|
199
|
+
class="margin-right:10px"
|
|
200
|
+
id="code"
|
|
201
|
+
show="#code-slash"
|
|
202
|
+
hide="#code, #demo-code"
|
|
203
|
+
><i src="/assets/svg/code.svg"></i
|
|
204
|
+
></a>
|
|
205
|
+
<a
|
|
206
|
+
class="margin-right:10px"
|
|
207
|
+
hidden
|
|
208
|
+
id="code-slash"
|
|
209
|
+
show="#code, #demo-code"
|
|
210
|
+
hide="#code-slash"
|
|
211
|
+
><i
|
|
212
|
+
class="height:18px"
|
|
213
|
+
src="/assets/svg/code.svg"></i
|
|
214
|
+
></a>
|
|
215
|
+
<a
|
|
216
|
+
class="margin-right:5px"
|
|
217
|
+
fullscreen
|
|
218
|
+
fullscreen-selector="#playground"></a>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
<!-- End SandBox -->
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<!--CoCreateJS-->
|
|
228
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
229
|
+
</body>
|
|
230
|
+
</html>
|
package/package.json
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cocreate/clipboard",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A simple clipboard component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"clipboard",
|
|
7
|
+
"cocreate",
|
|
8
|
+
"low-code-framework",
|
|
9
|
+
"no-code-framework",
|
|
10
|
+
"cocreatejs",
|
|
11
|
+
"cocreatejs-component",
|
|
12
|
+
"cocreate-framework",
|
|
13
|
+
"no-code",
|
|
14
|
+
"low-code",
|
|
15
|
+
"collaborative-framework",
|
|
16
|
+
"realtime",
|
|
17
|
+
"realtime-framework",
|
|
18
|
+
"collaboration",
|
|
19
|
+
"shared-editing",
|
|
20
|
+
"html5-framework",
|
|
21
|
+
"javascript-framework"
|
|
22
|
+
],
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"start": "npx webpack --config webpack.config.js",
|
|
28
|
+
"build": "npx webpack --mode=production --config webpack.config.js",
|
|
29
|
+
"dev": "npx webpack --config webpack.config.js --watch",
|
|
30
|
+
"postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
|
|
31
|
+
},
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "git+https://github.com/CoCreate-app/CoCreate-clipboard.git"
|
|
35
|
+
},
|
|
36
|
+
"author": "CoCreate LLC",
|
|
37
|
+
"license": "MIT",
|
|
38
|
+
"bugs": {
|
|
39
|
+
"url": "https://github.com/CoCreate-app/CoCreate-clipboard/issues"
|
|
40
|
+
},
|
|
41
|
+
"homepage": "https://cocreate.app/docs/clipboard",
|
|
42
|
+
"funding": {
|
|
43
|
+
"type": "GitHub Sponsors ❤",
|
|
44
|
+
"url": "https://github.com/sponsors/CoCreate-app"
|
|
45
|
+
},
|
|
46
|
+
"main": "./src/index.js",
|
|
47
|
+
"devDependencies": {
|
|
48
|
+
"@babel/core": "^7.9.6",
|
|
49
|
+
"@babel/preset-env": "^7.9.6",
|
|
50
|
+
"babel-loader": "^8.1.0",
|
|
51
|
+
"clean-webpack-plugin": "^3.0.0",
|
|
52
|
+
"file-loader": "^6.2.0",
|
|
53
|
+
"mini-css-extract-plugin": "^1.5.0",
|
|
54
|
+
"style-loader": "^3.3.1",
|
|
55
|
+
"terser-webpack-plugin": "^5.1.1",
|
|
56
|
+
"webpack": "^5.24.4",
|
|
57
|
+
"webpack-cli": "^4.5.0",
|
|
58
|
+
"webpack-log": "^3.0.1"
|
|
59
|
+
},
|
|
60
|
+
"dependencies": {
|
|
61
|
+
"@cocreate/actions": "1.20.0",
|
|
62
|
+
"@cocreate/observer": "1.17.0",
|
|
63
|
+
"@cocreate/utils": "1.37.0"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
dryRun: false,
|
|
3
|
+
branches: ["master"],
|
|
4
|
+
plugins: [
|
|
5
|
+
"@semantic-release/commit-analyzer",
|
|
6
|
+
"@semantic-release/release-notes-generator",
|
|
7
|
+
[
|
|
8
|
+
"@semantic-release/changelog",
|
|
9
|
+
{
|
|
10
|
+
changelogFile: "CHANGELOG.md",
|
|
11
|
+
},
|
|
12
|
+
],
|
|
13
|
+
"@semantic-release/npm",
|
|
14
|
+
"@semantic-release/github",
|
|
15
|
+
[
|
|
16
|
+
"@semantic-release/git",
|
|
17
|
+
{
|
|
18
|
+
assets: ["CHANGELOG.md", "package.json"],
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
],
|
|
22
|
+
};
|
package/src/index.js
ADDED
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/********************************************************************************
|
|
2
|
+
* Copyright (C) 2020 CoCreate LLC and others.
|
|
3
|
+
*
|
|
4
|
+
*
|
|
5
|
+
* SPDX-License-Identifier: MIT
|
|
6
|
+
********************************************************************************/
|
|
7
|
+
|
|
8
|
+
import "@cocreate/element-prototype";
|
|
9
|
+
import { queryElements } from "@cocreate/utils";
|
|
10
|
+
import Actions from "@cocreate/actions";
|
|
11
|
+
import Observer from "@cocreate/observer";
|
|
12
|
+
|
|
13
|
+
const selector =
|
|
14
|
+
"[clipboard-selector], [clipboard-closest], [clipboard-parent], [clipboard-next], [clipboard-previous]";
|
|
15
|
+
|
|
16
|
+
function init(element) {
|
|
17
|
+
if (!element) {
|
|
18
|
+
element = document.querySelectorAll(selector);
|
|
19
|
+
for (let i = 0; i < element.length; i++) {
|
|
20
|
+
initElement(element[i]);
|
|
21
|
+
}
|
|
22
|
+
} else {
|
|
23
|
+
if (
|
|
24
|
+
!(element instanceof HTMLCollection) &&
|
|
25
|
+
!(element instanceof NodeList) &&
|
|
26
|
+
!Array.isArray(element)
|
|
27
|
+
) {
|
|
28
|
+
element = [element];
|
|
29
|
+
}
|
|
30
|
+
for (let i = 0; i < element.length; i++) {
|
|
31
|
+
if (element[i].matches(selector)) {
|
|
32
|
+
initElement(element[i]);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function initElement(element) {
|
|
39
|
+
// Add a click event listener to trigger the clipboard action
|
|
40
|
+
element.addEventListener("click", () => {
|
|
41
|
+
let actions = element.getAttribute("actions");
|
|
42
|
+
if (actions && !actions.includes("clipboard")) {
|
|
43
|
+
queryClipboardElement(element);
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function queryClipboardElement(element) {
|
|
49
|
+
let elements = queryElements({ element, prefix: "clipboard" });
|
|
50
|
+
if (elements === false) {
|
|
51
|
+
elements = [element];
|
|
52
|
+
}
|
|
53
|
+
clipboard(elements);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
async function clipboard(elements) {
|
|
57
|
+
if (!elements) return;
|
|
58
|
+
if (
|
|
59
|
+
!(elements instanceof HTMLCollection) &&
|
|
60
|
+
!(elements instanceof NodeList) &&
|
|
61
|
+
!Array.isArray(elements)
|
|
62
|
+
) {
|
|
63
|
+
elements = [elements];
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
try {
|
|
67
|
+
// Collect values from all elements
|
|
68
|
+
let content = "";
|
|
69
|
+
|
|
70
|
+
for (let element of elements) {
|
|
71
|
+
const value = await element.getValue();
|
|
72
|
+
if (value) {
|
|
73
|
+
content += `${value}\n`; // Separate values by newline
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Remove trailing newline
|
|
78
|
+
content = content.trim();
|
|
79
|
+
|
|
80
|
+
// Copy to clipboard
|
|
81
|
+
await navigator.clipboard.writeText(content);
|
|
82
|
+
|
|
83
|
+
console.log("Copied to clipboard:", content);
|
|
84
|
+
|
|
85
|
+
document.dispatchEvent(
|
|
86
|
+
new CustomEvent("clipboarded", {
|
|
87
|
+
detail: { content }
|
|
88
|
+
})
|
|
89
|
+
);
|
|
90
|
+
} catch (error) {
|
|
91
|
+
console.error("Failed to copy to clipboard:", error);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
init();
|
|
96
|
+
|
|
97
|
+
Actions.init([
|
|
98
|
+
{
|
|
99
|
+
name: "clipboard",
|
|
100
|
+
endEvent: "clipboarded",
|
|
101
|
+
callback: (action) => {
|
|
102
|
+
queryClipboardElement(action.element);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
]);
|
|
106
|
+
|
|
107
|
+
Observer.init({
|
|
108
|
+
name: "CoCreateClipboardAddedNodes",
|
|
109
|
+
observe: ["addedNodes"],
|
|
110
|
+
selector,
|
|
111
|
+
callback(mutation) {
|
|
112
|
+
initElement(mutation.target);
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
|
|
116
|
+
Observer.init({
|
|
117
|
+
name: "CoCreateClipboardObserver",
|
|
118
|
+
observe: ["attributes"],
|
|
119
|
+
attributeName: [
|
|
120
|
+
"clipboard-selector",
|
|
121
|
+
"clipboard-closest",
|
|
122
|
+
"clipboard-parent",
|
|
123
|
+
"clipboard-next",
|
|
124
|
+
"clipboard-previous"
|
|
125
|
+
],
|
|
126
|
+
selector,
|
|
127
|
+
callback: function (mutation) {
|
|
128
|
+
initElement(mutation.target);
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
|
|
132
|
+
export default { init, clipboard };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
const path = require("path");
|
|
2
|
+
const TerserPlugin = require("terser-webpack-plugin");
|
|
3
|
+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
4
|
+
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
|
5
|
+
|
|
6
|
+
module.exports = (env, argv) => {
|
|
7
|
+
let isProduction = false;
|
|
8
|
+
if (argv.mode === "production") isProduction = true;
|
|
9
|
+
|
|
10
|
+
const config = {
|
|
11
|
+
entry: {
|
|
12
|
+
"CoCreate-clipboard": "./src/index.js"
|
|
13
|
+
},
|
|
14
|
+
output: {
|
|
15
|
+
path: path.resolve(__dirname, "dist"),
|
|
16
|
+
filename: isProduction ? "[name].min.js" : "[name].js",
|
|
17
|
+
libraryTarget: "umd",
|
|
18
|
+
libraryExport: "default",
|
|
19
|
+
library: ["CoCreate", "clipboard"],
|
|
20
|
+
globalObject: "this"
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
plugins: [
|
|
24
|
+
new CleanWebpackPlugin(),
|
|
25
|
+
new MiniCssExtractPlugin({
|
|
26
|
+
filename: "[name].css"
|
|
27
|
+
})
|
|
28
|
+
],
|
|
29
|
+
// Default mode for Webpack is production.
|
|
30
|
+
// Depending on mode Webpack will apply different things
|
|
31
|
+
// on final bundle. For now we don't need production's JavaScript
|
|
32
|
+
// minifying and other thing so let's set mode to development
|
|
33
|
+
mode: isProduction ? "production" : "development",
|
|
34
|
+
module: {
|
|
35
|
+
rules: [
|
|
36
|
+
{
|
|
37
|
+
test: /.js$/,
|
|
38
|
+
exclude: /(node_modules)/,
|
|
39
|
+
use: {
|
|
40
|
+
loader: "babel-loader",
|
|
41
|
+
options: {
|
|
42
|
+
plugins: [
|
|
43
|
+
"@babel/plugin-transform-modules-commonjs"
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
test: /.css$/i,
|
|
50
|
+
use: [
|
|
51
|
+
{
|
|
52
|
+
loader: "style-loader",
|
|
53
|
+
options: { injectType: "linkTag" }
|
|
54
|
+
},
|
|
55
|
+
"file-loader"
|
|
56
|
+
]
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
},
|
|
60
|
+
|
|
61
|
+
// add source map
|
|
62
|
+
...(isProduction ? {} : { devtool: "eval-source-map" }),
|
|
63
|
+
|
|
64
|
+
optimization: {
|
|
65
|
+
minimize: true,
|
|
66
|
+
minimizer: [
|
|
67
|
+
new TerserPlugin({
|
|
68
|
+
extractComments: true,
|
|
69
|
+
// cache: true,
|
|
70
|
+
parallel: true,
|
|
71
|
+
// sourceMap: true, // Must be set to true if using source-maps in production
|
|
72
|
+
terserOptions: {
|
|
73
|
+
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
|
|
74
|
+
// extractComments: 'all',
|
|
75
|
+
compress: {
|
|
76
|
+
drop_console: true
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
})
|
|
80
|
+
],
|
|
81
|
+
splitChunks: {
|
|
82
|
+
chunks: "all",
|
|
83
|
+
minSize: 200,
|
|
84
|
+
// maxSize: 99999,
|
|
85
|
+
//minChunks: 1,
|
|
86
|
+
|
|
87
|
+
cacheGroups: {
|
|
88
|
+
defaultVendors: false
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
return config;
|
|
94
|
+
};
|