Merge pull request #17217 from misskey-dev/develop

Release: 2026.3.0

2 files changed, 21 insertions, 24 deletions

diff --git a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
index f191320180..18f6c40013 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
@@ -4,36 +4,41 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<Sortable :modelValue="modelValue" tag="div" itemKey="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swapThreshold="0.5" @update:modelValue="v => emit('update:modelValue', v)">
-	<template #item="{element}">
-		<div :class="$style.item">
-			<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
-			<component :is="getComponent(element.type)" :modelValue="element" @update:modelValue="updateItem" @remove="() => removeItem(element)"/>
+<MkDraggable
+	:modelValue="modelValue"
+	direction="vertical"
+	withGaps
+	canNest
+	group="pageBlocks"
+	@update:modelValue="v => emit('update:modelValue', v)"
+>
+	<template #default="{ item }">
+		<div>
+			<!-- divが無いとエラーになる -->
+			<component :is="getComponent(item.type) as any" :modelValue="item" @update:modelValue="updateItem" @remove="() => removeItem(item)"/>
 		</div>
 	</template>
-</Sortable>
+</MkDraggable>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
 import XSection from './els/page-editor.el.section.vue';
 import XText from './els/page-editor.el.text.vue';
 import XImage from './els/page-editor.el.image.vue';
 import XNote from './els/page-editor.el.note.vue';
+import MkDraggable from '@/components/MkDraggable.vue';
 
-function getComponent(type: string) {
+function getComponent(type: Misskey.entities.Page['content'][number]['type']) {
 	switch (type) {
 		case 'section': return XSection;
 		case 'text': return XText;
 		case 'image': return XImage;
 		case 'note': return XNote;
-		default: return null;
+		default: return XText;
 	}
 }
 
-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
-
 const props = defineProps<{
 	modelValue: Misskey.entities.Page['content'];
 }>();
@@ -42,7 +47,7 @@ const emit = defineEmits<{
 	(ev: 'update:modelValue', value: Misskey.entities.Page['content']): void;
 }>();
 
-function updateItem(v) {
+function updateItem(v: Misskey.entities.PageBlock) {
 	const i = props.modelValue.findIndex(x => x.id === v.id);
 	const newValue = [
 		...props.modelValue.slice(0, i),
@@ -52,8 +57,8 @@ function updateItem(v) {
 	emit('update:modelValue', newValue);
 }
 
-function removeItem(el) {
-	const i = props.modelValue.findIndex(x => x.id === el.id);
+function removeItem(v: Misskey.entities.PageBlock) {
+	const i = props.modelValue.findIndex(x => x.id === v.id);
 	const newValue = [
 		...props.modelValue.slice(0, i),
 		...props.modelValue.slice(i + 1),
@@ -61,11 +66,3 @@ function removeItem(el) {
 	emit('update:modelValue', newValue);
 }
 </script>
-
-<style lang="scss" module>
-.item {
-	& + .item {
-		margin-top: 16px;
-	}
-}
-</style>
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index 3b36f7fa2d..85871c993c 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -247,9 +247,9 @@ async function add() {
 	}
 }
 
-function setEyeCatchingImage(img: Event) {
+function setEyeCatchingImage(ev: PointerEvent) {
 	selectFile({
-		anchorElement: img.currentTarget ?? img.target,
+		anchorElement: ev.currentTarget ?? ev.target,
 		multiple: false,
 	}).then(file => {
 		eyeCatchingImageId.value = file.id;