@cocreate/clipboard 1.0.0 → 1.1.1

package/.github/workflows/automated.yml

@@ -22,13 +22,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 22 # Required for the latest semantic-release plugins
       - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v3
+        uses: cycjimmy/semantic-release-action@v4 # Update to v4 for better Node 20+ support
         id: semantic
         with:
           extra_plugins: |
@@ -36,9 +36,8 @@ jobs:
             @semantic-release/git
             @semantic-release/github
         env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB }}"
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}" # Use the built-in token if possible
           NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
     outputs:
       new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
       new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
-

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [1.1.1](https://github.com/CoCreate-app/CoCreate-clipboard/compare/v1.1.0...v1.1.1) (2026-01-18)
+
+
+### Bug Fixes
+
+* update worklow ([c54f11a](https://github.com/CoCreate-app/CoCreate-clipboard/commit/c54f11a9df499522afc5805d99538099d7314704))
+
+# [1.1.0](https://github.com/CoCreate-app/CoCreate-clipboard/compare/v1.0.0...v1.1.0) (2025-05-01)
+
+
+### Bug Fixes
+
+* added css-loader ([03d2c12](https://github.com/CoCreate-app/CoCreate-clipboard/commit/03d2c12b1f56ced186877939c15e81932ed6e871))
+* update [@cocreate](https://github.com/cocreate) dependencies ([22fa8a8](https://github.com/CoCreate-app/CoCreate-clipboard/commit/22fa8a8329001ba632b2430ae564c941090a6c09))
+* update query attributes ([48297b3](https://github.com/CoCreate-app/CoCreate-clipboard/commit/48297b37408552c5c765d812124ff510e65e7751))
+* webpack.config and devdependencies ([bd741fc](https://github.com/CoCreate-app/CoCreate-clipboard/commit/bd741fca61bd135a811f743689d2ba5faaaa13bd))
+
+
+### Features
+
+* handles rich text editors and plain text editors ([3cfd47b](https://github.com/CoCreate-app/CoCreate-clipboard/commit/3cfd47ba9f3837f87aa7c46644edcfb28dc304b9))
+
 # 1.0.0 (2024-12-14)
 
 

package/docs/index.html

@@ -180,7 +180,7 @@
 									show="#eye-slash"
 									hide="#eye, #demo-preview"
 									toggle="code-height"
-									toggle-selector="#demo-code"
+									toggle-query="#demo-code"
 									><i
 										class="height:18px"
 										src="/assets/svg/eye.svg"></i
@@ -192,7 +192,7 @@
 									show="#eye, #demo-preview"
 									hide="#eye-slash"
 									toggle="code-height"
-									toggle-selector="#demo-code"
+									toggle-query="#demo-code"
 									><i src="/assets/svg/eye-slash.svg"></i
 								></a>
 								<a
@@ -215,7 +215,7 @@
 								<a
 									class="margin-right:5px"
 									fullscreen
-									fullscreen-selector="#playground"></a>
+									fullscreen-query="#playground"></a>
 							</div>
 						</div>
 						<!-- End SandBox -->

package/package.json

@@ -1,18 +1,10 @@
 {
   "name": "@cocreate/clipboard",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "A simple clipboard component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "clipboard",
-    "cocreate",
-    "low-code-framework",
-    "no-code-framework",
-    "cocreatejs",
-    "cocreatejs-component",
-    "cocreate-framework",
-    "no-code",
     "low-code",
-    "collaborative-framework",
     "realtime",
     "realtime-framework",
     "collaboration",
@@ -45,21 +37,18 @@
   },
   "main": "./src/index.js",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "^5.1.3",
+    "esbuild": "^0.25.2",
+    "esbuild-loader": "^4.3.0",
     "mini-css-extract-plugin": "^1.5.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.1.1",
     "webpack": "^5.24.4",
     "webpack-cli": "^4.5.0",
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/actions": "1.20.0",
-    "@cocreate/observer": "1.17.0",
-    "@cocreate/utils": "1.37.0"
+    "@cocreate/actions": "^1.21.1",
+    "@cocreate/element-prototype": "^1.29.1",
+    "@cocreate/observer": "^1.18.1",
+    "@cocreate/utils": "^1.39.0"
   }
 }

package/src/index.js

@@ -10,28 +10,22 @@ import { queryElements } from "@cocreate/utils";
 import Actions from "@cocreate/actions";
 import Observer from "@cocreate/observer";
 
-const selector =
-	"[clipboard-selector], [clipboard-closest], [clipboard-parent], [clipboard-next], [clipboard-previous]";
+const selector = "[clipboard-query]";
 
 function init(element) {
 	if (!element) {
 		element = document.querySelectorAll(selector);
-		for (let i = 0; i < element.length; i++) {
+	} else if (
+		!(element instanceof HTMLCollection) &&
+		!(element instanceof NodeList) &&
+		!Array.isArray(element)
+	) {
+		element = [element];
+	}
+	for (let i = 0; i < element.length; i++) {
+		if (element[i].matches(selector)) {
 			initElement(element[i]);
 		}
-	} else {
-		if (
-			!(element instanceof HTMLCollection) &&
-			!(element instanceof NodeList) &&
-			!Array.isArray(element)
-		) {
-			element = [element];
-		}
-		for (let i = 0; i < element.length; i++) {
-			if (element[i].matches(selector)) {
-				initElement(element[i]);
-			}
-		}
 	}
 }
 
@@ -46,14 +40,17 @@ function initElement(element) {
 }
 
 function queryClipboardElement(element) {
-	let elements = queryElements({ element, prefix: "clipboard" });
-	if (elements === false) {
+	let elements = [];
+	if (element.hasAttribute("clipboard-query")) {
+		elements = queryElements({ element, prefix: "clipboard" });
+	} else {
 		elements = [element];
 	}
-	clipboard(elements);
+
+	clipboard(element, elements);
 }
 
-async function clipboard(elements) {
+async function clipboard(element, elements) {
 	if (!elements) return;
 	if (
 		!(elements instanceof HTMLCollection) &&
@@ -64,27 +61,49 @@ async function clipboard(elements) {
 	}
 
 	try {
-		// Collect values from all elements
-		let content = "";
+		const clipboardItems = [];
 
 		for (let element of elements) {
-			const value = await element.getValue();
-			if (value) {
-				content += `${value}\n`; // Separate values by newline
+			let value = await element.getValue();
+			const valueType = element.getAttribute("clipboard-value-type");
+			if (valueType === "innerText") {
+				value = value.replace(/<[^>]*>/g, "");
+				new ClipboardItem({
+					"text/plain": new Blob([value], {
+						type: "text/plain"
+					})
+				});
+			} else if (typeof value === "string") {
+				// Handle string content as plain text
+				clipboardItems.push(
+					new ClipboardItem({
+						"text/plain": new Blob([value], { type: "text/plain" }),
+						"text/html": new Blob([value], {
+							type: "text/html"
+						}) // Render as code block in rich editors
+					})
+				);
+			} else if (value instanceof Blob) {
+				// Handle Blob content directly
+				clipboardItems.push(
+					new ClipboardItem({
+						[value.type]: value
+					})
+				);
+			} else {
+				console.warn("Unsupported value type for clipboard:", value);
 			}
 		}
 
-		// Remove trailing newline
-		content = content.trim();
-
-		// Copy to clipboard
-		await navigator.clipboard.writeText(content);
-
-		console.log("Copied to clipboard:", content);
+		if (clipboardItems.length > 0) {
+			await navigator.clipboard.write(clipboardItems);
+		} else {
+			console.warn("No valid content to copy to clipboard.");
+		}
 
-		document.dispatchEvent(
+		element.dispatchEvent(
 			new CustomEvent("clipboarded", {
-				detail: { content }
+				detail: { clipboardItems }
 			})
 		);
 	} catch (error) {
@@ -99,14 +118,14 @@ Actions.init([
 		name: "clipboard",
 		endEvent: "clipboarded",
 		callback: (action) => {
-			queryClipboardElement(action.element);
+			queryClipboardElement(action);
 		}
 	}
 ]);
 
 Observer.init({
 	name: "CoCreateClipboardAddedNodes",
-	observe: ["addedNodes"],
+	types: ["addedNodes"],
 	selector,
 	callback(mutation) {
 		initElement(mutation.target);
@@ -115,14 +134,8 @@ Observer.init({
 
 Observer.init({
 	name: "CoCreateClipboardObserver",
-	observe: ["attributes"],
-	attributeName: [
-		"clipboard-selector",
-		"clipboard-closest",
-		"clipboard-parent",
-		"clipboard-next",
-		"clipboard-previous"
-	],
+	types: ["attributes"],
+	attributeFilter: ["clipboard-query"],
 	selector,
 	callback: function (mutation) {
 		initElement(mutation.target);

package/webpack.config.js

@@ -1,94 +1,65 @@
-const path = require("path");
-const TerserPlugin = require("terser-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
-
-module.exports = (env, argv) => {
-	let isProduction = false;
-	if (argv.mode === "production") isProduction = true;
-
-	const config = {
-		entry: {
-			"CoCreate-clipboard": "./src/index.js"
-		},
-		output: {
-			path: path.resolve(__dirname, "dist"),
-			filename: isProduction ? "[name].min.js" : "[name].js",
-			libraryTarget: "umd",
-			libraryExport: "default",
-			library: ["CoCreate", "clipboard"],
-			globalObject: "this"
-		},
-
-		plugins: [
-			new CleanWebpackPlugin(),
-			new MiniCssExtractPlugin({
-				filename: "[name].css"
-			})
-		],
-		// Default mode for Webpack is production.
-		// Depending on mode Webpack will apply different things
-		// on final bundle. For now we don't need production's JavaScript
-		// minifying and other thing so let's set mode to development
-		mode: isProduction ? "production" : "development",
-		module: {
-			rules: [
-				{
-					test: /.js$/,
-					exclude: /(node_modules)/,
-					use: {
-						loader: "babel-loader",
-						options: {
-							plugins: [
-								"@babel/plugin-transform-modules-commonjs"
-							]
-						}
-					}
-				},
-				{
-					test: /.css$/i,
-					use: [
-						{
-							loader: "style-loader",
-							options: { injectType: "linkTag" }
-						},
-						"file-loader"
-					]
-				}
-			]
-		},
-
-		// add source map
-		...(isProduction ? {} : { devtool: "eval-source-map" }),
-
-		optimization: {
-			minimize: true,
-			minimizer: [
-				new TerserPlugin({
-					extractComments: true,
-					// cache: true,
-					parallel: true,
-					// sourceMap: true, // Must be set to true if using source-maps in production
-					terserOptions: {
-						// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-						// extractComments: 'all',
-						compress: {
-							drop_console: true
-						}
-					}
-				})
-			],
-			splitChunks: {
-				chunks: "all",
-				minSize: 200,
-				// maxSize: 99999,
-				//minChunks: 1,
-
-				cacheGroups: {
-					defaultVendors: false
-				}
-			}
-		}
-	};
-	return config;
-};
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { EsbuildPlugin } = require("esbuild-loader");
+const { FileUploader } = require("@cocreate/webpack");
+
+module.exports = async (env, argv) => {
+	const isProduction = argv && argv.mode === "production";
+	const config = {
+		entry: {
+			"CoCreate-clipboard": "./src/index.js"
+		},
+		output: {
+			path: path.resolve(__dirname, "dist"),
+			filename: isProduction ? "[name].min.js" : "[name].js",
+			libraryExport: "default",
+			library: ["CoCreate", "clipboard"],
+			clean: true
+		},
+		plugins: [
+			new MiniCssExtractPlugin({
+				filename: isProduction ? "[name].min.css" : "[name].css"
+			}),
+			new FileUploader(env, argv)
+		],
+		mode: isProduction ? "production" : "development",
+		devtool: isProduction ? "source-map" : "eval-source-map",
+		module: {
+			rules: [
+				{
+					test: /.js$/,
+					exclude: /node_modules/,
+					use: {
+						loader: "esbuild-loader",
+						options: {
+							loader: "js",
+							target: "es2017"
+						}
+					}
+				},
+				{
+					test: /.css$/i,
+					use: [MiniCssExtractPlugin.loader, "css-loader"]
+				}
+			]
+		},
+		optimization: {
+			minimize: isProduction,
+			minimizer: [
+				new EsbuildPlugin({
+					target: "es2017",
+					css: true
+				})
+			],
+			splitChunks: {
+				cacheGroups: {
+					defaultVendors: false
+				}
+			}
+		},
+		performance: {
+			hints: isProduction ? "warning" : false
+		}
+	};
+	return config;
+};