feat(editor): add permalink section in editor

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

@@ -0,0 +1,11 @@
+import { CopyArea } from './CopyArea';
+
+export default {
+  title: 'Atoms/Copy Area',
+  component: CopyArea,
+  args: {
+    value: 'Hello world',
+  },
+};
+
+export const copyArea = (args) => <CopyArea {...args} />;

packages/design-system/atoms/copy-area/CopyArea.styled.ts

@@ -0,0 +1,19 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { StyledTextInput } from '@roleypoly/design-system/atoms/text-input';
+import styled, { css } from 'styled-components';
+
+export const CopyAreaStyled = styled.div`
+  cursor: pointer;
+`;
+
+export const CopyAreaTextInput = styled(StyledTextInput)<{ copied?: boolean }>`
+  margin: 0.5em 0;
+  cursor: pointer;
+  font-size: 1em;
+  ${({ copied }) =>
+    copied &&
+    css`
+      border-color: ${palette.green400} !important;
+      box-shadow: inset 0 0 2px ${palette.green200} !important;
+    `}
+`;

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>
+  );
+};

packages/design-system/atoms/copy-area/index.ts

@@ -0,0 +1 @@
+export * from './CopyArea';

packages/design-system/atoms/text-input/TextInput.tsx

@@ -40,7 +40,7 @@ const common = css`
   }
 `;
 
-const StyledTextInput = styled.input`
+export const StyledTextInput = styled.input`
   ${common};
 `;
 
@@ -89,6 +89,7 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
 const StyledTextarea = styled.textarea`
   ${common};
   ${fontCSS};
+  margin: 0.5em 0;
 `;
 
 export const MultilineTextInput = (