fix: validate and show error on proposal body

apps/ui/src/components/Ui/Composer.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
+import { _n } from '@/helpers/utils';
+
 const model = defineModel<string>({ required: true });
 
+const props = defineProps<{
+  error?: string;
+  definition: any;
+}>();
+
 const editorContainerRef = ref<HTMLDivElement | null>(null);
 const editorFileInputRef = ref<HTMLInputElement | null>(null);
 const editorRef = ref<HTMLTextAreaElement | null>(null);
@@ -10,17 +17,48 @@ const editor = useMarkdownEditor(
   editorContainerRef,
   value => (model.value = value)
 );
+
+const dirty = ref(false);
+
+const inputValue = computed({
+  get() {
+    if (!model.value && !dirty.value && props.definition.default) {
+      return props.definition.default;
+    }
+
+    return model.value;
+  },
+  set(newValue: string) {
+    dirty.value = true;
+    model.value = newValue;
+  }
+});
+
+const inputValueLength = computed(() => inputValue.value.length);
+
+const showError = computed(() => props.error && dirty.value);
+
+watch(model, () => {
+  dirty.value = true;
+});
 </script>
 
 <template>
   <div
     ref="editorContainerRef"
-    class="rounded-lg mb-3 border"
+    class="rounded-lg mb-3 border s-composer"
     :class="{
-      'ring-2': editor.hovered.value
+      'ring-2': editor.hovered.value,
+      's-error-composer': showError
     }"
   >
-    <div class="flex justify-end gap-1 py-2 px-3">
+    <div class="flex gap-1 py-2 px-3 items-center">
+      <label class="text-sm hidden s-label-char-count whitespace-nowrap">
+        <template v-if="inputValueLength >= 0 && definition.maxLength">
+          {{ _n(inputValueLength) }} / {{ _n(definition.maxLength) }}
+        </template>
+      </label>
+      <div class="grow"></div>
       <UiTooltip title="Add heading text">
         <button
           class="p-1 w-[26px] h-[26px] leading-[18px] hover:text-skin-link rounded focus-visible:ring-1"
@@ -72,11 +110,11 @@ const editor = useMarkdownEditor(
     <div class="s-base">
       <textarea
         ref="editorRef"
-        :value="model"
-        maxlength="9600"
+        v-model.trim="model"
         class="s-input h-[200px] !rounded-t-none !mb-0 !pt-[15px]"
         @input="event => (model = (event.target as HTMLInputElement).value)"
       />
     </div>
   </div>
+  <div v-if="showError" class="s-input-error-message mb-3 -mt-3">{{ error }}</div>
 </template>

apps/ui/src/components/Ui/WrapperInput.vue

@@ -32,15 +32,3 @@ const showError = computed(() => props.error && props.dirty);
     <legend v-if="definition.description" v-text="definition.description" />
   </div>
 </template>
-
-<style lang="scss">
-.s-base {
-  .s-label:has(~ input:focus),
-  .s-label:has(~ textarea:focus),
-  &.s-error {
-    .s-label-char-count {
-      display: block;
-    }
-  }
-}
-</style>

apps/ui/src/style.scss

@@ -276,6 +276,25 @@ input:placeholder-shown {
   @apply block mb-1;
 }
 
+.s-error-composer {
+  @apply border border-skin-danger;
+
+  .s-label-char-count {
+    @apply text-skin-danger;
+  }
+}
+
+.s-base,
+.s-composer {
+  &:focus-within,
+  &.s-error,
+  &.s-error-editor {
+    .s-label-char-count {
+      display: block;
+    }
+  }
+}
+
 .s-error {
   @apply mb-2;
 
@@ -293,10 +312,10 @@ input:placeholder-shown {
   .s-label {
     @apply text-skin-danger;
   }
+}
 
-  .s-input-error-message {
-    @apply text-skin-danger;
-  }
+.s-input-error-message {
+  @apply text-skin-danger;
 }
 
 .s-box {

apps/ui/src/views/Editor.vue

@@ -24,6 +24,13 @@ const DISCUSSION_DEFINITION = {
   examples: ['e.g. https://forum.balancer.fi/t/proposal…']
 };
 
+const BODY_DEFINITION = {
+  type: 'string',
+  format: 'long',
+  title: 'Body',
+  maxLength: 9600
+};
+
 const CHOICES_DEFINITION = {
   type: 'array',
   title: 'Choices',
@@ -160,12 +167,14 @@ const formErrors = computed(() => {
       required: ['title', 'choices'],
       properties: {
         title: TITLE_DEFINITION,
+        body: BODY_DEFINITION,
         discussion: DISCUSSION_DEFINITION,
         choices: CHOICES_DEFINITION
       }
     },
     {
       title: proposal.value.title,
+      body: proposal.value.body,
       discussion: proposal.value.discussion,
       choices: proposal.value.choices
     },
@@ -385,7 +394,12 @@ export default defineComponent({
           class="px-3 py-2 border rounded-lg mb-5 min-h-[200px]"
           :body="proposal.body"
         />
-        <UiComposer v-else v-model="proposal.body" class="" />
+        <UiComposer
+          v-else
+          v-model="proposal.body"
+          :definition="BODY_DEFINITION"
+          :error="formErrors.body"
+        />
         <div class="s-base mb-5">
           <UiInputString
             :key="proposalKey || ''"