From 12ec239b16f7cb662757867d37145d61be16cf37 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 6 Jul 2022 21:13:52 -0700
Subject: [PATCH] Fix placeholder, misc styling

min height, quote
---
 web/components/editor.tsx | 27 ++++++++++++++++-----------
 web/pages/create.tsx      |  1 -
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index c8676a7b..b86c261c 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -9,20 +9,21 @@ import { Linkify } from './linkify'
 import { uploadImage } from 'web/lib/firebase/storage'
 import { useMutation } from 'react-query'
 
-const LINE_HEIGHT = 2
-
-const proseClass = 'prose prose-sm prose-p:my-0 prose-li:my-0 max-w-none'
+const proseClass =
+  'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none'
 
 export function useTextEditor(props: {
-  rows?: number
   placeholder?: string
   max?: number
   defaultValue?: Content
   disabled?: boolean
 }) {
-  const { rows, placeholder, max, defaultValue = '', disabled } = props
+  const { placeholder, max, defaultValue = '', disabled } = props
 
-  const rowsClass = rows && `box-content min-h-[${LINE_HEIGHT * rows}em]`
+  const editorClass = clsx(
+    proseClass,
+    'box-content min-h-[6em] textarea textarea-bordered'
+  )
 
   const upload = useMutation((files: File[]) =>
     Promise.all(files.map((file) => uploadImage('default', file)))
@@ -30,9 +31,7 @@ export function useTextEditor(props: {
 
   const editor = useEditor({
     editorProps: {
-      attributes: {
-        class: clsx(proseClass, rowsClass, 'textarea textarea-bordered'),
-      },
+      attributes: { class: editorClass },
       handlePaste(view, event) {
         const files = Array.from(event.clipboardData?.files ?? []).filter(
           (file) => file.type.startsWith('image')
@@ -56,8 +55,14 @@ export function useTextEditor(props: {
       },
     },
     extensions: [
-      StarterKit,
-      Placeholder.configure({ placeholder }),
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+      }),
+      Placeholder.configure({
+        placeholder,
+        emptyEditorClass:
+          'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0',
+      }),
       CharacterCount.configure({ limit: max }),
       Image,
     ],
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index e098b3d7..afb5d312 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -189,7 +189,6 @@ export function NewContract(props: {
       : `e.g. I will choose the answer according to...`
 
   const { editor, upload } = useTextEditor({
-    rows: 3,
     max: MAX_DESCRIPTION_LENGTH,
     placeholder: descriptionPlaceholder,
     disabled: isSubmitting,