Add copy-paste only ticks around code blocks

components/Code.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled'
 import { ReactNode } from 'react'
+import CopyPasteOnly from './CopyPasteOnly'
 
 const StyledCode = styled.code`
   padding: 0.3em;
@@ -18,9 +19,13 @@ interface Props {
 }
 
 const Code = ({ children, ...others }: Props) => (
-  <StyledCode translate="no" {...others}>
-    {children}
-  </StyledCode>
+  <>
+    <CopyPasteOnly inline>`</CopyPasteOnly>
+    <StyledCode translate="no" {...others}>
+      {children}
+    </StyledCode>
+    <CopyPasteOnly inline>`</CopyPasteOnly>
+  </>
 )
 
 export default Code

components/CopyPasteOnly.tsx

@@ -1,29 +1,44 @@
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { ReactNode } from 'react'
 
-const Container = styled.span`
-  font-size: 0;
-  line-height: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  pointer-events: none;
-  clip: rect(0, 0, 0, 0);
-  border-width: 0;
+const Container = styled('span', {
+  shouldForwardProp: (prop) => prop !== 'inline',
+})<{ inline?: boolean }>(({ inline = false }) => [
+  css`
+    font-size: 0;
+    line-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    width: 0;
+    height: 0;
+    padding: 0;
+    pointer-events: none;
+    clip: rect(0, 0, 0, 0);
+    border-width: 0;
 
-  @media print {
-    display: none;
-  }
-`
+    @media print {
+      display: none;
+    }
+  `,
+  !inline &&
+    css`
+      // Inline text needs to not have position: absolute or it will affect text
+      // selection when double clicking a paragraph.
+      // Default to non-inline to avoid possible issues with copy-paste text
+      // affecting the layout (e.g. a <CopyPasteOnly><br/></CopyPasteOnly>).
+      position: absolute;
+      top: 0;
+      left: 0;
+      // Inline text can't have a negative margin or it will affect the text
+      // spacing.
+      margin: -1px;
+    `,
+])
 
 interface Props {
   children: ReactNode
+  inline?: boolean
 }
 
 /**
@@ -32,10 +47,12 @@ interface Props {
  *
  * My main reason is to make my own life easier, copy-pasting this into tools
  * like grammarly and ChatGPT when I am reviewing. An added benefit is that it
- * will copy-paste better for people discussion it as well.
+ * will copy-paste better for people discussing it as well.
  */
-const CopyPasteOnly = ({ children }: Props) => (
-  <Container aria-hidden>{children}</Container>
+const CopyPasteOnly = ({ children, inline }: Props) => (
+  <Container aria-hidden inline={inline}>
+    {children}
+  </Container>
 )
 
 export default CopyPasteOnly