Add placeholder support for textarea

docs/components/textarea/index.md

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 
 const text1 = ref('# Funk\nwhale')
 const text2 = ref('# Funk\nwhale')
+const text3 = ref('')
 </script>
 
 # Textarea
@@ -17,3 +18,10 @@ const text2 = ref('# Funk\nwhale')
 <fw-textarea v-model="text" :max="20" />
 ```
 <fw-textarea v-model="text2" :max="20" />
+
+
+## Textarea placeholder
+```html
+<fw-textarea v-model="text" placeholder="Describe this track here…" />
+```
+<fw-textarea v-model="text3" placeholder="Describe this track here…" />

src/components/textarea/Textarea.vue

@@ -10,10 +10,11 @@ interface Events {
 interface Props {
   modelValue: string
   max?: number
+  placeholder?: string
 }
 
 const emit = defineEmits<Events>()
-const props = withDefaults(defineProps<Props>(), { max: Infinity })
+const props = withDefaults(defineProps<Props>(), { max: Infinity, placeholder: '' })
 
 const value = useVModel(props, 'modelValue', emit)
 const { undo, redo, commit, last } = useManualRefHistory(value)
@@ -194,6 +195,7 @@ const link = async () => {
       @keydown.ctrl.shift.x.exact.prevent="strikethrough"
       @keydown.ctrl.k.exact.prevent="link"
       :maxlength="max"
+      :placeholder="placeholder"
       v-model="value"
       id="textarea_id"
     />
@@ -202,19 +204,19 @@ const link = async () => {
 
       <div class="separator" />
 
-      <fw-button @click="heading1" icon="bi-type-h1" secondary :is-active="isHeading1" />
-      <fw-button @click="heading2" icon="bi-type-h2" secondary :is-active="isHeading2" />
-      <fw-button @click="paragraph" icon="bi-paragraph" secondary :is-active="isParagraph" />
-      <fw-button @click="quote" icon="bi-quote" secondary :is-active="isQuote" />
-      <fw-button @click="orderedList" icon="bi-list-ol" secondary :is-active="isOrderedList" />
-      <fw-button @click="unorderedList" icon="bi-list-ul" secondary :is-active="isUnorderedList" />
+      <fw-button @click="heading1" icon="bi-type-h1" secondary :is-active="isHeading1" :disabled="preview" />
+      <fw-button @click="heading2" icon="bi-type-h2" secondary :is-active="isHeading2" :disabled="preview" />
+      <fw-button @click="paragraph" icon="bi-paragraph" secondary :is-active="isParagraph" :disabled="preview" />
+      <fw-button @click="quote" icon="bi-quote" secondary :is-active="isQuote" :disabled="preview" />
+      <fw-button @click="orderedList" icon="bi-list-ol" secondary :is-active="isOrderedList" :disabled="preview" />
+      <fw-button @click="unorderedList" icon="bi-list-ul" secondary :is-active="isUnorderedList" :disabled="preview" />
 
       <div class="separator" />
 
-      <fw-button @click="bold" icon="bi-type-bold" secondary />
-      <fw-button @click="italics" icon="bi-type-italic" secondary />
-      <fw-button @click="strikethrough" icon="bi-type-strikethrough" secondary />
-      <fw-button @click="link" icon="bi-link-45deg" secondary />
+      <fw-button @click="bold" icon="bi-type-bold" secondary :disabled="preview" />
+      <fw-button @click="italics" icon="bi-type-italic" secondary :disabled="preview" />
+      <fw-button @click="strikethrough" icon="bi-type-strikethrough" secondary :disabled="preview" />
+      <fw-button @click="link" icon="bi-link-45deg" secondary :disabled="preview" />
 
       <span v-if="max !== Infinity" class="letter-count">{{ max - value.length }}</span>
     </div>

src/components/textarea/style.scss

@@ -61,6 +61,10 @@
       padding: 8px 12px 40px;
       font-family: monospace;
       background: transparent;
+
+      &:empty {
+        font-family: $font-main;
+      }
     }
 
     > .textarea-buttons {