From bb81a5405540bf8b540e00683a2951c4d3edd174 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Jun 2023 22:17:34 -0700
Subject: [PATCH] Added new Textarea component

This is a content editable div to prepare for when we add tagging and formatting
---
 components/common/Textarea/index.module.scss | 42 ++++++++++++++++++++
 components/common/Textarea/index.tsx         | 40 +++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 components/common/Textarea/index.module.scss
 create mode 100644 components/common/Textarea/index.tsx

diff --git a/components/common/Textarea/index.module.scss b/components/common/Textarea/index.module.scss
new file mode 100644
index 00000000..436f6a5f
--- /dev/null
+++ b/components/common/Textarea/index.module.scss
@@ -0,0 +1,42 @@
+.textarea {
+  -webkit-font-smoothing: antialiased;
+  background-color: var(--input-bg);
+  border: 2px solid transparent;
+  border-radius: $input-corner;
+  box-sizing: border-box;
+  color: var(--text-primary);
+  display: block;
+  font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  font-size: $font-regular;
+  line-height: 1.4;
+  overflow: scroll;
+  min-height: $unit-10x;
+  padding: $unit * 1.5 $unit-2x;
+  white-space: pre-wrap;
+  width: 100%;
+
+  &:focus {
+    border: 2px solid $blue;
+    outline: none;
+  }
+
+  &.bound {
+    background-color: var(--input-bound-bg);
+
+    &:hover {
+      background-color: var(--input-bound-bg-hover);
+    }
+  }
+
+  &.editParty {
+    flex-grow: 1;
+  }
+
+  &[contenteditable='true']:empty:before {
+    content: attr(placeholder);
+    color: var(--text-secondary);
+    pointer-events: none;
+    display: block; /* For Firefox */
+  }
+}
diff --git a/components/common/Textarea/index.tsx b/components/common/Textarea/index.tsx
new file mode 100644
index 00000000..6bfa4520
--- /dev/null
+++ b/components/common/Textarea/index.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import styles from './index.module.scss'
+
+interface Props extends React.ComponentProps<'div'> {
+  bound?: boolean
+  placeholder?: string
+  value?: string
+}
+
+const Textarea = React.forwardRef<HTMLDivElement, Props>(function textarea(
+  { bound, value: initialValue, ...props }: Props,
+  forwardedRef
+) {
+  // State
+  const [value, setValue] = useState(initialValue || '')
+
+  // Classes
+  const classes = classNames(
+    {
+      [styles.textarea]: true,
+      [styles.bound]: bound,
+    },
+    props.className?.split(' ').map((className) => styles[className])
+  )
+  // Methods: Rendering
+  return (
+    <div
+      {...props}
+      contentEditable={true}
+      suppressContentEditableWarning={true}
+      className={classes}
+      ref={forwardedRef}
+    >
+      {value}
+    </div>
+  )
+})
+
+export default Textarea