Add project submission page with form validation and Markdown support

frontend/package.json

@@ -13,6 +13,9 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
+    "@milkdown/crepe": "^7.22.1",
+    "@milkdown/kit": "^7.22.1",
+    "@milkdown/vue": "^7.22.1",
     "vue": "^3.5.0",
     "vue-router": "^4.5.0"
   },

frontend/src/api/client.ts

@@ -1,4 +1,9 @@
-import type { Project, ProjectListItem } from '../types/project'
+import type {
+  Category,
+  Project,
+  ProjectCreate,
+  ProjectListItem,
+} from '../types/project'
 
 interface Profile {
   matrix_id: string | null
@@ -24,6 +29,22 @@ export interface ProfileUpdate {
   website_url: string | null
 }
 
+export type ValidationIssue = {
+  loc: Array<string | number>
+  msg: string
+  type: string
+}
+
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    readonly status: number,
+    readonly issues: ValidationIssue[] = [],
+  ) {
+    super(message)
+  }
+}
+
 const API_URL = import.meta.env.VITE_API_URL ?? '/api'
 
 async function request<T>(path: string, init?: RequestInit): Promise<T> {
@@ -38,7 +59,13 @@ async function request<T>(path: string, init?: RequestInit): Promise<T> {
 
   if (!response.ok) {
     const body = await response.json().catch(() => null)
-    throw new Error(body?.detail ?? `Request failed with ${response.status}`)
+    const issues = Array.isArray(body?.detail) ? body.detail : []
+    const message =
+      typeof body?.detail === 'string'
+        ? body.detail
+        : `Request failed with ${response.status}`
+
+    throw new ApiError(message, response.status, issues)
   }
 
   if (response.status === 204) {
@@ -81,4 +108,15 @@ export function deleteProject(id: string) {
   return request<void>(`/projects/${id}`, {
     method: 'DELETE',
   })
-}
+}
+
+export function listCategories() {
+  return request<Category[]>('/categories/')
+}
+
+export function createProject(input: ProjectCreate) {
+  return request<Project>('/projects/', {
+    method: 'POST',
+    body: JSON.stringify(input),
+  })
+}

frontend/src/components/markdown/MarkdownContent.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { MilkdownProvider } from '@milkdown/vue'
+
+import MarkdownContentInner from './MarkdownContentInner.vue'
+
+withDefaults(
+  defineProps<{
+    source: string
+    ariaLabel?: string
+  }>(),
+  {
+    ariaLabel: 'Markdown content',
+  },
+)
+</script>
+
+<template>
+  <MilkdownProvider>
+    <MarkdownContentInner
+      :source="source"
+      :aria-label="ariaLabel"
+    />
+  </MilkdownProvider>
+</template>

frontend/src/components/markdown/MarkdownContentInner.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import {
+  defaultValueCtx,
+  Editor,
+  editorViewOptionsCtx,
+  rootCtx,
+} from '@milkdown/kit/core'
+import { commonmark } from '@milkdown/kit/preset/commonmark'
+import { getMarkdown, replaceAll } from '@milkdown/kit/utils'
+import { Milkdown, useEditor } from '@milkdown/vue'
+
+import { markdownImagePolicy } from './markdownPolicy'
+import '@milkdown/crepe/theme/common/prosemirror.css'
+import '@milkdown/crepe/theme/common/reset.css'
+import './markdown.css'
+
+const props = withDefaults(
+  defineProps<{
+    source: string
+    ariaLabel?: string
+  }>(),
+  {
+    ariaLabel: 'Markdown content',
+  },
+)
+
+const { get, loading } = useEditor((root) =>
+  Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, root)
+      ctx.set(defaultValueCtx, props.source)
+      ctx.update(editorViewOptionsCtx, (options) => ({
+        ...options,
+        editable: () => false,
+        attributes: (state) => {
+          const currentAttributes =
+            typeof options.attributes === 'function'
+              ? options.attributes(state)
+              : options.attributes
+
+          return {
+            ...currentAttributes,
+            'aria-label': props.ariaLabel,
+            role: 'document',
+          }
+        },
+      }))
+    })
+    .use(commonmark)
+    .use(markdownImagePolicy),
+)
+
+watch(
+  [() => props.source, loading],
+  ([source, isLoading]) => {
+    if (isLoading) return
+
+    const editor = get()
+    if (!editor) return
+
+    const currentMarkdown = editor.action(getMarkdown())
+    if (currentMarkdown !== source) {
+      editor.action(replaceAll(source))
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    class="markdown-editor markdown-editor--readonly"
+    :aria-busy="loading"
+  >
+    <Milkdown />
+  </div>
+</template>

frontend/src/components/markdown/MarkdownEditor.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { MilkdownProvider } from '@milkdown/vue'
+
+import MarkdownEditorInner from './MarkdownEditorInner.vue'
+
+withDefaults(
+  defineProps<{
+    modelValue: string
+    maxlength?: number
+    placeholder?: string
+    ariaLabel?: string
+  }>(),
+  {
+    maxlength: undefined,
+    placeholder: 'Write a description…',
+    ariaLabel: 'Markdown editor',
+  },
+)
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <MilkdownProvider>
+    <MarkdownEditorInner
+      :model-value="modelValue"
+      :maxlength="maxlength"
+      :placeholder="placeholder"
+      :aria-label="ariaLabel"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </MilkdownProvider>
+</template>

frontend/src/components/markdown/MarkdownEditorInner.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { CrepeBuilder } from '@milkdown/crepe/builder'
+import { blockEdit } from '@milkdown/crepe/feature/block-edit'
+import { cursor } from '@milkdown/crepe/feature/cursor'
+import { linkTooltip } from '@milkdown/crepe/feature/link-tooltip'
+import { listItem } from '@milkdown/crepe/feature/list-item'
+import { placeholder as placeholderFeature } from '@milkdown/crepe/feature/placeholder'
+import { toolbar } from '@milkdown/crepe/feature/toolbar'
+import { editorViewOptionsCtx } from '@milkdown/kit/core'
+import { getMarkdown, replaceAll } from '@milkdown/kit/utils'
+import { Milkdown, useEditor } from '@milkdown/vue'
+
+import { markdownImagePolicy } from './markdownPolicy'
+import '@milkdown/crepe/theme/common/prosemirror.css'
+import '@milkdown/crepe/theme/common/reset.css'
+import '@milkdown/crepe/theme/common/block-edit.css'
+import '@milkdown/crepe/theme/common/cursor.css'
+import '@milkdown/crepe/theme/common/link-tooltip.css'
+import '@milkdown/crepe/theme/common/list-item.css'
+import '@milkdown/crepe/theme/common/placeholder.css'
+import '@milkdown/crepe/theme/common/toolbar.css'
+import '@milkdown/crepe/theme/frame.css'
+
+import './markdown.css'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    maxlength?: number
+    placeholder?: string
+    ariaLabel?: string
+  }>(),
+  {
+    maxlength: undefined,
+    placeholder: 'Write a description…',
+    ariaLabel: 'Markdown editor',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const limitExceeded = computed(() =>
+  Boolean(props.maxlength && props.modelValue.length > props.maxlength),
+)
+
+const { get, loading } = useEditor((root) => {
+  const crepe = new CrepeBuilder({
+    root,
+    defaultValue: props.modelValue,
+  })
+
+  crepe
+    .addFeature(blockEdit)
+    .addFeature(cursor)
+    .addFeature(linkTooltip)
+    .addFeature(listItem)
+    .addFeature(placeholderFeature, {
+      text: props.placeholder,
+      mode: 'doc',
+    })
+    .addFeature(toolbar)
+
+  crepe.editor.config((ctx) => {
+    ctx.update(editorViewOptionsCtx, (options) => ({
+      ...options,
+      attributes: (state) => {
+        const currentAttributes =
+          typeof options.attributes === 'function'
+            ? options.attributes(state)
+            : options.attributes
+
+        return {
+          ...currentAttributes,
+          'aria-label': props.ariaLabel,
+          'aria-invalid': limitExceeded.value ? 'true' : 'false',
+          'aria-multiline': 'true',
+          role: 'textbox',
+        }
+      },
+    }))
+  })
+  crepe.editor.use(markdownImagePolicy)
+  crepe.on((listener) => {
+    listener.markdownUpdated((_ctx, markdown) => {
+      if (markdown !== props.modelValue) {
+        emit('update:modelValue', markdown)
+      }
+    })
+  })
+
+  return crepe
+})
+
+watch(
+  [() => props.modelValue, loading],
+  ([value, isLoading]) => {
+    if (isLoading) return
+
+    const editor = get()
+    if (!editor) return
+
+    const currentMarkdown = editor.action(getMarkdown())
+    if (currentMarkdown !== value) {
+      editor.action(replaceAll(value))
+    }
+  },
+)
+</script>
+
+<template>
+  <div
+    class="markdown-editor"
+    :class="{
+      'markdown-editor--invalid': limitExceeded,
+    }"
+    :aria-busy="loading"
+  >
+    <Milkdown />
+
+    <p
+      v-if="limitExceeded"
+      class="markdown-editor__limit"
+      role="alert"
+    >
+      The description cannot exceed {{ maxlength }} characters.
+    </p>
+  </div>
+</template>