Add editor

app/app.config.ts

@@ -2,6 +2,7 @@ export default defineAppConfig({
   ui: {
     colors: {
       brand: "brand",
+      neutral: "neutral",
     },
   },
 });

app/assets/css/main.css

@@ -27,4 +27,16 @@
   --color-primary-800: var(--color-brand-800);
   --color-primary-900: var(--color-brand-900);
   --color-primary-950: var(--color-brand-950);
+
+  --ui-color-primary-50: var(--color-brand-50);
+  --ui-color-primary-100: var(--color-brand-100);
+  --ui-color-primary-200: var(--color-brand-200);
+  --ui-color-primary-300: var(--color-brand-300);
+  --ui-color-primary-400: var(--color-brand-400);
+  --ui-color-primary-500: var(--color-brand-500);
+  --ui-color-primary-600: var(--color-brand-600);
+  --ui-color-primary-700: var(--color-brand-700);
+  --ui-color-primary-800: var(--color-brand-800);
+  --ui-color-primary-900: var(--color-brand-900);
+  --ui-color-primary-950: var(--color-brand-950);
 }

app/components/application/button-fields.vue

@@ -29,15 +29,15 @@ const chip = computed(() => ({
       </UButton>
 
       <template #content>
-        <UColorPicker
-          v-model="model.embed_color as string | undefined"
-          class="p-2"
-        />
+        <div class="p-2 space-y-3">
+          <UColorPicker v-model="model.embed_color as string | undefined" />
+          <UInput v-model="model.embed_color" />
+        </div>
       </template>
     </UPopover>
   </UFormField>
   <UFormField label="Description" name="embed_description">
-    <UTextarea v-model="model.embed_description" class="w-full" />
+    <FieldsEditor v-model="model.embed_description" class="w-full" />
   </UFormField>
   <UFormField label="Button color" name="embed_button_color">
     <USelectMenu

app/components/application/fields.vue

@@ -8,6 +8,6 @@ const model = defineModel<Partial<FaqData>>({ required: true });
     <UInput v-model="model.question" class="w-full" />
   </UFormField>
   <UFormField label="Answer" name="answer" required>
-    <UTextarea v-model="model.answer" class="w-full" />
+    <FieldsEditor v-model="model.answer" class="w-full" />
   </UFormField>
 </template>

app/components/application/form.vue

@@ -21,7 +21,7 @@ const schema = zod.object({
   deny_message: zod.string().min(1),
   confirmation_message: zod.string().min(1),
   completion_message: zod.string().min(1),
-  activity_channel: zod.string().min(1).nullable(),
+  activity_channel: zod.string().min(1).nullable().optional(),
   restricted_role_ids: zod.string().array().optional(),
   accepted_role_ids: zod.string().array().optional(),
   denied_role_ids: zod.string().array().optional(),

app/components/application/general-fields.vue

@@ -27,16 +27,16 @@ const textChannels = ref(await loadTextChannels());
     />
   </UFormField>
   <UFormField label="Accept message" name="accept_message" required>
-    <UTextarea v-model="model.accept_message" class="w-full" />
+    <FieldsEditor v-model="model.accept_message" class="w-full" />
   </UFormField>
   <UFormField label="Deny message" name="deny_message" required>
-    <UTextarea v-model="model.deny_message" class="w-full" />
+    <FieldsEditor v-model="model.deny_message" class="w-full" />
   </UFormField>
   <UFormField label="Confirmation message" name="confirmation_message" required>
-    <UTextarea v-model="model.confirmation_message" class="w-full" />
+    <FieldsEditor v-model="model.confirmation_message" class="w-full" />
   </UFormField>
   <UFormField label="Completion message" name="completion_message" required>
-    <UTextarea v-model="model.completion_message" class="w-full" />
+    <FieldsEditor v-model="model.completion_message" class="w-full" />
   </UFormField>
   <UFormField label="Active" name="is_active">
     <USwitch v-model="model.is_active" />

app/components/application/question/fields.vue

@@ -8,7 +8,7 @@ const model = defineModel<Partial<ApplicationQuestionData>>({ required: true });
     <UInput v-model="model.order" type="number" min="0" class="w-full" />
   </UFormField>
   <UFormField label="Question" name="question" required>
-    <UTextarea v-model="model.question" class="w-full" />
+    <UInput v-model="model.question" class="w-full" />
   </UFormField>
   <UFormField label="Active" name="is_active">
     <USwitch v-model="model.is_active" />

app/components/application/question/form.vue

@@ -14,7 +14,7 @@ const client = useApiClient();
 
 const schema = zod.object({
   order: zod.number().min(1),
-  question: zod.string().min(1),
+  question: zod.string().min(1).max(255),
   is_active: zod.boolean(),
   application_id: zod.number().min(1),
 });

app/components/application/response/fields.vue

@@ -20,7 +20,7 @@ const types = computed(() =>
     <UInput v-model="model.name" class="w-full" />
   </UFormField>
   <UFormField label="Response" name="response" required>
-    <UTextarea v-model="model.response" class="w-full" />
+    <FieldsEditor v-model="model.response" class="w-full" />
   </UFormField>
   <UFormField label="Type" name="type" required>
     <USelectMenu

app/components/application/roles-fields.vue

@@ -5,7 +5,7 @@ const roles = ref(await loadRoles());
 </script>
 
 <template>
-  <UFormField label="Accepted roles" name="accepted_role_ids" required>
+  <UFormField label="Accepted roles" name="accepted_role_ids">
     <USelectMenu
       v-model="model.accepted_role_ids"
       :items="roles"
@@ -15,7 +15,7 @@ const roles = ref(await loadRoles());
       multiple
     />
   </UFormField>
-  <UFormField label="Denied roles" name="denied_role_ids" required>
+  <UFormField label="Denied roles" name="denied_role_ids">
     <USelectMenu
       v-model="model.denied_role_ids"
       :items="roles"
@@ -25,11 +25,7 @@ const roles = ref(await loadRoles());
       multiple
     />
   </UFormField>
-  <UFormField
-    label="Accept removal roles"
-    name="accept_removal_role_ids"
-    required
-  >
+  <UFormField label="Accept removal roles" name="accept_removal_role_ids">
     <USelectMenu
       v-model="model.accept_removal_role_ids"
       :items="roles"
@@ -39,7 +35,7 @@ const roles = ref(await loadRoles());
       multiple
     />
   </UFormField>
-  <UFormField label="Deny removal role" name="deny_removal_role_ids" required>
+  <UFormField label="Deny removal role" name="deny_removal_role_ids">
     <USelectMenu
       v-model="model.deny_removal_role_ids"
       :items="roles"
@@ -49,7 +45,7 @@ const roles = ref(await loadRoles());
       multiple
     />
   </UFormField>
-  <UFormField label="Restricted roles" name="restricted_role_ids" required>
+  <UFormField label="Restricted roles" name="restricted_role_ids">
     <USelectMenu
       v-model="model.restricted_role_ids"
       :items="roles"
@@ -59,11 +55,7 @@ const roles = ref(await loadRoles());
       multiple
     />
   </UFormField>
-  <UFormField
-    label="Required roles (requires all)"
-    name="required_role_ids"
-    required
-  >
+  <UFormField label="Required roles (requires all)" name="required_role_ids">
     <USelectMenu
       v-model="model.required_role_ids"
       :items="roles"
@@ -73,7 +65,7 @@ const roles = ref(await loadRoles());
       multiple
     />
   </UFormField>
-  <UFormField label="Ping roles" name="ping_role_ids" required>
+  <UFormField label="Ping roles" name="ping_role_ids">
     <USelectMenu
       v-model="model.ping_role_ids"
       :items="roles"
@@ -83,7 +75,7 @@ const roles = ref(await loadRoles());
       multiple
     />
   </UFormField>
-  <UFormField label="Pending roles" name="pending_role_ids" required>
+  <UFormField label="Pending roles" name="pending_role_ids">
     <USelectMenu
       v-model="model.pending_role_ids"
       :items="roles"

app/components/card/application.vue

@@ -56,7 +56,7 @@ const { data } = await useApi<FullResponse<ApplicationSubmissionData[]>>(
           label="To the applications"
           size="md"
           variant="subtle"
-          to="/application-submission"
+          to="/application/submission"
         />
       </div>
     </template>

app/components/faq/fields.vue

@@ -8,6 +8,6 @@ const model = defineModel<Partial<FaqData>>({ required: true });
     <UInput v-model="model.question" class="w-full" />
   </UFormField>
   <UFormField label="Answer" name="answer" required>
-    <UTextarea v-model="model.answer" class="w-full" />
+    <FieldsEditor v-model="model.answer" class="w-full" />
   </UFormField>
 </template>

app/components/fields/editor.vue

@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { EditorToolbarItem } from "@nuxt/ui";
+
+const model = defineModel<string | null | undefined>({ required: true });
+
+const items: EditorToolbarItem[][] = [
+  // History controls
+  [
+    {
+      kind: "undo",
+      icon: "i-lucide-undo",
+      tooltip: { text: "Undo" },
+    },
+    {
+      kind: "redo",
+      icon: "i-lucide-redo",
+      tooltip: { text: "Redo" },
+    },
+  ],
+  // Block types
+  [
+    {
+      icon: "i-lucide-heading",
+      tooltip: { text: "Headings" },
+      content: {
+        align: "start",
+      },
+      items: [
+        {
+          kind: "heading",
+          level: 1,
+          icon: "i-lucide-heading-1",
+          label: "Heading 1",
+        },
+        {
+          kind: "heading",
+          level: 2,
+          icon: "i-lucide-heading-2",
+          label: "Heading 2",
+        },
+        {
+          kind: "heading",
+          level: 3,
+          icon: "i-lucide-heading-3",
+          label: "Heading 3",
+        },
+      ],
+    },
+    {
+      icon: "i-lucide-list",
+      tooltip: { text: "Lists" },
+      content: {
+        align: "start",
+      },
+      items: [
+        {
+          kind: "bulletList",
+          icon: "i-lucide-list",
+          label: "Bullet List",
+        },
+        {
+          kind: "orderedList",
+          icon: "i-lucide-list-ordered",
+          label: "Ordered List",
+        },
+      ],
+    },
+    {
+      kind: "blockquote",
+      icon: "i-lucide-text-quote",
+      tooltip: { text: "Blockquote" },
+    },
+    {
+      kind: "codeBlock",
+      icon: "i-lucide-square-code",
+      tooltip: { text: "Code Block" },
+    },
+  ],
+  // Text formatting
+  [
+    {
+      kind: "mark",
+      mark: "bold",
+      icon: "i-lucide-bold",
+      tooltip: { text: "Bold" },
+    },
+    {
+      kind: "mark",
+      mark: "italic",
+      icon: "i-lucide-italic",
+      tooltip: { text: "Italic" },
+    },
+    {
+      kind: "mark",
+      mark: "strike",
+      icon: "i-lucide-strikethrough",
+      tooltip: { text: "Strikethrough" },
+    },
+    {
+      kind: "mark",
+      mark: "code",
+      icon: "i-lucide-code",
+      tooltip: { text: "Code" },
+    },
+  ],
+  // Link
+  [
+    {
+      kind: "link",
+      icon: "i-lucide-link",
+      tooltip: { text: "Link" },
+    },
+  ],
+];
+</script>
+
+<template>
+  <UEditor
+    v-slot="{ editor }"
+    v-model="model"
+    content-type="markdown"
+    :ui="{ base: 'p-4' }"
+    class="rounded-md ring ring-inset ring-accented"
+  >
+    <UEditorToolbar
+      :editor="editor"
+      :items="items"
+      class="border-b border-muted py-2 px-4 overflow-x-auto"
+    />
+  </UEditor>
+</template>

app/components/rule/fields.vue

@@ -11,6 +11,6 @@ const model = defineModel<Partial<RuleData>>({ required: true });
     <UInput v-model="model.name" class="w-full" />
   </UFormField>
   <UFormField label="Rule" name="rule" required>
-    <UTextarea v-model="model.rule" class="w-full" />
+    <FieldsEditor v-model="model.rule" class="w-full" />
   </UFormField>
 </template>

app/components/server-content/fields.vue

@@ -11,7 +11,7 @@ const model = defineModel<Partial<ServerContentData>>({ required: true });
     <UInput v-model="model.url" class="w-full" />
   </UFormField>
   <UFormField label="Description" name="description" required>
-    <UTextarea v-model="model.description" class="w-full" />
+    <UInput v-model="model.description" class="w-full" />
   </UFormField>
   <UFormField label="Recommended" name="is_recommended">
     <USwitch v-model="model.is_recommended" />

app/components/server-content/message/fields.vue

@@ -10,17 +10,21 @@ defineProps<{
 
 <template>
   <UFormField label="Heading" name="heading" required>
-    <UTextarea v-model="model.heading" class="w-full" :disabled="!canCreate" />
+    <FieldsEditor
+      v-model="model.heading"
+      class="w-full"
+      :disabled="!canCreate"
+    />
   </UFormField>
   <UFormField label="Not recommended" name="not_recommended" required>
-    <UTextarea
+    <FieldsEditor
       v-model="model.not_recommended"
       class="w-full"
       :disabled="!canCreate"
     />
   </UFormField>
   <UFormField label="Recommended" name="recommended" required>
-    <UTextarea
+    <FieldsEditor
       v-model="model.recommended"
       class="w-full"
       :disabled="!canCreate"

app/components/ticket/button/fields.vue

@@ -80,7 +80,7 @@ const panels = computed(() =>
     />
   </UFormField>
   <UFormField label="Initial message" name="initial_message" required>
-    <UTextarea v-model="model.initial_message" class="w-full" />
+    <FieldsEditor v-model="model.initial_message" class="w-full" />
   </UFormField>
   <UFormField label="Emoji" name="emoji" required>
     <UInput v-model="model.emoji" class="w-full">