feat(editor): add permalink section in editor

packages/design-system/atoms/copy-area/CopyArea.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+import { CopyAreaStyled, CopyAreaTextInput } from './CopyArea.styled';
+
+type CopyAreaProps = {
+  value: string;
+};
+
+enum CopyState {
+  NotCopied = 0,
+  Copied = 1,
+}
+
+export const CopyArea = (props: CopyAreaProps) => {
+  const [copied, setCopied] = React.useState<CopyState>(CopyState.NotCopied);
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    inputRef.current?.setSelectionRange(0, 99999);
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(props.value);
+      setCopied(CopyState.Copied);
+    }
+  };
+
+  const strings = {
+    [CopyState.NotCopied]: `Press ⌘/Ctrl+C to copy`,
+    [CopyState.Copied]: 'Copied to clipboard!',
+  };
+
+  return (
+    <CopyAreaStyled>
+      <CopyAreaTextInput
+        ref={inputRef}
+        value={props.value}
+        onClick={handleClick}
+        onBlur={() => setCopied(CopyState.NotCopied)}
+        copied={copied === CopyState.Copied}
+        data-tip={strings[copied]}
+        data-for={'copy-area'}
+      />
+      <ReactTooltip id="copy-area" />
+    </CopyAreaStyled>
+  );
+};