@antelopejs/dms-mailing 0.4.1 → 0.5.1

package/frontend-vue/app/components/PageHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMailingApi } from '../composables/useMailingApi'
+import { useProviderInfo } from '../composables/useMailingReads'
 import { useSetupHidesPeriod } from '../composables/useOverviewSetup'
 import { presetShortLabelKey } from '../utils/period'
 import type { Component } from 'vue'
@@ -26,13 +26,18 @@ const props = withDefaults(defineProps<PageHeaderProps>(), {
 	showProvider: true,
 })
 
-const api = useMailingApi()
 const { t } = useI18n()
 
 const StatusPill = resolveComponent('DmsStatusPill') as Component
 const PeriodSelector = resolveComponent('DmsPeriodSelector') as Component
 
-const provider = ref<ProviderInfo | null>(null)
+/** Shown as "no provider" when the read fails. */
+const NO_PROVIDER: ProviderInfo = { name: '', connected: false, features: null }
+
+const providerRead = useProviderInfo(() => props.showProvider)
+const provider = computed<ProviderInfo | null>(() =>
+	providerRead.error.value ? NO_PROVIDER : providerRead.data.value,
+)
 const hidesPeriod = useSetupHidesPeriod(props.periodScope)
 
 const presetLabels = computed(() =>
@@ -82,15 +87,6 @@ function renderPeriod() {
 }
 
 usePageHeaderActions(() => [renderProvider(), renderPeriod()])
-
-onMounted(async () => {
-	if (!props.showProvider) return
-	try {
-		provider.value = await api.provider()
-	} catch {
-		provider.value = { name: '', connected: false, features: null }
-	}
-})
 </script>
 
 <template>

package/frontend-vue/app/components/RealSendModal.vue

@@ -4,6 +4,7 @@ import { onBeforeUnmount } from 'vue'
 import FormFieldRow from '../build/components/FormFieldRow.vue'
 import FormRows from '../build/components/FormRows.vue'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateContentRead } from '../composables/useMailingReads'
 import type { SendResult } from '../composables/useMailingApi'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import { apiErrorMessage } from '../utils/api-error'
@@ -64,6 +65,7 @@ const { uniqueLocales } = useUniqueLocales()
 const overlays = useTemplateDrawer()
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readContent = useTemplateContentRead(templateId)
 const detail = ref<TemplateContentResponse | null>(null)
 const loading = ref(true)
 const recipients = ref<string[]>([])
@@ -104,7 +106,7 @@ const missingRequired = computed(() =>
 onMounted(async () => {
 	if (!templateId.value) return
 	try {
-		detail.value = await api.templateContent(templateId.value)
+		detail.value = await readContent()
 		values.value = initialSendValues(fields.value, detail.value.testData)
 		locale.value = detail.value.fallbackLocale
 	} catch (error) {

package/frontend-vue/app/components/RenderingModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMailingApi } from '../composables/useMailingApi'
+import { useSendHtmlRead, useSendRead } from '../composables/useMailingReads'
 import type { SendHtmlResponse, SendRow } from '../types/mailing'
 
 type RenderingView = 'desktop' | 'mobile' | 'html'
@@ -44,7 +44,6 @@ const FRAME_WIDTHS: Record<RenderingView, string> = {
 	html: '100%',
 }
 
-const api = useMailingApi()
 const { t, locale } = useI18n()
 
 const view = ref<RenderingView>('desktop')
@@ -54,6 +53,8 @@ const loading = ref(false)
 const failed = ref(false)
 
 const sendIdValue = computed(() => props.rowData?._id ?? props.sendId ?? '')
+const readSend = useSendRead(sendIdValue)
+const readHtml = useSendHtmlRead(sendIdValue)
 const key = (path: string, params: Record<string, unknown> = {}): string =>
 	t(`${KEY_PREFIX}${path}`, params)
 
@@ -85,7 +86,7 @@ const meta = computed(() => {
 
 async function loadSend(): Promise<void> {
 	if (send.value) return
-	const detail = await api.send(sendIdValue.value)
+	const detail = await readSend()
 	send.value = detail.send
 }
 
@@ -94,10 +95,7 @@ async function load(): Promise<void> {
 	loading.value = true
 	failed.value = false
 	try {
-		const [html] = await Promise.all([
-			api.sendHtml(sendIdValue.value),
-			loadSend(),
-		])
+		const [html] = await Promise.all([readHtml(), loadSend()])
 		rendering.value = html
 	} catch (error) {
 		failed.value = true

package/frontend-vue/app/components/RetentionInput.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useDebounceFn } from '@vueuse/core'
-import { useMailingApi } from '../composables/useMailingApi'
+import { refDebounced } from '@vueuse/core'
+import { useRetentionPreview } from '../composables/useMailingReads'
 import {
 	clampRetention,
-	formatClock,
+	CLOCK_FORMAT,
 	isWithinADay,
 	MAX_RETENTION_DAYS,
 	MIN_RETENTION_DAYS,
@@ -35,8 +35,8 @@ const DATE_FORMAT: Intl.DateTimeFormatOptions = {
 	day: 'numeric',
 }
 
-const api = useMailingApi()
 const { t, locale } = useI18n()
+const { dateTimeFormat } = useRegionalFormat()
 const { confirm } = useConfirm()
 const form = useEnclosingForm()
 
@@ -56,7 +56,13 @@ const isCustom = computed(
 		isCustomPicked.value ||
 		(days.value !== null && retentionChoice(days.value) === RETENTION_CUSTOM),
 )
-const preview = ref<RetentionPreview | null>(null)
+/** The days the preview reads, once the choice holds still. */
+const previewDays = refDebounced(days, PREVIEW_DEBOUNCE_MS)
+const previewRead = useRetentionPreview(previewDays)
+/** A failed read shows no preview. */
+const preview = computed<RetentionPreview | null>(() =>
+	previewRead.error.value ? null : previewRead.data.value,
+)
 
 const key = (
 	path: string,
@@ -99,8 +105,8 @@ function previewParams(value: RetentionPreview): Record<string, unknown> {
 	return {
 		when: isWithinADay(value.nextRunAt, new Date())
 			? key('tonight')
-			: new Date(value.nextRunAt).toLocaleDateString(locale.value, DATE_FORMAT),
-		time: formatClock(value.nextRunAt, locale.value),
+			: dateTimeFormat(DATE_FORMAT).format(new Date(value.nextRunAt)),
+		time: dateTimeFormat(CLOCK_FORMAT).format(new Date(value.nextRunAt)),
 		count: new Intl.NumberFormat(locale.value).format(value.count),
 		duration: key('days', { count: value.days }, value.days),
 	}
@@ -148,22 +154,6 @@ function guardSubmit(): boolean {
 	return false
 }
 
-const loadPreview = useDebounceFn(async (value: number) => {
-	try {
-		preview.value = await api.retentionPreview(value)
-	} catch {
-		preview.value = null
-	}
-}, PREVIEW_DEBOUNCE_MS)
-
-watch(
-	days,
-	(value) => {
-		if (value) void loadPreview(value)
-	},
-	{ immediate: true },
-)
-
 watch(
 	() => props.modelValue,
 	(value) => {

package/frontend-vue/app/components/SendDrawer.vue

@@ -2,6 +2,7 @@
 import { TEMPLATES_PATH } from '../utils/pages'
 import { useClipboard } from '@vueuse/core'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useProviderRead, useSendRead } from '../composables/useMailingReads'
 import { useReplayToast } from '../composables/useReplayToast'
 import {
 	describeProblem,
@@ -90,6 +91,8 @@ const { copy } = useClipboard()
 const KeyValueList = resolveComponent('DmsKeyValueList') as Component
 
 const sendId = computed(() => props.rowData?._id ?? props.sendId ?? '')
+const readSend = useSendRead(sendId)
+const readProvider = useProviderRead()
 const detail = ref<SendDetailResponse | null>(null)
 const tracking = ref<TimelineTracking | null>(null)
 const loading = ref(false)
@@ -231,7 +234,7 @@ async function load(): Promise<void> {
 	if (!sendId.value) return
 	loading.value = true
 	try {
-		detail.value = await api.send(sendId.value)
+		detail.value = await readSend()
 	} catch (error) {
 		useApiError(error)
 	} finally {
@@ -242,7 +245,7 @@ async function load(): Promise<void> {
 /** The provider's tracking, so the timeline waits only for what it reports. */
 async function loadTracking(): Promise<void> {
 	try {
-		const provider = await api.provider()
+		const provider = await readProvider()
 		tracking.value = provider.features
 			? {
 					openTracking: !!provider.features.openTracking,

package/frontend-vue/app/components/StarterGallery.vue

@@ -2,6 +2,7 @@
 import { useTemplateCategories } from '../composables/useTemplateCategories'
 import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useStarters } from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import {
 	HTTP_CONFLICT,
@@ -24,18 +25,19 @@ const { processApiMessage } = useTranslation()
 const overlays = useTemplateDrawer()
 
 const localized = useLocalizedDefaults()
-const storedStarters = ref<StarterSummary[]>([])
-const starters = computed(() => localized.starters(storedStarters.value))
+const starterList = useStarters()
+/** The starters, none when the read failed. */
+const starters = computed(() =>
+	localized.starters(
+		starterList.error.value ? [] : (starterList.data.value?.starters ?? []),
+	),
+)
 const { categories } = useTemplateCategories()
-const loading = ref(true)
+const loading = computed(
+	() => !starterList.data.value && !starterList.error.value,
+)
 const creatingId = ref<string | null>(null)
 
-onMounted(async () => {
-	const starterList = await api.starters().catch(() => ({ starters: [] }))
-	storedStarters.value = starterList.starters
-	loading.value = false
-})
-
 function knownCategory(id: string): string | undefined {
 	return categories.value.some((category) => category.id === id)
 		? id

package/frontend-vue/app/components/TemplateCard.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { formatCardDate, formatCardSince, firstName } from '../utils/gallery'
+import {
+	CARD_DATE_FORMAT,
+	formatCardDate,
+	formatCardSince,
+	firstName,
+} from '../utils/gallery'
 import { localeChipClass, localeChips } from '../utils/locales'
 import {
 	cardFooter,
@@ -47,6 +52,7 @@ const emit = defineEmits<{
 }>()
 
 const { t, locale } = useI18n()
+const { dateTimeFormat } = useRegionalFormat()
 const { uniqueLocales } = useUniqueLocales()
 
 const isLive = computed(() => props.template.status === 'live')
@@ -85,8 +91,12 @@ const isNeverSent = computed(() => props.attention.includes('never_sent'))
 const footer = computed(() => cardFooter(props.template, props.stats))
 
 const footerDate = computed(() =>
-	formatCardDate(footer.value.at, new Date(), locale.value, (date) =>
-		t('dms_mailing.common.on_date', { date }),
+	formatCardDate(
+		footer.value.at,
+		new Date(),
+		locale.value,
+		(date) => t('dms_mailing.common.on_date', { date }),
+		dateTimeFormat(CARD_DATE_FORMAT),
 	),
 )
 
@@ -107,7 +117,12 @@ const openRateLabel = computed(() =>
 
 /** "live for 1 hr" within a day, "live since Sep 27" after. */
 const liveSince = computed(() =>
-	formatCardSince(footer.value.at, new Date(), locale.value),
+	formatCardSince(
+		footer.value.at,
+		new Date(),
+		locale.value,
+		dateTimeFormat(CARD_DATE_FORMAT),
+	),
 )
 
 const FOOTER_TEXTS: Partial<Record<CardFooterKind, () => string>> = {

package/frontend-vue/app/components/TemplateDrawer.vue

@@ -5,6 +5,10 @@ import {
 	useMailingApi,
 	type TemplateDetails,
 } from '../composables/useMailingApi'
+import {
+	useTemplateContentRead,
+	useTemplatePerformanceRead,
+} from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import { apiErrorMessage } from '../utils/api-error'
 import { formatCardDate } from '../utils/gallery'
@@ -106,6 +110,8 @@ const LIFECYCLE: Record<LifecycleAction, LifecycleSpec> = {
 }
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readContent = useTemplateContentRead(templateId)
+const readPerformance = useTemplatePerformanceRead(templateId)
 const detail = ref<TemplateContentResponse | null>(null)
 const performance = ref<TemplatePerformance | null>(null)
 const loading = ref(true)
@@ -129,8 +135,8 @@ async function load(): Promise<void> {
 	loading.value = true
 	try {
 		const [content, stats] = await Promise.all([
-			api.templateContent(templateId.value),
-			api.performance(templateId.value).catch(() => null),
+			readContent(),
+			readPerformance().catch(() => null),
 		])
 		detail.value = content
 		performance.value = stats

package/frontend-vue/app/components/TemplateGallery.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useTemplateCategories } from '../composables/useTemplateCategories'
 import { useEventListener } from '@vueuse/core'
-import { useMailingApi } from '../composables/useMailingApi'
+import {
+	useTemplatesOverview,
+	useTemplateTotal,
+} from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import {
 	groupByCategory,
@@ -44,29 +47,33 @@ const ALL_TAB = 'all'
 
 const props = defineProps<TemplateGalleryProps>()
 
-const api = useMailingApi()
 const { t } = useI18n()
 const overlays = useTemplateDrawer()
 
 const { categories } = useTemplateCategories()
-const statsById = ref(new Map<string, TemplateStats>())
-const templateCount = ref<number | null>(null)
+const overview = useTemplatesOverview()
+const total = useTemplateTotal()
 
-async function loadStats(): Promise<void> {
-	const response = await api.templatesOverview().catch(() => ({ items: [] }))
-	statsById.value = new Map(response.items.map((entry) => [entry.id, entry]))
-}
+/** Each template's figures; none for a failed read. */
+const statsById = computed(
+	() =>
+		new Map<string, TemplateStats>(
+			(overview.error.value ? [] : (overview.data.value?.items ?? [])).map(
+				(entry) => [entry.id, entry],
+			),
+		),
+)
+/** How many templates the tenant has; unknown while read or once failed. */
+const templateCount = computed<number | null>(() =>
+	total.error.value ? null : (total.data.value?.total ?? null),
+)
 
-async function loadTemplates(): Promise<void> {
-	const response = await api.listTemplates().catch(() => null)
-	templateCount.value = response ? response.total : null
+/** The template count and the figures, read again with the rows. */
+function refreshFigures(): void {
+	void overview.refresh()
+	void total.refresh()
 }
 
-onMounted(() => {
-	void loadStats()
-	void loadTemplates()
-})
-
 /** The page of the table on screen: its query and its page index. */
 const viewKeyOf = (): string =>
 	JSON.stringify([props.context.query, props.context.pagination.pageIndex])
@@ -86,8 +93,7 @@ watch(
 		const isRefresh = viewKey === shownViewKey
 		shownViewKey = viewKey
 		if (!isRefresh) return
-		void loadStats()
-		void loadTemplates()
+		refreshFigures()
 	},
 )
 
@@ -157,10 +163,9 @@ const emptyDescription = computed(() =>
 		: t('dms_mailing.templates.empty.view_description'),
 )
 
+/** The rows, and with them the template count and the figures. */
 function refreshAll(): void {
 	void props.context.refresh()
-	void loadStats()
-	void loadTemplates()
 }
 
 function openRow(row: TemplateRow): void {

package/frontend-vue/app/components/TemplatePreviewFrame.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useDebounceFn, useIntersectionObserver } from '@vueuse/core'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useStarterPreviewRead } from '../composables/useMailingReads'
 import type {
 	PreviewResponse,
 	PreviewVersion,
@@ -62,6 +63,10 @@ const emit = defineEmits<{ resolved: [PreviewResponse] }>()
 const api = useMailingApi()
 const { locale: uiLocale } = useI18n()
 
+const readStarterPreview = useStarterPreviewRead(
+	() => props.starterId,
+	() => props.locale ?? uiLocale.value,
+)
 const fetchedHtml = ref('')
 const loading = ref(false)
 const height = ref(FALLBACK_HEIGHT)
@@ -86,11 +91,8 @@ useIntersectionObserver(box, ([entry]) => {
 	if (entry?.isIntersecting) isVisible.value = true
 })
 
-async function fetchStarter(starterId: string): Promise<void> {
-	const preview = await api.starterPreview(
-		starterId,
-		props.locale ?? uiLocale.value,
-	)
+async function fetchStarter(): Promise<void> {
+	const preview = await readStarterPreview()
 	fetchedHtml.value = preview.html
 }
 
@@ -111,7 +113,7 @@ async function load(): Promise<void> {
 	loading.value = true
 	try {
 		await (props.starterId
-			? fetchStarter(props.starterId)
+			? fetchStarter()
 			: fetchTemplate(props.templateId as string))
 	} catch {
 		fetchedHtml.value = ''

package/frontend-vue/app/components/TestSendModal.vue

@@ -2,6 +2,7 @@
 import FormFieldRow from '../build/components/FormFieldRow.vue'
 import FormRows from '../build/components/FormRows.vue'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateContentRead } from '../composables/useMailingReads'
 import type { SendResult, TestSendInput } from '../composables/useMailingApi'
 import { apiErrorMessage } from '../utils/api-error'
 import { sendLogRoute } from '../utils/send-link'
@@ -54,6 +55,7 @@ const { user } = useCurrentUser()
 const { uniqueLocales } = useUniqueLocales()
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readContent = useTemplateContentRead(templateId)
 const detail = ref<TemplateContentResponse | null>(null)
 const ownEmail = (user.value as SignedInUser | null)?.email
 const recipients = ref<string[]>(ownEmail ? [ownEmail] : [])
@@ -65,7 +67,7 @@ const sending = ref(false)
 onMounted(async () => {
 	if (!templateId.value) return
 	try {
-		detail.value = await api.templateContent(templateId.value)
+		detail.value = await readContent()
 		locale.value ||= detail.value.fallbackLocale
 	} catch (error) {
 		toast.add({

package/frontend-vue/app/components/VersionHistory.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
-import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateVersionsRead } from '../composables/useMailingReads'
 import type { TemplateStatus, TemplateVersionSummary } from '../types/mailing'
 import { apiErrorMessage } from '../utils/api-error'
 import {
@@ -31,7 +31,6 @@ const props = withDefaults(defineProps<VersionHistoryProps>(), {
 	locale: undefined,
 })
 
-const api = useMailingApi()
 const modal = useModal()
 const toast = useToast()
 const { confirm } = useConfirm()
@@ -39,13 +38,14 @@ const { t, locale: uiLocale } = useI18n()
 const { processApiMessage } = useTranslation()
 const previewComponent = resolveComponent(PREVIEW_COMPONENT) as Component
 
+const readVersions = useTemplateVersionsRead(() => props.templateId)
 const versions = ref<TemplateVersionSummary[]>([])
 const loading = ref(true)
 
 async function load(): Promise<void> {
 	loading.value = true
 	try {
-		versions.value = (await api.versions(props.templateId)).versions
+		versions.value = (await readVersions()).versions
 	} catch (error) {
 		toast.add({
 			color: 'error',

package/frontend-vue/app/components/WebhookStatus.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useMailingApi } from '../composables/useMailingApi'
-import { formatCardDate } from '../utils/gallery'
+import { useWebhookStatus } from '../composables/useMailingReads'
+import { CARD_DATE_FORMAT, formatCardDate } from '../utils/gallery'
 import {
 	type WebhookLineTone,
 	type WebhookStatus,
@@ -33,9 +34,14 @@ const TONE_CLASSES: Record<WebhookLineTone, string> = {
 const api = useMailingApi()
 const toast = useToast()
 const { t, locale } = useI18n()
+const { dateTimeFormat } = useRegionalFormat()
 
-const status = ref<WebhookStatus | null>(null)
-const isLoading = ref(true)
+const read = useWebhookStatus()
+/** The status read, `null` when the read failed. */
+const status = computed<WebhookStatus | null>(() =>
+	read.error.value ? null : read.data.value,
+)
+const isLoading = computed(() => !read.data.value && !read.error.value)
 const isTesting = ref(false)
 
 const lines = computed(() =>
@@ -51,17 +57,15 @@ function lineText(line: WebhookStatusLine): string {
 }
 
 function lineTime(line: WebhookStatusLine): string {
-	return line.at ? formatCardDate(line.at, new Date(), locale.value) : ''
-}
-
-async function load(): Promise<void> {
-	try {
-		status.value = await api.webhookStatus()
-	} catch {
-		status.value = null
-	} finally {
-		isLoading.value = false
-	}
+	return line.at
+		? formatCardDate(
+				line.at,
+				new Date(),
+				locale.value,
+				undefined,
+				dateTimeFormat(CARD_DATE_FORMAT),
+			)
+		: ''
 }
 
 async function sendTest(): Promise<void> {
@@ -69,7 +73,8 @@ async function sendTest(): Promise<void> {
 	isTesting.value = true
 	try {
 		const result = await api.webhookTest()
-		status.value = result.status
+		read.data.value = result.status
+		read.error.value = null
 		const message = webhookTestMessage(result)
 		toast.add({
 			color: message.color,
@@ -84,8 +89,6 @@ async function sendTest(): Promise<void> {
 		isTesting.value = false
 	}
 }
-
-onMounted(() => void load())
 </script>
 
 <template>

package/frontend-vue/app/components/editor/EditorBlockList.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import draggable from 'vuedraggable'
+import { ref } from 'vue'
 import type { Block } from '../../types/mailing'
 import { useEditorContext } from '../../composables/useEditorContext'
-import { DRAG_GROUP, DRAG_HANDLE } from '../../utils/blocks'
+import {
+	useSortableList,
+	type SortableListChange,
+} from '../../composables/useSortableList'
+import { DRAG_GROUP, DRAG_HANDLE, DRAG_ITEM } from '../../utils/blocks'
 import EditorBlock from './EditorBlock.vue'
 import EditorInsertPoint from './EditorInsertPoint.vue'
 
@@ -12,40 +16,39 @@ interface Props {
 
 const props = defineProps<Props>()
 
-interface DraggableChange {
-	added?: { element: Block }
-}
-
 const { editor } = useEditorContext()
 
-function onChange(change: DraggableChange): void {
+function onChange(change: SortableListChange<Block>): void {
 	editor.touch()
 	if (change.added) editor.select(change.added.element.id)
 }
+
+const root = ref<HTMLElement | null>(null)
+
+// The list is the editor's: a drop changes it in place, as a click does.
+useSortableList(root, () => props.list, {
+	group: DRAG_GROUP,
+	handle: DRAG_HANDLE,
+	draggable: DRAG_ITEM,
+	ghostClass: 'opacity-30',
+	onChange,
+})
 </script>
 
 <template>
-	<draggable
-		:list="props.list"
-		:group="DRAG_GROUP"
-		:handle="DRAG_HANDLE"
-		item-key="id"
-		ghost-class="opacity-30"
-		class="flex flex-col"
-		@change="onChange"
-	>
-		<template #item="{ element, index }">
-			<div>
-				<EditorInsertPoint :list="props.list" :index="index" />
-				<EditorBlock :block="element" :index="index" :list="props.list" />
-			</div>
-		</template>
-		<template #footer>
-			<EditorInsertPoint
-				:list="props.list"
-				:index="props.list.length"
-				:is-empty="props.list.length === 0"
-			/>
-		</template>
-	</draggable>
+	<div ref="root" class="flex flex-col">
+		<div
+			v-for="(element, index) in props.list"
+			:key="element.id"
+			data-drag-item
+		>
+			<EditorInsertPoint :list="props.list" :index="index" />
+			<EditorBlock :block="element" :index="index" :list="props.list" />
+		</div>
+		<EditorInsertPoint
+			:list="props.list"
+			:index="props.list.length"
+			:is-empty="props.list.length === 0"
+		/>
+	</div>
 </template>