From b8d38d14482a329f945a30e7793606df6d867993 Mon Sep 17 00:00:00 2001 From: Chinmay Mhatre Date: Sat, 31 Dec 2022 15:59:50 +0530 Subject: [PATCH 1/3] copy to clipboard feature added --- components/ClipboardCopy.js | 51 +++++++++++++++++++++++++++++++++++++ pages/docs/quickstart.mdx | 36 ++++++++++++++++++++++++++ 2 files changed, 87 insertions(+) create mode 100644 components/ClipboardCopy.js diff --git a/components/ClipboardCopy.js b/components/ClipboardCopy.js new file mode 100644 index 00000000000..92cc45a87fc --- /dev/null +++ b/components/ClipboardCopy.js @@ -0,0 +1,51 @@ +import React, { useState } from "react"; + +const ClipboardCopy = ({ copyText, children }) => { + const [isCopied, setIsCopied] = useState(false); + + async function copyTextToClipboard(text) { + if ("clipboard" in navigator) { + return await navigator.clipboard.writeText(text); + } else { + return document.execCommand("copy", true, text); + } + } + + const handleCopyClick = () => { + copyTextToClipboard(copyText) + .then(() => { + setIsCopied(true); + setTimeout(() => { + setIsCopied(false); + }, 1500); + }) + .catch((err) => { + console.log(err); + }); + }; + + return ( +
+
+ +
+ {children} +
+ ); +}; + + + +export default ClipboardCopy; diff --git a/pages/docs/quickstart.mdx b/pages/docs/quickstart.mdx index d2b429ba940..a812c41df98 100644 --- a/pages/docs/quickstart.mdx +++ b/pages/docs/quickstart.mdx @@ -1,4 +1,5 @@ import DocsLayout from "../../components/layouts/DocsLayout.js"; +import ClipboardCopy from "../../components/ClipboardCopy.js"; ## Quickstart @@ -29,6 +30,15 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat 8. For the file contents use the json structure below: + ```js { "name": "Sara Jaoude", @@ -38,6 +48,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat "avatar": "https://github.com/SaraJaoude.png", } ``` + | field | type | description | | :----------------- | :------------------- | :------------------------------------------------------------------------------------------------------------ | @@ -49,6 +60,15 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat 9. Now add links to your social media and other content (for example: website) so they appear on your Profile. + ```js "links": [ { @@ -58,6 +78,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat } ] ``` + | field | type | description | | :---- | :----- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -69,6 +90,20 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat To add more links add another object inside the links collection. For example: + ```js "links": [ { @@ -83,6 +118,7 @@ To add more links add another object inside the links collection. For example: } ] ``` + 10. Scroll to the bottom and commit new file by adding the commit messsage that starts `data: ` followed by your GitHub username (for example `data: SaraJaoude`) From 952641b19573bba488e885f118c4e5eb1024e45a Mon Sep 17 00:00:00 2001 From: Chinmay Mhatre Date: Sat, 31 Dec 2022 17:13:58 +0530 Subject: [PATCH 2/3] updated handleCopyClick function to use async await --- components/ClipboardCopy.js | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/components/ClipboardCopy.js b/components/ClipboardCopy.js index 92cc45a87fc..3f91ecee4a4 100644 --- a/components/ClipboardCopy.js +++ b/components/ClipboardCopy.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; -const ClipboardCopy = ({ copyText, children }) => { +const ClipboardCopy = ({ copyText, children}) => { const [isCopied, setIsCopied] = useState(false); async function copyTextToClipboard(text) { @@ -11,17 +11,21 @@ const ClipboardCopy = ({ copyText, children }) => { } } - const handleCopyClick = () => { - copyTextToClipboard(copyText) - .then(() => { - setIsCopied(true); - setTimeout(() => { - setIsCopied(false); - }, 1500); - }) - .catch((err) => { - console.log(err); - }); + // const formatText = (str) => { + // const start = 3 + language.length; + // return str.slice(start, -3); + // } + + const handleCopyClick = async () => { + try { + await copyTextToClipboard(copyText); + setIsCopied(true); + setTimeout(() => { + setIsCopied(false); + }, 1500); + } catch (error) { + console.log(err); + } }; return ( @@ -37,8 +41,7 @@ const ClipboardCopy = ({ copyText, children }) => { Copied! ) : ( Copy - ) - } + )} {children} @@ -46,6 +49,4 @@ const ClipboardCopy = ({ copyText, children }) => { ); }; - - export default ClipboardCopy; From 4606d1ab0306ab63c7a00f6e6273de3f8d2fe2f8 Mon Sep 17 00:00:00 2001 From: Chinmay Mhatre Date: Sat, 31 Dec 2022 18:06:26 +0530 Subject: [PATCH 3/3] refactored the copy to clipboard function added react-children-utilities --- components/ClipboardCopy.js | 10 +++------- package-lock.json | 18 ++++++++++++++++-- package.json | 3 ++- pages/docs/quickstart.mdx | 35 +++-------------------------------- 4 files changed, 24 insertions(+), 42 deletions(-) diff --git a/components/ClipboardCopy.js b/components/ClipboardCopy.js index 3f91ecee4a4..793c604f70b 100644 --- a/components/ClipboardCopy.js +++ b/components/ClipboardCopy.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; +import { onlyText } from "react-children-utilities"; -const ClipboardCopy = ({ copyText, children}) => { +const ClipboardCopy = ({children}) => { const [isCopied, setIsCopied] = useState(false); async function copyTextToClipboard(text) { @@ -11,14 +12,9 @@ const ClipboardCopy = ({ copyText, children}) => { } } - // const formatText = (str) => { - // const start = 3 + language.length; - // return str.slice(start, -3); - // } - const handleCopyClick = async () => { try { - await copyTextToClipboard(copyText); + await copyTextToClipboard(onlyText(children)); setIsCopied(true); setTimeout(() => { setIsCopied(false); diff --git a/package-lock.json b/package-lock.json index 404276cae23..39a8eca8cb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "linkfree", - "version": "1.24.10", + "version": "1.29.0", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -24,6 +24,7 @@ "next": "^13", "qrcode.react": "^3.1.0", "react": "^18.2.0", + "react-children-utilities": "^2.8.0", "react-dom": "^18.2.0", "react-icons": "^4.6.0", "react-markdown": "^8.0.3", @@ -7890,6 +7891,14 @@ "node": ">=0.10.0" } }, + "node_modules/react-children-utilities": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/react-children-utilities/-/react-children-utilities-2.8.0.tgz", + "integrity": "sha512-g42oRsZLrFJgCcIdK1lad1CWujNH4gh1Cp1lsMQpHWdDjWQ8gUlaBebgy2iXofyPEpfJ4T/xt4qWrvDkgVCCNg==", + "peerDependencies": { + "react": "18 || 17 || 16 || 15" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -15059,6 +15068,11 @@ "loose-envify": "^1.1.0" } }, + "react-children-utilities": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/react-children-utilities/-/react-children-utilities-2.8.0.tgz", + "integrity": "sha512-g42oRsZLrFJgCcIdK1lad1CWujNH4gh1Cp1lsMQpHWdDjWQ8gUlaBebgy2iXofyPEpfJ4T/xt4qWrvDkgVCCNg==" + }, "react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -16205,4 +16219,4 @@ "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==" } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 71bee728132..94567f09aed 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "^13", "qrcode.react": "^3.1.0", "react": "^18.2.0", + "react-children-utilities": "^2.8.0", "react-dom": "^18.2.0", "react-icons": "^4.6.0", "react-markdown": "^8.0.3", @@ -89,4 +90,4 @@ "bugs": { "url": "https://github.com/EddieHubCommunity/LinkFree/issues" } -} \ No newline at end of file +} diff --git a/pages/docs/quickstart.mdx b/pages/docs/quickstart.mdx index a812c41df98..4e5dff6dd72 100644 --- a/pages/docs/quickstart.mdx +++ b/pages/docs/quickstart.mdx @@ -30,15 +30,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat 8. For the file contents use the json structure below: - + ```js { "name": "Sara Jaoude", @@ -60,15 +52,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat 9. Now add links to your social media and other content (for example: website) so they appear on your Profile. - + ```js "links": [ { @@ -90,20 +74,7 @@ To do this, you need a GitHub account. If you do not have one yet, you can creat To add more links add another object inside the links collection. For example: - + ```js "links": [ {