fix: use react hooks to separate UI and logic (#100)

* use hooks to separate-UI-and-logic

* fix: use correct icon file

* fix: refine style

app/components/editor/copy.tsx → app/components/editor/hooks/useCopy.tsx

@@ -12,15 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
-
-interface CopyProps {
-  content: string;
-  cb: () => void;
-}
-
-const Copy = (props: CopyProps) => {
-  function copy(data: string): void {
+export default function useCopy() {
+  function copy(cb: any, data: string): void {
     const listener = (e: ClipboardEvent) => {
       if (!e.clipboardData) {
         throw new Error('Clipboard API unavailable.');
@@ -31,21 +24,10 @@ const Copy = (props: CopyProps) => {
     };
     document.addEventListener('copy', listener);
     document.execCommand('copy');
-    props.cb();
+    // props.cb();
+    cb();
   }
-
-  return (
-    <button
-      style={{ marginRight: 8 }}
-      onClick={() => {
-        return copy(
-          `${window.location.origin + window.location.pathname}#${props.content}`,
-        );
-      }}
-    >
-      COPY
-    </button>
-  );
-};
-
-export default Copy;
+  return {
+    copy,
+  };
+}