Updated the copyToClipboard button (#888)

* Updated the copyToClipboard button * Updated neeto-commons-frontend --------- Co-authored-by: Abhay V Ashokan <[email protected]>
bigbinary · Sep 12, 2023 · e408d40 · e408d40
1 parent 820eec0
commit e408d40
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 31 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -36,6 +36,8 @@
       "neetoteam": ["node_modules/@bigbinary/neeto-team-members-frontend"],
       "neetoeditor": ["node_modules/@bigbinary/neeto-editor"],
       "neetofilters": ["node_modules/@bigbinary/neeto-filters-frontend"],
+      "neetomolecules": ["node_modules/@bigbinary/neeto-molecules"],
+      "neetomolecules/*": ["node_modules/@bigbinary/neeto-molecules/*"],
       // You can add custom project specific paths below this comment
       "common": ["src/common"],
       "common/*": ["src/common/*"]

diff --git a/package.json b/package.json
@@ -30,10 +30,11 @@
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.19.0",
+    "@bigbinary/babel-preset-neeto": "^1.0.4",
     "@bigbinary/eslint-plugin-neeto": "^1.0.21",
-    "@bigbinary/neeto-commons-frontend": "^2.0.40",
+    "@bigbinary/neeto-commons-frontend": "^2.0.128",
     "@bigbinary/neeto-icons": "1.11.0",
-    "@bigbinary/neeto-molecules": "1.0.7",
+    "@bigbinary/neeto-molecules": "^1.0.94",
     "@bigbinary/neetoui": "4.4.0",
     "@honeybadger-io/react": "2.0.1",
     "@rollup/plugin-alias": "3.1.9",
@@ -150,6 +151,7 @@
     "yup": "0.32.11"
   },
   "peerDependencies": {
+    "@bigbinary/babel-preset-neeto": "latest",
     "@bigbinary/neeto-commons-frontend": "latest",
     "@bigbinary/neeto-icons": "latest",
     "@bigbinary/neeto-molecules": "latest",

diff --git a/src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx b/src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-import { copyToClipboard } from "neetocommons/utils";
-import { Copy, Down } from "neetoicons";
-import { Button, Dropdown, Input } from "neetoui";
+import { Down } from "neetoicons";
+import CopyToClipboardButton from "neetomolecules/CopyToClipboardButton";
+import { Dropdown, Input } from "neetoui";
 import { isNil } from "ramda";
 import { useTranslation } from "react-i18next";
 
@@ -20,9 +20,6 @@ const CodeBlockComponent = ({ node, updateAttributes }) => {
     language.includes(keyword)
   );
 
-  const handleCopyClick = () =>
-    copyToClipboard(node?.content?.content[0]?.text);
-
   const handleLanguageSelect = language => {
     updateAttributes({ language });
     setKeyword("");
@@ -68,11 +65,10 @@ const CodeBlockComponent = ({ node, updateAttributes }) => {
               ))}
             </Menu>
           </Dropdown>
-          <Button
-            icon={Copy}
+          <CopyToClipboardButton
             size="small"
             style="secondary"
-            onClick={handleCopyClick}
+            value={node?.content?.content[0]?.text}
           />
         </div>
         <NodeViewContent as="code" />

diff --git a/src/components/EditorContent/index.jsx b/src/components/EditorContent/index.jsx
@@ -2,18 +2,12 @@ import React, { useEffect, useRef } from "react";
 
 import classnames from "classnames";
 import DOMPurify from "dompurify";
-import { copyToClipboard } from "neetocommons/utils";
-import { Copy } from "neetoicons";
-import { Button } from "neetoui";
+import CopyToClipboardButton from "neetomolecules/CopyToClipboardButton";
 import ReactDOM from "react-dom";
 
 import { EDITOR_CONTENT_CLASSNAME, SANITIZE_OPTIONS } from "./constants";
 import { highlightCode, substituteVariables } from "./utils";
 
-const CopyButton = ({ onClick }) => (
-  <Button icon={Copy} size="small" style="text" onClick={onClick} />
-);
-
 const EditorContent = ({
   content = "",
   variables = [],
@@ -33,10 +27,14 @@ const EditorContent = ({
     preTags.forEach(preTag => {
       const button = document.createElement("div");
       button.className = "neeto-editor-codeblock-options";
-      const handleButtonClick = () => {
-        copyToClipboard(preTag.textContent);
-      };
-      ReactDOM.render(<CopyButton onClick={handleButtonClick} />, button);
+      ReactDOM.render(
+        <CopyToClipboardButton
+          size="small"
+          style="text"
+          value={preTag.textContent}
+        />,
+        button
+      );
       preTag.appendChild(button);
     });
   };

diff --git a/yarn.lock b/yarn.lock
@@ -1727,25 +1727,33 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@bigbinary/babel-preset-neeto@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@bigbinary/babel-preset-neeto/-/babel-preset-neeto-1.0.4.tgz#efcb8804b2820ebf408498a45c7d469dbe66d2f1"
+  integrity sha512-B2Yx+v19E+YNE0Ndfh9HpC/4lj5kpbU/kfBJW4u8i2xfCD2cGQ6CNeNRC0VviTbaNGAS+IbDkrXjgWZv7Gj/eg==
+  dependencies:
+    "@bigbinary/neeto-commons-frontend" "^2.0.63"
+    ramda "^0.29.0"
+
 "@bigbinary/eslint-plugin-neeto@^1.0.21":
   version "1.0.21"
   resolved "https://registry.yarnpkg.com/@bigbinary/eslint-plugin-neeto/-/eslint-plugin-neeto-1.0.21.tgz#e0d77c7b4155ddd8223d62bee220aac29b5ba682"
   integrity sha512-MHMFOlziPpqvy971Oid9464LnmesKdddFolUZLuBy7smHmr3pmvBTOln8xlsunu4zbZx+gHjgtOThuSIo11z5A==
 
-"@bigbinary/neeto-commons-frontend@^2.0.40":
-  version "2.0.40"
-  resolved "https://registry.yarnpkg.com/@bigbinary/neeto-commons-frontend/-/neeto-commons-frontend-2.0.40.tgz#f4a2864086e4b11aa9c71b7fee8aff9b1bb2e0d7"
-  integrity sha512-vyt7awSKQnngXPunaL4PjN7akahN+i/A7YrVwgVffrmB91MJhiz//wUGGbjnB2I91MUGRFShs+uD2OM2YFBlbw==
+"@bigbinary/neeto-commons-frontend@^2.0.128", "@bigbinary/neeto-commons-frontend@^2.0.63":
+  version "2.0.128"
+  resolved "https://registry.yarnpkg.com/@bigbinary/neeto-commons-frontend/-/neeto-commons-frontend-2.0.128.tgz#10e80349e8a276eb44d00af6476ff0b48b860601"
+  integrity sha512-+Ktm07BxHEsMWhnAQUMcxbN25T7RwbuB2C4jkZYgRQ8OnTbVcDfUdwJ+rQVGDklekqShYIzNBTgpNYbDXcJf3A==
 
 "@bigbinary/[email protected]":
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/@bigbinary/neeto-icons/-/neeto-icons-1.11.0.tgz#d2c2b9ef1d3c82784ffba15fdf02af47aa37e3a7"
   integrity sha512-K+BVWQpNeCLJAQLL9j7h2dbOTlUCLWkcN/1OTqUgLJveyq0T90MBE2Tyc8iWAnkCIsV3Yed4uIDiG6vH/fz9gA==
 
-"@bigbinary/[email protected].7":
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/@bigbinary/neeto-molecules/-/neeto-molecules-1.0.7.tgz#06305c0400aaff96c8d12bf9607cd217290100db"
-  integrity sha512-vFXKSRD4wBaordNf3zk66SnS7+24HdVuwvJxrUBcNZ3gzCxHgX0jQVkA+k7VRKpIyLrTkFQy8zZ782MOZmgwuw==
+"@bigbinary/neeto-molecules@^1.0.94":
+  version "1.0.94"
+  resolved "https://registry.yarnpkg.com/@bigbinary/neeto-molecules/-/neeto-molecules-1.0.94.tgz#50c1ccb01bc16d753fb6226b033f005512e4d91a"
+  integrity sha512-cdc7BmJR5tZ/BiotbBPWdEkKld6Z4HyfYjxi7wFcJUPQcxTCXAPp5TwxKaL29pVU3CoFdUpscGh7fySuRJKlHA==
 
 "@bigbinary/[email protected]":
   version "4.4.0"
@@ -12160,7 +12168,7 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-[email protected]:
+[email protected], ramda@^0.29.0:
   version "0.29.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.29.0.tgz#fbbb67a740a754c8a4cbb41e2a6e0eb8507f55fb"
   integrity sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==