diff --git a/src/components/Dialogs/ImageDetailModal.tsx b/src/components/Dialogs/ImageDetailModal.tsx index 7e34563..459f0d3 100644 --- a/src/components/Dialogs/ImageDetailModal.tsx +++ b/src/components/Dialogs/ImageDetailModal.tsx @@ -36,7 +36,14 @@ const ImageDetailModal: React.FC = ({ modalController, im - + {image.alt} diff --git a/src/components/Dialogs/LinkModal.tsx b/src/components/Dialogs/LinkModal.tsx index 2c249ad..901bd0a 100644 --- a/src/components/Dialogs/LinkModal.tsx +++ b/src/components/Dialogs/LinkModal.tsx @@ -19,9 +19,9 @@ import { import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'; import styled from '@emotion/styled'; import { RiArrowRightLine, RiDeleteBin2Line, RiMenuLine } from '@remixicon/react'; -import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable'; +import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; -import { DndContext, DragEndEvent } from '@dnd-kit/core'; +import { DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'; import Colors from '../../styles/Colors'; import { SchemaType } from '../../types/type-util'; import { Space } from '../Space'; @@ -98,6 +98,16 @@ const LinkModal: React.FC = ({ modalController, dataId }) => { isClosable: true, position: 'top-left' }); + const sensors = useSensors( + useSensor(PointerSensor, { + activationConstraint: { + distance: 5 + } + }), + useSensor(KeyboardSensor, { + coordinateGetter: sortableKeyboardCoordinates + }) + ); const fetchData = useCallback( async (id: number) => { @@ -197,7 +207,7 @@ const LinkModal: React.FC = ({ modalController, dataId }) => { - + i.id.toString())}> {fields.map((field, index) => (