feat: remove the 10,000-character article body limit and make the New article body optional

web/src/views/EditorView.vue

@@ -11,13 +11,14 @@ import ArticleEditor from '@/components/ArticleEditor.vue'
 import ArticleDetails from '@/components/ArticleDetails.vue'
 import SaveStatus from '@/components/SaveStatus.vue'
 import PublishControl from '@/components/PublishControl.vue'
-import CharacterCounter from '@/components/CharacterCounter.vue'
+import EditorStatusBar from '@/components/EditorStatusBar.vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import ImageUploader from '@/components/ImageUploader.vue'
 import { ApiError, authRedirectPending, useApi } from '@/composables/useApi'
 import type { Article } from '@/composables/useArticles'
 import { useArticleDraft } from '@/composables/useArticleDraft'
 import type { MediaItem } from '@/composables/useMedia'
+import { bodyCounts } from '@/lib/bodyCounts'
 import { bodyImageCount, bodyImageIds } from '@/lib/bodyImageIds'
 import { formatSize } from '@/lib/mediaFormat'
 import { useCanManageVariants } from '@/composables/useCanManageVariants'
@@ -26,7 +27,6 @@ import { useSeenImagesStore } from '@/stores/seenImages'
 import { useVariantCatalogStore } from '@/stores/variantCatalog'
 
 const SKELETON_DELAY_MS = 150
-const BODY_MAX_LENGTH = 10000
 
 type LoadState = 'loading' | 'loaded' | 'notFound' | 'error'
 
@@ -89,14 +89,11 @@ async function loadArticle() {
 	}
 }
 
-const bodyLength = computed(() => draft.body.value.length)
-const overLimit = computed(() => bodyLength.value > BODY_MAX_LENGTH)
+const counts = computed(() => bodyCounts(draft.body.value))
 
-const saveEnabled = computed(
-	() => draft.state.value === 'dirty' && !overLimit.value && loadState.value === 'loaded',
-)
+const saveEnabled = computed(() => draft.state.value === 'dirty' && loadState.value === 'loaded')
 
-const publishDisabled = computed(() => overLimit.value || draft.state.value === 'offline')
+const publishDisabled = computed(() => draft.state.value === 'offline')
 
 async function runSave() {
 	const outcome = await draft.save()
@@ -568,10 +565,10 @@ onBeforeRouteLeave(async () => {
 					@request-remove-image="onRequestRemoveImage"
 				>
 					<template #footer>
-						<CharacterCounter
-							variant="footer"
-							:value="bodyLength"
-							:max="BODY_MAX_LENGTH"
+						<EditorStatusBar
+							:words="counts.words"
+							:characters="counts.characters"
+							:state="draft.state.value"
 						/>
 					</template>
 					<template #aside>